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

<template>
  <div class="box-cold">
    <!-- 空气源热泵 -->
    <template v-for="(item, index) in airSourceThermalCollapse" :key="index">
      <div
        style="
          width: 135px;
          height: 200px;
          position: relative;
          font-size: 12px;
          position: absolute;
          color: #ffff80;
          z-index: 2;
        "
        :style="{ left: item?.style?.mLeft, bottom: item?.style?.mBottom }">
        <div style="width: 100%; height: 20px; color: rgb(128, 255, 255)">
          {{ item.deviceInfoName }}
        </div>
        <div v-if="item.autoStatus" style="width: 100%; height: 20px">
          模式: <span style="color: #fff">{{ item?.autoStatus?.label }}</span>
        </div>
        <div v-if="item.temp" style="width: 100%; height: 20px">
          设定温度: <span style="color: #fff">{{ item.temp }} {{ item.tempUnit }}</span>
        </div>
        <img
          style="position: absolute; width: 135px; height: 130px; left: -20px; top: 40px"
          :src="item.url" />
      </div>
    </template>
    <!-- 空气源 - 传感器 -->
    <template v-for="(item, index) in airSourceSensor" :key="index">
      <div
        style="
          width: 135px;
          height: 200px;
          position: relative;
          font-size: 12px;
          position: absolute;
          color: #ffff80;
          z-index: 2;
        "
        :style="{ left: item?.style?.mLeft, bottom: item?.style?.mBottom }">
        <div style="width: 100%; height: 20px">
          出水温度: <span style="color: #fff">{{ item.temp }} {{ item.tempUnit }}</span>
        </div>
        <div style="width: 100%; height: 20px">
          流量: <span style="color: #fff">{{ item.traffic }} {{ item.trafficUnit }}</span>
        </div>
        <img
          style="position: absolute; width: 28px; height: 28px; left: -20px; top: 40px"
          :src="item.url" />
      </div>
    </template>
    <!-- 水泵 -->
    <div
      style="
        width: 111px;
        height: 110px;
        position: relative;
        left: 1%;
        bottom: 50%;
        position: absolute;
      ">
      <!-- <a-switch
        :checked="selectAllCheckbox === 1 ? true : false"
        size="small"
        :disabled="true"
        style="top: 20px; left: -10px; position: absolute"
        :class="{
          'blue-background': selectAllCheckbox === 1 ? true : false,
          'grey-background': selectAllCheckbox === 1 ? false : true,
        }"
        @change="toggleAllSelection" /> -->
      <img style="display: flex; width: 111px; height: 100px" :src="waterPumpSrc" />
      <div style="width: 100%; height: 20px; color: rgb(128, 255, 255)"> 水泵 </div>
    </div>
    <!-- 水泵 传感器 -->
    <template v-for="(item, index) in waterSensor" :key="index">
      <div
        style="
          width: 135px;
          height: 200px;
          position: relative;
          font-size: 12px;
          position: absolute;
          color: #ffff80;
          z-index: 2;
        "
        :style="{ left: item?.style.mLeft, bottom: item?.style.mBottom }">
        <div style="width: 100%; height: 20px">
          温度: <span style="color: #fff">{{ item.temp }} {{ item.tempUnit }}</span>
        </div>
        <div style="width: 100%; height: 20px">
          流量: <span style="color: #fff">{{ item.traffic }} {{ item.trafficUnit }}</span>
        </div>
        <img
          style="position: absolute; width: 28px; height: 28px; left: -20px; top: 40px"
          :src="item.url" />
      </div>
    </template>
    <!-- 螺杆式地源热泵 -->
    <template v-for="(item, index) in screwGeothermalHeatPump" :key="index">
      <div
        style="
          width: 101.21px;
          height: 101.21px;
          position: relative;
          font-size: 12px;
          position: absolute;
          color: #ffff80;
          z-index: 2;
        "
        :style="{ left: item?.style?.mLeft, bottom: item?.style?.mBottom }">
        <img
          style="position: absolute; width: 101.21px; height: 101.21px; left: 42%; top: -80%"
          :src="item.url" />
        <div style="width: 100%; height: 20px; color: rgb(128, 255, 255); z-index: 2">
          {{ item.deviceInfoName }}
        </div>
        <div v-if="item.autoStatus" style="width: 100%; height: 20px">
          模式: <span style="color: #fff">{{ item?.autoStatus?.label }}</span>
        </div>
        <div v-if="item.temp" style="width: 100%; height: 20px">
          设定温度: <span style="color: #fff">{{ item.temp }} {{ item.tempUnit }}</span>
        </div>
      </div>
    </template>
    <!-- 稀冷泵 -->
    <template v-for="(item, index) in diluteCoolingPump" :key="index">
      <div
        style="
          width: 135px;
          height: 200px;
          position: relative;
          font-size: 12px;
          position: absolute;
          color: #ffff80;
          z-index: 2;
        "
        :style="{ left: item?.style?.mLeft, bottom: item?.style?.mBottom }">
        <div
          style="
            width: 100%;
            height: 20px;
            color: rgb(128, 255, 255);
            position: absolute;
            top: 40px;
            left: 5px;
          ">
          {{ item.deviceInfoName }}
        </div>
        <img
          style="position: absolute; width: 117.42px; height: 106.31px; left: -20px; top: 60px"
          :src="item.url" />
      </div>
    </template>
    <!-- 冷热水双蓄储能罐 -->
    <template v-for="(item, index) in coldWater" :key="index">
      <div
        style="
          width: 110px;
          height: 110px;
          position: relative;
          font-size: 12px;
          position: absolute;
          color: #ffff80;
          z-index: 2;
        "
        :style="{ left: item?.style?.mLeft, bottom: item?.style?.mBottom }">
        <div style="width: 100%; height: 20px; color: rgb(128, 255, 255); margin-top: 20px">
          {{ item.deviceInfoName }}
        </div>
        <div v-if="item.temp" style="width: 100%; height: 20px">
          出水温度: <span style="color: #fff">{{ item.temp }} {{ item.tempUnit }}</span>
        </div>
        <div v-if="item.temp" style="width: 100%; height: 20px">
          容量: <span style="color: #fff">{{ item.vol }} {{ item.volUnit }}</span>
        </div>
        <img
          style="position: absolute; width: 110px; height: 110px; left: -20px; top: 80px"
          :src="item.url" />
      </div>
    </template>
    <!-- 用户水泵 -->
    <template v-for="(item, index) in userWaterPump" :key="index">
      <div
        style="
          width: 70.85px;
          height: 70.85px;
          position: relative;
          font-size: 12px;
          position: absolute;
        "
        :style="{ left: item?.style?.mLeft, bottom: item?.style?.mBottom }">
        <a-switch
          v-if="item.switchStatus"
          :checked="item?.switchStatus?.value === 1 ? true : false"
          size="small"
          :disabled="true"
          style="position: absolute; left: 30px; bottom: 0px; z-index: 2"
          :class="{
            'blue-background': item?.switchStatus?.value === 1 ? true : false,
            'grey-background': item?.switchStatus?.value === 1 ? false : true,
          }" />
        <img
          style="
            display: flex;
            width: 70.85px;
            height: 70.85px;
            transform: rotateX(-4deg) rotateY(180deg) rotateZ(1deg);
          "
          :src="waterPumpSrc" />
        <div
          style="
            color: rgb(128, 255, 255);
            font-size: 12px;
            position: absolute;
            left: -40px;
            top: 40px;
          "
          >{{ item.deviceInfoName }}</div
        >
      </div>
    </template>
    <!-- 集水器 -->
    <div
      style="
        width: 226.19px;
        height: 186.19px;
        position: relative;
        font-size: 12px;
        position: absolute;
        left: 66%;
        bottom: 54%;
        z-index: 2;
      ">
      <div style="position: absolute; left: 24%; color: rgb(128, 255, 255)">集水器</div>
      <img
        style="width: 226.19px; height: 176.19px; transform: rotateY(13deg)"
        :src="manifoldSrc" />
    </div>
    <!-- 集水器 传感器 -->
    <template v-for="(item, index) in manifoldSensor" :key="index">
      <div
        style="
          width: 135px;
          height: 200px;
          position: relative;
          font-size: 12px;
          position: absolute;
          color: #ffff80;
          z-index: 2;
        "
        :style="{ left: item?.style?.mLeft, bottom: item?.style?.mBottom }">
        <div style="width: 100%; height: 20px">
          回水温度: <span style="color: #fff">{{ item.temp }} {{ item.tempUnit }}</span>
        </div>
        <div style="width: 100%; height: 20px">
          流量: <span style="color: #fff">{{ item.traffic }} {{ item.trafficUnit }}</span>
        </div>
        <img
          style="
            position: absolute;
            width: 28px;
            height: 28px;
            left: -20px;
            top: 40px;
            transform: rotateX(-4deg) rotateY(180deg) rotateZ(1deg);
          "
          :src="item.url" />
      </div>
    </template>
    <!-- 定压补水装置 -->
    <template v-for="(item, index) in pressureWater" :key="index">
      <div
        style="width: 137px; height: 137px; position: relative; position: absolute; z-index: 2"
        :style="{ left: item?.style?.mLeft, bottom: item?.style?.mBottom }">
        <img style="width: 137px; height: 127px; transform: rotateY(157deg)" :src="item.url" />
        <div
          style="
            width: 100%;
            height: 40px;
            color: rgb(128, 255, 255);
            position: absolute;
            bottom: -40px;
            font-size: 12px;
          ">
          <div> {{ item.deviceInfoName }}</div>
        </div>
      </div>
    </template>
    <!-- 软化水箱 -->
    <div
      style="
        width: 110px;
        height: 110px;
        position: relative;
        position: absolute;
        left: 40%;
        bottom: 2%;
        z-index: 2;
      ">
      <img
        style="
          width: 110px;
          height: 110px;
          transform: rotateX(3deg) rotateY(157deg) rotateZ(356deg);
        "
        :src="softenedWaterTankSrc" />
      <div style="color: rgb(128, 255, 255); font-size: 12px; position: absolute; bottom: -10px"
        >软化水箱</div
      >
    </div>
    <!-- 软化水装置 -->
    <div
      style="
        width: 110px;
        height: 110px;
        position: relative;
        position: absolute;
        left: 47%;
        bottom: 11%;
        z-index: 2;
      ">
      <img style="width: 110px; height: 110px" :src="coldWaterSrc" />
      <div style="color: rgb(128, 255, 255); font-size: 12px; position: absolute; left: 20px"
        >软化水装置</div
      >
    </div>
    <!-- 循环水处理器 -->
    <div
      style="
        width: 116.39px;
        height: 116.39px;
        position: relative;
        position: absolute;
        left: 54%;
        bottom: 15%;
        font-size: 12px;
        z-index: 2;
      ">
      <img
        style="
          width: 116.39px;
          height: 116.39px;
          transform: rotateX(3deg) rotateY(157deg) rotateZ(356deg);
        "
        :src="waterProcessorSrc" />
      <div style="position: absolute; left: 24%; color: rgb(128, 255, 255)">循环水处理器</div>
    </div>
    <!-- 地源水泵 -->
    <template v-for="(item, index) in waterPump" :key="index">
      <div
        style="
          width: 70.85px;
          height: 70.85px;
          position: relative;
          font-size: 12px;
          position: absolute;
        "
        :style="{ left: item?.style?.mLeft, bottom: item?.style?.mBottom }">
        <a-switch
          v-if="item.switchStatus"
          :checked="item?.switchStatus?.value === 1 ? true : false"
          size="small"
          :disabled="true"
          style="position: absolute; left: 30px; bottom: 0px; z-index: 2"
          :class="{
            'blue-background': item?.switchStatus?.value === 1 ? true : false,
            'grey-background': item?.switchStatus?.value === 1 ? false : true,
          }" />
        <img
          style="
            display: flex;
            width: 70.85px;
            height: 70.85px;
            transform: rotateX(-4deg) rotateY(180deg) rotateZ(1deg);
          "
          :src="waterPumpSrc" />
        <div
          style="
            color: rgb(128, 255, 255);
            font-size: 12px;
            position: absolute;
            left: -40px;
            top: 30px;
          "
          >{{ item.deviceInfoName }}</div
        >
      </div>
    </template>
    <!-- 分水器 -->
    <div
      style="
        width: 216.19px;
        height: 186.19px;
        position: relative;
        font-size: 12px;
        position: absolute;
        left: 80%;
        bottom: 38%;
        z-index: 2;
      ">
      <div style="position: absolute; left: 24%; color: rgb(128, 255, 255)">分水器</div>
      <img
        style="width: 226.19px; height: 176.19px; transform: rotateY(13deg)"
        :src="manifoldSrc" />
    </div>
    <!-- 土壤耦合器 -->
    <div
      style="
        width: 290.75px;
        height: 215.29px;
        position: relative;
        font-size: 12px;
        position: absolute;
        left: 77%;
        bottom: 6.5%;
      ">
      <div style="position: absolute; left: 60%; color: rgb(128, 255, 255); bottom: 5%"
        >土壤耦合器</div
      >
      <img style="width: 290.75px; height: 215.29px" :src="soilCouplerSrc" />
    </div>
    <!-- 土壤 传感器 -->
    <template v-for="(item, index) in soilCouplerSensor" :key="index">
      <div
        style="
          width: 135px;
          height: 80px;
          position: relative;
          font-size: 12px;
          position: absolute;
          color: #ffff80;
          z-index: 2;
        "
        :style="{ left: item?.style?.mLeft, bottom: item?.style?.mBottom }">
        <div style="width: 100%; height: 20px">
          供水温度: <span style="color: #fff">{{ item.temp }} {{ item.tempUnit }}</span>
        </div>
        <div style="width: 100%; height: 20px">
          流量: <span style="color: #fff">{{ item.traffic }} {{ item.trafficUnit }}</span>
        </div>
        <img
          style="position: absolute; width: 28px; height: 28px; left: -20px; top: 40px"
          :src="item.url" />
      </div>
    </template>
    <!-- 线 -->
    <template v-for="(item, index) in line" :key="index">
      <div
        style="height: 12px; position: absolute; border-radius: 4px"
        :style="{
          'background-image': 'url(' + item.url + ')',
          left: item?.style?.mLeft,
          width: item.style.width,
          bottom: item?.style?.mBottom,
          transform: item.style.transform,
          'z-index': item.style.zIndex,
        }">
      </div>
    </template>
    <!-- 箭头 -->
    <template v-for="(item, index) in arrow" :key="index">
      <div
        style="width: 50px; height: 20px; position: absolute"
        :style="{
          left: item?.style?.mLeft,
          bottom: item?.style?.mBottom,
          transform: item.style.transform,
        }">
        <img style="width: 50px; height: 20px" :src="item.url" />
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  import { http } from '/nerv-lib/util';
  import { coldAndHeatSourcesApi } from '/@/api/coldAndHeatSources';
  import { ventilating } from '/@/api/ventilatingSystem';

  //图片资源
  import airSourceThermalCollapseSrc from '../image/coldAndHeatSources/airSourceThermalCollapse.png';
  import waterPumpSrc from '../image/coldAndHeatSources/waterPump.png';
  import screwGeothermalHeatPumpSrc from '../image/coldAndHeatSources/screwGeothermalHeatPump.png';
  import diluteCoolingPumpSrc from '../image/coldAndHeatSources/diluteCoolingPump.png';
  import coldWaterSrc from '../image/coldAndHeatSources/coldWater.png';
  import manifoldSrc from '../image/coldAndHeatSources/manifold.png';
  import pressureWaterSrc from '../image/coldAndHeatSources/pressureWater.png';
  import softenedWaterTankSrc from '../image/coldAndHeatSources/softenedWaterTank.png';
  import waterProcessorSrc from '../image/coldAndHeatSources/waterProcessor.png';
  import soilCouplerSrc from '../image/coldAndHeatSources/soilCoupler.png';
  import sensorSrc from '../image/coldAndHeatSources/sensor.png';
  import blueGif from '../image/coldAndHeatSources/blue.gif';
  import bluePng from '../image/coldAndHeatSources/blue.png';
  import greenGif from '../image/coldAndHeatSources/green.gif';
  import greenPng from '../image/coldAndHeatSources/green.png';
  import arrowSrc from '../image/coldAndHeatSources/arrow.svg';
  // 定位数据
  import {
    userWaterPumpPosition,
    waterPumpPosition,
    airSourceThermalCollapsePosition,
    screwGeothermalHeatPumpPosition,
    airSourceSensorPosition,
  } from './position';
  // 全局变量
  import { items } from '/@/store/item';
  // 全局变量
  const state = items();
  const line = ref([
    //水泵线-热泵
    {
      url: bluePng,
      style: {
        width: '36%',
        mLeft: '1%',
        mBottom: '77%',
        transform: 'rotateZ(-23deg)',
      },
    },
    {
      url: bluePng,
      style: {
        width: '35%',
        mLeft: '15%',
        mBottom: '56%',
        transform: 'rotateZ(-23deg) rotateY(180deg)',
      },
    },
    {
      url: bluePng,
      style: {
        width: '16.5%',
        mLeft: '13%',
        mBottom: '62.5%',
        transform: 'rotateZ(-144deg) rotateY(180deg)',
      },
    },
    {
      url: bluePng,
      style: {
        width: '16.5%',
        mLeft: '19%',
        mBottom: '67.5%',
        transform: 'rotateZ(-144deg) rotateY(180deg)',
      },
    },
    {
      url: bluePng,
      style: {
        width: '16.5%',
        mLeft: '25%',
        mBottom: '73.5%',
        transform: 'rotateZ(-144deg) rotateY(180deg)',
      },
    },
    {
      url: bluePng,
      style: {
        width: '16.5%',
        mLeft: '33.5%',
        mBottom: '81.5%',
        transform: 'rotateZ(-144deg) rotateY(180deg)',
      },
    },
    //水泵 - 定压补水
    {
      url: bluePng,
      style: {
        width: '41%',
        mLeft: '3%',
        mBottom: '27.5%',
        transform: 'rotateZ(213deg) rotateY(180deg)',
      },
    },
    // 线 - 稀冷泵
    {
      url: bluePng,
      style: {
        width: '9%',
        mLeft: '23.5%',
        mBottom: '31%',
        transform: 'rotateZ(-23deg) rotateY(180deg)',
      },
    },
    //热泵 - 冷热水双蓄储能罐
    {
      url: bluePng,
      style: {
        width: '12.5%',
        mLeft: '25.5%',
        mBottom: '37%',
        transform: 'rotateZ(213deg) rotateY(180deg)',
      },
    },
    //冷热水双蓄储能罐 - 用户水泵
    {
      url: greenPng,
      style: {
        width: '10%',
        mLeft: '47%',
        mBottom: '47.8%',
        transform: 'rotateZ(203deg)',
      },
    },
    {
      url: greenPng,
      style: {
        width: '20%',
        mLeft: '37%',
        mBottom: '41.5%',
        transform: 'rotateZ(-28deg)',
      },
    },
    {
      url: greenPng,
      style: {
        width: '4%',
        mLeft: '47%',
        mBottom: '54%',
        transform: 'rotateZ(-28deg)',
      },
    },
    {
      url: greenPng,
      style: {
        width: '4%',
        mLeft: '56%',
        mBottom: '46%',
        transform: 'rotateZ(-28deg)',
      },
    },
    //第二段线
    {
      url: greenPng,
      style: {
        width: '17.5%',
        mLeft: '53%',
        mBottom: '70%',
        transform: 'rotateZ(-28deg)',
        zIndex: 3,
      },
    },
    {
      url: greenPng,
      style: {
        width: '2%',
        mLeft: '68.2%',
        mBottom: '77%',
        transform: 'rotateZ(-28deg) rotatez(-63deg)',
        zIndex: 3,
      },
    },

    {
      url: greenPng,
      style: {
        width: '16.5%',
        mLeft: '57.9%',
        mBottom: '65%',
        transform: 'rotateZ(-28deg)',
        zIndex: 3,
      },
    },
    {
      url: greenPng,
      style: {
        width: '1%',
        mLeft: '72.8%',
        mBottom: '72%',
        transform: 'rotateZ(-28deg) rotatez(-63deg)',
        zIndex: 3,
      },
    },
    {
      url: greenPng,
      style: {
        width: '15%',
        mLeft: '62%',
        mBottom: '60.3%',
        transform: 'rotateZ(-28deg)',
        zIndex: 3,
      },
    },
    {
      url: greenPng,
      style: {
        width: '1%',
        mLeft: '75%',
        mBottom: '68%',
        transform: 'rotateZ(-28deg) rotatez(-63deg)',
        zIndex: 3,
      },
    },
    //软水箱 - 地源水泵
    {
      url: bluePng,
      style: {
        width: '34.5%',
        mLeft: '38.5%',
        mBottom: '20%',
        transform: 'rotateZ(-27deg)',
      },
    },
    {
      url: bluePng,
      style: {
        width: '4%',
        mLeft: '62%',
        mBottom: '40%',
        transform: 'rotateZ(-28deg)',
      },
    },
    {
      url: bluePng,
      style: {
        width: '4%',
        mLeft: '72%',
        mBottom: '30%',
        transform: 'rotateZ(-28deg)',
      },
    },
    {
      url: bluePng,
      style: {
        width: '11.5%',
        mLeft: '62%',
        mBottom: '33%',
        transform: 'rotateZ(203deg)',
      },
    },
    //第二段线
    {
      url: bluePng,
      style: {
        width: '16.5%',
        mLeft: '68%',
        mBottom: '55%',
        transform: 'rotateZ(-28deg)',
        zIndex: 3,
      },
    },
    {
      url: bluePng,
      style: {
        width: '2.5%',
        mLeft: '82%',
        mBottom: '61.3%',
        transform: 'rotateZ(-28deg) rotatez(-63deg)',
        zIndex: 3,
      },
    },
    {
      url: bluePng,
      style: {
        width: '15.5%',
        mLeft: '73%',
        mBottom: '49.5%',
        transform: 'rotateZ(-28deg)',
        zIndex: 3,
      },
    },
    {
      url: bluePng,
      style: {
        width: '1.5%',
        mLeft: '86.5%',
        mBottom: '56.3%',
        transform: 'rotateZ(-28deg) rotatez(-63deg)',
        zIndex: 3,
      },
    },
    {
      url: bluePng,
      style: {
        width: '13%',
        mLeft: '78%',
        mBottom: '44.5%',
        transform: 'rotateZ(-32deg)',
        zIndex: 3,
      },
    },
    {
      url: bluePng,
      style: {
        width: '1%',
        mLeft: '89%',
        mBottom: '52.3%',
        transform: 'rotateZ(-28deg) rotatez(-63deg)',
        zIndex: 3,
      },
    },
    //回温水线段
    {
      url: greenPng,
      style: {
        width: '2.5%',
        mLeft: '71.5%',
        mBottom: '61.5%',
        transform: 'rotateZ(-28deg) rotatez(-63deg)',
      },
    },
    {
      url: greenPng,
      style: {
        width: '11.5%',
        mLeft: '72%',
        mBottom: '65%',
        transform: 'rotateZ(-28deg)',
      },
    },
    {
      url: greenPng,
      style: {
        width: '22%',
        mLeft: '80.5%',
        mBottom: '58%',
        transform: 'rotateZ(213deg) rotateY(180deg)',
      },
    },
    {
      url: greenPng,
      style: {
        width: '9.5%',
        mLeft: '91.3%',
        mBottom: '36.7%',
        transform: 'rotateZ(-28deg)',
      },
    },
    //供水水线段
    {
      url: bluePng,
      style: {
        width: '2.5%',
        mLeft: '85.5%',
        mBottom: '44.5%',
        transform: 'rotateZ(-28deg) rotatez(-63deg)',
      },
    },
    {
      url: bluePng,
      style: {
        width: '8%',
        mLeft: '86%',
        mBottom: '46%',
        transform: 'rotateZ(-28deg)',
      },
    },
    {
      url: bluePng,
      style: {
        width: '5%',
        mLeft: '92.5%',
        mBottom: '47%',
        transform: 'rotateZ(213deg) rotateY(180deg)',
      },
    },
    {
      url: bluePng,
      style: {
        width: '23%',
        mLeft: '75.5%',
        mBottom: '32.5%',
        transform: 'rotateZ(-28deg)',
      },
    },
    {
      url: bluePng,
      style: {
        width: '7%',
        mLeft: '76%',
        mBottom: '17%',
        transform: 'rotateZ(213deg) rotateY(180deg)',
      },
    },
  ]);
  const airSourceThermalCollapse = ref([
    {
      style: {
        mLeft: '17%',
        mBottom: '54%',
      },
      url: airSourceThermalCollapseSrc,
    },
    {
      style: {
        mLeft: '24%',
        mBottom: '59%',
      },
      url: airSourceThermalCollapseSrc,
    },
    {
      style: {
        mLeft: '31%',
        mBottom: '66%',
      },
      url: airSourceThermalCollapseSrc,
    },
    {
      style: {
        mLeft: '38%',
        mBottom: '73%',
      },
      url: airSourceThermalCollapseSrc,
    },
  ]);
  //螺杆式地源热泵
  const screwGeothermalHeatPump = ref([
    {
      style: {
        mLeft: '9.5%',
        mBottom: '22.5%',
      },
      url: screwGeothermalHeatPumpSrc,
    },
    {
      style: {
        mLeft: '18.5%',
        mBottom: '31.5%',
      },
      url: screwGeothermalHeatPumpSrc,
    },
  ]);
  //稀冷泵
  const diluteCoolingPump = ref([
    {
      deviceInfoName: '稀冷泵',
      style: {
        mLeft: '30%',
        mBottom: '29%',
      },
      url: diluteCoolingPumpSrc,
    },
  ]);
  //冷热水双蓄储能罐
  const coldWater = ref([
    {
      url: coldWaterSrc,
      style: {
        mLeft: '36%',
        mBottom: '39%',
      },
    },
  ]);
  //用户水泵
  const userWaterPump = ref([
    {
      url: waterPumpSrc,
      style: {
        mLeft: '50%',
        mBottom: '55.5%',
      },
    },
    {
      url: waterPumpSrc,
      style: {
        mLeft: '55%',
        mBottom: '51%',
      },
    },
    {
      url: waterPumpSrc,
      style: {
        mLeft: '59%',
        mBottom: '47%',
      },
    },
  ]);
  //地源水泵
  const waterPump = ref([
    {
      style: {
        mLeft: '65%',
        mBottom: '41%',
      },
      url: waterPumpSrc,
    },
    {
      style: {
        mLeft: '70%',
        mBottom: '36%',
      },
      url: waterPumpSrc,
    },
    {
      style: {
        mLeft: '75%',
        mBottom: '31%',
      },
      url: waterPumpSrc,
    },
  ]);
  // 定压补水装置
  const pressureWater = ref([
    {
      deviceInfoName: '定压补水装置',
      yc: '0.05 Bar',
      user: 1,
      style: {
        mLeft: '29.4%',
        mBottom: '8.4%',
      },
      url: pressureWaterSrc,
    },
  ]);
  //水泵 - 螺杆式 传感器
  const waterSensor = ref([
    {
      url: sensorSrc,
      style: {
        mLeft: '9%',
        mBottom: '27%',
      },
    },
  ]);
  //集水器 传感器
  const manifoldSensor = ref([
    {
      url: sensorSrc,
      style: {
        mLeft: '81%',
        mBottom: '51%',
      },
    },
  ]);
  //土壤 传感器
  const soilCouplerSensor = ref([
    {
      url: sensorSrc,
      style: {
        mLeft: '79%',
        mBottom: '13%',
      },
    },
  ]);
  //空气源 - 传感器
  const airSourceSensor = ref([
    {
      style: {
        mLeft: '26.5%',
        mBottom: '34%',
      },
      url: sensorSrc,
    },
    {
      style: {
        mLeft: '32.5%',
        mBottom: '39%',
      },
      url: sensorSrc,
    },
    {
      style: {
        mLeft: '38.5%',
        mBottom: '44.5%',
      },
      url: sensorSrc,
    },
    {
      style: {
        mLeft: '47.5%',
        mBottom: '52.5%',
      },
      url: sensorSrc,
    },
  ]);
  //箭头
  const arrow = ref([
    {
      url: arrowSrc,
      style: {
        mLeft: '6%',
        mBottom: '42.5%',
        transform: 'rotateZ(36deg)',
      },
    },
    {
      url: arrowSrc,
      style: {
        mLeft: '25%',
        mBottom: '18%',
        transform: 'rotateZ(36deg)',
      },
    },
    {
      url: arrowSrc,
      style: {
        mLeft: '76%',
        mBottom: '13%',
        transform: 'rotateZ(37deg)',
      },
    },
    {
      url: arrowSrc,
      style: {
        mLeft: '78%',
        mBottom: '72%',
        transform: 'rotateZ(149deg)',
      },
    },
  ]);

  //获取用户水泵数据
  const getUserWaterPump = () => {
    http
      .get(coldAndHeatSourcesApi.getUserWaterPumpState, {
        projectId: state.projectId,
        siteId: state.siteId,
        floor: 1,
      })
      .then((res) => {
        if (res.msg === 'success') {
          res.data.forEach((item: any, index: any) => {
            userWaterPump.value[index] = {
              deviceInfoName: item.deviceInfoName,
              ...item.record,
              url: waterPumpSrc,
              style: userWaterPumpPosition[index].style,
            };
          });
        }
      });
  };
  //获取地源水泵数据
  const getLandWaterPumpState = () => {
    http
      .get(coldAndHeatSourcesApi.getLandWaterPumpState, {
        projectId: state.projectId,
        siteId: state.siteId,
        floor: 1,
      })
      .then((res) => {
        if (res.msg === 'success') {
          res.data.forEach((item: any, index: any) => {
            waterPump.value[index] = {
              deviceInfoName: item.deviceInfoName,
              ...item.record,
              url: waterPumpSrc,
              style: waterPumpPosition[index].style,
            };
          });
        }
      });
  };

  //获取空气源热泵
  const getAirHeatPumpState = () => {
    http
      .get(coldAndHeatSourcesApi.getAirHeatPumpState, {
        projectId: state.projectId,
        siteId: state.siteId,
        floor: 1,
      })
      .then((res) => {
        if (res.msg === 'success') {
          res.data.forEach((item: any, index: any) => {
            airSourceThermalCollapse.value[index] = {
              deviceInfoName: item.deviceInfoName,
              ...item.record,
              url: airSourceThermalCollapseSrc,
              style: airSourceThermalCollapsePosition[index].style,
            };
          });
        }
      });
  };
  //获取螺杆式地源热泵
  const getLandHeatPumpState = () => {
    http
      .get(coldAndHeatSourcesApi.getLandHeatPumpState, {
        projectId: state.projectId,
        siteId: state.siteId,
        floor: 1,
      })
      .then((res) => {
        if (res.msg === 'success') {
          res.data.forEach((item: any, index: any) => {
            screwGeothermalHeatPump.value[index] = {
              deviceInfoName: item.deviceInfoName,
              ...item.record,
              url: screwGeothermalHeatPumpSrc,
              style: screwGeothermalHeatPumpPosition[index].style,
            };
          });
        }
      });
  };
  //冷热水双蓄储能罐
  const getEnergyTankState = () => {
    http
      .get(coldAndHeatSourcesApi.getEnergyTankState, {
        projectId: state.projectId,
        siteId: state.siteId,
        floor: 1,
      })
      .then((res) => {
        if (res.msg === 'success') {
          res.data.forEach((item: any) => {
            coldWater.value[0] = {
              deviceInfoName: item.deviceInfoName,
              ...coldWater.value[0], //位置信息
              ...item.record,
            };
          });
        }
      });
  };
  //获取多功能传感器
  const getSensorData = () => {
    http
      .get(ventilating.getSensorData, {
        projectId: state.projectId,
        siteId: state.siteId,
        floor: 1,
      })
      .then((res) => {
        if (res.msg === 'success') {
          res.data.forEach((item: any, index: any) => {
            if (index < 4) {
              airSourceSensor.value[index] = {
                deviceInfoName: item.deviceInfoName,
                ...item.record,
                url: sensorSrc,
                style: airSourceSensorPosition[index].style,
              };
            }
          });
          // 水泵传感器
          let data = res.data[Math.floor(Math.random() * res.data.length)];
          waterSensor.value[0] = {
            deviceInfoName: data.deviceInfoName,
            ...data.record,
            url: sensorSrc,
            style: {
              mLeft: '9%',
              mBottom: '27%',
            },
          };
          // 集水器 -传感器
          data = res.data[Math.floor(Math.random() * res.data.length)];
          manifoldSensor.value[0] = {
            deviceInfoName: data.deviceInfoName,
            ...data.record,
            url: sensorSrc,
            style: {
              mLeft: '81%',
              mBottom: '51%',
            },
          };
          // 土壤 -传感器
          data = res.data[Math.floor(Math.random() * res.data.length)];
          soilCouplerSensor.value[0] = {
            deviceInfoName: data.deviceInfoName,
            ...data.record,
            url: sensorSrc,
            style: {
              mLeft: '79%',
              mBottom: '13%',
            },
          };
        }
      });
  };
  //获取地源水泵设备
  const getData = () => {
    //获取用户水泵数据
    getUserWaterPump();
    //获取地源水泵数据
    getLandWaterPumpState();
    //获取空气源热泵数据
    getAirHeatPumpState();
    //螺杆式地源热泵
    getLandHeatPumpState();
    //冷热水双蓄储能罐
    getEnergyTankState();
    //获取多功能传感器
    getSensorData();
  };
  //定时
  // const intervalId = setInterval(getList, 60000);
  onMounted(() => {
    getData();
  });
  onUnmounted(() => {
    // 这里写销毁时需要执行的逻辑
    // clearInterval(intervalId);
  });
</script>
<style lang="less" scoped>
  .box-cold {
    width: 100%;
    height: 100%;
    background: rgba(0, 10, 48, 1);
    border-radius: 4px;
    display: flex;
    position: relative;
    color: white;
    overflow: hidden;
  }
  .ant-switch-checked {
    background-color: #04d919 !important;
  }
  .grey-background.ant-switch .ant-switch-handle {
    background-color: rgba(238, 238, 238, 1) !important;
  }

  .grey-background.ant-switch {
    background-color: grey !important;
  }
  :deep(.ant-switch-handle::before) {
    background-color: rgba(0, 0, 0, 1) !important;
  }

  .grey-background.ant-switch .ant-switch-handle {
    background-color: grey !important;
  }
  :deep(.ant-switch-disabled) {
    opacity: 1 !important;
  }
</style>