|
|
|
@ -17,16 +17,40 @@ |
|
|
|
{{ item.deviceInfoName }} |
|
|
|
</div> |
|
|
|
<div style="width: 100%; height: 20px"> |
|
|
|
模式: <span style="color: #fff">{{ item.type }}</span> |
|
|
|
模式: <span style="color: #fff">{{ item.autoStatus.label }}</span> |
|
|
|
</div> |
|
|
|
<div style="width: 100%; height: 20px"> |
|
|
|
设定温度: <span style="color: #fff">{{ item.number }}</span> |
|
|
|
设定温度: <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=" |
|
|
|
@ -37,7 +61,7 @@ |
|
|
|
bottom: 50%; |
|
|
|
position: absolute; |
|
|
|
"> |
|
|
|
<a-switch |
|
|
|
<!-- <a-switch |
|
|
|
:checked="selectAllCheckbox === 1 ? true : false" |
|
|
|
size="small" |
|
|
|
:disabled="true" |
|
|
|
@ -46,10 +70,34 @@ |
|
|
|
'blue-background': selectAllCheckbox === 1 ? true : false, |
|
|
|
'grey-background': selectAllCheckbox === 1 ? false : true, |
|
|
|
}" |
|
|
|
@change="toggleAllSelection" /> |
|
|
|
@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 |
|
|
|
@ -70,10 +118,10 @@ |
|
|
|
{{ item.deviceInfoName }} |
|
|
|
</div> |
|
|
|
<div style="width: 100%; height: 20px"> |
|
|
|
模式: <span style="color: #fff">{{ item.type }}</span> |
|
|
|
模式: <span style="color: #fff">{{ item.autoStatus.label }}</span> |
|
|
|
</div> |
|
|
|
<div style="width: 100%; height: 20px"> |
|
|
|
设定温度: <span style="color: #fff">{{ item.number }}</span> |
|
|
|
设定温度: <span style="color: #fff">{{ item.temp }} {{ item.tempUnit }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
@ -90,15 +138,17 @@ |
|
|
|
z-index: 2; |
|
|
|
" |
|
|
|
:style="{ left: item.style.mLeft, bottom: item.style.mBottom }"> |
|
|
|
<div style="width: 100%; height: 20px; color: rgb(128, 255, 255)"> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
width: 100%; |
|
|
|
height: 20px; |
|
|
|
color: rgb(128, 255, 255); |
|
|
|
position: absolute; |
|
|
|
top: 40px; |
|
|
|
left: 5px; |
|
|
|
"> |
|
|
|
{{ item.deviceInfoName }} |
|
|
|
</div> |
|
|
|
<div style="width: 100%; height: 20px"> |
|
|
|
出水温度: <span style="color: #fff">{{ item.number }}</span> |
|
|
|
</div> |
|
|
|
<div style="width: 100%; height: 20px"> |
|
|
|
流量: <span style="color: #fff">{{ item.lNumber }}</span> |
|
|
|
</div> |
|
|
|
<img |
|
|
|
style="position: absolute; width: 117.42px; height: 106.31px; left: -20px; top: 60px" |
|
|
|
:src="item.url" /> |
|
|
|
@ -117,17 +167,14 @@ |
|
|
|
z-index: 2; |
|
|
|
" |
|
|
|
:style="{ left: item.style.mLeft, bottom: item.style.mBottom }"> |
|
|
|
<div style="width: 100%; height: 20px; color: rgb(128, 255, 255)"> |
|
|
|
<div style="width: 100%; height: 20px; color: rgb(128, 255, 255); margin-top: 20px"> |
|
|
|
{{ item.deviceInfoName }} |
|
|
|
</div> |
|
|
|
<div style="width: 100%; height: 20px"> |
|
|
|
出水温度: <span style="color: #fff">{{ item.number }}</span> |
|
|
|
</div> |
|
|
|
<div style="width: 100%; height: 20px"> |
|
|
|
容量: <span style="color: #fff">{{ item.rNumber }}</span> |
|
|
|
出水温度: <span style="color: #fff">{{ item.temp }} {{ item.tempUnit }}</span> |
|
|
|
</div> |
|
|
|
<div style="width: 100%; height: 20px"> |
|
|
|
流量: <span style="color: #fff">{{ item.lNumber }}</span> |
|
|
|
容量: <span style="color: #fff">{{ item.vol }} {{ item.volUnit }}</span> |
|
|
|
</div> |
|
|
|
<img |
|
|
|
style="position: absolute; width: 110px; height: 110px; left: -20px; top: 80px" |
|
|
|
@ -146,13 +193,13 @@ |
|
|
|
" |
|
|
|
:style="{ left: item.style.mLeft, bottom: item.style.mBottom }"> |
|
|
|
<a-switch |
|
|
|
:checked="item.user === 1 ? true : false" |
|
|
|
: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.user === 1 ? true : false, |
|
|
|
'grey-background': item.user === 1 ? false : true, |
|
|
|
'blue-background': item.switchStatus.value === 1 ? true : false, |
|
|
|
'grey-background': item.switchStatus.value === 1 ? false : true, |
|
|
|
}" /> |
|
|
|
<img |
|
|
|
style=" |
|
|
|
@ -168,7 +215,7 @@ |
|
|
|
font-size: 12px; |
|
|
|
position: absolute; |
|
|
|
left: -40px; |
|
|
|
top: 30px; |
|
|
|
top: 40px; |
|
|
|
transform: rotateZ(-24deg); |
|
|
|
" |
|
|
|
>{{ item.deviceInfoName }}</div |
|
|
|
@ -192,21 +239,43 @@ |
|
|
|
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" /> |
|
|
|
<a-switch |
|
|
|
:checked="item.user === 1 ? true : false" |
|
|
|
size="small" |
|
|
|
:disabled="true" |
|
|
|
style="position: absolute; left: 40px; bottom: 0px" |
|
|
|
:class="{ |
|
|
|
'blue-background': item.user === 1 ? true : false, |
|
|
|
'grey-background': item.user === 1 ? false : true, |
|
|
|
}" /> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
width: 100%; |
|
|
|
@ -217,9 +286,6 @@ |
|
|
|
font-size: 12px; |
|
|
|
"> |
|
|
|
<div> {{ item.deviceInfoName }}</div> |
|
|
|
<div style="width: 100%; height: 20px; color: #ffff80"> |
|
|
|
压差: <span style="color: #fff">{{ item.yc }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
@ -294,13 +360,13 @@ |
|
|
|
" |
|
|
|
:style="{ left: item.style.mLeft, bottom: item.style.mBottom }"> |
|
|
|
<a-switch |
|
|
|
:checked="item.user === 1 ? true : false" |
|
|
|
: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.user === 1 ? true : false, |
|
|
|
'grey-background': item.user === 1 ? false : true, |
|
|
|
'blue-background': item.switchStatus.value === 1 ? true : false, |
|
|
|
'grey-background': item.switchStatus.value === 1 ? false : true, |
|
|
|
}" /> |
|
|
|
<img |
|
|
|
style=" |
|
|
|
@ -356,6 +422,30 @@ |
|
|
|
> |
|
|
|
<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 |
|
|
|
@ -370,11 +460,27 @@ |
|
|
|
}"> |
|
|
|
</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'; |
|
|
|
@ -386,10 +492,24 @@ |
|
|
|
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([ |
|
|
|
//水泵线-热泵 |
|
|
|
{ |
|
|
|
@ -757,77 +877,13 @@ |
|
|
|
}, |
|
|
|
}, |
|
|
|
]); |
|
|
|
const airSourceThermalCollapse = ref([ |
|
|
|
{ |
|
|
|
deviceInfoName: '1#空气源热泵', |
|
|
|
type: '制热', |
|
|
|
number: '40℃', |
|
|
|
style: { |
|
|
|
mLeft: '17%', |
|
|
|
mBottom: '54%', |
|
|
|
}, |
|
|
|
url: airSourceThermalCollapseSrc, |
|
|
|
}, |
|
|
|
{ |
|
|
|
deviceInfoName: '2#空气源热泵', |
|
|
|
type: '制热', |
|
|
|
number: '40℃', |
|
|
|
style: { |
|
|
|
mLeft: '24%', |
|
|
|
mBottom: '59%', |
|
|
|
}, |
|
|
|
url: airSourceThermalCollapseSrc, |
|
|
|
}, |
|
|
|
{ |
|
|
|
deviceInfoName: '3#空气源热泵', |
|
|
|
type: '制热', |
|
|
|
number: '40℃', |
|
|
|
style: { |
|
|
|
mLeft: '31%', |
|
|
|
mBottom: '66%', |
|
|
|
}, |
|
|
|
url: airSourceThermalCollapseSrc, |
|
|
|
}, |
|
|
|
{ |
|
|
|
deviceInfoName: '4#空气源热泵', |
|
|
|
type: '制热', |
|
|
|
number: '40℃', |
|
|
|
style: { |
|
|
|
mLeft: '38%', |
|
|
|
mBottom: '73%', |
|
|
|
}, |
|
|
|
url: airSourceThermalCollapseSrc, |
|
|
|
}, |
|
|
|
]); |
|
|
|
const airSourceThermalCollapse = ref([]); |
|
|
|
//螺杆式地源热泵 |
|
|
|
const screwGeothermalHeatPump = ref([ |
|
|
|
{ |
|
|
|
deviceInfoName: '1#螺杆式地源热泵', |
|
|
|
type: '制热', |
|
|
|
number: '40℃', |
|
|
|
style: { |
|
|
|
mLeft: '9.5%', |
|
|
|
mBottom: '22.5%', |
|
|
|
}, |
|
|
|
url: screwGeothermalHeatPumpSrc, |
|
|
|
}, |
|
|
|
{ |
|
|
|
deviceInfoName: '2#螺杆式地源热泵', |
|
|
|
type: '制热', |
|
|
|
number: '40℃', |
|
|
|
style: { |
|
|
|
mLeft: '18.5%', |
|
|
|
mBottom: '31.5%', |
|
|
|
}, |
|
|
|
url: screwGeothermalHeatPumpSrc, |
|
|
|
}, |
|
|
|
]); |
|
|
|
const screwGeothermalHeatPump = ref([]); |
|
|
|
//稀冷泵 |
|
|
|
const diluteCoolingPump = ref([ |
|
|
|
{ |
|
|
|
deviceInfoName: '稀冷泵', |
|
|
|
number: '40℃', |
|
|
|
lNumber: '139 m3/h', |
|
|
|
style: { |
|
|
|
mLeft: '30%', |
|
|
|
mBottom: '29%', |
|
|
|
@ -836,101 +892,260 @@ |
|
|
|
}, |
|
|
|
]); |
|
|
|
//冷热水双蓄储能罐 |
|
|
|
const coldWater = ref([ |
|
|
|
{ |
|
|
|
deviceInfoName: '冷热水双蓄储能罐', |
|
|
|
number: '40℃', |
|
|
|
lNumber: '139 m3/h', |
|
|
|
rNumber: '135L', |
|
|
|
style: { |
|
|
|
mLeft: '36%', |
|
|
|
mBottom: '39%', |
|
|
|
}, |
|
|
|
url: coldWaterSrc, |
|
|
|
}, |
|
|
|
]); |
|
|
|
const coldWater = ref([]); |
|
|
|
//用户水泵 |
|
|
|
const userWaterPump = ref([ |
|
|
|
{ |
|
|
|
deviceInfoName: '1#用户水泵', |
|
|
|
number: '40℃', |
|
|
|
user: 1, |
|
|
|
style: { |
|
|
|
mLeft: '50%', |
|
|
|
mBottom: '55.5%', |
|
|
|
}, |
|
|
|
url: waterPumpSrc, |
|
|
|
}, |
|
|
|
{ |
|
|
|
deviceInfoName: '2#用户水泵', |
|
|
|
number: '40℃', |
|
|
|
user: 1, |
|
|
|
style: { |
|
|
|
mLeft: '55%', |
|
|
|
mBottom: '51%', |
|
|
|
}, |
|
|
|
url: waterPumpSrc, |
|
|
|
}, |
|
|
|
const userWaterPump = ref([]); |
|
|
|
//地源水泵 |
|
|
|
const waterPump = ref([]); |
|
|
|
// 定压补水装置 |
|
|
|
const pressureWater = ref([ |
|
|
|
{ |
|
|
|
deviceInfoName: '3#用户水泵', |
|
|
|
number: '40℃', |
|
|
|
deviceInfoName: '定压补水装置', |
|
|
|
yc: '0.05 Bar', |
|
|
|
user: 1, |
|
|
|
style: { |
|
|
|
mLeft: '59%', |
|
|
|
mBottom: '47%', |
|
|
|
mLeft: '29.4%', |
|
|
|
mBottom: '8.4%', |
|
|
|
}, |
|
|
|
url: waterPumpSrc, |
|
|
|
url: pressureWaterSrc, |
|
|
|
}, |
|
|
|
]); |
|
|
|
//地源水泵 |
|
|
|
const waterPump = ref([ |
|
|
|
//水泵 - 螺杆式 传感器 |
|
|
|
const waterSensor = ref([]); |
|
|
|
//集水器 传感器 |
|
|
|
const manifoldSensor = ref([]); |
|
|
|
//土壤 传感器 |
|
|
|
const soilCouplerSensor = ref([]); |
|
|
|
//空气源 - 传感器 |
|
|
|
const airSourceSensor = ref([]); |
|
|
|
//箭头 |
|
|
|
const arrow = ref([ |
|
|
|
{ |
|
|
|
deviceInfoName: '1#地源水泵', |
|
|
|
number: '40℃', |
|
|
|
user: 1, |
|
|
|
url: arrowSrc, |
|
|
|
style: { |
|
|
|
mLeft: '65%', |
|
|
|
mBottom: '41%', |
|
|
|
mLeft: '6%', |
|
|
|
mBottom: '42.5%', |
|
|
|
transform: 'rotateZ(36deg)', |
|
|
|
}, |
|
|
|
url: waterPumpSrc, |
|
|
|
}, |
|
|
|
{ |
|
|
|
deviceInfoName: '2#地源水泵', |
|
|
|
number: '40℃', |
|
|
|
user: 1, |
|
|
|
url: arrowSrc, |
|
|
|
style: { |
|
|
|
mLeft: '70%', |
|
|
|
mBottom: '36%', |
|
|
|
mLeft: '25%', |
|
|
|
mBottom: '18%', |
|
|
|
transform: 'rotateZ(36deg)', |
|
|
|
}, |
|
|
|
url: waterPumpSrc, |
|
|
|
}, |
|
|
|
{ |
|
|
|
deviceInfoName: '3#地源水泵', |
|
|
|
number: '40℃', |
|
|
|
user: 1, |
|
|
|
url: arrowSrc, |
|
|
|
style: { |
|
|
|
mLeft: '75%', |
|
|
|
mBottom: '31%', |
|
|
|
mLeft: '76%', |
|
|
|
mBottom: '13%', |
|
|
|
transform: 'rotateZ(37deg)', |
|
|
|
}, |
|
|
|
url: waterPumpSrc, |
|
|
|
}, |
|
|
|
]); |
|
|
|
// 定压补水装置 |
|
|
|
const pressureWater = ref([ |
|
|
|
{ |
|
|
|
deviceInfoName: '定压补水装置', |
|
|
|
yc: '0.05 Bar', |
|
|
|
user: 1, |
|
|
|
url: arrowSrc, |
|
|
|
style: { |
|
|
|
mLeft: '29.4%', |
|
|
|
mBottom: '8.4%', |
|
|
|
mLeft: '78%', |
|
|
|
mBottom: '72%', |
|
|
|
transform: 'rotateZ(149deg)', |
|
|
|
}, |
|
|
|
url: pressureWaterSrc, |
|
|
|
}, |
|
|
|
]); |
|
|
|
const selectAllCheckbox = ref(1); |
|
|
|
onMounted(() => {}); |
|
|
|
onUnmounted(() => {}); |
|
|
|
|
|
|
|
//获取用户水泵数据 |
|
|
|
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.push({ |
|
|
|
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.push({ |
|
|
|
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.push({ |
|
|
|
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.push({ |
|
|
|
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.push({ |
|
|
|
deviceInfoName: item.deviceInfoName, |
|
|
|
...item.record, |
|
|
|
url: coldWaterSrc, |
|
|
|
style: { |
|
|
|
mLeft: '36%', |
|
|
|
mBottom: '39%', |
|
|
|
}, |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
//获取多功能传感器 |
|
|
|
const getSensorData = () => { |
|
|
|
waterSensor.value = []; |
|
|
|
airSourceSensor.value = []; |
|
|
|
manifoldSensor.value = []; |
|
|
|
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.push({ |
|
|
|
deviceInfoName: item.deviceInfoName, |
|
|
|
...item.record, |
|
|
|
url: sensorSrc, |
|
|
|
style: airSourceSensorPosition[index].style, |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
// 水泵传感器 |
|
|
|
let data = res.data[Math.floor(Math.random() * res.data.length)]; |
|
|
|
waterSensor.value.push({ |
|
|
|
deviceInfoName: data.deviceInfoName, |
|
|
|
...data.record, |
|
|
|
url: sensorSrc, |
|
|
|
style: { |
|
|
|
mLeft: '9%', |
|
|
|
mBottom: '27%', |
|
|
|
}, |
|
|
|
}); |
|
|
|
// 集水器 -传感器 |
|
|
|
data = res.data[Math.floor(Math.random() * res.data.length)]; |
|
|
|
manifoldSensor.value.push({ |
|
|
|
deviceInfoName: data.deviceInfoName, |
|
|
|
...data.record, |
|
|
|
url: sensorSrc, |
|
|
|
style: { |
|
|
|
mLeft: '81%', |
|
|
|
mBottom: '51%', |
|
|
|
}, |
|
|
|
}); |
|
|
|
// 土壤 -传感器 |
|
|
|
data = res.data[Math.floor(Math.random() * res.data.length)]; |
|
|
|
soilCouplerSensor.value.push({ |
|
|
|
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 { |
|
|
|
|
zhaohy
2 months ago
