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" @click="selectLegend(item, index)">
          <div
            class="legend-box-item-img"
            :style="{
              'background-image': selectIndex === index ? 'url(' + selectImg + ')' : '',
            }">
            <img :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 === 4">
        <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 === 4"
        :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.svg';
  import people from '../image/airConditioningSystem/people.svg';
  import freshAir from '../image/airConditioningSystem/freshAir.svg';
  import airConditioner from '../image/airConditioningSystem/airConditioner.svg';
  import floorHeating from '../image/airConditioningSystem/floorHeating.svg';
  import selectImg from '../image/airConditioningSystem/selectImg.png';
  // 温泉颜色
  import sunRed from '../image/airConditioningSystem/sunRed.png';
  import sunYellow from '../image/airConditioningSystem/sunYellow.png';
  import sunGreen from '../image/airConditioningSystem/sunGreen.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: sunGreen,
    },
    {
      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,
      enableRules: 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,
      setUpNumber: 12,
    },
    {
      title: '站厅西地暖',
      styleText: { left: '19.5%', bottom: '38.5%' },
      type: '地暖',
      lineType: 1,
      unit: '℃',
      number: 10,
      setUpNumber: 14,
    },
    {
      title: '站厅西地暖',
      styleText: { left: '33%', bottom: '43%' },
      type: '地暖',
      lineType: 1,
      unit: '℃',
      number: 24,
      setUpNumber: 16,
    },
    {
      title: '安检区地暖',
      styleText: { left: '46%', bottom: '49.5%' },
      type: '地暖',
      lineType: 1,
      unit: '℃',
      number: 40,
      setUpNumber: 18,
    },
    {
      title: '站厅东地暖',
      styleText: { left: '57.5%', bottom: '56%' },
      type: '地暖',
      lineType: 1,
      unit: '℃',
      number: 10,
      setUpNumber: 20,
    },
    {
      title: '办公东地暖',
      styleText: { left: '69.5%', bottom: '62%' },
      type: '地暖',
      lineType: 1,
      unit: '℃',
      number: 10,
      setUpNumber: 22,
    },
  ]);
  // 选择的图例
  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: 80px;
    height: 100%;
    background-color: rgba(33, 40, 54, 0.95);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px 5px;
    .legend-box-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 70px;
      height: 70px;
      .legend-box-item-img {
        width: 50px;
        height: 60px;
        padding-top: 5px;
        flex: 1;
        cursor: pointer;
        background-size: 100% 100%;
        text-align: center;
        img {
          transition: all ease 0.2s;
        }
        img:hover {
          transform: scale(1.1);
        }
      }
      .legend-box-item-name {
        transform: translateY(-5px);
        text-align: center;
        color: white;
        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 {
    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>