anxiaoxia 3 years ago
parent
commit
ff656d60f4

+ 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/': {

+ 10 - 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;
@@ -71,8 +77,12 @@
       justify-content: center;
       height: 100%;
       .name {
+        box-sizing: border-box;
+        width: 100%;
+        padding: 0 3px;
         color: #000000;
         font-size: 13px;
+        text-align: center;
         //text-shadow: 1px 1px 1px #ffffff;
         text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
       }

+ 25 - 11
src/components/SearchInput/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import styles from './index.less';
 import { Select } from 'antd';
-import { mapListData } from '@/hooks/useMapList';
+//import { mapListData } from '@/hooks/useMapList';
 import { SearchOutlined } from '@ant-design/icons';
-
+import { useModel } from 'umi';
 type mapResType = {
   text: string;
   value: string;
@@ -12,18 +12,19 @@ const { Option } = Select;
 
 type SearchInputProps = {
   onSearch: (s: string) => void;
+  mapList: API.MapInfo[];
 };
-const SearchInput: React.FC<SearchInputProps> = ({ onSearch }) => {
-  const [resData, setResData] = useState<mapResType[]>([]);
+const SearchInput: React.FC<SearchInputProps> = ({ onSearch, mapList }) => {
+  const [matchData, setMatchData] = useState<mapResType[]>([]);
   const [value, setValue] = useState<any>();
+  // const { mapList } = useModel('map');
 
+  //这是搜索 的下拉列表的显示
   const handleSearch = (value: string) => {
     //debugger;
-    console.log('search', mapListData);
-
     if (value) {
       let data: mapResType[] = [];
-      mapListData.map((item, index) => {
+      mapList.map((item, index) => {
         if ((item.localName || '').indexOf(value) > -1) {
           data.push({
             text: item.localName,
@@ -31,17 +32,29 @@ const SearchInput: React.FC<SearchInputProps> = ({ onSearch }) => {
           });
         }
       });
-      setResData(data);
+      setMatchData(data);
+      console.log('search', data);
     } else {
-      setResData([]);
+      setMatchData([]);
     }
   };
 
+  //这是搜索的下拉列表的点击
   const handleChange = (sel: string) => {
+    //debugger;
     setValue(null); //清空输入的值
-    setResData([]); //清空搜索匹配列表
+    setMatchData([]); //清空搜索匹配列表
     onSearch(sel);
   };
+  const handelInputKeyDown = (e) => {
+    // 如果点击回车的操作
+    console.log('keydown', matchData);
+    if (e.code == 'Enter') {
+      if (matchData.length == 1) {
+        onSearch(matchData[0].text);
+      }
+    }
+  };
   return (
     <div className={styles.headerSearch}>
       <SearchOutlined style={{ fontSize: 16 }} />
@@ -54,6 +67,7 @@ const SearchInput: React.FC<SearchInputProps> = ({ onSearch }) => {
         filterOption={false}
         onSearch={handleSearch}
         onChange={handleChange}
+        onInputKeyDown={handelInputKeyDown}
         notFoundContent={null}
         bordered={false}
         style={{ width: 150, borderColor: '#c4c4c4' }}
@@ -66,7 +80,7 @@ const SearchInput: React.FC<SearchInputProps> = ({ onSearch }) => {
         //     />
         //   }
       >
-        {resData.map(function (item, index) {
+        {matchData.map(function (item, index) {
           return <Option key={item.value}>{item.text}</Option>;
         })}
       </Select>

+ 16 - 28
src/components/map/index.tsx

@@ -1,31 +1,24 @@
 import React, { useState, useEffect } from 'react';
 import mapstyles from '@/assets/css/map.less';
-import { useMapList } from '@/hooks/useMapList';
 import { useModel } from 'umi';
 
 import cx from 'classnames';
 import Icon from '@/tenants-ui/Icon';
-import { map } from 'lodash';
 
 type MapProps = {
   type: string;
-  searchText: string;
+  searchText: any;
   selFloorId: string;
   render: (item: API.MapInfo, index: number) => React.ReactNode;
+  mapList: API.MapInfo[];
 };
 
-const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render }) => {
-  //const { mapList } = useMapList(selFloorId);
-
-  // const [mapList] = useState<API.MapInfo[]>(mapListData);
-
-  //   const { mapList, getMapListData } = useModel('map', (model) => ({
-  //     mapList: model.mapList,
-  //     getMapListData: model.getMapListData,
-  //   }));
-
-  const { mapList, getMapListData } = useModel('map');
-
+const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render, mapList }) => {
+  //useModel 注释掉 不用啦 晚会删
+  // const { mapList, getMapListData } = useModel('map');
+  //   useEffect(() => {
+  //     getMapListData(selFloorId);
+  //   }, [selFloorId]);
   const [startPageX, setStartPageX] = useState<number>(0);
   const [startPageY, setStartPageY] = useState<number>(0);
 
@@ -34,9 +27,6 @@ const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render }) => {
   const [mscale, setMscale] = useState<number>(1);
   const [canMove, setCanMove] = useState<boolean>(false);
 
-  useEffect(() => {
-    getMapListData(selFloorId);
-  }, [selFloorId]);
   //   let mapWidth: number = 3000,
   //     mapHeight: number = 1200;
 
@@ -80,22 +70,20 @@ const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render }) => {
   };
 
   useEffect(() => {
-    //debugger;
     console.log('searchText', searchText);
-    if (searchText) {
+    if (searchText && searchText.text) {
       let left: any = 0,
         top: any = 0;
-      //   mapList.map((item, index) => {
-      //     if (item.localName == searchText) {
-      //       left = -(item.left || 0);
-      //       top = -(item.top || 0);
-      //     }
-      //   });
-      // debugger;
+      mapList.map((item, index) => {
+        if (item.localName == (searchText && searchText.text)) {
+          left = -(item.left || 0);
+          top = -(item.top || 0);
+        }
+      });
+      //debugger;
       setTranslateX(left);
       setTranslateY(top);
     }
-    searchText = '';
   }, [searchText]);
 
   //   useEffect(() => {// todo 要不要用呢

+ 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>

+ 1 - 1
src/hooks/useMapList.ts

@@ -11,7 +11,7 @@ function useMapList(selFloorId: string) {
   //当selFloorId 改变时调用
   useEffect(() => {
     if (selFloorId) {
-      debugger;
+      //debugger;
       getMapList({ floorId: selFloorId, projectId: '' }).then((res) => {
         var data: API.MapInfo[] = (res.data || {}).spaceList || [];
         mapListData = data;

+ 1 - 1
src/models/map.ts

@@ -6,7 +6,7 @@ export default function () {
 
   const getMapListData = useCallback((selFloorId) => {
     if (selFloorId) {
-      debugger;
+      //debugger;
       getMapList({ floorId: selFloorId, projectId: '' }).then((res) => {
         var data: API.MapInfo[] = (res.data || {}).spaceList || [];
         setMapList(data);

+ 52 - 0
src/models/spaceFunc.ts

@@ -0,0 +1,52 @@
+import React, { useState, useCallback } from 'react';
+import { getMapList } from '@/services/ant-design-pro/environment';
+
+export default function () {
+  const allFunc = {
+    office: ['140'],
+    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'], //休闲
+    device: [
+      '211',
+      '212',
+      '221',
+      '222',
+      '223',
+      '231',
+      '232',
+      '233',
+      '234',
+      '235',
+      '236',
+      '237',
+      '241',
+      '242',
+      '243',
+      '244',
+      '245',
+      '251',
+      '252',
+      '253',
+      '254',
+    ], //设备
+    washroom: ['111', '112'], //卫生间
+    lift: ['130'], //电梯
+    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];
+      if (codeArr.indexOf(spaceCode) > -1) {
+        //debugger;
+        return key;
+      }
+    }
+  }, []);
+
+  return {
+    getSpaceFunc,
+  };
+}

+ 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;

+ 132 - 45
src/pages/Environment/index.tsx

@@ -1,13 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import { FormattedMessage } from 'umi';
+import { FormattedMessage, useModel, useRequest } from 'umi';
 import PageHeader from '@/components/PageHeader';
 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 { Spin } from 'antd';
 import Icon from '@/tenants-ui/Icon';
 
 import styles from './index.less';
@@ -28,81 +29,89 @@ export type navigatorItem = {
 const Environment: React.FC = () => {
   const { envir_temperature, envir_wet, envir_co2, envir_pm25, envir_jiaquan } = equipImageMap;
 
-  const [searchText, setSearchText] = useState<string>();
+  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 [loading, setLoading] = useState<boolean>(true);
   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 { getSpaceFunc } = useModel('spaceFunc');
+
   const changeFloorId = (data: string) => {
-    debugger;
+    //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,15 +126,83 @@ const Environment: React.FC = () => {
     }
     return res;
   };
+  //   const { data, loading } = useRequest(
+  //     () => {
+  //       return getMapList({
+  //         floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
+  //       });
+  //     },
+  //     {
+  //       refreshDeps: [selFloorId],
+  //     },
+  //   );
+
+  //获取地图 mapList
+  useEffect(() => {
+    if (selFloorId) {
+      getMapList({ floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454', projectId: '' }).then(
+        (res) => {
+          var data: API.MapInfo[] = (res.data || {}).spaceList || [];
+          setMapList(data);
+        },
+      );
+    }
+  }, [selFloorId]);
+  //请求环境数据
+  useEffect(() => {
+    if (selNavId && selFloorId) {
+      setLoading(true);
+      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;
+          setLoading(false);
+          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);
+        })
+        .catch(() => {
+          setLoading(false);
+        });
+    }
+  }, [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(s);
+              setSearchText({ text: s });
             }}
           />
 
@@ -146,6 +223,8 @@ const Environment: React.FC = () => {
         type={'enviroment'}
         navigatorChange={navigatorChange}
         changeFloorId={changeFloorId}
+        changeBuildId={changeBuildId}
+        selParamObj={selNav}
       ></TopNavigator>
       <div className={styles.maptop}>
         <div className={styles.right}>
@@ -165,35 +244,43 @@ const Environment: React.FC = () => {
           })}
         </div>
       </div>
-      <Map
-        type={'enviroment'}
-        searchText={searchText}
-        selFloorId={selFloorId}
-        render={(item: API.MapInfo, index: number) => {
-          return (
-            <div
-              key={index + 'house'}
-              className={mapstyles.house}
-              style={{
-                left: item.left,
-                top: item.top,
-                width: item.width,
-                height: item.height,
-                backgroundColor:
-                  'rgba(' +
-                  selNav.colorStr +
-                  (selNav.opacity as number) * getColorOpacity(item[selNav.id]) +
-                  ')',
-              }}
-            >
-              <div className={mapstyles.content}>
-                <Icon className="" type={item.roomFuncType} style={{ fontSize: 20 }}></Icon>
-                <div className={mapstyles.name}>{item.localName}</div>
+      <Spin spinning={loading}>
+        <Map
+          type={'enviroment'}
+          searchText={searchText}
+          selFloorId={selFloorId}
+          mapList={mapCombineList}
+          render={(item: API.MapInfo, index: number) => {
+            return (
+              <div
+                key={index + 'house'}
+                className={mapstyles.house}
+                style={{
+                  left: item.left,
+                  top: item.top,
+                  width: item.width,
+                  height: item.height,
+                  background: item.roomFuncType
+                    ? 'rgba(' +
+                      selNav.colorStr +
+                      (selNav.opacity as number) * getColorOpacity(item.avgValues) +
+                      ')'
+                    : 'repeating-linear-gradient(45deg, rgb(226 226 226), #ffffff 8px)',
+                }}
+              >
+                <div className={mapstyles.content}>
+                  <Icon
+                    className=""
+                    type={getSpaceFunc(item.roomFuncType)}
+                    style={{ fontSize: 20 }}
+                  ></Icon>
+                  <div className={mapstyles.name}>{item.localName}</div>
+                </div>
               </div>
-            </div>
-          );
-        }}
-      ></Map>
+            );
+          }}
+        ></Map>
+      </Spin>
       {/* {mapList.map(function (item, index) {
               return (
                 <div

+ 35 - 20
src/pages/Equipment/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { FormattedMessage } from 'umi';
+import { FormattedMessage, useModel } from 'umi';
 
 import SearchInput from '@/components/SearchInput';
 import PageHeader from '@/components/PageHeader';
@@ -11,17 +11,16 @@ import DeviceModal from './components/deviceModal';
 import styles from './index.less';
 import mapstyles from '@/assets/css/map.less';
 
-// import './map.less';
 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 { getSpaceFunc } = useModel('spaceFunc');
   const { envir_all, equip_air, equip_lamp, envir_curtain } = equipImageMap;
-  const [searchText, setSearchText] = useState<string>('');
+
+  const [searchText, setSearchText] = useState<{ text: any }>();
   const [showModal, setShowModal] = useState<boolean>(false);
   const [navigatorList] = useState<navigatorItem[]>([
     {
@@ -57,20 +56,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;
+    //debugger;
     setSelFloorId(data);
   };
+  //导航条切换
   const navigatorChange = (item: navigatorItem) => {
     //debugger;
     if (item.id == 'all') {
@@ -85,6 +79,7 @@ const Environment: React.FC = () => {
     console.log('showChart');
     setShowModal(true);
   };
+
   //当前设备的状态 all全部开启 part部分开启 close全都关闭  还有类型type 包括airConditioner lamp curtain
   //根据设备状态返回不同的 颜色
   const getColorOpacity = (value: string, type?: string): string => {
@@ -107,14 +102,27 @@ 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(s);
+              setSearchText({ text: s });
             }}
           />
         }
@@ -125,6 +133,7 @@ const Environment: React.FC = () => {
         navigatorChange={navigatorChange}
         action={<TopNavRight selNavObj={selNav} navigatorList={navigatorList}></TopNavRight>}
         changeFloorId={changeFloorId}
+        selParamObj={selNav}
       ></TopNavigator>
       <div className={styles.maptop}>
         {selNav.id !== 'all' && (
@@ -156,6 +165,7 @@ const Environment: React.FC = () => {
       <Map
         searchText={searchText}
         selFloorId={selFloorId}
+        mapList={mapList}
         type={'equipment'}
         render={(item, index) => {
           return (
@@ -167,10 +177,11 @@ const Environment: React.FC = () => {
                 top: item.top,
                 width: item.width,
                 height: item.height,
-                backgroundColor:
-                  selNav.id == 'all'
+                background: item.roomFuncType
+                  ? selNav.id == 'all'
                     ? 'rgba(196, 196, 196, 0.2)'
-                    : getColorOpacity(item[selNav.id]),
+                    : getColorOpacity(item[selNav.id])
+                  : 'repeating-linear-gradient(45deg, rgb(226 226 226), #ffffff 8px)',
               }}
             >
               {selNav.id == 'all' && (
@@ -195,7 +206,11 @@ const Environment: React.FC = () => {
                 <Icon className="" type="hover"></Icon>
               </div>
               <div className={mapstyles.content}>
-                <Icon className="" type={item.roomFuncType} style={{ fontSize: 20 }}></Icon>
+                <Icon
+                  className=""
+                  type={getSpaceFunc(item.roomFuncType)}
+                  style={{ fontSize: 20 }}
+                ></Icon>
                 <div className={mapstyles.name}>{item.localName}</div>
               </div>
             </div>

+ 159 - 65
src/pages/Runtime/index.tsx

@@ -3,14 +3,17 @@ import PageHeader from '@/components/PageHeader';
 import Map from '@/components/map';
 import TopNavigator from '@/components/topNavigator';
 import RunNavRight from './components/topNavRight';
-import { FormattedMessage, history } from 'umi';
+import { FormattedMessage, history, useModel } from 'umi';
+import { Spin } from 'antd';
+import { Popover } from 'antd';
 import styles from './index.less';
 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 { queryDeviceTimeManage } from '@/services/ant-design-pro/environment';
+import { getMapList, queryDeviceTimeManage } from '@/services/ant-design-pro/environment';
 
 type runtimeNavType = {
   normalRun: any;
@@ -20,56 +23,113 @@ type runtimeNavType = {
 
 const Runtime: React.FC = () => {
   // const { maptemp6 } = equipImageMap;
-
-  const [searchText, setSearchText] = useState<string>();
+  const { getSpaceFunc } = useModel('spaceFunc');
+  const [loading, setLoading] = useState<boolean>(true);
+  const [searchText, setSearchText] = useState<{ text: any }>();
   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 [selTime, setSelTime] = useState<string>(moment().format('YYYYMMDD'));
+  const [spaceTimeList, setSpaceTimeList] = useState<any[]>([]);
+
+  //楼层切换的回调
   const changeFloorId = (data: string) => {
-    debugger;
+    //debugger;
     setSelFloorId(data);
   };
   const checkRecord = () => {
     history.push('/runtime/recordList');
     console.log('showR');
   };
+  //时间切换的回调
   const changeTime = (time) => {
-    debugger;
-    var timeStr = time.format('YYYYDMMDD');
+    //debugger;
+    var timeStr = time.format('YYYYMMDD');
     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(() => {
     if (selFloorId && selTime) {
-      debugger;
+      setLoading(true);
       queryDeviceTimeManage({
         //floorId: selFloorId,
         floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
-        date: selTime,
-        //date: 20220212,
-      }).then(function (res) {
-        debugger;
-        var resdata = res || {};
-        setRuntimeNav({
-          normalRun: resdata.workTimeNum,
-          overtimeWork: resdata.overTimeNum,
-          overtimeBook: resdata.meetTimeNum,
+        //date: selTime,
+        date: 20220212,
+      })
+        .then(function (res) {
+          setLoading(false);
+          var resdata = res || {};
+          setRuntimeNav({
+            normalRun: resdata.workTimeNum,
+            overtimeWork: resdata.overTimeNum,
+            overtimeBook: resdata.meetTimeNum,
+          });
+          var resList = res.content || [];
+          resList.forEach((ritem) => {
+            ritem.runTimeStatus = 'normalRun';
+            var timeList = [];
+            if (ritem.hasOwnProperty('workTimeStartTime')) {
+              var timeStrArr = [ritem.workTimeStartTime, ritem.workTimeEndTime];
+              timeList.push(timeStrArr);
+            }
+            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);
+        })
+        .catch(() => {
+          setLoading(false);
         });
-        var resList = res.content || [];
-        resList.forEach((item) => {
-          item.runTimeStatus = 'normalRun';
-          if (item.hasOwnProperty('meetTime')) {
-            debugger;
-            item.runTimeStatus = 'overtimeBook';
-          }
-          if (item.hasOwnProperty('overTimeStartTime')) {
-            debugger;
-            item.runTimeStatus = 'overtimeWork';
-          }
-        });
-      });
     }
   }, [selFloorId, selTime]);
+
+  useEffect(() => {
+    //mapList,spaceTimeList 这两个数据的结合
+    console.log('dfsd-------', mapList, spaceTimeList);
+    // 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 (
     <>
       <PageHeader
@@ -82,8 +142,9 @@ const Runtime: React.FC = () => {
           //     </div>
           //   </div>
           <SearchInput
+            mapList={mapList}
             onSearch={(s) => {
-              setSearchText(s);
+              setSearchText({ text: s });
             }}
           />
         }
@@ -113,41 +174,74 @@ const Runtime: React.FC = () => {
                 <div className={mapstyles.name}>Jozy Zone</div>
               </div>
             </div> */}
-      <Map
-        searchText={searchText}
-        selFloorId={selFloorId}
-        type={'runtime'}
-        render={(item, index) => {
-          return (
-            <div
-              key={index + 'house'}
-              className={mapstyles.house}
-              style={{
-                left: item.left,
-                top: item.top,
-                width: item.width,
-                height: item.height,
-                backgroundColor:
-                  item.runTimeStatus == 'normalRun'
-                    ? 'rgba(196, 196, 196, 0.2)'
-                    : item.runTimeStatus == 'overtimeWork'
-                    ? 'rgba(94, 139, 207, 0.2)'
-                    : 'rgba(0, 220, 35, 0.2)',
-              }}
-            >
-              <div className={mapstyles.allTime}>
-                {(item.timeList || []).map(function (titem: string, tindex: number) {
+      <Spin spinning={loading}>
+        <Map
+          searchText={searchText}
+          selFloorId={selFloorId}
+          mapList={mapCombineList}
+          type={'runtime'}
+          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
+                    ? item.runTimeStatus == 'overtimeBook'
+                      ? 'rgba(0, 220, 35, 0.2)'
+                      : item.runTimeStatus == 'overtimeWork'
+                      ? 'rgba(94, 139, 207, 0.2)'
+                      : 'rgba(196, 196, 196, 0.2)'
+                    : 'repeating-linear-gradient(45deg, rgb(226 226 226), #ffffff 8px)',
+                }}
+              >
+                <div className={mapstyles.allTime}>
+                  {/* {(item.timeList || []).map(function (titem: string, tindex: number) {
                   return <span key={tindex + 'time'}>{titem},</span>;
-                })}
-              </div>
-              <div className={mapstyles.content}>
-                <Icon className="" type={item.roomFuncType} style={{ fontSize: 20 }}></Icon>
-                <div className={mapstyles.name}>{item.localName}</div>
+                })} */}
+                  {item.showTimeList && item.showTimeList.length > 1 && (
+                    <Popover
+                      content={(item.showTimeList || []).map((timeItem, index) => {
+                        return (
+                          <div key={'time' + index}>
+                            {timeItem[0]}-{timeItem[1]}
+                          </div>
+                        );
+                      })}
+                      trigger="hover"
+                      style={{ color: 'none' }}
+                    >
+                      <span
+                        className={cx({
+                          [mapstyles.overworkTime]: item.runTimeStatus == 'overtimeWork',
+                          [mapstyles.meetTime]: item.runTimeStatus == 'overtimeBook',
+                        })}
+                      >
+                        {item.showTimeStr}
+                      </span>
+                    </Popover>
+                  )}
+                  {item.showTimeList && item.showTimeList.length == 1 && (
+                    <span>{item.showTimeStr}</span>
+                  )}
+                </div>
+                <div className={mapstyles.content}>
+                  <Icon
+                    className=""
+                    type={getSpaceFunc(item.roomFuncType)}
+                    style={{ fontSize: 20 }}
+                  ></Icon>
+                  <div className={mapstyles.name}>{item.localName}</div>
+                </div>
               </div>
-            </div>
-          );
-        }}
-      ></Map>
+            );
+          }}
+        ></Map>
+      </Spin>
     </>
   );
 };

+ 15 - 2
src/services/ant-design-pro/environment.ts

@@ -34,9 +34,9 @@ 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/duoduo-service/setup-service/deviceManage/queryDeviceTimeManage',
+    '/api4/duoduo-service/setup-service/deviceManage/queryDeviceTimeManage',
     {
       method: 'GET',
       params: {
@@ -58,3 +58,16 @@ export async function queryPropertyData(params: any, options?: { [key: string]:
     ...(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;
+  };
 }

+ 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_nhdn0ferz2.js',
+  scriptUrl: '//at.alicdn.com/t/font_3184967_ll9zpyz6dxk.js',
 });
 
 export default ({ type, className, style = {} }) => {