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