add:群控

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

@@ -0,0 +1,198 @@
+<template>
+  <div class="box-ventilationSystem">
+    <div class="legend-box">
+      <template v-for="(item, index) in legend" :key="index">
+        <div
+          class="legend-box-item"
+          :style="{
+            'background-image': selectIndex === index ? 'url(' + selectImg + ')' : '',
+          }"
+          @click="selectLegend(item, index)">
+          <div class="legend-box-item-img">
+            <img style="width: 42px" :src="item.url" />
+          </div>
+          <div class="legend-box-item-name">
+            {{ item.name }}
+          </div>
+        </div>
+      </template>
+    </div>
+    <!-- 温度 -->
+    <transition name="zep">
+      <div v-if="selectIndex === 0">
+        <template v-for="(item, index) in sensorData" :key="index">
+          <div
+            style="position: absolute"
+            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
+            <singleModel :dataSource="item" />
+          </div>
+        </template>
+      </div>
+    </transition>
+    <!-- 湿度 -->
+    <transition name="zep">
+      <div v-if="selectIndex === 1">
+        <template v-for="(item, index) in humidityData" :key="index">
+          <div
+            style="position: absolute"
+            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
+            <singleModel :dataSource="item" />
+          </div>
+        </template>
+      </div>
+    </transition>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted, onUnmounted } from 'vue';
+  //图片
+  import temperature from '../image/airConditioningSystem/temperature.png';
+  import humidity from '../image/ventilationSystem/humidity.png';
+  import PM25 from '../image/ventilationSystem/PM25.png';
+  import CO2 from '../image/ventilationSystem/CO2.png';
+  import ventilatingFan from '../image/ventilationSystem/ventilatingFan.png';
+  import window from '../image/ventilationSystem/window.png';
+  import fanMachine from '../image/ventilationSystem/fanMachine.png';
+  import selectImg from '../image/airConditioningSystem/selectImg.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';
+
+  //图例
+  const legend = ref([
+    { url: temperature, name: '温度' },
+    { url: humidity, name: '湿度' },
+    { url: PM25, name: 'PM2.5' },
+    { url: CO2, name: 'CO2浓度' },
+    { url: ventilatingFan, name: '排风扇' },
+    { url: fanMachine, name: '风幕机' },
+    { url: window, name: '电动窗' },
+  ]);
+  // 选择的图例
+  const selectIndex = ref(0);
+  //选择方法
+  const selectLegend = (item: any, index: any) => {
+    if (selectIndex.value !== index) {
+      selectIndex.value = index;
+    }
+  };
+  //温度数组
+  const sensorData = ref([
+    {
+      title: '多功能传感器A',
+      styleText: { left: '48%', bottom: '64%' },
+      type: '温度',
+      unit: '℃',
+      number: 20,
+      url: sunRed,
+    },
+    {
+      title: '多功能传感器B',
+      styleText: { left: '48.2%', bottom: '43%' },
+      type: '温度',
+      unit: '℃',
+      number: 20,
+      url: sunYellow,
+    },
+  ]);
+  //湿度数组
+  const humidityData = ref([
+    {
+      title: '多功能传感器A',
+      styleText: { left: '48%', bottom: '64%' },
+      type: '湿度',
+      unit: '%',
+      number: 20,
+      url: humidity,
+    },
+    {
+      title: '多功能传感器B',
+      styleText: { left: '48.2%', bottom: '43%' },
+      type: '湿度',
+      unit: '%',
+      number: 20,
+      url: humidity,
+    },
+  ]);
+  onMounted(() => {});
+  onUnmounted(() => {});
+</script>
+<style lang="less">
+  .legend-box {
+    width: 5%;
+    height: 100%;
+    background-color: rgba(33, 40, 54, 0.9);
+    border-radius: 4px 0px 0px 4px;
+    padding: 4px;
+    .legend-box-item {
+      width: 100%;
+      height: 90px;
+      padding: 10px 0;
+      cursor: pointer;
+      background-size: 75%;
+      background-repeat: no-repeat;
+      background-position: center; /* 把图片背景居中 */
+      .legend-box-item-img {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: center; /* 水平居中 */
+        align-items: center; /* 垂直居中 */
+      }
+      .legend-box-item-name {
+        width: 100%;
+        display: flex;
+        justify-content: center; /* 水平居中 */
+        align-items: center; /* 垂直居中 */
+        color: white;
+        font-size: 12px;
+        margin-top: 6px;
+      }
+    }
+  }
+  .box-ventilationSystem {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+    background-image: url('../image/ventilationSystem/ventilationSystemBg.png');
+    background-size: 100% 99.9%;
+    background-repeat: no-repeat;
+    position: relative;
+  }
+  .zep-enter-active,
+  .zep-leave-active {
+    animation-duration: 0.6s; /* 增加动画持续时间 */
+    animation-timing-function: ease-in-out; /* 使用更平滑的动画曲线 */
+  }
+
+  .zep-enter-active {
+    animation-name: bounce-enter;
+  }
+
+  .zep-leave-active {
+    animation-name: bounce-leave;
+  }
+
+  /* 进入动画 */
+  @keyframes bounce-enter {
+    0% {
+      opacity: 0; /* 初始时完全透明 */
+    }
+    100% {
+      opacity: 1; /* 结束时完全不透明 */
+    }
+  }
+
+  /* 离开动画 */
+  @keyframes bounce-leave {
+    0% {
+      opacity: 1; /* 初始时完全不透明 */
+    }
+    100% {
+      opacity: 0; /* 结束时完全透明 */
+    }
+  }
+</style>