zhaojijng пре 3 година
родитељ
комит
df93da39f4

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

@@ -71,8 +71,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>

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

@@ -28,7 +28,7 @@ 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 [navigatorList] = useState<navigatorItem[]>([
@@ -125,7 +125,7 @@ const Environment: React.FC = () => {
         action={
           <SearchInput
             onSearch={(s) => {
-              setSearchText(s);
+              setSearchText({ text: s });
             }}
           />
 

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

@@ -21,7 +21,7 @@ import type { navigatorItem } from '@/pages/Environment/index';
 
 const Environment: React.FC = () => {
   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[]>([
     {
@@ -114,7 +114,7 @@ const Environment: React.FC = () => {
         action={
           <SearchInput
             onSearch={(s) => {
-              setSearchText(s);
+              setSearchText({ text: s });
             }}
           />
         }

+ 94 - 21
src/pages/Runtime/index.tsx

@@ -4,13 +4,14 @@ import Map from '@/components/map';
 import TopNavigator from '@/components/topNavigator';
 import RunNavRight from './components/topNavRight';
 import { FormattedMessage, history } from 'umi';
+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 { queryDeviceTimeManage } from '@/services/ant-design-pro/environment';
+import { getMapList, queryDeviceTimeManage } from '@/services/ant-design-pro/environment';
 
 type runtimeNavType = {
   normalRun: any;
@@ -21,11 +22,15 @@ type runtimeNavType = {
 const Runtime: React.FC = () => {
   // const { maptemp6 } = equipImageMap;
 
-  const [searchText, setSearchText] = useState<string>();
+  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;
     setSelFloorId(data);
@@ -34,19 +39,34 @@ const Runtime: React.FC = () => {
     history.push('/runtime/recordList');
     console.log('showR');
   };
+  //时间切换的回调
   const changeTime = (time) => {
     debugger;
-    var timeStr = time.format('YYYYDMMDD');
+    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;
+      //debugger;
       queryDeviceTimeManage({
         //floorId: selFloorId,
         floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
-        date: selTime,
-        //date: 20220212,
+        //date: selTime,
+        date: 20220212,
       }).then(function (res) {
         debugger;
         var resdata = res || {};
@@ -56,20 +76,53 @@ const Runtime: React.FC = () => {
           overtimeBook: resdata.meetTimeNum,
         });
         var resList = res.content || [];
-        resList.forEach((item) => {
-          item.runTimeStatus = 'normalRun';
-          if (item.hasOwnProperty('meetTime')) {
-            debugger;
-            item.runTimeStatus = 'overtimeBook';
+        resList.forEach((ritem) => {
+          ritem.runTimeStatus = 'normalRun';
+          var timeList = [];
+          if (ritem.hasOwnProperty('workTimeStartTime')) {
+            var timeStrArr = [ritem.workTimeStartTime, ritem.workTimeEndTime];
+            timeList.push(timeStrArr);
           }
-          if (item.hasOwnProperty('overTimeStartTime')) {
-            debugger;
-            item.runTimeStatus = 'overtimeWork';
+          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);
       });
     }
   }, [selFloorId, selTime]);
+
+  useEffect(() => {
+    //mapList,spaceTimeList 这两个数据的结合
+    debugger;
+    console.log('dfsd-------', mapList, spaceTimeList);
+    if (mapList && mapList.length > 0 && spaceTimeList && spaceTimeList.length > 0) {
+      var combineList = [];
+      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 +135,9 @@ const Runtime: React.FC = () => {
           //     </div>
           //   </div>
           <SearchInput
+            mapList={mapList}
             onSearch={(s) => {
-              setSearchText(s);
+              setSearchText({ text: s });
             }}
           />
         }
@@ -116,6 +170,7 @@ const Runtime: React.FC = () => {
       <Map
         searchText={searchText}
         selFloorId={selFloorId}
+        mapList={mapCombineList}
         type={'runtime'}
         render={(item, index) => {
           return (
@@ -128,17 +183,35 @@ const Runtime: React.FC = () => {
                 width: item.width,
                 height: item.height,
                 backgroundColor:
-                  item.runTimeStatus == 'normalRun'
-                    ? 'rgba(196, 196, 196, 0.2)'
+                  item.runTimeStatus == 'overtimeBook'
+                    ? 'rgba(0, 220, 35, 0.2)'
                     : item.runTimeStatus == 'overtimeWork'
                     ? 'rgba(94, 139, 207, 0.2)'
-                    : 'rgba(0, 220, 35, 0.2)',
+                    : 'rgba(196, 196, 196, 0.2)',
               }}
             >
               <div className={mapstyles.allTime}>
-                {(item.timeList || []).map(function (titem: string, tindex: number) {
+                {/* {(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) => {
+                      return (
+                        <div>
+                          {timeItem[0]}-{timeItem[1]}
+                        </div>
+                      );
+                    })}
+                    trigger="hover"
+                    style={{ color: 'none' }}
+                  >
+                    <span>{item.showTimeStr}</span>
+                  </Popover>
+                )}
+                {item.showTimeList && item.showTimeList.length == 1 && (
+                  <span>{item.showTimeStr}</span>
+                )}
               </div>
               <div className={mapstyles.content}>
                 <Icon className="" type={item.roomFuncType} style={{ fontSize: 20 }}></Icon>

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

@@ -34,15 +34,12 @@ export async function getFloorList(body: any, options?: { [key: string]: any })
   });
 }
 export async function queryDeviceTimeManage(params: any, options?: { [key: string]: any }) {
-  // debugger;
-  return request<API.DeviceTimeType>(
-    '/api3/duoduo-service/setup-service/deviceManage/queryDeviceTimeManage',
-    {
-      method: 'GET',
-      params: {
-        ...params,
-      },
-      ...(options || {}),
+  // debugger;  '/api3/duoduo-service/setup-service/deviceManage/queryDeviceTimeManage'
+  return request<API.DeviceTimeType>('/api3/deviceManage/queryDeviceTimeManage', {
+    method: 'GET',
+    params: {
+      ...params,
     },
-  );
+    ...(options || {}),
+  });
 }