Преглед изворни кода

fix:地图所有设备图标 缩放修改

zhaojijng пре 2 година
родитељ
комит
238a443ed6

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

@@ -152,8 +152,8 @@ const TopNavRight: React.FC<topNavRightProps> = ({
       {/* 设备 */}
       {selNavObj.id !== 'all' && (
         <div className={styles.right}>
-          <div className={styles.title}>运行中的设备</div>
-          <div className={styles.onlyNum}>{selNavObj.num}</div>
+          {selNavObj.id !== 'curtain' && <div className={styles.title}>运行中的设备</div>}
+          {selNavObj.id !== 'curtain' && <div className={styles.onlyNum}>{selNavObj.num}</div>}
           <div className={styles.closeButton} onClick={allCloseClick}>
             {/* <Button type="primary"  size={'large'}  icon={<Icon type="closeall"  style={{color:'red',fontSize:20}} />} style={{'background':'rgba(196, 196, 196, 0.2)',border:'none'}} >
               全部关闭

+ 40 - 6
src/pages/Equipment/index.tsx

@@ -85,7 +85,8 @@ const Environment: React.FC = () => {
       colorStr: '232, 158, 50,',
     },
   ]);
-  const [scale, setScale] = useState<number>(1);
+  const [scale, setScale] = useState<number>(0.8);
+  const [maxScale, setMaxScale] = useState<number>(1);
   const [mapList, setMapList] = useState<API.MapInfo[]>([]);
   const mapListCopy = useRef<any[]>([]);
   const [mapSize, setMapSize] = useState<any>({});
@@ -257,6 +258,27 @@ const Environment: React.FC = () => {
             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;
+              }
+            }
+          }
+          setMaxScale(maxScaleTemp);
 
           setMapList(data);
           mapListCopy.current = data;
@@ -272,7 +294,7 @@ const Environment: React.FC = () => {
 
   const changeMapList = useCallback(
     (mscale, moveWidth, moveHeight) => {
-      setScale(mscale < 1 ? mscale : 1);
+      setScale(mscale);
       console.log('mscale', mscale);
       var mapListTemp = JSON.parse(JSON.stringify(mapListCopy.current));
       var mapListTemp2 = mapListTemp.map((item, index) => {
@@ -485,6 +507,7 @@ const Environment: React.FC = () => {
             changeMapList={changeMapList}
             mapList={mapCombineList}
             mapSize={mapSize}
+            maxscale={maxScale}
             type={'equipment'}
             selFloorId={selFloorId}
             render={(item, index) => {
@@ -537,7 +560,18 @@ const Environment: React.FC = () => {
                       <div
                         className={mapstyles.allDevice}
                         style={{
-                          transform: `scale(${scale},${scale})`,
+                          transform:
+                            scale == maxScale
+                              ? 'scale(1)'
+                              : item.width < 30 || item.height < 20
+                              ? 'scale(0.3)'
+                              : item.width < 40 || item.height < 30
+                              ? 'scale(0.5)'
+                              : item.width < 55 || item.height < 40
+                              ? 'scale(0.6)'
+                              : item.width < 75 || item.height < 50
+                              ? 'scale(0.8)'
+                              : 'scale(1)',
                         }}
                       >
                         {/* 所有设备的图标列表 */}
@@ -553,7 +587,7 @@ const Environment: React.FC = () => {
                               <Icon
                                 className=""
                                 type={ditem.equipType}
-                                style={{ color: '#fff', fontWeight: 'bold' }}
+                                style={{ color: '#fff', fontWeight: 'bold', fontSize: '8px' }}
                               ></Icon>
                             </div>
                           );
@@ -578,10 +612,10 @@ const Environment: React.FC = () => {
                           lastTime = new Date().getTime();
                         }}
                         style={{
-                          transform: `scale(${scale},${scale})`,
+                          transform: `scale(${scale - 0.1 < 1 ? scale - 0.1 : 1})`,
                         }}
                       >
-                        <Icon className="" type="hover"></Icon>
+                        <Icon className="" type="hover" style={{ fontSize: '10px' }}></Icon>
                       </div>
                     )}
                     <div className={mapstyles.content}>

+ 2 - 1
src/sagacare_components/map/index.less

@@ -84,7 +84,7 @@
     // }
     .allDevice {
       position: absolute;
-      top: 5px;
+      top: 2px;
       left: 5px;
       z-index: 1;
       display: flex;
@@ -103,6 +103,7 @@
         font-size: 11px;
         background: transparent;
         border-radius: 22px;
+        transform-origin: 0% 0%;
       }
     }
     .allTime {

+ 15 - 4
src/sagacare_components/map/index.tsx

@@ -13,9 +13,18 @@ type MapProps = {
   mapList: API.MapInfo[];
   mapSize: any;
   changeMapList: any;
+  maxscale: number;
 };
 
-const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapList, mapSize }) => {
+const Map: React.FC<MapProps> = ({
+  type,
+  selFloorId,
+  render,
+  mapList,
+  changeMapList,
+  mapSize,
+  maxscale,
+}) => {
   //useModel 注释掉 不用啦 晚会删
 
   //   useEffect(() => {
@@ -41,8 +50,8 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
   //const [mscale, setMscale] = useState<number>(1);
   const mscale = useRef<number>(1);
   //最大的缩放比例
-  const [maxscale, setMaxscale] = useState<number>(1.7);
-  const [minscale, setMinscale] = useState<number>(0.7);
+  //const [maxscale, setMaxscale] = useState<number>(1.8);
+  const [minscale, setMinscale] = useState<number>(0.8);
   const [canMove, setCanMove] = useState<boolean>(false);
 
   const [moveTop, setMoveTop] = useState<number>(0); //地图的块的top的改变
@@ -105,9 +114,10 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
         }
         var nowTranslateX = translateX + nowPageX - startPageX;
         var nowTranslateY = translateY + nowPageY - startPageY;
-
+        //不能让地图太靠左边 看不到
         nowTranslateX =
           nowTranslateX < -mapwidth + 220 + moveLeft ? -mapwidth + 220 + moveLeft : nowTranslateX;
+        //不能让地图太靠右边 看不到
         nowTranslateX =
           nowTranslateX > mapWrapWidth - 220 + moveLeft
             ? mapWrapWidth - 220 + moveLeft
@@ -257,6 +267,7 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
     var mapDom = document.querySelector('#map');
     //console.log('document.querySelector("#map")', mapDom);
     let tscale = 1;
+    //控制板的事件
     mapDom.addEventListener('wheel', function (event) {
       //debugger;
       event.preventDefault();