add:新风系统

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

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%; height: 100%; display: flex">
+  <div style="width: 100%; height: 100%; display: flex; overflow: hidden">
     <div class="legend-box">
       <template v-for="(item, index) in legend" :key="index">
         <div
@@ -41,17 +41,20 @@
       <!-- 新风主机 -->
       <div v-if="selectIndex === 2">
         <template v-for="(item, index) in newTrend" :key="index">
+          <div
+            style="position: absolute"
+            :style="{
+              left: 'calc(' + item.styleText.left + ' - 12.9%)',
+              bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
+            }">
+            <doubleSingleModel :dataSource="item" />
+          </div>
           <img
-            style="
-              width: 50px;
-              height: 75px;
-              position: absolute;
-              transform: rotateY(180deg);
-              z-index: 1;
-            "
+            style="width: 50px; height: 75px; position: absolute; z-index: 1"
             :style="{
               left: 'calc(' + item.styleText.left + ' - 1.5%)',
               bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
+              transform: 'rotateY(180deg)',
             }"
             src="../image/liftState/lift/line.png" />
           <img
@@ -60,6 +63,74 @@
             src="../image/airConditioningSystem/fan.png" />
         </template>
       </div>
+      <!-- 新风主机详情 -->
+      <a-drawer
+        :visible="selectIndex === 2"
+        :title="' '"
+        :mask="false"
+        class="newTrendModel"
+        placement="right"
+        headerStyle="background-color:rgba(33, 40, 54, 0.95); border-bottom: 2px solid #454545;"
+        bodyStyle="background-color: rgba(33, 40, 54, 0.95);"
+        @close="handleClose">
+        <newTrendModel :dataSource="newTrend" />
+      </a-drawer>
+      <!-- 空调箱 -->
+      <div v-if="selectIndex === 3">
+        <template v-for="(item, index) in conditioningData" :key="index">
+          <div
+            style="position: absolute"
+            :style="{
+              left:
+                'calc(' + item.styleText.left + (item.lineType === 1 ? ' - 12.9%)' : ' - 13.3%)'),
+              bottom:
+                'calc(' + item.styleText.bottom + (item.lineType === 1 ? ' + 8%)' : ' - 14%)'),
+            }">
+            <doubleSingleModel :dataSource="item" />
+          </div>
+          <img
+            style="width: 50px; height: 75px; position: absolute; z-index: 1"
+            :style="{
+              left: 'calc(' + item.styleText.left + (item.lineType === 1 ? ' - 1.5%)' : ' - 2%)'),
+              bottom: 'calc(' + item.styleText.bottom + (item.lineType === 1 ? ' + 4%)' : ' - 9%)'),
+              transform: item.lineType === 1 ? 'rotateY(180deg)' : 'rotate(180deg)',
+            }"
+            src="../image/liftState/lift/line.png" />
+          <img
+            style="width: 42px; height: 42px; position: absolute"
+            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
+            src="../image/airConditioningSystem/conditioningIcon.png" />
+        </template>
+      </div>
+      <!-- 空调箱详情 -->
+      <a-drawer
+        :visible="selectIndex === 3"
+        :title="' '"
+        :mask="false"
+        class="newTrendModel"
+        placement="right"
+        headerStyle="background-color:rgba(33, 40, 54, 0.95); border-bottom: 2px solid #454545;"
+        bodyStyle="background-color: rgba(33, 40, 54, 0.95);"
+        @close="handleClose">
+        <conditioningModel :dataSource="newTrend" />
+      </a-drawer>
+      <!-- 空调箱 顶部详情 -->
+      <div
+        v-if="selectIndex === 3"
+        style="
+          width: 974px;
+          height: 146px;
+          background-color: #282d33;
+          display: flex;
+          position: absolute;
+          top: 20px;
+          right: 380px;
+          border-radius: 12px;
+          padding: 12px;
+          color: white;
+        ">
+        {{ selectConditioning.title }}
+      </div>
     </div>
   </div>
 </template>
@@ -72,9 +143,19 @@
   import airConditioner from '../image/airConditioningSystem/airConditioner.png';
   import floorHeating from '../image/airConditioningSystem/floorHeating.png';
   import selectImg from '../image/airConditioningSystem/selectImg.png';
-  import temperatureBox from '../image/airConditioningSystem/temperature-box.png';
+  // 温泉颜色
+  import sunRed from '../image/airConditioningSystem/sunRed.png';
+  import sunYellow from '../image/airConditioningSystem/sunYellow.png';
+  import sunBlue from '../image/airConditioningSystem/sunBlue.png';
 
   import singleModel from '../components/singleModel.vue';
+  import doubleSingleModel from '../components/doubleSingleModel.vue';
+  import newTrendModel from './components/newTrendModel.vue';
+  import conditioningModel from './components/conditioningModel.vue';
+  onMounted(() => {
+    selectConditioning.value = conditioningData.value[0];
+  });
+  onUnmounted(() => {});
   //图例
   const legend = ref([
     { url: temperature, name: '温度' },
@@ -83,6 +164,8 @@
     { url: airConditioner, name: '空调箱' },
     { url: floorHeating, name: '地暖' },
   ]);
