You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1323 lines
34 KiB
1323 lines
34 KiB
<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>
|
|
|