Explorar el Código

地图缩放 修改wheel注册的useEffect方法

zhaojijng hace 2 años
padre
commit
7fe4130fb0

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

@@ -98,6 +98,8 @@ const Environment: React.FC = () => {
   const [selNav, setSelNav] = useState<navigatorItem>(navigatorList[0]);
   const [selNavId, setSelNavId] = useState<string>(navigatorList[0].id);
   const [mapList, setMapList] = useState<API.MapInfo[]>([]);
+
+  const [maxScale, setMaxScale] = useState<number>(1);
   const [mapSize, setMapSize] = useState<any>({});
   const mapListCopy = useRef<any[]>([]);
 
@@ -151,12 +153,37 @@ const Environment: React.FC = () => {
             height: (res.data || {}).height * mscale,
           };
           setMapSize(mapSize);
+
           data.forEach((item, index) => {
             item.width = item.width * mscale;
             item.height = item.height * mscale;
             item.left = item.left * mscale;
             item.top = item.top * mscale;
           });
+
+          var maxScaleTemp = 1.1;
+          if (data.length > 0) {
+            //找到合适的最大缩放倍数
+            for (var i = 1; i < 12; i++) {
+              var num = 0;
+              data.forEach((item, index) => {
+                var mwidth = item.width * maxScaleTemp;
+                if (mwidth > 65) {
+                  num = num + 1;
+                }
+              });
+              console.log('width', num, data.length, i);
+
+              if (num / data.length > 0.92) {
+                break;
+              } else {
+                maxScaleTemp = maxScaleTemp + 0.1;
+              }
+            }
+          }
+          console.log('maxScaleTemp', maxScaleTemp);
+          setMaxScale(maxScaleTemp);
+
           setMapList(data);
           mapListCopy.current = data;
         })
@@ -287,6 +314,7 @@ const Environment: React.FC = () => {
       <Spin spinning={loading} wrapperClassName={mapstyles.spinnclass}>
         <Map
           type={'enviroment'}
+          maxscale={maxScale}
           mapList={mapCombineList}
           changeMapList={changeMapList}
           mapSize={mapSize}
@@ -357,9 +385,9 @@ const Environment: React.FC = () => {
                       >
                         {item.localName}
                       </div>
-                      {getSpaceFunc(item.roomFuncType) && (item.width < 40 || item.height < 40) && (
-                        <div>.</div>
-                      )}
+                      {getSpaceFunc(item.roomFuncType) &&
+                        ((item.width < 40 && item.height < 90) ||
+                          (item.height < 40 && item.width < 100)) && <div>.</div>}
                     </div>
                   </div>
                 </div>

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

@@ -258,6 +258,7 @@ const Environment: React.FC = () => {
             item.left = item.left * mscale;
             item.top = item.top * mscale;
           });
+
           var maxScaleTemp = 1.1;
           if (data.length > 0) {
             //找到合适的最大缩放倍数
@@ -278,6 +279,7 @@ const Environment: React.FC = () => {
               }
             }
           }
+          //console.log('maxScaleTemp', maxScaleTemp);
           setMaxScale(maxScaleTemp);
 
           setMapList(data);
@@ -636,7 +638,8 @@ const Environment: React.FC = () => {
                           {item.localName}
                         </div>
                         {getSpaceFunc(item.roomFuncType) &&
-                          (item.width < 40 || item.height < 40) && <div>.</div>}
+                          ((item.width < 40 && item.height < 90) ||
+                            (item.height < 40 && item.width < 100)) && <div>.</div>}
                       </div>
                     </div>
                   </div>

+ 29 - 3
src/pages/Runtime/index.tsx

@@ -32,6 +32,8 @@ const Runtime: React.FC = () => {
   const mapListCopy = useRef<any[]>();
 
   const [mapSize, setMapSize] = useState<any>({});
+
+  const [maxScale, setMaxScale] = useState<number>(1);
   const [mapCombineList, setMapCombineList] = useState<any[]>([]);
   const [selFloorId, setSelFloorId] = useState<string>();
   const [selTime, setSelTime] = useState<string>(moment().format('YYYYMMDD'));
@@ -78,6 +80,29 @@ const Runtime: React.FC = () => {
             item.top = item.top * scale;
           });
 
+          var maxScaleTemp = 1.1;
+          if (data.length > 0) {
+            //找到合适的最大缩放倍数
+            for (var i = 1; i < 12; i++) {
+              var num = 0;
+              data.forEach((item, index) => {
+                var mwidth = item.width * maxScaleTemp;
+                if (mwidth > 65) {
+                  num = num + 1;
+                }
+              });
+              console.log('width', num, data.length, i);
+
+              if (num / data.length > 0.92) {
+                break;
+              } else {
+                maxScaleTemp = maxScaleTemp + 0.1;
+              }
+            }
+          }
+          console.log('maxScaleTemp', maxScaleTemp);
+          setMaxScale(maxScaleTemp);
+
           setMapList(data);
           mapListCopy.current = data;
         })
