fix:修改新风系统范围

hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/devicePosition.ts

@@ -18,24 +18,58 @@ export const newTrendPosition = [
 ];
 //空调箱
 export const airConditioningPosition = [
-  { styleText: { left: '16%', bottom: '33%' }, lineType: 1 },
+  {
-  { styleText: { left: '31%', bottom: '38%' }, lineType: 1 },
+    styleText: { left: '13%', bottom: '30%', width: '120px', color: 'rgba(165, 209, 123, 0.5)' },
-  { styleText: { left: '41%', bottom: '55.5%' }, lineType: 1 },
+    lineType: 1,
+  },
+  {
+    styleText: {
+      left: '31%',
+      bottom: '38%',
+      mLeft: '120px',
+      width: '100px',
+      color: 'rgba(217, 223, 179, 0.5)',
+    },
+    lineType: 1,
+  },
+  {
+    styleText: {
+      left: '41%',
+      bottom: '55.5%',
+      width: '300px',
+      height: '150px',
+      color: 'rgba(168, 226, 233, 0.5)',
+    },
+    lineType: 1,
+  },
   { styleText: { left: '60%', bottom: '63%' }, lineType: 1 },
   { styleText: { left: '76%', bottom: '63%' }, lineType: 1 },
-  { styleText: { left: '71%', bottom: '48%' }, lineType: '' },
+  {
-  { styleText: { left: '46.5%', bottom: '32%' }, lineType: '' },
+    styleText: {
+      left: '71%',
+      bottom: '48%',
+    },
+    lineType: '',
+  },
+  {
+    styleText: {
+      left: '46.5%',
+      bottom: '32%',
+      width: '300px',
+      height: '150px',
+      mTop: '150px',
+      color: 'rgba(168, 226, 233, 0.5)',
+    },
+    lineType: '',
+  },
 ];
 //地暖
 export const floorHeatingPosition = [
   {
     styleText: {
-      left: '13%',
+      left: '13.4%',
       bottom: '44%',
-      width: '150px',
+      width: '120px',
-      height: '255px',
-      lineLeft: '220px',
-      lineBottom: '110px',
       color: 'rgba(242, 209, 156, 0.5)',
     },
     lineType: '',
@@ -44,12 +78,8 @@ export const floorHeatingPosition = [
     styleText: {
       left: '21%',
       bottom: '48%',
-      width: '130px',
+      width: '115px',
-      height: '325px',
-      lineLeft: '370px',
-      lineBottom: '110px',
       color: 'rgba(224, 244, 102,0.5)',
-      transform: 'rotateX(43deg) rotateZ(-19deg) skew(12deg) rotateY(-1deg)',
     },
     lineType: 1,
   },
@@ -57,12 +87,8 @@ export const floorHeatingPosition = [
     styleText: {
       left: '34.5%',
       bottom: '53.5%',
-      width: '350px',
+      width: '355px',
-      height: '300px',
-      lineLeft: '492px',
-      lineBottom: '190px',
       color: 'rgba(167, 128, 244, 0.5)',
-      transform: 'rotateX(42deg) rotateZ(-20deg) skew(17deg) rotateY(0deg)',
     },
     lineType: 1,
   },
@@ -70,12 +96,8 @@ export const floorHeatingPosition = [
     styleText: {
       left: '47.5%',
       bottom: '60.3%',
-      width: '100px',
+      width: '90px',
-      height: '306px',
-      lineLeft: '840px',
-      lineBottom: '238px',
       color: 'rgba(155, 216, 224, 0.5)',
-      transform: 'rotateX(51deg) rotateZ(-21deg) skew(17deg) rotateY(-2deg)',
     },
     lineType: 1,
   },
@@ -83,12 +105,8 @@ export const floorHeatingPosition = [
     styleText: {
       left: '60.5%',
       bottom: '65.5%',
-      width: '300px',
+      width: '350px',
-      height: '300px',
-      lineLeft: '930px',
-      lineBottom: '290px',
       color: 'rgba(222, 111, 141, 0.5)',
-      transform: 'rotateX(49deg) rotateZ(-24deg) skew(18deg) rotateY(3deg)',
     },
     lineType: 1,
   },
@@ -96,12 +114,8 @@ export const floorHeatingPosition = [
     styleText: {
       left: '73%',
       bottom: '72%',
-      width: '150px',
+      width: '140px',
-      height: '320px',
-      lineLeft: '1218px',
-      lineBottom: '335px',
       color: 'rgba(152, 190, 162, 0.5)',
-      transform: 'rotateX(50deg) rotateZ(-28deg) skew(17deg) rotateY(3deg)',
     },
     lineType: 1,
   },

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

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%; height: 100%; display: flex; overflow: hidden">
+  <div style="width: 100%; height: 100%; display: flex; overflow: hidden; position: relative">
     <div class="legend-box">
       <template v-for="(item, index) in legend" :key="index">
         <div class="legend-box-item" @click="selectLegend(item, index)">
@@ -18,7 +18,7 @@
     </div>
     <div class="map-box">
       <!-- 温度 -->
-      <div v-if="selectIndex === 0">
+      <div v-if="selectIndex === 1">
         <template v-for="(item, index) in sensorData" :key="index">
           <div
             style="position: absolute"
@@ -76,7 +76,7 @@
         <newTrendModel :dataSource="newTrend" />
       </a-drawer>
       <!-- 空调箱 -->
-      <div v-if="selectIndex === 3">
+      <div v-if="selectIndex === 0">
         <template v-for="(item, index) in conditioningData" :key="index">
           <div
             style="position: absolute; z-index: 2"
@@ -116,6 +116,20 @@
           ref="conditioningModels"
           @selectConditioningData="selectConditioningData" />
       </a-drawer>
+      <div v-if="selectIndex === 0" class="area">
+        <div
+          v-for="(item, index) in airConditioningPosition"
+          :key="index"
+          style="display: flex"
+          :style="{
+            width: item.styleText.width,
+            height: item.styleText.height,
+            background: item.styleText.color,
+            marginLeft: item.styleText.mLeft,
+            marginTop: item.styleText.mTop,
+          }">
+        </div>
+      </div>
       <!-- 空调箱 顶部详情 现阶段没有数据  先隐藏掉 -->
       <transition name="zep">
         <div
@@ -149,19 +163,16 @@
             style="width: 42px; height: 42px; position: absolute; z-index: 1"
             :style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
             src="../image/airConditioningSystem/floorHeatingIcon.png" />
-          <div
-            class="shape"
-            :style="{
-              width: item.styleText.width,
-              height: item.styleText.height,
-              background: item.styleText.color,
-              left: item.styleText.lineLeft,
-              bottom: item.styleText.lineBottom,
-              transform: item.styleText.transform,
-            }">
-          </div>
         </template>
       </div>
