lijianfu
/
eemcs_ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
楼宇能效监测控制系统
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.
150 Commits
4 Branches
0 Tags
105 MiB
 
 
 
 
 
Tree: 6e277f9422
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '6e277f9422'
${ noResults }
eemcs_ui/src/views/newCenterairC/sysMonitor/monitorCenter.vue

4668 lines
136 KiB
Raw Blame History

<template>
<div class="monitor" v-loading="loading">
<div class="monitor-top">
<img
class="title-left"
src="../../../assets/images/title-left.png"
alt=""
/>
<img
class="title-center"
@click="goSys"
src="../../../assets/images/title-center.png"
alt=""
/>
<img
class="title-right"
src="../../../assets/images/title-right.png"
alt=""
/>
<div class="sys-title" @click="goSys">铭汉高效冷源站管理系统</div>
<!-- logo -->
<img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" />
<div class="nowTime">{{ formattedDate }}</div>
<div class="monitor-time">已监测时长:{{ dayData }}天</div>
<img
class="icon_warning"
src="../../../assets/images/warning.png"
title="报警记录"
@click="goWarning"
v-if="isShowWarning"
alt=""
/>
<img
class="icon_home"
src="../../../assets/images/icon_home.png"
title="首页"
@click="goSys"
alt=""
/>
<img
class="back-icon"
src="../../../assets/images/back-icon.png"
title="返回"
@click="goBack"
alt=""
/>
</div>
<div class="monitor-content">
<!-- 天气数据 -->
<div class="weather">
<div class="weather-li">
<span>室外温度：</span>
<span class="deepColor">{{ weatherObj.temperature }}</span>
<span>℃</span>
</div>
<div class="weather-li">
<span>室外湿度：</span>
<span class="deepColor">{{ weatherObj.humidity }}</span>
<span>%</span>
</div>
<div class="weather-li">
<span>室外含湿：</span>
<span class="deepColor">{{ weatherObj.humidityRatio }}</span>
<span>g/kg</span>
</div>
<div class="weather-li">
<span>室外焓值：</span>
<span class="deepColor">{{ weatherObj.enthalpy }}</span>
<span>kj/kg</span>
</div>
<div class="weather-li">
<span>室外露点：</span>
<span class="deepColor">{{ weatherObj.dewPointTemp }}</span>
<span>℃</span>
</div>
<div class="weather-li">
<span>室外湿球：</span>
<span class="deepColor">{{ weatherObj.wetBulbTemp }}</span>
<span>℃</span>
</div>
</div>
<!-- 系统性能数据 -->
<div class="performance">
<div class="title">系 统 性 能</div>
<div class="perdformance-bg">
<div class="weather-li">
<span>实时EER：</span>
<span class="deepColor">{{ performanceObj.realEER }}</span>
<span>kw/kw</span>
</div>
<div class="weather-li">
<span>实时功率：</span>
<span class="deepColor">{{ performanceObj.realPower }}</span>
<span>kw</span>
</div>
<div class="weather-li">
<span>实时冷量：</span>
<span class="deepColor">{{ performanceObj.realCold }}</span>
<span>kw</span>
</div>
<div class="weather-li">
<span>全年EER：</span>
<span class="deepColor">{{ performanceObj.yearEER }}</span>
<span>kw</span>
</div>
<div class="weather-li">
<span>全年用电：</span>
<span class="deepColor">{{ performanceObj.yearPower }}</span>
<span>kw/h</span>
</div>
<div class="weather-li">
<span>全年产冷：</span>
<span class="deepColor">{{ performanceObj.yearCold }}</span>
<span>kw</span>
</div>
<div class="weather-li">
<span>热平衡率：</span>
<span class="deepColor">82</span>
<span>%</span>
</div>
<div class="weather-li">
<span>热平衡偏差：</span>
<span class="deepColor">1.8</span>
<span>%</span>
<span class="normal">校验通过√</span>
</div>
</div>
</div>
<!-- 主机加减载时间 -->
<!-- <div class="detail-data-bottom">
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>主机加载时间:</span>
<span class="dotData">{{ hostAddTime }}</span>
<span class="dotUnit">min</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>主机减载时间:</span>
<span class="dotData">{{ hostReduceTime }}</span>
<span class="dotUnit">min</span>
</div>
</div>
</div>
</div> -->
<!-- 一键启停 -->
<div class="offClass" @click="handleOneKeyButton">
<div v-if="isShowOn" class="off-bg on-animation">启动</div>
<div v-else class="off-bg">停止</div>
</div>
<!-- 系统提示 -->
<div class="sysTips" v-if="startOrStopStatus">
<img class="step" src="../../../assets/images/step.png" alt="" />
<div class="tips-text">{{ startOrStopStatus }}</div>
</div>
<!-- <div class="funtion-menu1" @click="goPerformance">
<div class="menu-title"><div>冷机性能统计</div></div>
<img class="ditu" src="../../../assets/images/di.png" />
</div> -->
<div class="funtion-menu1 menu2" @click="goControl">
<div class="menu-title"><div>系统控制</div></div>
<img class="ditu" src="../../../assets/images/di.png" />
</div>
<!-- 整体图 -->
<img
class="monitor-img"
src="../../../assets/images/meizhou.png"
alt=""
/>
<!-- 主机1数据定位 -->
<div
class="hostName1"
v-if="hostList.length > 0"
@click="goControlList(hostList, 1)"
>
{{ hostList[0].deviceName }}
</div>
<div
class="hostStatus1"
:class="{ startClass: hostListControlClass(1) }"
></div>
<img
class="host-img1"
v-if="hostListRunClass(1)"
src="../../../assets/images/fan-img.png"
alt=""
:class="{ moveClass: hostListRunClass(1) }"
/>
<div
class="host-main1"
v-if="hostList.length > 0 && hostList[0].deviceName"
:title="`${hostList[0].deviceName}性能`"
@click="goHostDetail(hostList[0], false)"
></div>
<div class="hostLoad1" v-if="hostListRunClass(1) && hostLoadData(1)">
{{ hostLoad1 }}%
</div>
<div class="water-flow1">
<div class="water-flow-li">
<span>1#冷却水流:</span>
<span v-if="hostCoolingWaterFlowClass(1)">接通</span>
<span v-else>断开</span>
<span
class="break"
:class="{ connect: hostCoolingWaterFlowClass(1) }"
></span>
</div>
<div class="water-flow-li">
<span>1#冷冻水流:</span>
<span v-if="hostFreezeWaterFlowClass(1)">接通</span>
<span v-else>断开</span>
<span
class="break"
:class="{ connect: hostFreezeWaterFlowClass(1) }"
></span>
</div>
</div>
<line-children
:angle1="-0"
:angle2="-35"
:lineWidth1="190"
:lineWidth2="150"
class="host-line1"
></line-children>
<div class="setTem1" v-if="hostSetTemClass(1)">
实时设点:{{ hostSetTem1 }}℃
</div>
<div class="setTem2" v-if="hostSetTemClass(2)">
实时设点:{{ hostSetTem4 }}℃
</div>
<div class="setTem3" v-if="hostSetTemClass(3)">
实时设点:{{ hostSetTem3 }}℃
</div>
<!-- 主机2数据定位 -->
<div
class="hostName2"
v-if="hostList.length > 0"
@click="goControlList(hostList, 2)"
>
{{ hostList[1].deviceName }}
</div>
<div
class="hostStatus2"
:class="{ startClass: hostListControlClass(2) }"
></div>
<img
class="host-img2"
v-if="hostListRunClass(2)"
src="../../../assets/images/fan-img.png"
alt=""
:class="{ moveClass: hostListRunClass(2) }"
/>
<div
class="host-main2"
v-if="hostList.length > 0 && hostList[1].deviceName"
:title="`${hostList[1].deviceName}性能`"
@click="goHostDetail(hostList[1], false)"
></div>
<div class="hostLoad2" v-if="hostListRunClass(2) && hostLoadData(2)">
{{ hostLoad2 }}%
</div>
<div class="water-flow2">
<div class="water-flow-li">
<span>2#冷却水流:</span>
<span v-if="hostCoolingWaterFlowClass(2)">接通</span>
<span v-else>断开</span>
<span
class="break"
:class="{ connect: hostCoolingWaterFlowClass(2) }"
></span>
</div>
<div class="water-flow-li">
<span>2#冷冻水流:</span>
<span v-if="hostFreezeWaterFlowClass(2)">接通</span>
<span v-else>断开</span>
<span
class="break"
:class="{ connect: hostFreezeWaterFlowClass(2) }"
></span>
</div>
</div>
<line-children
:angle1="-0"
:angle2="-35"
:lineWidth1="220"
:lineWidth2="360"
class="host-line2"
></line-children>
<!-- 主机3数据定位 -->
<div
class="hostName3"
v-if="hostList.length > 0"
@click="goControlList(hostList, 3)"
>
{{ hostList[2].deviceName }}
</div>
<!-- 主机启停状态 -->
<div
class="hostStatus3"
:class="{ startClass: hostListControlClass(3) }"
></div>
<!-- 主机运行状态 -->
<img
class="host-img3"
v-if="hostListRunClass(3)"
src="../../../assets/images/fan-img.png"
alt=""
:class="{ moveClass: hostListRunClass(3) }"
/>
<!-- 点击主机跳转到主机参数详情页 -->
<div
class="host-main3"
v-if="hostList.length > 0 && hostList[2].deviceName"
:title="`${hostList[2].deviceName}性能`"
@click="goHostDetail(hostList[2], true)"
></div>
<!-- 主机负载 -->
<div class="hostLoad3" v-if="hostListRunClass(3) && hostLoadData(3)">
{{ hostLoad3 }}%
</div>
<!-- 主机冷却冷冻水流信息 -->
<div class="water-flow3">
<div class="water-flow-li">
<span>3#冷却水流:</span>
<span v-if="hostCoolingWaterFlowClass(3)">接通</span>
<span v-else>断开</span>
<span
class="break"
:class="{ connect: hostCoolingWaterFlowClass(3) }"
></span>
</div>
<div class="water-flow-li">
<span>3#冷冻水流:</span>
<span v-if="hostFreezeWaterFlowClass(3)">接通</span>
<span v-else>断开</span>
<span
class="break"
:class="{ connect: hostFreezeWaterFlowClass(3) }"
></span>
</div>
</div>
<!-- 线+主机冷却水流状态 -->
<line-children
:angle1="-0"
:angle2="-39"
:lineWidth1="300"
:lineWidth2="530"
class="host-line3"
></line-children>
<!-- 冷却泵数据定位 -->
<div class="coolingPump1" @click="goControlList(coolingPump, 1)">1#</div>
<div class="coolingPump2" @click="goControlList(coolingPump, 2)">2#</div>
<div class="coolingPump3" @click="goControlList(coolingPump, 3)">3#</div>
<div class="coolingPump4" @click="goControlList(coolingPump, 4)">4#</div>
<div class="coolingPump5" @click="goControlList(coolingPump, 5)">5#</div>
<!-- 运行状态 -->
<img
class="cooling-img1"
v-if="coolingPumpRunClass(1)"
src="../../../assets/images/fan-img.png"
alt=""
:class="{ moveClass2: coolingPumpRunClass(1) }"
/>
<img
class="cooling-img2"
v-if="coolingPumpRunClass(2)"
src="../../../assets/images/fan-img.png"
alt=""
:class="{ moveClass2: coolingPumpRunClass(2) }"
/>
<img
class="cooling-img3"
v-if="coolingPumpRunClass(3)"
src="../../../assets/images/fan-img.png"
alt=""
:class="{ moveClass2: coolingPumpRunClass(3) }"
/>
<img
class="cooling-img4"
v-if="coolingPumpRunClass(4)"
src="../../../assets/images/fan-img.png"
alt=""
:class="{ moveClass2: coolingPumpRunClass(4) }"
/>
<img
class="cooling-img5"
v-if="coolingPumpRunClass(5)"
src="../../../assets/images/fan-img.png"
alt=""
:class="{ moveClass2: coolingPumpRunClass(5) }"
/>
<!-- 频率反馈 -->
<div
class="cooling-hz1"
v-if="coolingPumpHz(1) && coolingPumpRunClass(1)"
>
{{ coolingPumpHz1 }}Hz
</div>
<div
class="cooling-hz2"
v-if="coolingPumpHz(2) && coolingPumpRunClass(2)"
>
{{ coolingPumpHz2 }}Hz
</div>
<div
class="cooling-hz3"
v-if="coolingPumpHz(3) && coolingPumpRunClass(3)"
>
{{ coolingPumpHz3 }}Hz
</div>
<div
class="cooling-hz4"
v-if="coolingPumpHz(4) && coolingPumpRunClass(4)"
>
{{ coolingPumpHz4 }}Hz
</div>
<div
class="cooling-hz5"
v-if="coolingPumpHz(5) && coolingPumpRunClass(5)"
>
{{ coolingPumpHz5 }}Hz
</div>
<!-- 冷冻泵数据定位 -->
<div class="freezingPump1" @click="goControlList(freezingPump, 1)">
1#
</div>
<div class="freezingPump2" @click="goControlList(freezingPump, 2)">
2#
</div>
<div class="freezingPump3" @click="goControlList(freezingPump, 3)">
3#
</div>
<div class="freezingPump4" @click="goControlList(freezingPump, 4)">
4#
</div>
<div class="freezingPump5" @click="goControlList(freezingPump, 5)">
5#
</div>
<img
class="freezing-img1"
v-if="freezingPumpRunClass(1)"
src="../../../assets/images/fan-img.png"
alt=""
:class="{ moveClass2: freezingPumpRunClass(1) }"
/>
<img
class="freezing-img2"
v-if="freezingPumpRunClass(2)"
src="../../../assets/images/fan-img.png"
alt=""
:class="{ moveClass2: freezingPumpRunClass(2) }"
/>
<img
class="freezing-img3"
v-if="freezingPumpRunClass(3)"
src="../../../assets/images/fan-img.png"
alt=""
:class="{ moveClass2: freezingPumpRunClass(3) }"
/>
<img
class="freezing-img4"
v-if="freezingPumpRunClass(4)"
src="../../../assets/images/fan-img.png"
alt=""
:class="{ moveClass2: freezingPumpRunClass(4) }"
/>
<img
class="freezing-img5"
v-if="freezingPumpRunClass(5)"
src="../../../assets/images/fan-img.png"
alt=""
:class="{ moveClass2: freezingPumpRunClass(5) }"
/>
<!-- 频率反馈 旋转+有频率反馈才显示 -->
<div
class="freezing-hz1"
v-if="freezingPumpHz(1) && freezingPumpRunClass(1)"
>
{{ freezingPumpHz1 }}Hz
</div>
<div
class="freezing-hz2"
v-if="freezingPumpHz(2) && freezingPumpRunClass(2)"
>
{{ freezingPumpHz2 }}Hz
</div>
<div
class="freezing-hz3"
v-if="freezingPumpHz(3) && freezingPumpRunClass(3)"
>
{{ freezingPumpHz3 }}Hz
</div>
<div
class="freezing-hz4"
v-if="freezingPumpHz(4) && freezingPumpRunClass(4)"
>
{{ freezingPumpHz4 }}Hz
</div>
<div
class="freezing-hz5"
v-if="freezingPumpHz(5) && freezingPumpRunClass(5)"
>
{{ freezingPumpHz5 }}Hz
</div>
<!-- 冷却塔数据定位 3个风机 三个出水阀 -->
<div class="coolingTower3" @click="goControlList(coolingTower, 3)">
3#
</div>
<div class="coolingTower2" @click="goControlList(coolingTower, 2)">
2#
</div>
<div class="coolingTower1" @click="goControlList(coolingTower, 1)">
1#
</div>
<!-- 风机频率 -->
<div
class="coolingTowerHz3"
v-if="coolingTowerHz(3, 1) && coolingTowerRunClass(3, 1)"
>
{{ coolingTowerHz3 }}Hz
</div>
<div
class="coolingTowerHz2"
v-if="coolingTowerHz(2, 1) && coolingTowerRunClass(2, 1)"
>
{{ coolingTowerHz2 }}Hz
</div>
<div
class="coolingTowerHz1"
v-if="coolingTowerHz(1, 1) && coolingTowerRunClass(1, 1)"
>
{{ coolingTowerHz1 }}Hz
</div>
<!-- 3号冷却塔风机1 -->
<img
class="fan-img1"
v-if="coolingTowerRunClass(3, 1)"
:class="{ moveClass2: coolingTowerRunClass(3, 1) }"
src="../../../assets/images/fan-img.png"
alt=""
/>
<!-- 2号冷却塔风机1 -->
<img
class="fan-img2"
v-if="coolingTowerRunClass(2, 1)"
:class="{ moveClass2: coolingTowerRunClass(2, 1) }"
src="../../../assets/images/fan-img.png"
alt=""
/>
<!-- 1 号冷却塔风机1 -->
<img
class="fan-img3"
v-if="coolingTowerRunClass(1, 1)"
:class="{ moveClass2: coolingTowerRunClass(1, 1) }"
src="../../../assets/images/fan-img.png"
alt=""
/>
<!-- 冷却塔进出水阀门 -->
<div
class="towerValve1"
:class="{ startClass: towerValveControlClass(3) }"
@click="goControlList(coolingTowerOutlet, 3)"
></div>
<div
class="towerValve2"
:class="{ startClass: towerValveControlClass(2) }"
@click="goControlList(coolingTowerOutlet, 2)"
></div>
<div
class="towerValve3"
:class="{ startClass: towerValveControlClass(1) }"
@click="goControlList(coolingTowerOutlet, 1)"
></div>
<div
class="towerValve4"
:class="{ startClass: towerValveInControlClass(3) }"
@click="goControlList(coolingTowerInlet, 3)"
></div>
<div
class="towerValve5"
:class="{ startClass: towerValveInControlClass(2) }"
@click="goControlList(coolingTowerInlet, 2)"
></div>
<div
class="towerValve6"
:class="{ startClass: towerValveInControlClass(1) }"
@click="goControlList(coolingTowerInlet, 1)"
></div>
<!-- 冷冻蝶阀数据定位 -->
<!-- <div
class="frozenValve1"
:class="{ startClass: frozenValveControlClass(1) }"
></div> -->
<div
class="frozenValve2"
:class="{ startClass: frozenValveControlClass(2) }"
@click="goControlList(frozenValve, 2)"
></div>
<div
class="frozenValve3"
:class="{ startClass: frozenValveControlClass(3) }"
@click="goControlList(frozenValve, 3)"
></div>
<!-- 冷却蝶阀数据定位 -->
<!-- <div
class="coolingValue1"
:class="{ startClass: coolingValueControlClass(1) }"
></div> -->
<div
class="coolingValue2"
:class="{ startClass: coolingValueControlClass(2) }"
@click="goControlList(coolingValue, 2)"
></div>
<div
class="coolingValue3"
:class="{ startClass: coolingValueControlClass(3) }"
@click="goControlList(coolingValue, 3)"
></div>
<!-- 箭头 -->
<img class="in-arrow" src="../../../assets/images/in-arrow.png" alt="" />
<img
class="out-arrow"
src="../../../assets/images/out-arrow.png"
alt=""
/>
<!-- 冷冻进出水温度 0是out供(出)水，1是in回(进)水 -->
<div class="freezingInTem">{{ freezingInTem }}℃</div>
<div class="freezingOutTem">{{ freezingOutTem }}℃</div>
<!-- 冷冻水流 -->
<div class="freezingOutWater">{{ freezingOutWater }}m³/h</div>
<!-- 冷冻进出水压力 -->
<!-- <div class="freezingInPre">{{ freezingInPre }}kpa</div>
<div class="freezingOutPre">{{ freezingOutPre }}kpa</div> -->
<!-- 冷却进出水温度 -->
<div class="coolingInTem">{{ coolingInTem }}℃</div>
<div class="coolingOutTem">{{ coolingOutTem }}℃</div>
<!-- 报警状态与系统模式 -->
<div class="statusAndModel" v-if="isWarning">
<img src="../../../assets/images/red.png" class="warnStatus" alt="" />
<img
src="../../../assets/images/border6.png"
class="modelStatus"
alt=""
/>
<div class="sysWarning" @click="showAlarm">Warning</div>
<div class="sysStatus">{{ sysStatus }}</div>
</div>
<div class="statusAndModel" v-else>
<img src="../../../assets/images/blue.png" class="warnStatus" alt="" />
<img
src="../../../assets/images/border5.png"
class="modelStatus"
alt=""
/>
<div class="sysNormal">Normal</div>
<div class="sysStatus">{{ sysStatus }}</div>
</div>
<!-- 供暖区 -->
<div class="hotClass">供暖区</div>
<!-- 采暖锅炉名称 -->
<div
class="steamHeatingBoiler1"
v-if="steamHeatingFire.length > 0 && steamHeatingFire[0].deviceName"
:title="`${steamHeatingFire[0].deviceName}详情`"
@click="goBoilerDetail(steamHeatingFire[0], false)"
>
{{ steamHeatingFire[0].deviceName }}
</div>
<div
class="steamHeatingBoiler2"
v-if="steamHeatingFire.length > 1 && steamHeatingFire[0].deviceName"
:title="`${steamHeatingFire[1].deviceName}详情`"
@click="goBoilerDetail(steamHeatingFire[1], false)"
>
{{ steamHeatingFire[1].deviceName }}
</div>
<!-- 采暖锅炉点击跳转 -->
<div
class="steamHeatingBoiler-main1"
v-if="steamHeatingFire.length > 0 && steamHeatingFire[0].deviceName"
:title="`${steamHeatingFire[0].deviceName}详情`"
@click="goBoilerDetail(steamHeatingFire[0], false)"
></div>
<div
class="steamHeatingBoiler-main2"
v-if="steamHeatingFire.length > 1 && steamHeatingFire[1].deviceName"
:title="`${steamHeatingFire[1].deviceName}详情`"
@click="goBoilerDetail(steamHeatingFire[1], false)"
></div>
<!-- 采暖锅炉运行状态 -->
<img
class="steamHeatingBoiler-img1"
src="../../../assets/images/fan-img.png"
alt=""
v-if="steamHeatingBoilerRunClass(1)"
:class="{ moveClass2: steamHeatingBoilerRunClass(1) }"
/>
<img
class="steamHeatingBoiler-img2"
src="../../../assets/images/fan-img.png"
alt=""
v-if="steamHeatingBoilerRunClass(2)"
:class="{ moveClass2: steamHeatingBoilerRunClass(2) }"
/>
<!-- 采暖泵名称 -->
<div
class="steamHeatingPump1"
v-if="
steamHeatingHzAndRun.length > 0 && steamHeatingHzAndRun[0].deviceName
"
:title="`${steamHeatingHzAndRun[0].deviceName}详情`"
@click="goPumpDetail(steamHeatingHzAndRun[0], false)"
>
1#
</div>
<div
class="steamHeatingPump2"
v-if="
steamHeatingHzAndRun.length > 1 && steamHeatingHzAndRun[0].deviceName
"
:title="`${steamHeatingHzAndRun[1].deviceName}详情`"
@click="goPumpDetail(steamHeatingHzAndRun[1], false)"
>
2#
</div>
<div
class="steamHeatingPump3"
v-if="
steamHeatingHzAndRun.length > 2 && steamHeatingHzAndRun[0].deviceName
"
:title="`${steamHeatingHzAndRun[2].deviceName}详情`"
@click="goPumpDetail(steamHeatingHzAndRun[2], false)"
>
3#
</div>
<!-- 采暖泵点击跳转 -->
<div
class="steamHeatingPump-main1"
v-if="
steamHeatingHzAndRun.length > 0 && steamHeatingHzAndRun[0].deviceName
"
:title="`${steamHeatingHzAndRun[0].deviceName}详情`"
@click="goPumpDetail(steamHeatingHzAndRun[0], false)"
></div>
<div
class="steamHeatingPump-main2"
v-if="
steamHeatingHzAndRun.length > 1 && steamHeatingHzAndRun[1].deviceName
"
:title="`${steamHeatingHzAndRun[1].deviceName}详情`"
@click="goPumpDetail(steamHeatingHzAndRun[1], false)"
></div>
<div
class="steamHeatingPump-main3"
v-if="
steamHeatingHzAndRun.length > 2 && steamHeatingHzAndRun[2].deviceName
"
:title="`${steamHeatingHzAndRun[2].deviceName}详情`"
@click="goPumpDetail(steamHeatingHzAndRun[2], false)"
></div>
<!-- 采暖泵运行状态 -->
<img
class="steamHeatingPump-img1"
src="../../../assets/images/fan-img.png"
alt=""
v-if="steamHeatingPumpRunClass(1)"
:class="{ moveClass2: steamHeatingPumpRunClass(1) }"
/>
<img
class="steamHeatingPump-img2"
src="../../../assets/images/fan-img.png"
alt=""
v-if="steamHeatingPumpRunClass(2)"
:class="{ moveClass2: steamHeatingPumpRunClass(2) }"
/>
<img
class="steamHeatingPump-img3"
src="../../../assets/images/fan-img.png"
alt=""
v-if="steamHeatingPumpRunClass(3)"
:class="{ moveClass2: steamHeatingPumpRunClass(3) }"
/>
<!-- 采暖泵频率反馈 -->
<div
class="steamHeatingPump-hz1"
v-if="steamHeatingPumpHz(1) && steamHeatingPumpRunClass(1)"
>
{{ steamHeatingPumpHz1 }}Hz
</div>
<div
class="steamHeatingPump-hz2"
v-if="steamHeatingPumpHz(2) && steamHeatingPumpRunClass(2)"
>
{{ steamHeatingPumpHz2 }}Hz
</div>
<div
class="steamHeatingPump-hz3"
v-if="steamHeatingPumpHz(3) && steamHeatingPumpRunClass(3)"
>
{{ steamHeatingPumpHz3 }}Hz
</div>
<!-- 热量计供回水温度 -->
<div class="steamHeatingInTem">{{ steamHeatingInTem }}℃</div>
<div class="steamHeatingOutTem">{{ steamHeatingOutTem }}℃</div>
<!-- 供冷区进水阀 -->
<div class="coolingOut-vavle">
<div class="water-flow-li">
<span
@click="goControlList(coolingInletBuild, null, '裙楼供冷进水阀')"
style="cursor: pointer"
>裙楼供冷进水阀:</span
>
<span
class="break"
:class="{
connect: hostAndCoolingControlClass(this.coolingInletBuild),
}"
></span>
<div class="outInre">
{{ getValueByType(this.coolingInletBuild, "13") }}bar
</div>
</div>
<div class="water-flow-li">
<span
@click="goControlList(coolingInletGuest, null, '客房供冷进水阀')"
style="cursor: pointer"
>客房供冷进水阀:</span
>
<span
class="break"
:class="{
connect: hostAndCoolingControlClass(this.coolingInletGuest),
}"
></span>
<div class="outInre">
{{ getValueByType(this.coolingInletGuest, "13") }}bar
</div>
</div>
</div>
<line-children
:angle1="-110"
:angle2="0"
:lineWidth1="230"
:lineWidth2="240"
class="coolingOut-line"
></line-children>
<!-- 供冷区出水阀 -->
<div class="coolingIn-vavle">
<div class="water-flow-li">
<span
@click="goControlList(coolingOutletBuild, null, '裙楼供冷出水阀')"
style="cursor: pointer"
>裙楼供冷出水阀:</span
>
<span
class="break"
:class="{
connect: hostAndCoolingControlClass(this.coolingOutletBuild),
}"
></span>
<div class="outInre">
{{ getValueByType(this.coolingOutletBuild, "13") }}bar
</div>
</div>
<div class="water-flow-li">
<span
@click="goControlList(coolingOutletGuest, null, '客房供冷出水阀')"
style="cursor: pointer"
>客房供冷出水阀:</span
>
<span
class="break"
:class="{
connect: hostAndCoolingControlClass(this.coolingOutletGuest),
}"
></span>
<div class="outInre">
{{ getValueByType(this.coolingOutletGuest, "13") }}bar
</div>
</div>
</div>
<line-children
:angle1="-110"
:angle2="0"
:lineWidth1="170"
:lineWidth2="240"
class="coolingIn-line"
></line-children>
<!--供暖区进水阀 -->
<div class="hotOut-vavle">
<div class="water-flow-li">
<span
@click="goControlList(hotInletBuild, null, '裙楼供暖进水阀')"
style="cursor: pointer"
>裙楼供暖进水阀:</span
>
<span
class="break"
:class="{ connect: hostAndCoolingControlClass(this.hotInletBuild) }"
></span>
<div class="outInre">
{{ getValueByType(this.hotInletBuild, "13") }}bar
</div>
</div>
<div class="water-flow-li">
<span
@click="goControlList(hotInletGuest, null, '客房供暖进水阀')"
style="cursor: pointer"
>客房供暖进水阀:</span
>
<span
class="break"
:class="{ connect: hostAndCoolingControlClass(this.hotInletGuest) }"
></span>
<div class="outInre">
{{ getValueByType(this.hotInletGuest, "13") }}bar
</div>
</div>
</div>
<line-children
:angle1="-45"
:angle2="0"
:lineWidth1="90"
:lineWidth2="240"
class="hotOut-line"
></line-children>
<!--供暖区出水阀 -->
<div class="hotIn-vavle">
<div class="water-flow-li">
<span
@click="goControlList(hotOutletBuild, null, '裙楼供暖出水阀')"
style="cursor: pointer"
>裙楼供暖出水阀:</span
>
<span
class="break"
:class="{
connect: hostAndCoolingControlClass(this.hotOutletBuild),
}"
></span>
<div class="outInre">
{{ getValueByType(this.hotOutletBuild, "13") }}bar
</div>
</div>
<div class="water-flow-li">
<span
@click="goControlList(hotOutletGuest, null, '客房供暖出水阀')"
style="cursor: pointer"
>客房供暖出水阀:</span
>
<span
class="break"
:class="{
connect: hostAndCoolingControlClass(this.hotOutletGuest),
}"
></span>
<div class="outInre">
{{ getValueByType(this.hotOutletGuest, "13") }}bar
</div>
</div>
</div>
<line-children
:angle1="-45"
:angle2="0"
:lineWidth1="170"
:lineWidth2="240"
class="hotIn-line"
></line-children>
</div>
<!-- 报警弹框内容 -->
<el-dialog
title="报警内容"
:visible.sync="openDialog"
width="680px"
append-to-body
>
<el-table :data="alarmList" height="600px">
<el-table-column
prop="otherName"
label="报警位置"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
prop="curTime"
label="报警时间"
:show-overflow-tooltip="true"
></el-table-column>
</el-table>
</el-dialog>
<!-- 控制弹框内容 -->
<el-dialog
:title="controlTitle"
:visible.sync="openControlDialog"
width="850px"
append-to-body
class="monitor-dialog"
>
<div class="device-container">
<div class="device-li">
<div class="device-name">手自动切换</div>
<div class="device-name">手动控制</div>
<div
class="device-name"
v-if="hasFrequencySet(controlArr[0], 'frequencyAutotext')"
>
频率手自动切换
</div>
<div
v-if="hasFrequencySet(controlArr[0], 'frequency')"
class="device-name"
>
频率反馈
</div>
<div
v-if="hasFrequencySet(controlArr[0], 'frequencySet')"
class="device-name"
>
频率调节
</div>
</div>
<div
class="device-li"
v-for="(item, index) in controlArr"
:key="index + 1"
>
<div class="device-name">
<el-switch
style="display: block"
v-model="item.automaticText"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="手动"
inactive-text="自动"
@change="handleAutomaticText(item)"
>
</el-switch>
</div>
<div class="device-name">
<el-switch
style="display: block"
v-model="item.controlText"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="开启"
inactive-text="停止"
@change="handleControlText(item)"
>
</el-switch>
</div>
<!-- 频率-手自动切换 -->
<div
class="device-name"
v-if="hasFrequencySet(controlArr[0], 'frequencyAutotext')"
>
<el-switch
style="display: block"
v-model="item.frequencyAutotext"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="手动"
inactive-text="自动"
@change="handleFrequencyAutomaticText(item)"
>
</el-switch>
</div>
<div
class="device-name2"
v-if="hasFrequencySet(controlArr[0], 'frequency')"
>
{{ item.frequency }}Hz
</div>
<!-- 频率调节 -->
<div v-if="hasFrequencySet(controlArr[0], 'frequencySet')">
<el-input
v-model="item.frequencySet"
size="mini"
@keyup.enter.native="handleEnter(item, $event)"
@input="handleInput(item)"
@blur="handleBlur()"
:disabled="!item.frequencyAutotext"
></el-input>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import {
weatherData,
sysPerformance,
oneKeyButton,
monitorList,
operationConrol,
systemMode,
runTime,
} from "@/api/centerairC/sysMonitor";
import LineChildren from "./components/lineChildren.vue";
import { alarmRecordList } from "@/api/alarm/alarmRecord";
import { policyListData } from "@/api/centerairC/strategy";
import { getDay } from "@/utils/datetime";
export default {
components: { LineChildren },
data() {
return {
loading: false,
weatherObj: {},
performanceObj: {},
hostList: [], //主机列表
coolingPump: [], //冷却泵
freezingPump: [], //冷冻泵
coolingTower: [], //冷却塔
frozenValve: [], //冷冻蝶阀
coolingValue: [], //冷却蝶阀
coolingTowerInlet: [], //冷却塔进水阀
coolingTowerOutlet: [], //冷却塔出水阀
coolingOutletBuild: [], //裙楼供冷出水阀
coolingInletBuild: [], //裙楼供冷进水阀
coolingOutletGuest: [], //客房供冷出水阀
coolingInletGuest: [], //客房供冷进水阀
hotOutletBuild: [], //裙楼供暖出水阀
hotInletBuild: [], //裙楼供暖进水阀
hotOutletGuest: [], //客房供暖出水阀
hotInletGuest: [], //客房供暖进水阀
// 频率反馈
steamHeatingPumpHz1: "",
steamHeatingPumpHz2: "",
steamHeatingPumpHz3: "",
steamHeatingHzAndRun: [], //运行和频率
steamHeatingFire: [], //热水锅炉火力
steamHeatingTem: [], //热量计供回水温度数组
steamHeatingInTem: "", //回水温度
steamHeatingOutTem: "", //供水温度
freezingManifold: [], //冷冻总管
isShowOn: false, //一键启停,false是Off,true显示On
oneKeyButtonId: "",
// 主机负载
hostLoad1: "",
hostLoad2: "",
hostLoad3: "",
// 主机设定温度
hostSetTem1: "",
hostSetTem2: "",
hostSetTem3: "",
// 冷却泵频率反馈
coolingPumpHz1: "",
coolingPumpHz2: "",
coolingPumpHz3: "",
coolingPumpHz4: "",
coolingPumpHz5: "",
// 冷冻泵频率反馈
freezingPumpHz1: "",
freezingPumpHz2: "",
freezingPumpHz3: "",
freezingPumpHz4: "",
freezingPumpHz5: "",
// 冷却塔风机频率
coolingTowerHz3: "",
coolingTowerHz2: "",
coolingTowerHz1: "",
// 冷冻泵进出水温度
freezingInTem: "",
freezingOutTem: "",
// 冷冻水流
freezingOutWater: "",
// 冷冻泵进出压力
freezingInPre: "",
freezingOutPre: "",
// 冷却进出水温度
coolingInTem: "",
coolingOutTem: "",
// 报警标志
isWarning: false,
// 报警列表
alarmList: [],
// 系统模式
sysStatus: "",
// 模式提示
startOrStopStatus: "",
openDialog: false,
timer: null, // 用于存储定时器 ID
currentDate: new Date(),
nowTimer: null,
isShowWarning: false, //是否有报警
dayData: "", //监测天数
// 控制弹框
controlTitle: "",
openControlDialog: false,
controlArr: [],
hostAddTime: "", //主机加载时间
hostReduceTime: "", //主机减载时间
};
},
computed: {
formattedDate() {
const year = this.currentDate.getFullYear();
const month = String(this.currentDate.getMonth() + 1).padStart(2, "0");
const day = String(this.currentDate.getDate()).padStart(2, "0");
const hours = String(this.currentDate.getHours()).padStart(2, "0");
const minutes = String(this.currentDate.getMinutes()).padStart(2, "0");
const seconds = String(this.currentDate.getSeconds()).padStart(2, "0");
const weekDays = [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
];
const weekDay = weekDays[this.currentDate.getDay()];
return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`;
},
},
created() {},
mounted() {
// 在组件挂载后尝试进入全屏
this.requestFullscreen();
// 首次进入页面时执行
this.getWeatherData();
this.getSystemMode();
this.getPerformance();
this.getOneKeyButton();
this.getMonitorList();
this.getSteamHeatingData();
this.getAlarnStatus();
this.getDayData();
// 设置定时器，每 10 秒执行一次
this.timer = setInterval(() => {
this.getWeatherData();
this.getSystemMode();
this.getPerformance();
this.getOneKeyButton();
this.getMonitorList();
this.getSteamHeatingData();
this.getAlarnStatus();
this.getDayData();
}, 10000);
// 每秒更新一次时间
this.nowTimer = setInterval(() => {
this.currentDate = new Date();
}, 1000);
},
beforeDestroy() {
// 组件销毁前清除定时器
if (this.timer) {
clearInterval(this.timer);
}
// 组件销毁前清除定时器
if (this.nowTimer) {
clearInterval(this.nowTimer);
}
// 在组件销毁前退出全屏
// this.exitFullscreen();
},
methods: {
// 全屏操作
requestFullscreen() {
const element = document.documentElement;
console.log("全屏操作没有进行中啊~~~~~~~~~~~~~~~~", element);
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
// Firefox
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
// Chrome, Safari and Opera
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
// IE/Edge
element.msRequestFullscreen();
}
},
// 退出全屏
exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
// Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
// Chrome, Safari and Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
// IE/Edge
document.msExitFullscreen();
}
},
// 进入系统首页
goSys() {
// 退出全屏
// this.exitFullscreen();
this.$router.push("/");
},
// 返回上一页
goBack() {
// 退出全屏
// this.exitFullscreen();
window.history.go(-2);
},
// 冷机性能
goPerformance() {
// 退出全屏
// this.exitFullscreen();
this.$router.push("/performance");
},
// 系统控制
goControl() {
// 退出全屏
// this.exitFullscreen();
this.$router.push("/centerairC/monitorControl/sysControl");
},
// 监测天数
getDayData() {
runTime().then((res) => {
if (res.code == 200) {
this.dayData = res.data.runTime;
}
});
},
// 主机参数
goHostDetail(item, val) {
console.log("item", item);
let hostId = item.properties[0].deviceLedgerId;
this.$router.push({
path: "/hostDetails",
query: {
hostId: hostId,
hostName: item.deviceName,
isMagnetic: val,
},
});
},
// 获取天气相关数据
getWeatherData() {
weatherData().then((res) => {
if (res.code == 200) {
this.weatherObj = res.data;
}
});
},
// 获取系统性能数据
getPerformance() {
sysPerformance().then((res) => {
if (res.code == 200) {
this.performanceObj = res.data;
}
});
},
// 获取当前系统模式/启动、停止运行状态/报警列表
getSystemMode() {
let data = {
systemType: "0",
paramType: "27",
};
systemMode(data).then((res) => {
console.log("当前系统模式与报警列表返回", res);
if (res.code == 200) {
this.sysStatus = res.data.autoType;
this.alarmList = res.data.alarmList;
if (res.data.alarmList.length > 0) {
this.isWarning = true;
} else {
this.isWarning = false;
}
this.startOrStopStatus = res.data.startOrStopStatus;
}
});
},
showAlarm() {
this.openDialog = true;
},
// 获取一键启停信息
getOneKeyButton() {
return new Promise((resolve, reject) => {
let data = {
systemType: 0,
paramType: "27",
};
oneKeyButton(data)
.then((res) => {
console.log("一键启停返回信息", res);
if (res.code === 200) {
this.oneKeyButtonId = res.data.id;
if (Number(res.data.curValue) == 0) {
this.isShowOn = false;
} else {
this.isShowOn = true;
}
} else {
this.oneKeyButtonId = "";
this.isShowOn = false;
}
// 成功时解析 Promise
resolve(res);
})
.catch((error) => {
// 失败时拒绝 Promise
reject(error);
});
});
},
// 一键启停按钮
handleOneKeyButton() {
let param = "";
let paramText = "";
if (this.isShowOn) {
// this.isShowOn为true代表ON,此时点击按钮想OFF
param = 0;
paramText = "一键关闭";
} else {
param = 1;
paramText = "一键开启";
}
this.$confirm(`确定要${paramText}吗?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
let data = {
id: this.oneKeyButtonId,
param: param,
};
operationConrol([data])
.then((res) => {
if (res.code == 200) {
this.$modal.msgSuccess("指令下发成功!");
// 开启 loading 效果
this.loading = true;
// 更新状态;
setTimeout(() => {
this.getOneKeyButton().finally(() => {
// 关闭 loading 效果
this.loading = false;
});
}, 5000);
} else {
this.getOneKeyButton();
}
})
.catch((error) => {
console.log("请求发生错误，更新设备状态", error);
this.getOneKeyButton();
});
})
.catch(() => {});
},
// 主机加减载时间min
getPolicyList() {
return new Promise((resolve, reject) => {
let data = {
systemType: "0",
funPolicyType: "1",
};
policyListData(data)
.then((res) => {
console.log("策略返回res", res);
if (res.code == 200) {
let dataList = res.rows;
// 筛选出主机->加减载时间
dataList.forEach((val) => {
if (val.name === "主机策略") {
val.values.forEach((child) => {
if (child.pointName === "主机加载时间") {
this.hostAddTime = child.curValue;
}
if (child.pointName === "主机减载时间") {
this.hostReduceTime = child.curValue;
}
});
}
});
} else {
this.policyList = [];
}
// 成功时解析 Promise
resolve(res);
})
.catch((error) => {
// 失败时拒绝 Promise
reject(error);
});
});
},
// 系统监测数据
getMonitorList() {
monitorList({ systemType: 0 }).then((res) => {
if (res.code === 200) {
console.log("设备监测列表返回", res);
// 初始化各个设备列表
this.hostList = [];
this.coolingPump = [];
this.freezingPump = [];
this.coolingTower = [];
this.frozenValve = [];
this.coolingValue = [];
this.coolingTowerInlet = [];
this.coolingTowerOutlet = [];
this.freezingManifold = [];
this.coolingOutletBuild = []; //裙楼供冷出水阀
this.coolingInletBuild = []; //裙楼供冷进水阀
this.coolingOutletGuest = []; //客房供冷出水阀
this.coolingInletGuest = []; //客房供冷进水阀
this.hotOutletBuild = []; //裙楼供暖出水阀
this.hotInletBuild = []; //裙楼供暖进水阀
this.hotOutletGuest = []; //客房供暖出水阀
this.hotInletGuest = []; //客房供暖进水阀
res.rows.forEach((row) => {
switch (row.name) {
case "0":
this.hostList = this.processDeviceList(row.values);
console.log("主机列表", this.hostList);
break;
case "1":
this.coolingPump = this.processDeviceList(row.values);
console.log("冷却泵列表", this.coolingPump);
break;
case "2":
this.freezingPump = this.processDeviceList(row.values);
console.log("冷冻泵列表", this.freezingPump);
break;
case "3":
this.coolingTower = this.processDeviceList(row.values);
console.log("冷却塔列表", this.coolingTower);
break;
case "4":
this.frozenValve = this.processDeviceList(row.values);
console.log("冷冻蝶阀列表", this.frozenValve);
break;
case "7":
this.coolingValue = this.processDeviceList(row.values);
console.log("冷却蝶阀列表", this.coolingValue);
break;
case "8":
this.coolingTowerInlet = this.processDeviceList(row.values);
console.log("冷却塔进水阀列表", this.coolingTowerInlet);
break;
case "9":
this.coolingTowerOutlet = this.processDeviceList(row.values);
console.log("冷却塔出水阀列表", this.coolingTowerOutlet);
break;
case "15":
this.freezingManifold = row.values;
console.log("冷冻总管", this.freezingManifold);
this.freezingManifoldData();
break;
case "18":
let buildInData = row.values;
buildInData.forEach((item) => {
if (item.deviceName.includes("供冷")) {
this.coolingInletBuild.push(item);
}
if (item.deviceName.includes("供暖")) {
this.hotInletBuild.push(item);
}
});
console.log("裙楼供冷进水阀", this.coolingInletBuild);
console.log("裙楼供暖进水阀", this.hotInletBuild);
break;
case "19":
let buildOutData = row.values;
buildOutData.forEach((item) => {
if (item.deviceName.includes("供冷")) {
this.coolingOutletBuild.push(item);
}
if (item.deviceName.includes("供暖")) {
this.hotOutletBuild.push(item);
}
});
console.log("裙楼供冷出水阀", this.coolingOutletBuild);
console.log("裙楼供暖出水阀", this.hotOutletBuild);
break;
case "20":
let guestInData = row.values;
guestInData.forEach((item) => {
if (item.deviceName.includes("供冷")) {
this.coolingInletGuest.push(item);
}
if (item.deviceName.includes("供暖")) {
this.hotInletGuest.push(item);
}
});
console.log("客房供冷进水阀", this.coolingInletGuest);
console.log("客房供暖进水阀", this.hotInletGuest);
break;
case "21":
let guestOutData = row.values;
guestOutData.forEach((item) => {
if (item.deviceName.includes("供冷")) {
this.coolingOutletGuest.push(item);
}
if (item.deviceName.includes("供暖")) {
this.hotOutletGuest.push(item);
}
});
console.log("客房供冷出水阀", this.coolingOutletGuest);
console.log("客房供暖出水阀", this.hotOutletGuest);
break;
default:
break;
}
});
}
});
},
// 获取蒸汽锅炉运行监测数据
getSteamHeatingData() {
monitorList({ systemType: 3 }).then((res) => {
if (res.code === 200) {
console.log("设备监测列表返回", res);
// 初始化各个设备列表
this.steamHeatingHzAndRun = []; //频率和运行状态
this.steamHeatingFire = []; //热水锅炉火力
this.steamHeatingTem = []; //热量计供回水温度
res.rows.forEach((row) => {
switch (row.name) {
case "11":
this.steamHeatingHzAndRun = this.processDeviceList(row.values);
console.log(
"裙蒸汽锅炉频率和运行状态",
this.steamHeatingHzAndRun
);
break;
case "25":
this.steamHeatingFire = this.processDeviceList(row.values);
console.log("裙蒸汽锅炉火力", this.steamHeatingFire);
break;
case "6":
this.steamHeatingTem = row.values;
console.log("裙蒸汽锅炉热量计供回水温度", this.steamHeatingTem);
this.steamHeatingTem.forEach((element) => {
if (
element.collectName.includes("回水温度") &&
element.paramType == "12"
) {
this.steamHeatingInTem = element.collectValue;
}
if (
element.collectName.includes("供水温度") &&
element.paramType == "12"
) {
this.steamHeatingOutTem = element.collectValue;
}
});
break;
default:
break;
}
});
}
});
},
// 封装一个通用函数来处理设备列表
processDeviceList(values) {
const deviceList = [];
// 遍历每个设备属性
values.forEach((item) => {
// 提取设备编号
const match = item.deviceName.match(/(\d+)号/);
if (match) {
const deviceNumber = parseInt(match[1]);
// 如果 deviceList 中对应编号的对象还不存在，则创建一个新对象
if (!deviceList[deviceNumber - 1]) {
deviceList[deviceNumber - 1] = {
deviceName: item.deviceName,
properties: [],
};
}
// 将当前属性添加到对应设备的 properties 数组中
deviceList[deviceNumber - 1].properties.push(item);
}
});
// 过滤掉 deviceList 中可能存在的空元素
return deviceList.filter((item) => item);
},
// 主机负载
hostLoadData(index) {
// 从 this.hostList 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < this.hostList.length; i++) {
const device = this.hostList[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
// 遍历 properties 数组，如果当前对象paramType === 28表示主机负载
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (item.paramType === "28") {
// 动态构造属性名
const propertyName = `hostLoad${index}`;
// 使用方括号语法动态设置属性值
this[propertyName] = item.collectValue;
return true;
}
}
// 否则代表启停控制中的停止
return false;
},
// 主机启停状态
hostListControlClass(index) {
// 从 this.hostList 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < this.hostList.length; i++) {
const device = this.hostList[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
// 遍历 properties 数组，如果当前对象paramType === 2并且item.collectValue !== "0.00"则便是启停控制中的开启
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (
item.paramType === "2" &&
Number(item.collectValue) !== 0 &&
item.collectName.includes("启停")
) {
return true;
}
}
// 否则代表启停控制中的停止
return false;
},
// 主机运行状态
hostListRunClass(index) {
// 从 this.hostList 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < this.hostList.length; i++) {
const device = this.hostList[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
// 遍历 properties 数组，如果当前对象paramType === 1并且item.collectValue !== "0.00"则便是运行状态中的运行
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (item.paramType === "1" && Number(item.collectValue) !== 0) {
return true;
}
}
// 否则代表运行状态中的不运行
return false;
},
// 主机冷却水流信号
hostCoolingWaterFlowClass(index) {
// 从 this.hostList 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < this.hostList.length; i++) {
const device = this.hostList[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
// 遍历 properties 数组，如果当前对象paramType === 21并且item.collectValue !== "0.00"则便是主机冷却水流信号：接通
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (item.paramType === "21" && Number(item.collectValue) !== 0) {
return true;
}
}
// 否则代表主机冷却水流信号：断开
return false;
},
// 主机冷冻水流信号
hostFreezeWaterFlowClass(index) {
// 从 this.hostList 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < this.hostList.length; i++) {
const device = this.hostList[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
// 遍历 properties 数组，如果当前对象paramType === 20并且item.collectValue !== "0.00"则便是主机冷冻水流信号：接通
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (item.paramType === "20" && Number(item.collectValue) !== 0) {
return true;
}
}
// 否则代表主机冷冻水流信号：断开
return false;
},
// 主机设定温度
hostSetTemClass(index) {
// 从 this.hostList 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < this.hostList.length; i++) {
const device = this.hostList[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
// 遍历 properties 数组，如果当前对象paramType === 4则有频率反馈
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (
item.paramType === "12" &&
item.collectName.includes("冷水控制设定值")
) {
// 动态构造属性名
const propertyName = `hostSetTem${index}`;
// 使用方括号语法动态设置属性值
this[propertyName] = item.collectValue;
// this.hostSetTem[index] = item.collectValue;
return true;
}
}
// 否则代表运行状态中的不运行
return false;
},
// 冷却泵运行状态
coolingPumpRunClass(index) {
// 从 this.coolingPump 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < this.coolingPump.length; i++) {
const device = this.coolingPump[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
// 遍历 properties 数组，如果当前对象paramType === 1并且item.collectValue !== "0.00"则便是运行状态中的运行
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (item.paramType === "1" && Number(item.collectValue) !== 0) {
return true;
}
}
// 否则代表运行状态中的不运行
return false;
},
// 冷却泵频率
coolingPumpHz(index) {
// 从 this.coolingPump 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < this.coolingPump.length; i++) {
const device = this.coolingPump[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
// 遍历 properties 数组，如果当前对象paramType === 4则有频率反馈
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (item.paramType === "4") {
// 动态构造属性名
const propertyName = `coolingPumpHz${index}`;
// 使用方括号语法动态设置属性值
this[propertyName] = item.collectValue;
// this.coolingPumpHz[index] = item.collectValue;
return true;
}
}
// 否则代表运行状态中的不运行
return false;
},
// 冷冻泵运行状态
freezingPumpRunClass(index) {
// 从 this.freezingPump 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < this.freezingPump.length; i++) {
const device = this.freezingPump[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
// 遍历 properties 数组，如果当前对象paramType === 1并且item.collectValue !== "0.00"则便是运行状态中的运行
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (item.paramType === "1" && Number(item.collectValue) !== 0) {
return true;
}
}
// 否则代表运行状态中的不运行
return false;
},
//冷冻泵频率
freezingPumpHz(index) {
// 从 this.freezingPump 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < this.freezingPump.length; i++) {
const device = this.freezingPump[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
// 遍历 properties 数组，如果当前对象paramType === 4则有频率反馈
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (item.paramType === "4") {
// 动态构造属性名
const propertyName = `freezingPumpHz${index}`;
// 使用方括号语法动态设置属性值
this[propertyName] = item.collectValue;
// this.freezingPumpHz[index] = item.collectValue;
return true;
}
}
// 否则代表运行状态中的不运行
return false;
},
// 冷却塔风机运行状态,index为多少号风机,1表示1号风机;item表示风机x
coolingTowerRunClass(index, item) {
// 从 this.coolingTower 中查找 deviceName 第一个数字与 index 相同的对象
let targetDevice = null;
for (let i = 0; i < this.coolingTower.length; i++) {
const device = this.coolingTower[i];
const deviceName = device.deviceName.toString();
// 使用正则表达式匹配 deviceName 开头的数字,提取 deviceName 的第一个词（以非数字字符分割）
const firstWordMatch = deviceName.match(/^\d+/);
if (firstWordMatch && firstWordMatch[0] === index.toString()) {
targetDevice = device;
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
// 创建一个新数组，用于存储 paramType === 1 的对象
const filteredProperties = [];
let filterItem = {};
for (let i = 0; i < properties.length; i++) {
// console.log('properties[i].paramType',properties[i].paramType)
if (properties[i].paramType === "1") {
filteredProperties.push(properties[i]);
// filterItem = properties[i]
}
}
// // 将处理后的对象添加到 deviceList 中
// if (Object.keys(filterItem).length > 1) {
// filteredProperties.push(filterItem);
// }
// console.log("paramType为1的对象", filteredProperties);
// console.log("index, item", index, item);
// 根据 index 和 item 生成目标属性名称
const towerNumber = index;
const targetPropertyName = `${towerNumber}号冷却塔风机${item}运行`;
// console.log("targetPropertyName",targetPropertyName)
// 在新数组中查找与目标名称匹配的对象，并检查其 collectValue 是否不为 "0.00"
for (let i = 0; i < filteredProperties.length; i++) {
const collectName = filteredProperties[i].collectName;
if (
collectName.includes(`${towerNumber}号冷却塔风机${item}`) &&
collectName.includes("运行") &&
Number(filteredProperties[i].collectValue) !== 0
) {
if (index === 0 && item === 1) {
// console.log(
// "返回的true",
// filteredProperties[i].collectName === targetPropertyName &&
// Number(filteredProperties[i].collectValue) !== 0
// );
}
return true;
}
}
// 否则代表运行状态中的不运行
return false;
},
// 冷却塔风机频率,index为多少号风机,1表示1号风机;item表示风机x
coolingTowerHz(index, item) {
// 从 this.coolingTower 中查找 deviceName 第一个数字与 index 相同的对象
let targetDevice = null;
for (let i = 0; i < this.coolingTower.length; i++) {
const device = this.coolingTower[i];
const deviceName = device.deviceName.toString();
// 使用正则表达式匹配 deviceName 开头的数字,提取 deviceName 的第一个词（以非数字字符分割）
const firstWordMatch = deviceName.match(/^\d+/);
if (firstWordMatch && firstWordMatch[0] === index.toString()) {
targetDevice = device;
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
// 创建一个新数组，用于存储 paramType === 4 的对象
const filteredProperties = [];
let filterItem = {};
for (let i = 0; i < properties.length; i++) {
// console.log('properties[i].paramType',properties[i].paramType)
if (properties[i].paramType === "4") {
filteredProperties.push(properties[i]);
// filterItem = properties[i]
}
}
// // 将处理后的对象添加到 deviceList 中
// if (Object.keys(filterItem).length > 1) {
// filteredProperties.push(filterItem);
// }
// console.log("paramType为4的对象", filteredProperties);
// console.log("index, item", index, item);
// 根据 index 和 item 生成目标属性名称
const towerNumber = index;
const targetPropertyName = `${towerNumber}号冷却塔风机${item}频率反馈`;
// console.log("targetPropertyName",targetPropertyName)
// 在新数组中查找与目标名称匹配的对象，并检查其 collectValue 是否不为 "0.00"
for (let i = 0; i < filteredProperties.length; i++) {
const collectName = filteredProperties[i].collectName;
if (
collectName.includes(`${towerNumber}号冷却塔风机${item}`) &&
collectName.includes("频率反馈")
) {
// 动态构造 coolingTowerHz 相关属性名
const coolingTowerHzPropertyName = `coolingTowerHz${towerNumber}`;
// console.log(
// "coolingTowerHzPropertyName---",
// coolingTowerHzPropertyName
// );
// 获取 collectValue 转换为数字后的值
const value = Number(filteredProperties[i].collectValue);
// 使用方括号语法动态设置属性值
this[coolingTowerHzPropertyName] = value;
// console.log(
// "coolingTowerHzPropertyName])",
// coolingTowerHzPropertyName
// );
// console.log("Number(filteredProperties[i].collectValue)", value);
return true;
}
}
// 否则代表运行状态中的不运行
return false;
},
// 冷却塔出水蝶阀启停状态
towerValveControlClass(index) {
// 从 this.coolingTowerOutlet 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < this.coolingTowerOutlet.length; i++) {
const device = this.coolingTowerOutlet[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
let valveOpenFeedbackFound = false;
let valveCloseFeedbackFound = false;
// 遍历 properties 数组
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (item.paramType === "7") {
// console.log("item.collectName", item.collectName);
// console.log("item.collectValue", item.collectValue);
// 阀开到位是开启
if (
item.collectName.includes("开到位") &&
Number(item.collectValue) == 1
) {
valveOpenFeedbackFound = true;
}
// 阀关到位是关闭
if (
item.collectName.includes("关到位") &&
Number(item.collectValue) == 0
) {
valveCloseFeedbackFound = true;
}
}
}
// 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
return valveOpenFeedbackFound && valveCloseFeedbackFound;
},
// 冷却塔进水蝶阀启停状态
towerValveInControlClass(index) {
// 从 this.coolingTowerInlet 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < this.coolingTowerInlet.length; i++) {
const device = this.coolingTowerInlet[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
let valveOpenFeedbackFound = false;
let valveCloseFeedbackFound = false;
// 遍历 properties 数组
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (item.paramType === "7") {
// console.log("item.collectName", item.collectName);
// console.log("item.collectValue", item.collectValue);
// 阀开到位是开启
if (
item.collectName.includes("开到位") &&
Number(item.collectValue) == 1
) {
valveOpenFeedbackFound = true;
}
// 阀关到位是关闭
if (
item.collectName.includes("关到位") &&
Number(item.collectValue) == 0
) {
valveCloseFeedbackFound = true;
}
}
}
// 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
return valveOpenFeedbackFound && valveCloseFeedbackFound;
},
// 冷冻蝶阀启停状态
frozenValveControlClass(index) {
// 从 this.frozenValve 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < this.frozenValve.length; i++) {
const device = this.frozenValve[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
let valveOpenFeedbackFound = false;
let valveCloseFeedbackFound = false;
// 遍历 properties 数组
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (item.paramType === "7") {
// 阀开到位是开启
if (
item.collectName.includes("开到位") &&
Number(item.collectValue) !== 0
) {
valveOpenFeedbackFound = true;
}
// 阀关到位是关闭
if (
item.collectName.includes("关到位") &&
Number(item.collectValue) === 0
) {
valveCloseFeedbackFound = true;
}
}
}
// 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
return valveOpenFeedbackFound && valveCloseFeedbackFound;
},
// 冷却蝶阀启停状态
coolingValueControlClass(index) {
// 从 this.coolingValue 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < this.coolingValue.length; i++) {
const device = this.coolingValue[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
let valveOpenFeedbackFound = false;
let valveCloseFeedbackFound = false;
// 遍历 properties 数组
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (item.paramType === "7") {
// 阀开到位是开启
if (
item.collectName.includes("开到位") &&
Number(item.collectValue) !== 0
) {
valveOpenFeedbackFound = true;
}
// 阀关到位是关闭
if (
item.collectName.includes("关到位") &&
Number(item.collectValue) === 0
) {
valveCloseFeedbackFound = true;
// console.log("冷冻蝶阀阀关到位应该是true才对呀");
}
}
}
// 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
return valveOpenFeedbackFound && valveCloseFeedbackFound;
},
// 冷冻总管数据 供回水温度、压力等
freezingManifoldData(index, val) {
console.log("this.freezingManifold", this.freezingManifold);
// 检查 freezingManifold 长度是否足够
if (this.freezingManifold.length <= index) {
return false;
}
this.freezingManifold.forEach((item) => {
if (item.collectName === "冷冻供水温度") {
this.freezingOutTem = item.collectValue;
console.log("item.collectName", item.collectName);
} else if (item.collectName === "冷冻回水温度") {
this.freezingInTem = item.collectValue;
} else if (item.collectName === "冷冻供水压力") {
this.freezingOutPre = item.collectValue;
} else if (item.collectName === "冷冻回水压力") {
this.freezingInPre = item.collectValue;
} else if (item.collectName === "冷却供水温度") {
this.coolingOutTem = item.collectValue;
} else if (item.collectName === "冷却回水温度") {
this.coolingInTem = item.collectValue;
} else if (item.collectName === "总冷量计瞬时流量") {
this.freezingOutWater = item.collectValue;
}
});
return true;
},
// 裙楼-客房进出水阀启停状态
hostAndCoolingControlClass(item) {
// 检查数组中是否存在 paramType 为 "7" 的对象
const hasParamType7 = item.some((obj) => obj.paramType === "7");
if (!hasParamType7) {
// 如果没有 paramType 为 "7" 的对象
for (let i = 0; i < item.length; i++) {
if (item[i].paramType === "2") {
if (Number(item[i].collectValue) !== 0) {
return true;
}
}
}
} else {
// 如果有 paramType 为 "7" 的对象
for (let i = 0; i < item.length; i++) {
if (item[i].paramType === "7") {
const { collectName, collectValue } = item[i];
if (
(collectName.includes("开到位") && Number(collectValue) === 1) ||
(collectName.includes("关到位") && Number(collectValue) === 0)
) {
return true;
}
}
}
}
return false;
},
// 裙楼、客房的进出水压力
getValueByType(arr, targetType) {
const targetItem = arr.find((item) => item.paramType === targetType);
return targetItem ? targetItem.collectValue : 0;
},
// 采暖泵运行状态
steamHeatingPumpRunClass(index) {
// 从 this.steamHeatingHzAndRun 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < this.steamHeatingHzAndRun.length; i++) {
const device = this.steamHeatingHzAndRun[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
// 遍历 properties 数组，如果当前对象paramType === 1并且item.collectValue !== "0.00"则便是运行状态中的运行
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (item.paramType === "1" && Number(item.collectValue) == !0) {
return true;
}
}
// 否则代表运行状态中的不运行
return false;
},
// 采暖泵频率
steamHeatingPumpHz(index) {
// 从 this.steamHeatingHzAndRun 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < this.steamHeatingHzAndRun.length; i++) {
const device = this.steamHeatingHzAndRun[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
// 遍历 properties 数组，如果当前对象paramType === 4则有频率反馈
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (item.paramType === "4") {
// 动态构造属性名
const propertyName = `steamHeatingPumpHz${index}`;
// 使用方括号语法动态设置属性值
this[propertyName] = item.collectValue;
// this.steamHeatingPumpHz[index] = item.collectValue;
return true;
}
}
// 否则代表运行状态中的不运行
return false;
},
// 采暖锅炉运行状态
steamHeatingBoilerRunClass(index) {
// 从 this.steamHeatingFire 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < this.steamHeatingFire.length; i++) {
const device = this.steamHeatingFire[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
const properties = targetDevice.properties;
// 检查 properties 数组是否存在
if (!properties || properties.length === 0) {
return false;
}
// console.log("锅炉列表111", properties);
// 遍历 properties 数组，如果当前对象paramType === 45并且item.collectValue !== "0.00"则便是运行状态中的运行
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (
item.paramType === "45" &&
item.collectName.includes("火力") &&
Number(item.collectValue) !== 0
) {
return true;
}
}
// 否则代表运行状态中的不运行
return false;
},
// 采暖锅炉温度
getTemperature(values, targetName) {
// console.log("values和targetName", values, targetName);
const targetItem = values.find((item) =>
item.collectName.includes(targetName)
);
// console.log("得到的targetItem", targetItem.collectValue);
return targetItem ? targetItem.collectValue : "";
},
// 采暖锅炉跳转
goBoilerDetail(item, val) {
// console.log("item", item);
// let hostId = item.properties[0].deviceLedgerId;
this.$router.push({
path: "/hotWaterBoilerDetails",
// query: {
// hostId: hostId,
// hostName: item.deviceName,
// isMagnetic: val,
// },
});
},
// 采暖泵跳转
goPumpDetail() {
this.$router.push({
path: "/heatingPumpDetails",
});
},
// 报警列表
getAlarnStatus() {
let data = {
pageNum: 1,
pageSize: 10,
status: "0",
};
let timeArr = [getDay(0), getDay(0)];
alarmRecordList(this.addDateRange(data, timeArr)).then((res) => {
if (res.code == 200 && res.rows.length > 0) {
this.isShowWarning = true;
} else {
this.isShowWarning = false;
}
});
},
goWarning() {
// this.exitFullscreen();
this.$router.push("/alarm/alarmRecord");
},
// 控制
goControlList(item, index, name) {
console.log("item1111111111111111111", item, index, name);
// 处理properties值,
this.controlArr = [];
this.controlTitle = "";
// 初始化一个空对象来存储非蝶阀处理后的结果
let deviceItem = {};
let properties;
if (index !== undefined && index !== null && index !== "") {
// 从 item 中查找 deviceName 包含与 index 相同数字的对象
let targetDevice = null;
for (let i = 0; i < item.length; i++) {
const device = item[i];
const indexStr = index.toString();
const deviceName = device.deviceName.toString();
for (let j = 0; j < indexStr.length; j++) {
if (deviceName.includes(indexStr[j])) {
this.controlTitle = deviceName;
deviceItem.name = deviceName;
console.log("this.controlTitle", this.controlTitle);
targetDevice = device;
break;
}
}
if (targetDevice) {
break;
}
}
// 如果未找到匹配的设备，返回 false
if (!targetDevice) {
return false;
}
// 获取匹配设备的 properties 数组
properties = targetDevice.properties;
console.log("匹配的当前的设备数据", properties);
} else {
// 如果 index 未传值，直接将 item 当作 properties
properties = item;
this.controlTitle = name;
deviceItem.name = name;
console.log("index 未传值，直接处理 item 作为 properties", properties);
}
console.log("匹配的当前的设备数据", properties);
properties.forEach((child) => {
if (child.collectName) {
// 手动控制
if (
child.paramType === "2" &&
!child.collectName.includes("阀") &&
child.collectName.includes("启停")
) {
deviceItem.controlText =
Number(child.collectValue) == 0 ? false : true;
deviceItem.controlId = child.id;
}
// 阀门的-手动控制
else if (
child.paramType === "2" &&
child.collectName.includes("阀")
) {
deviceItem.controlText =
Number(child.collectValue) == 0 ? false : true;
deviceItem.controlId = child.id;
}
// 手自动切换 0自动1手动
else if (
child.paramType === "6" &&
!child.collectName.includes("阀")
) {
deviceItem.automaticText =
Number(child.collectValue) == 0 ? false : true;
deviceItem.automaticId = child.id;
}
// 阀门的-手自动切换
else if (
child.paramType === "6" &&
child.collectName.includes("阀")
) {
deviceItem.automaticText =
Number(child.collectValue) == 0 ? false : true;
deviceItem.automaticId = child.id;
}
// 频率-手自动切换
else if (
child.paramType === "40" &&
!child.collectName.includes("阀")
) {
deviceItem.frequencyAutotext =
Number(child.collectValue) == 0 ? false : true;
deviceItem.frequencyAutotextId = child.id;
}
// 频率调节
else if (
child.paramType === "3" &&
!child.collectName.includes("阀")
) {
deviceItem.frequencySet =
Number(child.collectValue) == 0 ? "0" : child.collectValue;
deviceItem.frequencyId = child.id;
}
// 频率反馈
else if (
child.paramType === "4" &&
child.collectName.includes("频率反馈")
) {
deviceItem.frequency = child.collectValue;
}
}
});
// 将处理后的对象添加到 deviceList 中
if (Object.keys(deviceItem).length > 1) {
this.controlArr.push(deviceItem);
}
console.log("处理后的this.controlArr", this.controlArr);
this.openControlDialog = true;
},
hasFrequencySet(item, name) {
return (
item &&
item.hasOwnProperty(name) &&
item[name] !== null &&
item[name] !== ""
);
},
// 处理输入事件，过滤非数字字符
handleInput(item) {
console.log("校验");
// 实时校验并过滤非数字字符
item.frequencySet = String(item.frequencySet).replace(/[^\d]/g, "");
},
// 失去焦点
handleBlur() {
// this.currentFocusIndex = "";
},
handleEnter(item, event) {
console.log("请求后端", item);
// 失去焦点
event.target.blur();
this.$confirm(
`确定要修改"${item.name}"的频率为:${item.frequencySet} Hz吗?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
this.hadleOperationConrol(item.frequencyId, item.frequencySet);
})
.catch(() => {
// 用户取消操作，需要更新原来的频率
// this.$emit("upList");
});
},
//手动控制
handleControlText(item) {
this.$confirm(
`确定要切换设备"${item.name}"的状态为:${
item.controlText ? "开启" : "停止 吗?"
}`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
// 这里调用请求函数
console.log("请求后台", item.controlText);
let param = null;
if (item.controlText) {
param = 1;
} else {
param = 0;
}
this.hadleOperationConrol(item.controlId, param);
})
.catch(() => {
// 用户取消操作，恢复开关状态
item.controlText = !item.controlText;
console.log("不请求后台");
});
},
// 手自动切换
handleAutomaticText(item) {
this.$confirm(
`确定要切换设备"${item.name}"的状态为:${
item.automaticText ? "手动" : "自动 吗?"
}`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
// 这里调用请求函数
console.log("请求后台", item.automaticText);
let param = null;
if (item.automaticText) {
param = 1;
} else {
param = 0;
}
this.hadleOperationConrol(item.automaticId, param);
})
.catch(() => {
// 用户取消操作，恢复开关状态
item.automaticText = !item.automaticText;
console.log("不请求后台");
});
},
// 频率-手自动切换
handleFrequencyAutomaticText(item) {
this.$confirm(
`确定要切换"${item.name}"的频率手自动状态为:${
item.frequencyAutotext ? "手动" : "自动 吗?"
}`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
// 这里调用请求函数
console.log("请求后台", item.frequencyAutotext);
let param = null;
if (item.frequencyAutotext) {
param = 1;
} else {
param = 0;
}
this.hadleOperationConrol(item.frequencyAutotextId, param);
})
.catch(() => {
// 用户取消操作，恢复开关状态
item.frequencyAutotext = !item.frequencyAutotext;
console.log("不请求后台");
});
},
// 操作
hadleOperationConrol(id, param) {
let data = {
id: id,
param: param,
};
console.log("操作参数", data);
operationConrol([data])
.then((res) => {
if (res.code == 200) {
this.$modal.msgSuccess("指令下发成功!");
// 开启 loading 效果
this.loading = true;
// 更新所有设备状态;
setTimeout(() => {
this.getMonitorList();
this.loading = false;
}, 5000);
} else {
// this.$modal.msgError("操作失败");
console.log("应该更新状态的");
// 更新所有设备状态;
this.getMonitorList();
}
})
.catch((error) => {
console.log("请求发生错误，更新设备状态", error);
// 更新所有设备状态;
this.getMonitorList();
});
},
},
};
</script>
<style lang="scss" scoped>
.monitor {
width: 100%;
min-height: 100vh;
height: auto;
background-color: black;
color: #fff;
.monitor-top {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
flex-wrap: nowrap;
padding: 0.1rem 0.2rem;
position: relative;
.title-left {
width: 3.41rem;
height: 0.8rem;
}
.title-center {
width: 9.46rem;
height: 0.8rem;
}
.title-right {
width: 5.04rem;
height: 0.78rem;
}
.sys-title {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.28rem;
color: #ffffff;
font-weight: bold;
z-index: 100;
cursor: pointer;
}
.nowTime {
position: absolute;
top: 0.37rem;
right: 0.6rem;
font-size: 0.18rem;
color: #ffffff;
font-weight: bold;
z-index: 100;
}
.sys-logo {
width: 1.8rem;
height: 0.5rem;
position: absolute;
top: 0.26rem;
left: 0.8rem;
z-index: 10;
}
.monitor-time {
position: absolute;
top: 0.44rem;
left: 4.2rem;
z-index: 10;
font-size: 0.18rem;
color: #ffffff;
font-weight: bold;
}
.icon_warning {
position: absolute;
top: 0.39rem;
right: 4.4rem;
z-index: 10;
width: 0.35rem;
height: 0.32rem;
margin: 0 0.25rem 0 0.27rem;
cursor: pointer;
/* 添加闪烁动画 */
animation: blink 1s infinite;
}
@keyframes blink {
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.icon_home {
position: absolute;
top: 0.39rem;
right: 4rem;
z-index: 10;
width: 0.35rem;
height: 0.32rem;
margin: 0 0.2rem 0 0.27rem;
cursor: pointer;
}
.back-icon {
position: absolute;
top: 0.39rem;
right: 3.7rem;
z-index: 10;
width: 0.35rem;
height: 0.32rem;
cursor: pointer;
}
}
.monitor-content {
width: 16rem;
min-height: calc(10.74rem - 1rem);
position: relative;
margin-left: calc((100% - 16rem) / 2);
.sys-logo {
width: 1.9rem;
height: 0.56rem;
position: absolute;
top: 0.4rem;
left: 0;
z-index: 10;
}
.sys-title {
background-image: url(../../../assets/images/top.png);
background-size: 100% 100%;
width: 16rem;
height: 0.5rem;
position: absolute;
top: 0;
left: 0;
font-size: 0.22rem;
color: #ffffff;
font-weight: bold;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.monitor-img {
position: absolute;
top: 0.2rem;
left: calc((100% - 15.4rem) / 2);
// left:1rem;
width: 15.4rem;
height: 9.25rem;
z-index: 1;
}
.fan-img1 {
z-index: 10;
position: absolute;
top: 1.04rem;
left: 7.2rem;
width: 0.5rem;
height: 0.5rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
.fan-img2 {
z-index: 10;
position: absolute;
top: 0.98rem;
left: 7.65rem;
width: 0.5rem;
height: 0.5rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
.fan-img3 {
z-index: 10;
position: absolute;
top: 0.92rem;
left: 8.07rem;
width: 0.5rem;
height: 0.5rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
/* 定义 fan 动画关键帧 */
@keyframes fan {
0% {
/* 修改初始旋转角度 */
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
100% {
/* 修改结束旋转角度 */
transform: translateX(-50%) rotateX(60deg) rotateZ(360deg);
}
}
.towerValve1 {
cursor: pointer;
z-index: 10;
position: absolute;
top: 1.43rem;
left: 7.7rem;
width: 0.18rem;
height: 0.18rem;
background-color: #ebebeb;
border-radius: 50%;
}
.towerValve2 {
cursor: pointer;
z-index: 10;
position: absolute;
top: 1.37rem;
left: 8.13rem;
width: 0.18rem;
height: 0.18rem;
background-color: #ebebeb;
border-radius: 50%;
}
.towerValve3 {
cursor: pointer;
z-index: 10;
position: absolute;
top: 1.3rem;
left: 8.56rem;
width: 0.18rem;
height: 0.18rem;
background-color: #ebebeb;
border-radius: 50%;
}
.towerValve4 {
cursor: pointer;
z-index: 10;
position: absolute;
top: 2.35rem;
left: 7.62rem;
width: 0.18rem;
height: 0.18rem;
background-color: #ebebeb;
border-radius: 50%;
}
.towerValve5 {
cursor: pointer;
z-index: 10;
position: absolute;
top: 2.27rem;
left: 8.02rem;
width: 0.18rem;
height: 0.18rem;
background-color: #ebebeb;
border-radius: 50%;
}
.towerValve6 {
cursor: pointer;
z-index: 10;
position: absolute;
top: 2.2rem;
left: 8.44rem;
width: 0.18rem;
height: 0.18rem;
background-color: #ebebeb;
border-radius: 50%;
}
.in-arrow {
position: absolute;
top: 3.46rem;
right: 2.78rem;
transform: rotate(180deg);
width: 0.3rem;
height: 0.45rem;
z-index: 10;
}
.out-arrow {
position: absolute;
top: 3.4rem;
right: 3.05rem;
width: 0.3rem;
height: 0.45rem;
z-index: 10;
}
.coolingInTem {
z-index: 10;
position: absolute;
top: 2.9rem;
left: 6.8rem;
font-size: 0.16rem;
font-weight: bold;
}
.coolingOutTem {
z-index: 10;
position: absolute;
top: 2.9rem;
left: 5.85rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezingInTem {
z-index: 10;
position: absolute;
top: 4rem;
right: 5.5rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezingOutTem {
z-index: 10;
position: absolute;
top: 4.2rem;
right: 5.05rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezingOutWater {
z-index: 10;
position: absolute;
top: 5.43rem;
right: 5.1rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezingInPre {
z-index: 10;
position: absolute;
top: 4.3rem;
right: 6.3rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezingOutPre {
z-index: 10;
position: absolute;
top: 4.7rem;
right: 6rem;
font-size: 0.16rem;
font-weight: bold;
}
.host-line1 {
position: absolute;
left: -0.5rem;
top: 6.55rem;
z-index: 10;
}
.host-line2 {
position: absolute;
left: -0.5rem;
top: 7.3rem;
z-index: 10;
}
.host-line3 {
position: absolute;
left: -0.4rem;
top: 8.02rem;
z-index: 10;
}
.setTem1 {
z-index: 10;
font-size: 0.16rem;
font-weight: bold;
color: #ffffff;
position: absolute;
top: 6.8rem;
left: 4.1rem;
transform: rotateX(20deg) rotateY(0deg) rotateZ(-22deg); /* 分别在 X、Y、Z 轴上旋转 */
transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
}
.setTem2 {
z-index: 10;
font-size: 0.16rem;
font-weight: bold;
color: #ffffff;
position: absolute;
top: 6.12rem;
left: 5.9rem;
transform: rotateX(20deg) rotateY(0deg) rotateZ(-22deg); /* 分别在 X、Y、Z 轴上旋转 */
transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
}
.setTem3 {
z-index: 10;
font-size: 0.16rem;
font-weight: bold;
color: #ffffff;
position: absolute;
top: 5.5rem;
left: 7.8rem;
transform: rotateX(20deg) rotateY(0deg) rotateZ(-22deg); /* 分别在 X、Y、Z 轴上旋转 */
transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
}
.hostName1 {
cursor: pointer;
border-bottom: 1px solid rgba(0, 255, 255, 1);
z-index: 10;
font-size: 0.22rem;
font-weight: bold;
color: aqua;
position: absolute;
top: 6.35rem;
left: 3.05rem;
transform: rotateX(50deg) rotateY(0deg) rotateZ(46deg); /* 分别在 X、Y、Z 轴上旋转 */
transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */
}
.hostName2 {
cursor: pointer;
border-bottom: 1px solid rgba(0, 255, 255, 1);
z-index: 10;
font-size: 0.22rem;
font-weight: bold;
color: aqua;
position: absolute;
top: 5.73rem;
left: 4.89rem;
transform: rotateX(50deg) rotateY(0deg) rotateZ(42deg);
transform-origin: bottom center;
text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
}
.hostName3 {
cursor: pointer;
border-bottom: 1px solid rgba(0, 255, 255, 1);
z-index: 10;
font-size: 0.22rem;
font-weight: bold;
color: aqua;
position: absolute;
top: 5.14rem;
left: 6.47rem;
transform: rotateX(50deg) rotateY(0deg) rotateZ(36deg);
transform-origin: bottom center;
text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
}
/* 定义 host 动画关键帧 */
@keyframes host {
0% {
/* 修改初始旋转角度 */
transform: translateX(-50%) rotateX(15deg) rotateZ(0deg);
}
100% {
/* 修改结束旋转角度 */
transform: translateX(-50%) rotateX(15deg) rotateZ(360deg);
}
}
.host-img1 {
z-index: 10;
position: absolute;
top: 6.25rem;
left: 4.5rem;
width: 0.4rem;
height: 0.4rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
.host-img2 {
z-index: 10;
position: absolute;
top: 5.62rem;
left: 6.28rem;
width: 0.4rem;
height: 0.4rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(0deg) rotateZ(0deg);
}
.host-img3 {
z-index: 10;
position: absolute;
top: 5.05rem;
left: 8.18rem;
width: 0.4rem;
height: 0.4rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(15deg) rotateZ(0deg);
}
.host-main1 {
z-index: 100;
position: absolute;
top: 5.39rem;
left: 4.15rem;
width: 1.6rem;
height: 1.2rem;
// background-color: #007bff;
border-top-right-radius: 0.3rem;
cursor: pointer;
opacity: 0.4;
transform-style: preserve-3d;
transform: translateX(-50%) rotateY(0deg) rotateX(0deg) rotateZ(35deg);
}
.host-main2 {
z-index: 100;
position: absolute;
top: 4.9rem;
left: 5.9rem;
width: 1.5rem;
height: 1.05rem;
// background-color: #007bff;
border-top-right-radius: 0.3rem;
cursor: pointer;
opacity: 0.4;
transform-style: preserve-3d;
transform: translateX(-50%) rotateY(0deg) rotateX(0deg) rotateZ(30deg);
}
.host-main3 {
z-index: 100;
position: absolute;
top: 4.55rem;
left: 7.7rem;
width: 1.5rem;
height: 0.8rem;
// background-color: #007bff;
border-top-right-radius: 0.3rem;
cursor: pointer;
opacity: 0.4;
transform-style: preserve-3d;
transform: translateX(-50%) rotateY(0deg) rotateX(0deg) rotateZ(25deg);
}
.hostLoad1 {
z-index: 10;
position: absolute;
top: 5.9rem;
left: 4.09rem;
font-size: 0.16rem;
font-weight: bold;
}
.hostLoad2 {
z-index: 10;
position: absolute;
top: 5.35rem;
left: 5.93rem;
font-size: 0.16rem;
font-weight: bold;
}
.hostLoad3 {
z-index: 10;
position: absolute;
top: 4.5rem;
left: 7.6rem;
font-size: 0.16rem;
font-weight: bold;
}
.water-flow1 {
z-index: 10;
position: absolute;
top: 7rem;
left: 0.6rem;
font-size: 0.16rem;
}
.water-flow2 {
z-index: 10;
position: absolute;
top: 7.76rem;
left: 0.6rem;
font-size: 0.16rem;
}
.water-flow3 {
z-index: 10;
position: absolute;
top: 8.48rem;
left: 0.8rem;
font-size: 0.16rem;
}
.water-flow-li {
margin-bottom: 0.04rem;
color: #46f1e3;
display: flex;
flex-direction: row;
align-items: center;
span {
background-color: rgba(0, 255, 255, 0.2);
border-radius: 0.1rem;
padding: 0.01rem 0.03rem;
}
.break {
margin-left: 0.07rem;
display: inline-block;
width: 0.18rem;
height: 0.18rem;
border-radius: 50%;
border: 1px solid #46f1e3;
background-color: transparent !important;
}
.connect {
animation: blink 1s infinite;
background-color: #38fc52 !important;
}
}
.moveClass {
animation: host 2s linear infinite;
}
.moveClass2 {
animation: fan 2s linear infinite;
}
.startClass {
/* 应用动画 */
animation: blink 1s infinite;
background-color: #38fc52 !important;
}
.hostStatus1 {
z-index: 10;
position: absolute;
top: 5.9rem;
left: 3.8rem;
width: 0.18rem;
height: 0.18rem;
border-radius: 50%;
}
.hostStatus2 {
z-index: 10;
position: absolute;
top: 5.35rem;
left: 5.7rem;
width: 0.18rem;
height: 0.18rem;
border-radius: 50%;
}
.hostStatus3 {
z-index: 10;
position: absolute;
top: 4.7rem;
left: 7.6rem;
width: 0.18rem;
height: 0.18rem;
border-radius: 50%;
}
.coolingPump1 {
cursor: pointer;
z-index: 10;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 3.9rem;
left: 7.23rem;
}
.coolingPump2 {
cursor: pointer;
z-index: 10;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 3.75rem;
left: 7.68rem;
}
.coolingPump3 {
cursor: pointer;
z-index: 10;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 3.6rem;
left: 8.22rem;
}
.coolingPump4 {
cursor: pointer;
z-index: 10;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 3.5rem;
left: 8.68rem;
}
.coolingPump5 {
cursor: pointer;
z-index: 10;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 3.4rem;
left: 9.1rem;
}
.cooling-img1 {
z-index: 10;
position: absolute;
top: 3.48rem;
left: 7.25rem;
width: 0.35rem;
height: 0.35rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
.cooling-img2 {
z-index: 10;
position: absolute;
top: 3.36rem;
left: 7.75rem;
width: 0.35rem;
height: 0.35rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
.cooling-img3 {
z-index: 10;
position: absolute;
top: 3.23rem;
left: 8.28rem;
width: 0.35rem;
height: 0.35rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
.cooling-img4 {
z-index: 10;
position: absolute;
top: 3.11rem;
left: 8.74rem;
width: 0.35rem;
height: 0.35rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
.cooling-img5 {
z-index: 10;
position: absolute;
top: 3rem;
left: 9.18rem;
width: 0.35rem;
height: 0.35rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
.cooling-hz1 {
z-index: 10;
position: absolute;
top: 3.42rem;
left: 6.95rem;
font-size: 0.16rem;
font-weight: bold;
}
.cooling-hz2 {
z-index: 10;
position: absolute;
top: 3.3rem;
left: 7.5rem;
font-size: 0.16rem;
font-weight: bold;
}
.cooling-hz3 {
z-index: 10;
position: absolute;
top: 3.16rem;
left: 8rem;
font-size: 0.16rem;
font-weight: bold;
}
.cooling-hz4 {
z-index: 10;
position: absolute;
top: 2.99rem;
left: 8.48rem;
font-size: 0.16rem;
font-weight: bold;
}
.cooling-hz5 {
z-index: 10;
position: absolute;
top: 2.92rem;
left: 9.05rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezingPump1 {
cursor: pointer;
z-index: 10;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 7.8rem;
left: 6.2rem;
}
.freezingPump2 {
cursor: pointer;
z-index: 10;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 7.43rem;
left: 6.96rem;
}
.freezingPump3 {
cursor: pointer;
z-index: 10;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 6.7rem;
left: 8.6rem;
}
.freezingPump4 {
cursor: pointer;
z-index: 10;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 6.4rem;
left: 9.15rem;
}
.freezingPump5 {
cursor: pointer;
z-index: 10;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 6.2rem;
left: 9.7rem;
}
.freezing-img1 {
z-index: 10;
position: absolute;
top: 7.25rem;
left: 6.25rem;
width: 0.4rem;
height: 0.4rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
.freezing-img2 {
z-index: 10;
position: absolute;
top: 6.89rem;
left: 7.04rem;
width: 0.4rem;
height: 0.4rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
.freezing-img3 {
z-index: 10;
position: absolute;
top: 6.2rem;
left: 8.67rem;
width: 0.4rem;
height: 0.4rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
.freezing-img4 {
z-index: 10;
position: absolute;
top: 5.95rem;
left: 9.22rem;
width: 0.4rem;
height: 0.4rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
.freezing-img5 {
z-index: 10;
position: absolute;
top: 5.72rem;
left: 9.76rem;
width: 0.4rem;
height: 0.4rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
.freezing-hz1 {
z-index: 10;
position: absolute;
top: 7.21rem;
left: 6rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezing-hz2 {
z-index: 10;
position: absolute;
top: 6.85rem;
left: 6.82rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezing-hz3 {
z-index: 10;
position: absolute;
top: 6.16rem;
left: 8.35rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezing-hz4 {
z-index: 10;
position: absolute;
top: 5.89rem;
left: 8.93rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezing-hz5 {
z-index: 10;
position: absolute;
top: 5.68rem;
left: 9.46rem;
font-size: 0.16rem;
font-weight: bold;
}
.coolingTower3 {
cursor: pointer;
z-index: 10;
font-size: 0.18rem;
color: #46f1e3;
position: absolute;
top: 1.8rem;
left: 7.35rem;
font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(0deg);
}
.coolingTower2 {
cursor: pointer;
z-index: 10;
font-size: 0.18rem;
color: #46f1e3;
position: absolute;
top: 1.73rem;
left: 7.75rem;
font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(0deg);
}
.coolingTower1 {
cursor: pointer;
z-index: 10;
font-size: 0.18rem;
color: #46f1e3;
position: absolute;
top: 1.65rem;
left: 8.16rem;
font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(0deg);
}
.coolingTowerHz1 {
z-index: 10;
font-size: 0.16rem;
color: #ffffff;
position: absolute;
top: 0.86rem;
left: 7.71rem;
font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-2deg);
}
.coolingTowerHz2 {
z-index: 10;
font-size: 0.16rem;
color: #ffffff;
position: absolute;
top: 0.95rem;
left: 7.22rem;
font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-2deg);
}
.coolingTowerHz3 {
z-index: 10;
font-size: 0.16rem;
color: #ffffff;
position: absolute;
top: 1.05rem;
left: 6.6rem;
font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-2deg);
}
/* 定义灯闪烁的动画 */
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
.frozenValve1 {
cursor: pointer;
z-index: 10;
position: absolute;
top: 6.27rem;
left: 5.15rem;
width: 0.18rem;
height: 0.18rem;
background-color: #ebebeb;
border-radius: 50%;
}
.frozenValve2 {
cursor: pointer;
z-index: 10;
position: absolute;
top: 5.61rem;
left: 6.96rem;
width: 0.18rem;
height: 0.18rem;
background-color: #ebebeb;
border-radius: 50%;
}
.frozenValve3 {
cursor: pointer;
z-index: 10;
position: absolute;
top: 4.88rem;
left: 8.53rem;
width: 0.18rem;
height: 0.18rem;
background-color: #ebebeb;
border-radius: 50%;
}
.coolingValue1 {
cursor: pointer;
z-index: 10;
position: absolute;
top: 5.37rem;
left: 3.16rem;
width: 0.18rem;
height: 0.18rem;
background-color: #ebebeb;
border-radius: 50%;
}
.coolingValue2 {
cursor: pointer;
z-index: 10;
position: absolute;
top: 4.85rem;
left: 4.92rem;
width: 0.18rem;
height: 0.18rem;
background-color: #ebebeb;
border-radius: 50%;
}
.coolingValue3 {
cursor: pointer;
z-index: 10;
position: absolute;
top: 4.35rem;
left: 6.77rem;
width: 0.18rem;
height: 0.18rem;
background-color: #ebebeb;
border-radius: 50%;
}
.statusAndModel {
z-index: 10;
position: absolute;
top: 8.5rem;
right: 2.7rem;
width: 3rem;
.warnStatus {
position: absolute;
left: 0.04rem;
top: 0.3rem;
width: 0.45rem;
height: 0.45rem;
animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
0% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.1);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0.5;
}
}
.modelStatus {
position: absolute;
top: 0;
right: 0rem;
width: 2.65rem;
height: 0.83rem;
}
.sysNormal {
position: absolute;
top: 0.63rem;
right: 0.7rem;
font-size: 0.14rem;
font-weight: bold;
color: #89e8f5;
letter-spacing: 0.02rem;
}
.sysWarning {
position: absolute;
top: 0.63rem;
right: 0.7rem;
font-size: 0.14rem;
font-weight: bold;
cursor: pointer;
color: #ffffff;
letter-spacing: 0.02rem;
animation: blink 0.5s ease-in-out infinite;
}
.sysStatus {
position: absolute;
top: 0.2rem;
left: 0.8rem;
font-size: 0.18rem;
font-weight: bold;
color: #ffffff;
letter-spacing: 0.02rem;
}
}
}
.weather {
min-width: 2.85rem;
min-height: 1.6rem;
z-index: 10;
position: absolute;
top: 0.8rem;
left: 0rem;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
font-size: 0.2rem;
// color: rgb(18, 155, 209);
// color: rgb(147, 204, 236);
color: #ffffff;
background-image: url(../../../assets/images/border1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 0.15rem 0.1rem 0.25rem 0rem;
}
.weather-li {
width: 100%;
padding: 0.05rem 0 0.05rem 0.3rem;
/* 初始设置上下边框宽度为 1px，颜色和样式可以先设为透明，后续由 border-image 覆盖 */
border-top: 1px solid transparent;
border-bottom: 1px dashed #1a3f8f;
position: relative;
.deepColor {
display: inline-block;
margin: 0 0.1rem 0 0.05rem;
// color: #20ebfa;
// color: #18f13c;
// color: #6cf02f;
color: #6cf02f;
font-weight: bold;
font-family: DIN;
font-size: 0.25rem;
}
.normal {
font-size: 0.13rem;
color: #007bff;
font-weight: bold;
margin-left: 0.1rem;
}
}
.performance {
position: absolute;
top: 5.4rem !important;
right: -1.2rem !important;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
font-size: 0.16rem;
}
.perdformance-bg {
width: 2.95rem;
z-index: 10;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
font-size: 0.2rem;
color: #ffffff;
background-image: url(../../../assets/images/border4.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 0.15rem 0.1rem 0.25rem 0rem;
}
.title {
z-index: 10;
width: 100%;
background-image: url(../../../assets/images/text_img_title.png);
background-repeat: no-repeat;
background-repeat: no-repeat;
background-size: 2rem 0.45rem;
background-position: bottom left;
font-family: SourceHanSansCN-Medium;
font-size: 0.2rem;
font-style: italic;
font-weight: bold;
line-height: 0.6rem;
color: #ffffff;
padding-left: 0.5rem;
margin-bottom: 0.01rem;
margin-left: 0.4rem;
}
.offClass {
position: absolute;
width: 1.6rem;
height: 1.6rem;
background-image: url(../../../assets/images/border2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
top: 0.6rem;
right: 0.3rem;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
.off-bg {
position: absolute;
left: 0.38rem;
top: 0.32rem;
width: 1rem;
height: 1rem;
background-image: url(../../../assets/images/border3.png);
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
line-height: 1rem;
font-family: DIN;
font-size: 0.22rem;
color: #6cf02f;
font-weight: bold;
}
.on-animation {
animation: rotateZ 5s linear infinite;
transition: 0.6s; /* 设置过渡时间，控制翻转速度 */
transform-style: preserve-3d; /* 保持子元素的 3D 效果 */
}
/* 定义旋转动画 */
@keyframes rotateZ {
0% {
transform: rotateY(0deg); /* 初始状态，不旋转 */
}
50% {
transform: rotateY(180deg); /* 旋转到 180 度，呈现翻面效果 */
}
100% {
transform: rotateY(360deg); /* 旋转回 360 度，回到初始状态 */
}
}
}
/* 鼠标悬停时移除动画 */
.offClass:hover .on-animation {
animation: none;
}
.sysTips {
position: absolute;
top: 2.3rem;
left: 14.2rem;
display: flex;
flex-direction: row;
align-items: center;
z-index: 10;
.step {
width: 0.2rem;
height: 0.3rem;
margin-right: 0.04rem;
animation: moveRight 1s ease-in-out infinite alternate;
}
@keyframes moveRight {
0% {
transform: translateX(0); /* 初始位置，不移动 */
}
100% {
transform: translateX(0.04rem); /* 向右移动 1rem 的距离 */
}
}
.tips-text {
border: 0.01rem solid transparent;
border-image: linear-gradient(to right, #007bff, #00ffff);
border-image-slice: 1;
font-size: 0.18rem;
color: #1fecf3;
padding: 0.01rem 0.03rem;
}
}
.funtion-menu1 {
position: absolute;
top: 7.2rem;
left: -1.4rem;
display: flex;
flex-direction: row;
align-items: center;
z-index: 10;
width: 1.7rem;
height: 0.8rem;
cursor: pointer;
.ditu {
width: 1.7rem;
height: 0.8rem;
position: absolute;
top: 0;
}
.menu-title {
color: #46f1e3;
font-size: 0.18rem;
--bRadius: 0.05rem;
text-align: center;
position: absolute;
top: 0;
left: 0.2rem;
width: 1.25rem;
div {
position: relative;
text-align: center;
border-radius: var(--bRadius);
transition: all 0.3s;
padding: 0.01rem 0.02rem;
background-color: rgba(0, 255, 255, 0.2);
&::before,
&::after {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 2px solid #46f1e3;
transition: all 0.5s;
border-radius: var(--bRadius);
animation: clippath 3s infinite linear;
}
&::after {
animation: clippath 3s infinite -1.5s linear;
}
@keyframes clippath {
0%,
100% {
clip-path: inset(0 0 98% 0);
}
25% {
clip-path: inset(0 98% 0 0);
}
50% {
clip-path: inset(98% 0 0 0);
}
75% {
clip-path: inset(0 0 0 98%);
}
}
}
}
}
.menu2 {
position: absolute;
top: 8.6rem;
left: -1.4rem;
}
.funtion-menu1:hover {
.menu-title {
transform: scale(1.1);
}
}
.hotClass {
z-index: 10;
position: absolute;
top: 4.15rem;
right: 3.5rem;
font-size: 0.16rem;
color: #00ffff;
font-weight: bold;
}
.coolingOut-line {
z-index: 10;
position: absolute;
right: 6.45rem;
top: 2.95rem;
z-index: 10;
}
.coolingOut-vavle {
z-index: 10;
position: absolute;
top: 1.2rem;
right: 3.8rem;
font-size: 0.16rem;
}
.coolingIn-line {
z-index: 10;
position: absolute;
right: 5.6rem;
top: 3.2rem;
z-index: 10;
}
.coolingIn-vavle {
z-index: 10;
position: absolute;
top: 2rem;
right: 2.8rem;
font-size: 0.16rem;
}
.hotIn-vavle {
z-index: 10;
position: absolute;
top: 2.93rem;
right: -0.65rem;
font-size: 0.16rem;
}
.hotIn-line {
z-index: 10;
position: absolute;
top: 3.72rem;
right: 3.9rem;
font-size: 0.16rem;
}
.hotOut-vavle {
z-index: 10;
position: absolute;
top: 3.77rem;
right: -0.9rem;
font-size: 0.16rem;
}
.hotOut-line {
z-index: 10;
position: absolute;
top: 4rem;
right: 3.1rem;
font-size: 0.16rem;
}
.outInre {
font-size: 0.16rem;
font-weight: bold;
color: #ffffff;
margin-left: 0.1rem;
}
.steamHeatingBoiler1 {
border-bottom: 1px solid rgba(0, 255, 255, 1);
z-index: 10;
font-size: 0.2rem;
font-weight: bold;
color: aqua;
position: absolute;
cursor: pointer;
top: 4.9rem;
left: 9.4rem;
transform: rotateX(50deg) rotateY(0deg) rotateZ(30deg); /* 分别在 X、Y、Z 轴上旋转 */
transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */
}
.steamHeatingBoiler2 {
border-bottom: 1px solid rgba(0, 255, 255, 1);
z-index: 10;
font-size: 0.2rem;
font-weight: bold;
color: aqua;
position: absolute;
cursor: pointer;
top: 5.45rem;
left: 10.9rem;
transform: rotateX(50deg) rotateY(0deg) rotateZ(30deg); /* 分别在 X、Y、Z 轴上旋转 */
transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */
}
.steamHeatingBoiler-main1 {
z-index: 100;
position: absolute;
top: 4.5rem;
left: 10.25rem;
width: 0.6rem;
height: 0.6rem;
// background-color: #007bff;
cursor: pointer;
opacity: 0.4;
transform-style: preserve-3d;
}
.steamHeatingBoiler-main2 {
z-index: 100;
position: absolute;
top: 5rem;
left: 11.6rem;
width: 0.6rem;
height: 0.6rem;
// background-color: #007bff;
cursor: pointer;
opacity: 0.4;
transform-style: preserve-3d;
}
.steamHeatingBoiler-img1 {
z-index: 10;
position: absolute;
top: 4.42rem;
left: 10.6rem;
width: 0.35rem;
height: 0.35rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
.steamHeatingBoiler-img2 {
z-index: 10;
position: absolute;
top: 4.88rem;
left: 11.94rem;
width: 0.35rem;
height: 0.35rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
.steamHeatingPump1 {
cursor: pointer;
z-index: 10;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 4.67rem;
left: 11.3rem;
}
.steamHeatingPump2 {
cursor: pointer;
z-index: 10;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 4.8rem;
left: 11.78rem;
}
.steamHeatingPump3 {
cursor: pointer;
z-index: 10;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 4.95rem;
left: 12.3rem;
}
.steamHeatingPump-main1 {
z-index: 100;
position: absolute;
top: 4.3rem;
left: 11.25rem;
width: 0.3rem;
height: 0.55rem;
// background-color: #007bff;
cursor: pointer;
opacity: 0.4;
transform-style: preserve-3d;
}
.steamHeatingPump-main2 {
z-index: 100;
position: absolute;
top: 4.39rem;
left: 11.75rem;
width: 0.3rem;
height: 0.55rem;
// background-color: #007bff;
cursor: pointer;
opacity: 0.4;
transform-style: preserve-3d;
}
.steamHeatingPump-main3 {
z-index: 100;
position: absolute;
top: 4.5rem;
left: 12.25rem;
width: 0.3rem;
height: 0.55rem;
// background-color: #007bff;
cursor: pointer;
opacity: 0.4;
transform-style: preserve-3d;
}
.steamHeatingPump-img1 {
z-index: 10;
position: absolute;
top: 4.23rem;
left: 11.4rem;
width: 0.35rem;
height: 0.35rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
.steamHeatingPump-img2 {
z-index: 10;
position: absolute;
top: 4.4rem;
left: 11.9rem;
width: 0.35rem;
height: 0.35rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
.steamHeatingPump-img3 {
z-index: 10;
position: absolute;
top: 4.55rem;
left: 12.4rem;
width: 0.35rem;
height: 0.35rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
}
.steamHeatingPump-hz1 {
z-index: 10;
position: absolute;
top: 4.18rem;
left: 11.05rem;
font-size: 0.16rem;
font-weight: bold;
}
.steamHeatingPump-hz2 {
z-index: 10;
position: absolute;
top: 4.35rem;
left: 11.62rem;
font-size: 0.16rem;
font-weight: bold;
}
.steamHeatingPump-hz3 {
z-index: 10;
position: absolute;
top: 4.5rem;
left: 12.15rem;
font-size: 0.16rem;
font-weight: bold;
}
.steamHeatingInTem {
z-index: 10;
position: absolute;
top: 4.87rem;
right: 2.35rem;
font-size: 0.16rem;
font-weight: bold;
}
.steamHeatingOutTem {
z-index: 10;
position: absolute;
top: 4.7rem;
right: 2.95rem;
font-size: 0.16rem;
font-weight: bold;
}
}
// @media (min-width: 1240px) and (max-width: 1440px) {
// }
@media (max-width: 1440px) {
.monitor-content {
transform: scale(0.9);
}
}
.detail-data-bottom {
position: absolute;
top: 1rem;
left: 2.3rem;
width: 4rem;
padding: 0rem 0.3rem;
z-index: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
}
</style>
<style scoped>
.monitor-dialog {
margin-top: 5% !important;
}
</style>