21 changed files with 1732 additions and 431 deletions
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
@ -0,0 +1,431 @@
|
||||
<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> |
||||
@ -0,0 +1,643 @@
|
||||
<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> |
||||
@ -0,0 +1,199 @@
|
||||
<template> |
||||
<div> |
||||
<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> |
||||
<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"> |
||||
<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> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
valveList: { |
||||
type: Array, |
||||
default: () => [], |
||||
}, |
||||
}, |
||||
methods: { |
||||
//手动控制 |
||||
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; |
||||
} |
||||
// 触发自定义事件 operationControl，并传递两个参数 |
||||
this.$emit("operationControl", 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; |
||||
} |
||||
// 触发自定义事件 operationControl，并传递两个参数 |
||||
this.$emit("operationControl", item.automaticId, param); |
||||
}) |
||||
.catch(() => { |
||||
// 用户取消操作，恢复开关状态 |
||||
item.automaticText = !item.automaticText; |
||||
console.log("不请求后台"); |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.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; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue