|
@@ -4,13 +4,14 @@ import Map from '@/components/map';
|
|
import TopNavigator from '@/components/topNavigator';
|
|
import TopNavigator from '@/components/topNavigator';
|
|
import RunNavRight from './components/topNavRight';
|
|
import RunNavRight from './components/topNavRight';
|
|
import { FormattedMessage, history } from 'umi';
|
|
import { FormattedMessage, history } from 'umi';
|
|
|
|
+import { Popover } from 'antd';
|
|
import styles from './index.less';
|
|
import styles from './index.less';
|
|
import mapstyles from '@/assets/css/map.less';
|
|
import mapstyles from '@/assets/css/map.less';
|
|
import Icon from '@/tenants-ui/Icon';
|
|
import Icon from '@/tenants-ui/Icon';
|
|
import SearchInput from '@/components/SearchInput';
|
|
import SearchInput from '@/components/SearchInput';
|
|
import moment from 'moment';
|
|
import moment from 'moment';
|
|
|
|
|
|
-import { queryDeviceTimeManage } from '@/services/ant-design-pro/environment';
|
|
|
|
|
|
+import { getMapList, queryDeviceTimeManage } from '@/services/ant-design-pro/environment';
|
|
|
|
|
|
type runtimeNavType = {
|
|
type runtimeNavType = {
|
|
normalRun: any;
|
|
normalRun: any;
|
|
@@ -21,11 +22,15 @@ type runtimeNavType = {
|
|
const Runtime: React.FC = () => {
|
|
const Runtime: React.FC = () => {
|
|
// const { maptemp6 } = equipImageMap;
|
|
// const { maptemp6 } = equipImageMap;
|
|
|
|
|
|
- const [searchText, setSearchText] = useState<string>();
|
|
|
|
|
|
+ const [searchText, setSearchText] = useState<{ text: any }>();
|
|
const [runtimeNav, setRuntimeNav] = useState<runtimeNavType>({});
|
|
const [runtimeNav, setRuntimeNav] = useState<runtimeNavType>({});
|
|
- //const [mapList, setMapList] = useState<API.MapInfo[]>([]);
|
|
|
|
|
|
+ const [mapList, setMapList] = useState<API.MapInfo[]>([]);
|
|
|
|
+ const [mapCombineList, setMapCombineList] = useState<any[]>([]);
|
|
const [selFloorId, setSelFloorId] = useState<string>();
|
|
const [selFloorId, setSelFloorId] = useState<string>();
|
|
const [selTime, setSelTime] = useState<string>(moment().format('YYYYMMDD'));
|
|
const [selTime, setSelTime] = useState<string>(moment().format('YYYYMMDD'));
|
|
|
|
+ const [spaceTimeList, setSpaceTimeList] = useState<any[]>([]);
|
|
|
|
+
|
|
|
|
+ //楼层切换的回调
|
|
const changeFloorId = (data: string) => {
|
|
const changeFloorId = (data: string) => {
|
|
debugger;
|
|
debugger;
|
|
setSelFloorId(data);
|
|
setSelFloorId(data);
|
|
@@ -34,19 +39,34 @@ const Runtime: React.FC = () => {
|
|
history.push('/runtime/recordList');
|
|
history.push('/runtime/recordList');
|
|
console.log('showR');
|
|
console.log('showR');
|
|
};
|
|
};
|
|
|
|
+ //时间切换的回调
|
|
const changeTime = (time) => {
|
|
const changeTime = (time) => {
|
|
debugger;
|
|
debugger;
|
|
- var timeStr = time.format('YYYYDMMDD');
|
|
|
|
|
|
+ var timeStr = time.format('YYYYMMDD');
|
|
setSelTime(timeStr);
|
|
setSelTime(timeStr);
|
|
};
|
|
};
|
|
|
|
+ //获取地图 mapList
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ if (selFloorId) {
|
|
|
|
+ getMapList({ floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454', projectId: '' }).then(
|
|
|
|
+ (res) => {
|
|
|
|
+ debugger;
|
|
|
|
+ var data: API.MapInfo[] = (res.data || {}).spaceList || [];
|
|
|
|
+ setMapList(data);
|
|
|
|
+ },
|
|
|
|
+ );
|
|
|
|
+ }
|
|
|
|
+ }, [selFloorId]);
|
|
|
|
+
|
|
|
|
+ //获取时间列表 spaceTimeList
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
if (selFloorId && selTime) {
|
|
if (selFloorId && selTime) {
|
|
- debugger;
|
|
|
|
|
|
+ //debugger;
|
|
queryDeviceTimeManage({
|
|
queryDeviceTimeManage({
|
|
//floorId: selFloorId,
|
|
//floorId: selFloorId,
|
|
floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
|
|
floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
|
|
- date: selTime,
|
|
|
|
- //date: 20220212,
|
|
|
|
|
|
+ //date: selTime,
|
|
|
|
+ date: 20220212,
|
|
}).then(function (res) {
|
|
}).then(function (res) {
|
|
debugger;
|
|
debugger;
|
|
var resdata = res || {};
|
|
var resdata = res || {};
|
|
@@ -56,20 +76,53 @@ const Runtime: React.FC = () => {
|
|
overtimeBook: resdata.meetTimeNum,
|
|
overtimeBook: resdata.meetTimeNum,
|
|
});
|
|
});
|
|
var resList = res.content || [];
|
|
var resList = res.content || [];
|
|
- resList.forEach((item) => {
|
|
|
|
- item.runTimeStatus = 'normalRun';
|
|
|
|
- if (item.hasOwnProperty('meetTime')) {
|
|
|
|
- debugger;
|
|
|
|
- item.runTimeStatus = 'overtimeBook';
|
|
|
|
|
|
+ resList.forEach((ritem) => {
|
|
|
|
+ ritem.runTimeStatus = 'normalRun';
|
|
|
|
+ var timeList = [];
|
|
|
|
+ if (ritem.hasOwnProperty('workTimeStartTime')) {
|
|
|
|
+ var timeStrArr = [ritem.workTimeStartTime, ritem.workTimeEndTime];
|
|
|
|
+ timeList.push(timeStrArr);
|
|
}
|
|
}
|
|
- if (item.hasOwnProperty('overTimeStartTime')) {
|
|
|
|
- debugger;
|
|
|
|
- item.runTimeStatus = 'overtimeWork';
|
|
|
|
|
|
+ if (ritem.hasOwnProperty('meetTime')) {
|
|
|
|
+ ritem.runTimeStatus = 'overtimeBook';
|
|
|
|
+ ritem.meetTime.forEach((meetitem) => {
|
|
|
|
+ var timeStrArr = [meetitem.meetTimeStartTime, meetitem.meetTimeEndTime];
|
|
|
|
+ timeList.push(timeStrArr);
|
|
|
|
+ });
|
|
}
|
|
}
|
|
|
|
+ if (ritem.hasOwnProperty('overTimeStartTime')) {
|
|
|
|
+ var timeStrArr = [ritem.overTimeStartTime, ritem.overTimeEndTime];
|
|
|
|
+ timeList.push(timeStrArr);
|
|
|
|
+ ritem.runTimeStatus = 'overtimeWork';
|
|
|
|
+ }
|
|
|
|
+ ritem.showTimeList = timeList;
|
|
|
|
+ ritem.showTimeStr =
|
|
|
|
+ timeList.length > 0 ? timeList[0][0] + '-' + timeList[timeList.length - 1][1] : '';
|
|
});
|
|
});
|
|
|
|
+ setSpaceTimeList(resList);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}, [selFloorId, selTime]);
|
|
}, [selFloorId, selTime]);
|
|
|
|
+
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ //mapList,spaceTimeList 这两个数据的结合
|
|
|
|
+ debugger;
|
|
|
|
+ console.log('dfsd-------', mapList, spaceTimeList);
|
|
|
|
+ if (mapList && mapList.length > 0 && spaceTimeList && spaceTimeList.length > 0) {
|
|
|
|
+ var combineList = [];
|
|
|
|
+ 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 (
|
|
return (
|
|
<>
|
|
<>
|
|
<PageHeader
|
|
<PageHeader
|
|
@@ -82,8 +135,9 @@ const Runtime: React.FC = () => {
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
<SearchInput
|
|
<SearchInput
|
|
|
|
+ mapList={mapList}
|
|
onSearch={(s) => {
|
|
onSearch={(s) => {
|
|
- setSearchText(s);
|
|
|
|
|
|
+ setSearchText({ text: s });
|
|
}}
|
|
}}
|
|
/>
|
|
/>
|
|
}
|
|
}
|
|
@@ -116,6 +170,7 @@ const Runtime: React.FC = () => {
|
|
<Map
|
|
<Map
|
|
searchText={searchText}
|
|
searchText={searchText}
|
|
selFloorId={selFloorId}
|
|
selFloorId={selFloorId}
|
|
|
|
+ mapList={mapCombineList}
|
|
type={'runtime'}
|
|
type={'runtime'}
|
|
render={(item, index) => {
|
|
render={(item, index) => {
|
|
return (
|
|
return (
|
|
@@ -128,17 +183,35 @@ const Runtime: React.FC = () => {
|
|
width: item.width,
|
|
width: item.width,
|
|
height: item.height,
|
|
height: item.height,
|
|
backgroundColor:
|
|
backgroundColor:
|
|
- item.runTimeStatus == 'normalRun'
|
|
|
|
- ? 'rgba(196, 196, 196, 0.2)'
|
|
|
|
|
|
+ item.runTimeStatus == 'overtimeBook'
|
|
|
|
+ ? 'rgba(0, 220, 35, 0.2)'
|
|
: item.runTimeStatus == 'overtimeWork'
|
|
: item.runTimeStatus == 'overtimeWork'
|
|
? 'rgba(94, 139, 207, 0.2)'
|
|
? 'rgba(94, 139, 207, 0.2)'
|
|
- : 'rgba(0, 220, 35, 0.2)',
|
|
|
|
|
|
+ : 'rgba(196, 196, 196, 0.2)',
|
|
}}
|
|
}}
|
|
>
|
|
>
|
|
<div className={mapstyles.allTime}>
|
|
<div className={mapstyles.allTime}>
|
|
- {(item.timeList || []).map(function (titem: string, tindex: number) {
|
|
|
|
|
|
+ {/* {(item.timeList || []).map(function (titem: string, tindex: number) {
|
|
return <span key={tindex + 'time'}>{titem},</span>;
|
|
return <span key={tindex + 'time'}>{titem},</span>;
|
|
- })}
|
|
|
|
|
|
+ })} */}
|
|
|
|
+ {item.showTimeList && item.showTimeList.length > 1 && (
|
|
|
|
+ <Popover
|
|
|
|
+ content={(item.showTimeList || []).map((timeItem) => {
|
|
|
|
+ return (
|
|
|
|
+ <div>
|
|
|
|
+ {timeItem[0]}-{timeItem[1]}
|
|
|
|
+ </div>
|
|
|
|
+ );
|
|
|
|
+ })}
|
|
|
|
+ trigger="hover"
|
|
|
|
+ style={{ color: 'none' }}
|
|
|
|
+ >
|
|
|
|
+ <span>{item.showTimeStr}</span>
|
|
|
|
+ </Popover>
|
|
|
|
+ )}
|
|
|
|
+ {item.showTimeList && item.showTimeList.length == 1 && (
|
|
|
|
+ <span>{item.showTimeStr}</span>
|
|
|
|
+ )}
|
|
</div>
|
|
</div>
|
|
<div className={mapstyles.content}>
|
|
<div className={mapstyles.content}>
|
|
<Icon className="" type={item.roomFuncType} style={{ fontSize: 20 }}></Icon>
|
|
<Icon className="" type={item.roomFuncType} style={{ fontSize: 20 }}></Icon>
|