Browse Source

环境管理修改

zhaojijng 3 years ago
parent
commit
a8ac2c7026

+ 10 - 0
config/proxy.ts

@@ -43,6 +43,16 @@ export default {
       changeOrigin: true,
       pathRewrite: { '^/api3': '' },
     },
+    '/api4/': {
+      // 要代理的地址
+      //target: 'http://api.sagacloud.cn/',
+      target: 'http://api.sagacloud.cn/',
+
+      // 配置了这个可以从 http 代理到 https
+      // 依赖 origin 的功能可能需要这个,比如 cookie
+      changeOrigin: true,
+      pathRewrite: { '^/api4': '' },
+    },
   },
   test: {
     '/api/': {

+ 6 - 0
src/assets/css/map.less

@@ -63,6 +63,12 @@
       color: #4d5262;
       font-size: 10px;
       text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
+      .overworkTime {
+        color: #5e8bcf;
+      }
+      .meetTime {
+        color: #00dc23;
+      }
     }
     .content {
       display: flex;

+ 11 - 6
src/components/topNavigator/index.tsx

@@ -13,6 +13,8 @@ export type topNavigatorProps = {
   // action?: React.ReactElement<topNavRightProps>[];
   action?: React.ReactNode;
   changeFloorId?: (data: string) => void;
+  changeBuildId?: (data: string) => void;
+  selParamObj?: any;
 };
 type floorItem = {
   value: string;
@@ -28,13 +30,14 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
   navigatorChange,
   action,
   changeFloorId,
+  changeBuildId,
+  selParamObj,
 }) => {
   const [buildList, setBuildList] = useState<buildItem[]>([]);
   const [currentBuild, setCurrentBuild] = useState<any>();
 
   const [floorList, setFloorList] = useState<floorItem[]>([]);
   const [currentFloor, setCurrentFloor] = useState<string>();
-  const [selParamObj, setSelParamObj] = useState(navigatorList[0]);
 
   useEffect(() => {
     //console.log('TopNavigator----getBuildingList');
@@ -53,6 +56,7 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
       );
       //debugger;
       setCurrentBuild((resData[0] || {}).id); //设置第一个值
+      changeBuildId && changeBuildId((resData[0] || {}).id);
     });
   }, []);
 
