浏览代码

小地图局中显示

zhaojijng 2 年之前
父节点
当前提交
c316f526eb
共有 4 个文件被更改,包括 65 次插入26 次删除
  1. 13 2
      src/pages/Environment/index.tsx
  2. 13 3
      src/pages/Equipment/index.tsx
  3. 19 7
      src/pages/Runtime/index.tsx
  4. 20 14
      src/sagacare_components/map/index.tsx

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

@@ -113,6 +113,8 @@ const Environment: React.FC = () => {
   const [seasonType, setSeasonType] = useState<any>('Cooling');
   const [scale, setScale] = useState<number>(0.8);
   const [maxScale, setMaxScale] = useState<number>(1);
+  const [transXInit, setTransXInit] = useState<number>(0);
+
   const [mapSize, setMapSize] = useState<any>({});
   const mapListCopy = useRef<any[]>([]);
 
@@ -167,9 +169,17 @@ const Environment: React.FC = () => {
           var data: API.MapInfo[] = (res.data || {}).spaceList || [];
 
           var bodyWidth = document.body.offsetWidth;
-          var mscale = Number((bodyWidth / (res.data || {}).width).toFixed(4));
+          var mapWidth = (res.data || {}).width || 800;
+          if (mapWidth < bodyWidth) {
+            var mscale = 1;
+            setTransXInit((bodyWidth - mapWidth) / 2);
+          } else {
+            var mscale = Number((bodyWidth / mapWidth).toFixed(4));
+            setTransXInit(0);
+          }
+
           var mapSize: any = {
-            width: (res.data || {}).width * mscale,
+            width: mapWidth * mscale,
             height: (res.data || {}).height * mscale,
           };
 
@@ -334,6 +344,7 @@ const Environment: React.FC = () => {
         <Map
           type={'enviroment'}
           maxscale={maxScale}
+          transXInit={transXInit}
           mapList={mapCombineList}
           changeMapList={changeMapList}
           mapSize={mapSize}

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

@@ -88,6 +88,8 @@ const Environment: React.FC = () => {
   ]);
   const [scale, setScale] = useState<number>(0.8);
   const [maxScale, setMaxScale] = useState<number>(1);
+  const [transXInit, setTransXInit] = useState<number>(0);
+
   const [mapList, setMapList] = useState<API.MapInfo[]>([]);
   const mapListCopy = useRef<any[]>([]);
   const [mapSize, setMapSize] = useState<any>({});
@@ -244,10 +246,17 @@ const Environment: React.FC = () => {
           var data: API.MapInfo[] = (res.data || {}).spaceList || [];
 
           var bodyWidth = document.body.offsetWidth;
-          var mscale = Number((bodyWidth / (res.data || {}).width).toFixed(4));
+          var mapWidth = (res.data || {}).width || 800;
+          if (mapWidth < bodyWidth) {
+            var mscale = 1;
+            setTransXInit((bodyWidth - mapWidth) / 2);
+          } else {
+            var mscale = Number((bodyWidth / mapWidth).toFixed(4));
+            setTransXInit(0);
+          }
 
-          var mapSize = {
-            width: (res.data || {}).width * mscale,
+          var mapSize: any = {
+            width: mapWidth * mscale,
             height: (res.data || {}).height * mscale,
           };
           setMapSize(mapSize);
@@ -491,6 +500,7 @@ const Environment: React.FC = () => {
             mapList={mapCombineList}
             mapSize={mapSize}
             maxscale={maxScale}
+            transXInit={transXInit}
             type={'equipment'}
             selFloorId={selFloorId}
             render={(item, index) => {

+ 19 - 7
src/pages/Runtime/index.tsx

@@ -36,6 +36,8 @@ const Runtime: React.FC = () => {
 
   const [scale, setScale] = useState<number>(0.8);
   const [maxScale, setMaxScale] = useState<number>(1);
+  const [transXInit, setTransXInit] = useState<number>(0);
+
   const [mapCombineList, setMapCombineList] = useState<any[]>([]);
   const [selFloorId, setSelFloorId] = useState<string>();
   const [selTime, setSelTime] = useState<string>(moment().format('YYYYMMDD'));
@@ -68,18 +70,27 @@ const Runtime: React.FC = () => {
           var data: API.MapInfo[] = (res.data || {}).spaceList || [];
 
           var bodyWidth = document.body.offsetWidth;
-          var scale = Number((bodyWidth / (res.data || {}).width).toFixed(4));
+          var mapWidth = (res.data || {}).width || 800;
+          if (mapWidth < bodyWidth) {
+            var mscale = 1;
+            setTransXInit((bodyWidth - mapWidth) / 2);
+          } else {
+            var mscale = Number((bodyWidth / mapWidth).toFixed(4));
+            setTransXInit(0);
+          }
+
           var mapSize: any = {
-            width: (res.data || {}).width * scale,
-            height: (res.data || {}).height * scale,
+            width: mapWidth * mscale,
+            height: (res.data || {}).height * mscale,
           };
+
           setMapSize(mapSize);
 
           data.forEach((item, index) => {
-            item.width = item.width * scale;
-            item.height = item.height * scale;
-            item.left = item.left * scale;
-            item.top = item.top * scale;
+            item.width = item.width * mscale;
+            item.height = item.height * mscale;
+            item.left = item.left * mscale;
+            item.top = item.top * mscale;
           });
 
           var maxScaleTemp = getMaxScale(data);
@@ -261,6 +272,7 @@ const Runtime: React.FC = () => {
         <Map
           mapList={mapCombineList}
           maxscale={maxScale}
+          transXInit={transXInit}
           changeMapList={changeMapList}
           mapSize={mapSize}
           selFloorId={selFloorId}

+ 20 - 14
src/sagacare_components/map/index.tsx

@@ -14,6 +14,7 @@ type MapProps = {
   mapSize: any;
   changeMapList: any;
   maxscale: number;
+  transXInit: number;
 };
 
 const Map: React.FC<MapProps> = ({
@@ -24,6 +25,7 @@ const Map: React.FC<MapProps> = ({
   changeMapList,
   mapSize,
   maxscale,
+  transXInit,
 }) => {
   //useModel 注释掉 不用啦 晚会删
 
@@ -42,21 +44,20 @@ const Map: React.FC<MapProps> = ({
   const [startPageY, setStartPageY] = useState<number>(0);
 
   const [translateX, setTranslateX] = useState<number>(0);
-  const [translateY, setTranslateY] = useState<number>(110);
-
-  const [mapWidth, setMapWidth] = useState(1340);
-  const [marginLeft, setMarginLeft] = useState(0);
+  const [translateY, setTranslateY] = useState<number>(120);
 
   //const [mscale, setMscale] = useState<number>(1);
   const mscale = useRef<number>(1);
   //最大的缩放比例
 
-  const [minscale, setMinscale] = useState<number>(0.8);
+  const [minscale, setMinscale] = useState<number>(0.6);
   const [canMove, setCanMove] = useState<boolean>(false);
 
   const [moveTop, setMoveTop] = useState<number>(0); //地图的块的top的改变
   const [moveLeft, setMoveLeft] = useState<number>(0);
   const [mapHeight, setMapHeight] = useState(500);
+  const [mapWidth, setMapWidth] = useState(1340);
+  const [marginLeft, setMarginLeft] = useState(0);
 
   const currentFloorId = useRef<any>(null);
   const mapRef = useRef();
@@ -110,18 +111,18 @@ const Map: React.FC<MapProps> = ({
         var nowTranslateY = translateY + nowPageY - startPageY;
         //不能让地图太靠左边 看不到
         nowTranslateX =
-          nowTranslateX < -mapwidth + 220 + moveLeft ? -mapwidth + 220 + moveLeft : nowTranslateX;
+          nowTranslateX < -mapwidth + 250 + moveLeft ? -mapwidth + 250 + moveLeft : nowTranslateX;
         //不能让地图太靠右边 看不到
         nowTranslateX =
-          nowTranslateX > mapWrapWidth - 220 + moveLeft
-            ? mapWrapWidth - 220 + moveLeft
+          nowTranslateX > mapWrapWidth - 250 + moveLeft
+            ? mapWrapWidth - 250 + moveLeft
             : nowTranslateX;
         nowTranslateY =
-          nowTranslateY < -mapheight + 220 + moveTop ? -mapheight + 220 + moveTop : nowTranslateY;
+          nowTranslateY < -mapheight + 250 + moveTop ? -mapheight + 250 + moveTop : nowTranslateY;
 
         nowTranslateY =
-          nowTranslateY > mapWrapHeight - 180 + moveTop
-            ? mapWrapHeight - 180 + moveTop
+          nowTranslateY > mapWrapHeight - 220 + moveTop
+            ? mapWrapHeight - 220 + moveTop
             : nowTranslateY;
 
         setTranslateX(nowTranslateX);
@@ -212,8 +213,8 @@ const Map: React.FC<MapProps> = ({
       changeSearchText({}); //清空搜索记录 好进行一些操作
     } else if (currentFloorId.current != selFloorId) {
       //如果两次的selFloorId 不一样 才会更改地图的位置为0 0
-      setTranslateX(0);
-      setTranslateY(110);
+      setTranslateX(transXInit);
+      setTranslateY(120);
       mscale.current = 1;
     }
     currentFloorId.current = selFloorId;
@@ -255,6 +256,7 @@ const Map: React.FC<MapProps> = ({
       if (event.deltaX < 0) return console.log('向右');
       if (event.deltaX > 0) return console.log('向左');
       if (event.ctrlKey) {
+        //ctrlKey为true 双指的方向不一致
         if (event.deltaY > 0) console.log('向内');
         if (event.deltaY < 0) console.log('向外');
         var base = -0.009;
@@ -300,6 +302,9 @@ const Map: React.FC<MapProps> = ({
       true,
     );
   }, []);
+  useEffect(() => {
+    setTranslateX(transXInit);
+  }, [transXInit]);
 
   useEffect(
     function () {
@@ -325,11 +330,12 @@ const Map: React.FC<MapProps> = ({
   useEffect(() => {
     //console.log('document', document.body.offsetHeight);
     var bodyHeight = document.body.offsetHeight;
-    setMapHeight(bodyHeight - 145);
+    setMapHeight(bodyHeight - 190);
     var bodyWidth = document.body.offsetWidth;
     setMapWidth(bodyWidth);
     setMarginLeft(-(bodyWidth - 1340) / 2); //1340 是固定宽度值
   }, []);
+
   return (
     <div
       className={mapstyles.mapwrap}