+  const newTrendModels = ref(null);
+
   //温度传感器
   const sensor = ref([
     {
@@ -91,7 +174,7 @@
       type: '温度',
       unit: '℃',
       number: 20,
-      url: temperatureBox,
+      url: sunRed,
     },
     {
       title: 'G区多功能传感器',
@@ -99,7 +182,7 @@
       type: '温度',
       unit: '℃',
       number: 20,
-      url: temperatureBox,
+      url: sunYellow,
     },
     {
       title: 'F区多功能传感器',
@@ -107,7 +190,7 @@
       type: '温度',
       unit: '℃',
       number: 20,
-      url: temperatureBox,
+      url: sunRed,
     },
     {
       title: 'E区多功能传感器',
@@ -115,7 +198,7 @@
       type: '温度',
       unit: '℃',
       number: 20,
-      url: temperatureBox,
+      url: sunBlue,
     },
     {
       title: 'D区多功能传感器',
@@ -123,7 +206,7 @@
       type: '温度',
       unit: '℃',
       number: 20,
-      url: temperatureBox,
+      url: sunRed,
     },
     {
       title: 'C区多功能传感器',
@@ -131,7 +214,7 @@
       type: '温度',
       unit: '℃',
       number: 20,
-      url: temperatureBox,
+      url: sunRed,
     },
     {
       title: 'B区多功能传感器',
@@ -139,7 +222,7 @@
       type: '温度',
       unit: '℃',
       number: 20,
-      url: temperatureBox,
+      url: sunRed,
     },
     {
       title: 'A区多功能传感器',
@@ -147,7 +230,7 @@
       type: '温度',
       unit: '℃',
       number: 20,
-      url: temperatureBox,
+      url: sunRed,
     },
   ]);
   //人流
@@ -224,17 +307,18 @@
       styleText: { left: '43%', bottom: '44%' },
       type: '新风主机',
       unit: '℃',
-      number: 20,
+      number: 10,
       url: freshAir,
     },
     {
       title: 'C区新风主机',
       styleText: { left: '45%', bottom: '23%' },
       type: '新风主机',
+      number: 20,
       unit: '℃',
     },
     {
-      title: 'background-size区新风主机',
+      title: 'B区新风主机',
       styleText: { left: '61.5%', bottom: '54%' },
       type: '新风主机',
       unit: '℃',
@@ -245,22 +329,99 @@
       title: 'A区新风主机',
       styleText: { left: '63%', bottom: '36%' },
       type: '新风主机',
+      number: 30,
       unit: '℃',
     },
   ]);
+  //空调箱
+  const conditioningData = ref([
+    {
+      title: '走廊区',
+      styleText: { left: '13%', bottom: '23%' },
+      type: '空调箱',
+      lineType: 1,
+      unit: '℃',
+      number: 20,
+      url: freshAir,
+    },
+    {
+      title: '西区',
+      styleText: { left: '28%', bottom: '30%' },
+      type: '空调箱',
+      lineType: 1,
+      unit: '℃',
+      number: 34,
+      url: freshAir,
+    },
+    {
+      title: '西北区',
+      styleText: { left: '38%', bottom: '45.5%' },
+      type: '空调箱',
+      lineType: 1,
+      unit: '℃',
+      number: 34,
+      url: freshAir,
+    },
+    {
+      title: '东北区',
+      styleText: { left: '57%', bottom: '53%' },
+      lineType: 1,
+      type: '空调箱',
+      unit: '℃',
+      number: 34,
+      url: freshAir,
+    },
+    {
+      title: '东区',
+      styleText: { left: '73%', bottom: '53%' },
+      lineType: 1,
+      type: '空调箱',
+      unit: '℃',
+      number: 34,
+      url: freshAir,
+    },
+    {
+      title: '东南区',
+      styleText: { left: '68%', bottom: '38%' },
+      lineType: 2,
+      type: '空调箱',
+      unit: '℃',
+      number: 15,
+      url: freshAir,
+    },
+    {
+      title: '西南区',
+      styleText: { left: '43.5%', bottom: '22%' },
+      lineType: 2,
+      type: '空调箱',
+      unit: '℃',
+      number: 15,
+      url: freshAir,
+    },
+  ]);
+  //选择的空调箱
+  const selectConditioning = ref({});
   // 选择的图例
   const selectIndex = ref(0);
   const selectLegend = (item: any, index: any) => {
     if (selectIndex.value !== index) {
       selectIndex.value = index;
     }
+    if (selectIndex.value === 2) {
+      setTimeout(() => {
+        newTrendModels.value.toggle(newTrend);
+      }, 100);
+    }
+  };
+  const handleClose = () => {
+    selectIndex.value = 0;
   };
 </script>
-<style lang="less" scoped>
+<style lang="less">
   .legend-box {
     width: 5%;
     height: 100%;
-    background-color: rgba(40, 45, 51, 1);
+    background-color: rgba(33, 40, 54, 0.95);
     border-radius: 4px 0px 0px 4px;
     padding: 4px;
     .legend-box-item {
@@ -299,4 +460,11 @@
     overflow: hidden;
     border-radius: 0px 4px 4px 0px;
   }
+  .newTrendModel {
+    overflow-y: auto;
+    .anticon {
+      color: white !important;
+      margin-left: -10px;
+    }
+  }
 </style>