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.
4374 lines
123 KiB
4374 lines
123 KiB
<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>kwh/kwh</span> |
|
</div> |
|
<div class="weather-li"> |
|
<span>全年用电：</span> |
|
<span class="deepColor">{{ performanceObj.yearPower }}</span> |
|
<span>kwh</span> |
|
</div> |
|
<div class="weather-li"> |
|
<span>全年产冷：</span> |
|
<span class="deepColor">{{ performanceObj.yearCold }}</span> |
|
<span>kwh</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" |
|
:class="{ disabledClass: sysAutoManual === '1' }" |
|
@click="handleOneKeyButton" |
|
> |
|
<div v-if="isShowOn" class="off-bg on-animation">启动</div> |
|
<div v-else class="off-bg">停止</div> |
|
</div> |
|
<!-- 系统手自动状态 --> |
|
<div class="sysAutoManual" @click="handleAutoManualSwitch"> |
|
<button v-if="sysAutoManual === '1'"> |
|
<div id="clip"> |
|
<div id="leftTop" class="corner"></div> |
|
<div id="rightBottom" class="corner"></div> |
|
<div id="rightTop" class="corner"></div> |
|
<div id="leftBottom" class="corner"></div> |
|
</div> |
|
<span id="rightArrow" class="arrow"></span> |
|
<span id="leftArrow" class="arrow"></span> |
|
系统手动 |
|
</button> |
|
<button v-else> |
|
<div id="clip"> |
|
<div id="leftTop" class="corner"></div> |
|
<div id="rightBottom" class="corner"></div> |
|
<div id="rightTop" class="corner"></div> |
|
<div id="leftBottom" class="corner"></div> |
|
</div> |
|
<span id="rightArrow" class="arrow"></span> |
|
<span id="leftArrow" class="arrow"></span> |
|
系统自动 |
|
</button> |
|
</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/guanghe.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], true)"></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="hostListRunClass(1)">接通</span> |
|
<span v-else>断开</span> |
|
<span class="break" :class="{ connect: hostListRunClass(1) }"></span> |
|
</div> |
|
<div class="water-flow-li"> |
|
<span>1#冷冻水流:</span> |
|
<span v-if="hostListRunClass(1)">接通</span> |
|
<span v-else>断开</span> |
|
<span class="break" :class="{ connect: hostListRunClass(1) }"></span> |
|
</div> |
|
</div> |
|
<line-children :angle1="-0" :angle2="-30" :lineWidth1="190" :lineWidth2="250" class="host-line1"></line-children> |
|
<div class="setTem1" v-if="hostSetTemClass(1)"> |
|
实时设点:{{ hostSetTem1 }}℃ |
|
</div> |
|
|
|
<!-- 冷却泵数据定位 --> |
|
<div class="coolingPump1" @click="goControlList(coolingPump, 1)">1#</div> |
|
<div class="coolingPump2" @click="goControlList(coolingPump, 2)">2#</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) }" /> |
|
|
|
<!-- 频率反馈 --> |
|
<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="freezingPump1" @click="goControlList(freezingPump, 1)"> |
|
1# |
|
</div> |
|
<div class="freezingPump2" @click="goControlList(freezingPump, 2)"> |
|
2# |
|
</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) }" /> |
|
<!-- 频率反馈 旋转+有频率反馈才显示 --> |
|
<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> |
|
<!-- 冷却塔数据定位 2个风机 1个出水阀 --> |
|
<div class="coolingTower1" @click="goControlFanList(coolingTower, 1, 1)"> |
|
1#-1 |
|
</div> |
|
<div class="coolingTower2" @click="goControlFanList(coolingTower, 2, 1)"> |
|
1#-2 |
|
</div> |
|
<!-- 风机频率 --> |
|
<div class="coolingTowerHz1" v-if="coolingTowerHz(1, 1) && coolingTowerRunClass(1, 1)"> |
|
{{ coolingTowerHz(1, 1) }}Hz |
|
</div> |
|
<div class="coolingTowerHz2" v-if="coolingTowerHz(1, 2) && coolingTowerRunClass(1, 2)"> |
|
{{ coolingTowerHz(1, 2) }}Hz |
|
</div> |
|
<!-- 1 号冷却塔风机1 --> |
|
<img class="fan-img1" v-if="coolingTowerRunClass(1, 1)" :class="{ moveClass2: coolingTowerRunClass(1, 1) }" |
|
src="../../../assets/images/fan-img.png" alt="" /> |
|
<img class="fan-img2" v-if="coolingTowerRunClass(1, 2)" :class="{ moveClass2: coolingTowerRunClass(1, 2) }" |
|
src="../../../assets/images/fan-img.png" alt="" /> |
|
<!-- 箭头 --> |
|
<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="bypassValveData">{{ bypassValveFeedback }}%</div> |
|
<div class="bypassValve" @click="bypassValveControl()">旁通阀</div> --> |
|
</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-name" 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> |
|
<!-- 旁通阀弹框内容 --> |
|
<el-dialog title="旁通阀控制" :visible.sync="openBypassValveDialog" 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">开度设置</div> |
|
</div> |
|
<div class="device-li"> |
|
<div class="device-name">{{ bypassValveData.deviceName }}</div> |
|
<div class="device-name">{{ bypassValveData.openingFeedback }}%</div> |
|
<div class="device-name"> |
|
<el-input v-model="bypassValveData.openingSet" size="mini" |
|
@keyup.enter.native="handleBypassValveEnter($event)" |
|
@input="handleBypassValveInput()" @blur="handleBlur()"> |
|
</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: [], //冷冻总管 |
|
bypassValveSet: [], //旁通阀 |
|
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: "", |
|
// 系统手自动状态 0=自动 1=手动 |
|
sysAutoManual: "0", |
|
// 系统手自动切换设备ID |
|
sysAutoManualId: "", |
|
// 模式提示 |
|
startOrStopStatus: "", |
|
openDialog: false, |
|
timer: null, // 用于存储定时器 ID |
|
|
|
currentDate: new Date(), |
|
nowTimer: null, |
|
isShowWarning: false, //是否有报警 |
|
dayData: "", //监测天数 |
|
|
|
// 控制弹框 |
|
controlTitle: "", |
|
openControlDialog: false, |
|
controlArr: [], |
|
|
|
// 旁通阀弹框 |
|
openBypassValveDialog: false, |
|
bypassValveData: { |
|
openingFeedback: '', // 开度反馈值 |
|
openingSet: '', // 开度设置值 |
|
openingSetId: '', // 开度设置ID |
|
deviceName: '', // 设备名称 |
|
}, |
|
|
|
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}`; |
|
}, |
|
bypassValveFeedback() { |
|
if (!this.bypassValveSet || this.bypassValveSet.length === 0) return ''; |
|
const feedback = this.bypassValveSet.find(item => item.paramType === '54'); |
|
return feedback ? feedback.collectValue : '--'; |
|
}, |
|
}, |
|
created() { }, |
|
mounted() { |
|
// 在组件挂载后尝试进入全屏 |
|
this.requestFullscreen(); |
|
// 首次进入页面时执行 |
|
this.getWeatherData(); |
|
this.getSystemMode(); |
|
this.getPerformance(); |
|
this.getOneKeyButton(); |
|
this.getMonitorList(); |
|
this.getAlarnStatus(); |
|
this.getDayData(); |
|
|
|
// 设置定时器，每 10 秒执行一次 |
|
// this.timer = setInterval(() => { |
|
// this.getWeatherData(); |
|
// this.getSystemMode(); |
|
// this.getPerformance(); |
|
// this.getOneKeyButton(); |
|
// this.getMonitorList(); |
|
// 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() { |
|
/** 系统手动状态下禁止一键启停 */ |
|
if (this.sysAutoManual === "1") { |
|
this.$message.warning("当前为系统手动状态，无法使用一键启停功能"); |
|
return; |
|
} |
|
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 = []; //客房供暖进水阀 |
|
this.bypassValveSet = []; //旁通阀 |
|
|
|
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; |
|
case "23": |
|
this.bypassValveSet = row.values; |
|
console.log("旁通阀", this.bypassValveSet); |
|
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号冷却塔), item为风机编号(如风机1) */ |
|
coolingTowerRunClass(index, item) { |
|
// coolingTower 经过 processDeviceList 处理后，所有风机数据合并到一个对象中 |
|
// 需要遍历所有对象的 properties 数组，用 collectName 匹配 |
|
for (let i = 0; i < this.coolingTower.length; i++) { |
|
const device = this.coolingTower[i]; |
|
const properties = device.properties; |
|
if (!properties || properties.length === 0) continue; |
|
for (let j = 0; j < properties.length; j++) { |
|
const prop = properties[j]; |
|
const collectName = prop.collectName; |
|
// collectName 格式: "2号冷却塔风机1_运行状态" |
|
if ( |
|
collectName && |
|
collectName.includes(`${index}号冷却塔风机${item}`) && |
|
collectName.includes('运行状态') && |
|
prop.paramType === '1' && |
|
Number(prop.collectValue) !== 0 |
|
) { |
|
return true; |
|
} |
|
} |
|
} |
|
return false; |
|
}, |
|
/** 冷却塔风机频率, index为冷却塔编号(如1号冷却塔), item为风机编号(如风机1)，返回频率数值或false */ |
|
coolingTowerHz(index, item) { |
|
// 遍历 coolingTower 中所有对象的 properties，用 collectName 匹配 |
|
for (let i = 0; i < this.coolingTower.length; i++) { |
|
const device = this.coolingTower[i]; |
|
const properties = device.properties; |
|
if (!properties || properties.length === 0) continue; |
|
for (let j = 0; j < properties.length; j++) { |
|
const prop = properties[j]; |
|
const collectName = prop.collectName; |
|
// collectName 格式: "2号冷却塔风机1_频率反馈" |
|
if ( |
|
collectName && |
|
collectName.includes(`${index}号冷却塔风机${item}`) && |
|
collectName.includes('频率反馈') && |
|
prop.paramType === '4' |
|
) { |
|
return Number(prop.collectValue); |
|
} |
|
} |
|
} |
|
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.includes("冷冻供水温度")) { |
|
this.freezingOutTem = item.collectValue; |
|
console.log("item.collectName", item.collectName); |
|
} else if (item.collectName.includes("冷冻回水温度")) { |
|
this.freezingInTem = item.collectValue; |
|
} else if (item.collectName.includes("冷冻供水压力")) { |
|
this.freezingOutPre = item.collectValue; |
|
} else if (item.collectName.includes("冷冻回水压力")) { |
|
this.freezingInPre = item.collectValue; |
|
} else if (item.collectName.includes("冷却水出水温度")) { |
|
this.coolingOutTem = item.collectValue; |
|
} else if (item.collectName.includes("冷却水进水温度")) { |
|
this.coolingInTem = item.collectValue; |
|
} else if (item.collectName.includes("瞬时流量")) { |
|
this.freezingOutWater = item.collectValue; |
|
} else if (item.collectName.includes("系统手自动切换") || item.paramType === "6") { |
|
this.sysAutoManualId = item.id; |
|
this.sysAutoManual = item.collectValue; |
|
} |
|
}); |
|
return true; |
|
}, |
|
/** 系统手自动切换 */ |
|
handleAutoManualSwitch() { |
|
/** 当前 sysAutoManual: 0=自动, 1=手动 */ |
|
const targetStatus = this.sysAutoManual === "1" ? "自动" : "手动"; |
|
const targetParam = this.sysAutoManual === "1" ? "0" : "1"; |
|
this.$confirm(`确定要将系统手自动状态切换为：${targetStatus}吗？`, "提示", { |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
}) |
|
.then(() => { |
|
this.hadleOperationConrol(this.sysAutoManualId, targetParam); |
|
}) |
|
.catch(() => {}); |
|
}, |
|
// 裙楼-客房进出水阀启停状态 |
|
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"); |
|
}, |
|
// 风机控制 index代表冷却塔几，val代表风机几 |
|
goControlFanList(itemArr, index, val) { |
|
console.log("itemArr", itemArr, index, val); |
|
// 处理properties值, |
|
this.controlArr = []; |
|
this.controlTitle = ""; |
|
itemArr.forEach((item) => { |
|
// 构建期望的设备名称格式 |
|
const expectedDeviceName = `${index}号冷却塔`; |
|
const expectedCollectName = `${index}号冷却塔风机${val}`; |
|
// 检查 item 的 deviceName 是否符合期望格式 |
|
console.log("item.deviceName", item.deviceName); |
|
if (true) { |
|
// 初始化一个空对象来存储非蝶阀处理后的结果 |
|
let deviceItem = {}; |
|
let properties = []; |
|
// 如果符合条件，则将 item.properties 赋值给 properties |
|
properties = item.properties; |
|
console.log("匹配的当前的设备数据", properties); |
|
properties.forEach((child) => { |
|
if (child.collectName.includes(expectedCollectName)) { |
|
this.controlTitle = expectedCollectName; |
|
deviceItem.name = expectedCollectName; |
|
// 手动控制 |
|
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; |
|
} |
|
}); |
|
}, |
|
// 控制 |
|
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] !== "" |
|
); |
|
}, |
|
// 旁通阀数据 |
|
bypassValveControl() { |
|
if (!this.bypassValveSet || this.bypassValveSet.length === 0) { |
|
this.$modal.msgWarning("暂无旁通阀数据"); |
|
return; |
|
} |
|
// 解析旁通阀数据 |
|
this.bypassValveData = { |
|
openingFeedback: '', |
|
openingSet: '', |
|
openingSetId: '', |
|
deviceName: '', |
|
}; |
|
this.bypassValveSet.forEach((item) => { |
|
this.bypassValveData.deviceName = item.deviceName; |
|
// paramType 54 为开度反馈 |
|
if (item.paramType === '54') { |
|
this.bypassValveData.openingFeedback = Number(item.collectValue) == 0 ? '0' : item.collectValue; |
|
} |
|
// paramType 53 为开度设置 |
|
if (item.paramType === '53') { |
|
this.bypassValveData.openingSet = Number(item.collectValue) == 0 ? '0' : item.collectValue; |
|
this.bypassValveData.openingSetId = item.id; |
|
} |
|
}); |
|
this.openBypassValveDialog = true; |
|
}, |
|
// 旁通阀-输入校验 |
|
handleBypassValveInput() { |
|
this.bypassValveData.openingSet = String(this.bypassValveData.openingSet).replace(/[^\d.]/g, ""); |
|
}, |
|
// 旁通阀-回车确认 |
|
handleBypassValveEnter(event) { |
|
event.target.blur(); |
|
const val = this.bypassValveData.openingSet; |
|
if (val === '' || val === null || val === undefined) { |
|
this.$modal.msgError("请输入开度设置值"); |
|
return; |
|
} |
|
const numVal = parseFloat(val); |
|
if (isNaN(numVal) || numVal < 0 || numVal > 100) { |
|
this.$modal.msgError("开度设置值范围为0-100"); |
|
return; |
|
} |
|
this.$confirm( |
|
`确定要修改"${this.bypassValveData.deviceName}"的开度为:${val}%吗?`, |
|
"提示", |
|
{ |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
} |
|
) |
|
.then(() => { |
|
this.hadleOperationConrol(this.bypassValveData.openingSetId, val); |
|
}) |
|
.catch(() => {}); |
|
}, |
|
// 处理输入事件，过滤非数字字符 |
|
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.4rem; |
|
left: calc((100% - 15rem) / 2); |
|
// left:1rem; |
|
width: 15rem; |
|
height: 8.8rem; |
|
z-index: 1; |
|
} |
|
|
|
.fan-img1 { |
|
z-index: 10; |
|
position: absolute; |
|
top: 0.25rem; |
|
left: 6rem; |
|
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.4rem; |
|
left: 5.5rem; |
|
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: 0.93rem; |
|
left: 6.4rem; |
|
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.26rem; |
|
right: 4.3rem; |
|
transform: rotate(180deg); |
|
width: 0.3rem; |
|
height: 0.45rem; |
|
z-index: 10; |
|
} |
|
|
|
.out-arrow { |
|
position: absolute; |
|
top: 4.3rem; |
|
right: 1.7rem; |
|
width: 0.3rem; |
|
height: 0.45rem; |
|
z-index: 10; |
|
} |
|
|
|
.coolingInTem { |
|
z-index: 10; |
|
position: absolute; |
|
top: 2.8rem; |
|
left: 7.4rem; |
|
font-size: 0.16rem; |
|
font-weight: bold; |
|
} |
|
|
|
.coolingOutTem { |
|
z-index: 10; |
|
position: absolute; |
|
top: 3.4rem; |
|
left: 4rem; |
|
font-size: 0.16rem; |
|
font-weight: bold; |
|
} |
|
|
|
.freezingInTem { |
|
z-index: 10; |
|
position: absolute; |
|
top: 5rem; |
|
right: 5.3rem; |
|
font-size: 0.16rem; |
|
font-weight: bold; |
|
} |
|
|
|
.freezingOutTem { |
|
z-index: 10; |
|
position: absolute; |
|
top: 5.8rem; |
|
right: 3.6rem; |
|
font-size: 0.16rem; |
|
font-weight: bold; |
|
} |
|
|
|
.freezingOutWater { |
|
z-index: 10; |
|
position: absolute; |
|
top: 6.75rem; |
|
right: 4.9rem; |
|
font-size: 0.16rem; |
|
font-weight: bold; |
|
} |
|
|
|
.freezingInPre { |
|
z-index: 10; |
|
position: absolute; |
|
top: 5.5rem; |
|
right: 5.8rem; |
|
font-size: 0.16rem; |
|
font-weight: bold; |
|
} |
|
|
|
.freezingOutPre { |
|
z-index: 10; |
|
position: absolute; |
|
top: 6.3rem; |
|
right: 4rem; |
|
font-size: 0.16rem; |
|
font-weight: bold; |
|
} |
|
|
|
.host-line1 { |
|
position: absolute; |
|
left: 1.92rem; |
|
top: 6.3rem; |
|
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: 5.7rem; |
|
left: 6.45rem; |
|
transform: rotateX(50deg) rotateY(0deg) rotateZ(40deg); |
|
/* 分别在 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: 5.52rem; |
|
left: 8rem; |
|
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: 4.8rem; |
|
left: 7.4rem; |
|
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(25deg); |
|
} |
|
|
|
.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.1rem; |
|
left: 7.2rem; |
|
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: 6.7rem; |
|
left: 3rem; |
|
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.3rem; |
|
left: 7.3rem; |
|
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: 4.1rem; |
|
left: 7.05rem; |
|
} |
|
|
|
.coolingPump2 { |
|
cursor: pointer; |
|
z-index: 10; |
|
font-size: 0.15rem; |
|
font-weight: bold; |
|
color: #46f1e3; |
|
position: absolute; |
|
top: 3.65rem; |
|
left: 8.3rem; |
|
} |
|
|
|
.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.64rem; |
|
left: 7.13rem; |
|
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.22rem; |
|
left: 8.32rem; |
|
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.55rem; |
|
left: 6.9rem; |
|
font-size: 0.16rem; |
|
font-weight: bold; |
|
} |
|
|
|
.cooling-hz2 { |
|
z-index: 10; |
|
position: absolute; |
|
top: 3.15rem; |
|
left: 8.1rem; |
|
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.5rem; |
|
left: 7.79rem; |
|
} |
|
|
|
.freezingPump2 { |
|
cursor: pointer; |
|
z-index: 10; |
|
font-size: 0.15rem; |
|
font-weight: bold; |
|
color: #46f1e3; |
|
position: absolute; |
|
top: 6.8rem; |
|
left: 9.3rem; |
|
} |
|
|
|
.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: 6.97rem; |
|
left: 7.9rem; |
|
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.3rem; |
|
left: 9.32rem; |
|
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: 6.9rem; |
|
left: 7.6rem; |
|
font-size: 0.16rem; |
|
font-weight: bold; |
|
} |
|
|
|
.freezing-hz2 { |
|
z-index: 10; |
|
position: absolute; |
|
top: 6.25rem; |
|
left: 9.1rem; |
|
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.53rem; |
|
left: 5.6rem; |
|
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.4rem; |
|
left: 6.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.22rem; |
|
left: 5.65rem; |
|
font-weight: bold; |
|
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-2deg); |
|
} |
|
|
|
.coolingTowerHz2 { |
|
z-index: 10; |
|
font-size: 0.16rem; |
|
color: #ffffff; |
|
position: absolute; |
|
top: 0.35rem; |
|
left: 5.05rem; |
|
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.7rem; |
|
right: 2.2rem; |
|
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; |
|
} |
|
} |
|
|
|
.bypassValveData { |
|
z-index: 10; |
|
position: absolute; |
|
top: 4.8rem; |
|
right: 3.8rem; |
|
font-size: 0.16rem; |
|
font-weight: bold; |
|
} |
|
|
|
.bypassValve { |
|
z-index: 10; |
|
position: absolute; |
|
top: 5.2rem; |
|
right: 3.8rem; |
|
font-size: 0.16rem; |
|
font-weight: bold; |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
.weather { |
|
min-width: 2.85rem; |
|
min-height: 1.6rem; |
|
z-index: 10; |
|
position: absolute; |
|
top: 0.2rem; |
|
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; |
|
} |
|
} |
|
|
|
.performance { |
|
position: absolute; |
|
top: 6.4rem !important; |
|
right: -1.3rem !important; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
justify-content: flex-start; |
|
font-size: 0.16rem; |
|
} |
|
|
|
.perdformance-bg { |
|
width: 3.2rem; |
|
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; |
|
} |
|
|
|
/** 一键启停手动状态禁用样式 */ |
|
.offClass.disabledClass { |
|
pointer-events: none; |
|
opacity: 0.4; |
|
cursor: not-allowed; |
|
} |
|
|
|
/** 系统手自动状态 - Uiverse.io by Navarog21 */ |
|
.sysAutoManual { |
|
position: absolute; |
|
top: 2.3rem; |
|
right: 0.3rem; |
|
z-index: 10; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
button { |
|
position: relative; |
|
width: 11em; |
|
height: 4em; |
|
outline: none; |
|
transition: 0.1s; |
|
background-color: transparent; |
|
border: none; |
|
font-size: 13px; |
|
font-weight: bold; |
|
color: #ddebf0; |
|
cursor: pointer; |
|
} |
|
|
|
#clip { |
|
--color: #2761c3; |
|
position: absolute; |
|
top: 0; |
|
overflow: hidden; |
|
width: 100%; |
|
height: 100%; |
|
border: 5px double var(--color); |
|
box-shadow: inset 0px 0px 15px #195480; |
|
-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); |
|
cursor: pointer; |
|
} |
|
|
|
.arrow { |
|
position: absolute; |
|
transition: 0.2s; |
|
background-color: #2761c3; |
|
top: 35%; |
|
width: 11%; |
|
height: 30%; |
|
} |
|
|
|
#leftArrow { |
|
left: -9%; |
|
-webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%); |
|
} |
|
|
|
#rightArrow { |
|
-webkit-clip-path: polygon(100% 49%, 0 0, 0 100%); |
|
left: 106%; |
|
} |
|
|
|
button:hover #rightArrow { |
|
background-color: #27c39f; |
|
left: -7%; |
|
animation: 0.6s ease-in-out both infinite alternate rightArrow8; |
|
} |
|
|
|
button:hover #leftArrow { |
|
background-color: #27c39f; |
|
left: 106%; |
|
animation: 0.6s ease-in-out both infinite alternate leftArrow8; |
|
} |
|
|
|
.corner { |
|
position: absolute; |
|
width: 4em; |
|
height: 4em; |
|
background-color: #2761c3; |
|
box-shadow: inset 1px 1px 8px #2781c3; |
|
transform: scale(1) rotate(45deg); |
|
transition: 0.2s; |
|
} |
|
|
|
#rightTop { |
|
top: -1.98em; |
|
left: 91%; |
|
} |
|
|
|
#leftTop { |
|
top: -1.96em; |
|
left: -3em; |
|
} |
|
|
|
#leftBottom { |
|
top: 2.1em; |
|
left: -2.15em; |
|
} |
|
|
|
#rightBottom { |
|
top: 45%; |
|
left: 88%; |
|
} |
|
|
|
button:hover #leftTop { |
|
animation: 0.1s ease-in-out 0.05s both changeColor8, |
|
0.2s linear 0.4s both lightEffect8; |
|
} |
|
|
|
button:hover #rightTop { |
|
animation: 0.1s ease-in-out 0.15s both changeColor8, |
|
0.2s linear 0.4s both lightEffect8; |
|
} |
|
|
|
button:hover #rightBottom { |
|
animation: 0.1s ease-in-out 0.25s both changeColor8, |
|
0.2s linear 0.4s both lightEffect8; |
|
} |
|
|
|
button:hover #leftBottom { |
|
animation: 0.1s ease-in-out 0.35s both changeColor8, |
|
0.2s linear 0.4s both lightEffect8; |
|
} |
|
|
|
button:hover .corner { |
|
transform: scale(1.25) rotate(45deg); |
|
} |
|
|
|
button:hover #clip { |
|
animation: 0.2s ease-in-out 0.55s both greenLight8; |
|
--color: #27c39f; |
|
} |
|
} |
|
|
|
@keyframes changeColor8 { |
|
from { |
|
background-color: #2781c3; |
|
} |
|
to { |
|
background-color: #27c39f; |
|
} |
|
} |
|
|
|
@keyframes lightEffect8 { |
|
from { |
|
box-shadow: 1px 1px 5px #27c39f; |
|
} |
|
to { |
|
box-shadow: 0 0 2px #27c39f; |
|
} |
|
} |
|
|
|
@keyframes greenLight8 { |
|
from { |
|
} |
|
to { |
|
box-shadow: inset 0px 0px 32px #27c39f; |
|
} |
|
} |
|
|
|
@keyframes leftArrow8 { |
|
from { |
|
transform: translate(0px); |
|
} |
|
to { |
|
transform: translateX(10px); |
|
} |
|
} |
|
|
|
@keyframes rightArrow8 { |
|
from { |
|
transform: translate(0px); |
|
} |
|
to { |
|
transform: translateX(-10px); |
|
} |
|
} |
|
|
|
.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: 0rem; |
|
} |
|
|
|
.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>
|
|
|