15 changed files with 969 additions and 1585 deletions
|
Before Width: | Height: | Size: 10 KiB |
@ -1,431 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="app-container" v-loading="loading"> |
|
||||||
<!-- 状态统计 --> |
|
||||||
<div class="status-statistics"> |
|
||||||
<div class="status-card"> |
|
||||||
<div class="status-label">运行设备</div> |
|
||||||
<div class="status-value-running"> |
|
||||||
{{ statistics.running }}/{{ total }} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="status-card"> |
|
||||||
<div class="status-label">手动模式</div> |
|
||||||
<div class="status-value-auto">{{ statistics.manual }}/{{ total }}</div> |
|
||||||
</div> |
|
||||||
<div class="status-card"> |
|
||||||
<div class="status-label">自动模式</div> |
|
||||||
<div class="status-value-maintenance"> |
|
||||||
{{ statistics.auto }}/{{ total }} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="status-card"> |
|
||||||
<div class="status-label">故障设备</div> |
|
||||||
<div class="status-value-error">{{ statistics.warn }}/{{ total }}</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<el-tabs v-model="activeName" @tab-click="handleClick"> |
|
||||||
<el-tab-pane label="主机" name="host"> </el-tab-pane> |
|
||||||
<el-tab-pane label="冷却塔" name="second"> </el-tab-pane> |
|
||||||
<el-tab-pane label="冷却泵" name="three"> </el-tab-pane> |
|
||||||
<el-tab-pane label="冷冻泵" name="three"> </el-tab-pane> |
|
||||||
<el-tab-pane label="冷冻蝶阀" name="three"> </el-tab-pane> |
|
||||||
<el-tab-pane label="冷却蝶阀" name="three"> </el-tab-pane> |
|
||||||
<el-tab-pane label="冷却塔出水阀" name="three"> </el-tab-pane> |
|
||||||
</el-tabs> |
|
||||||
<!-- 非蝶阀控制列表 --> |
|
||||||
<div class="device-container"> |
|
||||||
<list-header |
|
||||||
:deviceList="hostList" |
|
||||||
@operationControl="hadleOperationConrol" |
|
||||||
></list-header> |
|
||||||
</div> |
|
||||||
<div class="device-container"> |
|
||||||
<list-header |
|
||||||
:deviceList="coolingTowerFanList" |
|
||||||
@operationControl="hadleOperationConrol" |
|
||||||
></list-header> |
|
||||||
</div> |
|
||||||
<div class="device-container"> |
|
||||||
<list-header |
|
||||||
:deviceList="coolingPump" |
|
||||||
@operationControl="hadleOperationConrol" |
|
||||||
></list-header> |
|
||||||
</div> |
|
||||||
<div class="device-container"> |
|
||||||
<list-header |
|
||||||
:deviceList="freezingPump" |
|
||||||
@operationControl="hadleOperationConrol" |
|
||||||
></list-header> |
|
||||||
</div> |
|
||||||
<!-- 蝶阀控制列表 --> |
|
||||||
<div class="device-container"> |
|
||||||
<vavleheader |
|
||||||
:valveList="freezingValve" |
|
||||||
@operationControl="hadleOperationConrol" |
|
||||||
></vavleheader> |
|
||||||
</div> |
|
||||||
<div class="device-container"> |
|
||||||
<vavleheader |
|
||||||
:valveList="coolingValve" |
|
||||||
@operationControl="hadleOperationConrol" |
|
||||||
></vavleheader> |
|
||||||
</div> |
|
||||||
<div class="device-container"> |
|
||||||
<vavleheader |
|
||||||
:valveList="coolingTowerOutValve" |
|
||||||
@operationControl="hadleOperationConrol" |
|
||||||
></vavleheader> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { operationList, operationConrol } from "@/api/centerairC/sysMonitor"; |
|
||||||
import listHeader from "./listHeader.vue"; |
|
||||||
import Vavleheader from "./vavleheader.vue"; |
|
||||||
export default { |
|
||||||
components: { listHeader, Vavleheader }, |
|
||||||
name: "sysMonitor", |
|
||||||
data() { |
|
||||||
return { |
|
||||||
loading: false, |
|
||||||
deviceList: [], //全部 |
|
||||||
hostList: [], //主机 |
|
||||||
coolingTowerFanList: [], //冷却塔风机 |
|
||||||
coolingPump: [], //冷却泵 |
|
||||||
freezingPump: [], //冷冻泵 |
|
||||||
valveList: [], //阀 |
|
||||||
total: null, |
|
||||||
freezingValve: [], //冷冻蝶阀 |
|
||||||
coolingValve: [], //冷却蝶阀 |
|
||||||
coolingTowerOutValve: [], //冷却塔出水阀 |
|
||||||
activeName: "host", //设备管理 |
|
||||||
}; |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
statistics() { |
|
||||||
const deviceManual = this.deviceList.filter( |
|
||||||
(d) => d.automaticText === false |
|
||||||
).length; |
|
||||||
const deviceAuto = this.deviceList.filter( |
|
||||||
(d) => d.automaticText === true |
|
||||||
).length; |
|
||||||
const valveManual = this.valveList.filter( |
|
||||||
(v) => v.automaticText === false |
|
||||||
).length; |
|
||||||
const valveAuto = this.valveList.filter( |
|
||||||
(v) => v.automaticText === true |
|
||||||
).length; |
|
||||||
|
|
||||||
return { |
|
||||||
running: this.deviceList.filter((d) => d.runStatus === "运行").length, |
|
||||||
manual: deviceManual + valveManual, |
|
||||||
auto: deviceAuto + valveAuto, |
|
||||||
warn: this.deviceList.filter((d) => d.warnText === "故障").length, |
|
||||||
}; |
|
||||||
}, |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
this.getOperationList(); |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
handleClick(tab, event) { |
|
||||||
console.log(tab, event); |
|
||||||
}, |
|
||||||
// 系统控制列表 |
|
||||||
getOperationList() { |
|
||||||
return new Promise((resolve, reject) => { |
|
||||||
operationList({ systemType: 0 }) |
|
||||||
.then((res) => { |
|
||||||
console.log("列表返回res", res); |
|
||||||
if (res.code === 200) { |
|
||||||
let handleList = res.rows; |
|
||||||
this.deviceList = []; |
|
||||||
this.valveList = []; |
|
||||||
handleList.forEach((element) => { |
|
||||||
if (element.children && element.children.length > 0) { |
|
||||||
// 初始化一个空对象来存储非蝶阀处理后的结果 |
|
||||||
let deviceItem = { |
|
||||||
name: element.name, |
|
||||||
}; |
|
||||||
// 初始化一个空对象来存储阀门处理后的结果 |
|
||||||
let valveItem = { |
|
||||||
name: element.name, |
|
||||||
}; |
|
||||||
|
|
||||||
const limitedChildren = element.children; |
|
||||||
let valveClosed = false; |
|
||||||
let valveOpened = false; |
|
||||||
|
|
||||||
limitedChildren.forEach((child) => { |
|
||||||
if (child.name) { |
|
||||||
// 运行状态 |
|
||||||
if ( |
|
||||||
child.paramType === "1" && |
|
||||||
!child.name.includes("阀") |
|
||||||
) { |
|
||||||
deviceItem.runStatus = |
|
||||||
Number(child.value) == 0 ? "不运行" : "运行"; |
|
||||||
} |
|
||||||
// 手动控制 |
|
||||||
else if ( |
|
||||||
child.paramType === "2" && |
|
||||||
!child.name.includes("阀") |
|
||||||
) { |
|
||||||
deviceItem.controlText = |
|
||||||
Number(child.value) == 0 ? false : true; |
|
||||||
deviceItem.controlId = child.id; |
|
||||||
} |
|
||||||
// 手自动切换 0自动1手动 |
|
||||||
else if ( |
|
||||||
child.paramType === "6" && |
|
||||||
!child.name.includes("阀") |
|
||||||
) { |
|
||||||
deviceItem.automaticText = |
|
||||||
Number(child.value) == 0 ? true : false; |
|
||||||
deviceItem.automaticId = child.id; |
|
||||||
} |
|
||||||
// 故障报警 |
|
||||||
else if ( |
|
||||||
child.paramType === "5" && |
|
||||||
!child.name.includes("阀") |
|
||||||
) { |
|
||||||
deviceItem.warnText = |
|
||||||
Number(child.value) == 0 ? "未故障" : "故障"; |
|
||||||
// 本地远程 |
|
||||||
} else if ( |
|
||||||
child.paramType === "22" && |
|
||||||
!child.name.includes("阀") |
|
||||||
) { |
|
||||||
deviceItem.localRemote = |
|
||||||
Number(child.value) == 0 ? "本地" : "远程"; |
|
||||||
} |
|
||||||
// 频率调节 |
|
||||||
else if ( |
|
||||||
child.paramType === "3" && |
|
||||||
!child.name.includes("阀") |
|
||||||
) { |
|
||||||
deviceItem.frequencySet = |
|
||||||
Number(child.value) == 0 ? "0" : child.value; |
|
||||||
deviceItem.frequencyId = child.id; |
|
||||||
} |
|
||||||
// 频率反馈 |
|
||||||
else if (child.paramType === "4") { |
|
||||||
deviceItem.frequency = child.value; |
|
||||||
} |
|
||||||
|
|
||||||
// 阀门的-手自动切换 |
|
||||||
else if ( |
|
||||||
child.paramType === "6" && |
|
||||||
child.name.includes("阀") |
|
||||||
) { |
|
||||||
valveItem.automaticText = |
|
||||||
Number(child.value) == 0 ? true : false; |
|
||||||
valveItem.automaticId = child.id; |
|
||||||
} |
|
||||||
// 阀门的-手动控制 |
|
||||||
else if ( |
|
||||||
child.paramType === "2" && |
|
||||||
child.name.includes("阀") |
|
||||||
) { |
|
||||||
valveItem.controlText = |
|
||||||
Number(child.value) == 0 ? false : true; |
|
||||||
valveItem.controlId = child.id; |
|
||||||
} |
|
||||||
|
|
||||||
// 记录阀关到位状态 |
|
||||||
if ( |
|
||||||
child.name.includes("阀关到位") && |
|
||||||
Number(child.value) == 0 |
|
||||||
) { |
|
||||||
valveClosed = false; |
|
||||||
} else if ( |
|
||||||
child.name.includes("阀关到位") && |
|
||||||
Number(child.value) == 1 |
|
||||||
) { |
|
||||||
valveClosed = true; |
|
||||||
} |
|
||||||
// 记录阀开到位的状态 |
|
||||||
if ( |
|
||||||
child.name.includes("阀开到位") && |
|
||||||
Number(child.value) == 0 |
|
||||||
) { |
|
||||||
valveOpened = false; |
|
||||||
} else if ( |
|
||||||
child.name.includes("阀开到位") && |
|
||||||
Number(child.value) == 1 |
|
||||||
) { |
|
||||||
valveOpened = true; |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
// 根据阀关到位和阀开到位的状态设置阀门状态 |
|
||||||
if (valveClosed && !valveOpened) { |
|
||||||
valveItem.closeStatus = "开启"; |
|
||||||
valveItem.openStauts = "关闭"; |
|
||||||
} else if (!valveClosed && valveOpened) { |
|
||||||
valveItem.closeStatus = "关闭"; |
|
||||||
valveItem.openStauts = "开启"; |
|
||||||
} else if (!valveClosed && !valveOpened) { |
|
||||||
valveItem.closeStatus = "关闭"; |
|
||||||
valveItem.openStauts = "关闭"; |
|
||||||
} |
|
||||||
|
|
||||||
// 将处理后的对象添加到 deviceList 中 |
|
||||||
if (Object.keys(deviceItem).length > 1) { |
|
||||||
this.deviceList.push(deviceItem); |
|
||||||
} |
|
||||||
// 将处理后的对象添加到 valveList 中 |
|
||||||
if (Object.keys(valveItem).length > 1) { |
|
||||||
this.valveList.push(valveItem); |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
this.valveList = this.valveList.filter( |
|
||||||
(item) => item.name && item.name.includes("阀") |
|
||||||
); |
|
||||||
console.log("处理过的this.deviceList", this.deviceList); |
|
||||||
console.log("处理过的this.valveList", this.valveList); |
|
||||||
this.total = this.deviceList.length + this.valveList.length; |
|
||||||
|
|
||||||
// 再分类不同的设备列表 |
|
||||||
this.hostList = []; |
|
||||||
this.coolingTowerFanList = []; |
|
||||||
this.coolingPump = []; |
|
||||||
this.freezingPump = []; |
|
||||||
this.freezingValve = []; |
|
||||||
this.coolingValve = []; |
|
||||||
this.coolingTowerOutValve = []; |
|
||||||
this.deviceList.forEach((list) => { |
|
||||||
if (list.name.includes("机") && !list.name.includes("风")) { |
|
||||||
this.hostList.push(list); |
|
||||||
} |
|
||||||
if (list.name.includes("风机")) { |
|
||||||
this.coolingTowerFanList.push(list); |
|
||||||
} |
|
||||||
if (list.name.includes("冷却泵")) { |
|
||||||
this.coolingPump.push(list); |
|
||||||
} |
|
||||||
if (list.name.includes("冷冻泵")) { |
|
||||||
this.freezingPump.push(list); |
|
||||||
} |
|
||||||
}); |
|
||||||
this.valveList.forEach((list) => { |
|
||||||
if (list.name.includes("冷冻蝶阀")) { |
|
||||||
this.freezingValve.push(list); |
|
||||||
} |
|
||||||
if (list.name.includes("冷却蝶阀")) { |
|
||||||
this.coolingValve.push(list); |
|
||||||
} |
|
||||||
if (list.name.includes("冷却塔出水阀")) { |
|
||||||
this.coolingTowerOutValve.push(list); |
|
||||||
} |
|
||||||
}); |
|
||||||
console.log("处理过后的主机列表", this.hostList); |
|
||||||
} else { |
|
||||||
this.deviceList = []; |
|
||||||
this.valveList = []; |
|
||||||
this.total = 0; |
|
||||||
} |
|
||||||
// 成功时解析 Promise |
|
||||||
resolve(res); |
|
||||||
}) |
|
||||||
.catch((error) => { |
|
||||||
// 失败时拒绝 Promise |
|
||||||
reject(error); |
|
||||||
}); |
|
||||||
}); |
|
||||||
}, |
|
||||||
// 操作 |
|
||||||
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.getOperationList().finally(() => { |
|
||||||
// 关闭 loading 效果 |
|
||||||
this.loading = false; |
|
||||||
}); |
|
||||||
}, 6000); |
|
||||||
} else { |
|
||||||
// this.$modal.msgError("操作失败"); |
|
||||||
console.log("应该更新状态的"); |
|
||||||
// 更新所有设备状态; |
|
||||||
this.getOperationList(); |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((error) => { |
|
||||||
console.log("请求发生错误，更新设备状态", error); |
|
||||||
// 更新所有设备状态; |
|
||||||
this.getOperationList(); |
|
||||||
}); |
|
||||||
}, |
|
||||||
}, |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
/* 设备控制列表样式 */ |
|
||||||
.device-container { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
width: 100%; |
|
||||||
background-color: #142c4e; |
|
||||||
padding: 10px 10px 30px 10px; |
|
||||||
border-radius: 10px; |
|
||||||
margin-bottom: 20px; |
|
||||||
} |
|
||||||
/* 状态统计样式 */ |
|
||||||
.status-statistics { |
|
||||||
margin-bottom: 25px; |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
|
|
||||||
.status-card { |
|
||||||
background-color: #142c4e; |
|
||||||
border-radius: 10px; |
|
||||||
padding: 10px; |
|
||||||
width: 24%; |
|
||||||
} |
|
||||||
|
|
||||||
.status-label { |
|
||||||
color: #9ca3af; |
|
||||||
margin-bottom: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.status-value-running { |
|
||||||
font-size: 24px; |
|
||||||
font-weight: bold; |
|
||||||
color: #22c55e; |
|
||||||
} |
|
||||||
|
|
||||||
.status-value-auto { |
|
||||||
font-size: 24px; |
|
||||||
font-weight: bold; |
|
||||||
color: #60a5fa; |
|
||||||
} |
|
||||||
|
|
||||||
.status-value-error { |
|
||||||
font-size: 24px; |
|
||||||
font-weight: bold; |
|
||||||
color: #ef4444; |
|
||||||
} |
|
||||||
|
|
||||||
.status-value-maintenance { |
|
||||||
font-size: 24px; |
|
||||||
font-weight: bold; |
|
||||||
color: #f59e0b; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,643 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="app-container" v-loading="loading"> |
|
||||||
<!-- 状态统计 --> |
|
||||||
<div class="status-statistics"> |
|
||||||
<div class="status-card"> |
|
||||||
<div class="status-label">运行设备</div> |
|
||||||
<div class="status-value-running"> |
|
||||||
{{ statistics.running }}/{{ total }} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="status-card"> |
|
||||||
<div class="status-label">手动模式</div> |
|
||||||
<div class="status-value-auto">{{ statistics.manual }}/{{ total }}</div> |
|
||||||
</div> |
|
||||||
<div class="status-card"> |
|
||||||
<div class="status-label">自动模式</div> |
|
||||||
<div class="status-value-maintenance"> |
|
||||||
{{ statistics.auto }}/{{ total }} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="status-card"> |
|
||||||
<div class="status-label">故障设备</div> |
|
||||||
<div class="status-value-error">{{ statistics.warn }}/{{ total }}</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<!-- 非蝶阀控制列表 --> |
|
||||||
<div class="device-container"> |
|
||||||
<!-- <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 class="device-name">本地远程状态</div> |
|
||||||
<div class="device-name">故障报警</div> |
|
||||||
<div class="device-name">频率调节</div> |
|
||||||
<div class="device-name">频率反馈</div> |
|
||||||
</div> --> |
|
||||||
<list-header :deviceList ="deviceList"></list-header> |
|
||||||
<!-- <div class="device-li" v-for="(item, index) in deviceList" :key="index"> |
|
||||||
<div class="device-name">{{ item.name }}</div> |
|
||||||
<div class="device-name"> |
|
||||||
<div |
|
||||||
class="run" |
|
||||||
:class="item.runStatus === '运行' ? 'run' : 'no-run'" |
|
||||||
> |
|
||||||
{{ item.runStatus }} |
|
||||||
</div> |
|
||||||
</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"> |
|
||||||
<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"> |
|
||||||
<span |
|
||||||
:class=" |
|
||||||
item.localRemote === '远程' ? 'strong-electric' : 'auto-electric' |
|
||||||
" |
|
||||||
>{{ item.localRemote }}</span |
|
||||||
> |
|
||||||
</div> |
|
||||||
<div class="device-name"> |
|
||||||
<div :class="item.warnText === '故障' ? 'bad-status' : 'good-status'"> |
|
||||||
{{ item.warnText }} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="device-name"> |
|
||||||
<el-input |
|
||||||
v-if="item.frequencySet !== null && item.frequencySet !== undefined" |
|
||||||
v-model="item.frequencySet" |
|
||||||
size="mini" |
|
||||||
@keyup.enter.native="handleEnter(item)" |
|
||||||
@input="handleInput(item)" |
|
||||||
></el-input> |
|
||||||
<div class="device-name" v-else></div> |
|
||||||
</div> |
|
||||||
<div class="device-name" v-if="item.frequency"> |
|
||||||
{{ item.frequency }}Hz |
|
||||||
</div> |
|
||||||
<div class="device-name" v-else></div> |
|
||||||
</div> --> |
|
||||||
</div> |
|
||||||
<!-- 蝶阀控制列表 --> |
|
||||||
<div class="device-container second"> |
|
||||||
<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 class="device-name">阀关反馈</div> |
|
||||||
<div class="device-name">阀开反馈</div> |
|
||||||
</div> |
|
||||||
<div class="device-li" v-for="(item, index) in valveList" :key="index"> |
|
||||||
<div class="device-name">{{ item.name }}</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"> |
|
||||||
<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"> |
|
||||||
<span |
|
||||||
:class=" |
|
||||||
item.localRemote === '远程' ? 'strong-electric' : 'auto-electric' |
|
||||||
" |
|
||||||
>{{ item.localRemote }}</span |
|
||||||
> |
|
||||||
</div> |
|
||||||
<div class="device-name"> |
|
||||||
<div |
|
||||||
:class="item.openStauts === '关闭' ? 'bad-status' : 'good-status'" |
|
||||||
> |
|
||||||
{{ item.openStauts }} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="device-name"> |
|
||||||
<div |
|
||||||
:class="item.closeStatus === '关闭' ? 'bad-status' : 'good-status'" |
|
||||||
> |
|
||||||
{{ item.closeStatus }} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { operationList, operationConrol } from "@/api/centerairC/sysMonitor"; |
|
||||||
import listHeader from "./listHeader.vue"; |
|
||||||
export default { |
|
||||||
components: { listHeader }, |
|
||||||
name: "sysMonitor", |
|
||||||
data() { |
|
||||||
return { |
|
||||||
loading: false, |
|
||||||
deviceList: [], //全部 |
|
||||||
hostList: [], //主机 |
|
||||||
coolingTowerFanList: [], //冷却塔风机 |
|
||||||
coolingPump: [], //冷却泵 |
|
||||||
freezingPump: [], //冷冻泵 |
|
||||||
valveList: [], //阀 |
|
||||||
total: null, |
|
||||||
freezingValve: [], //冷冻蝶阀 |
|
||||||
coolingValve: [], //冷却蝶阀 |
|
||||||
coolingTowerOutValve: [], //冷却塔出水阀 |
|
||||||
}; |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
statistics() { |
|
||||||
const deviceManual = this.deviceList.filter( |
|
||||||
(d) => d.automaticText === false |
|
||||||
).length; |
|
||||||
const deviceAuto = this.deviceList.filter( |
|
||||||
(d) => d.automaticText === true |
|
||||||
).length; |
|
||||||
const valveManual = this.valveList.filter( |
|
||||||
(v) => v.automaticText === false |
|
||||||
).length; |
|
||||||
const valveAuto = this.valveList.filter( |
|
||||||
(v) => v.automaticText === true |
|
||||||
).length; |
|
||||||
|
|
||||||
return { |
|
||||||
running: this.deviceList.filter((d) => d.runStatus === "运行").length, |
|
||||||
manual: deviceManual + valveManual, |
|
||||||
auto: deviceAuto + valveAuto, |
|
||||||
warn: this.deviceList.filter((d) => d.warnText === "故障").length, |
|
||||||
}; |
|
||||||
}, |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
this.getOperationList(); |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
// 系统控制列表 |
|
||||||
getOperationList() { |
|
||||||
return new Promise((resolve, reject) => { |
|
||||||
operationList({ systemType: 0 }) |
|
||||||
.then((res) => { |
|
||||||
console.log("列表返回res", res); |
|
||||||
if (res.code === 200) { |
|
||||||
let handleList = res.rows; |
|
||||||
this.deviceList = []; |
|
||||||
this.valveList = []; |
|
||||||
handleList.forEach((element) => { |
|
||||||
if (element.children && element.children.length > 0) { |
|
||||||
// 初始化一个空对象来存储非蝶阀处理后的结果 |
|
||||||
let deviceItem = { |
|
||||||
name: element.name, |
|
||||||
}; |
|
||||||
// 初始化一个空对象来存储阀门处理后的结果 |
|
||||||
let valveItem = { |
|
||||||
name: element.name, |
|
||||||
}; |
|
||||||
|
|
||||||
const limitedChildren = element.children; |
|
||||||
let valveClosed = false; |
|
||||||
let valveOpened = false; |
|
||||||
|
|
||||||
limitedChildren.forEach((child) => { |
|
||||||
if (child.name) { |
|
||||||
// 运行状态 |
|
||||||
if ( |
|
||||||
child.paramType === "1" && |
|
||||||
!child.name.includes("阀") |
|
||||||
) { |
|
||||||
deviceItem.runStatus = |
|
||||||
Number(child.value) == 0 ? "不运行" : "运行"; |
|
||||||
} |
|
||||||
// 手动控制 |
|
||||||
else if ( |
|
||||||
child.paramType === "2" && |
|
||||||
!child.name.includes("阀") |
|
||||||
) { |
|
||||||
deviceItem.controlText = |
|
||||||
Number(child.value) == 0 ? false : true; |
|
||||||
deviceItem.controlId = child.id; |
|
||||||
} |
|
||||||
// 手自动切换 0自动1手动 |
|
||||||
else if ( |
|
||||||
child.paramType === "6" && |
|
||||||
!child.name.includes("阀") |
|
||||||
) { |
|
||||||
deviceItem.automaticText = |
|
||||||
Number(child.value) == 0 ? true : false; |
|
||||||
deviceItem.automaticId = child.id; |
|
||||||
} |
|
||||||
// 故障报警 |
|
||||||
else if ( |
|
||||||
child.paramType === "5" && |
|
||||||
!child.name.includes("阀") |
|
||||||
) { |
|
||||||
deviceItem.warnText = |
|
||||||
Number(child.value) == 0 ? "未故障" : "故障"; |
|
||||||
// 本地远程 |
|
||||||
} else if ( |
|
||||||
child.paramType === "22" && |
|
||||||
!child.name.includes("阀") |
|
||||||
) { |
|
||||||
deviceItem.localRemote = |
|
||||||
Number(child.value) == 0 ? "本地" : "远程"; |
|
||||||
} |
|
||||||
// 频率调节 |
|
||||||
else if ( |
|
||||||
child.paramType === "3" && |
|
||||||
!child.name.includes("阀") |
|
||||||
) { |
|
||||||
deviceItem.frequencySet = |
|
||||||
Number(child.value) == 0 ? "0" : child.value; |
|
||||||
deviceItem.frequencyId = child.id; |
|
||||||
} |
|
||||||
// 频率反馈 |
|
||||||
else if (child.paramType === "4") { |
|
||||||
deviceItem.frequency = child.value; |
|
||||||
} |
|
||||||
|
|
||||||
// 阀门的-本地远程状态 |
|
||||||
else if ( |
|
||||||
child.paramType === "22" && |
|
||||||
child.name.includes("阀") |
|
||||||
) { |
|
||||||
valveItem.localRemote = |
|
||||||
Number(child.value) == 0 ? "本地" : "远程"; |
|
||||||
} |
|
||||||
// 阀门的-手自动切换 |
|
||||||
else if ( |
|
||||||
child.paramType === "6" && |
|
||||||
child.name.includes("阀") |
|
||||||
) { |
|
||||||
valveItem.automaticText = |
|
||||||
Number(child.value) == 0 ? true : false; |
|
||||||
valveItem.automaticId = child.id; |
|
||||||
} |
|
||||||
// 阀门的-手动控制 |
|
||||||
else if ( |
|
||||||
child.paramType === "2" && |
|
||||||
child.name.includes("阀") |
|
||||||
) { |
|
||||||
valveItem.controlText = |
|
||||||
Number(child.value) == 0 ? false : true; |
|
||||||
valveItem.controlId = child.id; |
|
||||||
} |
|
||||||
|
|
||||||
// 记录阀关到位状态 |
|
||||||
if ( |
|
||||||
child.name.includes("阀关到位") && |
|
||||||
Number(child.value) == 0 |
|
||||||
) { |
|
||||||
valveClosed = false; |
|
||||||
} else if ( |
|
||||||
child.name.includes("阀关到位") && |
|
||||||
Number(child.value) == 1 |
|
||||||
) { |
|
||||||
valveClosed = true; |
|
||||||
} |
|
||||||
// 记录阀开到位的状态 |
|
||||||
if ( |
|
||||||
child.name.includes("阀开到位") && |
|
||||||
Number(child.value) == 0 |
|
||||||
) { |
|
||||||
valveOpened = false; |
|
||||||
} else if ( |
|
||||||
child.name.includes("阀开到位") && |
|
||||||
Number(child.value) == 1 |
|
||||||
) { |
|
||||||
valveOpened = true; |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
// 根据阀关到位和阀开到位的状态设置阀门状态 |
|
||||||
if (valveClosed && !valveOpened) { |
|
||||||
valveItem.closeStatus = "开启"; |
|
||||||
valveItem.openStauts = "关闭"; |
|
||||||
} else if (!valveClosed && valveOpened) { |
|
||||||
valveItem.closeStatus = "关闭"; |
|
||||||
valveItem.openStauts = "开启"; |
|
||||||
} |
|
||||||
|
|
||||||
// 将处理后的对象添加到 deviceList 中 |
|
||||||
if (Object.keys(deviceItem).length > 1) { |
|
||||||
this.deviceList.push(deviceItem); |
|
||||||
} |
|
||||||
// 将处理后的对象添加到 valveList 中 |
|
||||||
if (Object.keys(valveItem).length > 1) { |
|
||||||
this.valveList.push(valveItem); |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
console.log("处理过的this.deviceList", this.deviceList); |
|
||||||
console.log("处理过的this.valveList", this.valveList); |
|
||||||
this.total = this.deviceList.length + this.valveList.length; |
|
||||||
|
|
||||||
// 再分类不同的设备列表 |
|
||||||
this.hostList = []; |
|
||||||
this.deviceList.forEach((list) => { |
|
||||||
if (list.name.includes("机") && !list.name.includes("风")) { |
|
||||||
this.hostList.push(list); |
|
||||||
} |
|
||||||
}); |
|
||||||
console.log("处理过后的主机列表", this.hostList); |
|
||||||
} else { |
|
||||||
this.deviceList = []; |
|
||||||
this.valveList = []; |
|
||||||
this.total = 0; |
|
||||||
} |
|
||||||
// 成功时解析 Promise |
|
||||||
resolve(res); |
|
||||||
}) |
|
||||||
.catch((error) => { |
|
||||||
// 失败时拒绝 Promise |
|
||||||
reject(error); |
|
||||||
}); |
|
||||||
}); |
|
||||||
}, |
|
||||||
// 处理输入事件，过滤非数字字符 |
|
||||||
handleInput(item) { |
|
||||||
console.log("校验"); |
|
||||||
// 实时校验并过滤非数字字符 |
|
||||||
item.frequencySet = String(item.frequencySet).replace(/[^\d]/g, ""); |
|
||||||
}, |
|
||||||
handleEnter(item) { |
|
||||||
console.log("请求后端"); |
|
||||||
this.$confirm( |
|
||||||
`确定要修改"${item.name}"的频率为:${item.frequencySet} Hz吗?`, |
|
||||||
"提示", |
|
||||||
{ |
|
||||||
confirmButtonText: "确定", |
|
||||||
cancelButtonText: "取消", |
|
||||||
type: "warning", |
|
||||||
} |
|
||||||
) |
|
||||||
.then(() => { |
|
||||||
this.hadleOperationConrol(item.frequencyId, item.frequencySet); |
|
||||||
}) |
|
||||||
.catch(() => { |
|
||||||
// 用户取消操作，需要更新原来的频率 |
|
||||||
this.getOperationList(); |
|
||||||
}); |
|
||||||
}, |
|
||||||
//手动控制 |
|
||||||
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 = 0; |
|
||||||
} else { |
|
||||||
param = 1; |
|
||||||
} |
|
||||||
this.hadleOperationConrol(item.automaticId, param); |
|
||||||
}) |
|
||||||
.catch(() => { |
|
||||||
// 用户取消操作，恢复开关状态 |
|
||||||
item.automaticText = !item.automaticText; |
|
||||||
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.getOperationList().finally(() => { |
|
||||||
// 关闭 loading 效果 |
|
||||||
this.loading = false; |
|
||||||
}); |
|
||||||
}, 6000); |
|
||||||
} else { |
|
||||||
// this.$modal.msgError("操作失败"); |
|
||||||
console.log("应该更新状态的"); |
|
||||||
// 更新所有设备状态; |
|
||||||
this.getOperationList(); |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((error) => { |
|
||||||
console.log("请求发生错误，更新设备状态", error); |
|
||||||
// 更新所有设备状态; |
|
||||||
this.getOperationList(); |
|
||||||
}); |
|
||||||
}, |
|
||||||
}, |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
/* 设备控制列表样式 */ |
|
||||||
.device-container { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
width: 100%; |
|
||||||
background-color: #142c4e; |
|
||||||
padding: 10px 10px 30px 10px; |
|
||||||
border-radius: 10px; |
|
||||||
.device-li { |
|
||||||
flex: 1; |
|
||||||
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; |
|
||||||
.el-switch { |
|
||||||
width: 120px !important; |
|
||||||
} |
|
||||||
.run { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
align-items: center; |
|
||||||
display: block; |
|
||||||
} |
|
||||||
.run::before { |
|
||||||
content: ""; |
|
||||||
display: inline-block; |
|
||||||
width: 10px; |
|
||||||
height: 10px; |
|
||||||
background-color: rgb(16, 231, 16); |
|
||||||
border-radius: 50%; |
|
||||||
margin-right: 5px; |
|
||||||
} |
|
||||||
.no-run { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
align-items: center; |
|
||||||
display: block; |
|
||||||
} |
|
||||||
.no-run::before { |
|
||||||
content: ""; |
|
||||||
display: inline-block; |
|
||||||
width: 10px; |
|
||||||
height: 10px; |
|
||||||
background-color: rgb(180, 180, 180); |
|
||||||
border-radius: 50%; |
|
||||||
margin-right: 5px; |
|
||||||
} |
|
||||||
.el-input { |
|
||||||
width: 100px; |
|
||||||
} |
|
||||||
.strong-electric { |
|
||||||
background-color: rgba(59, 130, 246, 0.2); |
|
||||||
color: #60a5fa; |
|
||||||
padding: 5px 20px; |
|
||||||
border-radius: 10px; |
|
||||||
} |
|
||||||
.auto-electric { |
|
||||||
background-color: rgba(231, 144, 45, 0.2); |
|
||||||
color: #e47f21; |
|
||||||
padding: 5px 20px; |
|
||||||
border-radius: 10px; |
|
||||||
} |
|
||||||
.good-status { |
|
||||||
color: #4ade80; |
|
||||||
} |
|
||||||
.bad-status { |
|
||||||
color: #f05348; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.device-li:nth-child(1) { |
|
||||||
color: #9ca3af; |
|
||||||
} |
|
||||||
} |
|
||||||
.second { |
|
||||||
margin-top: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
/* 状态统计样式 */ |
|
||||||
.status-statistics { |
|
||||||
margin-bottom: 25px; |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
|
|
||||||
.status-card { |
|
||||||
background-color: #142c4e; |
|
||||||
border-radius: 10px; |
|
||||||
padding: 10px; |
|
||||||
width: 24%; |
|
||||||
} |
|
||||||
|
|
||||||
.status-label { |
|
||||||
color: #9ca3af; |
|
||||||
margin-bottom: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.status-value-running { |
|
||||||
font-size: 24px; |
|
||||||
font-weight: bold; |
|
||||||
color: #22c55e; |
|
||||||
} |
|
||||||
|
|
||||||
.status-value-auto { |
|
||||||
font-size: 24px; |
|
||||||
font-weight: bold; |
|
||||||
color: #60a5fa; |
|
||||||
} |
|
||||||
|
|
||||||
.status-value-error { |
|
||||||
font-size: 24px; |
|
||||||
font-weight: bold; |
|
||||||
color: #ef4444; |
|
||||||
} |
|
||||||
|
|
||||||
.status-value-maintenance { |
|
||||||
font-size: 24px; |
|
||||||
font-weight: bold; |
|
||||||
color: #f59e0b; |
|
||||||
} |
|
||||||
</style> |
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue