导航条悬浮显示 窗帘样式修改

src/layouts/index.less

@@ -1,9 +1,10 @@
 .layout {
+  position: relative;
   box-sizing: border-box;
-  //   width: 1340px;
+  width: 1340px;
   height: 100%;
   margin: 0 auto;
-  padding: 20px 50px;
+  padding: 20px 0px;
   text-decoration: none;
   user-select: none;
 }

src/pages/Environment/index.less

@@ -2,7 +2,12 @@
   color: #c4c4c4;
 }
 .maptop {
+  position: absolute;
+  top: 228px;
+  left: 0;
+  z-index: 1;
   box-sizing: border-box;
+  width: 1340px;
   height: 39px;
   padding-top: 10px;
   padding-right: 20px;

src/pages/Environment/index.tsx

@@ -148,9 +148,14 @@ const Environment: React.FC = () => {
             height: (res.data || {}).height,
           };
           setMapSize(mapSize);
-          //   data.forEach((item) => {
-          //     console.log('item', item);
-          //   });
+          var bodyWidth = document.body.offsetWidth;
+          var mscale = Number((bodyWidth / mapSize.width).toFixed(4));
+          data.forEach((item, index) => {
+            item.width = item.width * mscale;
+            item.height = item.height * mscale;
+            item.left = item.left * mscale;
+            item.top = item.top * mscale;
+          });
           setMapList(data);
           mapListCopy.current = data;
         })
@@ -163,16 +168,16 @@ const Environment: React.FC = () => {
   }, [selFloorId]);
 
   const changeMapList = useCallback(
-    (scale, moveWidth, moveHeight) => {
+    (mscale, moveWidth, moveHeight) => {
       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);
+          //console.log('mapListTemp', mscale, item.width, item.width * mscale);
         }
-        item.width = item.width * scale;
-        item.height = item.height * scale;
-        item.left = item.left * scale - moveWidth;
-        item.top = item.top * scale - moveHeight;
+        item.width = item.width * mscale;
+        item.height = item.height * mscale;
+        item.left = item.left * mscale - moveWidth;
+        item.top = item.top * mscale - moveHeight;
         return item;
       });
       setMapList(mapListTemp2);
@@ -334,7 +339,7 @@ const Environment: React.FC = () => {
                         className=""
                         type={getSpaceFunc(item.roomFuncType)}
                         style={{
-                          fontSize: 20,
+                          fontSize: 18,
                           display: item.width > 40 && item.height > 40 ? 'block' : 'none',
                         }}
                       ></Icon>

src/pages/Equipment/index.less

@@ -2,7 +2,12 @@
   color: #c4c4c4;
 }
 .maptop {
+  position: absolute;
+  top: 228px;
+  left: 0;
+  z-index: 1;
   box-sizing: border-box;
+  width: 1340px;
   height: 39px;
   padding-top: 10px;
   .right {
@@ -17,5 +22,9 @@
       background: #5e8bcf;
       border-radius: 10px;
     }
+    .noCurtain {
+      background: url(~@/assets/images/page-equipment/bg_disable.png) repeat;
+      border: 1px solid #dfe3ed;
+    }
   }
 }

src/pages/Equipment/index.tsx

