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

<template>
  <div style="width: 100%; height: 100%; display: flex; overflow: hidden">
    <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>
    <div class="map-box">
      <!-- 温度 -->
      <div v-if="selectIndex === 0">
        <template v-for="(item, index) in sensor" :key="index">
          <div
            style="position: absolute"
            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
            <singleModel :dataSource="item" />
          </div>
        </template>
      </div>
      <!-- 人数 -->
      <div v-if="selectIndex === 1">
        <template v-for="(item, index) in peopleData" :key="index">
          <div
            style="position: absolute"
            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
            <singleModel :dataSource="item" />
          </div>
        </template>
      </div>
      <!-- 新风主机 -->
      <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; 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
            style="width: 42px; height: 42px; position: absolute"
            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
            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
          ref="conditioningModels"
          @selectConditioningData="selectConditioningData" />
      </a-drawer>
      <!-- 空调箱 顶部详情 -->
      <transition name="zep">
        <div
          v-if="selectIndex === 3 && selectConditioning && selectConditioning?.title"
          class="newTrend-box">
          <newTreedBox :selectConditioning="selectConditioning" />
        </div>
      </transition>
      <!-- 地暖 -->
      <div v-if="selectIndex === 5">
        <template v-for="(item, index) in floorHeatingData" :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/floorHeatingIcon.png" />
        </template>
      </div>
      <!-- 地暖详情 -->
      <a-drawer
        :visible="selectIndex === 5"
        :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">
        <floorHeatingModel :dataSource="floorHeatingData" />
      </a-drawer>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  /* 图片 */
  import temperature from '../image/airConditioningSystem/temperature.png';
  import people from '../image/airConditioningSystem/people.png';
  import freshAir from '../image/airConditioningSystem/freshAir.png';
  import airConditioner from '../image/airConditioningSystem/airConditioner.png';
  import floorHeating from '../image/airConditioningSystem/floorHeating.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';
  import doubleSingleModel from '../components/doubleSingleModel.vue';
  import newTrendModel from './components/newTrendModel.vue';
  import conditioningModel from './components/conditioningModel.vue';
  import newTreedBox from './components/newTreedBox.vue';
  import floorHeatingModel from './components/floorHeatingModel.vue';

  onMounted(() => {});
  onUnmounted(() => {});
  //图例
  const legend = ref([
    { url: temperature, name: '温度' },
    { url: people, name: '人流' },
    { url: freshAir, name: '新风主机' },
    { url: airConditioner, name: '空调箱' },
    { url: floorHeating, name: '地暖' },
  ]);
  const newTrendModels = ref(null);

  //温度传感器
  const sensor = ref([
    {
      title: 'H区多功能传感器',
      styleText: { left: '28%', bottom: '44%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: sunRed,
    },
    {
      title: 'G区多功能传感器',
      styleText: { left: '35%', bottom: '23%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: sunYellow,
    },
    {
      title: 'F区多功能传感器',
      styleText: { left: '47%', bottom: '31%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: sunRed,
    },
    {
      title: 'E区多功能传感器',
      styleText: { left: '38.5%', bottom: '49%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: sunBlue,
    },
    {
      title: 'D区多功能传感器',
      styleText: { left: '65%', bottom: '43%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: sunRed,
    },
    {
      title: 'C区多功能传感器',
      styleText: { left: '52%', bottom: '55.5%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: sunRed,
    },
    {
      title: 'B区多功能传感器',
      styleText: { left: '76%', bottom: '48%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: sunRed,
    },
    {
      title: 'A区多功能传感器',
      styleText: { left: '63%', bottom: '60%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: sunRed,
    },
  ]);
  //人流
  const peopleData = ref([
    {
      title: 'H区人流传感器',
      styleText: { left: '36%', bottom: '21%' },
      type: '人流',
      unit: '人',
      number: 120,
      url: people,
    },
    {
      title: 'G区人流传感器',
      styleText: { left: '28.5%', bottom: '43.5%' },
      type: '人流',
      unit: '人',
      number: 120,
      url: people,
    },
    {
      title: 'E区人流传感器',
      styleText: { left: '39%', bottom: '48%' },
      type: '人流',
      unit: '人',
      number: 120,
      url: people,
    },
    {
      title: 'F区人流传感器',
      styleText: { left: '47.5%', bottom: '29.5%' },
      type: '人流',
      unit: '人',
      number: 120,
      url: people,
    },
    {
      title: 'D区人流传感器',
      styleText: { left: '66%', bottom: '42%' },
      type: '人流',
      unit: '人',
      number: 120,
      url: people,
    },
    {
      title: 'C区人流传感器',
      styleText: { left: '53%', bottom: '54.5%' },
      type: '人流',
      unit: '人',
      number: 120,
      url: people,
    },
    {
      title: 'B区人流传感器',
      styleText: { left: '77%', bottom: '47%' },
      type: '人流',
      unit: '人',
      number: 120,
      url: people,
    },
    {
      title: 'A区人流传感器',
      styleText: { left: '64%', bottom: '59%' },
      type: '人流',
      unit: '人',
      number: 120,
      url: people,
    },
  ]);
  //新风主机
  const newTrend = ref([
    {
      title: 'D区新风主机',
      styleText: { left: '43%', bottom: '44%' },
      type: '新风主机',
      unit: '℃',
      number: 10,
      url: freshAir,
    },
    {
      title: 'C区新风主机',
      styleText: { left: '45%', bottom: '23%' },
      type: '新风主机',
      number: 20,
      unit: '℃',
    },
    {
      title: 'B区新风主机',
      styleText: { left: '61.5%', bottom: '54%' },
      type: '新风主机',
      unit: '℃',
      number: 20,
      url: freshAir,
    },
    {
      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 conditioningModels = ref(null);
  //选择的空调箱
  const selectConditioning = ref({});
  //子组件 选择空调箱
  const selectConditioningData = (data: any) => {
    selectConditioning.value = {};
    setTimeout(() => {
      selectConditioning.value = { ...data };
    }, 100);
  };
  // 地暖
  const floorHeatingData = ref([
    {
      title: '走廊西地暖',
      styleText: { left: '13.5%', bottom: '34%' },
      type: '地暖',
      unit: '℃',
      number: 10,
      url: freshAir,
    },
    {
      title: '站厅西地暖',
      styleText: { left: '19.5%', bottom: '38.5%' },
      lineType: 1,
      unit: '℃',
      number: 10,
      url: freshAir,
    },
    {
      title: '站厅西地暖',
      styleText: { left: '33%', bottom: '43%' },
      lineType: 1,
      unit: '℃',
      number: 10,
      url: freshAir,
    },
    {
      title: '安检区地暖',
      styleText: { left: '46%', bottom: '49.5%' },
      lineType: 1,
      unit: '℃',
      number: 40,
      url: freshAir,
    },
    {
      title: '站厅东地暖',
      styleText: { left: '57.5%', bottom: '56%' },
      lineType: 1,
      unit: '℃',
      number: 10,
      url: freshAir,
    },
    {
      title: '办公东地暖',
      styleText: { left: '69.5%', bottom: '62%' },
      lineType: 1,
      unit: '℃',
      number: 10,
      url: freshAir,
    },
  ]);
  // 选择的图例
  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);
      } else if (selectIndex.value === 3) {
        if (!selectConditioning.value?.title) {
          selectConditioning.value = { ...conditioningData.value[0] };
        }
        setTimeout(() => {
          conditioningModels.value.toggle(conditioningData.value, selectConditioning.value);
        }, 100);
      }
    }
  };
  const handleClose = () => {
    selectIndex.value = 0;
  };
</script>
<style lang="less">
  .legend-box {
    width: 5%;
    height: 100%;
    background-color: rgba(33, 40, 54, 0.95);
    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;
      }
    }
  }
  .map-box {
    width: 95%;
    height: 100%;
    position: relative;
    background-image: url(../image/bg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    border-radius: 0px 4px 4px 0px;
  }
  .newTrendModel {
    overflow-y: auto;
    .anticon {
      color: white !important;
      margin-left: -10px;
    }
  }
  .newTrend-box {
    width: 990px;
    height: 146px;
    background-color: #282d33;
    position: absolute;
    top: 20px;
    right: 380px;
    border-radius: 12px;
    padding: 12px;
    color: white;
  }
  .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>