首页样式 功能 优化

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue

@@ -88,6 +88,10 @@ export default {
     handleCleared() {
       const { mapIns } = this.getMap();
 
+      this.layerData.forEach(({ children }) => {
+        children.forEach(item => item.status = "")
+      });
+
       if (!mapIns) return;
 
       // mapIns.clearMap();
@@ -143,6 +147,7 @@ export default {
 .RoadAndEvents {
   width: 100%;
   background: url("~@screen/images/bg/box_bg_002.png") no-repeat;
+  // clip-path: polygon(13% 0, 87% 0, 100% 14%, 100% 85%, 85% 100%, 11% 100%, 0 87%, 0 15%);
   background-size: 100% 100%;
   position: relative;
   display: flex;
@@ -152,18 +157,20 @@ export default {
   overflow: hidden;
 
   .tabs-content {
-    display: grid;
     margin-top: 15px;
     margin-bottom: 6px;
+    display: grid;
     grid-template-columns: repeat(5, 1fr);
-    grid-template-rows: repeat(3, 66px);
+    // grid-template-rows: repeat(3, 1fr);
     flex: 1;
+    max-height: 100%;
     overflow: auto;
     position: relative;
     gap: 6px;
 
     .device-item {
-      position: absolute;
+      // position: absolute;
+      position: relative;
       width: 70px;
       cursor: pointer;
       display: flex;

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js

@@ -52,6 +52,8 @@ export const eventMap = {
 
     mapIns.add(layer);
 
+    const fitViewOverlays = [];
+
     [
       {
         camLong: 116.471814,
@@ -95,6 +97,8 @@ export const eventMap = {
         },
       });
 
+      fitViewOverlays.push(labelMarker);
+
       labelMarker.on("click", (e) => {
         this.cameraDialogConfig = {
           // 0 有（球机） 1 ⽆（枪机）
@@ -106,7 +110,7 @@ export const eventMap = {
       layer.add(labelMarker);
     });
 
-    mapIns.setFitView();
+    mapIns.setFitView(fitViewOverlays, false, [360, 360, 360, 360]);
   },
   async "路测设备/摄像机_close"() {
     cacheData.DriveTestEquipment_Camera?.clear();

ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue

@@ -18,7 +18,8 @@
     <footer class="footer card-menu">
       <div class="footer-title">
         <span>济菏高速缩略图</span>
-        <img src="@screen/images/icon/icon-vector.png" @click.stop="handleShrink" />
+        <i class="el-icon-s-fold" style="color: #2AD9FD; transform: rotate(-90deg);" @click.stop="handleShrink" />
+        <!-- <img src="@screen/images/icon/icon-vector.png" @click.stop="handleShrink" /> -->
       </div>
       <div class="footer-content">
         <Thumbnail />
@@ -52,6 +53,10 @@ export default {
     handleShrink(e) {
       const translateXElement = e.target.parentElement.parentElement;
 
+      const result = (e.target.style.transform.match(/[-0-9]+/)?.[0] || -90) * -1
+
+      e.target.style.transform = `rotate(${result}deg)`;
+
       // translateXElement.style.transform = translateXElement.style.transform ? "" : `translateY(calc(100% - 36px))`
       translateXElement.style.height = translateXElement.style.height != "36px" ? "36px" : `100%`
     }
@@ -65,12 +70,12 @@ export default {
   z-index: 6;
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 30px;
   padding: 19px 31px 0 25px;
   justify-content: space-between;
 
   .card-menu {
-    transition: all .6s linear;
+    transition: all .24s linear;
   }
 
   .content {
@@ -114,8 +119,9 @@ export default {
     // margin: auto;
     pointer-events: none;
     overflow: hidden;
-    // height: 100%;
-    height: fit-content;
+    height: 100%;
+    // height: fit-content;
+    will-change: height;
 
     >div {
       pointer-events: all;
@@ -133,6 +139,10 @@ export default {
       justify-content: center;
       align-items: center;
       overflow: hidden;
+      display: flex;
+      align-items: center;
+
+      gap: 15px;
 
       span {
         font-size: 16px;
@@ -141,13 +151,18 @@ export default {
         color: #2ad9fd;
       }
 
-      img {
-        display: inline-block;
-        margin-left: 11px;
-        width: 16px;
-        height: 13px;
+      i {
+        transition: all .24s linear;
         cursor: pointer;
       }
+
+      // img {
+      //   display: inline-block;
+      //   margin-left: 11px;
+      //   width: 16px;
+      //   height: 13px;
+      //   cursor: pointer;
+      // }
     }
 
     .footer-content {