@@ -114,7 +114,7 @@ const Environment: React.FC = () => {
 
   //当前设备的状态 all全部开启 part部分开启 close全都关闭  还有类型type 包括airConditioner light curtain
   //根据设备状态返回不同的 颜色
-  const getColorOpacity = (value: number, type?: string): string => {
+  const getColorOpacity = (value: any, type?: string): string => {
     let colorStr = '';
     if (selNav.id == 'all') {
       //全部设备时 colorStr赋值
@@ -125,15 +125,24 @@ const Environment: React.FC = () => {
     } else {
       colorStr = selNav.colorStr;
     }
-    if (value === 2) {
-      //2 是部分开启
-      return 'rgba(' + colorStr + '0.4)';
-    } else if (value === 1) {
-      //1 是开启
-      return 'rgba(' + colorStr + '1)';
-    } else if (value === 0 || value == 'nostatus') {
-      //0是关闭
-      return 'rgba(196, 196, 196, 0.6)';
+    if (selNav.id == 'curtain' || type == 'curtain') {
+      if (value == 'noHave') {
+        //没有
+        return 'rgba(196, 196, 196, 0)';
+      } else {
+        return 'rgba(' + colorStr + '1)';
+      }
+    } else {
+      if (value === 2) {
+        //2 是部分开启
+        return 'rgba(' + colorStr + '0.4)';
+      } else if (value === 1) {
+        //1 是开启
+        return 'rgba(' + colorStr + '1)';
+      } else if (value === 0 || value == 'nostatus') {
+        //0是关闭
+        return 'rgba(196, 196, 196, 0.6)';
+      }
     }
   };
   const { confirm } = Modal;
@@ -236,6 +245,16 @@ const Environment: React.FC = () => {
             height: (res.data || {}).height,
           };
           setMapSize(mapSize);
+          var bodyWidth = document.body.offsetWidth;
+          var mscale = Number((bodyWidth / mapSize.width).toFixed(4));
+          //把地图变成 屏幕大小
+          data.forEach((item, index) => {
+            item.width = item.width * mscale;
+            item.height = item.height * mscale;
+            item.left = item.left * mscale;
+            item.top = item.top * mscale;
+          });
+
           setMapList(data);
           mapListCopy.current = data;
           //setSelNav(navigatorList[0]); //每当重新请求地图时 让选中导航的默认是第一个
@@ -249,17 +268,18 @@ const Environment: React.FC = () => {
   }, [selFloorId]);
 
   const changeMapList = useCallback(
-    (scale, moveWidth, moveHeight) => {
-      setScale(scale < 1 ? scale : 1);
+    (mscale, moveWidth, moveHeight) => {
+      setScale(mscale < 1 ? mscale : 1);
+      console.log('mscale', mscale);
       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);
+          // console.log('mapListTemp', mscale, item.width, item.width * mscale);
         }
-        item.width = item.width * scale;
-        item.height = item.height * scale;
-        item.left = item.left * scale - moveWidth;
-        item.top = item.top * scale - moveHeight;
+        item.width = item.width * mscale;
+        item.height = item.height * mscale;
+        item.left = item.left * mscale - moveWidth;
+        item.top = item.top * mscale - moveHeight;
         return item;
       });
       setMapList(mapListTemp2);
@@ -348,7 +368,7 @@ const Environment: React.FC = () => {
         queryDeviceManage();
       }, 3000);
       return () => {
-        console.log('selFloorId', selFloorId);
+        //console.log('selFloorId', selFloorId);
         clearInterval(setTimer.current);
         setTimer.current = null;
       };
@@ -415,7 +435,7 @@ const Environment: React.FC = () => {
         selParamObj={selNav}
       ></TopNavigator>
       <div className={styles.maptop}>
-        {selNav.id !== 'all' && (
+        {selNav.id !== 'all' && selNav.id !== 'curtain' && (
           <div className={styles.right}>
             <div>
               <span
@@ -440,6 +460,21 @@ const Environment: React.FC = () => {
             </div>
           </div>
         )}
+        {selNav.id == 'curtain' && (
+          <div className={styles.right}>
+            <div>
+              <span
+                className={styles.circle}
+                style={{ backgroundColor: 'rgba(' + selNav.colorStr + '1)' }}
+              ></span>
+              <span>有</span>
+            </div>
+            <div>
+              <span className={cx(styles.circle, styles.noCurtain)}></span>
+              <span>无</span>
+            </div>
+          </div>
+        )}
       </div>
       <Spin spinning={loading} wrapperClassName={mapstyles.spinnclass}>
         {mapCombineList.length > 0 && (
@@ -470,8 +505,7 @@ const Environment: React.FC = () => {
                         : '',
                     }}
                     className={cx(mapstyles.house, {
-                      [mapstyles.notclick]:
-                        !item.canClick || (selNav.id !== 'all' && item[selNav.id] == 'noHave'),
+                      [mapstyles.notclick]: !item.canClick || item[selNav.id] == 'noHave',
                       [mapstyles.searchSel]: item.spaceId && item.spaceId === searchSpace.spaceId,
                     })}
                     onClick={(event) => {
@@ -523,12 +557,12 @@ const Environment: React.FC = () => {
                         })}
                       </div>
                     )}
-                    {item.canClick && (
+                    {item.canClick && item[selNav.id] != 'noHave' && (
                       <div
                         className={mapstyles.showModal}
                         onClick={(event) => {
                           event.stopPropagation();
-                          if (lastTime - firtTime < 200) {
+                          if (lastTime - firtTime < 400) {
                             showModalClick(item);
                           }
                         }}
@@ -553,7 +587,7 @@ const Environment: React.FC = () => {
                           className=""
                           type={getSpaceFunc(item.roomFuncType)}
                           style={{
-                            fontSize: 20,
+                            fontSize: 18,
                             display: item.width > 40 && item.height > 40 ? 'block' : 'none',
                           }}
                         ></Icon>

src/pages/NoAuth/index.less

@@ -6,14 +6,3 @@
     cursor: pointer;
   }
 }
-
-.maptop {
-  box-sizing: border-box;
-  height: 39px;
-  padding-top: 10px;
-  padding-right: 20px;
-  .right {
-    float: right;
-    width: 210px;
-  }
-}

src/pages/Runtime/components/topNavRight/index.tsx

@@ -4,6 +4,7 @@ import { DatePicker } from 'antd';
 import cx from 'classnames';
 import styles from './index.less';
 import moment from 'moment';
+import { projectObj } from '@/config/api.js';
 
 export type TopNavRightProps = {
   runtimeNav: any;
@@ -21,7 +22,10 @@ const TopNavRight: React.FC<TopNavRightProps> = ({ runtimeNav, changeTime }) =>
             <div className={styles.title}>正常运行</div>
             <div className={styles.num}>{runtimeNav.normalRun}</div>
           </div>
-          <div className={styles.item} style={{ display: 'none' }}>
+          <div
+            className={styles.item}
+            style={{ display: projectObj.projectId == 'Pj3301100002' ? 'none' : '' }}
+          >
             <div className={cx(styles.overtimeWork, styles.circle)}></div>
             <div className={styles.title}>加班</div>
             <div className={styles.num}>{runtimeNav.overtimeWork}</div>

src/pages/Runtime/index.less

@@ -8,7 +8,12 @@
 }
 
 .maptop {
+  position: absolute;
+  top: 228px;
+  left: 0;
+  z-index: 1;
   box-sizing: border-box;
+  width: 1340px;
   height: 39px;
   padding-top: 10px;
   padding-right: 20px;

src/pages/Runtime/index.tsx

@@ -67,6 +67,15 @@ const Runtime: React.FC = () => {
             height: (res.data || {}).height,
           };
           setMapSize(mapSize);
+          var bodyWidth = document.body.offsetWidth;
+          var scale = Number((bodyWidth / mapSize.width).toFixed(4));
+          data.forEach((item, index) => {
+            item.width = item.width * scale;
+            item.height = item.height * scale;
+            item.left = item.left * scale;
+            item.top = item.top * scale;
+          });
+
           setMapList(data);
           mapListCopy.current = data;
         })
@@ -269,12 +278,7 @@ const Runtime: React.FC = () => {
                       : '',
                   }}
                 >
-                  <div
-                    className={mapstyles.allTime}
-                    style={{
-                      display: item.width > 86 && item.height > 40 ? 'block' : 'none',
-                    }}
-                  >
+                  <div className={mapstyles.allTime}>
                     {/* {(item.timeList || []).map(function (titem: string, tindex: number) {
                   return <span key={tindex + 'time'}>{titem},</span>;
                 })} */}
@@ -322,7 +326,7 @@ const Runtime: React.FC = () => {
                       className=""
                       type={getSpaceFunc(item.roomFuncType)}
                       style={{
-                        fontSize: 20,
+                        fontSize: 18,
                         display: item.width > 40 && item.height > 40 ? 'block' : 'none',
                       }}
                     ></Icon>

src/sagacare_components/map/index.less

@@ -110,16 +110,24 @@
       top: 4px;
       left: 4px;
       z-index: 1;
-      display: flex;
+      //   display: flex;
+      box-sizing: border-box;
       width: 100%;
+      padding-right: 4px;
+      overflow: hidden;
       color: #4d5262;
       font-size: 10px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
       text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
       .overworkTime {
         color: #5e8bcf;
+        font-weight: 700;
       }
       .meetTime {
         color: #00dc23;
+        font-weight: 700;
       }
     }
     .content {
@@ -133,7 +141,7 @@
         width: 100%;
         padding: 0 3px;
         color: #000;
-        font-size: 13px;
+        font-size: 12px;
         text-align: center;
         //text-shadow: 1px 1px 1px #fff;
         text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
@@ -172,11 +180,12 @@
       display: none;
       align-items: center;
       justify-content: center;
-      width: 22px;
-      height: 22px;
-      font-size: 12px;
+      width: 20px;
+      height: 20px;
+      font-size: 10px;
+      line-height: 20px;
       background: #fff;
-      border-radius: 22px;
+      border-radius: 20px;
       transform-origin: 100% 100%;
     }
     &:hover .showModal {

src/sagacare_components/map/index.tsx

@@ -33,13 +33,16 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
   const [startPageY, setStartPageY] = useState<number>(0);
 
   const [translateX, setTranslateX] = useState<number>(0);
-  const [translateY, setTranslateY] = useState<number>(0);
+  const [translateY, setTranslateY] = useState<number>(110);
+
+  const [mapWidth, setMapWidth] = useState(1340);
+  const [marginLeft, setMarginLeft] = useState(0);
 
   //const [mscale, setMscale] = useState<number>(1);
   const mscale = useRef<number>(1);
   //最大的缩放比例
-  const [maxscale, setMaxscale] = useState<number>(1.5);
-  const [minscale, setMinscale] = useState<number>(0.5);
+  const [maxscale, setMaxscale] = useState<number>(1.7);
+  const [minscale, setMinscale] = useState<number>(0.7);
   const [canMove, setCanMove] = useState<boolean>(false);
 
   const [mapHeight, setMapHeight] = useState(500);
@@ -84,7 +87,6 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
     var moveWidth = (mapWrapWidth * (mscale.current - 1)) / 2;
     var moveHeight = (mapWrapHeight * (mscale.current - 1)) / 2;
     changeMap(mscale.current, moveWidth, moveHeight);
-
     //console.log('mscale', mscaleTemp);
   };
 
@@ -101,22 +103,22 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
     var moveHeight = (mapWrapHeight * (mscale.current - 1)) / 2;
 
     changeMap(mscale.current, moveWidth, moveHeight);
-
     // }
   };
   function changeMap(scale, moveWidth, moveHeight) {
     changeMapList(scale, moveWidth, moveHeight);
   }
-  //const fixWidth = 1300;
-  //   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]);
+  const fixWidth = 1300;
+  // 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(() => {
@@ -139,6 +141,7 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
       var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
       setTranslateX(left + mapWrapWidth / 2);
       setTranslateY(top + mapWrapHeight / 2);
+      mscale.current = 1;
       //搜索完成
       changeSearchBuildId(''); //清空搜索记录  以防两次搜索一样的建筑的 没反应
       changeSearchFloorId(''); //清空搜索记录 以防两次搜索一样的楼层时 没反应 要不要换位置
@@ -146,7 +149,8 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
     } else if (currentFloorId.current != selFloorId) {
       //如果两次的selFloorId 不一样 才会更改地图的位置为0 0
       setTranslateX(0);
-      setTranslateY(0);
+      setTranslateY(110);
+      mscale.current = 1;
     }
     currentFloorId.current = selFloorId;
     //console.log('selectSpace2');
@@ -225,6 +229,7 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
 
       var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
       var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
+      //为了让地图在 屏幕中间缩放
       var moveWidth = (mapWrapWidth * (mscale.current - 1)) / 2;
       var moveHeight = (mapWrapHeight * (mscale.current - 1)) / 2;
 
@@ -240,7 +245,10 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
   useEffect(() => {
     console.log('document', document.body.offsetHeight);
     var bodyHeight = document.body.offsetHeight;
-    setMapHeight(bodyHeight - 293);
+    setMapHeight(bodyHeight - 145);
+    var bodyWidth = document.body.offsetWidth;
+    setMapWidth(bodyWidth);
+    setMarginLeft(-(bodyWidth - 1340) / 2); //1340 是固定宽度值
   }, []);
   return (
     <div
@@ -255,7 +263,11 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, changeMapL
       onMouseMove={(event) => {
         mouseMoveEvent(event);
       }}
-      style={{ height: mapHeight + 'px' }}
+      style={{
+        height: mapHeight + 'px',
+        width: mapWidth + 'px',
+        marginLeft: marginLeft + 'px',
+      }}
     >
       <div
         id="map"

src/sagacare_components/topNavigator/index.less

@@ -2,11 +2,19 @@
   color: #c4c4c4;
 }
 .topnavigator {
+  //   margin-top: 18px;
+  position: absolute;
+  top: 165px;
+  left: 0;
+  z-index: 1;
   box-sizing: border-box;
+  width: 1340px;
   //   display: flex;
   height: 63px;
-  margin-top: 18px;
+  text-decoration: none;
   background: #fff;
+  user-select: none;
+  tap-highlight-color: rgba(0, 0, 0, 0);
   .floor {
     display: flex;
     align-items: center;