浏览代码

针对地图搜索的修改

zhaojijng 3 年之前
父节点
当前提交
ccee969c20

+ 7 - 6
src/components/SearchInput/index.tsx

@@ -14,18 +14,17 @@ import { querySpace } from '@/services/ant-design-pro/environment';
 const { Option } = Select;
 
 type SearchInputProps = {
-  callbackSearch: (s: any) => void;
+  // callbackSearch: (s: any) => void;
   mapList: API.MapInfo[];
 };
-const SearchInput: React.FC<SearchInputProps> = ({ callbackSearch, mapList }) => {
+const SearchInput: React.FC<SearchInputProps> = ({ mapList }) => {
   const [matchData, setMatchData] = useState<mapResType[]>([]);
   const [value, setValue] = useState<any>();
   const { projectId } = useModel('spaceFunc');
-  const { changeSearchBuildId, changeSearchFloorId } = useModel('buildFloor');
+  const { changeSearchBuildId, changeSearchFloorId, changeSearchText } = useModel('searchInfo');
 
   //这是搜索 的下拉列表的显示
   const handleSearch = (value: string) => {
-    //debugger;
     if (value) {
       // let data: mapResType[] = [];
       //   mapList.map((item, index) => {
@@ -63,7 +62,8 @@ const SearchInput: React.FC<SearchInputProps> = ({ callbackSearch, mapList }) =>
       return item.id == sel;
     });
     var resItem = filterItem[0] || {};
-    callbackSearch(resItem);
+    //callbackSearch(resItem);
+    changeSearchText({ text: resItem.localName });
     //改变存储的搜索得到的buildingId floorId
     changeSearchBuildId(resItem.buildingId);
     changeSearchFloorId(resItem.floorId);
@@ -74,7 +74,8 @@ const SearchInput: React.FC<SearchInputProps> = ({ callbackSearch, mapList }) =>
     if (e.code == 'Enter') {
       //if (matchData.length == 1) {
       var resItem = matchData[0] || {};
-      callbackSearch(resItem);
+      //callbackSearch(resItem);
+      changeSearchText({ text: resItem.localName });
       changeSearchBuildId(resItem.buildingId);
       changeSearchFloorId(resItem.floorId);
       //}

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

@@ -7,19 +7,20 @@ import Icon from '@/tenants-ui/Icon';
 
 type MapProps = {
   type: string;
-  searchText: any;
+  // searchText: any;
   selFloorId?: string;
   render: (item: API.MapInfo, index: number) => React.ReactNode;
   mapList: API.MapInfo[];
   mapSize: any;
 };
 
-const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render, mapList, mapSize }) => {
+const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize }) => {
   //useModel 注释掉 不用啦 晚会删
   // const { mapList, getMapListData } = useModel('map');
   //   useEffect(() => {
   //     getMapListData(selFloorId);
   //   }, [selFloorId]);
+  const { searchText, changeSearchText } = useModel('searchInfo');
 
   const [startPageX, setStartPageX] = useState<number>(0);
   const [startPageY, setStartPageY] = useState<number>(0);
@@ -34,8 +35,6 @@ const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render, mapList
   //     mapHeight: number = 1200;
 
   const mouseDownEvent = (event: React.MouseEvent) => {
-    // startPageX = event.pageX;
-    //startPageY = event.pageY;
     setStartPageX(event.pageX);
     setStartPageY(event.pageY);
     //console.log('mouseDownEvent', startPageX, event.pageY);
@@ -74,35 +73,44 @@ const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render, mapList
 
   //实现搜索 搜索时 出现结果
   useEffect(() => {
-    //console.log('searchText', searchText);
-
     //searchText使用对象 防止修改了 不再重新定位
-    if (searchText && searchText.text) {
+    debugger;
+    if (searchText && searchText.text && mapList.length > 0) {
       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);
-      //     }
-      //   });
       var filterItem = mapList.filter((item) => {
         return item.localName == (searchText && searchText.text);
       });
-
-      //   if (filterItem.length == 0) {
-      //     return;
-      //   } else {
+      if (filterItem.length == 0) return;
       left = -((filterItem[0] || {}).left || 0);
       top = -((filterItem[0] || {}).top || 0);
       setTranslateX(left);
       setTranslateY(top);
-      // }
+      changeSearchText({});
+    } else {
+      setTranslateX(0);
+      setTranslateY(0);
     }
-  }, [searchText, mapList]);
+  }, [mapList]);
+
+  useEffect(() => {
+    debugger;
+    if (searchText && searchText.text) {
+      let left: any = 0,
+        top: any = 0;
 
-  useEffect(() => {}, [mapList]);
+      var filterItem = mapList.filter((item) => {
+        return item.localName == (searchText && searchText.text);
+      });
+      if (filterItem.length == 0) return;
+      left = -((filterItem[0] || {}).left || 0);
+      top = -((filterItem[0] || {}).top || 0);
+      setTranslateX(left);
+      setTranslateY(top);
+      changeSearchText({});
+    }
+  }, [searchText]);
 
   useEffect(() => {
     // todo 要不要用呢

+ 1 - 14
src/components/topNavigator/index.tsx

@@ -36,7 +36,7 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
   const { projectId } = useModel('spaceFunc');
   //存储的 搜索到空间的buildingId floorId
   const { searchBuildId, searchFloorId, changeSearchBuildId, changeSearchFloorId } =
-    useModel('buildFloor');
+    useModel('searchInfo');
   const [buildList, setBuildList] = useState<buildItem[]>([]);
   const [currentBuild, setCurrentBuild] = useState<any>();
 
@@ -62,19 +62,6 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
     }
   }, [searchBuildId, searchFloorId]);
 
