瀏覽代碼

搜索选中 局中,缩放局中,房间类型的补充

zhaojijng 2 年之前
父節點
當前提交
31d44ada12

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

@@ -134,6 +134,9 @@
       text-align: center;
     }
   }
+  .searchSel {
+    border-color: rgba(77, 148, 255, 0.8);
+  }
   .notclick {
     background: url(../images/bg_disable.png) repeat;
     border: 2px solid #dfe3ed;

+ 69 - 32
src/assets/icons/iconfont.css

@@ -1,122 +1,159 @@
 @font-face {
-  font-family: 'iconfont'; /* Project id 3184967 */
-  src: url('./iconfont.woff2') format('woff2'), url('./iconfont.woff') format('woff'),
-    url('./iconfont.ttf') format('truetype');
+  font-family: "iconfont"; /* Project id 3184967 */
+  src: url('iconfont.woff2?t=1649917347342') format('woff2'),
+       url('iconfont.woff?t=1649917347342') format('woff'),
+       url('iconfont.ttf?t=1649917347342') format('truetype');
 }
 
 .iconfont {
-  color: #140050;
+  font-family: "iconfont" !important;
   font-size: 16px;
-  font-family: 'iconfont' !important;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-managecloth:before {
+  content: "\e62a";
+}
+
+.icon-manageswim:before {
+  content: "\e629";
+}
+
+.icon-managebook:before {
+  content: "\e628";
+}
+
+.icon-manageexperiment:before {
+  content: "\e627";
+}
+
+.icon-managereception:before {
+  content: "\e626";
+}
+
+.icon-manageactivity:before {
+  content: "\e625";
+}
+
+.icon-managecontrol:before {
+  content: "\e624";
+}
+
+.icon-managesport:before {
+  content: "\e623";
+}
+
+.icon-managepublic:before {
+  content: "\e622";
+}
+
 .icon-managedevice:before {
-  content: '\e620';
+  content: "\e620";
 }
 
 .icon-managelift:before {
-  content: '\e61f';
+  content: "\e61f";
 }
 
 .icon-managedining:before {
-  content: '\e61e';
+  content: "\e61e";
 }
 
 .icon-managewashroom:before {
-  content: '\e61c';
+  content: "\e61c";
 }
 
 .icon-managereduce:before {
-  content: '\e61b';
+  content: "\e61b";
 }
 
 .icon-managezoom:before {
-  content: '\e61a';
+  content: "\e61a";
 }
 
 .icon-manageenvironment:before {
-  content: '\e619';
+  content: "\e619";
 }
 
 .icon-manageequipment:before {
-  content: '\e618';
+  content: "\e618";
 }
 
 .icon-manageruntime:before {
-  content: '\e617';
+  content: "\e617";
 }
 
 .icon-managenotify:before {
-  content: '\e615';
+  content: "\e615";
 }
 
 .icon-managework:before {
-  content: '\e614';
+  content: "\e614";
 }
 
 .icon-managehover:before {
-  content: '\e613';
+  content: "\e613";
 }
 
 .icon-managelight:before {
-  content: '\e611';
+  content: "\e611";
 }
 
 .icon-managecurtain:before {
-  content: '\e610';
+  content: "\e610";
 }
 
 .icon-manageairConditioner:before {
-  content: '\e60f';
+  content: "\e60f";
 }
 
 .icon-managewalk:before {
-  content: '\e60e';
+  content: "\e60e";
 }
 
 .icon-managestair:before {
-  content: '\e60d';
+  content: "\e60d";
 }
 
 .icon-managerest:before {
-  content: '\e60c';
+  content: "\e60c";
 }
 
 .icon-manageoffice:before {
-  content: '\e60b';
+  content: "\e60b";
 }
 
 .icon-managemeeting:before {
-  content: '\e60a';
+  content: "\e60a";
 }
 
 .icon-manageletter:before {
-  content: '\e609';
+  content: "\e609";
 }
 
 .icon-managedocument:before {
-  content: '\e608';
+  content: "\e608";
 }
 
 .icon-managewarning:before {
-  content: '\ea51';
+  content: "\ea51";
 }
 
 .icon-managecloseall:before {
-  content: '\e607';
+  content: "\e607";
 }
 
 .icon-managesearch:before {
-  content: '\e606';
+  content: "\e606";
 }
 
 .icon-manageclose:before {
-  content: '\e605';
+  content: "\e605";
 }
 
 .icon-managebackward:before {
-  content: '\e604';
+  content: "\e604";
 }
+

+ 63 - 0
src/assets/icons/iconfont.json

@@ -6,6 +6,69 @@
   "description": "行政管理所用图片",
   "glyphs": [
     {
+      "icon_id": "28976686",
+      "name": "cloth",
+      "font_class": "cloth",
+      "unicode": "e62a",
+      "unicode_decimal": 58922
+    },
+    {
+      "icon_id": "28976672",
+      "name": "swim",
+      "font_class": "swim",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "28976650",
+      "name": "book",
+      "font_class": "book",
+      "unicode": "e628",
+      "unicode_decimal": 58920
+    },
+    {
+      "icon_id": "28976637",
+      "name": "experiment",
+      "font_class": "experiment",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "28976620",
+      "name": "reception",
+      "font_class": "reception",
+      "unicode": "e626",
+      "unicode_decimal": 58918
+    },
+    {
+      "icon_id": "28976599",
+      "name": "activity",
+      "font_class": "activity",
+      "unicode": "e625",
+      "unicode_decimal": 58917
+    },
+    {
+      "icon_id": "28976561",
+      "name": "control",
+      "font_class": "control",
+      "unicode": "e624",
+      "unicode_decimal": 58916
+    },
+    {
+      "icon_id": "28975871",
+      "name": "体育课sport 2",
+      "font_class": "sport",
+      "unicode": "e623",
+      "unicode_decimal": 58915
+    },
+    {
+      "icon_id": "28973376",
+      "name": "公共public",
+      "font_class": "public",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
+    {
       "icon_id": "28254404",
       "name": "类型=repair, 线条=400device",
       "font_class": "device",

二進制
src/assets/icons/iconfont.ttf


二進制
src/assets/icons/iconfont.woff


二進制
src/assets/icons/iconfont.woff2


二進制
src/assets/images/logo.png


+ 61 - 10
src/components/map/index.tsx

@@ -4,6 +4,7 @@ import { useModel } from 'umi';
 
 import cx from 'classnames';
 import Icon from '@/tenants-ui/Icon';
+import user from 'mock/user';
 
 type MapProps = {
   type: string;
@@ -20,21 +21,30 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
   //   useEffect(() => {
   //     getMapListData(selFloorId);
   //   }, [selFloorId]);
-  const { searchText, changeSearchText, changeSearchFloorId, changeSearchBuildId } =
-    useModel('searchInfo');
+  const {
+    searchText,
+    changeSearchSpace,
+    changeSearchText,
+    changeSearchFloorId,
+    changeSearchBuildId,
+  } = useModel('searchInfo');
 
   const [startPageX, setStartPageX] = useState<number>(0);
   const [startPageY, setStartPageY] = useState<number>(0);
 
   const [translateX, setTranslateX] = useState<number>(0);
   const [translateY, setTranslateY] = useState<number>(0);
+
+  const [originX, setOriginX] = useState<number>(0);
+  const [originY, setOriginY] = useState<number>(0);
   const [mscale, setMscale] = useState<number>(1);
   //最大的缩放比例
   const [maxscale, setMaxscale] = useState<number>(1.6);
   const [minscale, setMinscale] = useState<number>(0.3);
   const [canMove, setCanMove] = useState<boolean>(false);
-  const currentFloorId = useRef<any>(null);
 
+  const currentFloorId = useRef<any>(null);
+  const mapRef = useRef();
   //   let mapWidth: number = 3000,
   //     mapHeight: number = 1200;
 
@@ -61,25 +71,51 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
       setStartPageY(event.pageY);
     }
   };
+  useEffect(() => {
+    console.log('mapRef', mapRef);
+    // var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
+    // var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
+    // var originX = mapWrapWidth / 2 - translateX < 0 ? 0 : mapWrapWidth / 2 - translateX;
+    // var originY = mapWrapHeight / 2 - translateY < 0 ? 0 : mapWrapHeight / 2 - translateY;
+    // setOriginX(originX);
+    // setOriginY(originY);
+    console.log('originX', originX, 'originY', originY);
+  }, [translateX, translateY]);
 
   const mapZoom = (event: React.MouseEvent) => {
     event.stopPropagation();
     if (mscale < maxscale) {
-      setMscale(mscale + 0.1);
+      var mscaleTemp = Number((mscale + 0.1).toFixed(4));
+      setMscale(mscaleTemp);
+      var changeWidth = mapSize.width * 0.1;
+      var changeHeight = mapSize.height * 0.1;
+      setTranslateX(translateX - changeWidth / 2);
+      setTranslateY(translateY - changeHeight / 2);
     }
+
+    console.log('mscale', mscale);
   };
   const mapReduce = (event: React.MouseEvent) => {
     event.stopPropagation();
     //console.log('mapReduce', mscale);
     if (mscale > minscale) {
-      setMscale(mscale - 0.1);
+      var mscaleTemp = Number((mscale - 0.1).toFixed(4));
+      setMscale(mscaleTemp);
+      var changeWidth = mapSize.width * 0.1;
+      var changeHeight = mapSize.height * 0.1;
+      setTranslateX(translateX + changeWidth / 2);
+      setTranslateY(translateY + changeHeight / 2);
     }
+
+    console.log('mscale', mscale);
   };
+
   const fixWidth = 1300;
   useEffect(() => {
-    var scale = fixWidth / mapSize.width;
+    var scale = Number((fixWidth / mapSize.width).toFixed(4));
     setMscale(scale);
     if (scale < 0.3) {
+      console.log('mscale', mscale);
       setMinscale(scale);
     }
   }, [mapSize]);
@@ -97,10 +133,14 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
         return item.localName == (searchText && searchText.text);
       });
       if (filterItem.length == 0) return;
+      changeSearchSpace(filterItem[0]);
+      console.log('selectSpace2', filterItem[0]);
       left = -((filterItem[0] || {}).left || 0);
       top = -((filterItem[0] || {}).top || 0);
-      setTranslateX(left * mscale);
-      setTranslateY(top * mscale);
+      var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
+      var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
+      setTranslateX(left * mscale + mapWrapWidth / 2);
+      setTranslateY(top * mscale + mapWrapHeight / 2);
       //搜索完成
       changeSearchBuildId(''); //清空搜索记录  以防两次搜索一样的建筑的 没反应
       changeSearchFloorId(''); //清空搜索记录 以防两次搜索一样的楼层时 没反应 要不要换位置
@@ -124,10 +164,20 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
         return item.localName == (searchText && searchText.text);
       });
       if (filterItem.length == 0) return;
