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.
2893 lines
88 KiB
2893 lines
88 KiB
<template> |
|
<div class="right-monitor" v-loading="loading"> |
|
<div class="buildingDiv"> |
|
<img |
|
class="title-bg" |
|
src="../../../../assets/images/title-bg.png" |
|
alt="" |
|
/> |
|
<div class="title-word">位置：{{ currentName }}</div> |
|
</div> |
|
<div class="mostDiv"> |
|
<div class="windC"> |
|
<!-- 定时开关机定位 --> |
|
<div class="menu-title" @click="openTimeSwitch"> |
|
<div @click="openTimeSwitch">定时开关机</div> |
|
</div> |
|
<!-- 空调风柜定位 --> |
|
<img |
|
class="wind-img" |
|
src="../../../../assets/images/fenggui2.png" |
|
alt="" |
|
/> |
|
<!-- 风扇定位 --> |
|
<img |
|
class="windMove" |
|
:class="{ tunCircle: runStatusObj.collectValue }" |
|
src="../../../../assets/images/fengshan.png" |
|
alt="" |
|
/> |
|
<div class="arrow-flex2"> |
|
<img |
|
class="wind-arrow" |
|
src="../../../../assets/images/blue-arrow.png" |
|
alt="" |
|
/> |
|
<img |
|
class="wind-arrow" |
|
src="../../../../assets/images/blue-arrow.png" |
|
alt="" |
|
/> |
|
<img |
|
class="wind-arrow" |
|
src="../../../../assets/images/blue-arrow.png" |
|
alt="" |
|
/> |
|
<img |
|
class="wind-arrow" |
|
src="../../../../assets/images/blue-arrow.png" |
|
alt="" |
|
/> |
|
</div> |
|
<div class="arrow-flex3"> |
|
<img |
|
class="wind-arrow" |
|
src="../../../../assets/images/blue-arrow.png" |
|
alt="" |
|
/> |
|
<img |
|
class="wind-arrow" |
|
src="../../../../assets/images/blue-arrow.png" |
|
alt="" |
|
/> |
|
<img |
|
class="wind-arrow" |
|
src="../../../../assets/images/blue-arrow.png" |
|
alt="" |
|
/> |
|
<img |
|
class="wind-arrow" |
|
src="../../../../assets/images/blue-arrow.png" |
|
alt="" |
|
/> |
|
</div> |
|
<div class="wind-tem1" v-if="isObjectValid(backAirObj)"> |
|
<div :class="getTextClass(backAirObj, 'wind-text')">回风温度</div> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
@keyup.enter.native="handleEnter(backAirObj, $event, '℃')" |
|
@input="handleInput(backAirObj)" |
|
@blur="handleBlur()" |
|
v-model="backAirObj.collectValue" |
|
disabled |
|
size="mini" |
|
> |
|
<svg-icon |
|
slot="prefix" |
|
icon-class="tem_icon" |
|
class="tem-icon" |
|
/> |
|
</el-input> </el-form-item |
|
></el-form> |
|
</div> |
|
<div class="wind-tem1-set" v-if="isObjectValid(backAirObjSet)"> |
|
<div :class="getTextClass(backAirObjSet, 'wind-text')"> |
|
回风温度设置 |
|
</div> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
@keyup.enter.native="handleEnter(backAirObjSet, $event, '℃')" |
|
@input="handleInput(backAirObjSet)" |
|
@blur="handleBlur()" |
|
v-model="backAirObjSet.collectValue" |
|
size="mini" |
|
> |
|
<svg-icon |
|
slot="prefix" |
|
icon-class="tem_icon" |
|
class="tem-icon" |
|
/> |
|
</el-input> </el-form-item |
|
></el-form> |
|
</div> |
|
<div class="dampers-name1">宴会一厅风阀</div> |
|
<div class="dampers-position1" v-if="isObjectValid(damperOneBackObj)"> |
|
<div :class="getTextClass(damperOneBackObj, 'wind-text')">反馈：</div> |
|
<div :class="getTextClass(damperOneBackObj, 'back-text')"> |
|
{{ damperOneBackObj.collectValue }}% |
|
</div> |
|
</div> |
|
<div class="dampers-position2" v-if="isObjectValid(damperOneObj)"> |
|
<div :class="getTextClass(damperOneObj, 'wind-text')">自动调节：</div> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
style="width: 1.2rem" |
|
@keyup.enter.native="handleEnter(damperOneObj, $event, '%')" |
|
@input="handleInput(damperOneObj)" |
|
@blur="handleBlur()" |
|
v-model="damperOneObj.collectValue" |
|
size="mini" |
|
> |
|
<svg-icon |
|
slot="prefix" |
|
icon-class="percentage-icon" |
|
class="percentage-icon" |
|
/> |
|
</el-input> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div class="dampers-position3" v-if="isObjectValid(damperOneRemoteObj)"> |
|
<div :class="getTextClass(damperOneRemoteObj, 'wind-text')"> |
|
远程手自动： |
|
</div> |
|
<el-switch |
|
style="display: block" |
|
v-model="damperOneRemoteObj.collectValue" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
active-text="手动" |
|
inactive-text="自动" |
|
@change="handleControlText(damperOneRemoteObj,'手动','自动')" |
|
> |
|
</el-switch> |
|
</div> |
|
<div class="dampers-position4" v-if="isObjectValid(damperOneManualObj)"> |
|
<div :class="getTextClass(damperOneManualObj, 'wind-text')"> |
|
手动调节： |
|
</div> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
style="width: 1.2rem" |
|
@keyup.enter.native=" |
|
handleEnter(damperOneManualObj, $event, '%') |
|
" |
|
@input="handleInput(damperOneManualObj)" |
|
@blur="handleBlur()" |
|
v-model="damperOneManualObj.collectValue" |
|
size="mini" |
|
:disabled="!damperOneRemoteObj.collectValue" |
|
> |
|
<svg-icon |
|
slot="prefix" |
|
icon-class="percentage-icon" |
|
class="percentage-icon" |
|
/> |
|
</el-input> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div class="dampers-name2">餐厅风阀</div> |
|
<div class="dampers-position6" v-if="isObjectValid(damperTwoBackObj)"> |
|
<div :class="getTextClass(damperTwoBackObj, 'wind-text')">反馈：</div> |
|
<div :class="getTextClass(damperTwoBackObj, 'back-text')"> |
|
{{ damperTwoBackObj.collectValue }}% |
|
</div> |
|
</div> |
|
<div class="dampers-position7" v-if="isObjectValid(damperTwoObj)"> |
|
<div :class="getTextClass(damperTwoObj, 'wind-text')">自动调节：</div> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
style="width: 1.2rem" |
|
@keyup.enter.native="handleEnter(damperTwoObj, $event, '%')" |
|
@input="handleInput(damperTwoObj)" |
|
@blur="handleBlur()" |
|
v-model="damperTwoObj.collectValue" |
|
size="mini" |
|
> |
|
<svg-icon |
|
slot="prefix" |
|
icon-class="percentage-icon" |
|
class="percentage-icon" |
|
/> |
|
</el-input> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div class="dampers-position8" v-if="isObjectValid(damperTwoRemoteObj)"> |
|
<div :class="getTextClass(damperTwoRemoteObj, 'wind-text')"> |
|
远程手自动： |
|
</div> |
|
<el-switch |
|
style="display: block" |
|
v-model="damperTwoRemoteObj.collectValue" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
active-text="手动" |
|
inactive-text="自动" |
|
@change="handleControlText(damperTwoRemoteObj,'手动','自动')" |
|
> |
|
</el-switch> |
|
</div> |
|
<div class="dampers-position9" v-if="isObjectValid(damperTwoManualObj)"> |
|
<div :class="getTextClass(damperTwoManualObj, 'wind-text')"> |
|
手动调节： |
|
</div> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
style="width: 1.2rem" |
|
@keyup.enter.native=" |
|
handleEnter(damperTwoManualObj, $event, '%') |
|
" |
|
@input="handleInput(damperTwoManualObj)" |
|
@blur="handleBlur()" |
|
v-model="damperTwoManualObj.collectValue" |
|
size="mini" |
|
:disabled="!damperTwoRemoteObj.collectValue" |
|
> |
|
<svg-icon |
|
slot="prefix" |
|
icon-class="percentage-icon" |
|
class="percentage-icon" |
|
/> |
|
</el-input> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div class="dampers-name3">会议风阀</div> |
|
<div |
|
class="dampers-position10" |
|
v-if="isObjectValid(damperThreeBackObj)" |
|
> |
|
<div :class="getTextClass(damperThreeBackObj, 'wind-text')"> |
|
反馈： |
|
</div> |
|
<div :class="getTextClass(damperThreeBackObj, 'back-text')"> |
|
{{ damperThreeBackObj.collectValue }}% |
|
</div> |
|
</div> |
|
<div class="dampers-position11" v-if="isObjectValid(damperThreeObj)"> |
|
<div :class="getTextClass(damperThreeObj, 'wind-text')"> |
|
自动调节： |
|
</div> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
style="width: 1.2rem" |
|
@keyup.enter.native="handleEnter(damperThreeObj, $event, '%')" |
|
@input="handleInput(damperThreeObj)" |
|
@blur="handleBlur()" |
|
v-model="damperThreeObj.collectValue" |
|
size="mini" |
|
> |
|
<svg-icon |
|
slot="prefix" |
|
icon-class="percentage-icon" |
|
class="percentage-icon" |
|
/> |
|
</el-input> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div |
|
class="dampers-position12" |
|
v-if="isObjectValid(damperThreeRemoteObj)" |
|
> |
|
<div :class="getTextClass(damperThreeRemoteObj, 'wind-text')"> |
|
远程手自动： |
|
</div> |
|
<el-switch |
|
style="display: block" |
|
v-model="damperThreeRemoteObj.collectValue" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
active-text="手动" |
|
inactive-text="自动" |
|
@change="handleControlText(damperThreeRemoteObj,'手动','自动')" |
|
> |
|
</el-switch> |
|
</div> |
|
<div |
|
class="dampers-position13" |
|
v-if="isObjectValid(damperThreeManualObj)" |
|
> |
|
<div :class="getTextClass(damperThreeManualObj, 'wind-text')"> |
|
手动调节： |
|
</div> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
style="width: 1.2rem" |
|
@keyup.enter.native=" |
|
handleEnter(damperThreeManualObj, $event, '%') |
|
" |
|
@input="handleInput(damperThreeManualObj)" |
|
@blur="handleBlur()" |
|
v-model="damperThreeManualObj.collectValue" |
|
size="mini" |
|
:disabled="!damperThreeRemoteObj.collectValue" |
|
> |
|
<svg-icon |
|
slot="prefix" |
|
icon-class="percentage-icon" |
|
class="percentage-icon" |
|
/> |
|
</el-input> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div class="fan-satatus3"> |
|
<div |
|
class="context-li" |
|
v-if="isObjectValid(startStopObj)" |
|
style="width: 2.4rem" |
|
> |
|
<div :class="getTextClass(startStopObj, 'wind-text')"> |
|
启停选择: |
|
</div> |
|
<el-select |
|
size="mini" |
|
v-model="startStopObj.collectValue" |
|
placeholder="请选择" |
|
@change="selectThink(startStopObj)" |
|
@visible-change=" |
|
(visible) => handleVisibleChange(visible, startStopObj) |
|
" |
|
> |
|
<el-option |
|
v-for="item in options" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
> |
|
</el-option> |
|
</el-select> |
|
</div> |
|
<div |
|
class="context-li" |
|
v-if="isObjectValid(remoteManualObj) && startStopValue === 0" |
|
> |
|
<div :class="getTextClass(remoteManualObj, 'wind-text')"> |
|
远程手动启停: |
|
</div> |
|
<el-switch |
|
style="display: block" |
|
v-model="remoteManualObj.collectValue" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
active-text="开启" |
|
inactive-text="停止" |
|
@change="handleControlText(remoteManualObj,'开启','停止')" |
|
:disabled="automaticObj.collectValue" |
|
> |
|
</el-switch> |
|
</div> |
|
<div |
|
class="context-li" |
|
v-if="isObjectValid(timeScheduleObj) && startStopValue === 1" |
|
> |
|
<div :class="getTextClass(timeScheduleObj, 'wind-text')"> |
|
时间表启停: |
|
</div> |
|
<el-switch |
|
style="display: block" |
|
v-model="timeScheduleObj.collectValue" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
active-text="开启" |
|
inactive-text="停止" |
|
@change="handleControlText(timeScheduleObj,'开启','停止')" |
|
:disabled="automaticObj.collectValue" |
|
> |
|
</el-switch> |
|
</div> |
|
<div |
|
class="context-li" |
|
v-if="isObjectValid(openingBackObj)" |
|
style="width: 2.4rem" |
|
> |
|
<div :class="getTextClass(openingBackObj, 'wind-text')"> |
|
风阀开度设置: |
|
</div> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
@keyup.enter.native="handleEnter(openingBackObj, $event, '%')" |
|
@input="handleOpenInput(openingBackObj)" |
|
@blur="handleBlur()" |
|
v-model="openingBackObj.collectValue" |
|
size="mini" |
|
> |
|
<svg-icon |
|
slot="prefix" |
|
icon-class="percentage-icon" |
|
class="percentage-icon" |
|
/> |
|
</el-input> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div class="context-li" v-if="isObjectValid(faultAlarmObj)"> |
|
<div :class="getTextClass(faultAlarmObj, 'wind-text')"> |
|
风机故障状态: |
|
</div> |
|
<div class="badStautus" v-if="faultAlarmObj.collectValue">故障</div> |
|
<div class="goodStautus" v-else>正常</div> |
|
</div> |
|
<div class="context-li" v-if="isObjectValid(runStatusObj)"> |
|
<div :class="getTextClass(runStatusObj, 'wind-text')"> |
|
风机运行状态: |
|
</div> |
|
<div class="goodStautus" v-if="runStatusObj.collectValue">运行</div> |
|
<div class="noneStautus" v-else>不运行</div> |
|
</div> |
|
<div class="context-li" v-if="isObjectValid(pressureObj)"> |
|
<div :class="getTextClass(pressureObj, 'wind-text')">风机压差:</div> |
|
<div class="badStautus" v-if="pressureObj.collectValue">故障</div> |
|
<div class="goodStautus" v-else>正常</div> |
|
</div> |
|
</div> |
|
<div class="fan-satatus1"> |
|
<div class="context-li" v-if="isObjectValid(automaticObj)"> |
|
<div :class="getTextClass(automaticObj, 'wind-text')"> |
|
风机手自动状态: |
|
</div> |
|
<div class="noneStautus" v-if="automaticObj.collectValue">手动</div> |
|
<div class="goodStautus" v-else>自动</div> |
|
</div> |
|
<!-- <div class="context-li" v-if="isObjectValid(startControlObj)"> |
|
<div :class="getTextClass(startControlObj, 'wind-text')">风机启停控制</div> |
|
<el-switch |
|
style="display: block" |
|
v-model="startControlObj.collectValue" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
active-text="开启" |
|
inactive-text="停止" |
|
@change="handleControlText(startControlObj,'开启','停止')" |
|
> |
|
</el-switch> |
|
</div> --> |
|
<div class="context-li" v-if="isObjectValid(damperHzBackObj)"> |
|
<div :class="getTextClass(damperHzBackObj, 'wind-text')"> |
|
风机频率反馈: |
|
</div> |
|
<div>{{ damperHzBackObj.collectValue }}Hz</div> |
|
</div> |
|
<div class="context-li" v-if="isObjectValid(damperHzObj)"> |
|
<div :class="getTextClass(damperHzObj, 'wind-text')"> |
|
风机频率调节: |
|
</div> |
|
<div>{{ Math.floor(damperHzObj.collectValue / 2) }}Hz</div> |
|
</div> |
|
</div> |
|
<div class="fan-satatus2"> |
|
<div class="context-li" v-if="isObjectValid(waterValveObj)"> |
|
<div :class="getTextClass(waterValveObj, 'wind-text')"> |
|
水阀反馈 |
|
</div> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
@keyup.enter.native="handleEnter(waterValveObj, $event, '%')" |
|
@input="handleInput(waterValveObj)" |
|
@blur="handleBlur()" |
|
v-model="waterValveObj.collectValue" |
|
disabled |
|
size="mini" |
|
> |
|
<svg-icon |
|
slot="prefix" |
|
icon-class="percentage-icon" |
|
class="percentage-icon" |
|
/> |
|
</el-input> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
</div> |
|
<div class="fan-satatus2-set"> |
|
<div class="context-li" v-if="isObjectValid(waterValveObjSet)"> |
|
<div :class="getTextClass(waterValveObjSet, 'wind-text')"> |
|
水阀调节 |
|
</div> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
@keyup.enter.native=" |
|
handleEnter(waterValveObjSet, $event, '%') |
|
" |
|
@input="handleInput(waterValveObjSet)" |
|
@blur="handleBlur()" |
|
v-model="waterValveObjSet.collectValue" |
|
disabled |
|
size="mini" |
|
> |
|
<svg-icon |
|
slot="prefix" |
|
icon-class="percentage-icon" |
|
class="percentage-icon" |
|
/> |
|
</el-input> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
</div> |
|
<div class="fan-satatus4"> |
|
<div |
|
class="context-li" |
|
v-if="isObjectValid(modeChangeObj)" |
|
style="width: 2.4rem" |
|
> |
|
<div :class="getTextClass(modeChangeObj, 'wind-text')"> |
|
模式选择: |
|
</div> |
|
<el-select |
|
size="mini" |
|
v-model="modeChangeObj.collectValue" |
|
placeholder="请选择" |
|
@change="selectThink2(modeChangeObj)" |
|
@visible-change=" |
|
(visible) => handleVisibleChange2(visible, modeChangeObj) |
|
" |
|
> |
|
<el-option |
|
v-for="item in modeOptions" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
> |
|
</el-option> |
|
</el-select> |
|
</div> |
|
<div class="context-li" v-if="isObjectValid(modeOneObj)"> |
|
<div :class="getTextClass(modeOneObj, 'wind-text')"> |
|
宴会一厅模式-频率设定: |
|
</div> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
@keyup.enter.native="handleEnter(modeOneObj, $event, 'Hz')" |
|
@input="handleInput(modeOneObj)" |
|
@blur="handleBlur()" |
|
v-model="modeOneObj.collectValue" |
|
size="mini" |
|
:disabled="isShowMode1" |
|
> |
|
<svg-icon |
|
slot="prefix" |
|
icon-class="hz-icon" |
|
class="percentage-icon" |
|
/> |
|
</el-input> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div class="context-li" v-if="isObjectValid(modeTwoObj)"> |
|
<div :class="getTextClass(modeTwoObj, 'wind-text')"> |
|
餐厅模式-频率设定: |
|
</div> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
@keyup.enter.native="handleEnter(modeTwoObj, $event, 'Hz')" |
|
@input="handleInput(modeTwoObj)" |
|
@blur="handleBlur()" |
|
v-model="modeTwoObj.collectValue" |
|
size="mini" |
|
:disabled="isShowMode2" |
|
> |
|
<svg-icon |
|
slot="prefix" |
|
icon-class="hz-icon" |
|
class="percentage-icon" |
|
/> |
|
</el-input> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div class="context-li" v-if="isObjectValid(modeThreeObj)"> |
|
<div :class="getTextClass(modeThreeObj, 'wind-text')"> |
|
会议模式-频率设定: |
|
</div> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
@keyup.enter.native="handleEnter(modeThreeObj, $event, 'Hz')" |
|
@input="handleInput(modeThreeObj)" |
|
@blur="handleBlur()" |
|
v-model="modeThreeObj.collectValue" |
|
:disabled="isShowMode3" |
|
size="mini" |
|
> |
|
<svg-icon |
|
slot="prefix" |
|
icon-class="hz-icon" |
|
class="percentage-icon" |
|
/> |
|
</el-input> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div class="context-li" v-if="isObjectValid(modeFourObj)"> |
|
<div :class="getTextClass(modeFourObj, 'wind-text')"> |
|
全开模式-频率设定: |
|
</div> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
@keyup.enter.native="handleEnter(modeFourObj, $event, 'Hz')" |
|
@input="handleInput(modeFourObj)" |
|
@blur="handleBlur()" |
|
v-model="modeFourObj.collectValue" |
|
size="mini" |
|
:disabled="isShowMode4" |
|
> |
|
<svg-icon |
|
slot="prefix" |
|
icon-class="hz-icon" |
|
class="percentage-icon" |
|
/> |
|
</el-input> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
</div> |
|
<!-- 远程启停 --> |
|
<div |
|
class="offClass" |
|
@click="handleOneKeyButton(remoteManualObj, '远程手动停止')" |
|
v-if=" |
|
isObjectValid(remoteManualObj) && |
|
startStopValue === 0 && |
|
!automaticObj.collectValue |
|
" |
|
> |
|
<div v-if="remoteManualObj.collectValue" class="off-bg on-animation"> |
|
运行 |
|
</div> |
|
<div v-else class="off-bg">停止</div> |
|
</div> |
|
<!-- 时间表启停 --> |
|
<div |
|
class="offClass" |
|
@click="handleOneKeyButton(timeScheduleObj, '时间表停止')" |
|
v-if=" |
|
isObjectValid(timeScheduleObj) && |
|
startStopValue === 1 && |
|
!automaticObj.collectValue |
|
" |
|
> |
|
<div v-if="timeScheduleObj.collectValue" class="off-bg on-animation"> |
|
运行 |
|
</div> |
|
<div v-else class="off-bg">停止</div> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- 定时开关内容 --> |
|
<el-dialog |
|
title="定时开关机功能" |
|
:visible.sync="isOpenTimeSwitch" |
|
append-to-body |
|
width="805px" |
|
class="custom-dialog" |
|
> |
|
<div class="dialog-content"> |
|
<div class="device-container" v-loading="loading"> |
|
<div class="device-li"> |
|
<div class="device-name">定时名称</div> |
|
<div class="device-name">定时开机</div> |
|
<div class="device-name">定时关机</div> |
|
<div class="device-name">启动状态</div> |
|
</div> |
|
<div |
|
class="device-li" |
|
v-for="(item, index) in delayList" |
|
:key="index" |
|
:class="{ highlight: item.name.includes(currentWeekday) }" |
|
> |
|
<div class="device-name">{{ item.name }}</div> |
|
<div class="device-name"> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
size="mini" |
|
v-model="item.delayOpenHour" |
|
@keyup.enter.native=" |
|
handleSwitchEnter(item, 'openHour', $event) |
|
" |
|
@input="handleSwitchInput(item, 'delayOpenHour', 'hour')" |
|
></el-input> </el-form-item |
|
></el-form> |
|
<div class="slip">:</div> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
size="mini" |
|
v-model="item.delayOpenMinute" |
|
@keyup.enter.native=" |
|
handleSwitchEnter(item, 'openMinute', $event) |
|
" |
|
@input=" |
|
handleSwitchInput(item, 'delayOpenMinute', 'minute') |
|
" |
|
></el-input> </el-form-item |
|
></el-form> |
|
</div> |
|
<div class="device-name"> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
size="mini" |
|
v-model="item.delayCloseHour" |
|
@keyup.enter.native=" |
|
handleSwitchEnter(item, 'closeHour', $event) |
|
" |
|
@input="handleSwitchInput(item, 'delayCloseHour', 'hour')" |
|
></el-input></el-form-item |
|
></el-form> |
|
<div class="slip">:</div> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input |
|
size="mini" |
|
v-model="item.delayCloseMinute" |
|
@keyup.enter.native=" |
|
handleSwitchEnter(item, 'closeMinute', $event) |
|
" |
|
@input=" |
|
handleSwitchInput(item, 'delayCloseMinute', 'minute') |
|
" |
|
></el-input></el-form-item |
|
></el-form> |
|
</div> |
|
<div class="device-name"> |
|
<el-switch |
|
style="display: block" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
active-text="开启" |
|
inactive-text="停用" |
|
v-model="item.delayStatus" |
|
@change="handleSwitchStatus(item)" |
|
> |
|
</el-switch> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { windList, timeList, undateTime } from "@/api/aircAndWindc/index"; |
|
import { operationConrol } from "@/api/hotWater/waterControl"; |
|
export default { |
|
props: { |
|
// 定义接收的 currentId 和 currentName |
|
currentId: { |
|
//当前选中高亮的id |
|
type: String, |
|
required: true, |
|
}, |
|
currentName: { |
|
//当前选中的名称 |
|
type: String, |
|
required: true, |
|
}, |
|
}, |
|
data() { |
|
return { |
|
loading: false, |
|
backwaterObj: {}, //回水温度 |
|
waterValveObj: {}, //水阀调节 |
|
waterValveObjSet: {}, //水阀调节设置 |
|
startControlObj: {}, //启停控制 |
|
runStatusObj: {}, //运行状态 |
|
damperOneObj: {}, //风阀1调节 |
|
damperTwoObj: {}, //风阀2调节 |
|
damperThreeObj: {}, //风阀3调节 |
|
damperOneBackObj: {}, //风阀1反馈 |
|
damperTwoBackObj: {}, //风阀2反馈 |
|
damperThreeBackObj: {}, //风阀3反馈 |
|
damperOneRemoteObj: {}, //风阀1远程手自动选择 |
|
damperTwoRemoteObj: {}, //风阀2远程手自动选择 |
|
damperThreeRemoteObj: {}, //风阀3远程手自动选择 |
|
damperOneManualObj: {}, //风阀1手动调节 |
|
damperTwoManualObj: {}, //风阀2手动调节 |
|
damperThreeManualObj: {}, //风阀3手动调节 |
|
openingBackObj: {}, //风阀开度反馈 |
|
startStopObj: {}, //风阀启停选择 |
|
remoteManualObj: {}, //远程手动启停 |
|
timeScheduleObj: {}, //时间表启停 |
|
damperHzBackObj: {}, //风机频率反馈 |
|
damperHzObj: {}, //风机频率调节 |
|
modeChangeObj: {}, //模式选择 |
|
modeOneObj: {}, //宴会一厅模式 |
|
modeTwoObj: {}, //餐厅模式 |
|
modeThreeObj: {}, //会议模式 |
|
modeFourObj: {}, //全开模式 |
|
pressureObj: {}, //压差 |
|
automaticObj: {}, //手自动状态 |
|
backAirObj: {}, //回风温度 |
|
backAirObjSet: {}, //回风温度设置 |
|
faultAlarmObj: {}, //故障报警 |
|
waterSupplyObj: {}, //供水温度 |
|
|
|
tableData: [], //系统状态表格数据 |
|
temValue: "℃", //回风温度 |
|
temValueSet: "℃", //回风温度设置 |
|
valvePercent: "%", //阀比例 |
|
runStatus: false, //运行状态 |
|
autoStatus: false, //手自动状态 |
|
startStatus: false, //启停控制 |
|
frequency: "v", |
|
isOpenTimeSwitch: false, |
|
delayList: [], |
|
currentWeekday: "", |
|
options: [ |
|
{ |
|
label: "远程手动启停", |
|
value: 0, |
|
}, |
|
{ |
|
label: "时间表启停", |
|
value: 1, |
|
}, |
|
], //启停选择列表 |
|
// 用于存储启停选择select选择前的值 |
|
oldValue: null, |
|
// 用于控制启停选择不同select值显示内容 |
|
startStopValue: null, |
|
|
|
modeOptions: [ |
|
{ |
|
label: "宴会一厅模式", |
|
value: 0, |
|
}, |
|
{ |
|
label: "餐厅模式", |
|
value: 1, |
|
}, |
|
{ |
|
label: "会议模式", |
|
value: 2, |
|
}, |
|
{ |
|
label: "全开模式", |
|
value: 3, |
|
}, |
|
], //模式选择列表 |
|
isShowMode1: false, |
|
isShowMode2: false, |
|
isShowMode3: false, |
|
isShowMode4: false, |
|
timer: null, // 用于存储定时器 ID |
|
}; |
|
}, |
|
watch: { |
|
temValue(newVal) { |
|
let valueWithoutTem = newVal.replace(/℃/g, ""); |
|
if (valueWithoutTem === "") { |
|
this.temValue = "℃"; |
|
} else { |
|
this.temValue = valueWithoutTem + "℃"; |
|
} |
|
}, |
|
valvePercent(newVal) { |
|
// 去除输入值中的 % |
|
let valueWithoutPercent = newVal.replace(/%/g, ""); |
|
// 如果输入值为空，保持 % |
|
if (valueWithoutPercent === "") { |
|
this.temValue = "%"; |
|
} else { |
|
// 否则在输入值后面添加 % |
|
this.temValue = valueWithoutPercent + "%"; |
|
} |
|
}, |
|
frequency(newVal) { |
|
let valueWithoutFrequency = newVal.replace(/v/g, ""); |
|
if (valueWithoutFrequency === "") { |
|
this.temValue = "v"; |
|
} else { |
|
this.temValue = valueWithoutFrequency + "v"; |
|
} |
|
}, |
|
// 监听 currentId 的变化 |
|
currentId: { |
|
deep: true, |
|
immediate: true, |
|
handler(newVal, val) { |
|
console.log("子组件改变的值-----", newVal); |
|
if (newVal) { |
|
this.$nextTick(function () { |
|
let val = newVal; |
|
this.getWindList(val); |
|
}); |
|
} |
|
}, |
|
}, |
|
}, |
|
|
|
created() { |
|
const weekdays = [ |
|
"星期日", |
|
"星期一", |
|
"星期二", |
|
"星期三", |
|
"星期四", |
|
"星期五", |
|
"星期六", |
|
]; |
|
const date = new Date(); |
|
const dayIndex = date.getDay(); |
|
this.currentWeekday = weekdays[dayIndex]; |
|
console.log("今天是星期几", this.currentWeekday); |
|
}, |
|
mounted() { |
|
// 设置定时器，每 10 秒执行一次 |
|
this.timer = setInterval(() => { |
|
this.getWindList(this.currentId); |
|
}, 10000); |
|
}, |
|
beforeDestroy() { |
|
// 组件销毁前清除定时器 |
|
if (this.timer) { |
|
clearInterval(this.timer); |
|
} |
|
}, |
|
methods: { |
|
// 判断对象是否有效（不为空且不为 undefined） |
|
isObjectValid(obj) { |
|
return obj && Object.keys(obj).length > 0; |
|
}, |
|
// 请求数据 |
|
getWindList(val) { |
|
console.log("请求了风柜系统", val); |
|
if (val) { |
|
return new Promise((resolve, reject) => { |
|
let data = { |
|
systemType: "2", |
|
houseId: val, |
|
}; |
|
windList(data) |
|
.then((res) => { |
|
console.log("风柜系统查询返回", res); |
|
if (res.code == 200 && res.rows.length > 0) { |
|
let data = res.rows[0].values; |
|
this.backwaterObj = {}; //回水温度 |
|
this.waterValveObj = {}; //水阀反馈 |
|
this.waterValveObjSet = {}; //水阀调节 |
|
this.startControlObj = {}; //启停控制 |
|
this.runStatusObj = {}; //运行状态 |
|
this.airSupplyObj = {}; //送风温度 |
|
this.damperOneObj = {}; //风阀1调节 |
|
this.damperTwoObj = {}; //风阀2调节 |
|
this.damperThreeObj = {}; //风阀3调节 |
|
this.damperOneBackObj = {}; //风阀1反馈 |
|
this.damperTwoBackObj = {}; //风阀2反馈 |
|
this.damperThreeBackObj = {}; //风阀3反馈 |
|
this.damperOneRemoteObj = {}; //风阀1远程手自动选择 |
|
this.damperTwoRemoteObj = {}; //风阀2远程手自动选择 |
|
this.damperThreeRemoteObj = {}; //风阀3远程手自动选择 |
|
this.damperOneManualObj = {}; //风阀1手动调节 |
|
this.damperTwoManualObj = {}; //风阀2手动调节 |
|
this.damperThreeManualObj = {}; //风阀3手动调节 |
|
this.openingBackObj = {}; //风阀开度反馈 |
|
this.startStopObj = {}; //风机启停选择 |
|
this.remoteManualObj = {}; //远程手动启停 |
|
this.timeScheduleObj = {}; //时间表启停 |
|
this.damperHzBackObj = {}; //风机频率反馈 |
|
this.damperHzObj = {}; //风机频率调节 |
|
this.modeChangeObj = {}; //模式选择 |
|
this.modeOneObj = {}; //宴会一厅模式 |
|
this.modeTwoObj = {}; //餐厅模式 |
|
this.modeThreeObj = {}; //会议模式 |
|
this.modeFourObj = {}; //全开模式 |
|
this.pressureObj = {}; //压差 |
|
this.automaticObj = {}; //手自动状态 |
|
this.backAirObj = {}; //回风温度 |
|
this.faultAlarmObj = {}; //故障报警 |
|
this.waterSupplyObj = {}; //供水温度 |
|
data.forEach((item) => { |
|
// 回水温度 |
|
if ( |
|
item.paramType === "12" && |
|
item.collectName.includes("回水") |
|
) { |
|
this.backwaterObj = item; |
|
} |
|
//水阀反馈 |
|
else if ( |
|
item.paramType === "4" && |
|
item.collectName.includes("水阀反馈") |
|
) { |
|
this.waterValveObj = item; |
|
} |
|
//水阀调节 |
|
else if ( |
|
item.paramType === "3" && |
|
item.collectName.includes("水阀调节") |
|
) { |
|
this.waterValveObjSet = item; |
|
} |
|
// //启停控制 0停止1开启 |
|
// else if (item.paramType === "2") { |
|
// this.startControlObj = item; |
|
// this.startControlObj.collectValue = |
|
// Number(item.collectValue) == 0 ? false : true; |
|
// } |
|
//运行状态 0不运行1运行 |
|
else if (item.paramType === "1") { |
|
this.runStatusObj = item; |
|
this.runStatusObj.collectValue = |
|
Number(item.collectValue) == 0 ? false : true; |
|
} |
|
//送风温度 |
|
else if ( |
|
item.paramType === "12" && |
|
item.collectName.includes("送风") |
|
) { |
|
this.airSupplyObj = item; |
|
} |
|
//压差 0正常1故障(true) |
|
else if (item.paramType === "33") { |
|
this.pressureObj = item; |
|
this.pressureObj.collectValue = |
|
Number(item.collectValue) == 0 ? false : true; |
|
} |
|
//手自动状态 0手动1自动 |
|
else if (item.paramType === "6") { |
|
this.automaticObj = item; |
|
this.automaticObj.collectValue = |
|
Number(item.collectValue) == 0 ? true : false; |
|
} |
|
//回风温度 |
|
else if ( |
|
item.paramType === "12" && |
|
item.collectName.includes("回风") |
|
) { |
|
this.backAirObj = item; |
|
} |
|
//回风温度设置 |
|
else if ( |
|
item.paramType === "14" && |
|
item.collectName.includes("回风") |
|
) { |
|
this.backAirObjSet = item; |
|
} |
|
//风阀1调节 |
|
else if ( |
|
item.paramType === "3" && |
|
item.collectName.includes("1号风阀调节") |
|
) { |
|
this.damperOneObj = item; |
|
console.log("风阀1", item); |
|
} |
|
//风阀2调节 |
|
else if ( |
|
item.paramType === "3" && |
|
item.collectName.includes("2号风阀调节") |
|
) { |
|
this.damperTwoObj = item; |
|
} |
|
//风阀3调节 |
|
else if ( |
|
item.paramType === "3" && |
|
item.collectName.includes("3号风阀调节") |
|
) { |
|
this.damperThreeObj = item; |
|
} |
|
//风阀1反馈 |
|
else if ( |
|
item.paramType === "4" && |
|
item.collectName.includes("1号风阀反馈") |
|
) { |
|
this.damperOneBackObj = item; |
|
console.log("风阀1", item); |
|
} |
|
//风阀2反馈 |
|
else if ( |
|
item.paramType === "4" && |
|
item.collectName.includes("2号风阀反馈") |
|
) { |
|
this.damperTwoBackObj = item; |
|
} |
|
//风阀3反馈 |
|
else if ( |
|
item.paramType === "4" && |
|
item.collectName.includes("3号风阀反馈") |
|
) { |
|
this.damperThreeBackObj = item; |
|
} |
|
//风阀1远程手自动状态 0自动1手动 |
|
else if ( |
|
item.paramType === "2" && |
|
item.collectName.includes("1号风阀远程手自动") |
|
) { |
|
this.damperOneRemoteObj = item; |
|
this.damperOneRemoteObj.collectValue = |
|
Number(item.collectValue) == 1 ? true : false; |
|
} |
|
//风阀2远程手自动状态 |
|
else if ( |
|
item.paramType === "2" && |
|
item.collectName.includes("2号风阀远程手自动") |
|
) { |
|
this.damperTwoRemoteObj = item; |
|
this.damperTwoRemoteObj.collectValue = |
|
Number(item.collectValue) == 1 ? true : false; |
|
} |
|
//风阀3远程手自动状态 |
|
else if ( |
|
item.paramType === "2" && |
|
item.collectName.includes("3号风阀远程手自动") |
|
) { |
|
this.damperThreeRemoteObj = item; |
|
this.damperThreeRemoteObj.collectValue = |
|
Number(item.collectValue) == 1 ? true : false; |
|
} |
|
//风阀1手动调节 |
|
else if ( |
|
item.paramType === "3" && |
|
item.collectName.includes("1号风阀手动调节") |
|
) { |
|
this.damperOneManualObj = item; |
|
} |
|
//风阀2手动调节 |
|
else if ( |
|
item.paramType === "3" && |
|
item.collectName.includes("2号风阀手动调节") |
|
) { |
|
this.damperTwoManualObj = item; |
|
} |
|
//风阀3手动调节 |
|
else if ( |
|
item.paramType === "3" && |
|
item.collectName.includes("3号风阀手动调节") |
|
) { |
|
this.damperThreeManualObj = item; |
|
} |
|
//风阀开度反馈 |
|
else if ( |
|
item.paramType === "3" && |
|
item.collectName.includes("风阀开度反馈") |
|
) { |
|
this.openingBackObj = item; |
|
} |
|
//风阀启停选择 |
|
else if ( |
|
item.paramType === "27" && |
|
item.collectName.includes("启停选择") |
|
) { |
|
this.startStopObj = item; |
|
if (typeof this.startStopObj.collectValue === "string") { |
|
// 检查字符串是否为纯数字 |
|
if ( |
|
/^\d+$/.test(this.startStopObj.collectValue) || |
|
this.startStopObj.collectValue.match(/^\d+\.00$/) |
|
) { |
|
this.startStopObj.collectValue = parseInt( |
|
this.startStopObj.collectValue, |
|
10 |
|
); |
|
this.startStopValue = this.startStopObj.collectValue; |
|
} |
|
} |
|
} |
|
//远程手动启停 0停止1开启 |
|
else if ( |
|
item.paramType === "2" && |
|
item.collectName.includes("远程手动启停") |
|
) { |
|
this.remoteManualObj = item; |
|
this.remoteManualObj.collectValue = |
|
Number(item.collectValue) == 1 ? true : false; |
|
} |
|
//时间表启停 0停止1开启 |
|
else if ( |
|
item.paramType === "2" && |
|
item.collectName.includes("时间表启停") |
|
) { |
|
this.timeScheduleObj = item; |
|
this.timeScheduleObj.collectValue = |
|
Number(item.collectValue) == 1 ? true : false; |
|
} |
|
// 风机频率反馈 |
|
else if ( |
|
item.paramType === "4" && |
|
item.collectName.includes("频率反馈") |
|
) { |
|
this.damperHzBackObj = item; |
|
} |
|
// 风机频率调节 |
|
else if ( |
|
item.paramType === "3" && |
|
item.collectName.includes("硬件频率控制") |
|
) { |
|
this.damperHzObj = item; |
|
} |
|
// 模式选择 |
|
else if ( |
|
item.paramType === "25" && |
|
item.collectName.includes("模式选择") |
|
) { |
|
this.modeChangeObj = item; |
|
// collectValue转换为整数 |
|
if (typeof this.modeChangeObj.collectValue === "string") { |
|
// 检查字符串是否为纯数字 |
|
if ( |
|
/^\d+$/.test(this.modeChangeObj.collectValue) || |
|
this.modeChangeObj.collectValue.match(/^\d+\.00$/) |
|
) { |
|
this.modeChangeObj.collectValue = parseInt( |
|
this.modeChangeObj.collectValue, |
|
10 |
|
); |
|
} |
|
} |
|
if (this.modeChangeObj.collectValue === 0) { |
|
this.isShowMode1 = true; |
|
this.isShowMode2 = false; |
|
this.isShowMode3 = false; |
|
this.isShowMode4 = false; |
|
} else if (this.modeChangeObj.collectValue === 1) { |
|
this.isShowMode1 = false; |
|
this.isShowMode2 = true; |
|
this.isShowMode3 = false; |
|
this.isShowMode4 = false; |
|
} else if (this.modeChangeObj.collectValue === 2) { |
|
this.isShowMode1 = false; |
|
this.isShowMode2 = false; |
|
this.isShowMode3 = true; |
|
this.isShowMode4 = false; |
|
} else if (this.modeChangeObj.collectValue === 3) { |
|
this.isShowMode1 = false; |
|
this.isShowMode2 = false; |
|
this.isShowMode3 = false; |
|
this.isShowMode4 = true; |
|
} |
|
} |
|
// 宴会一厅模式-频率设定 |
|
else if ( |
|
item.paramType === "3" && |
|
item.collectName.includes("宴会一厅模式") |
|
) { |
|
this.modeOneObj = item; |
|
} |
|
// 餐厅模式-频率设定 |
|
else if ( |
|
item.paramType === "3" && |
|
item.collectName.includes("餐厅模式") |
|
) { |
|
this.modeTwoObj = item; |
|
} |
|
// 会议模式-频率设定 |
|
else if ( |
|
item.paramType === "3" && |
|
item.collectName.includes("会议模式") |
|
) { |
|
this.modeThreeObj = item; |
|
} |
|
// 全开模式-频率设定 |
|
else if ( |
|
item.paramType === "3" && |
|
item.collectName.includes("全开模式") |
|
) { |
|
this.modeFourObj = item; |
|
} |
|
//故障报警 0正常 1故障 |
|
else if (item.paramType === "5") { |
|
this.faultAlarmObj = item; |
|
this.faultAlarmObj.collectValue = |
|
Number(item.collectValue) == 0 ? false : true; |
|
} |
|
//供水温度 |
|
else if ( |
|
item.paramType === "12" && |
|
item.collectName.includes("供水") |
|
) { |
|
this.waterSupplyObj = item; |
|
} |
|
}); |
|
} else { |
|
this.backwaterObj = {}; //回水温度 |
|
this.waterValveObj = {}; //水阀调节 |
|
this.startControlObj = {}; //启停控制 |
|
this.runStatusObj = {}; //运行状态 |
|
this.airSupplyObj = {}; //送风温度 |
|
this.damperOneObj = {}; //风阀1调节 |
|
this.damperTwoObj = {}; //风阀2调节 |
|
this.damperThreeObj = {}; //风阀3调节 |
|
this.damperOneBackObj = {}; //风阀1反馈 |
|
this.damperTwoBackObj = {}; //风阀2反馈 |
|
this.damperThreeBackObj = {}; //风阀3反馈 |
|
this.damperOneRemoteObj = {}; //风阀1远程手自动选择 |
|
this.damperTwoRemoteObj = {}; //风阀2远程手自动选择 |
|
this.damperThreeRemoteObj = {}; //风阀3远程手自动选择 |
|
this.damperOneManualObj = {}; //风阀1手动调节 |
|
this.damperTwoManualObj = {}; //风阀2手动调节 |
|
this.damperThreeManualObj = {}; //风阀3手动调节 |
|
this.openingBackObj = {}; //风阀开度反馈 |
|
this.startStopObj = {}; //风机启停选择 |
|
this.remoteManualObj = {}; //远程手动启停 |
|
this.timeScheduleObj = {}; //时间表启停 |
|
this.damperHzBackObj = {}; //风机频率反馈 |
|
this.damperHzObj = {}; //风机频率调节 |
|
this.modeChangeObj = {}; //模式选择 |
|
this.modeOneObj = {}; //宴会一厅模式 |
|
this.modeTwoObj = {}; //餐厅模式 |
|
this.modeThreeObj = {}; //会议模式 |
|
this.modeFourObj = {}; //全开模式 |
|
this.pressureObj = {}; //压差 |
|
this.automaticObj = {}; //手自动状态 |
|
this.backAirObj = {}; //回风温度 |
|
this.faultAlarmObj = {}; //故障报警 |
|
this.waterSupplyObj = {}; //供水温度 |
|
} |
|
// 成功时解析 Promise |
|
resolve(res); |
|
}) |
|
.catch((error) => { |
|
// 失败时拒绝 Promise |
|
reject(error); |
|
}); |
|
}); |
|
} |
|
}, |
|
// 根据对象的 quality 属性返回对应的类名 |
|
getTextClass(obj, claseName) { |
|
// console.log("打印所有点位的quality值······",obj.collectName, obj.quality); |
|
return [claseName, obj.quality !== "0" ? "alarm-text" : ""]; |
|
}, |
|
// 处理输入事件，过滤非数字字符 |
|
handleInput(item) { |
|
console.log("校验"); |
|
// 实时校验并过滤非数字字符 |
|
item.collectValue = String(item.collectValue).replace(/[^\d]/g, ""); |
|
}, |
|
handleOpenInput(item) { |
|
console.log("校验"); |
|
// 实时校验并过滤非数字字符 |
|
item.collectValue = String(item.collectValue).replace(/[^\d]/g, ""); |
|
}, |
|
handleOpenBlur(item) { |
|
let inputValue = parseInt(item.collectValue, 10); |
|
if (isNaN(inputValue)) { |
|
} else if (inputValue < 80) { |
|
item.collectValue = ""; |
|
this.$message.error("请输入大于80的值"); |
|
} else if (inputValue > 300) { |
|
item.collectValue = ""; |
|
this.$message.error("请输入小于300的值"); |
|
} |
|
}, |
|
// 失去焦点 |
|
handleBlur() { |
|
// this.currentFocusIndex = ""; |
|
}, |
|
handleEnter(item, event, unit) { |
|
console.log("请求后端"); |
|
console.log("接收到的事件对象:", event); |
|
// 阻止事件的默认行为 |
|
if (event && event.preventDefault) { |
|
event.preventDefault(); |
|
} |
|
// 失去焦点 |
|
event.target.blur(); |
|
if (item.collectValue == "" || item.collectValue == "null") { |
|
this.$message.error("请输入值"); |
|
return; // 确保后续代码不执行 |
|
} |
|
// 针对风阀开度设置 |
|
if (item.collectName.includes("风阀开度")) { |
|
if (item.collectValue < 80) { |
|
this.$message.error("请输入大于80的值"); |
|
return; |
|
} else if (item.collectValue > 300) { |
|
this.$message.error("请输入小于300的值"); |
|
return; |
|
} |
|
} |
|
this.$confirm( |
|
`确定要修改"${item.collectName}"为:${item.collectValue} ${unit}吗?`, |
|
"提示", |
|
{ |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
} |
|
) |
|
.then(() => { |
|
this.hadleOperationConrol(item.id, item.collectValue); |
|
}) |
|
.catch(() => { |
|
// 用户取消操作，需要更新原来的频率 |
|
// this.$emit("upList"); |
|
}); |
|
}, |
|
// 手自动切换 |
|
handleAutomaticText(item) { |
|
this.$confirm( |
|
`确定要切换设备的状态为:${item.collectValue ? "手动" : "自动 吗?"}`, |
|
"提示", |
|
{ |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
} |
|
) |
|
.then(() => { |
|
// 这里调用请求函数 |
|
let param = null; |
|
if (item.collectValue) { |
|
param = 1; |
|
} else { |
|
param = 0; |
|
} |
|
this.hadleOperationConrol(item.id, param); |
|
}) |
|
.catch(() => { |
|
// 用户取消操作，恢复开关状态 |
|
item.collectValue = !item.collectValue; |
|
console.log("不请求后台"); |
|
}); |
|
}, |
|
//启停控制/手动控制 |
|
handleControlText(item, name1, name2) { |
|
this.$confirm( |
|
`确定要切换设备的状态为:${item.collectValue ? name1 : name2}吗?`, |
|
"提示", |
|
{ |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
} |
|
) |
|
.then(() => { |
|
let param = null; |
|
if (item.collectValue) { |
|
param = 1; |
|
} else { |
|
param = 0; |
|
} |
|
this.hadleOperationConrol(item.id, param); |
|
}) |
|
.catch(() => { |
|
// 用户取消操作，恢复开关状态 |
|
item.collectValue = !item.collectValue; |
|
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.getWindList(this.currentId); |
|
// 关闭 loading 效果 |
|
this.loading = false; |
|
}, 8000); |
|
} else { |
|
// this.$modal.msgError("操作失败"); |
|
console.log("应该更新状态的"); |
|
// 更新所有设备状态; |
|
this.getWindList(this.currentId); |
|
} |
|
}) |
|
.catch((error) => { |
|
console.log("请求发生错误，更新设备状态", error); |
|
// 更新所有设备状态; |
|
this.getWindList(this.currentId); |
|
}); |
|
}, |
|
// 打开定时开关弹框 |
|
openTimeSwitch() { |
|
this.isOpenTimeSwitch = true; |
|
this.getPolicyList(); |
|
}, |
|
// 请求列表 |
|
getPolicyList() { |
|
return new Promise((resolve, reject) => { |
|
let data = { |
|
systemType: "2", |
|
funPolicyType: "3", |
|
houseId: this.currentId, |
|
}; |
|
timeList(data) |
|
.then((res) => { |
|
console.log("设备定时开关返回res", res); |
|
if (res.code === 200) { |
|
let handleList = res.rows; |
|
this.delayList = []; |
|
handleList.forEach((element, index) => { |
|
if (element.values && element.values.length > 0) { |
|
// 初始化一个空对象来存储非蝶阀处理后的结果 |
|
let delayItem = { |
|
name: element.name, |
|
}; |
|
const limitedChildren = element.values; |
|
limitedChildren.forEach((child) => { |
|
// console.log("定时${index}开_时", `定时${index}开_时`); |
|
// console.log("child.pointName", child.pointName); |
|
if (child.pointName) { |
|
// 定时开机-小时 |
|
if (child.pointName.includes("开_时")) { |
|
// console.log("定时开机-时·························"); |
|
delayItem.delayOpenHour = child.curValue; |
|
delayItem.delayOpenHourId = child.id; |
|
} |
|
// 定时开机-分钟 |
|
else if (child.pointName.includes("开_分")) { |
|
delayItem.delayOpenMinute = child.curValue; |
|
delayItem.delayOpenMinuteId = child.id; |
|
} |
|
// 定时关机-小时 |
|
else if (child.pointName.includes("关_时")) { |
|
delayItem.delayCloseHour = child.curValue; |
|
delayItem.delayCloseHourId = child.id; |
|
} |
|
// 定时关机-分钟 |
|
else if (child.pointName.includes("关_分")) { |
|
delayItem.delayCloseMinute = child.curValue; |
|
delayItem.delayCloseMinuteId = child.id; |
|
} |
|
// 启动状态 |
|
else if (child.pointName.includes(`启动标志`)) { |
|
delayItem.delayStatus = |
|
Number(child.curValue) == 0 ? false : true; |
|
delayItem.delayStatusId = child.id; |
|
} |
|
} |
|
}); |
|
// 将处理后的对象添加到 delayList 中 |
|
if (Object.keys(delayItem).length > 1) { |
|
this.delayList.push(delayItem); |
|
} |
|
} |
|
}); |
|
console.log("处理后的数组", this.delayList); |
|
// this.delayList = res.rows; |
|
} else { |
|
this.delayList = []; |
|
} |
|
// 成功时解析 Promise |
|
resolve(res); |
|
}) |
|
.catch((error) => { |
|
// 失败时拒绝 Promise |
|
reject(error); |
|
}); |
|
}); |
|
}, |
|
// 处理输入事件，过滤非数字字符 |
|
handleSwitchInput(item, propertyName, name) { |
|
console.log("校验", item[propertyName]); |
|
// 如果值为空，不进行后续校验 |
|
if (item[propertyName] === "") { |
|
return; |
|
} |
|
let isValid = true; |
|
// 实时校验并过滤非数字字符 |
|
let inputValue = String(item[propertyName]).replace(/[^\d]/g, ""); |
|
if (name === "hour") { |
|
isValid = |
|
!isNaN(inputValue) && |
|
parseInt(inputValue) >= 0 && |
|
parseInt(inputValue) <= 23; |
|
if (!isValid) { |
|
this.$message.error("输入值在0-23区间，请重新输入"); |
|
item[propertyName] = ""; |
|
return; |
|
} |
|
} else if (name === "minute") { |
|
isValid = |
|
!isNaN(inputValue) && |
|
parseInt(inputValue) >= 0 && |
|
parseInt(inputValue) <= 59; |
|
if (!isValid) { |
|
this.$message.error("输入值在0-59区间，请重新输入"); |
|
item[propertyName] = ""; |
|
return; |
|
} |
|
} |
|
item[propertyName] = inputValue; |
|
}, |
|
handleSwitchEnter(item, name, event) { |
|
console.log("item", item); |
|
console.log("接收到的事件对象:", event); |
|
// 阻止事件的默认行为 |
|
if (event && event.preventDefault) { |
|
event.preventDefault(); |
|
} |
|
// 失去焦点 |
|
event.target.blur(); |
|
let id = ""; |
|
let value = ""; |
|
let title = ""; |
|
let unit = ""; |
|
if (name === "openHour") { |
|
id = item.delayOpenHourId; |
|
value = item.delayOpenHour; |
|
title = "定时开机-小时"; |
|
unit = "时"; |
|
} else if (name === "openMinute") { |
|
id = item.delayOpenMinuteId; |
|
value = item.delayOpenMinute; |
|
title = "定时开机-分钟"; |
|
unit = "分"; |
|
} else if (name === "closeHour") { |
|
id = item.delayCloseHourId; |
|
value = item.delayCloseHour; |
|
title = "定时关机-小时"; |
|
unit = "时"; |
|
} else if (name === "closeMinute") { |
|
id = item.delayCloseMinuteId; |
|
value = item.delayCloseMinute; |
|
title = "定时关机-分钟"; |
|
unit = "分"; |
|
} |
|
|
|
if (value === "") { |
|
this.$message.warning("请输入当前设置值!"); |
|
return; |
|
} |
|
console.log("请求后端", item); |
|
this.$confirm( |
|
`确定要把"${item.name}"的${title}设置为:${value} ${unit}吗?`, |
|
"提示", |
|
{ |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
} |
|
) |
|
.then(() => { |
|
// console.log("打印id",id) |
|
this.handleSwitchOperationConrol(id, value); |
|
}) |
|
.catch(() => { |
|
// 用户取消操作，需要更新原来的频率 |
|
this.getPolicyList(); |
|
}); |
|
}, |
|
handleSwitchOperationConrol(id, param) { |
|
let data = { |
|
policyId: id, |
|
timeValue: param, |
|
}; |
|
console.log("操作参数", data); |
|
undateTime(data) |
|
.then((res) => { |
|
if (res.code == 200) { |
|
this.$modal.msgSuccess("指令下发成功!"); |
|
// 开启 loading 效果 |
|
this.loading = true; |
|
// 更新所有设备状态; |
|
setTimeout(() => { |
|
this.getPolicyList(); |
|
// 关闭 loading 效果 |
|
this.loading = false; |
|
}, 500); |
|
} else { |
|
// this.$modal.msgError("操作失败"); |
|
console.log("应该更新状态的"); |
|
// 更新所有设备状态; |
|
this.getPolicyList(); |
|
} |
|
}) |
|
.catch((error) => { |
|
console.log("请求发生错误，更新设备状态", error); |
|
// 更新所有设备状态; |
|
this.getPolicyList(); |
|
}); |
|
}, |
|
// 启用状态 |
|
handleSwitchStatus(item) { |
|
this.$confirm( |
|
`确定要切换"${item.name}"的状态为:${ |
|
item.delayStatus ? "开启" : "停用 吗?" |
|
}`, |
|
"提示", |
|
{ |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
} |
|
) |
|
.then(() => { |
|
// 这里调用请求函数 |
|
console.log("请求后台", item.delayStatus); |
|
let param = null; |
|
if (item.delayStatus) { |
|
param = 1; |
|
} else { |
|
param = 0; |
|
} |
|
this.handleSwitchOperationConrol(item.delayStatusId, param); |
|
}) |
|
.catch(() => { |
|
// 用户取消操作，恢复开关状态 |
|
item.delayStatus = !item.delayStatus; |
|
console.log("不请求后台"); |
|
}); |
|
}, |
|
// 处理select的选中值 |
|
selectThink(children) { |
|
console.log( |
|
"this.startStopObj.collectValue ", |
|
this.startStopObj.collectValue |
|
); |
|
const oldValue = children._oldValue; |
|
let collectText = ""; |
|
if (this.startStopObj.collectValue === 0) { |
|
collectText = "远程手动启停"; |
|
} else if (this.startStopObj.collectValue === 1) { |
|
collectText = "时间表启停"; |
|
} |
|
this.$confirm( |
|
`确定要修改"${children.collectName}"的数据为:${collectText}吗?`, |
|
"提示", |
|
{ |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
} |
|
) |
|
.then(() => { |
|
this.startStopValue = this.startStopObj.collectValue; |
|
this.hadleOperationConrol(children.id, children.collectValue); |
|
}) |
|
.catch(() => { |
|
// 用户取消操作，恢复原来的值 |
|
children.collectValue = oldValue; |
|
}); |
|
}, |
|
// 处理select下拉框显示或隐藏事件 |
|
handleVisibleChange(visible, children) { |
|
if (visible) { |
|
// 当下拉框打开时保存原值 |
|
this.$set(children, "_oldValue", children.collectValue); |
|
} |
|
}, |
|
// 处理select的选中值 |
|
selectThink2(children) { |
|
const oldValue = children._oldValue; |
|
let collectText = ""; |
|
if (this.modeChangeObj.collectValue === 0) { |
|
collectText = "宴会一厅模式"; |
|
} else if (this.modeChangeObj.collectValue === 1) { |
|
collectText = "餐厅模式"; |
|
} else if (this.modeChangeObj.collectValue === 2) { |
|
collectText = "会议模式"; |
|
} else if (this.modeChangeObj.collectValue === 3) { |
|
collectText = "全开模式"; |
|
} |
|
this.$confirm( |
|
`确定要修改"${children.collectName}"的数据为:${collectText}吗?`, |
|
"提示", |
|
{ |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
} |
|
) |
|
.then(() => { |
|
if (this.modeChangeObj.collectValue === 0) { |
|
this.isShowMode1 = true; |
|
this.isShowMode2 = false; |
|
this.isShowMode3 = false; |
|
this.isShowMode4 = false; |
|
} else if (this.modeChangeObj.collectValue === 1) { |
|
this.isShowMode1 = false; |
|
this.isShowMode2 = true; |
|
this.isShowMode3 = false; |
|
this.isShowMode4 = false; |
|
} else if (this.modeChangeObj.collectValue === 2) { |
|
this.isShowMode1 = false; |
|
this.isShowMode2 = false; |
|
this.isShowMode3 = true; |
|
this.isShowMode4 = false; |
|
} else if (this.modeChangeObj.collectValue === 3) { |
|
this.isShowMode1 = false; |
|
this.isShowMode2 = false; |
|
this.isShowMode3 = false; |
|
this.isShowMode4 = true; |
|
} |
|
this.hadleOperationConrol(children.id, children.collectValue); |
|
}) |
|
.catch(() => { |
|
// 用户取消操作，恢复原来的值 |
|
children.collectValue = oldValue; |
|
}); |
|
}, |
|
// 处理select下拉框显示或隐藏事件 |
|
handleVisibleChange2(visible, children) { |
|
if (visible) { |
|
// 当下拉框打开时保存原值 |
|
this.$set(children, "_oldValue", children.collectValue); |
|
} |
|
}, |
|
// 一键启停按钮 |
|
handleOneKeyButton(item, val) { |
|
console.log( |
|
"this.automaticObj.collectValue", |
|
this.automaticObj.collectValue |
|
); |
|
if (this.automaticObj.collectValue) { |
|
// 如果风机手自动状态为手动，则不可点击该按钮。 |
|
this.$message({ |
|
message: "当前风机手自动状态为手动", |
|
type: "warning", |
|
}); |
|
return; |
|
} |
|
let param = ""; |
|
let paramText = ""; |
|
if (item.collectValue) { |
|
// startControlObj.collectValue为true代表ON开启,此时点击按钮想OFF停止 |
|
param = 0; |
|
paramText = "停止"; |
|
} else { |
|
param = 1; |
|
paramText = "开启"; |
|
} |
|
this.$confirm(`确定把${val}设置为:${paramText}吗?`, "提示", { |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
}) |
|
.then(() => { |
|
this.hadleOperationConrol(item.id, param); |
|
}) |
|
.catch(() => {}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.buildingDiv { |
|
padding-left: 54px; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
margin-bottom: 20px; |
|
position: relative; |
|
.title-bg { |
|
width: 208px; |
|
height: 38px; |
|
position: absolute; |
|
left: 0; |
|
z-index: 0; |
|
} |
|
.title-word { |
|
z-index: 10; |
|
font-family: YouSheBiaoTiHei; |
|
font-size: 24px; |
|
color: #ffffff; |
|
white-space: nowrap; |
|
} |
|
} |
|
.mostDiv { |
|
width: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
// align-items: flex-start; |
|
} |
|
.windC { |
|
width: 13rem; |
|
height: 5.38rem; |
|
margin-right: 1rem; |
|
position: relative; |
|
.menu-title { |
|
color: #e1f4ff; |
|
font-size: 0.18rem; |
|
--bRadius: 0.05rem; |
|
text-align: center; |
|
position: absolute; |
|
top: 0; |
|
right: 0.5rem; |
|
width: 1.25rem; |
|
cursor: pointer; |
|
z-index: 9; |
|
div { |
|
position: relative; |
|
text-align: center; |
|
border-radius: var(--bRadius); |
|
transition: all 0.3s; |
|
padding: 0.01rem 0.02rem; |
|
background-color: rgba(85, 139, 211, 0.2); |
|
cursor: pointer; |
|
&::before, |
|
&::after { |
|
content: ""; |
|
position: absolute; |
|
top: -10px; |
|
left: -10px; |
|
right: -10px; |
|
bottom: -10px; |
|
border: 2px solid #46b2f1; |
|
transition: all 0.5s; |
|
border-radius: var(--bRadius); |
|
animation: clippath 3s infinite linear; |
|
cursor: pointer; |
|
} |
|
&::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%); |
|
} |
|
} |
|
} |
|
} |
|
.wind-img { |
|
width: 13.1rem; |
|
height: 5.7rem; |
|
position: absolute; |
|
top: 0.2rem; |
|
left: 0; |
|
z-index: 1; |
|
} |
|
.wind-tem1 { |
|
z-index: 10; |
|
width: 1.3rem; |
|
position: absolute; |
|
top: 0rem; |
|
left: 4.7rem; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
margin-bottom: 0.15rem; |
|
} |
|
} |
|
.wind-tem1-set { |
|
z-index: 10; |
|
width: 1.3rem; |
|
position: absolute; |
|
top: 1rem; |
|
left: 4.7rem; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
margin-bottom: 0.15rem; |
|
} |
|
} |
|
.dampers-name1 { |
|
z-index: 10; |
|
position: absolute; |
|
top: 1.5rem; |
|
left: 10.1rem; |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
white-space: nowrap; |
|
font-weight: bold; |
|
} |
|
.dampers-position1 { |
|
z-index: 10; |
|
// width: 3.8rem; |
|
position: absolute; |
|
top: 1.1rem; |
|
left: 12rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
font-size: 0.18rem; |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
white-space: nowrap; |
|
} |
|
.back-text { |
|
margin-right: 0.1rem; |
|
} |
|
} |
|
.dampers-position2 { |
|
z-index: 10; |
|
// width: 3.8rem; |
|
position: absolute; |
|
top: 1.45rem; |
|
left: 12rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
font-size: 0.18rem; |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
white-space: nowrap; |
|
} |
|
.back-text { |
|
margin-right: 0.1rem; |
|
} |
|
} |
|
.dampers-position3 { |
|
z-index: 10; |
|
width: 3rem; |
|
position: absolute; |
|
top: 1.85rem; |
|
left: 12rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
font-size: 0.18rem; |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
white-space: nowrap; |
|
} |
|
.back-text { |
|
margin-right: 0.1rem; |
|
} |
|
} |
|
.dampers-position4 { |
|
z-index: 10; |
|
// width: 3.8rem; |
|
position: absolute; |
|
top: 2.2rem; |
|
left: 12rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
font-size: 0.18rem; |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
white-space: nowrap; |
|
} |
|
.back-text { |
|
margin-right: 0.1rem; |
|
} |
|
} |
|
.dampers-name2 { |
|
z-index: 10; |
|
position: absolute; |
|
top: 3.3rem; |
|
left: 10.3rem; |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
white-space: nowrap; |
|
font-weight: bold; |
|
} |
|
.dampers-position6 { |
|
z-index: 10; |
|
// width: 3.57rem; |
|
position: absolute; |
|
top: 2.9rem; |
|
left: 12rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
font-size: 0.18rem; |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
white-space: nowrap; |
|
} |
|
.back-text { |
|
margin-right: 0.1rem; |
|
} |
|
} |
|
.dampers-position7 { |
|
z-index: 10; |
|
// width: 3.57rem; |
|
position: absolute; |
|
top: 3.25rem; |
|
left: 12rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
font-size: 0.18rem; |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
white-space: nowrap; |
|
} |
|
.back-text { |
|
margin-right: 0.1rem; |
|
} |
|
} |
|
.dampers-position8 { |
|
z-index: 10; |
|
width: 3rem; |
|
position: absolute; |
|
top: 3.7rem; |
|
left: 12rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
font-size: 0.18rem; |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
white-space: nowrap; |
|
} |
|
.back-text { |
|
margin-right: 0.1rem; |
|
} |
|
} |
|
.dampers-position9 { |
|
z-index: 10; |
|
// width: 3.57rem; |
|
position: absolute; |
|
top: 4.1rem; |
|
left: 12rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
font-size: 0.18rem; |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
white-space: nowrap; |
|
} |
|
.back-text { |
|
margin-right: 0.1rem; |
|
} |
|
} |
|
.dampers-name3 { |
|
z-index: 10; |
|
position: absolute; |
|
top: 5.2rem; |
|
left: 10.45rem; |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
white-space: nowrap; |
|
font-weight: bold; |
|
} |
|
.dampers-position10 { |
|
z-index: 10; |
|
// width: 3.57rem; |
|
position: absolute; |
|
top: 4.8rem; |
|
left: 12rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
font-size: 0.18rem; |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
white-space: nowrap; |
|
} |
|
.back-text { |
|
margin-right: 0.1rem; |
|
} |
|
} |
|
.dampers-position11 { |
|
z-index: 10; |
|
// width: 3.57rem; |
|
position: absolute; |
|
top: 5.15rem; |
|
left: 12rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
font-size: 0.18rem; |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
white-space: nowrap; |
|
} |
|
.back-text { |
|
margin-right: 0.1rem; |
|
} |
|
} |
|
.dampers-position12 { |
|
z-index: 10; |
|
width: 3rem; |
|
position: absolute; |
|
top: 5.6rem; |
|
left: 12rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
font-size: 0.18rem; |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
white-space: nowrap; |
|
} |
|
.back-text { |
|
margin-right: 0.1rem; |
|
} |
|
} |
|
.dampers-position13 { |
|
z-index: 10; |
|
// width: 3.57rem; |
|
position: absolute; |
|
top: 6rem; |
|
left: 12rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
font-size: 0.18rem; |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
white-space: nowrap; |
|
} |
|
.back-text { |
|
margin-right: 0.1rem; |
|
} |
|
} |
|
.fan-frequency { |
|
z-index: 10; |
|
position: absolute; |
|
top: 1.7rem; |
|
left: 8.5rem; |
|
width: 1.3rem; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
margin-bottom: 0.15rem; |
|
} |
|
} |
|
.fan-satatus1 { |
|
position: absolute; |
|
top: 4.3rem; |
|
left: 6.4rem; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
.context-li { |
|
z-index: 10; |
|
// width: 2rem; |
|
margin-bottom: 0.1rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
font-size: 0.18rem; |
|
} |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
margin-right: 0.15rem; |
|
white-space: nowrap; |
|
} |
|
} |
|
.fan-satatus2 { |
|
position: absolute; |
|
top: 5.3rem; |
|
left: 3.5rem; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
.context-li { |
|
z-index: 10; |
|
width: 2rem; |
|
margin-bottom: 0.1rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
} |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
margin-right: 0.15rem; |
|
white-space: nowrap; |
|
} |
|
} |
|
.fan-satatus2-set { |
|
position: absolute; |
|
top: 5.8rem; |
|
left: 3.5rem; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
.context-li { |
|
z-index: 10; |
|
width: 2rem; |
|
margin-bottom: 0.1rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
} |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
margin-right: 0.15rem; |
|
white-space: nowrap; |
|
} |
|
} |
|
.fan-satatus3 { |
|
position: absolute; |
|
top: 0.8rem; |
|
left: 6.4rem; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
.context-li { |
|
z-index: 10; |
|
// width: 2rem; |
|
margin-bottom: 0.1rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
} |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
margin-right: 0.15rem; |
|
white-space: nowrap; |
|
} |
|
} |
|
.fan-satatus4 { |
|
position: absolute; |
|
top: 5rem; |
|
left: 0rem; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
.context-li { |
|
z-index: 10; |
|
width: 3rem; |
|
margin-bottom: 0.1rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
} |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
margin-right: 0.15rem; |
|
white-space: nowrap; |
|
} |
|
} |
|
.goodStautus { |
|
color: rgb(57, 248, 51); |
|
font-size: 0.18rem; |
|
font-weight: bold; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
} |
|
.goodStautus::before { |
|
content: ""; |
|
display: inline-block; |
|
width: 0.1rem; |
|
height: 0.1rem; |
|
margin-right: 0.1rem; |
|
border-radius: 50%; |
|
background-color: rgb(57, 248, 51); |
|
} |
|
.badStautus { |
|
color: rgb(248, 48, 41); |
|
font-size: 0.18rem; |
|
font-weight: bold; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
animation: blink 1s infinite; |
|
} |
|
.badStautus::before { |
|
content: ""; |
|
display: inline-block; |
|
width: 0.1rem; |
|
height: 0.1rem; |
|
margin-right: 0.1rem; |
|
border-radius: 50%; |
|
background-color: rgb(248, 48, 41); |
|
animation: blink 1s infinite; |
|
} |
|
.noneStautus { |
|
color: rgb(194, 191, 191); |
|
font-size: 0.18rem; |
|
font-weight: bold; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
} |
|
.noneStautus::before { |
|
content: ""; |
|
display: inline-block; |
|
width: 0.1rem; |
|
height: 0.1rem; |
|
margin-right: 0.1rem; |
|
border-radius: 50%; |
|
background-color: rgb(194, 191, 191); |
|
} |
|
/* 定义灯闪烁的动画 */ |
|
@keyframes blink { |
|
0% { |
|
opacity: 1; |
|
} |
|
50% { |
|
opacity: 0.7; |
|
} |
|
100% { |
|
opacity: 1; |
|
} |
|
} |
|
.wind-valve { |
|
z-index: 10; |
|
position: absolute; |
|
top: 4.4rem; |
|
left: 1.8rem; |
|
width: 2rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
font-size: 0.18rem; |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
white-space: nowrap; |
|
} |
|
} |
|
.wind-valve2 { |
|
z-index: 10; |
|
position: absolute; |
|
top: 4.8rem; |
|
left: 1.8rem; |
|
width: 2rem; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
.wind-text { |
|
color: #00d2ff; |
|
font-size: 0.18rem; |
|
margin-right: 0.1rem; |
|
white-space: nowrap; |
|
} |
|
} |
|
.windMove { |
|
width: 0.72rem; |
|
height: 0.73rem; |
|
position: absolute; |
|
top: 3.11rem; |
|
right: 6.24rem; |
|
z-index: 10; |
|
} |
|
.tunCircle { |
|
/* 应用动画 */ |
|
animation: rotate 2s linear infinite; |
|
} /* 定义旋转动画 */ |
|
@keyframes rotate { |
|
from { |
|
transform: rotate(0deg); |
|
} |
|
to { |
|
transform: rotate(360deg); |
|
} |
|
} |
|
.arrow-flex2 { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
z-index: 10; |
|
position: absolute; |
|
top: 3.2rem; |
|
right: 2.9rem; |
|
} |
|
.arrow-flex3 { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
z-index: 10; |
|
position: absolute; |
|
top: 0.6rem; |
|
right: 8.7rem; |
|
transform: rotateY(180deg); |
|
} |
|
.wind-arrow { |
|
width: 0.4rem; |
|
height: 0.6rem; |
|
margin-right: 0.15rem; |
|
animation: moveArrow 2s linear infinite; |
|
} |
|
/* 定义每个箭头的透明度 */ |
|
.wind-arrow:nth-child(1) { |
|
opacity: 1; |
|
} |
|
|
|
.wind-arrow:nth-child(2) { |
|
opacity: 0.6; |
|
} |
|
|
|
.wind-arrow:nth-child(3) { |
|
opacity: 0.4; |
|
} |
|
.wind-arrow:nth-child(4) { |
|
opacity: 0.2; |
|
} |
|
|
|
/* 定义箭头移动的动画 */ |
|
@keyframes moveArrow { |
|
0% { |
|
transform: translateX(0); |
|
} |
|
|
|
100% { |
|
transform: translateX(0.2rem); |
|
/* 箭头向右移动的距离 */ |
|
} |
|
} |
|
.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: 5.5rem; |
|
left: 6.7rem; |
|
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; |
|
} |
|
} |
|
.device-container { |
|
display: flex; |
|
flex-direction: column; |
|
width: 100%; |
|
min-height: 530px; |
|
background-color: #142c4e; |
|
padding: 10px 10px 30px 10px; |
|
border-radius: 10px; |
|
font-size: 14px; |
|
.device-li { |
|
width: 100%; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
padding: 12px 0; |
|
color: #abcdfc; |
|
border-bottom: 1px dashed #0349ac; |
|
.device-name { |
|
flex: 1; |
|
white-space: nowrap; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: center; |
|
flex-wrap: nowrap; |
|
padding: 0 5px; |
|
.el-form-item { |
|
margin-bottom: 0 !important; |
|
} |
|
.slip { |
|
margin: 0 5px; |
|
color: #1282d8; |
|
font-weight: bold; |
|
} |
|
} |
|
} |
|
.device-li:nth-child(1) { |
|
color: #9ca3af; |
|
} |
|
} |
|
.highlight { |
|
background-color: #003863 !important; /* 定义高亮的背景颜色 */ |
|
color: #ffffff !important; |
|
font-weight: bold; |
|
} |
|
.device-container .highlight .device-name .slip { |
|
color: #ffffff !important; |
|
font-weight: bold; |
|
} |
|
/* 为高亮行添加图片箭头 */ |
|
.device-li.highlight::before { |
|
content: ""; |
|
background-image: url("../../../../assets/images/step.png"); |
|
background-size: contain; |
|
background-repeat: no-repeat; |
|
width: 30px; |
|
height: 30px; |
|
position: absolute; |
|
left: 2px; /* 图片位置，根据实际情况调整 */ |
|
top: 20%; |
|
transform: translateY(-50%); |
|
z-index: 999; |
|
animation: moveRight 1s ease-in-out infinite alternate; |
|
} |
|
@keyframes moveRight { |
|
0% { |
|
transform: translateX(0); /* 初始位置，不移动 */ |
|
} |
|
100% { |
|
transform: translateX(0.04rem); /* 向右移动 1rem 的距离 */ |
|
} |
|
} |
|
|
|
/* 确保 device-li 有相对定位 */ |
|
.device-li { |
|
position: relative; |
|
} |
|
|
|
/* 报警文字样式 */ |
|
.alarm-text { |
|
color: red !important; |
|
animation: blink 1s infinite; |
|
} |
|
|
|
// 媒体查询，适配大于2000px分辨率的大屏样式 |
|
@media (min-width: 2000px) { |
|
.device-container { |
|
min-height: 7rem !important; |
|
padding: 0.1rem 0.1rem 0.3rem 0.1rem !important; |
|
border-radius: 0.1rem !important; |
|
font-size: 0.14rem !important; |
|
.device-li { |
|
padding: 0.12rem 0 !important; |
|
.device-name { |
|
.slip { |
|
margin: 0 0.05rem !important; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
@media (min-width: 1360px) and (max-width: 1680px) { |
|
.windC { |
|
transform: scale(0.9); |
|
} |
|
} |
|
@media (min-width: 990px) and (max-width: 1360px) { |
|
.windC { |
|
transform: scale(0.8); |
|
.fan-satatus3 { |
|
top: 0.2rem !important; |
|
} |
|
} |
|
} |
|
// @media (min-width: 990px) and (max-width: 1160px) { |
|
// .windC { |
|
// transform: scale(0.7); |
|
// } |
|
// } |
|
// 手机端样式 |
|
@media (min-width: 0px) and (max-width: 990px) { |
|
.right-monitor { |
|
width: calc(100% - 210px) !important; |
|
} |
|
.windC { |
|
transform: scale(0.86); |
|
.fan-satatus3 { |
|
top: 0.6rem !important; |
|
} |
|
} |
|
.buildingDiv { |
|
padding-left: 0.54rem !important; |
|
margin-bottom: 0.2rem !important; |
|
.title-bg { |
|
width: 2.08rem !important; |
|
height: 0.38rem !important; |
|
} |
|
.title-word { |
|
font-size: 15px !important; |
|
} |
|
} |
|
.dampers-position2 { |
|
top: 1.3rem !important; |
|
} |
|
.dampers-position7 { |
|
top: 3.1rem !important; |
|
} |
|
.dampers-position11 { |
|
top: 5rem !important; |
|
} |
|
} |
|
</style> |
|
<style scoped> |
|
.windC >>> .el-input__inner { |
|
background-color: #04193a; |
|
border: 1px solid #1262db; |
|
color: #3ef0fd; |
|
font-weight: 700; |
|
text-align: center; |
|
padding: 0 0.1rem !important; |
|
font-size: 0.18rem !important; |
|
} |
|
.windC >>> .el-select .el-input__inner { |
|
background-color: #04193a; |
|
border: 1px solid #1262db; |
|
color: #3ef0fd; |
|
font-weight: 700; |
|
text-align: left !important; |
|
padding: 0 0.1rem !important; |
|
font-size: 0.17rem !important; |
|
} |
|
.windC >>> .el-input__prefix { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
.windC >>> .svg-icon { |
|
width: 0.2rem !important; |
|
height: 0.2rem !important; |
|
fill: #ffffff !important; |
|
} |
|
.windC >>> .el-form-item { |
|
margin-bottom: 0 !important; |
|
} |
|
.windC >>> .el-form-item--medium .el-form-item__content { |
|
line-height: 0 !important; |
|
} |
|
.windC >>> .el-switch { |
|
display: flex !important; |
|
flex-wrap: nowrap !important; |
|
} |
|
.windC >>> .el-switch__label { |
|
white-space: nowrap !important; |
|
} |
|
/* 手机端样式 */ |
|
@media (min-width: 0px) and (max-width: 990px) { |
|
.windC >>> .el-input--mini .el-input__inner { |
|
height: 0.28rem !important; |
|
line-height: 0.28rem !important; |
|
padding: 0.2rem 0.1rem !important; |
|
} |
|
.windC >>> .el-switch { |
|
height: 0.2rem !important; |
|
line-height: 0.2rem !important; |
|
font-size: 0.18rem !important; |
|
} |
|
.windC >>> .el-switch__label { |
|
height: 0.2rem !important; |
|
line-height: 0.2rem !important; |
|
font-size: 0.18rem !important; |
|
} |
|
.windC >>> .el-switch__label * { |
|
font-size: 0.18rem !important; |
|
} |
|
.windC >>> .el-switch__core { |
|
width: 0.4rem !important; |
|
height: 0.2rem !important; |
|
border-radius: 0.1rem !important; |
|
} |
|
.windC >>> .el-switch__core:after { |
|
width: 0.16rem !important; |
|
height: 0.16rem !important; |
|
top: 0.01rem !important; |
|
} |
|
.windC >>> .el-switch.is-checked .el-switch__core::after { |
|
margin-left: -0.17rem !important; |
|
} |
|
.custom-dialog >>> .el-dialog { |
|
width: 550px !important; |
|
} |
|
.custom-dialog >>> .el-dialog__title { |
|
width: 224px !important; |
|
height: 35px !important; |
|
font-size: 18px !important; |
|
line-height: 20px !important; |
|
} |
|
.custom-dialog >>> .el-dialog__body { |
|
padding: 10px 20px !important; |
|
} |
|
.device-li .device-name { |
|
font-size: 12px !important; |
|
} |
|
.device-container .device-li { |
|
padding: 10px 0 !important; |
|
} |
|
.device-li .device-name .el-input { |
|
width: 50px !important; |
|
} |
|
.device-li.highlight::before { |
|
left: -5px !important; |
|
width: 20px !important; |
|
height: 20px !important; |
|
top: 30% !important; |
|
} |
|
.custom-dialog >>> .el-switch__label * { |
|
font-size: 12px !important; |
|
} |
|
.custom-dialog >>> .el-switch__core { |
|
width: 37px !important; |
|
height: 17px !important; |
|
} |
|
.custom-dialog >>> .el-switch__core:after { |
|
width: 13px !important; |
|
height: 13px !important; |
|
} |
|
.custom-dialog >>> .el-form-item { |
|
margin-bottom: 0 !important; |
|
} |
|
.custom-dialog >>> .el-form-item--medium .el-form-item__content { |
|
line-height: 0 !important; |
|
} |
|
.windC >>> .el-select .el-input .el-select__caret { |
|
font-size: 0.14rem !important; |
|
} |
|
.windC >>> .el-input--mini .el-input__icon { |
|
line-height: 0.28rem !important; |
|
} |
|
.windC >>> .el-input__icon { |
|
width: 0.25rem !important; |
|
} |
|
} |
|
</style>
|
|
|