-  //   useEffect(() => {
-  //     //如果 建筑id改变 不应该走着 todo
-  //     if (searchFloorId) {
-  //       //显示
-  //       setCurrentFloor(searchFloorId);
-  //       //父亲的floorId
-  //       debugger;
-  //       //todo 这块 其实只想楼层id改变时调用 建筑id 改变时不调用
-  //       changeFloorId && changeFloorId(searchFloorId);
-  //       changeSearchFloorId(''); //清空搜索记录 以防两次搜索一样的楼层时 没反应 要不要换位置
-  //     }
-  //   }, [searchFloorId]);
-
   //请求建筑的接口
   useEffect(() => {
     //console.log('TopNavigator----getBuildingList');

+ 6 - 0
src/models/buildFloor.ts

@@ -3,17 +3,23 @@ import React, { useState, useCallback } from 'react';
 export default function () {
   const [searchBuildId, setSearchBuildId] = useState<string>();
   const [searchFloorId, setSearchFloorId] = useState<string>();
+  const [searchText, setSearchText] = useState<any>({});
   const changeSearchBuildId = useCallback((value: string) => {
     setSearchBuildId(value);
   }, []);
   const changeSearchFloorId = useCallback((value: string) => {
     setSearchFloorId(value);
   }, []);
+  const changeSearchText = useCallback((value: any) => {
+    setSearchText(value);
+  }, []);
 
   return {
     searchBuildId,
     searchFloorId,
+    searchText,
     changeSearchBuildId,
     changeSearchFloorId,
+    changeSearchText,
   };
 }

+ 1 - 8
src/pages/Environment/index.tsx

@@ -220,13 +220,7 @@ const Environment: React.FC = () => {
       <PageHeader
         title={<FormattedMessage id="menu.environment" />}
         action={
-          <SearchInput
-            mapList={mapList}
-            callbackSearch={(s) => {
-              //setSelFloorId(s.floorId);
-              setSearchText({ text: s.localName });
-            }}
-          />
+          <SearchInput mapList={mapList} />
 
           //   <Input.Search
           //     size="large"
@@ -269,7 +263,6 @@ const Environment: React.FC = () => {
       <Spin spinning={loading}>
         <Map
           type={'enviroment'}
-          searchText={searchText}
           mapList={mapCombineList}
           mapSize={mapSize}
           render={(item: API.MapInfo, index: number) => {

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

@@ -43,7 +43,7 @@ type statistics = {
 };
 const Environment: React.FC = () => {
   const { getSpaceFunc, projectId } = useModel('spaceFunc');
-  const { changeSearchFloorId } = useModel('buildFloor');
+  const { changeSearchFloorId } = useModel('searchInfo');
   const { envir_all, equip_air, equip_lamp, envir_curtain } = equipImageMap;
 
   const [searchText, setSearchText] = useState<{ text: any }>();
@@ -327,17 +327,7 @@ const Environment: React.FC = () => {
     <>
       <PageHeader
         title={<FormattedMessage id="menu.equipment" />}
-        action={
-          <SearchInput
-            mapList={mapList}
-            callbackSearch={(s) => {
-              //触发了搜索 如果楼层改变 重新更新地图
-
-              //setSelFloorId(s.floorId); //一个建筑 搜索其他楼层
-              setSearchText({ text: s.localName });
-            }}
-          />
-        }
+        action={<SearchInput mapList={mapList} />}
       />
       <TopNavigator
         navigatorList={navigatorList}
@@ -384,7 +374,6 @@ const Environment: React.FC = () => {
       <Spin spinning={loading}>
         {mapCombineList.length > 0 && (
           <Map
-            searchText={searchText}
             mapList={mapCombineList}
             mapSize={mapSize}
             type={'equipment'}

+ 1 - 8
src/pages/Runtime/index.tsx

@@ -154,13 +154,7 @@ const Runtime: React.FC = () => {
           //       <span>查看加班记录</span>
           //     </div>
           //   </div>
-          <SearchInput
-            mapList={mapList}
-            callbackSearch={(s) => {
-              // setSelFloorId(s.floorId);
-              setSearchText({ text: s.localName });
-            }}
-          />
+          <SearchInput mapList={mapList} />
         }
       />
       <TopNavigator
@@ -190,7 +184,6 @@ const Runtime: React.FC = () => {
             </div> */}
       <Spin spinning={loading}>
         <Map
-          searchText={searchText}
           mapList={mapCombineList}
           mapSize={mapSize}
           type={'runtime'}