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(false); const [runtimeNav, setRuntimeNav] = useState({}); const [mapList, setMapList] = useState([]); const mapListCopy = useRef(); const [mapSize, setMapSize] = useState({}); const [scale, setScale] = useState(0.8); const [maxScale, setMaxScale] = useState(1); const [transXInit, setTransXInit] = useState(0); const [mapCombineList, setMapCombineList] = useState([]); const [selFloorId, setSelFloorId] = useState(); const [selTime, setSelTime] = useState(moment().format('YYYYMMDD')); const [spaceTimeList, setSpaceTimeList] = useState([]); //楼层切换的回调 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(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 ( <> } action={ //
//
// // 查看加班记录 //
//
} /> } changeFloorId={changeFloorId} >
{/*
*/} {/*
08:00-23:00
Jozy Zone
*/} { return (
{/* {(item.timeList || []).map(function (titem: string, tindex: number) { return {titem},; })} */} {item.showTimeList && item.showTimeList.length > 0 && ( {item.hasWorkTime && ( <>
工作时间:
{item.workTimeStartTime}-{item.workTimeEndTime}
)}
{item.runTimeStatus == 'overtimeWork' ? '加班时间' : '会议时间'}:
{(item.showTimeList || []).map((timeItem, index) => { // if (index > 0) { return (
{timeItem[0]}-{timeItem[1]}
); // } })}
} trigger="hover" style={{ color: 'none' }} > {item.showTimeStr} )} {item.showTimeList && item.showTimeList.length == 0 && ( {item.showTimeStr} )}
28 && item.height > 50 ? 'block' : 'none', }} >
64 && item.height > 80) || item.height > 140 || item.width > 120 || scale == maxScale ? 'block' : 'none', }} > {item.localName}
{(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)) ) &&
.
}
); }} >
); }; export default Runtime;