+      changeSearchSpace(filterItem[0]);
+
+      console.log('selectSpace2', filterItem[0]);
       left = -((filterItem[0] || {}).left || 0);
       top = -((filterItem[0] || {}).top || 0);
-      setTranslateX(left * mscale);
-      setTranslateY(top * mscale);
+      var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
+      var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
+      //   left = left * mscale + mapWrapWidth / 2;
+      //   top = top * mscale + mapWrapHeight / 2;
+      debugger;
+      setTranslateX(left * mscale + mapWrapWidth / 2);
+      setTranslateY(top * mscale + mapWrapHeight / 2);
+      changeSearchBuildId(''); //清空搜索记录  以防两次搜索一样的建筑的 没反应
+      changeSearchFloorId(''); //清空搜索记录 以防两次搜索一样的楼层时 没反应 要不要换位置
       changeSearchText({});
     }
   }, [searchText]);
@@ -147,6 +197,7 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
   return (
     <div
       className={mapstyles.mapwrap}
+      ref={mapRef}
       onMouseDown={(event) => {
         mouseDownEvent(event);
       }}

+ 1 - 1
src/components/navMenu/index.less

@@ -7,7 +7,7 @@
   .title {
     display: flex;
     align-items: center;
-    height: 100px;
+    height: 120px;
     font-size: 22px;
   }
   .menuList {

+ 9 - 3
src/components/navMenu/index.tsx

@@ -3,9 +3,11 @@ import { Row, Col } from 'antd';
 import styles from './index.less';
 import Icon from '@/tenants-ui/Icon';
 import useMenuList, { menutype } from '@/hooks/useMenuList';
-import { history, useModel } from 'umi';
+import { history, useModel, useLocation } from 'umi';
 
 const NavMenu: React.FC = () => {
+  const logo = require('@/assets/images/logo.png');
+  const location = useLocation();
   const { closeMenu } = useModel('controller');
   const { menuList } = useMenuList();
   //debugger;
@@ -14,10 +16,14 @@ const NavMenu: React.FC = () => {
     history.push(`/${item.id}`);
   };
   //   console.log('navMenu');
-
+  useEffect(() => {
+    console.log('location', location);
+  }, [location]);
   return (
     <div className={styles.drawerDiv}>
-      <div className={styles.title}>头部</div>
+      <div className={styles.title}>
+        <img src={logo} style={{ height: 70 }}></img>
+      </div>
       <div className={styles.menuList}>
         <Row gutter={[20, 20]}>
           {(menuList || []).map((item, index) => {

+ 6 - 1
src/models/searchInfo.ts

@@ -4,6 +4,7 @@ export default function () {
   const [searchBuildId, setSearchBuildId] = useState<string>();
   const [searchFloorId, setSearchFloorId] = useState<string>();
   const [searchText, setSearchText] = useState<any>({});
+  const [searchSpace, setSearchSpace] = useState<any>({});
   const changeSearchBuildId = useCallback((value: string) => {
     setSearchBuildId(value);
   }, []);
@@ -13,13 +14,17 @@ export default function () {
   const changeSearchText = useCallback((value: any) => {
     setSearchText(value);
   }, []);
-
+  const changeSearchSpace = useCallback((value: any) => {
+    setSearchSpace(value);
+  }, []);
   return {
     searchBuildId,
     searchFloorId,
     searchText,
+    searchSpace,
     changeSearchBuildId,
     changeSearchFloorId,
     changeSearchText,
+    changeSearchSpace,
   };
 }

+ 13 - 3
src/models/spaceFunc.ts

@@ -2,8 +2,8 @@ import React, { useState, useCallback } from 'react';
 
 export default function () {
   const allFunc = {
-    office: ['140', '311'],
-    work: ['314', '313', '315', '921', '922', '923', '924', '925', '926'],
+    office: ['140', '311', '312', '310'],
+    work: ['300', '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: [
@@ -30,9 +30,19 @@ export default function () {
       '254',
     ], //设备
     washroom: ['111', '112'], //卫生间
-    lift: ['130'], //电梯
+    lift: ['130', '120'], //电梯
     stair: ['140'], //楼梯
     dining: ['441', '442', '443', '451', '452', '453', '461', '462', '471', '472'], //用餐
+
+    public: ['100', '1A0', '0'], //公共
+    sport: ['690', '932', '934'], //运动
+    swim: ['933', '6A0'],
+    reception: ['331', '160'], //接待
+    book: ['935'], //图书馆
+    activity: ['936', '937', '938', '915'], //活动 学生活动室等
+    experiment: ['921', '922', '923', '920', '926', '924', '925'], //实验室
+    cloth: ['112'], //更衣室
+    control: ['243', '332'], //中控 值班室
   };
   //获取房间类型 来显示相应的图片
   const getSpaceFunc = useCallback((spaceCode: any) => {

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

@@ -29,9 +29,9 @@ export type navigatorItem = {
   [key: string]: any;
 };
 const Environment: React.FC = () => {
+  const { searchSpace } = useModel('searchInfo');
   const { envir_temperature, envir_wet, envir_co2, envir_pm25, envir_jiaquan } = equipImageMap;
 
-  const [searchText, setSearchText] = useState<{ text: any }>();
   const [showChart, setShowChart] = useState(false);
   const [selFloorId, setSelFloorId] = useState<string>();
   const [selBuildId, setSelBuildId] = useState<string>();
@@ -263,7 +263,7 @@ const Environment: React.FC = () => {
           render={(item: API.MapInfo, index: number) => {
             return (
               <div
-                className={mapstyles.houseWrap}
+                className={cx(mapstyles.houseWrap)}
                 key={index + 'house'}
                 style={{
                   left: item.left,
@@ -275,6 +275,7 @@ const Environment: React.FC = () => {
                 <div
                   className={cx(mapstyles.house, {
                     [mapstyles.notclick]: !item.roomFuncType,
+                    [mapstyles.searchSel]: item.spaceId == searchSpace.spaceId,
                   })}
                   style={{
                     background: item.roomFuncType

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

@@ -44,12 +44,10 @@ type statistics = {
   runCount: number;
 };
 const Environment: React.FC = () => {
+  const { searchSpace } = useModel('searchInfo');
   const { getSpaceFunc } = useModel('spaceFunc');
   const { envir_all, equip_air, equip_lamp, envir_curtain } = equipImageMap;
 
-  //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[]>([
@@ -410,6 +408,7 @@ const Environment: React.FC = () => {
                     className={cx(mapstyles.house, {
                       [mapstyles.notclick]:
                         !item.roomFuncType || (selNav.id !== 'all' && item[selNav.id] == 'not'),
+                      [mapstyles.searchSel]: item.spaceId == searchSpace.spaceId,
                     })}
                     onClick={(event) => {
                       event.stopPropagation();

+ 2 - 0
src/pages/Runtime/index.tsx

@@ -23,6 +23,7 @@ type runtimeNavType = {
 
 const Runtime: React.FC = () => {
   // const { maptemp6 } = equipImageMap;
+  const { searchSpace } = useModel('searchInfo');
   const { getSpaceFunc } = useModel('spaceFunc');
   const [loading, setLoading] = useState<boolean>(false);
   const [searchText, setSearchText] = useState<{ text: any }>();
@@ -204,6 +205,7 @@ const Runtime: React.FC = () => {
                   key={index + 'house'}
                   className={cx(mapstyles.house, {
                     [mapstyles.notclick]: !item.roomFuncType,
+                    [mapstyles.searchSel]: item.spaceId == searchSpace.spaceId,
                   })}
                   style={{
                     background: item.roomFuncType