+      <div v-if="selectIndex === 4" class="area">
+        <div
+          v-for="(item, index) in floorHeatingData"
+          :key="index"
+          style="display: flex"
+          :style="{ width: item.styleText.width, background: item.styleText.color }">
+        </div>
+      </div>
       <!-- 地暖详情 -->
       <a-drawer
         :visible="selectIndex === 4"
@@ -556,7 +567,7 @@
     clearInterval(intervalId);
   });
 </script>
-<style lang="less">
+<style lang="less" scoped>
   .legend-box {
     width: 80px;
     height: 100%;
@@ -593,47 +604,32 @@
         font-size: 13px;
       }
     }
-    // .legend-box-item {
-    //   border: 1px solid red;
-    //   width: 100%;
-    //   height: 60px;
-    //   padding: 0px 0;
-    //   cursor: pointer;
-    //   .legend-box-item-img {
-    //     border: 2px solid orange;
-    //     width: 100%;
-    //     height: 50px;
-    //     display: flex;
-    //     justify-content: center; /* 水平居中 */
-    //     align-items: center; /* 垂直居中 */
-    //     position: relative;
-    //     background-size: 150% 150%;
-    //     background-repeat: no-repeat;
-    //     img {
-    //       position: absolute;
-    //       transform: scale(1.2);
-    //     }
-    //   }
-    //   .legend-box-item-name {
-    //     width: 100%;
-    //     display: flex;
-    //     justify-content: center; /* 水平居中 */
-    //     align-items: center; /* 垂直居中 */
-    //     color: white;
-    //     font-size: 12px;
-    //   }
-    // }
   }
   .map-box {
+    position: relative;
     width: 95%;
     height: 100%;
-    position: relative;
     background-image: url(../image/floor-1.png);
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    overflow: hidden;
+    border-radius: 0 4px 4px 0;
-    border-radius: 0px 4px 4px 0px;
+    user-select: none;
+    perspective: 1900px;
+    /* 修正 perspective-origin，不能使用像素和负值结合的方式，需要使用百分比或正确的单位 */
+    perspective-origin: 900px 43px;
   }
+
+  .map-box .area {
+    position: absolute;
+    bottom: 230px;
+    left: 250px;
+    width: 1300px;
+    height: 320px;
+    transform: rotateX(62deg) rotateZ(339deg) skew(16deg);
+    display: flex;
+    gap: 2px;
+  }
+
   .newTrendModel {
     overflow-y: auto;
     .anticon {
@@ -685,11 +681,4 @@
       opacity: 0; /* 结束时完全透明 */
     }
   }
-  .shape {
-    background-color: #36d792;
-    transform: rotateX(23deg) rotateZ(-13deg) skew(17deg) rotateY(-7deg);
-    position: absolute;
-    perspective: 900px;
-    perspective-origin: 900px -120px;
-  }
 </style>

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

@@ -100,7 +100,6 @@
   //点击获取详情
   const clickLift = (item: any) => {
     visible.value = true;
-    console.log(item, '获取详细日志');
     selctLeft.value = item;
     setTimeout(() => {
       leftPage.value.toggle(selctLeft.value);