add:冷热源静态页面
@@ -157,6 +157,25 @@ const equipmentControl = {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'coldAndHeatSources',
|
||||
name: 'coldAndHeatSources',
|
||||
meta: { title: '冷热源', hideChildren: true, icon: 'shebeiqunkong' },
|
||||
component: Base,
|
||||
redirect: { name: 'coldAndHeatSourcesIndex' },
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: 'coldAndHeatSourcesIndex',
|
||||
component: () => import('/@/view/equipmentControl/coldAndHeatSources/index.vue'),
|
||||
meta: {
|
||||
title: '冷热源',
|
||||
keepAlive: false,
|
||||
// backApi: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
export default equipmentControl;
|
||||
|
@@ -84,7 +84,7 @@
|
||||
<!-- 配置设备告警-->
|
||||
<configureDeviceAlarms v-show="!equipmentAlarm" ref="configureDeviceAlarms" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="能耗告警">
|
||||
<a-tab-pane key="3" tab="能碳告警">
|
||||
<ns-view-list-table
|
||||
v-bind="energyAlarmConfig"
|
||||
v-show="energyAlarm"
|
||||
|
@@ -230,8 +230,6 @@
|
||||
} from './devicePosition';
|
||||
// 全局变量
|
||||
const state = items();
|
||||
onMounted(() => {});
|
||||
onUnmounted(() => {});
|
||||
//图例
|
||||
const legend = ref([
|
||||
{ url: temperature, name: '温度' },
|
||||
|
@@ -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 |
@@ -166,6 +166,7 @@
|
||||
name: 'energyAlarmEdit',
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
handle: (data: any) => {
|
||||
console.log(mainRef.value, '数据');
|
||||
if (data?.executeStatus?.value === 2) {
|
||||
NsMessage.warning('当前计划正在执行,无法进行编辑。如需编辑,请先停止计划.');
|
||||
} else {
|
||||
@@ -191,7 +192,7 @@
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
confirm: true,
|
||||
handle: (data: any) => {
|
||||
http.post(planToAddApi.updPlan, { id: data.id, isDeleted: 1 }).then((res) => {
|
||||
http.post(planToAddApi.updPlan, [data.id]).then((res) => {
|
||||
if (res.msg === 'success') {
|
||||
NsMessage.success('操作成功');
|
||||
mainRef.value?.nsTableRef.reload();
|
||||
|