Browse Source

环境调节

zhaojijng 3 years ago
parent
commit
68b97624d4
2 changed files with 168 additions and 145 deletions
  1. 65 49
      src/pages/Environment/index.tsx
  2. 103 96
      src/pages/Runtime/index.tsx

+ 65 - 49
src/pages/Environment/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { FormattedMessage, useModel } from 'umi';
+import { FormattedMessage, useModel, useRequest } from 'umi';
 import PageHeader from '@/components/PageHeader';
 import Map from '@/components/map';
 import SearchInput from '@/components/SearchInput';
@@ -8,7 +8,7 @@ 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 { Spin } from 'antd';
 import Icon from '@/tenants-ui/Icon';
 
 import styles from './index.less';
@@ -90,6 +90,7 @@ const Environment: React.FC = () => {
       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[]>([]);
@@ -125,12 +126,22 @@ 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) => {
-          //debugger;
           var data: API.MapInfo[] = (res.data || {}).spaceList || [];
           setMapList(data);
         },
@@ -140,7 +151,7 @@ const Environment: React.FC = () => {
   //请求环境数据
   useEffect(() => {
     if (selNavId && selFloorId) {
-      debugger;
+      setLoading(true);
       var floorParams = [
         { id: 'Fl11010802593241ec348ecb4148806b9034c8957454', projectId: 'Pj1101080259' },
       ];
@@ -153,15 +164,20 @@ const Environment: React.FC = () => {
         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);
-      });
+      })
+        .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]);
 
@@ -228,43 +244,43 @@ const Environment: React.FC = () => {
           })}
         </div>
       </div>
-      {/* background: repeating-linear-gradient(
-45deg, #ECEFF4, #ffffff 8px); */}
-      <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>
+      <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

+ 103 - 96
src/pages/Runtime/index.tsx

@@ -4,6 +4,7 @@ import Map from '@/components/map';
 import TopNavigator from '@/components/topNavigator';
 import RunNavRight from './components/topNavRight';
 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';
@@ -23,7 +24,7 @@ type runtimeNavType = {
 const Runtime: React.FC = () => {
   // const { maptemp6 } = equipImageMap;
   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[]>([]);
@@ -63,46 +64,50 @@ const Runtime: React.FC = () => {
   //获取时间列表 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,
-        });
-        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];
+      })
+        .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);
-            });
-          }
-          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] : '';
+              ritem.runTimeStatus = 'overtimeWork';
+            }
+            ritem.showTimeList = timeList;
+            ritem.showTimeStr =
+              timeList.length > 0 ? timeList[0][0] + '-' + timeList[timeList.length - 1][1] : '';
+          });
+          setSpaceTimeList(resList);
+        })
+        .catch(() => {
+          setLoading(false);
         });
-        setSpaceTimeList(resList);
-      });
     }
   }, [selFloorId, selTime]);
 
@@ -111,7 +116,7 @@ const Runtime: React.FC = () => {
     console.log('dfsd-------', mapList, spaceTimeList);
     // if (mapList && mapList.length > 0 && spaceTimeList && spaceTimeList.length > 0) {
 
-    var combineList = [];
+    var combineList: any = [];
     mapList.map(function (mitem) {
       var spaceId = mitem.spaceId;
       var filterSpace = spaceTimeList.filter((ele) => {
@@ -169,72 +174,74 @@ const Runtime: React.FC = () => {
                 <div className={mapstyles.name}>Jozy Zone</div>
               </div>
             </div> */}
-      <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) {
+      <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>;
                 })} */}
-                {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.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' }}
                     >
-                      {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>
+                      <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>
     </>
   );
 };