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.
431 lines
14 KiB
431 lines
14 KiB
<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>
|
|
|