@@ -60,8 +64,7 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
     if (currentBuild) {
       getFloorList({
         criteria: {
-          projectId: 'Pj1101080259',
-          buildId: currentBuild,
+          buildingId: currentBuild,
           //buildingId: 'Bd1101080259317347f00d0811ebb06b1d2749356f83',
         },
       }).then((res) => {
@@ -81,8 +84,9 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
 
   const changBuildHandle = useCallback((val) => {
     //console.log('select-onChange', val);
-    //debugger;
+    debugger;
     setCurrentBuild(val);
+    changeBuildId && changeBuildId(val);
   }, []);
   const changFloorHandle = useCallback((val) => {
     //console.log('select-onChange', val);
@@ -94,8 +98,9 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
 
   //当前切换导航条时
   const itemClick = (item: navigatorItem) => {
-    setSelParamObj(item);
+    //setSelParamObj(item);
     console.log('itemclick', item);
+    debugger;
     navigatorChange && navigatorChange(item);
   };
 
@@ -152,7 +157,7 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
       {type === 'enviroment' && (
         <div className={styles.right}>
           <div className={styles.firstLine} style={{ color: selParamObj.color }}>
-            <span className={styles.value}>{selParamObj.num}</span>{' '}
+            <span className={styles.value}>{selParamObj.avgValues}</span>{' '}
             <span className={styles.unit}>{selParamObj.unit}</span>
           </div>
           <div className={styles.text}>当前楼层平均{selParamObj.name}</div>

+ 0 - 64
src/pages/Environment/components/topNavigator/index.less

@@ -1,64 +0,0 @@
-.label {
-  color: #c4c4c4;
-}
-.topnavigator {
-  box-sizing: border-box;
-  //   display: flex;
-  height: 68px;
-  margin-top: 23px;
-  background: #fff;
-  .floor {
-    display: flex;
-    align-items: center;
-    float: left;
-    //justify-content: center;
-    width: 120px;
-    height: 100%;
-    border-right: 1px solid rgba(196, 196, 196, 0.4);
-  }
-  .navigator {
-    display: flex;
-    float: left;
-    height: 100%;
-    .navItem {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 50px;
-      height: 100%;
-      margin: 0 20px;
-      font-size: 12px;
-      border-bottom: 3px solid transparent;
-      cursor: pointer;
-      .text {
-        margin-top: 7px;
-        color: #000;
-        text-align: center;
-      }
-    }
-  }
-  .right {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    float: right;
-    width: 220px;
-    height: 100%;
-    white-space: nowrap;
-    .firstLine {
-      font-weight: 500;
-      line-height: 20px;
-    }
-    .value {
-      // color: #e5574f;
-      font-size: 28px;
-    }
-    .unit {
-      // color: #e5574f;
-    }
-    .text {
-      color: #c4c4c4;
-    }
-  }
-}

+ 0 - 167
src/pages/Environment/components/topNavigator/index.tsx

@@ -1,167 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import styles from './index.less';
-import cx from 'classnames';
-import { Select } from 'antd';
-
-import type { navigatorItem } from '@/pages/Environment/index';
-import { getBuildingList, getFloorList } from '@/services/ant-design-pro/environment';
-
-export type topNavigatorProps = {
-  navigatorList?: navigatorItem[];
-  type: string;
-  navigatorChange?: (item: navigatorItem) => void;
-  // action?: React.ReactElement<topNavRightProps>[];
-  action?: React.ReactNode;
-  changeFloorId?: (data: string) => void;
-};
-type floorItem = {
-  value: string;
-  [key: string]: any;
-};
-type buildItem = {
-  value: string;
-  [key: string]: any;
-};
-const TopNavigator: React.FC<topNavigatorProps> = ({
-  navigatorList = [],
-  type,
-  navigatorChange,
-  action,
-  changeFloorId,
-}) => {
-  const [buildList, setBuildList] = useState<buildItem[]>([]);
-  const [currentBuild, setCurrentBuild] = useState<any>();
-
-  const [floorList, setFloorList] = useState<floorItem[]>([]);
-  const [currentFloor, setCurrentFloor] = useState<string>();
-  const [selParamObj, setSelParamObj] = useState(navigatorList[0]);
-
-  useEffect(() => {
-    //console.log('TopNavigator----getBuildingList');
-    //请求建筑的接口
-    getBuildingList({
-      criteria: {
-        projectId: 'Pj1101080259',
-      },
-    }).then((res) => {
-      //debugger;
-      var resData = res.content || [];
-      setBuildList(
-        (resData || []).map((item) => {
-          return { label: item.localName, value: item.id };
-        }),
-      );
-      //debugger;
-      setCurrentBuild((resData[0] || {}).id); //设置第一个值
-    });
-  }, []);
-
-  useEffect(() => {
-    if (currentBuild) {
-      getFloorList({
-        criteria: {
-          projectId: 'Pj1101080259',
-          buildId: currentBuild,
-          //buildingId: 'Bd1101080259317347f00d0811ebb06b1d2749356f83',
-        },
-      }).then((res) => {
-        //请求楼层的接口
-        //debugger;
-        var resData = res.content || [];
-        setFloorList(
-          (resData || []).map((item) => {
-            return { label: item.localName, value: item.id };
-          }),
-        );
-        setCurrentFloor((resData[0] || {}).id); //设置第一个值
-        changeFloorId && changeFloorId((resData[0] || {}).id);
-      });
-    }
-  }, [currentBuild]);
-
-  const changBuildHandle = useCallback((val) => {
-    //console.log('select-onChange', val);
-    //debugger;
-    setCurrentBuild(val);
-  }, []);
-  const changFloorHandle = useCallback((val) => {
-    //console.log('select-onChange', val);
-    //debugger;
-    setCurrentFloor(val);
-    console.log('changeFloorId', changeFloorId);
-    changeFloorId && changeFloorId(val);
-  }, []);
-
-  //当前切换导航条时
-  const itemClick = (item: navigatorItem) => {
-    setSelParamObj(item);
-    console.log('itemclick', item);
-    navigatorChange && navigatorChange(item);
-  };
-
-  console.log('top渲染');
-
-  return (
-    <div className={styles.topnavigator}>
-      <div className={styles.floor}>
-        <Select
-          options={buildList}
-          placeholder="楼栋"
-          value={currentBuild}
-          onChange={changBuildHandle}
-          size="large"
-          dropdownMatchSelectWidth={true}
-          style={{ width: '100%' }}
-          bordered={false}
-          //   labelInValue={true}
-          // fieldNames={{ label: 'name', value: 'id' }}
-        />
-      </div>
-      <div className={styles.floor}>
-        <Select
-          options={floorList}
-          placeholder="楼层"
-          value={currentFloor}
-          onChange={changFloorHandle}
-          size="large"
-          dropdownMatchSelectWidth={true}
-          style={{ width: '100%' }}
-          bordered={false}
-        />
-      </div>
-      <div className={styles.navigator}>
-        {navigatorList.map((item, index) => {
-          return (
-            <div
-              className={cx(styles.navItem, { [styles.sel]: item.id === selParamObj.id })}
-              style={{
-                borderBottom:
-                  item.id === selParamObj.id ? `3px solid  ${item.color}` : '3px solid #ffffff',
-              }}
-              key={'nav' + index}
-              onClick={() => {
-                itemClick(item);
-              }}
-            >
-              <img src={item.src} style={{ height: 20 }}></img>
-              <div className={styles.text}>{item.name}</div>
-            </div>
-          );
-        })}
-      </div>
-      {type === 'enviroment' && (
-        <div className={styles.right}>
-          <div className={styles.firstLine} style={{ color: selParamObj.color }}>
-            <span className={styles.value}>{selParamObj.num}</span>{' '}
-            <span className={styles.unit}>{selParamObj.unit}</span>
-          </div>
-          <div className={styles.text}>当前楼层平均{selParamObj.name}</div>
-        </div>
-      )}
-      {type === 'equipment' && action}
-      {type === 'runtime' && action}
-    </div>
-  );
-};
-
-export default TopNavigator;

+ 77 - 14
src/pages/Environment/index.tsx

@@ -5,9 +5,10 @@ import Map from '@/components/map';
 import SearchInput from '@/components/SearchInput';
 import TopNavigator from '@/components/topNavigator';
 import ChartModal from './components/chartModal';
-
+import moment from 'moment';
+import { getMapList, queryEnvironmentParam } from '@/services/ant-design-pro/environment';
 import { equipImageMap } from '@/config/image.js';
-import { Input } from 'antd';
+
 import Icon from '@/tenants-ui/Icon';
 
 import styles from './index.less';
@@ -31,78 +32,84 @@ const Environment: React.FC = () => {
   const [searchText, setSearchText] = useState<{ text: any }>();
   const [showChart, setShowChart] = useState(false);
   const [selFloorId, setSelFloorId] = useState<string>();
+  const [selBuildId, setSelBuildId] = useState<string>();
   const [navigatorList] = useState<navigatorItem[]>([
     {
       name: '温度',
       id: 'Tdb',
       src: envir_temperature,
       unit: '℃',
-      num: 24.3,
       color: '#E5574F',
       colorStr: '229,87,79,',
       opacity: 0.2,
       indicator: [18, 21, 24, 27, 30],
+      fixed: 1,
     },
     {
       name: '湿度',
       id: 'RH',
       src: envir_wet,
       unit: '%',
-      num: 70,
       color: '#9FB7CD',
       colorStr: '159,183,205,',
       opacity: 0.2,
       indicator: [25, 35, 45, 55, 65],
+      fixed: 1,
     },
     {
       name: 'CO₂',
       id: 'CO2',
       src: envir_co2,
       unit: 'ppm',
-      num: 600,
       color: '#00DC23',
       colorStr: '0,220,35,',
       opacity: 0.2,
       indicator: [500, 700, 1000, 2000, 3000],
+      fixed: 0,
     },
     {
       name: 'PM2.5',
       id: 'PM2d5',
       src: envir_pm25,
       unit: 'ug/m³',
-      num: 33,
       color: '#E89E32',
       colorStr: '232,158,50,',
       opacity: 0.2,
       indicator: [15, 25, 35, 75, 90],
+      fixed: 1,
     },
     {
       name: '甲醛',
       id: 'HCHO',
       src: envir_jiaquan,
       unit: 'mg/m³',
-      num: 50,
       color: '#140050',
       colorStr: '20,0,80,',
       opacity: 0.25,
       indicator: [0.02, 0.05, 0.1, 0.15], //指标梯度
+      fixed: 2,
     },
   ]);
   const [selNav, setSelNav] = useState<navigatorItem>(navigatorList[0]);
+  const [selNavId, setSelNavId] = useState<string>(navigatorList[0].id);
+  const [mapList, setMapList] = useState<API.MapInfo[]>([]);
+  const [envirMapList, setEnvirMapList] = useState<API.MapInfo[]>([]);
+  const [mapCombineList, setMapCombineList] = useState<any[]>([]);
+
   const changeFloorId = (data: string) => {
     //debugger;
     setSelFloorId(data);
   };
+  const changeBuildId = (data: string) => {
+    //debugger;
+    setSelBuildId(data);
+  };
   //导航切换时
   const navigatorChange = (item: navigatorItem) => {
-    if (item.id == 'Tdb') {
-    }
+    debugger;
     setSelNav(item);
+    setSelNavId(item.id);
   };
-  // const specialRoomClick = () => {
-  //   console.log('showChart');
-  //   setShowChart(true);
-  // };
 
   //根据指标的值  得到不同的透明度等级 第一级0.2 第二级0.4 依次往后
   const getColorOpacity = (value: number): number => {
@@ -117,13 +124,66 @@ const Environment: React.FC = () => {
     }
     return res;
   };
+  //获取地图 mapList
+  useEffect(() => {
+    if (selFloorId) {
+      getMapList({ floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454', projectId: '' }).then(
+        (res) => {
+          //debugger;
+          var data: API.MapInfo[] = (res.data || {}).spaceList || [];
+          setMapList(data);
+        },
+      );
+    }
+  }, [selFloorId]);
+  //请求环境数据
+  useEffect(() => {
+    if (selNavId && selFloorId) {
+      debugger;
+      var floorParams = [
+        { id: 'Fl11010802593241ec348ecb4148806b9034c8957454', projectId: 'Pj1101080259' },
+      ];
+      var endTime = moment();
+      var startTime = moment().subtract(30, 'minutes');
+      var startStr = startTime.format('YYYYMMDDHHmmss');
+      var endStr = endTime.format('YYYYMMDDHHmmss');
+
+      queryEnvironmentParam(floorParams, {
+        endTime: endStr,
+        startTime: startStr,
+        param: selNavId,
+      }).then((res) => {
+        //debugger;
+        var avgValues = (res.data || {}).avgValues;
+        avgValues = avgValues ? avgValues.toFixed(selNav.fixed) : avgValues;
+        var navTemp = { ...selNav, avgValues: avgValues };
+        setSelNav(navTemp);
+        var dataSpaces = ((res.data || {}).floors[0] || {}).dataSpaces || [];
+        setEnvirMapList(dataSpaces);
+      });
+    }
+  }, [selNavId, selFloorId]);
+
+  useEffect(() => {
+    var combineList: any = [];
+    mapList.map(function (mitem) {
+      var spaceId = mitem.spaceId;
+      var filterSpace = envirMapList.filter((ele) => {
+        return ele.id == spaceId;
+      });
 
+      var combine = Object.assign({}, mitem, filterSpace[0]);
+      combineList.push(combine);
+    });
+    setMapCombineList(combineList);
+  }, [envirMapList, mapList]);
   return (
     <>
       <PageHeader
         title={<FormattedMessage id="menu.environment" />}
         action={
           <SearchInput
+            mapList={mapList}
             onSearch={(s) => {
               setSearchText({ text: s });
             }}
@@ -146,6 +206,8 @@ const Environment: React.FC = () => {
         type={'enviroment'}
         navigatorChange={navigatorChange}
         changeFloorId={changeFloorId}
+        changeBuildId={changeBuildId}
+        selParamObj={selNav}
       ></TopNavigator>
       <div className={styles.maptop}>
         <div className={styles.right}>
@@ -169,6 +231,7 @@ const Environment: React.FC = () => {
         type={'enviroment'}
         searchText={searchText}
         selFloorId={selFloorId}
+        mapList={mapCombineList}
         render={(item: API.MapInfo, index: number) => {
           return (
             <div
@@ -182,7 +245,7 @@ const Environment: React.FC = () => {
                 backgroundColor:
                   'rgba(' +
                   selNav.colorStr +
-                  (selNav.opacity as number) * getColorOpacity(item[selNav.id]) +
+                  (selNav.opacity as number) * getColorOpacity(item.avgValues) +
                   ')',
               }}
             >

+ 19 - 10
src/pages/Equipment/index.tsx

@@ -16,8 +16,7 @@ import { equipImageMap } from '@/config/image.js';
 import { Input } from 'antd';
 import Icon from '@/tenants-ui/Icon';
 import type { navigatorItem } from '@/pages/Environment/index';
-
-//import { getMapList } from '@/services/ant-design-pro/environment';
+import { getMapList, queryDeviceTimeManage } from '@/services/ant-design-pro/environment';
 
 const Environment: React.FC = () => {
   const { envir_all, equip_air, equip_lamp, envir_curtain } = equipImageMap;
@@ -58,20 +57,15 @@ const Environment: React.FC = () => {
       colorStr: '232, 158, 50,',
     },
   ]);
-  //   const [mapList, setMapList] = useState<API.MapInfo[]>([]);
-  //   useEffect(() => {
-  //     getMapList({ floorId: 'sffsdfdsfdf', floorNumber: 22 }).then(function (res) {
-  //       var data: API.MapInfo[] = res.data || [];
-  //       data.forEach((item, index) => {});
-  //       setMapList(data);
-  //     });
-  //   }, []);
+  const [mapList, setMapList] = useState<API.MapInfo[]>([]);
   const [selNav, setSelNav] = useState<navigatorItem>(navigatorList[0]);
   const [selFloorId, setSelFloorId] = useState<string>();
+
   const changeFloorId = (data: string) => {
     //debugger;
     setSelFloorId(data);
   };
+  //导航条切换
   const navigatorChange = (item: navigatorItem) => {
     //debugger;
     if (item.id == 'all') {
@@ -86,6 +80,7 @@ const Environment: React.FC = () => {
     console.log('showChart');
     setShowModal(true);
   };
+
   //当前设备的状态 all全部开启 part部分开启 close全都关闭  还有类型type 包括airConditioner lamp curtain
   //根据设备状态返回不同的 颜色
   const getColorOpacity = (value: string, type?: string): string => {
@@ -108,12 +103,25 @@ const Environment: React.FC = () => {
       return 'rgba(196, 196, 196, 0.6)';
     }
   };
+  //获取地图 mapList
+  useEffect(() => {
+    if (selFloorId) {
+      getMapList({ floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454', projectId: '' }).then(
+        (res) => {
+          //debugger;
+          var data: API.MapInfo[] = (res.data || {}).spaceList || [];
+          setMapList(data);
+        },
+      );
+    }
+  }, [selFloorId]);
   return (
     <>
       <PageHeader
         title={<FormattedMessage id="menu.equipment" />}
         action={
           <SearchInput
+            mapList={mapList}
             onSearch={(s) => {
               setSearchText({ text: s });
             }}
@@ -157,6 +165,7 @@ const Environment: React.FC = () => {
       <Map
         searchText={searchText}
         selFloorId={selFloorId}
+        mapList={mapList}
         type={'equipment'}
         render={(item, index) => {
           return (

+ 13 - 4
src/pages/Runtime/index.tsx

@@ -10,6 +10,7 @@ import mapstyles from '@/assets/css/map.less';
 import Icon from '@/tenants-ui/Icon';
 import SearchInput from '@/components/SearchInput';
 import moment from 'moment';
+import cx from 'classnames';
 
 import { getMapList, queryDeviceTimeManage } from '@/services/ant-design-pro/environment';
 
@@ -68,7 +69,7 @@ const Runtime: React.FC = () => {
         //date: selTime,
         date: 20220212,
       }).then(function (res) {
-        debugger;
+        //debugger;
         var resdata = res || {};
         setRuntimeNav({
           normalRun: resdata.workTimeNum,
@@ -108,6 +109,7 @@ const Runtime: React.FC = () => {
     //mapList,spaceTimeList 这两个数据的结合
     console.log('dfsd-------', mapList, spaceTimeList);
     // if (mapList && mapList.length > 0 && spaceTimeList && spaceTimeList.length > 0) {
+
     var combineList = [];
     mapList.map(function (mitem) {
       var spaceId = mitem.spaceId;
@@ -195,9 +197,9 @@ const Runtime: React.FC = () => {
                 })} */}
                 {item.showTimeList && item.showTimeList.length > 1 && (
                   <Popover
-                    content={(item.showTimeList || []).map((timeItem) => {
+                    content={(item.showTimeList || []).map((timeItem, index) => {
                       return (
-                        <div>
+                        <div key={'time' + index}>
                           {timeItem[0]}-{timeItem[1]}
                         </div>
                       );
@@ -205,7 +207,14 @@ const Runtime: React.FC = () => {
                     trigger="hover"
                     style={{ color: 'none' }}
                   >
-                    <span>{item.showTimeStr}</span>
+                    <span
+                      className={cx({
+                        [mapstyles.overworkTime]: item.runTimeStatus == 'overtimeWork',
+                        [mapstyles.meetTime]: item.runTimeStatus == 'overtimeBook',
+                      })}
+                    >
+                      {item.showTimeStr}
+                    </span>
                   </Popover>
                 )}
                 {item.showTimeList && item.showTimeList.length == 1 && (

+ 23 - 7
src/services/ant-design-pro/environment.ts

@@ -34,12 +34,28 @@ export async function getFloorList(body: any, options?: { [key: string]: any })
   });
 }
 export async function queryDeviceTimeManage(params: any, options?: { [key: string]: any }) {
-  // debugger;  '/api3/duoduo-service/setup-service/deviceManage/queryDeviceTimeManage'
-  return request<API.DeviceTimeType>('/api3/deviceManage/queryDeviceTimeManage', {
-    method: 'GET',
-    params: {
-      ...params,
+  //  '/api3/duoduo-service/setup-service/deviceManage/queryDeviceTimeManage'
+  return request<API.DeviceTimeType>(
+    '/api4/duoduo-service/setup-service/deviceManage/queryDeviceTimeManage',
+    {
+      method: 'GET',
+      params: {
+        ...params,
+      },
+      ...(options || {}),
     },
-    ...(options || {}),
-  });
+  );
+}
+export async function queryEnvironmentParam(body: any, otherParam: { [key: string]: any }) {
+  //api2/duoduo-service/object-service/object/floor/queryParam
+  return request<API.EnvironmentParam>(
+    `/api2/object/floor/queryParam?endTime=${otherParam.endTime}&startTime=${otherParam.startTime}&param=${otherParam.param}`,
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      data: body,
+    },
+  );
 }

+ 5 - 0
src/services/ant-design-pro/typings.d.ts

@@ -136,4 +136,9 @@ declare namespace API {
     result?: string;
     [key: string]: any;
   };
+  type EnvironmentParam = {
+    data?: any;
+    result?: string;
+    [key: string]: any;
+  };
 }