add:电梯系统新增

hx-ai-intelligent/src/view/equipmentControl/liftSystem/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="map-box">
     <div class="map">
-      <liftInfo />
+      <liftInfo v-for="(item, index) in liftBox" :key="index" :liftInfo="item" />
     </div>
   </div>
 </template>
@@ -16,14 +16,30 @@
   onMounted(() => {});
 
   // tab页部分 ========================================================
-
-  // 表格数据
-  const dataSource = ref([]);
+  const liftBox = ref([
+    {
+      name: '办公区域扶梯A',
+      workState: 1,
+      faultState: 2,
+      direction: 1,
+      type: 2,
+      isLeft: true,
+      styleText: { left: '245px', bottom: '230px' },
+    },
+    {
+      name: '办公区域扶梯B',
+      workState: 0,
+      faultState: 3,
+      direction: 0,
+      type: 1,
+      isLeft: false,
+      styleText: { left: '700px', bottom: '360px' },
+    },
+  ]);
 </script>
 <style lang="less" scoped>
   .map-box {
     // 颜色变量，用于区别颜色
-
     // 正常 - 开启 - 上行 -下行
     --on: #0dffa4;
     // 关闭
@@ -36,6 +52,8 @@
     --fault: #ff7636;
     // 未知
     --unknown: #a742ff;
+    // 触发图标大小
+    --size: 40px;
     width: 100%;
     height: 100%;
     .map {

hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue

@@ -1,8 +1,13 @@
 <template>
+  <div class="icon-box" :style="info.styleText">
+    <img v-if="info.type == 1" src="../image/liftState/lift/lift1.png" alt="" />
+    <img v-else-if="info.type == 2" src="../image/liftState/lift/lift2.png" alt="" />
+    <div class="tab" :class="[info.isLeft ? 'left' : 'right']">
+      <div v-if="info.isLeft" class="line"></div>
       <div class="info-box">
         <div class="box-title">
           <div class="dot"></div>
-      <span>办公区域扶梯A</span>
+          <span>{{ info.name }}</span>
         </div>
         <div class="box-inner">
           <!-- 是否开启 -->
@@ -10,11 +15,15 @@
             <div class="item-box">
               <div class="icon">
                 <div class="icon-item">
-              <img src="../image/liftState/lift-normal.svg" alt="" />
+                  <img v-if="info.workState" src="../image/liftState/switch-on.svg" alt="" />
+                  <img v-else src="../image/liftState/switch-off.svg" alt="" />
                 </div>
               </div>
             </div>
-        <div class="item-text">开启</div>
+            <div class="item-text">
+              <span v-if="info.workState" style="color: var(--on)">开启</span>
+              <span v-else style="color: var(--off)">关闭</span>
+            </div>
           </div>
           <!-- 是否故障 -->
           <div class="item">
@@ -40,10 +49,13 @@
           </div>
         </div>
       </div>
+      <div v-if="!info.isLeft" class="line1"></div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted } from 'vue';
+  import { ref, computed, onMounted } from 'vue';
 
   // 请求
 
@@ -51,20 +63,62 @@
 
   onMounted(() => {});
 
-  // tab页部分 ========================================================
+  const props = defineProps({
+    // 分区结构（照明区域 > 照明回路）
+    liftInfo: {
+      type: Object,
+      default: () => {},
+    },
+  });
+
+  const info = computed(() => {
+    return props.liftInfo;
+  });
 
-  // 运行状态
-  const runState = ref('1');
-  // 电梯状态
-  const liftState = ref('2');
+  // tab页部分 ========================================================
 </script>
 <style lang="less" scoped>
+  .icon-box:hover {
+  }
+  .icon-box {
+    width: var(--size);
+    height: var(--size);
+    position: absolute;
+    transition: all ease 0.2s;
+    > img {
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      user-select: none;
+      position: relative;
+      z-index: 9;
+    }
+    .tab {
+      position: absolute;
+      bottom: -20px;
+      display: flex;
+      .line {
+        position: relative;
+        z-index: 1;
+        width: 40px;
+        height: 75px;
+        background-image: url(../image/liftState/lift/line.png);
+        background-size: 100% 100%;
+      }
+      .line1 {
+        position: relative;
+        z-index: 1;
+        width: 40px;
+        height: 75px;
+        transform: rotateY(180deg);
+        background-image: url(../image/liftState/lift/line.png);
+        background-size: 100% 100%;
+      }
       // 面板
       .info-box {
         // 字体颜色变量
         --text: rgb(20, 255, 255);
-
-    width: 240px;
+        width: 250px;
         height: 130px;
         display: flex;
         gap: 5px;
@@ -73,7 +127,9 @@
         border-radius: 8px;
         box-sizing: border-box;
         padding: 8px;
-    border: 3px solid var(--text);
+        border: 2px solid var(--text);
+        transform: translateY(-50%);
+        cursor: pointer;
         // 面板标题
         .box-title {
           height: auto;
@@ -95,7 +151,7 @@
         .box-inner {
           flex: 1;
           display: flex;
-      padding: 0 10px;
+          padding: 0 5px;
           // 单个盒子（3盒子）
           .item {
             flex: 1;
@@ -143,4 +199,15 @@
           }
         }
       }
+      .info-box:hover {
+        border: 2px solid white;
+      }
+    }
+    .right {
+      right: calc(var(--size) / 2);
+    }
+    .left {
+      left: calc(var(--size) / 2);
+    }
+  }
 </style>

hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftPosition.ts

@@ -0,0 +1,3 @@
+// 此文件只定义lift（即电梯）的位置信息
+// 与显示状态和分组信息无关
+export const liftPosition = [];