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

<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>
    <!-- PM2.5 -->
    <transition name="zep">
      <div v-if="selectIndex === 2">
        <template v-for="(item, index) in pmData" :key="index">
          <div
            style="position: absolute"
            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
            <singleModel :dataSource="item" />
          </div>
        </template>
      </div>
    </transition>
    <!-- CO2e -->
    <transition name="zep">
      <div v-if="selectIndex === 3">
        <template v-for="(item, index) in CO2Data" :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,
    },
  ]);
  //PM2.5数组
  const pmData = ref([
    {
      title: '多功能传感器A',
      styleText: { left: '48%', bottom: '64%' },
      type: 'pm2.5',
      unit: '',
      number: 20,
      url: PM25,
    },
    {
      title: '多功能传感器B',
      styleText: { left: '48.2%', bottom: '43%' },
      type: 'pm2.5',
      unit: '',
      number: 20,
      url: PM25,
    },
  ]);
  //二氧化碳 浓度
  const CO2Data = ref([
    {
      title: '多功能传感器A',
      styleText: { left: '48%', bottom: '64%' },
      type: '二氧化碳',
      unit: 'CO2e',
      number: 20,
      url: CO2,
    },
    {
      title: '多功能传感器B',
      styleText: { left: '48.2%', bottom: '43%' },
      type: '二氧化碳',
      unit: 'CO2e',
      number: 99,
      url: CO2,
    },
  ]);
  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>