@@ -248,6 +273,7 @@ const Runtime: React.FC = () => {
       <Spin spinning={loading} wrapperClassName={mapstyles.spinnclass}>
         <Map
           mapList={mapCombineList}
+          maxscale={maxScale}
           changeMapList={changeMapList}
           mapSize={mapSize}
           selFloorId={selFloorId}
@@ -345,9 +371,9 @@ const Runtime: React.FC = () => {
                     >
                       {item.localName}
                     </div>
-                    {getSpaceFunc(item.roomFuncType) && (item.width < 40 || item.height < 40) && (
-                      <div>.</div>
-                    )}
+                    {getSpaceFunc(item.roomFuncType) &&
+                      ((item.width < 40 && item.height < 90) ||
+                        (item.height < 40 && item.width < 100)) && <div>.</div>}
                   </div>
                 </div>
               </div>

+ 46 - 35
src/sagacare_components/map/index.tsx

@@ -50,7 +50,7 @@ const Map: React.FC<MapProps> = ({
   //const [mscale, setMscale] = useState<number>(1);
   const mscale = useRef<number>(1);
   //最大的缩放比例
-  //const [maxscale, setMaxscale] = useState<number>(1.8);
+
   const [minscale, setMinscale] = useState<number>(0.8);
   const [canMove, setCanMove] = useState<boolean>(false);
 
@@ -86,31 +86,25 @@ const Map: React.FC<MapProps> = ({
         var mapheight = mapSize.height * mscale.current;
         var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
         var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
-        console.log(
-          '-translateX + moveLeft',
-          moveLeft,
-          translateX,
-          -translateX + moveLeft,
-          mapwidth,
-        );
-        console.log('-translateY + moveTop', moveTop, translateY, -translateY + moveTop, mapheight);
+
+        //console.log('-translateY + moveTop', moveTop, translateY, -translateY + moveTop, mapheight);
         if (-translateX + moveLeft > mapwidth - 220) {
           //不能再往左 translateX  < -mapwidth + 220+moveLeft
-          console.log('zuozuozuo');
+          //console.log('zuozuozuo');
         }
         if (-translateY + moveTop > mapheight - 220) {
           //不能再往上   translateY  < -mapheight + 220+moveTop
-          console.log('shangshang');
+          //console.log('shangshang');
         }
 
         if (translateX - moveLeft > mapWrapWidth - 220) {
           //不能再往右  translateX > mapWrapWidth - 220+moveLeft
-          console.log('youyou');
+          //console.log('youyou');
         }
 
         if (translateY - moveTop > mapWrapHeight - 220) {
           //不能再往下  translateY   > mapWrapHeight - 220+moveTop
-          console.log('xiaxia');
+          //console.log('xiaxia');
         }
         var nowTranslateX = translateX + nowPageX - startPageX;
         var nowTranslateY = translateY + nowPageY - startPageY;
@@ -148,7 +142,7 @@ const Map: React.FC<MapProps> = ({
 
     var mscaleTemp: number = Number((mscale.current + 0.1).toFixed(4));
     mscale.current = Math.min(mscaleTemp, maxscale);
-
+    console.log('mscale.current', mscale.current, maxscale, minscale);
     var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
     var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
     var moveWidth = (mapWrapWidth * (mscale.current - 1)) / 2;
@@ -253,25 +247,9 @@ const Map: React.FC<MapProps> = ({
     }
   }, [searchText]);
 
-  useEffect(() => {
-    // todo 要不要用呢
-    document.querySelector('#root').addEventListener(
-      'mouseup',
-      function () {
-        //console.log('mouseUpEvent');
-        setCanMove(false);
-      },
-      true,
-    );
-
-    var mapDom = document.querySelector('#map');
-    //console.log('document.querySelector("#map")', mapDom);
-    let tscale = 1;
-    //控制板的事件
-    mapDom.addEventListener('wheel', function (event) {
-      //debugger;
+  const mapWheel = useCallback(
+    (event) => {
       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('向右');
@@ -284,7 +262,7 @@ const Map: React.FC<MapProps> = ({
           base = -0.0006;
         }
         var mscaleTemp = mscale.current + event.deltaY * base; //缩放倍率缓存
-        //console.log('mscaleTemp', mscale.current, mscaleTemp);
+        console.log('mscaleTemp', mscale.current, mscaleTemp, minscale, maxscale);
         mscale.current = Math.min(Math.max(minscale, mscaleTemp), maxscale); //缩放倍率赋值
       } else {
         if (event.deltaY > 0) console.log('向上');
@@ -307,16 +285,44 @@ const Map: React.FC<MapProps> = ({
       setMoveLeft(moveWidth);
 
       changeMap(mscale.current, moveWidth, moveHeight);
-    });
+    },
+    [maxscale],
+  );
+
+  useEffect(() => {
+    // todo 要不要用呢
+    document.querySelector('#root').addEventListener(
+      'mouseup',
+      function () {
+        //console.log('mouseUpEvent');
+        setCanMove(false);
+      },
+      true,
+    );
   }, []);
 
+  useEffect(
+    function () {
+      var mapDom = document.querySelector('#map');
+      //console.log('document.querySelector("#map")', mapDom);
+      console.log('maxscalemaxscalemaxscale', maxscale);
+      //控制板的事件
+      if (maxscale > 1) {
+        mapDom.addEventListener('wheel', function (event) {
+          //debugger;
+          mapWheel(event);
+        });
+      }
+    },
+    [maxscale],
+  );
   //展示比例尺
   var showscale = useMemo(() => {
     return (mscale.current * 100).toFixed(0);
   }, [mscale.current]);
 
   useEffect(() => {
-    console.log('document', document.body.offsetHeight);
+    //console.log('document', document.body.offsetHeight);
     var bodyHeight = document.body.offsetHeight;
     setMapHeight(bodyHeight - 145);
     var bodyWidth = document.body.offsetWidth;
@@ -348,6 +354,11 @@ const Map: React.FC<MapProps> = ({
           width: mapSize.width,
           height: mapSize.height,
         }}
+        // onWheel={(event) => {
+        //   //event.stopPropagation();
+        //   //event.preventDefault();
+        //   mapWheel(event);
+        // }}
       >
         {mapList.map(function (item, index) {
           return render(item, index);