Compare commits
41 Commits
@ -0,0 +1,9 @@
|
||||
import request from "@/utils/request"; |
||||
// 历史天气查询
|
||||
export function weatherTempData(query) { |
||||
return request({ |
||||
url: "/device/cs/getWeatherTemp", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
@ -0,0 +1,27 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
export const hotWaterList = (data) => { |
||||
return request({ |
||||
url: "/reportHotWater/list", |
||||
method: "post", |
||||
data: data, |
||||
}); |
||||
}; |
||||
|
||||
// 导出
|
||||
export const hotWaterExport = (data) => { |
||||
return request({ |
||||
url: "/reportHotWater/export", |
||||
method: "post", |
||||
data, |
||||
responseType: "blob", |
||||
}); |
||||
}; |
||||
// 修改
|
||||
export const hotWaterEdit = (data) => { |
||||
return request({ |
||||
url: "/reportHotWater/edit", |
||||
method: "put", |
||||
data: data, |
||||
}); |
||||
}; |
||||
@ -0,0 +1,19 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
export const meterReadingsList = (data) => { |
||||
return request({ |
||||
url: "/reportMeterReadings/list", |
||||
method: "post", |
||||
data: data, |
||||
}); |
||||
}; |
||||
|
||||
// 导出
|
||||
export const meterReadingsExport = (data) => { |
||||
return request({ |
||||
url: "/reportMeterReadings/export", |
||||
method: "post", |
||||
data, |
||||
responseType: "blob", |
||||
}); |
||||
}; |
||||
@ -0,0 +1,9 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
export const compreReport = (data) => { |
||||
return request({ |
||||
url: "/compre/report", |
||||
method: "post", |
||||
data, |
||||
}); |
||||
}; |
||||
@ -0,0 +1,18 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 数据分析-月
|
||||
export function queryMonthDatas(query) { |
||||
return request({ |
||||
url: "/hot_energy/analysis/queryMonth", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 数据分析-年
|
||||
export function queryYearDatas(query) { |
||||
return request({ |
||||
url: "/hot_energy/analysis/queryYear", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
@ -0,0 +1,34 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 楼层
|
||||
export function hotBuildList(query) { |
||||
return request({ |
||||
url: "/space/building/hot_list", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 楼栋能耗环比
|
||||
export function hotEnergySum(query) { |
||||
return request({ |
||||
url: "/hot_energy/energySum", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 温度变化表
|
||||
export function hotWaterTemp(query) { |
||||
return request({ |
||||
url: "/hot_energy/waterTemp", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 温度变化表
|
||||
export function hotWaterLevel(query) { |
||||
return request({ |
||||
url: "/hot_energy/waterLevel", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
@ -0,0 +1,10 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 水电表读数
|
||||
export function queryDeviceDatas(query) { |
||||
return request({ |
||||
url: "/hot_energy/queryDeviceDatas", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 设备状态
|
||||
export function deviceState(query) { |
||||
return request({ |
||||
url: "/device/hotWater/deviceState", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 楼栋能耗
|
||||
export function hotEnergyQuery(query) { |
||||
return request({ |
||||
url: "/hot_energy/query", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 顶部
|
||||
export function waternErgySum(query) { |
||||
return request({ |
||||
url: "/hot_water_revenue/energySum", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 数据列表
|
||||
export function waterRevenueQuery(query) { |
||||
return request({ |
||||
url: "/hot_water_revenue/query", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 197 KiB After Width: | Height: | Size: 197 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 55 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 105 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 111 KiB |
|
After Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 224 KiB |
|
Before Width: | Height: | Size: 336 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 5.9 KiB |
|
Before Width: | Height: | Size: 468 KiB After Width: | Height: | Size: 275 KiB |
|
Before Width: | Height: | Size: 186 KiB After Width: | Height: | Size: 243 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 188 KiB After Width: | Height: | Size: 202 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1000 B After Width: | Height: | Size: 1000 B |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 410 KiB After Width: | Height: | Size: 410 KiB |
|
Before Width: | Height: | Size: 417 KiB After Width: | Height: | Size: 417 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 156 KiB After Width: | Height: | Size: 156 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 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> |
||||
@ -0,0 +1,460 @@
|
||||
<template> |
||||
<div class="sys_content"> |
||||
<div class="charts" ref="chart_ref"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
props: { |
||||
subData: { |
||||
type: Array, |
||||
required: true, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
chartInstance: null, |
||||
option: {}, |
||||
chartData1: "", |
||||
chartData2: "", |
||||
allData: "", |
||||
}; |
||||
}, |
||||
watch: { |
||||
subData: { |
||||
immediate: true, // 页面加载时立即触发一次监听 |
||||
handler(newVal) { |
||||
console.log("检测到传功来的数据", this.subData); |
||||
if (Object.keys(newVal).length > 0) { |
||||
console.log("newval", newVal); |
||||
let data = newVal; |
||||
this.chartData1 = ""; |
||||
this.chartData2 = ""; |
||||
data.forEach((item) => { |
||||
if (item.name.includes("运行")) { |
||||
this.chartData1 = parseInt(item.value); |
||||
} |
||||
if (item.name.includes("停止")) { |
||||
this.chartData2 = parseInt(item.value); |
||||
} |
||||
// 计算总和 |
||||
this.allData = this.chartData1 + this.chartData2; |
||||
}); |
||||
this.$nextTick(() => { |
||||
// // 销毁现有的 ECharts 实例 |
||||
// if (this.chartInstance) { |
||||
// this.chartInstance.dispose(); |
||||
// } |
||||
// // 重新初始化图表 |
||||
// this.initChart(); |
||||
this.echartsData(); |
||||
}); |
||||
} |
||||
}, |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.initChart(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
}, |
||||
destroyed() { |
||||
//取消监听器 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}, |
||||
echartsData() { |
||||
console.log("父组件传过来的值", this.subData); |
||||
if (this.subData) { |
||||
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
||||
const colorList = ["#0882ff", "#ffe21e"]; // 提取颜色列表 |
||||
const adapterOption = { |
||||
//环形图中间文字 |
||||
title: { |
||||
subtextStyle: { |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||
}, |
||||
legend: { |
||||
itemWidth: titleFontSize, |
||||
itemHeight: titleFontSize, |
||||
itemGap: titleFontSize * 2, |
||||
formatter: function (name) { |
||||
var arr = []; |
||||
let data = adapterOption.series[0].data; |
||||
var index = 0; |
||||
var total = 0; |
||||
// 计算总和 |
||||
for (var i = 0; i < data.length; i++) { |
||||
total += data[i].value; |
||||
if (data[i].name == name) { |
||||
index = i; |
||||
} |
||||
} |
||||
// 检查当前项的值是否为 0 |
||||
var percentage = |
||||
data[index].value === 0 |
||||
? "0.00" |
||||
: ((data[index].value / total) * 100).toFixed(2); |
||||
arr.push( |
||||
"{name|" + name + "}", |
||||
"{text|" + " " + ":" + " " + "}", |
||||
"{value|" + data[index].value + " " + "}", |
||||
"{percentage|" + " " + percentage + "%}" |
||||
); |
||||
return arr.join(""); |
||||
}, |
||||
textStyle: { |
||||
color: function (name) { |
||||
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
||||
const index = dataSeries.findIndex( |
||||
(item) => item.name === name |
||||
); |
||||
const colorList = ["#0882ff", "#ffe21e"]; // 数据圆的颜色列表 |
||||
return colorList[index]; |
||||
}, |
||||
rich: { |
||||
name: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
text: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
value: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
percentage: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "风柜系统:", |
||||
data: [ |
||||
{ value: this.chartData1, name: "运行数" }, |
||||
{ value: this.chartData2, name: "停止数" }, |
||||
], |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#0882ff", "#ffe21e"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
// borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
}, |
||||
{ |
||||
data: [ |
||||
{ value: this.chartData1, name: "运行数" }, |
||||
{ value: this.chartData2, name: "停止数" }, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
this.chartInstance.resize(); |
||||
} else { |
||||
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
||||
const adapterOption = { |
||||
//环形图中间文字 |
||||
title: { |
||||
subtextStyle: { |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||
}, |
||||
legend: { |
||||
itemWidth: titleFontSize, |
||||
itemHeight: titleFontSize, |
||||
itemGap: titleFontSize * 2, |
||||
formatter: function (name) { |
||||
var arr = []; |
||||
let data = adapterOption.series[0].data; |
||||
var index = 0; |
||||
var total = 0; |
||||
// 计算总和 |
||||
for (var i = 0; i < data.length; i++) { |
||||
total += data[i].value; |
||||
if (data[i].name == name) { |
||||
index = i; |
||||
} |
||||
} |
||||
// 检查当前项的值是否为 0 |
||||
var percentage = |
||||
data[index].value === 0 |
||||
? "0.00" |
||||
: ((data[index].value / total) * 100).toFixed(2); |
||||
arr.push( |
||||
"{name|" + name + "}", |
||||
"{text|" + " " + ":" + " " + "}", |
||||
"{value|" + data[index].value + " " + "}", |
||||
"{percentage|" + " " + percentage + "%}" |
||||
); |
||||
return arr.join(""); |
||||
}, |
||||
textStyle: { |
||||
color: function (name) { |
||||
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
||||
const index = dataSeries.findIndex( |
||||
(item) => item.name === name |
||||
); |
||||
const colorList = ["#0882ff", "#ffe21e"]; // 数据圆的颜色列表 |
||||
return colorList[index]; |
||||
}, |
||||
rich: { |
||||
name: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
}, |
||||
text: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
}, |
||||
value: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
percentage: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "风柜系统:", |
||||
data: [ |
||||
{ value: 0, name: "运行数" }, |
||||
{ value: 0, name: "停止数" }, |
||||
], |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#0882ff", "#ffe21e"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
// borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
}, |
||||
{ |
||||
data: [ |
||||
{ value: 0, name: "运行数" }, |
||||
{ value: 0, name: "停止数" }, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
this.chartInstance.resize(); |
||||
} |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
this.chartInstance = echarts.init(this.$refs.chart_ref); |
||||
this.option = { |
||||
//环形图中间文字 |
||||
title: { |
||||
subtext: "运行状态", |
||||
textStyle: { |
||||
color: "#ffffff", |
||||
}, |
||||
subtextStyle: { |
||||
color: "#ffffff", |
||||
}, |
||||
textAlign: "center", |
||||
x: "49%", |
||||
y: "36%", //距离上边的距离 |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||
}, |
||||
//图例 |
||||
legend: { |
||||
orient: "horizontal", // 水平布局 |
||||
bottom: 0, // 位于最底部 |
||||
left: "center", // 水平居中 |
||||
//图例文字颜色 |
||||
textStyle: { |
||||
color: "#ffffff", |
||||
// fontSize: 18, |
||||
}, |
||||
}, |
||||
series: [ |
||||
// 数据圆 |
||||
{ |
||||
name: "风柜系统:", |
||||
type: "pie", |
||||
radius: ["60%", "72%"], |
||||
center: ["50%", "44%"], |
||||
avoidLabelOverlap: false, |
||||
label: { |
||||
show: false, |
||||
position: "center", |
||||
}, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#0882ff", "#ffe21e"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
z: 10, //设置层级更高,否则会被阴影圆遮住 |
||||
}, |
||||
// 阴影圆 |
||||
{ |
||||
type: "pie", |
||||
radius: ["50%", "62%"], |
||||
center: ["50%", "44%"], |
||||
avoidLabelOverlap: false, |
||||
label: { |
||||
show: false, |
||||
position: "center", |
||||
}, |
||||
silent: true, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
//颜色 |
||||
itemStyle: { |
||||
color: function (colors) { |
||||
var colorList = ["#02427f", "#385f5c"]; |
||||
return colorList[colors.dataIndex]; |
||||
}, |
||||
}, |
||||
z: 15, |
||||
}, |
||||
// 内圈边框 |
||||
{ |
||||
// 颜色 |
||||
color: ["#305376"], |
||||
type: "pie", |
||||
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
||||
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
||||
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
||||
// 这里开启silent: true, 就达到效果了 |
||||
// center与非内圈一致 |
||||
radius: ["38%", "39%"], |
||||
center: ["50%", "44%"], |
||||
label: { |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
name: "", |
||||
itemStyle: {}, |
||||
}, |
||||
], |
||||
}, |
||||
// 最里面渐变小圆 |
||||
{ |
||||
// 颜色 |
||||
type: "pie", |
||||
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
||||
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
||||
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
||||
// 这里开启silent: true, 就达到效果了 |
||||
// center与非内圈一致 |
||||
radius: ["0%", "38%"], |
||||
center: ["50%", "44%"], |
||||
label: { |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
name: "", |
||||
itemStyle: {}, |
||||
}, |
||||
], |
||||
itemStyle: { |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 1, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ offset: 0, color: "#002a55" }, // 0% 处的颜色 |
||||
{ offset: 1, color: "#0a457a" }, // 100% 处的颜色 |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.sys_content { |
||||
padding: 20px; |
||||
.charts { |
||||
width: 100%; |
||||
height: 250px; |
||||
} |
||||
} |
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
.sys_content { |
||||
padding: 0.2rem !important; |
||||
.charts { |
||||
width: 100%; |
||||
height: 2.5rem !important; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,142 @@
|
||||
<template> |
||||
<div class="card-div"> |
||||
<div class="card-li room-temp"> |
||||
<div class="card-header"> |
||||
<h2 class="card-title">回水平均温度</h2> |
||||
<div class="icon"> |
||||
<i class="fas fa-home"></i> |
||||
</div> |
||||
</div> |
||||
<div class="thermometer"> |
||||
<div class="temprogress" :style="{ height: temData1 * 2 + '%' }"></div> |
||||
</div> |
||||
<div class="temperature">{{temData1}}℃</div> |
||||
</div> |
||||
<div class="card-li amb-temp"> |
||||
<div class="card-header"> |
||||
<h2 class="card-title">供水平均温度</h2> |
||||
<div class="icon"> |
||||
<i class="fas fa-home"></i> |
||||
</div> |
||||
</div> |
||||
<div class="thermometer"> |
||||
<div class="temprogress" :style="{ height: temData2 * 2 + '%' }"></div> |
||||
</div> |
||||
<div class="temperature">{{temData2}}℃</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
subData: { |
||||
type: Array, |
||||
required: true, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
temData1: "", |
||||
temData2: "", |
||||
}; |
||||
}, |
||||
watch: { |
||||
subData: { |
||||
immediate: true, // 页面加载时立即触发一次监听 |
||||
handler(newVal) { |
||||
console.log("检测到传功来的数据", this.subData); |
||||
if (Object.keys(newVal).length > 0) { |
||||
console.log("newval", newVal); |
||||
let data = newVal; |
||||
this.temData1 = ""; |
||||
this.temData2 = ""; |
||||
data.forEach((item) => { |
||||
if (item.name.includes("回水")) { |
||||
this.temData1 = parseInt(item.value); |
||||
} |
||||
if (item.name.includes("供水")) { |
||||
this.temData2 = parseInt(item.value); |
||||
} |
||||
}); |
||||
} |
||||
}, |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.card-div { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.card-li { |
||||
width: 50%; |
||||
padding: 0.2rem 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
.card-header { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
margin-bottom: 0.1rem; |
||||
.card-title { |
||||
font-size: 15px; |
||||
font-weight: 600; |
||||
color: #ffffff; |
||||
} |
||||
} |
||||
.temperature { |
||||
font-size: 20px; |
||||
font-weight: 700; |
||||
position: relative; |
||||
display: inline-block; |
||||
} |
||||
.thermometer { |
||||
height: 180px; |
||||
width: 40px; |
||||
background: #3d5581; |
||||
border-radius: 20px; |
||||
margin: 0 auto 0.25rem; |
||||
overflow: hidden; |
||||
box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.1); |
||||
position: relative; |
||||
} |
||||
.temprogress { |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 100%; |
||||
border-top-left-radius: 20px; |
||||
border-top-right-radius:20px; |
||||
background: linear-gradient(to top, #3498db, #2ecc71) !important; |
||||
} |
||||
} |
||||
} |
||||
@media (min-width: 2000px) { |
||||
.card-div { |
||||
.card-li { |
||||
.card-header { |
||||
.card-title { |
||||
font-size: 0.15rem !important; |
||||
} |
||||
} |
||||
.temperature { |
||||
font-size: 0.2rem !important; |
||||
} |
||||
.thermometer { |
||||
height: 1.8rem !important; |
||||
width: 0.4rem !important; |
||||
border-radius: 0.2rem !important; |
||||
} |
||||
.temprogress { |
||||
border-top-left-radius: 0.2rem !important; |
||||
border-top-right-radius:0.2rem !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||