Browse Source

设备管理

zhaojijng 3 years ago
parent
commit
8ee05d3cbc

+ 2 - 1
src/components/map/index.tsx

@@ -8,7 +8,7 @@ import Icon from '@/tenants-ui/Icon';
 type MapProps = {
   type: string;
   searchText: any;
-  selFloorId: string;
+  selFloorId?: string;
   render: (item: API.MapInfo, index: number) => React.ReactNode;
   mapList: API.MapInfo[];
 };
@@ -19,6 +19,7 @@ const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render, mapList
   //   useEffect(() => {
   //     getMapListData(selFloorId);
   //   }, [selFloorId]);
+
   const [startPageX, setStartPageX] = useState<number>(0);
   const [startPageY, setStartPageY] = useState<number>(0);
 

+ 1 - 2
src/components/topNavigator/index.tsx

@@ -98,9 +98,8 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
 
   //当前切换导航条时
   const itemClick = (item: navigatorItem) => {
-    //setSelParamObj(item);
     console.log('itemclick', item);
-    debugger;
+    //debugger;
     navigatorChange && navigatorChange(item);
   };
 

+ 2 - 3
src/models/spaceFunc.ts

@@ -1,9 +1,8 @@
 import React, { useState, useCallback } from 'react';
-import { getMapList } from '@/services/ant-design-pro/environment';
 
 export default function () {
   const allFunc = {
-    office: ['140'],
+    office: ['140', '311'],
     work: ['314', '313', '315', '921', '922', '923', '924', '925', '926'],
     meeting: ['321', '322', '323'],
     rest: ['170', '331', '931', '932', '933', '934', '935', '936', '937', '938'], //休闲
@@ -35,7 +34,7 @@ export default function () {
     stair: ['140'], //楼梯
     dining: ['441', '442', '443', '451', '452', '453', '461', '462', '471', '472'], //用餐
   };
-
+  //获取房间类型 来显示相应的图片
   const getSpaceFunc = useCallback((spaceCode: any) => {
     for (var key in allFunc) {
       var codeArr = allFunc[key];

+ 2 - 2
src/pages/Environment/index.tsx

@@ -172,6 +172,7 @@ const Environment: React.FC = () => {
           avgValues = avgValues ? avgValues.toFixed(selNav.fixed) : avgValues;
           var navTemp = { ...selNav, avgValues: avgValues };
           setSelNav(navTemp);
+          //空间环境数据
           var dataSpaces = ((res.data || {}).floors[0] || {}).dataSpaces || [];
           setEnvirMapList(dataSpaces);
         })
@@ -180,7 +181,7 @@ const Environment: React.FC = () => {
         });
     }
   }, [selNavId, selFloorId]);
-
+  //合并空间环境数据 和 空间数据
   useEffect(() => {
     var combineList: any = [];
     mapList.map(function (mitem) {
@@ -248,7 +249,6 @@ const Environment: React.FC = () => {
         <Map
           type={'enviroment'}
           searchText={searchText}
-          selFloorId={selFloorId}
           mapList={mapCombineList}
           render={(item: API.MapInfo, index: number) => {
             return (

+ 4 - 3
src/pages/Equipment/components/topNavRight/index.tsx

@@ -15,9 +15,10 @@ export type topNavRightProps = {
 const TopNavRight: React.FC<topNavRightProps> = ({ selNavObj, navigatorList }) => {
   // const { equip_air, equip_lamp, equip_water } = equipImageMap;
   const [modalvisible, setModalvisible] = useState<boolean>(false);
-  const [allList, setAllList] = useState<navigatorItem[]>([]);
+  //去掉全部设备的 设备列表
+  const [deviceList, setDeviceList] = useState<navigatorItem[]>([]);
   useEffect(() => {
-    setAllList(navigatorList.slice(1));
+    setDeviceList(navigatorList.slice(1));
   }, []);
   const menuClick = (key) => {
     console.log('key', key);
@@ -45,7 +46,7 @@ const TopNavRight: React.FC<topNavRightProps> = ({ selNavObj, navigatorList }) =
         <div className={styles.right}>
           <div className={styles.title}>运行中的设备</div>
           <div className={styles.allList}>
-            {allList.map(function (litem, index) {
+            {deviceList.map(function (litem, index) {
               return (
                 <div className={styles.item} key={'run' + index}>
                   <img src={litem.src} style={{ height: 20 }}></img>

+ 148 - 76
src/pages/Equipment/index.tsx

@@ -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);
           }}

+ 0 - 1
src/pages/Runtime/index.tsx

@@ -177,7 +177,6 @@ const Runtime: React.FC = () => {
       <Spin spinning={loading}>
         <Map
           searchText={searchText}
-          selFloorId={selFloorId}
           mapList={mapCombineList}
           type={'runtime'}
           render={(item, index) => {

+ 14 - 0
src/services/ant-design-pro/environment.ts

@@ -59,3 +59,17 @@ export async function queryEnvironmentParam(body: any, otherParam: { [key: strin
     },
   );
 }
+
+export async function queryEquipStatistics(params: any, options?: { [key: string]: any }) {
+  //
+  return request<API.EnvironmentParam>(`/api2/object/equipment/queryEquipStatistics`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    ...(options || {}),
+    params: {
+      ...params,
+    },
+  });
+}

+ 1 - 1
src/tenants-ui/Icon/index.jsx

@@ -1,7 +1,7 @@
 import { createFromIconfontCN } from '@ant-design/icons';
 
 const Icon = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_3184967_ll9zpyz6dxk.js',
+  scriptUrl: '//at.alicdn.com/t/font_3184967_zvedollr9ti.js',
 });
 
 export default ({ type, className, style = {} }) => {