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

<template>
  <div style="width: 100%; height: 100%; display: flex">
    <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>
  </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 temperatureBox from '../image/airConditioningSystem/temperature-box.png';

  import singleModel from '../components/singleModel.vue';
  //图例
  const legend = ref([
    { url: temperature, name: '温度' },
    { url: people, name: '人流' },
    { url: freshAir, name: '新风主机' },
    { url: airConditioner, name: '空调箱' },
    { url: floorHeating, name: '地暖' },
  ]);
  //温度传感器
  const sensor = ref([
    {
      title: 'H区多功能传感器',
      styleText: { left: '28%', bottom: '44%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: temperatureBox,
    },
    {
      title: 'G区多功能传感器',
      styleText: { left: '35%', bottom: '23%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: temperatureBox,
    },
    {
      title: 'F区多功能传感器',
      styleText: { left: '47%', bottom: '31%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: temperatureBox,
    },
    {
      title: 'E区多功能传感器',
      styleText: { left: '38.5%', bottom: '49%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: temperatureBox,
    },
    {
      title: 'D区多功能传感器',
      styleText: { left: '65%', bottom: '43%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: temperatureBox,
    },
    {
      title: 'C区多功能传感器',
      styleText: { left: '52%', bottom: '55.5%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: temperatureBox,
    },
    {
      title: 'B区多功能传感器',
      styleText: { left: '76%', bottom: '48%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: temperatureBox,
    },
    {
      title: 'A区多功能传感器',
      styleText: { left: '63%', bottom: '60%' },
      type: '温度',
      unit: '℃',
      number: 20,
      url: temperatureBox,
    },
  ]);
  //人流
  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 selectIndex = ref(0);
  const selectLegend = (item: any, index: any) => {
    if (selectIndex.value !== index) {
      selectIndex.value = index;
    }
  };
</script>
<style lang="less" scoped>
  .legend-box {
    width: 5%;
    height: 100%;
    background-color: rgba(40, 45, 51, 1);
    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;
  }
</style>