zhaohy
3 months ago
19 changed files with 988 additions and 4 deletions
@ -0,0 +1,966 @@ |
|||||
|
<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 style="width: 100%; height: 20px"> |
||||
|
模式: <span style="color: #fff">{{ item.type }}</span> |
||||
|
</div> |
||||
|
<div style="width: 100%; height: 20px"> |
||||
|
设定温度: <span style="color: #fff">{{ item.number }}</span> |
||||
|
</div> |
||||
|
<img |
||||
|
style="position: absolute; width: 135px; height: 130px; 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 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 style="width: 100%; height: 20px"> |
||||
|
模式: <span style="color: #fff">{{ item.type }}</span> |
||||
|
</div> |
||||
|
<div style="width: 100%; height: 20px"> |
||||
|
设定温度: <span style="color: #fff">{{ item.number }}</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)"> |
||||
|
{{ 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" /> |
||||
|
</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)"> |
||||
|
{{ 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> |
||||
|
</div> |
||||
|
<div style="width: 100%; height: 20px"> |
||||
|
流量: <span style="color: #fff">{{ item.lNumber }}</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 |
||||
|
:checked="item.user === 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, |
||||
|
}" /> |
||||
|
<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; |
||||
|
transform: rotateZ(-24deg); |
||||
|
" |
||||
|
>{{ 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 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%; |
||||
|
height: 40px; |
||||
|
color: rgb(128, 255, 255); |
||||
|
position: absolute; |
||||
|
bottom: -40px; |
||||
|
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> |
||||
|
<!-- 软化水箱 --> |
||||
|
<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 |
||||
|
:checked="item.user === 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, |
||||
|
}" /> |
||||
|
<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; |
||||
|
transform: rotateZ(-24deg); |
||||
|
" |
||||
|
>{{ 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 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> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onMounted, onUnmounted } from 'vue'; |
||||
|
//图片资源 |
||||
|
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 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'; |
||||
|
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%', |
||||
|
mLeft: '92.5%', |
||||
|
mBottom: '38%', |
||||
|
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([ |
||||
|
{ |
||||
|
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 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 diluteCoolingPump = ref([ |
||||
|
{ |
||||
|
deviceInfoName: '稀冷泵', |
||||
|
number: '40℃', |
||||
|
lNumber: '139 m3/h', |
||||
|
style: { |
||||
|
mLeft: '30%', |
||||
|
mBottom: '29%', |
||||
|
}, |
||||
|
url: diluteCoolingPumpSrc, |
||||
|
}, |
||||
|
]); |
||||
|
//冷热水双蓄储能罐 |
||||
|
const coldWater = ref([ |
||||
|
{ |
||||
|
deviceInfoName: '冷热水双蓄储能罐', |
||||
|
number: '40℃', |
||||
|
lNumber: '139 m3/h', |
||||
|
rNumber: '135L', |
||||
|
style: { |
||||
|
mLeft: '36%', |
||||
|
mBottom: '39%', |
||||
|
}, |
||||
|
url: coldWaterSrc, |
||||
|
}, |
||||
|
]); |
||||
|
//用户水泵 |
||||
|
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, |
||||
|
}, |
||||
|
{ |
||||
|
deviceInfoName: '3#用户水泵', |
||||
|
number: '40℃', |
||||
|
user: 1, |
||||
|
style: { |
||||
|
mLeft: '59%', |
||||
|
mBottom: '47%', |
||||
|
}, |
||||
|
url: waterPumpSrc, |
||||
|
}, |
||||
|
]); |
||||
|
//地源水泵 |
||||
|
const waterPump = ref([ |
||||
|
{ |
||||
|
deviceInfoName: '1#地源水泵', |
||||
|
number: '40℃', |
||||
|
user: 1, |
||||
|
style: { |
||||
|
mLeft: '65%', |
||||
|
mBottom: '41%', |
||||
|
}, |
||||
|
url: waterPumpSrc, |
||||
|
}, |
||||
|
{ |
||||
|
deviceInfoName: '2#地源水泵', |
||||
|
number: '40℃', |
||||
|
user: 1, |
||||
|
style: { |
||||
|
mLeft: '70%', |
||||
|
mBottom: '36%', |
||||
|
}, |
||||
|
url: waterPumpSrc, |
||||
|
}, |
||||
|
{ |
||||
|
deviceInfoName: '3#地源水泵', |
||||
|
number: '40℃', |
||||
|
user: 1, |
||||
|
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 selectAllCheckbox = ref(1); |
||||
|
onMounted(() => {}); |
||||
|
onUnmounted(() => {}); |
||||
|
</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> |
||||
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 401 B |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 409 B |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 18 KiB |
Loading…
Reference in new issue