anxiaoxia 3 tahun lalu
induk
melakukan
b4b60fdefb

+ 48 - 23
src/components/SearchInput/index.tsx

@@ -5,37 +5,51 @@ import { Select } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 import { useModel } from 'umi';
 type mapResType = {
-  text: string;
-  value: string;
+  id: string;
+  localName: string;
+  [key: string]: any;
 };
 import { querySpace } from '@/services/ant-design-pro/environment';
 
 const { Option } = Select;
 
 type SearchInputProps = {
-  onSearch: (s: string) => void;
+  callbackSearch: (s: any) => void;
   mapList: API.MapInfo[];
 };
-const SearchInput: React.FC<SearchInputProps> = ({ onSearch, mapList }) => {
+const SearchInput: React.FC<SearchInputProps> = ({ callbackSearch, mapList }) => {
   const [matchData, setMatchData] = useState<mapResType[]>([]);
   const [value, setValue] = useState<any>();
-  // const { mapList } = useModel('map');
+  const { projectId } = useModel('spaceFunc');
+  const { changeSearchBuildId, changeSearchFloorId } = useModel('buildFloor');
 
   //这是搜索 的下拉列表的显示
   const handleSearch = (value: string) => {
     //debugger;
     if (value) {
-      let data: mapResType[] = [];
-      mapList.map((item, index) => {
-        if ((item.localName || '').indexOf(value) > -1) {
-          data.push({
-            text: item.localName,
-            value: item.localName,
-          });
-        }
+      // let data: mapResType[] = [];
+      //   mapList.map((item, index) => {
+      //     if ((item.localName || '').indexOf(value) > -1) {
+      //       data.push({
+      //         text: item.localName,
+      //         value: item.localName,
+      //       });
+      //     }
+      //   });
+      var paramsObj = {
+        criteria: {
+          projectId: projectId,
+          localName: {
+            $like: `%${value}%`,
+          },
+        },
+      };
+
+      querySpace(paramsObj).then((res) => {
+        var resContent = res.content || [];
+        console.log('setMatch', 'data');
+        setMatchData(resContent);
       });
-      setMatchData(data);
-      //console.log('search', data);
     } else {
       setMatchData([]);
     }
@@ -43,18 +57,28 @@ const SearchInput: React.FC<SearchInputProps> = ({ onSearch, mapList }) => {
 
   //这是搜索的下拉列表的点击
   const handleChange = (sel: string) => {
-    //debugger;
+    debugger;
     setValue(null); //清空输入的值
     setMatchData([]); //清空搜索匹配列表
-    onSearch(sel);
+    var filterItem = matchData.filter((item) => {
+      return item.id == sel;
+    });
+    var resItem = filterItem[0] || {};
+    callbackSearch(resItem);
+    //改变存储的搜索得到的buildingId floorId
+    changeSearchBuildId(resItem.buildingId);
+    changeSearchFloorId(resItem.floorId);
   };
   const handelInputKeyDown = (e) => {
     // 如果点击回车的操作
     //console.log('keydown', matchData);
     if (e.code == 'Enter') {
-      if (matchData.length == 1) {
-        onSearch(matchData[0].text);
-      }
+      //if (matchData.length == 1) {
+      var resItem = matchData[0] || {};
+      callbackSearch(resItem);
+      changeSearchBuildId(resItem.buildingId);
+      changeSearchFloorId(resItem.floorId);
+      //}
     }
   };
   return (
@@ -82,9 +106,10 @@ const SearchInput: React.FC<SearchInputProps> = ({ onSearch, mapList }) => {
         //     />
         //   }
       >
-        {matchData.map(function (item, index) {
-          return <Option key={item.value}>{item.text}</Option>;
-        })}
+        {matchData.length > 1 &&
+          matchData.map(function (item, index) {
+            return <Option key={item.id}>{item.localName}</Option>;
+          })}
       </Select>
     </div>
   );

+ 23 - 9
src/components/map/index.tsx

@@ -74,20 +74,34 @@ const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render, mapList
   //实现搜索 搜索时 出现结果
   useEffect(() => {
     //console.log('searchText', searchText);
+
+    //searchText使用对象 防止修改了 不再重新定位
     if (searchText && searchText.text) {
       let left: any = 0,
         top: any = 0;
-      mapList.map((item, index) => {
-        if (item.localName == (searchText && searchText.text)) {
-          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);
+      //     }
+      //   });
+      var filterItem = mapList.filter((item) => {
+        return item.localName == (searchText && searchText.text);
       });
-      //debugger;
-      setTranslateX(left);
-      setTranslateY(top);
+
+      if (filterItem.length == 0) {
+        return;
+      } else {
+        left = -(filterItem[0].left || 0);
+        top = -(filterItem[0].top || 0);
+        setTranslateX(left);
+        setTranslateY(top);
+      }
     }
-  }, [searchText]);
+  }, [searchText, mapList]);
+
   useEffect(() => {
     //debugger;
   }, [mapList]);

+ 52 - 12
src/components/topNavigator/index.tsx

@@ -5,7 +5,7 @@ import { Select } from 'antd';
 
 import type { navigatorItem } from '@/pages/Environment/index';
 import { getBuildingList, getFloorList } from '@/services/ant-design-pro/environment';
-
+import { useModel } from 'umi';
 export type topNavigatorProps = {
   navigatorList?: navigatorItem[];
   type: string;
@@ -33,34 +33,68 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
   changeBuildId,
   selParamObj,
 }) => {
+  const { projectId } = useModel('spaceFunc');
+  //存储的 搜索到空间的buildingId floorId
+  const { searchBuildId, searchFloorId, changeSearchBuildId, changeSearchFloorId } =
+    useModel('buildFloor');
   const [buildList, setBuildList] = useState<buildItem[]>([]);
   const [currentBuild, setCurrentBuild] = useState<any>();
 
   const [floorList, setFloorList] = useState<floorItem[]>([]);
   const [currentFloor, setCurrentFloor] = useState<string>();
+  //则监听searchBuildId的改变    如果buildingId改变 请求楼层列表
+  useEffect(() => {
+    debugger;
+    if (searchBuildId) {
+      setCurrentBuild(searchBuildId);
+      // changeSearchBuildId('');
+    }
+  }, [searchBuildId]);
 
   useEffect(() => {
+    debugger;
+    //如果 建筑id改变 不应该走着 todo
+    if (searchFloorId) {
+      //显示
+      setCurrentFloor(searchFloorId);
+      //父亲的floorId
+      changeFloorId && changeFloorId(searchFloorId);
+      // changeSearchFloorId('');
+    }
+  }, [searchFloorId]);
+
+  //请求建筑的接口
+  useEffect(() => {
     //console.log('TopNavigator----getBuildingList');
-    //请求建筑的接口
     getBuildingList({
       criteria: {
-        projectId: 'Pj1101080259',
+        projectId: projectId,
       },
     }).then((res) => {
-      //debugger;
       var resData = res.content || [];
+      //   setBuildList(
+      //     (resData || []).map((item) => {
+      //       return { label: item.localName, value: item.id };
+      //     }),
+      //   );
+      var resData2 = [];
+      resData2.push(JSON.parse(JSON.stringify(resData[0])));
+      resData2.push(JSON.parse(JSON.stringify(resData[0])));
+      resData2[1].id = 'sdfsd';
+      resData2[1].localName = 'boruiÎ';
       setBuildList(
-        (resData || []).map((item) => {
+        (resData2 || []).map((item) => {
           return { label: item.localName, value: item.id };
         }),
       );
-      //debugger;
-      setCurrentBuild((resData[0] || {}).id); //设置第一个值
+      debugger;
+      setCurrentBuild((resData[0] || {}).id); //设置第一个建筑
       changeBuildId && changeBuildId((resData[0] || {}).id);
     });
   }, []);
-
+  //请求楼层列表的接口
   useEffect(() => {
+    debugger;
     if (currentBuild) {
       getFloorList({
         criteria: {
@@ -68,16 +102,19 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
           //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);
+
+        //默认选中的楼层id
+        setTimeout(() => {
+          debugger;
+          setCurrentFloor(searchFloorId || (resData[0] || {}).id); //如果有搜索的楼层id 则用搜索的结果
+          changeFloorId && changeFloorId(searchFloorId || (resData[0] || {}).id); //改变父组件的floorId的值
+        }, 0);
       });
     }
   }, [currentBuild]);
@@ -85,7 +122,10 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
   const changBuildHandle = useCallback((val) => {
     //console.log('select-onChange', val);
     debugger;
+    // changeSearchFloorId('');
+    //显示的建筑改变
     setCurrentBuild(val);
+    //父亲的buildId改变
     changeBuildId && changeBuildId(val);
   }, []);
   const changFloorHandle = useCallback((val) => {

+ 5 - 5
src/hooks/useMapList.ts

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

+ 18 - 0
src/models/buildFloor.ts

@@ -0,0 +1,18 @@
+import React, { useState, useCallback } from 'react';
+
+export default function () {
+  const [searchBuildId, setSearchBuildId] = useState<string>();
+  const [searchFloorId, setSearchFloorId] = useState<string>();
+  const changeSearchBuildId = (value: string) => {
+    setSearchBuildId(value);
+  };
+  const changeSearchFloorId = (value: string) => {
+    setSearchFloorId(value);
+  };
+  return {
+    searchBuildId,
+    searchFloorId,
+    changeSearchBuildId,
+    changeSearchFloorId,
+  };
+}

+ 1 - 1
src/models/map.ts

@@ -3,7 +3,7 @@ import { getMapList } from '@/services/ant-design-pro/environment';
 
 export default function () {
   const [mapList, setMapList] = useState<API.MapInfo[]>([]);
-
+  //不用了
   const getMapListData = useCallback((selFloorId) => {
     if (selFloorId) {
       //debugger;

+ 3 - 1
src/models/spaceFunc.ts

@@ -44,8 +44,10 @@ export default function () {
       }
     }
   }, []);
-
+  const projectId = 'Pj1101080259';
+  //const projectId = 'Pj3301100002';
   return {
     getSpaceFunc,
+    projectId,
   };
 }

+ 10 - 7
src/pages/Environment/index.tsx

@@ -27,6 +27,7 @@ export type navigatorItem = {
   [key: string]: any;
 };
 const Environment: React.FC = () => {
+  const { projectId } = useModel('spaceFunc');
   const { envir_temperature, envir_wet, envir_co2, envir_pm25, envir_jiaquan } = equipImageMap;
 
   const [searchText, setSearchText] = useState<{ text: any }>();
@@ -91,7 +92,7 @@ const Environment: React.FC = () => {
       fixed: 2,
     },
   ]);
-  const [loading, setLoading] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(false);
   const [selNav, setSelNav] = useState<navigatorItem>(navigatorList[0]);
   const [selNavId, setSelNavId] = useState<string>(navigatorList[0].id);
   const [mapList, setMapList] = useState<API.MapInfo[]>([]);
@@ -142,7 +143,10 @@ const Environment: React.FC = () => {
   useEffect(() => {
     if (selFloorId) {
       setLoading(true);
-      getMapList({ floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454', projectId: '' })
+      getMapList({
+        //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
+        floorId: selFloorId,
+      })
         .then((res) => {
           setLoading(false);
           var data: API.MapInfo[] = (res.data || {}).spaceList || [];
@@ -157,9 +161,7 @@ const Environment: React.FC = () => {
   useEffect(() => {
     if (selNavId && selFloorId) {
       //setLoading(true);
-      var floorParams = [
-        { id: 'Fl11010802593241ec348ecb4148806b9034c8957454', projectId: 'Pj1101080259' },
-      ];
+      var floorParams = [{ id: selFloorId, projectId: projectId }];
       var endTime = moment();
       var startTime = moment().subtract(30, 'minutes');
       var startStr = startTime.format('YYYYMMDDHHmmss');
@@ -213,8 +215,9 @@ const Environment: React.FC = () => {
         action={
           <SearchInput
             mapList={mapList}
-            onSearch={(s) => {
-              setSearchText({ text: s });
+            callbackSearch={(s) => {
+              setSelFloorId(s.floorId);
+              setSearchText({ text: s.localName });
             }}
           />
 

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

@@ -7,6 +7,7 @@ import styles from './index.less';
 //import { equipImageMap } from '@/config/image.js';
 import type { navigatorItem } from '@/pages/Environment/index';
 import { changeAllAirHttp } from '@/services/ant-design-pro/equipment';
+import { useModel } from 'umi';
 
 export type topNavRightProps = {
   selNavObj: navigatorItem;
@@ -17,6 +18,7 @@ export type topNavRightProps = {
 const TopNavRight: React.FC<topNavRightProps> = ({ selNavObj, navigatorList, mapList }) => {
   //const [modalvisible, setModalvisible] = useState<boolean>(false);
   //去掉全部设备的 设备列表
+  const { projectId } = useModel('spaceFunc');
   const [deviceList, setDeviceList] = useState<navigatorItem[]>([]);
   useEffect(() => {
     setDeviceList(navigatorList.slice(1));
@@ -77,7 +79,7 @@ const TopNavRight: React.FC<topNavRightProps> = ({ selNavObj, navigatorList, map
     mapList.forEach((sitem) => {
       const itemId = type === 'close' ? 10 : 12; // 10关闭 12开启
       paramsArr.push({
-        projectId: 'Pj1101080259',
+        projectId: projectId,
         objectId: sitem.id, // 空间id
         valueType: 1, // 固定为1 1
         itemId: itemId,

+ 22 - 8
src/pages/Equipment/index.tsx

@@ -35,10 +35,14 @@ type statistics = {
   runCount: number;
 };
 const Environment: React.FC = () => {
-  const { getSpaceFunc } = useModel('spaceFunc');
+  const { getSpaceFunc, projectId } = useModel('spaceFunc');
+  const { changeSearchFloorId } = useModel('buildFloor');
   const { envir_all, equip_air, equip_lamp, envir_curtain } = equipImageMap;
 
   const [searchText, setSearchText] = useState<{ text: any }>();
+  //const [searchSpace, setSearchSpace] = useState<{}>();
+  //   const [searchFloorId, setSearchFloorId] = useState<{}>();
+  //   const [searchBuildId, setSearchBuildId] = useState<{}>();
   const [showModal, setShowModal] = useState<boolean>(false);
   const [showSpace, setShowSpace] = useState<API.MapInfo>({}); //当前弹框选中的空间
   const [navigatorList, setNavigatorList] = useState<navigatorItem[]>([
@@ -81,7 +85,7 @@ const Environment: React.FC = () => {
   const [selNav, setSelNav] = useState<navigatorItem>(navigatorList[0]);
   const [selFloorId, setSelFloorId] = useState<string>();
   const [mapCombineList, setMapCombineList] = useState<any[]>([]);
-  const [loading, setLoading] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(false);
 
   const changeFloorId = (data: string) => {
     //debugger;
@@ -175,7 +179,9 @@ const Environment: React.FC = () => {
   };
   //获取地图 mapList
   useEffect(() => {
+    //changeSearchFloorId('');
     if (selFloorId) {
+      debugger;
       setLoading(true);
       getMapList({
         //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
@@ -190,6 +196,8 @@ const Environment: React.FC = () => {
         .catch(() => {
           setLoading(false);
         });
+    } else {
+      setMapList([]);
     }
   }, [selFloorId]);
   //获取设备状态 设备种类
@@ -199,10 +207,10 @@ const Environment: React.FC = () => {
       queryEquipStatistics({
         //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
         floorId: selFloorId,
-        projectId: 'Pj1101080259',
+        projectId: projectId,
       })
         .then((res) => {
-          //debugger;
+          debugger;
           // setLoading(false);
           var statistics = res.data.statistics || [];
           //赋值 运行中的设备数量
@@ -218,10 +226,13 @@ const Environment: React.FC = () => {
           //设备空间信息
           var spaceList = res.data.spaceList || [];
           spaceList.forEach((item: any) => {
-            item.equipStatusList.forEach((eItem: equipStatus) => {
+            //debugger;
+            (item.equipStatusList || []).forEach((eItem: equipStatus) => {
+              //debugger;
               item[eItem.equipType] = eItem.status;
             });
           });
+
           setEquipMapList(spaceList);
         })
         .catch(() => {
@@ -269,6 +280,7 @@ const Environment: React.FC = () => {
     setMapCombineList(combineList);
     console.log('combine');
   }, [equipMapList, mapList, timeMapList]);
+
   let firtTime: number = 0;
   let lastTime: number = 0;
   return (
@@ -278,9 +290,11 @@ const Environment: React.FC = () => {
         action={
           <SearchInput
             mapList={mapList}
-            onSearch={(s) => {
-              //触发了搜索
-              setSearchText({ text: s });
+            callbackSearch={(s) => {
+              //触发了搜索 如果楼层改变 重新更新地图
+              debugger;
+              //setSelFloorId(s.floorId); //一个建筑 搜索其他楼层
+              setSearchText({ text: s.localName });
             }}
           />
         }

+ 1 - 1
src/pages/Runtime/RecordList/index.jsx

@@ -98,7 +98,7 @@ export default function RecordList() {
             allowClear
             style={{ width: '20%' }}
             placeholder={'搜索空间'}
-            onSearch={(s) => {
+            callbackSearch={(s) => {
               setSearchText(s || undefined);
             }}
           />

+ 10 - 6
src/pages/Runtime/index.tsx

@@ -24,7 +24,7 @@ type runtimeNavType = {
 const Runtime: React.FC = () => {
   // const { maptemp6 } = equipImageMap;
   const { getSpaceFunc } = useModel('spaceFunc');
-  const [loading, setLoading] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(false);
   const [searchText, setSearchText] = useState<{ text: any }>();
   const [runtimeNav, setRuntimeNav] = useState<runtimeNavType>({});
   const [mapList, setMapList] = useState<API.MapInfo[]>([]);
@@ -52,7 +52,10 @@ const Runtime: React.FC = () => {
   useEffect(() => {
     if (selFloorId) {
       setLoading(true);
-      getMapList({ floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454', projectId: '' })
+      getMapList({
+        floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
+        projectId: '',
+      })
         .then((res) => {
           //debugger;
           setLoading(false);
@@ -70,8 +73,8 @@ const Runtime: React.FC = () => {
     if (selFloorId && selTime) {
       //setLoading(true);
       queryDeviceTimeManage({
-        //floorId: selFloorId,
-        floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
+        floorId: selFloorId,
+        //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
         //date: selTime,
         date: 20220212,
       })
@@ -147,8 +150,9 @@ const Runtime: React.FC = () => {
           //   </div>
           <SearchInput
             mapList={mapList}
-            onSearch={(s) => {
-              setSearchText({ text: s });
+            callbackSearch={(s) => {
+              setSelFloorId(s.floorId);
+              setSearchText({ text: s.localName });
             }}
           />
         }

+ 1 - 1
src/services/ant-design-pro/environment.ts

@@ -88,7 +88,7 @@ export async function queryEquipStatistics(params: any, options?: { [key: string
 
 export async function querySpace(body: any, options?: { [key: string]: any }) {
   //
-  return request<API.EnvironmentParam>(`/api2/object/object/space/query`, {
+  return request<API.EnvironmentParam>(`/api2/object/space/query`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',