|
@@ -10,19 +10,31 @@ import DeviceModal from './components/deviceModal';
|
|
|
|
|
|
import styles from './index.less';
|
|
|
import mapstyles from '@/assets/css/map.less';
|
|
|
+import { Spin } from 'antd';
|
|
|
|
|
|
import { equipImageMap } from '@/config/image.js';
|
|
|
import Icon from '@/tenants-ui/Icon';
|
|
|
import type { navigatorItem } from '@/pages/Environment/index';
|
|
|
-import { getMapList, queryDeviceTimeManage } from '@/services/ant-design-pro/environment';
|
|
|
+import { getMapList, queryEquipStatistics } from '@/services/ant-design-pro/environment';
|
|
|
|
|
|
+//设备状态
|
|
|
+type equipStatus = {
|
|
|
+ equipType: string;
|
|
|
+ status: number;
|
|
|
+};
|
|
|
+//设备开启数量
|
|
|
+type statistics = {
|
|
|
+ equipType: string;
|
|
|
+ runCount: number;
|
|
|
+};
|
|
|
const Environment: React.FC = () => {
|
|
|
const { getSpaceFunc } = useModel('spaceFunc');
|
|
|
const { envir_all, equip_air, equip_lamp, envir_curtain } = equipImageMap;
|
|
|
|
|
|
const [searchText, setSearchText] = useState<{ text: any }>();
|
|
|
const [showModal, setShowModal] = useState<boolean>(false);
|
|
|
- const [navigatorList] = useState<navigatorItem[]>([
|
|
|
+ const [showSpace, setShowSpace] = useState<API.MapInfo>({});
|
|
|
+ const [navigatorList, setNavigatorList] = useState<navigatorItem[]>([
|
|
|
{
|
|
|
name: '全部设备',
|
|
|
id: 'all',
|
|
@@ -35,15 +47,15 @@ const Environment: React.FC = () => {
|
|
|
name: '空调',
|
|
|
id: 'airConditioner',
|
|
|
src: equip_air,
|
|
|
- num: 11,
|
|
|
+ num: 0,
|
|
|
color: '#5E8BCF',
|
|
|
colorStr: '94,139,207,',
|
|
|
},
|
|
|
{
|
|
|
name: '照明',
|
|
|
- id: 'lamp',
|
|
|
+ id: 'light',
|
|
|
src: equip_lamp,
|
|
|
- num: 10,
|
|
|
+ num: 0,
|
|
|
color: '#FFE823',
|
|
|
colorStr: '255,232,35,',
|
|
|
},
|
|
@@ -51,14 +63,17 @@ const Environment: React.FC = () => {
|
|
|
name: '窗帘',
|
|
|
id: 'curtain',
|
|
|
src: envir_curtain,
|
|
|
- num: 50,
|
|
|
+ num: 0,
|
|
|
color: '#E89E32',
|
|
|
colorStr: '232, 158, 50,',
|
|
|
},
|
|
|
]);
|
|
|
const [mapList, setMapList] = useState<API.MapInfo[]>([]);
|
|
|
+ const [equipMapList, setEquipMapList] = useState<any[]>([]);
|
|
|
const [selNav, setSelNav] = useState<navigatorItem>(navigatorList[0]);
|
|
|
const [selFloorId, setSelFloorId] = useState<string>();
|
|
|
+ const [mapCombineList, setMapCombineList] = useState<any[]>([]);
|
|
|
+ const [loading, setLoading] = useState<boolean>(true);
|
|
|
|
|
|
const changeFloorId = (data: string) => {
|
|
|
//debugger;
|
|
@@ -67,22 +82,18 @@ const Environment: React.FC = () => {
|
|
|
//导航条切换
|
|
|
const navigatorChange = (item: navigatorItem) => {
|
|
|
//debugger;
|
|
|
- if (item.id == 'all') {
|
|
|
- }
|
|
|
- if (item.id == 'airConditioner') {
|
|
|
- }
|
|
|
- if (item.id == 'lamp') {
|
|
|
- }
|
|
|
setSelNav(item);
|
|
|
};
|
|
|
- const showModalClick = () => {
|
|
|
+ const showModalClick = (item) => {
|
|
|
console.log('showChart');
|
|
|
setShowModal(true);
|
|
|
+
|
|
|
+ setShowSpace(item);
|
|
|
};
|
|
|
|
|
|
- //当前设备的状态 all全部开启 part部分开启 close全都关闭 还有类型type 包括airConditioner lamp curtain
|
|
|
+ //当前设备的状态 all全部开启 part部分开启 close全都关闭 还有类型type 包括airConditioner light curtain
|
|
|
//根据设备状态返回不同的 颜色
|
|
|
- const getColorOpacity = (value: string, type?: string): string => {
|
|
|
+ const getColorOpacity = (value: number, type?: string): string => {
|
|
|
//debugger;
|
|
|
let colorStr = '';
|
|
|
if (selNav.id == 'all') {
|
|
@@ -94,26 +105,76 @@ const Environment: React.FC = () => {
|
|
|
} else {
|
|
|
colorStr = selNav.colorStr;
|
|
|
}
|
|
|
- if (value == 'part') {
|
|
|
+ if (value == 2) {
|
|
|
+ //2 是部分开启
|
|
|
return 'rgba(' + colorStr + '0.4)';
|
|
|
- } else if (value == 'all') {
|
|
|
+ } else if (value == 1) {
|
|
|
+ //1 是开启
|
|
|
return 'rgba(' + colorStr + '1)';
|
|
|
} else {
|
|
|
+ //0是关闭
|
|
|
return 'rgba(196, 196, 196, 0.6)';
|
|
|
}
|
|
|
};
|
|
|
//获取地图 mapList
|
|
|
useEffect(() => {
|
|
|
if (selFloorId) {
|
|
|
- getMapList({ floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454', projectId: '' }).then(
|
|
|
- (res) => {
|
|
|
+ getMapList({ floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454' }).then((res) => {
|
|
|
+ //debugger;
|
|
|
+ var data: API.MapInfo[] = (res.data || {}).spaceList || [];
|
|
|
+ setMapList(data);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, [selFloorId]);
|
|
|
+ useEffect(() => {
|
|
|
+ if (selFloorId) {
|
|
|
+ setLoading(true);
|
|
|
+ queryEquipStatistics({
|
|
|
+ floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
|
|
|
+ projectId: 'Pj1101080259',
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
//debugger;
|
|
|
- var data: API.MapInfo[] = (res.data || {}).spaceList || [];
|
|
|
- setMapList(data);
|
|
|
- },
|
|
|
- );
|
|
|
+ setLoading(false);
|
|
|
+ var statistics = res.data.statistics || [];
|
|
|
+ //赋值 运行中的设备数量
|
|
|
+ navigatorList.forEach(function (nItem) {
|
|
|
+ var fres = statistics.filter((sItem: statistics) => {
|
|
|
+ return sItem.equipType == nItem.id;
|
|
|
+ });
|
|
|
+ nItem.num = (fres[0] || {}).runCount;
|
|
|
+ });
|
|
|
+
|
|
|
+ setNavigatorList(navigatorList);
|
|
|
+
|
|
|
+ //设备空间信息
|
|
|
+ var spaceList = res.data.spaceList || [];
|
|
|
+ spaceList.forEach((item: any) => {
|
|
|
+ item.equipStatusList.forEach((eItem: equipStatus) => {
|
|
|
+ item[eItem.equipType] = eItem.status;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ setEquipMapList(spaceList);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ setLoading(false);
|
|
|
+ });
|
|
|
}
|
|
|
}, [selFloorId]);
|
|
|
+ //合并空间环境数据 和 空间数据
|
|
|
+ useEffect(() => {
|
|
|
+ var combineList: any = [];
|
|
|
+ mapList.map(function (mitem) {
|
|
|
+ var spaceId = mitem.spaceId;
|
|
|
+ var filterSpace = equipMapList.filter((ele) => {
|
|
|
+ return ele.id == spaceId;
|
|
|
+ });
|
|
|
+
|
|
|
+ var combine = Object.assign({}, mitem, filterSpace[0]);
|
|
|
+ combineList.push(combine);
|
|
|
+ });
|
|
|
+ setMapCombineList(combineList);
|
|
|
+ }, [equipMapList, mapList]);
|
|
|
return (
|
|
|
<>
|
|
|
<PageHeader
|
|
@@ -162,63 +223,74 @@ const Environment: React.FC = () => {
|
|
|
</div>
|
|
|
)}
|
|
|
</div>
|
|
|
- <Map
|
|
|
- searchText={searchText}
|
|
|
- selFloorId={selFloorId}
|
|
|
- mapList={mapList}
|
|
|
- type={'equipment'}
|
|
|
- render={(item, index) => {
|
|
|
- return (
|
|
|
- <div
|
|
|
- key={index + 'house'}
|
|
|
- className={mapstyles.house}
|
|
|
- style={{
|
|
|
- left: item.left,
|
|
|
- top: item.top,
|
|
|
- width: item.width,
|
|
|
- height: item.height,
|
|
|
- background: item.roomFuncType
|
|
|
- ? selNav.id == 'all'
|
|
|
- ? 'rgba(196, 196, 196, 0.2)'
|
|
|
- : getColorOpacity(item[selNav.id])
|
|
|
- : 'repeating-linear-gradient(45deg, rgb(226 226 226), #ffffff 8px)',
|
|
|
- }}
|
|
|
- >
|
|
|
- {selNav.id == 'all' && (
|
|
|
- <div className={mapstyles.allDevice}>
|
|
|
- {/* 所有设备的图标列表 */}
|
|
|
- {(item.device || []).map((ditem, dindex: number) => {
|
|
|
- return (
|
|
|
- <div
|
|
|
- key={dindex + 'device'}
|
|
|
- className={mapstyles.icon}
|
|
|
- style={{
|
|
|
- backgroundColor: getColorOpacity(ditem.status, ditem.type),
|
|
|
- }}
|
|
|
- >
|
|
|
- <Icon className="" type={ditem.type} style={{ color: '#ffffff' }}></Icon>
|
|
|
- </div>
|
|
|
- );
|
|
|
- })}
|
|
|
+ <Spin spinning={loading}>
|
|
|
+ <Map
|
|
|
+ searchText={searchText}
|
|
|
+ mapList={mapCombineList}
|
|
|
+ type={'equipment'}
|
|
|
+ render={(item, index) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ key={index + 'house'}
|
|
|
+ className={mapstyles.house}
|
|
|
+ style={{
|
|
|
+ left: item.left,
|
|
|
+ top: item.top,
|
|
|
+ width: item.width,
|
|
|
+ height: item.height,
|
|
|
+ background: item.roomFuncType
|
|
|
+ ? selNav.id == 'all'
|
|
|
+ ? 'rgba(196, 196, 196, 0.2)'
|
|
|
+ : getColorOpacity(item[selNav.id])
|
|
|
+ : 'repeating-linear-gradient(45deg, rgb(226 226 226), #ffffff 8px)',
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {selNav.id == 'all' && (
|
|
|
+ <div className={mapstyles.allDevice}>
|
|
|
+ {/* 所有设备的图标列表 */}
|
|
|
+ {(item.equipStatusList || []).map((ditem: equipStatus, dindex: number) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ key={dindex + 'device'}
|
|
|
+ className={mapstyles.icon}
|
|
|
+ style={{
|
|
|
+ backgroundColor: getColorOpacity(ditem.status, ditem.equipType),
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Icon
|
|
|
+ className=""
|
|
|
+ type={ditem.equipType}
|
|
|
+ style={{ color: '#ffffff' }}
|
|
|
+ ></Icon>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ <div
|
|
|
+ className={mapstyles.showModal}
|
|
|
+ onClick={() => {
|
|
|
+ showModalClick(item);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Icon className="" type="hover"></Icon>
|
|
|
+ </div>
|
|
|
+ <div className={mapstyles.content}>
|
|
|
+ <Icon
|
|
|
+ className=""
|
|
|
+ type={getSpaceFunc(item.roomFuncType)}
|
|
|
+ style={{ fontSize: 20 }}
|
|
|
+ ></Icon>
|
|
|
+ <div className={mapstyles.name}>{item.localName}</div>
|
|
|
</div>
|
|
|
- )}
|
|
|
- <div className={mapstyles.showModal} onClick={showModalClick}>
|
|
|
- <Icon className="" type="hover"></Icon>
|
|
|
- </div>
|
|
|
- <div className={mapstyles.content}>
|
|
|
- <Icon
|
|
|
- className=""
|
|
|
- type={getSpaceFunc(item.roomFuncType)}
|
|
|
- style={{ fontSize: 20 }}
|
|
|
- ></Icon>
|
|
|
- <div className={mapstyles.name}>{item.localName}</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- );
|
|
|
- }}
|
|
|
- ></Map>
|
|
|
+ );
|
|
|
+ }}
|
|
|
+ ></Map>
|
|
|
+ </Spin>
|
|
|
{showModal && (
|
|
|
<DeviceModal
|
|
|
+ showSpace={showSpace}
|
|
|
onClose={() => {
|
|
|
setShowModal(true);
|
|
|
}}
|