Explorar el Código

优化项目 如地图手指控制

zhaojijng hace 2 años
padre
commit
210554baff

+ 1 - 1
src/assets/icons/sagacare/iconfont.css

@@ -6,7 +6,7 @@
 }
 
 .iconfont {
-  font-size: 16px;
+  font-size: 12px;
   font-family: 'iconfont' !important;
   font-style: normal;
   -webkit-font-smoothing: antialiased;

+ 7 - 1
src/models/sagacare_spaceFunc.ts

@@ -46,12 +46,18 @@ export default function () {
   };
   //获取房间类型 来显示相应的图片
   const getSpaceFunc = useCallback((spaceCode: any) => {
+    //var nowkey = 'device';
+    var nowkey = '';
+    var flag = false;
     for (var key in allFunc) {
       var codeArr = allFunc[key];
       if (codeArr.indexOf(spaceCode) > -1) {
-        return key;
+        flag = true;
+        nowkey = key;
+        return;
       }
     }
+    return nowkey;
   }, []);
 
   return {

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { FormattedMessage, useModel, useRequest } from 'umi';
 import PageHeader from '@/sagacare_components/PageHeader';
 import Map from '@/sagacare_components/map';
@@ -99,6 +99,7 @@ const Environment: React.FC = () => {
   const [selNavId, setSelNavId] = useState<string>(navigatorList[0].id);
   const [mapList, setMapList] = useState<API.MapInfo[]>([]);
   const [mapSize, setMapSize] = useState<any>({});
+  const mapListCopy = useRef<any[]>([]);
 
   const [envirMapList, setEnvirMapList] = useState<API.MapInfo[]>([]);
   const [mapCombineList, setMapCombineList] = useState<any[]>([]);
@@ -151,6 +152,7 @@ const Environment: React.FC = () => {
           //     console.log('item', item);
           //   });
           setMapList(data);
+          mapListCopy.current = data;
         })
         .catch(() => {
           setLoading(false);
@@ -159,6 +161,25 @@ const Environment: React.FC = () => {
       setMapList([]);
     }
   }, [selFloorId]);
+
+  const changeMapList = useCallback(
+    (scale) => {
+      var mapListTemp = JSON.parse(JSON.stringify(mapListCopy.current));
+      var mapListTemp2 = mapListTemp.map((item, index) => {
+        if (index == 0) {
+          //console.log('mapListTemp', scale, item.width, item.width * scale);
+        }
+        item.width = item.width * scale;
+        item.height = item.height * scale;
+        item.left = item.left * scale;
+        item.top = item.top * scale;
+        return item;
+      });
+      setMapList(mapListTemp2);
+    },
+    [mapListCopy],
+  );
+
   //请求环境数据
   useEffect(() => {
     if (selNavId && selFloorId) {
@@ -201,6 +222,7 @@ const Environment: React.FC = () => {
       var combine = Object.assign({}, mitem, filterSpace[0]);
       combineList.push(combine);
     });
+
     setMapCombineList(combineList);
   }, [envirMapList, mapList]);
 
@@ -260,6 +282,7 @@ const Environment: React.FC = () => {
         <Map
           type={'enviroment'}
           mapList={mapCombineList}
+          changeMapList={changeMapList}
           mapSize={mapSize}
           selFloorId={selFloorId}
           render={(item: API.MapInfo, index: number) => {
@@ -312,7 +335,19 @@ const Environment: React.FC = () => {
                         type={getSpaceFunc(item.roomFuncType)}
                         style={{ fontSize: 20 }}
                       ></Icon>
-                      <div className={mapstyles.name}>{item.localName}</div>
+                      <div
+                        className={mapstyles.name}
+                        style={{
+                          display:
+                            (item.width > 80 && item.height > 70) ||
+                            item.width > 100 ||
+                            item.height > 90
+                              ? 'block'
+                              : 'none',
+                        }}
+                      >
+                        {item.localName}
+                      </div>
                     </div>
                   </div>
                 </div>

+ 4 - 0
src/pages/Equipment/components/deviceModal/airEq/index.less

@@ -103,6 +103,10 @@
         height: 42px;
         background: rgba(196, 196, 196, 0.2);
         border-radius: 50%;
+        cursor: pointer;
+      }
+      .itemBg:hover {
+        background: rgba(196, 196, 196, 0.3);
       }
       .itemBg:nth-child(1) {
         margin-right: 20px;

+ 9 - 2
src/pages/Equipment/components/deviceModal/anSwitch/index.less

@@ -9,13 +9,20 @@
     width: 48px;
     height: 24px;
     padding: 3px;
-    background: #ffe823;
+    background: rgba(255, 232, 35, 1);
     border-radius: 12px;
+    cursor: pointer;
     transition: background-color 0.3s;
+    &:hover {
+      background: rgba(255, 232, 35, 0.8);
+    }
     &.closeBg {
-      background: #c4c4c433;
+      background: rgba(196, 196, 196, 0.2);
       transition: background-color 0.3s;
     }
+    &.closeBg:hover {
+      background: rgba(196, 196, 196, 0.3);
+    }
     .point {
       position: absolute;
       top: 0;

+ 4 - 0
src/pages/Equipment/components/deviceModal/common.less

@@ -100,6 +100,10 @@
   height: 40px;
   background: rgba(196, 196, 196, 0.2);
   border-radius: 50%;
+  cursor: pointer;
+  &:hover {
+    background: rgba(196, 196, 196, 0.3);
+  }
   &.yell {
     background: #ffe823;
   }

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

@@ -173,7 +173,7 @@ const TopNavRight: React.FC<topNavRightProps> = ({
               }
             >
               <span className={styles.trigger}>
-                <EllipsisOutlined style={{ fontSize: 20 }} />
+                <EllipsisOutlined style={{ fontSize: 20, marginTop: '4px' }} />
               </span>
             </Dropdown>
           </div>

+ 46 - 4
src/pages/Equipment/index.tsx

@@ -85,8 +85,9 @@ const Environment: React.FC = () => {
       colorStr: '232, 158, 50,',
     },
   ]);
+  const [scale, setScale] = useState<number>(1);
   const [mapList, setMapList] = useState<API.MapInfo[]>([]);
-  const [mapListFloorId, setMapListFloorId] = useState<string>();
+  const mapListCopy = useRef<any[]>([]);
   const [mapSize, setMapSize] = useState<any>({});
 
   const [equipMapList, setEquipMapList] = useState<any[]>([]);
@@ -236,7 +237,7 @@ const Environment: React.FC = () => {
           };
           setMapSize(mapSize);
           setMapList(data);
-
+          mapListCopy.current = data;
           //setSelNav(navigatorList[0]); //每当重新请求地图时 让选中导航的默认是第一个
         })
         .catch(() => {
@@ -247,6 +248,25 @@ const Environment: React.FC = () => {
     }
   }, [selFloorId]);
 
+  const changeMapList = useCallback(
+    (scale) => {
+      setScale(scale < 1 ? scale : 1);
+      var mapListTemp = JSON.parse(JSON.stringify(mapListCopy.current));
+      var mapListTemp2 = mapListTemp.map((item, index) => {
+        if (index == 0) {
+          // console.log('mapListTemp', scale, item.width, item.width * scale);
+        }
+        item.width = item.width * scale;
+        item.height = item.height * scale;
+        item.left = item.left * scale;
+        item.top = item.top * scale;
+        return item;
+      });
+      setMapList(mapListTemp2);
+    },
+    [mapListCopy],
+  );
+
   const queryDeviceManage = () => {
     //setLoading(true);
     return queryEquipStatistics({
@@ -255,6 +275,7 @@ const Environment: React.FC = () => {
     })
       .then((res) => {
         // setLoading(false);
+        if (!setTimer.current) return;
         var statistics = res.data.statistics || [];
         //赋值 运行中的设备数量
         navigatorList.forEach(function (nItem) {
@@ -329,6 +350,7 @@ const Environment: React.FC = () => {
       return () => {
         console.log('selFloorId', selFloorId);
         clearInterval(setTimer.current);
+        setTimer.current = null;
       };
     }
   }, [selFloorId]);
@@ -422,6 +444,7 @@ const Environment: React.FC = () => {
       <Spin spinning={loading} wrapperClassName={mapstyles.spinnclass}>
         {mapCombineList.length > 0 && (
           <Map
+            changeMapList={changeMapList}
             mapList={mapCombineList}
             mapSize={mapSize}
             type={'equipment'}
@@ -470,9 +493,16 @@ const Environment: React.FC = () => {
                       <div className={mapstyles.noDevice}>
                         <span className={mapstyles.noText}>无设备</span>
                       </div>
+
+                        style={{ display: item.width > 80 && item.height > 50 ? 'flex' : 'none' }}
                     )} */}
                     {selNav.id == 'all' && (
-                      <div className={mapstyles.allDevice}>
+                      <div
+                        className={mapstyles.allDevice}
+                        style={{
+                          transform: `scale(${scale},${scale})`,
+                        }}
+                      >
                         {/* 所有设备的图标列表 */}
                         {(item.equipStatusList || []).map((ditem: equipStatus, dindex: number) => {
                           return (
@@ -521,7 +551,19 @@ const Environment: React.FC = () => {
                           type={getSpaceFunc(item.roomFuncType)}
                           style={{ fontSize: 20 }}
                         ></Icon>
-                        <div className={mapstyles.name}>{item.localName}</div>
+                        <div
+                          className={mapstyles.name}
+                          style={{
+                            display:
+                              (item.width > 80 && item.height > 70) ||
+                              item.width > 100 ||
+                              item.height > 90
+                                ? 'block'
+                                : 'none',
+                          }}
+                        >
+                          {item.localName}
+                        </div>
                       </div>
                     </div>
                   </div>

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

@@ -29,6 +29,8 @@ const Runtime: React.FC = () => {
   const [loading, setLoading] = useState<boolean>(false);
   const [runtimeNav, setRuntimeNav] = useState<runtimeNavType>({});
   const [mapList, setMapList] = useState<API.MapInfo[]>([]);
+  const mapListCopy = useRef<any[]>();
+
   const [mapSize, setMapSize] = useState<any>({});
   const [mapCombineList, setMapCombineList] = useState<any[]>([]);
   const [selFloorId, setSelFloorId] = useState<string>();
@@ -66,6 +68,7 @@ const Runtime: React.FC = () => {
           };
           setMapSize(mapSize);
           setMapList(data);
+          mapListCopy.current = data;
         })
         .catch(() => {
           setLoading(false);
@@ -75,6 +78,24 @@ const Runtime: React.FC = () => {
     }
   }, [selFloorId]);
 
+  const changeMapList = useCallback(
+    (scale) => {
+      var mapListTemp = JSON.parse(JSON.stringify(mapListCopy.current));
+      var mapListTemp2 = mapListTemp.map((item, index) => {
+        if (index == 0) {
+          console.log('mapListTemp', scale, item.width, item.width * scale);
+        }
+        item.width = item.width * scale;
+        item.height = item.height * scale;
+        item.left = item.left * scale;
+        item.top = item.top * scale;
+        return item;
+      });
+      setMapList(mapListTemp2);
+    },
+    [mapListCopy],
+  );
+
   const getDeviceTime = () => {
     queryDeviceTimeManage({
       floorId: selFloorId,
@@ -83,6 +104,8 @@ const Runtime: React.FC = () => {
     })
       .then(function (res) {
         //setLoading(false);
+        if (!setTimer.current) return;
+
         var resdata = res || {};
         setRuntimeNav({
           normalRun: resdata.workTimeNum,
@@ -147,6 +170,7 @@ const Runtime: React.FC = () => {
 
       return () => {
         clearInterval(setTimer.current);
+        setTimer.current = null;
       };
     }
   }, [selFloorId, selTime]);
@@ -213,6 +237,7 @@ const Runtime: React.FC = () => {
       <Spin spinning={loading} wrapperClassName={mapstyles.spinnclass}>
         <Map
           mapList={mapCombineList}
+          changeMapList={changeMapList}
           mapSize={mapSize}
           selFloorId={selFloorId}
           type={'runtime'}
@@ -293,7 +318,19 @@ const Runtime: React.FC = () => {
                       type={getSpaceFunc(item.roomFuncType)}
                       style={{ fontSize: 20 }}
                     ></Icon>
-                    <div className={mapstyles.name}>{item.localName}</div>
+                    <div
+                      className={mapstyles.name}
+                      style={{
+                        display:
+                          (item.width > 80 && item.height > 70) ||
+                          item.width > 100 ||
+                          item.height > 90
+                            ? 'block'
+                            : 'none',
+                      }}
+                    >
+                      {item.localName}
+                    </div>
                   </div>
                 </div>
               </div>

+ 17 - 5
src/sagacare_components/map/index.less

@@ -13,12 +13,21 @@
   // height: calc(100% - 285px);
   height: 100%;
   overflow: hidden;
+  text-decoration: none;
+  user-select: none;
+  tap-highlight-color: rgba(0, 0, 0, 0);
+  .controlBar {
+    margin-bottom: 15px;
+  }
   .mapControl {
     position: absolute;
     right: 20px;
     bottom: 20px;
     z-index: 1;
-
+    // display: none;
+    .iconfont {
+      font-size: 25px;
+    }
     .zoom {
       display: flex;
       align-items: center;
@@ -75,17 +84,20 @@
     // }
     .allDevice {
       position: absolute;
-      top: 6px;
-      left: 6px;
+      top: 5px;
+      left: 5px;
       z-index: 1;
       display: flex;
       width: 100%;
+      transform-origin: 0% 0%;
       .icon {
         display: flex;
+
+        flex-shrink: 0;
         align-items: center;
         justify-content: center;
-        width: 22px;
-        height: 22px;
+        width: 20px;
+        height: 20px;
         margin-right: 3px;
         color: #fff;
         font-size: 11px;

+ 97 - 62
src/sagacare_components/map/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import mapstyles from './index.less';
 import { useModel } from 'umi';
 
@@ -12,9 +12,10 @@ type MapProps = {
   render: (item: API.MapInfo, index: number) => React.ReactNode;
   mapList: API.MapInfo[];
   mapSize: any;
+  changeMapList: any;
 };
 
-const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize }) => {
+const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapList, mapSize }) => {
   //useModel 注释掉 不用啦 晚会删
 
   //   useEffect(() => {
@@ -27,19 +28,18 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
     changeSearchFloorId,
     changeSearchBuildId,
   } = useModel('sagacare_searchInfo');
-
+  //const [mapList, setCurMapList] = useState<any>(mapList);
   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 [mscale, setMscale] = useState<number>(1);
+  const mscale = useRef<number>(1);
   //最大的缩放比例
-  const [maxscale, setMaxscale] = useState<number>(1.6);
-  const [minscale, setMinscale] = useState<number>(0.3);
+  const [maxscale, setMaxscale] = useState<number>(1.5);
+  const [minscale, setMinscale] = useState<number>(0.5);
   const [canMove, setCanMove] = useState<boolean>(false);
 
   const [mapHeight, setMapHeight] = useState(500);
@@ -72,55 +72,48 @@ 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) {
-      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);
+    var mscaleTemp: number = Number((mscale.current + 0.1).toFixed(4));
+    //setMscale(mscaleTemp);
+    mscale.current = Math.min(mscaleTemp, maxscale);
+    changeMap(mscale.current);
+    var changeWidth = (mapSize.width * (mscaleTemp - 1)) / 2;
+    var changeHeight = (mapSize.height * (mscaleTemp - 1)) / 2;
+    //   setTranslateX(translateX - changeWidth);
+    //   setTranslateY(translateY - changeHeight);
+
+    //console.log('mscale', mscaleTemp);
   };
+
   const mapReduce = (event: React.MouseEvent) => {
     event.stopPropagation();
     //console.log('mapReduce', mscale);
-    if (mscale > minscale) {
-      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);
+    // if (mscale.current > minscale) {
+    var mscaleTemp = Number((mscale.current - 0.1).toFixed(4));
+    mscale.current = Math.max(mscaleTemp, minscale);
+    changeMap(mscale.current);
+    var changeWidth = (mapSize.width * (mscaleTemp - 1)) / 2;
+    var changeHeight = (mapSize.height * (mscaleTemp - 1)) / 2;
+    //   setTranslateX(translateX - changeWidth);
+    //   setTranslateY(translateY - changeHeight);
+    // }
   };
-
+  function changeMap(scale) {
+    changeMapList(scale);
+  }
   //const fixWidth = 1300;
-  useEffect(() => {
-    var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
-    var scale = Number((mapWrapWidth / mapSize.width).toFixed(4));
-    setMscale(scale);
-    if (scale < 0.3) {
-      console.log('mscale', mscale);
-      setMinscale(scale);
-    }
-  }, [mapSize]);
+  //   useEffect(() => {
+  //     var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
+  //     var scale = Number((mapWrapWidth / mapSize.width).toFixed(4));
+  //     setMscale(scale);
+  //     changeMap(scale);
+  //     //if (scale < 0.3) {
+  //     setMinscale(scale);
+  //     //}
+  //   }, [mapSize]);
 
   //当地图发生改变时 的搜索
   useEffect(() => {
@@ -128,8 +121,7 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
     //根据searchText进行搜索 如果mapList 更改了
 
     if (searchText && searchText.text && mapList.length > 0) {
-      let left: any = 0,
-        top: any = 0;
+      let left: any, top: any;
 
       var filterItem = mapList.filter((item) => {
         return item.localName == (searchText && searchText.text);
@@ -142,8 +134,8 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
       top = -((filterItem[0] || {}).top || 0);
       var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
       var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
-      setTranslateX(left * mscale + mapWrapWidth / 2);
-      setTranslateY(top * mscale + mapWrapHeight / 2);
+      //   setTranslateX(left * mscale + mapWrapWidth / 2);
+      //   setTranslateY(top * mscale + mapWrapHeight / 2);
       //搜索完成
       changeSearchBuildId(''); //清空搜索记录  以防两次搜索一样的建筑的 没反应
       changeSearchFloorId(''); //清空搜索记录 以防两次搜索一样的楼层时 没反应 要不要换位置
@@ -160,8 +152,7 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
   //搜索信息改变时的搜索
   useEffect(() => {
     if (searchText && searchText.text && mapList.length > 0) {
-      let left: any = 0,
-        top: any = 0;
+      let left: any, top: any;
 
       var filterItem = mapList.filter((item) => {
         return item.localName == (searchText && searchText.text);
@@ -175,11 +166,9 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
       top = -((filterItem[0] || {}).top || 0);
       var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
       var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
-      //   left = left * mscale + mapWrapWidth / 2;
-      //   top = top * mscale + mapWrapHeight / 2;
 
-      setTranslateX(left * mscale + mapWrapWidth / 2);
-      setTranslateY(top * mscale + mapWrapHeight / 2);
+      //   setTranslateX(left * mscale + mapWrapWidth / 2);
+      //   setTranslateY(top * mscale + mapWrapHeight / 2);
       changeSearchBuildId(''); //清空搜索记录  以防两次搜索一样的建筑的 没反应
       changeSearchFloorId(''); //清空搜索记录 以防两次搜索一样的楼层时 没反应 要不要换位置
       changeSearchText({});
@@ -196,8 +185,49 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
       },
       true,
     );
+
+    var mapDom = document.querySelector('#map');
+    //console.log('document.querySelector("#map")', mapDom);
+    let tscale = 1;
+    mapDom.addEventListener('wheel', function (event) {
+      //debugger;
+      event.preventDefault();
+      console.log('wheel', event);
+      if (Math.abs(event.deltaX) !== 0 && Math.abs(event.deltaY) !== 0)
+        return console.log('没有固定方向');
+      if (event.deltaX < 0) return console.log('向右');
+      if (event.deltaX > 0) return console.log('向左');
+      if (event.ctrlKey) {
+        if (event.deltaY > 0) console.log('向内');
+        if (event.deltaY < 0) console.log('向外');
+        var base = -0.009;
+        if (event.deltaY > 100 || event.deltaY < -100) {
+          base = -0.0006;
+        }
+        var mscaleTemp = mscale.current + event.deltaY * base;
+        console.log('mscaleTemp', mscale.current, mscaleTemp);
+        mscale.current = Math.min(Math.max(minscale, mscaleTemp), maxscale);
+        changeMap(mscale.current);
+      } else {
+        if (event.deltaY > 0) console.log('向上');
+        if (event.deltaY < 0) console.log('向下');
+        // var base = -0.009;
+        // if (event.deltaY > 100 || event.deltaY < -100) {
+        //   base = -0.0006;
+        // }
+        // var mscaleTemp = mscale.current + event.deltaY * base;
+        // console.log('mscaleTemp', mscale.current, mscaleTemp);
+        // mscale.current = Math.min(Math.max(minscale, mscaleTemp), maxscale);
+        // changeMap(mscale.current);
+      }
+    });
   }, []);
 
+  //展示比例尺
+  var showscale = useMemo(() => {
+    return (mscale.current * 100).toFixed(0);
+  }, [mscale.current]);
+
   useEffect(() => {
     console.log('document', document.body.offsetHeight);
     var bodyHeight = document.body.offsetHeight;
@@ -219,9 +249,10 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
       style={{ height: mapHeight + 'px' }}
     >
       <div
+        id="map"
         className={cx(mapstyles.map, { [mapstyles.equipmentMap]: type == 'equipment' })}
         style={{
-          transform: `translate(${translateX}px,${translateY}px) scale(${mscale},${mscale})`,
+          transform: `translate(${translateX}px,${translateY}px)`,
           width: mapSize.width,
           height: mapSize.height,
         }}
@@ -231,21 +262,25 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
         })}
       </div>
       <div className={mapstyles.mapControl}>
+        <div className={cx(mapstyles.controlBar)}>
+          <div>缩放比例:</div>
+          <div>{showscale}/100</div>
+        </div>
         <div
-          className={cx(mapstyles.zoom, { [mapstyles.disable]: mscale >= maxscale })}
+          className={cx(mapstyles.zoom, { [mapstyles.disable]: mscale.current >= maxscale })}
           onClick={(event) => {
             mapZoom(event);
           }}
         >
-          <Icon className="" type="zoom"></Icon>
+          <Icon className="" type="zoom" style={{ fontSize: 22 }}></Icon>
         </div>
         <div
-          className={cx(mapstyles.zoom, { [mapstyles.disable]: mscale <= minscale })}
+          className={cx(mapstyles.zoom, { [mapstyles.disable]: mscale.current <= minscale })}
           onClick={(event) => {
             mapReduce(event);
           }}
         >
-          <Icon className="" type="reduce"></Icon>
+          <Icon className="" type="reduce" style={{ fontSize: 22 }}></Icon>
         </div>
       </div>
     </div>

+ 8 - 4
src/sagacare_components/topNavigator/index.less

@@ -25,14 +25,16 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      width: 50px;
+      box-sizing: border-box;
+      width: 55px;
       height: 100%;
       margin: 0 20px;
+      padding-top: 5px;
       font-size: 12px;
       border-bottom: 3px solid transparent;
       cursor: pointer;
       .text {
-        margin-top: 7px;
+        margin-top: 4px;
         color: #000;
         text-align: center;
       }
@@ -47,18 +49,20 @@
     height: 100%;
     white-space: nowrap;
     .firstLine {
+      display: flex;
       font-weight: 500;
-      line-height: 20px;
+      line-height: 1;
     }
     .value {
       // color: #e5574f;
-      font-size: 28px;
+      font-size: 30px;
     }
     .unit {
       // color: #e5574f;
     }
     .text {
       color: #c4c4c4;
+      font-size: 12px;
     }
   }
 }

+ 7 - 2
src/sagacare_components/topNavigator/index.tsx

@@ -212,10 +212,15 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
       {type === 'enviroment' && (
         <div className={styles.right}>
           <div className={styles.firstLine} style={{ color: selParamObj.color }}>
-            <span className={styles.value}>{selParamObj.avgValues}</span>{' '}
+            <span className={styles.value}>{selParamObj.avgValues}</span>
             <span className={styles.unit}>{selParamObj.unit}</span>
           </div>
-          <div className={styles.text}>当前楼层平均{selParamObj.name}</div>
+          <div className={styles.text}>
+            当前楼层平均{selParamObj.name}
+            {selParamObj.id == 'CO2' || selParamObj.id == 'PM2d5' || selParamObj.id == 'HCHO'
+              ? '浓度'
+              : ''}
+          </div>
         </div>
       )}
       {type === 'equipment' && action}