123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402 |
- import React, { useState, useEffect, useCallback, useRef } from 'react';
- import PageHeader from '@/sagacare_components/PageHeader';
- import Map from '@/sagacare_components/map';
- import TopNavigator from '@/sagacare_components/topNavigator';
- import RunNavRight from './components/topNavRight';
- import { FormattedMessage, history, useModel } from 'umi';
- import { Spin } from 'antd';
- import { Popover } from 'antd';
- import styles from './index.less';
- import mapstyles from '@/sagacare_components/map/index.less';
- import Icon from '@/tenants-ui/SgIcon';
- import SearchInput from '@/sagacare_components/SearchInput';
- import moment from 'moment';
- import cx from 'classnames';
- import { getMaxScale } from '@/hooks/useMap';
- import { getMapList, queryDeviceTimeManage } from '@/services/sagacare_service/environment';
- type runtimeNavType = {
- normalRun: any;
- overtimeWork: number;
- meetingBook: number;
- };
- const Runtime: React.FC = () => {
- // const { maptemp6 } = equipImageMap;
- const { changeLastFloorId } = useModel('sagacare_buildFloor');
- const { searchSpace } = useModel('sagacare_searchInfo');
- const { getSpaceFunc } = useModel('sagacare_spaceFunc');
- const [loading, setLoading] = useState<boolean>(false);
- const [runtimeNav, setRuntimeNav] = useState<runtimeNavType>({});
- const [mapList, setMapList] = useState<API.MapInfo[]>([]);
- const mapListCopy = useRef<any[]>();
- const [mapSize, setMapSize] = useState<any>({});
- const [scale, setScale] = useState<number>(0.8);
- const [maxScale, setMaxScale] = useState<number>(1);
- const [transXInit, setTransXInit] = useState<number>(0);
- const [mapCombineList, setMapCombineList] = useState<any[]>([]);
- const [selFloorId, setSelFloorId] = useState<string>();
- const [selTime, setSelTime] = useState<string>(moment().format('YYYYMMDD'));
- const [spaceTimeList, setSpaceTimeList] = useState<any[]>([]);
- //楼层切换的回调
- const changeFloorId = (data: string) => {
- setSelFloorId(data);
- };
- const checkRecord = () => {
- history.push('/runtime/recordList');
- console.log('showR');
- };
- //时间切换的回调
- const changeTime = (time) => {
- var timeStr = time.format('YYYYMMDD');
- setSelTime(timeStr);
- };
- //获取地图 mapList
- useEffect(() => {
- if (selFloorId) {
- changeLastFloorId(selFloorId);
- setLoading(true);
- getMapList({
- floorId: selFloorId,
- //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
- })
- .then((res) => {
- setLoading(false);
- var data: API.MapInfo[] = (res.data || {}).spaceList || [];
- var bodyWidth = document.body.offsetWidth;
- var mapWidth = (res.data || {}).width || 800;
- if (mapWidth < bodyWidth) {
- var mscale = 1;
- setTransXInit((bodyWidth - mapWidth) / 2);
- } else {
- var mscale = Number((bodyWidth / mapWidth).toFixed(4));
- setTransXInit(0);
- }
- var mapSize: any = {
- width: mapWidth * mscale,
- height: (res.data || {}).height * mscale,
- };
- setMapSize(mapSize);
- data.forEach((item, index) => {
- item.width = item.width * mscale;
- item.height = item.height * mscale;
- item.left = item.left * mscale;
- item.top = item.top * mscale;
- });
- var maxScaleTemp = getMaxScale(data);
- setMaxScale(maxScaleTemp);
- setMapList(data);
- mapListCopy.current = data;
- })
- .catch(() => {
- setLoading(false);
- });
- } else {
- setMapList([]);
- }
- }, [selFloorId]);
- const changeMapList = useCallback(
- (scale, moveWidth, moveHeight) => {
- setScale(scale);
- var mapListTemp = JSON.parse(JSON.stringify(mapListCopy.current));
- var mapListTemp2 = mapListTemp.map((item, index) => {
- if (index == 0) {
- console.log('mapListTemp', scale, item.width, item.width * scale);
- }
- item.width = item.width * scale;
- item.height = item.height * scale;
- item.left = item.left * scale - moveWidth;
- item.top = item.top * scale - moveHeight;
- return item;
- });
- setMapList(mapListTemp2);
- },
- [mapListCopy],
- );
- const getDeviceTime = () => {
- setLoading(true);
- queryDeviceTimeManage({
- floorId: selFloorId,
- //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
- date: selTime,
- })
- .then(function (res) {
- setLoading(false);
- if (!setTimer.current) return;
- var resdata = res || {};
- setRuntimeNav({
- normalRun: resdata.workTimeNum,
- overtimeWork: resdata.overTimeNum,
- meetingBook: resdata.meetTimeNum,
- });
- var resList = res.content || [];
- resList.forEach((ritem) => {
- ritem.runTimeStatus = ''; //正常工作
- ritem.hasWorkTime = false;
- var timeList = [];
- var allTimeArr = [];
- if (ritem.hasOwnProperty('workTimeStartTime')) {
- // var timeStrArr = [ritem.workTimeStartTime, ritem.workTimeEndTime];
- //timeList.push(timeStrArr);
- ritem.hasWorkTime = true;
- allTimeArr.push(ritem.workTimeStartTime, ritem.workTimeEndTime);
- }
- if (ritem.hasOwnProperty('meetTime')) {
- ritem.runTimeStatus = 'meetingBook'; //会议预约
- ritem.meetTime.forEach((meetitem) => {
- var timeStrArr = [meetitem.meetTimeStartTime, meetitem.meetTimeEndTime];
- timeList.push(timeStrArr);
- allTimeArr.push(meetitem.meetTimeStartTime, meetitem.meetTimeEndTime);
- });
- }
- if (ritem.hasOwnProperty('overTime')) {
- ritem.runTimeStatus = 'overtimeWork'; //加班
- ritem.overTime.forEach((overitem) => {
- var timeStrArr = [overitem.overTimeStartTime, overitem.overTimeEndTime];
- timeList.push(timeStrArr);
- allTimeArr.push(overitem.overTimeStartTime, overitem.overTimeEndTime);
- });
- }
- ritem.showTimeList = timeList;
- allTimeArr.sort((a, b) => {
- var a1 = Date.parse('2008-08-08 ' + a);
- var b1 = Date.parse('2008-08-08 ' + b);
- return a1 - b1;
- });
- ritem.showTimeStr =
- allTimeArr.length > 1 ? allTimeArr[0] + '-' + allTimeArr[allTimeArr.length - 1] : '';
- });
- setSpaceTimeList(resList);
- })
- .catch(() => {
- setLoading(false);
- });
- };
- let setTimer = useRef<Timer>(null);
- //获取时间列表 spaceTimeList
- useEffect(() => {
- if (selFloorId && selTime) {
- //setLoading(true);
- getDeviceTime(); //第一次执行
- if (setTimer.current) {
- clearInterval(setTimer.current);
- setTimer.current = null;
- }
- //循环调接口
- setTimer.current = setInterval(() => {
- //getDeviceTime();
- }, 10000);
- return () => {
- clearInterval(setTimer.current);
- setTimer.current = null;
- };
- }
- }, [selFloorId, selTime]);
- useEffect(() => {
- //mapList,spaceTimeList 这两个数据的结合
- //console.log('dfsd-------');
- // if (mapList && mapList.length > 0 && spaceTimeList && spaceTimeList.length > 0) {
- var combineList: any = [];
- mapList.map(function (mitem) {
- var spaceId = mitem.spaceId;
- var filterSpace = spaceTimeList.filter((ele) => {
- return ele.id == spaceId;
- });
- var combine = Object.assign({}, mitem, filterSpace[0]);
- combineList.push(combine);
- });
- setMapCombineList(combineList);
- // }
- }, [mapList, spaceTimeList]);
- return (
- <>
- <PageHeader
- title={<FormattedMessage id="menu.runtime" />}
- action={
- // <div className={styles.headerRight}>
- // <div className={styles.check} onClick={checkRecord} style={{ display: 'none' }}>
- // <Icon className="" style={{ marginRight: 6 }} type="document" />
- // <span>查看加班记录</span>
- // </div>
- // </div>
- <SearchInput />
- }
- />
- <TopNavigator
- type={'runtime'}
- action={<RunNavRight runtimeNav={runtimeNav} changeTime={changeTime}></RunNavRight>}
- changeFloorId={changeFloorId}
- ></TopNavigator>
- <div className={styles.maptop}>
- <div className={styles.right}></div>
- </div>
- {/* <div className={styles.map}>
- <div className={styles.specialRoom}></div>
- <img src={mapImg}></img>
- </div> */}
- {/* <div
- className={mapstyles.house}
- style={{
- width: 180,
- height: 100,
- }}
- >
- <div className={mapstyles.allTime}>08:00-23:00</div>
- <div className={mapstyles.content}>
- <Icon className="" type="office" style={{ fontSize: 20 }}></Icon>
- <div className={mapstyles.name}>Jozy Zone</div>
- </div>
- </div> */}
- <Spin spinning={loading} wrapperClassName={mapstyles.spinnclass}>
- <Map
- mapList={mapCombineList}
- maxscale={maxScale}
- transXInit={transXInit}
- changeMapList={changeMapList}
- mapSize={mapSize}
- selFloorId={selFloorId}
- type={'runtime'}
- render={(item, index) => {
- return (
- <div
- className={mapstyles.houseWrap}
- key={index + 'house'}
- style={{
- left: item.left,
- top: item.top,
- width: item.width,
- height: item.height,
- }}
- >
- <div
- key={index + 'house'}
- className={cx(mapstyles.house, {
- [mapstyles.notclick]: !item.roomFuncType,
- [mapstyles.searchSel]: item.spaceId && item.spaceId === searchSpace.spaceId,
- })}
- style={{
- background: item.roomFuncType
- ? item.runTimeStatus == 'meetingBook'
- ? 'rgba(0, 220, 35, 0.2)'
- : item.runTimeStatus == 'overtimeWork'
- ? 'rgba(94, 139, 207, 0.2)'
- : 'rgba(196, 196, 196, 0.2)'
- : '',
- }}
- >
- <div className={mapstyles.allTime}>
- {/* {(item.timeList || []).map(function (titem: string, tindex: number) {
- return <span key={tindex + 'time'}>{titem},</span>;
- })} */}
- {item.showTimeList && item.showTimeList.length > 0 && (
- <Popover
- content={
- <div>
- {item.hasWorkTime && (
- <>
- <div className={styles.popTitle}>工作时间:</div>
- <div>
- {item.workTimeStartTime}-{item.workTimeEndTime}
- </div>
- </>
- )}
- <div className={styles.popTitle}>
- {item.runTimeStatus == 'overtimeWork' ? '加班时间' : '会议时间'}:
- </div>
- {(item.showTimeList || []).map((timeItem, index) => {
- // if (index > 0) {
- return (
- <div key={'time' + index}>
- {timeItem[0]}-{timeItem[1]}
- </div>
- );
- // }
- })}
- </div>
- }
- trigger="hover"
- style={{ color: 'none' }}
- >
- <span
- className={cx({
- [mapstyles.overworkTime]: item.runTimeStatus == 'overtimeWork',
- [mapstyles.meetTime]: item.runTimeStatus == 'meetingBook',
- })}
- >
- {item.showTimeStr}
- </span>
- </Popover>
- )}
- {item.showTimeList && item.showTimeList.length == 0 && (
- <span title={item.showTimeStr}>{item.showTimeStr}</span>
- )}
- </div>
- <div className={mapstyles.content}>
- <Icon
- className=""
- type={getSpaceFunc(item.roomFuncType)}
- style={{
- fontSize: 18,
- display: item.width > 28 && item.height > 50 ? 'block' : 'none',
- }}
- ></Icon>
- <div
- className={mapstyles.name}
- style={{
- display:
- (item.width > 64 && item.height > 80) ||
- item.height > 140 ||
- item.width > 120 ||
- scale == maxScale
- ? 'block'
- : 'none',
- }}
- >
- {item.localName}
- </div>
- {(getSpaceFunc(item.roomFuncType) || item.localName) &&
- !(
- (getSpaceFunc(item.roomFuncType) && item.width > 28 && item.height > 50) ||
- (item.localName &&
- ((item.width > 64 && item.height > 80) ||
- item.height > 140 ||
- item.width > 120 ||
- scale == maxScale))
- ) && <div className={mapstyles.pointer}>.</div>}
- </div>
- </div>
- </div>
- );
- }}
- ></Map>
- </Spin>
- </>
- );
- };
- export default Runtime;
|