add:照明系统素材/样式/交互修改

hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less

@@ -10,10 +10,13 @@
         width: 1280px;
         height: 720px;
         user-select: none;
-        background-image: url(../image/bg.jpg);
+        background-image: url(../image/floor-1.png);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        background-color: linear-gradient(top to bottom,#c0deff, #8eadf0);
         // 由于背景是俯视图，会产生有交点的透视效果，故使用透视属性
-        perspective: 1000px;
+        perspective: 900px;
-        perspective-origin: 850px -160px;
+        perspective-origin: 900px -120px;
         // 左上角区域切换功能
         .btn-box {
             width: 100px;
@@ -45,11 +48,11 @@
         // 大区分区
         .area{
             position: absolute;
-            bottom: 170px;
+            bottom: 210px;
-            left: 240px;
+            left: 250px;
-            width: 780px;
+            width: 700px;
-            height: 240px;
+            height: 270px;
-            transform: rotateX(79deg) rotateZ(-22deg) skew(29deg);
+            transform: rotateX(73deg) rotateZ(338deg) skew(31deg);
             display: flex;
             gap: 5px;  
             .area1 {
@@ -93,7 +96,7 @@
             }
             .area-item {
                 cursor: pointer;
-                transition: all ease 0.2s;
+                transition: transform ease 0.2s;
                 >.light-group {
                     height: 100%;
                     flex: 1;
@@ -105,7 +108,95 @@
                     // border: 2px solid red;
                     .shadow-box {
                         width: 30px;
-                        height: 200px;
+                        height: 220px;
+                        border-radius: 20px;
+                        background: rgba(0, 0, 0, 0.2);
+                    }
+                }
+            }
+        }
+    }
+    .lightingImgBox1 {
+        position: relative;
+        width: 1280px;
+        height: 720px;
+        user-select: none;
+        background-image: url(../image/floor-2.png);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        background-color: linear-gradient(top to bottom,#c0deff, #8eadf0);
+        // 由于背景是俯视图，会产生有交点的透视效果，故使用透视属性
+        perspective: 900px;
+        perspective-origin: 900px -120px;
+        // 左上角区域切换功能
+        .btn-box {
+            width: 100px;
+            position: sticky;
+            top: 15px;
+            margin-left: 10px;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            .btn-item {
+                cursor: pointer;
+                width: 100%;
+                height: 35px;
+                border-radius: 4px;
+                // background: rgba(39, 120, 255, 1);
+                background: rgb(7, 72, 116);
+                border: 1px solid rgba(51, 199, 255, 1);
+                box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
+                font-size: 16px;
+                color: white;
+            }
+            .btnActive {
+                background: rgba(39, 120, 255, 1);
+            }
+            .btn-item:hover {
+                color: white;
+            }
+        }
+        // 大区分区
+        .area{
+            position: absolute;
+            bottom: 320px;
+            left: 240px;
+            width: 950px;
+            height: 270px;
+            transform: rotateX(76deg) rotateZ(-22deg) skew(30deg);
+            display: flex;
+            justify-content: space-between;
+            gap: 5px;  
+            .area1 {
+                width: 170px;
+                background: rgba(0, 251, 91, 0.3);
+                border: 2px solid rgb(0, 251, 91);
+                display: flex;
+            }   
+            .area2 {
+                width: 150px;
+                background: rgba(255, 165, 0, 0.3);
+                border: 2px solid rgb(255, 165, 0);
+                display: flex;
+            } 
+            .area-item:hover {
+                transform: scale(1.05);
+            }
+            .area-item {
+                cursor: pointer;
+                transition: transform ease 0.2s;
+                >.light-group {
+                    height: 100%;
+                    flex: 1;
+                    display:flex;
+                    justify-content: center;
+                    align-items: center;
+                    box-sizing: border-box;
+                    padding: 10px;
+                    // border: 2px solid red;
+                    .shadow-box {
+                        width: 30px;
+                        height: 230px;
                         border-radius: 20px;
                         background: rgba(0, 0, 0, 0.2);
                     }

hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="lighting-box">
-    <div class="lighting-img-box">
+    <div class="lighting-img-box" :class="{ lightingImgBox1: thisFloor == '2' }">
       <!-- 左上角，区域切换 -->
       <div class="btn-box">
         <button
@@ -110,6 +110,7 @@
   // 左上角分层切换
   const changeFloor = (area: any, floor: string) => {
     thisFloor.value = floor;
+    console.log(thisFloor.value, 'vvvvvvvvvv');
     // 重置数据
     reset();
     // 重置视图

hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/dialogStyle.less

@@ -39,13 +39,17 @@
       .journal {
         padding: 1% 3%;
         width: 100%;
-        height: 150px;
         background-color: rgba(0, 0, 0);
         border-radius: 12px;
         border: 2px solid transparent;
         border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1;
         .title-img {
-          padding-top: 6px;
+          margin-top: 6px;
+        }
+        .title-text {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
       }
       .imgText {
@@ -126,18 +130,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    .execute {
+    .execute, .cancel {
-      margin-right: 10px;
-      width: 74px;
-      height: 40px;
-      opacity: 1;
-      cursor: pointer;
-      border-radius: 4px;
-      font-size: 14px;
-      font-weight: 400;
-      border: 0;
-      margin-left: 10px;
-    }.cancel {
       margin-right: 10px;
       width: 74px;
       height: 40px;

hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/tabs1.less

@@ -1,5 +1,6 @@
 // 抽屉
-.drawer-fan {
+.drawer-item {
+
   .light-area,
   .circuit-area,
   .control-area,
@@ -412,12 +413,22 @@
 
   .zmhlbtn {
     position: relative;
-  }
+    overflow: hidden;
-
+    .btn-back {
+      position: absolute;
+      width: 50px;
+      height: 50px;
+      right: -25px;
+      bottom: -30px;
+      transform: rotate(45deg);
+      background: orange;
       // 禁用图标
       .anticon-stop {
+        transform: rotate(-45deg) scale(0.9);
         position: absolute;
-    right: 3px;
+        left: 3px;
-    bottom: 3px;
+        top: 15px;
+      }
+    }
   }
 }