34 changed files with 4028 additions and 294 deletions
@ -1,27 +1,51 @@
|
||||
import request from '@/utils/request' |
||||
import request from "@/utils/request"; |
||||
|
||||
// 查询设备参数列表
|
||||
export function cmpList(query) { |
||||
// 获取天气相关数据
|
||||
export function weatherData() { |
||||
return request({ |
||||
url: '/device/cmp/list', |
||||
method: 'get', |
||||
params: query |
||||
}) |
||||
url: "/device/cs/getWeatherData", |
||||
method: "get", |
||||
}); |
||||
} |
||||
|
||||
// 根据id查询设备参数信息
|
||||
export function getCMP(cmpId) { |
||||
// 获取运行时间
|
||||
export function runTime() { |
||||
return request({ |
||||
url: '/device/cmp/' + cmpId, |
||||
method: 'get' |
||||
}) |
||||
url: "/device/cs/runTime", |
||||
method: "get", |
||||
}); |
||||
} |
||||
|
||||
// 新增设备参数
|
||||
export function addCMP(data) { |
||||
// 获取系统性能数据
|
||||
export function sysPerformance() { |
||||
return request({ |
||||
url: '/device/cmp', |
||||
method: 'post', |
||||
data: data |
||||
}) |
||||
url: "/device/cs/sysPerformance", |
||||
method: "get", |
||||
}); |
||||
} |
||||
|
||||
// 系统监测列表
|
||||
export function monitorList(query) { |
||||
return request({ |
||||
url: "/device/cs/monitor/list", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 查询系统控制列表
|
||||
export function operationList(query) { |
||||
return request({ |
||||
url: "/device/cs/operation/list", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
|
||||
// 系统控制
|
||||
export function operationConrol(data) { |
||||
return request({ |
||||
url: "/device/operation", |
||||
method: "post", |
||||
data: data, |
||||
}); |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 控制列表
|
||||
export function waterOperateList(query) { |
||||
return request({ |
||||
url: "/device/hotWater/operateList", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 系统控制
|
||||
export function operationConrol(data) { |
||||
return request({ |
||||
url: "/device/operation", |
||||
method: "post", |
||||
data: data, |
||||
}); |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 公共信息
|
||||
export function waterPublic(query) { |
||||
return request({ |
||||
url: "/device/hotWater/monitorPublic", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 系统状态显示
|
||||
export function waterMonitorList(query) { |
||||
return request({ |
||||
url: "/device/hotWater/monitorList", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
@ -0,0 +1,47 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 获取项目简介数据
|
||||
export function introduction() { |
||||
return request({ |
||||
url: "/pro/overview/introduction", |
||||
method: "get", |
||||
}); |
||||
} |
||||
|
||||
// 项目logo上传
|
||||
export function changeLogo(data) { |
||||
const formData = new FormData(); |
||||
Object.keys(data).forEach((key) => { |
||||
formData.append(key, data[key]); |
||||
}); |
||||
return request({ |
||||
url: "/pro/overview/logo", |
||||
method: "post", |
||||
data: formData, |
||||
headers: { |
||||
"Content-Type": "multipart/form-data", |
||||
}, |
||||
// responseType: 'blob',
|
||||
}); |
||||
} |
||||
// 项目概况
|
||||
export function viewProfile() { |
||||
return request({ |
||||
url: "/pro/overview/profile", |
||||
method: "get", |
||||
}); |
||||
} |
||||
// 最近12月能耗
|
||||
export function viewYearEnergy() { |
||||
return request({ |
||||
url: "/pro/overview/energyAnalysis", |
||||
method: "get", |
||||
}); |
||||
} |
||||
// 各个系统主要参数值
|
||||
export function viewMainParams() { |
||||
return request({ |
||||
url: "/pro/overview/mainParams", |
||||
method: "get", |
||||
}); |
||||
} |
||||
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 12 MiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
@ -0,0 +1,528 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<!-- 状态统计 --> |
||||
<div class="status-statistics"> |
||||
<div class="status-card"> |
||||
<div class="status-label">运行设备</div> |
||||
<div class="status-value-running"> |
||||
{{ statistics.running }}/{{ deviceList.length }} |
||||
</div> |
||||
</div> |
||||
<div class="status-card"> |
||||
<div class="status-label">手动模式</div> |
||||
<div class="status-value-auto"> |
||||
{{ statistics.manual }}/{{ deviceList.length }} |
||||
</div> |
||||
</div> |
||||
<div class="status-card"> |
||||
<div class="status-label">自动模式</div> |
||||
<div class="status-value-maintenance"> |
||||
{{ statistics.auto }}/{{ deviceList.length }} |
||||
</div> |
||||
</div> |
||||
<div class="status-card"> |
||||
<div class="status-label">故障设备</div> |
||||
<div class="status-value-error"> |
||||
{{ statistics.warn }}/{{ deviceList.length }} |
||||
</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> |
||||
<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"> |
||||
<span |
||||
:class=" |
||||
item.automaticText === '手动' |
||||
? 'strong-electric' |
||||
: 'auto-electric' |
||||
" |
||||
>{{ item.automaticText }}</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> |
||||
<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.openText" |
||||
active-color="#13ce66" |
||||
inactive-color="#ff4949" |
||||
active-text="开启" |
||||
inactive-text="停止" |
||||
@change="handleValveOpen(item)" |
||||
> |
||||
</el-switch> |
||||
</div> |
||||
<div class="device-name"> |
||||
<div |
||||
:class="item.openStauts === '关闭' ? 'bad-status' : 'good-status'" |
||||
> |
||||
{{ item.openStauts }} |
||||
</div> |
||||
</div> |
||||
<div class="device-name"> |
||||
<el-switch |
||||
style="display: block" |
||||
v-model="item.closeText" |
||||
active-color="#13ce66" |
||||
inactive-color="#ff4949" |
||||
active-text="开启" |
||||
inactive-text="停止" |
||||
@change="handleValveClose(item)" |
||||
> |
||||
</el-switch> |
||||
</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"; |
||||
export default { |
||||
name: "sysMonitor", |
||||
data() { |
||||
return { |
||||
deviceList: [ |
||||
{ |
||||
name: "", |
||||
runStatus: "", |
||||
controlText: "", |
||||
automaticText: "", |
||||
warnText: "", |
||||
frequencySet: "", |
||||
frequency: "", |
||||
}, |
||||
], |
||||
valveList: [ |
||||
{ |
||||
name: "", |
||||
openText: "", |
||||
openStatus: "", |
||||
closeText: "", |
||||
closeStatus: "", |
||||
}, |
||||
], |
||||
}; |
||||
}, |
||||
computed: { |
||||
statistics() { |
||||
return { |
||||
running: this.deviceList.filter((d) => d.runStatus === "运行").length, |
||||
manual: this.deviceList.filter((d) => d.automaticText === "手动") |
||||
.length, |
||||
auto: this.deviceList.filter((d) => d.automaticText === "自动").length, |
||||
warn: this.deviceList.filter((d) => d.warnText === "故障").length, |
||||
}; |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.getOperationList(); |
||||
}, |
||||
methods: { |
||||
getOperationList() { |
||||
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; |
||||
limitedChildren.forEach((child) => { |
||||
if (child.name) { |
||||
if (child.name.includes("运行状态")) { |
||||
deviceItem.runStatus = |
||||
child.value === "0.000" ? "不运行" : "运行"; |
||||
} else if (child.name.includes("启停控制")) { |
||||
deviceItem.controlText = |
||||
child.value === "0.000" ? false : true; |
||||
deviceItem.controlId = child.id; |
||||
} else if (child.name.includes("手自动状态")) { |
||||
deviceItem.automaticText = |
||||
child.value === "0.000" ? "自动" : "手动"; |
||||
} else if (child.name.includes("故障报警")) { |
||||
deviceItem.warnText = |
||||
child.value === "0.000" ? "未故障" : "故障"; |
||||
} else if (child.name.includes("频率调节")) { |
||||
deviceItem.frequencySet = |
||||
child.value === "0.000" ? "0" : child.value; |
||||
deviceItem.frequencyId = child.id; |
||||
} else if (child.name.includes("频率反馈")) { |
||||
deviceItem.frequency = child.value; |
||||
} else if (child.name.includes("阀开反馈")) { |
||||
valveItem.openStauts = |
||||
child.value === "0.000" ? "关闭" : "开启"; |
||||
} else if ( |
||||
child.name.includes("阀开") && |
||||
!child.name.includes("反馈") |
||||
) { |
||||
valveItem.openText = child.value === "0.000" ? false : true; |
||||
valveItem.openId = child.id; |
||||
} else if ( |
||||
child.name.includes("阀关") && |
||||
!child.name.includes("反馈") |
||||
) { |
||||
valveItem.colseText = |
||||
child.value === "0.000" ? false : true; |
||||
valveItem.closeId = child.id; |
||||
} else if (child.name.includes("阀关反馈")) { |
||||
valveItem.closeStatus = |
||||
child.value === "0.000" ? "关闭" : "开启"; |
||||
} |
||||
} |
||||
}); |
||||
// console.log("处理后的每个对象", deviceItem); |
||||
// 将处理后的对象添加到 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); |
||||
} |
||||
}); |
||||
}, |
||||
// 处理输入事件，过滤非数字字符 |
||||
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.operationConrol(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.operationConrol(item.controlId, param); |
||||
}) |
||||
.catch(() => { |
||||
// 用户取消操作，恢复开关状态 |
||||
item.controlText = !item.controlText; |
||||
console.log("不请求后台"); |
||||
}); |
||||
}, |
||||
//蝶阀关闭控制 |
||||
handleValveClose(item) { |
||||
this.$confirm( |
||||
`确定要切换设备"${item.name}"的状态为:${ |
||||
item.closeText ? "开启" : "停止 吗?" |
||||
}`, |
||||
"提示", |
||||
{ |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning", |
||||
} |
||||
) |
||||
.then(() => { |
||||
let param = null; |
||||
if (item.closeText) { |
||||
param = 1; |
||||
} else { |
||||
param = 0; |
||||
} |
||||
this.operationConrol(item.closeId, param); |
||||
}) |
||||
.catch(() => { |
||||
// 用户取消操作，恢复开关状态 |
||||
item.closeText = !item.closeText; |
||||
console.log("不请求后台"); |
||||
}); |
||||
}, |
||||
//蝶阀开启控制 |
||||
handleValveOpen(item) { |
||||
this.$confirm( |
||||
`确定要切换设备"${item.name}"的状态为:${ |
||||
item.openText ? "开启" : "停止 吗?" |
||||
}`, |
||||
"提示", |
||||
{ |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning", |
||||
} |
||||
) |
||||
.then(() => { |
||||
let param = null; |
||||
if (item.openText) { |
||||
param = 1; |
||||
} else { |
||||
param = 0; |
||||
} |
||||
this.operationConrol(item.openId, param); |
||||
}) |
||||
.catch(() => { |
||||
// 用户取消操作，恢复开关状态 |
||||
item.openText = !item.openText; |
||||
console.log("不请求后台"); |
||||
}); |
||||
}, |
||||
operationConrol(id, param) { |
||||
let data = { |
||||
id: id, |
||||
param: param, |
||||
}; |
||||
console.log("操作参数", data); |
||||
operationConrol([data]).then((res) => { |
||||
if (res.code == 200) { |
||||
this.$modal.msgSuccess("操作成功"); |
||||
// 更新所有设备状态; |
||||
this.getOperationList(); |
||||
} else { |
||||
this.$modal.msgError("操作失败"); |
||||
// 更新所有设备状态; |
||||
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; |
||||
.run { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
display: block; |
||||
} |
||||
.run::before { |
||||
content: ""; |
||||
display: inline-block; |
||||
width: 10px; |
||||
height: 10px; |
||||
background-color: rgb(16, 231, 16); |
||||
border-radius: 50%; |
||||
margin-right: 5px; |
||||
} |
||||
.no-run { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
display: block; |
||||
} |
||||
.no-run::before { |
||||
content: ""; |
||||
display: inline-block; |
||||
width: 10px; |
||||
height: 10px; |
||||
background-color: rgb(180, 180, 180); |
||||
border-radius: 50%; |
||||
margin-right: 5px; |
||||
} |
||||
.el-input { |
||||
width: 100px; |
||||
} |
||||
.strong-electric { |
||||
background-color: rgba(59, 130, 246, 0.2); |
||||
color: #60a5fa; |
||||
padding: 5px 20px; |
||||
border-radius: 10px; |
||||
} |
||||
.auto-electric { |
||||
background-color: rgba(231, 144, 45, 0.2); |
||||
color: #e47f21; |
||||
padding: 5px 20px; |
||||
border-radius: 10px; |
||||
} |
||||
.good-status { |
||||
color: #4ade80; |
||||
} |
||||
.bad-status { |
||||
color: #f05348; |
||||
} |
||||
} |
||||
} |
||||
.device-li:nth-child(1) { |
||||
color: #9ca3af; |
||||
} |
||||
} |
||||
.second { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
/* 状态统计样式 */ |
||||
.status-statistics { |
||||
margin-bottom: 25px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.status-card { |
||||
background-color: #142c4e; |
||||
border-radius: 10px; |
||||
padding: 10px; |
||||
width: 24%; |
||||
} |
||||
|
||||
.status-label { |
||||
color: #9ca3af; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.status-value-running { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #22c55e; |
||||
} |
||||
|
||||
.status-value-auto { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #60a5fa; |
||||
} |
||||
|
||||
.status-value-error { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #ef4444; |
||||
} |
||||
|
||||
.status-value-maintenance { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #f59e0b; |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,120 @@
|
||||
<template> |
||||
<div class="line-container"> |
||||
<!-- 第一个圆点 --> |
||||
<div class="dot dot-start"></div> |
||||
<!-- 第一条直线 --> |
||||
<div |
||||
class="line line1" |
||||
:style="{ |
||||
transform: `rotate(${angle1}deg)`, |
||||
width: lineWidth1Rem + 'rem' |
||||
}" |
||||
></div> |
||||
<!-- 中间圆点 --> |
||||
<div |
||||
class="dot dot-mid" |
||||
:style="{ |
||||
top: (1 + Math.sin((angle1 * Math.PI) / 180) * lineWidth1Rem - 0.025) + 'rem', |
||||
left: (1 + Math.cos((angle1 * Math.PI) / 180) * lineWidth1Rem - 0.025) + 'rem' |
||||
}" |
||||
></div> |
||||
<!-- 第二条直线 --> |
||||
<div |
||||
class="line line2" |
||||
:style="{ |
||||
top: (1 + Math.sin((angle1 * Math.PI) / 180) * lineWidth1Rem) + 'rem', |
||||
left: (1 + Math.cos((angle1 * Math.PI) / 180) * lineWidth1Rem) + 'rem', |
||||
transform: `rotate(${angle2}deg)`, |
||||
width: lineWidth2Rem + 'rem' |
||||
}" |
||||
></div> |
||||
<!-- 最后一个圆点 --> |
||||
<div |
||||
class="dot dot-end" |
||||
:style="{ |
||||
top: endDotTop + 'rem', |
||||
left: endDotLeft + 'rem' |
||||
}" |
||||
></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
// 第一条直线的角度 |
||||
angle1: { |
||||
type: Number, |
||||
default: 0 |
||||
}, |
||||
// 第二条直线的角度 |
||||
angle2: { |
||||
type: Number, |
||||
default: 0 |
||||
}, |
||||
// 第一条直线的宽度（px） |
||||
lineWidth1: { |
||||
type: Number, |
||||
default: 100 |
||||
}, |
||||
// 第二条直线的宽度（px） |
||||
lineWidth2: { |
||||
type: Number, |
||||
default: 100 |
||||
} |
||||
}, |
||||
computed: { |
||||
lineWidth1Rem() { |
||||
return this.lineWidth1 / 100; |
||||
}, |
||||
lineWidth2Rem() { |
||||
return this.lineWidth2 / 100; |
||||
}, |
||||
endDotTop() { |
||||
// 第一条直线终点的 y 坐标 |
||||
const firstLineEndY = 1 + Math.sin((this.angle1 * Math.PI) / 180) * this.lineWidth1Rem; |
||||
// 第二条直线在第一条直线基础上终点的 y 坐标偏移量 |
||||
const secondLineYOffset = Math.sin((this.angle2 * Math.PI) / 180) * this.lineWidth2Rem; |
||||
return firstLineEndY + secondLineYOffset - 0.025; |
||||
}, |
||||
endDotLeft() { |
||||
// 第一条直线终点的 x 坐标 |
||||
const firstLineEndX = 1 + Math.cos((this.angle1 * Math.PI) / 180) * this.lineWidth1Rem; |
||||
// 第二条直线在第一条直线基础上终点的 x 坐标偏移量 |
||||
const secondLineXOffset = Math.cos((this.angle2 * Math.PI) / 180) * this.lineWidth2Rem; |
||||
return firstLineEndX + secondLineXOffset - 0.025; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.line-container { |
||||
position: relative; |
||||
} |
||||
|
||||
.line { |
||||
position: absolute; |
||||
height: 1px; |
||||
background-color: rgba(0, 255, 255, 0.3); |
||||
transform-origin: left center; |
||||
} |
||||
|
||||
.line1 { |
||||
top: 1rem; |
||||
left: 1rem; |
||||
} |
||||
|
||||
.dot { |
||||
position: absolute; |
||||
width: 0.05rem; |
||||
height: 0.05rem; |
||||
background-color: aqua; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
.dot-start { |
||||
top: 0.97rem; |
||||
left: 0.97rem; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,578 @@
|
||||
<template> |
||||
<div class="energy_content"> |
||||
<div class="sys_charts" ref="sys_charts"></div> |
||||
<div class="eer">实时EER</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
import { viewMainParams } from "@/api/index"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
chartInstance: null, |
||||
option: {}, |
||||
isShowModule: false, |
||||
energyCostText: "eer数据", |
||||
dateType: "", |
||||
dateUse: "", |
||||
timeType: "", //时间类型 |
||||
startTime: "", |
||||
endTime: "", |
||||
backData: { |
||||
usedValue: "0", |
||||
maxValue: 100, //最大的刻度值 |
||||
momValueRate: "0%", |
||||
yoyValueRate: "0%", |
||||
usedMoney: "0", |
||||
maxMoney: 100, |
||||
momMoneyRate: "0%", |
||||
yoyMoneyRate: "0%", |
||||
}, |
||||
useForm: { |
||||
useData: 5, |
||||
maxData: 10, //最大的刻度值 |
||||
}, |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.initChart(); |
||||
this.screenAdapter(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.getChartsData(); |
||||
}, |
||||
destroyed() { |
||||
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
// 计算颜色设置的函数 |
||||
getAxisLineColor(useData, maxData) { |
||||
// 计算阈值 |
||||
// 真实值大于最大值的0.75才使用颜色渐变 |
||||
const threshold = maxData * 0.75; |
||||
|
||||
// 判断实际值是否超过阈值 |
||||
if (useData > threshold) { |
||||
return [ |
||||
[ |
||||
useData / maxData, |
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
||||
{ offset: 0, color: "rgba(0,127,208,1)" }, |
||||
{ offset: 0.6, color: "rgba(0,127,208,1)" }, |
||||
{ offset: 1, color: "rgba(69, 235, 167,0.5)" }, |
||||
]), |
||||
], |
||||
[1, "rgba(28,128,245,.0)"], |
||||
]; |
||||
} else { |
||||
return [ |
||||
[ |
||||
useData / maxData, |
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
||||
{ offset: 0, color: "rgba(0,127,208,1)" }, |
||||
{ offset: 0.5, color: "rgba(0,127,208,1)" }, |
||||
{ offset: 1, color: "rgba(0,127,208,1)" }, |
||||
]), |
||||
], |
||||
[1, "rgba(28,128,245,.0)"], |
||||
]; |
||||
} |
||||
}, |
||||
//初始化chartInstance2对象 折线图 |
||||
initChart() { |
||||
// 使用配置函数 |
||||
const axisLineColor = this.getAxisLineColor( |
||||
this.useForm.useData, |
||||
this.useForm.maxData |
||||
); |
||||
this.chartInstance = echarts.init(this.$refs.sys_charts); |
||||
// var dataArr = 80; |
||||
this.option = { |
||||
backgroundColor: "transparent", |
||||
tooltip: { |
||||
formatter: "{a} <br/>{b} : {c}", |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "内部动态阴影", |
||||
type: "gauge", |
||||
center: ["50%", "100%"], |
||||
startAngle: 180, |
||||
endAngle: -0, |
||||
radius: "155%", |
||||
z: 1, |
||||
splitNumber: 10, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: axisLineColor, |
||||
// 相当于阴影部分的直径 |
||||
// width: 80, |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
show: false, |
||||
}, |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
splitLine: { |
||||
show: false, |
||||
}, |
||||
itemStyle: { |
||||
show: false, |
||||
}, |
||||
textStyle: { |
||||
formatter: function (value) { |
||||
if (value !== 0) { |
||||
return parseInt(value); |
||||
} else { |
||||
return 0; |
||||
} |
||||
}, |
||||
offsetCenter: [0, 5], |
||||
detail: { |
||||
padding: [0, 0, 0, 0], |
||||
// fontSize: titleFontSize * 1.2, |
||||
color: "#EDFFFD", |
||||
}, |
||||
}, |
||||
title: { |
||||
//标题 |
||||
show: false, |
||||
}, |
||||
pointer: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
{ |
||||
// 新增的蓝色背景 |
||||
name: "蓝色背景", |
||||
type: "gauge", |
||||
center: ["50%", "100%"], |
||||
// 自定义起始角度 |
||||
startAngle: 200, |
||||
// 自定义结束角度 |
||||
endAngle: -20, |
||||
radius: "155%", |
||||
z: 0, // 确保它在最底层 |
||||
splitNumber: 10, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: [ |
||||
[1, "#01366d"], // 设置背景颜色为蓝色 |
||||
], |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
show: false, |
||||
}, |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
splitLine: { |
||||
show: false, |
||||
}, |
||||
itemStyle: { |
||||
show: false, |
||||
}, |
||||
textStyle: { |
||||
show: false, |
||||
}, |
||||
title: { |
||||
show: false, |
||||
}, |
||||
pointer: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
{ |
||||
name: "内部大边框", |
||||
type: "gauge", |
||||
z: 2, |
||||
min: 0, |
||||
max: this.useForm.maxData, |
||||
splitNumber: 10, |
||||
radius: "180%", |
||||
center: ["50%", "100%"], |
||||
startAngle: 180, |
||||
endAngle: -0, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: [[1, "#023B80"]], |
||||
width: 3, |
||||
// 阴影 |
||||
shadowColor: "rgba(14,31,73)", |
||||
shadowBlur: 6, |
||||
shadowOffsetX: 0, |
||||
}, |
||||
}, |
||||
tooltip: { |
||||
show: false, |
||||
}, |
||||
axisLabel: { |
||||
show: false, |
||||
}, |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
splitLine: { |
||||
show: false, |
||||
}, |
||||
itemStyle: { |
||||
show: false, |
||||
}, |
||||
detail: { |
||||
show: false, |
||||
}, |
||||
title: { |
||||
//标题 |
||||
show: false, |
||||
}, |
||||
pointer: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
{ |
||||
name: "指针上的圆", |
||||
//指针上的圆 |
||||
type: "pie", |
||||
tooltip: { |
||||
show: false, |
||||
}, |
||||
emphasis: { |
||||
scale: false, // 新版的配置 |
||||
}, |
||||
legendHoverLink: false, |
||||
radius: ["0%", "70%"], |
||||
center: ["50%", "100%"], |
||||
startAngle: 120, |
||||
endAngle: -0, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: [[1, "#F2BF59"]], |
||||
width: 3, |
||||
// 阴影 |
||||
shadowColor: "rgba(14,31,73)", |
||||
shadowBlur: 60, |
||||
shadowOffsetX: 0, |
||||
}, |
||||
}, |
||||
label: { |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 120, |
||||
itemStyle: { |
||||
color: "#00223a", |
||||
}, |
||||
}, |
||||
], |
||||
z: 4, |
||||
}, |
||||
{ |
||||
name: "指针上的渐变圆", |
||||
//指针上的圆-渐变 |
||||
type: "pie", |
||||
tooltip: { |
||||
show: false, |
||||
}, |
||||
emphasis: { |
||||
scale: false, // 新版的配置 |
||||
}, |
||||
legendHoverLink: false, |
||||
radius: ["0%", "70%"], |
||||
center: ["50%", "100%"], |
||||
startAngle: 120, |
||||
endAngle: 0, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: [[1, "#F2BF59"]], |
||||
width: 3, |
||||
// 阴影 |
||||
shadowColor: "rgba(14,31,73)", |
||||
shadowBlur: 60, |
||||
shadowOffsetX: 0, |
||||
}, |
||||
}, |
||||
z: 5, |
||||
}, |
||||
{ |
||||
// 指针 数据 |
||||
name: this.energyCostText, |
||||
type: "gauge", |
||||
radius: "175%", |
||||
center: ["50%", "100%"], |
||||
min: 0, //最小刻度 |
||||
max: this.useForm.maxData, //最大刻度 |
||||
splitNumber: 0, //刻度数量 |
||||
startAngle: 180, |
||||
endAngle: -0, |
||||
axisLine: { |
||||
show: false, |
||||
}, //仪表盘轴线 |
||||
axisLabel: { |
||||
show: true, |
||||
color: "rgba(4,112,212,1)", |
||||
// distance: 16, |
||||
// fontSize: 12, |
||||
formatter: (value) => { |
||||
// 仅显示 0 和最大值 |
||||
if (value === 0 || value == this.useForm.maxData) { |
||||
// 替换 100 为你的最大值 |
||||
return value; |
||||
} |
||||
return ""; |
||||
}, |
||||
}, //刻度标签-数字。 |
||||
axisTick: { |
||||
show: true, |
||||
// splitNumber: 5, |
||||
lineStyle: { |
||||
color: "rgba(4,112,212,1)", //用颜色渐变函数不起作用 |
||||
// width: 3, |
||||
}, |
||||
// length: 6, |
||||
}, //刻度样式 |
||||
splitLine: { |
||||
show: true, |
||||
// length: 6, |
||||
lineStyle: { |
||||
color: "rgba(106, 104, 228, 0.5)", //用颜色渐变函数不起作用 |
||||
}, |
||||
}, //分隔线样式 |
||||
itemStyle: { |
||||
show: false, |
||||
}, |
||||
detail: { |
||||
show: false, |
||||
}, |
||||
title: { |
||||
//标题 |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
name: this.dateUse, |
||||
value: this.useForm.useData, |
||||
}, |
||||
], |
||||
itemStyle: { |
||||
color: "#EDF85B", |
||||
}, |
||||
pointer: { |
||||
show: true, |
||||
length: "60%", |
||||
radius: "30%", |
||||
shape: "triangle", // 使用内置的箭头形状 |
||||
// width: 15, //指针粗细 |
||||
itemStyle: { |
||||
color: "rgb(3, 105, 206,0.5)", // 指针的颜色 |
||||
// shadowColor: "rgb(104, 194, 247, 1)", // 朦胧光的颜色 |
||||
shadowBlur: 20, // 朦胧光的模糊度 |
||||
}, |
||||
}, |
||||
animationDuration: 4000, |
||||
z: 2, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
}, |
||||
screenAdapter() { |
||||
const titleFontSize = this.$refs.sys_charts.offsetWidth / 18; |
||||
const adapterOption = { |
||||
series: [ |
||||
{ |
||||
name: "内部动态阴影", |
||||
type: "gauge", |
||||
axisLine: { |
||||
lineStyle: { |
||||
width: titleFontSize * 1, |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
name: "蓝色背景", |
||||
type: "gauge", |
||||
axisLine: { |
||||
lineStyle: { |
||||
width: titleFontSize * 1, |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
// 指针 数据 |
||||
name: this.energyCostText, |
||||
axisLabel: { |
||||
distance: titleFontSize, |
||||
fontSize: titleFontSize / 4, |
||||
}, |
||||
axisTick: { |
||||
distance: -(titleFontSize / 70), |
||||
lineStyle: { |
||||
width: titleFontSize / 20, |
||||
}, |
||||
length: titleFontSize / 5, |
||||
}, //刻度样式 |
||||
splitLine: { |
||||
distance: -(titleFontSize / 70), |
||||
lineStyle: { |
||||
width: titleFontSize / 20, |
||||
}, |
||||
length: titleFontSize / 3.6, |
||||
}, //分隔线样式 |
||||
pointer: { |
||||
width: titleFontSize / 2, //指针粗细 |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
this.chartInstance.resize(); |
||||
}, |
||||
// 请求的数据 |
||||
getChartsData() { |
||||
viewMainParams().then((res) => { |
||||
console.log("系统参数返回", res); |
||||
console.log("冷源监控返回",res.rows[0]); |
||||
if (res.code == 200) { |
||||
this.useForm.maxData = 10; |
||||
this.useForm.useData = res.rows[0].values[0].value; |
||||
let that = this; |
||||
// 使用配置函数 |
||||
const axisLineColor = this.getAxisLineColor( |
||||
this.useForm.useData, |
||||
this.useForm.maxData |
||||
); |
||||
const adapterOption = { |
||||
series: [ |
||||
{ |
||||
name: "内部动态阴影", |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: axisLineColor, |
||||
// 相当于阴影部分的直径 |
||||
// width: 80, |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
name: "内部大边框", |
||||
min: 0, |
||||
max: this.useForm.maxData, |
||||
}, |
||||
{ |
||||
name: "指针上的圆", |
||||
data: [ |
||||
{ |
||||
value: 5, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
name: "指针上的渐变圆", |
||||
label: { |
||||
show: true, |
||||
position: "center", // 文字显示在中心位置 |
||||
offset: [0, -5], // 向上偏移 10 个单位 |
||||
formatter: function () { |
||||
// 返回 HTML 标签，使用 rich 里定义的样式 |
||||
return `{line|${that.useForm.useData}}`; |
||||
}, |
||||
rich: { |
||||
line: { |
||||
color: "#fff", // 第二行文字颜色 |
||||
fontSize: 20, // 第二行文字大小 |
||||
lineHeight: 0, // 行高，实现间距 |
||||
}, |
||||
}, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
itemStyle: { |
||||
// 设置渐变颜色 |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgb(4,112,212)", // 顶部颜色 |
||||
}, |
||||
{ |
||||
offset: 0.3, |
||||
color: "rgba(0, 46, 93)", // 底部透明 |
||||
}, |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
// 指针 数据 |
||||
name: this.energyCostText, |
||||
max: this.useForm.maxData, //最大刻度 |
||||
axisLabel: { |
||||
formatter: (value) => { |
||||
// 仅显示 0 和最大值 |
||||
if (value === 0 || value == this.useForm.maxData) { |
||||
// 替换 100 为你的最大值 |
||||
return value; |
||||
} |
||||
return ""; |
||||
}, |
||||
}, |
||||
data: [ |
||||
{ |
||||
name: this.dateUse, |
||||
value: this.useForm.useData, |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.energy_content { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 100% !important; |
||||
height: 100%; |
||||
|
||||
.sys_charts { |
||||
width: 100%; |
||||
height: 1.6rem; |
||||
} |
||||
.eer { |
||||
font-size: 18px; |
||||
margin-top: 25px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,293 @@
|
||||
<template> |
||||
<div style="width: 100%; height: 100%"> |
||||
<div class="right-table"> |
||||
<div class="choice"> |
||||
<div |
||||
class="mr20" |
||||
v-for="(item, index) in energyTypes" |
||||
:key="index" |
||||
@click="handleEnter(index, item.name)" |
||||
:class="{ timeStyle: sharedIndex == index }" |
||||
> |
||||
{{ item.name }} |
||||
</div> |
||||
</div> |
||||
<div class="charts" ref="chart_ref"></div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
import { viewYearEnergy } from "@/api/index"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
energyTypes: [], |
||||
sharedIndex: 0, |
||||
chartInstance: null, |
||||
option: {}, |
||||
colorList: [ |
||||
{ |
||||
color: "#00CED1", |
||||
offsetColor1: "rgba(0, 206, 209, 0.5)", |
||||
offsetColor2: "rgba(0, 206, 209, 0)", |
||||
}, |
||||
{ |
||||
color: "#ffe21e", |
||||
offsetColor1: "rgba(255,226,30, 0.5)", |
||||
offsetColor2: "rgba(255,226,30, 0)", |
||||
}, |
||||
{ |
||||
color: "#1a69f1", |
||||
offsetColor1: "rgba(26, 105, 241, 0.5)", |
||||
offsetColor2: "rgba(26, 105, 241, 0)", |
||||
}, |
||||
{ |
||||
color: "#2df499", |
||||
offsetColor1: "rgba(45,244,153, 0.5)", |
||||
offsetColor2: "rgba(45,244,153, 0)", |
||||
}, |
||||
{ |
||||
color: "#e87b4b", |
||||
offsetColor1: "rgba(232, 123, 75, 0.5)", |
||||
offsetColor2: "rgba(232, 123, 75, 0)", |
||||
}, |
||||
], |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.initChart(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
this.echartsData(); |
||||
}, |
||||
destroyed() { |
||||
//取消监听器 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
// 选择日月年 |
||||
handleEnter(index, event) { |
||||
console.log("index", index); |
||||
console.log("event", event); |
||||
this.chartInstance.dispose(); |
||||
this.initChart(); |
||||
this.sharedIndex = index; |
||||
// 使用 find 方法查找符合条件的对象 |
||||
const chartsObj = this.energyTypes.find((item) => item.name === event); |
||||
const colorObj = this.colorList.find( |
||||
(_, currentIndex) => currentIndex === index |
||||
); |
||||
console.log("当前要渲染的数据对象", chartsObj); |
||||
console.log("当前要渲染的颜色对象", colorObj); |
||||
let adapterOption = {}; |
||||
// 添加折线的配置 |
||||
adapterOption = { |
||||
tooltip: { |
||||
trigger: "axis", |
||||
// 自定义 tooltip 内容 |
||||
formatter: function (params) { |
||||
var res = params[0].name + "<br/>"; |
||||
for (var i = 0, l = params.length; i < l; i++) { |
||||
var seriesName = params[i].seriesName; |
||||
var value = params[i].value; |
||||
var marker = |
||||
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + |
||||
params[i].color + |
||||
'"></span>'; |
||||
// 根据不同德seriesName 返回不同的单位 |
||||
if (chartsObj.unit) { |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
chartsObj.unit + |
||||
"</span><br>"; |
||||
} else { |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
"</span><br>"; |
||||
} |
||||
} |
||||
return res; |
||||
}, |
||||
}, |
||||
xAxis: { |
||||
data: chartsObj.timeStr, |
||||
}, |
||||
yAxis: { |
||||
name: chartsObj.unit, |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: chartsObj.data, |
||||
name: event, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: colorObj.color, //折线的颜色 |
||||
}, |
||||
lineStyle: { |
||||
color: colorObj.color, //折线点的颜色 |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: colorObj.offsetColor1, // 渐变起始颜色 |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: colorObj.offsetColor2, // 渐变结束颜色 |
||||
}, |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}, |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
this.chartInstance = echarts.init(this.$refs.chart_ref); |
||||
this.option = { |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
legend: { |
||||
show: false, |
||||
}, |
||||
grid: { |
||||
top: "10%", |
||||
left: "4%", |
||||
right: "6%", |
||||
bottom: "3%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
//设置为true代表离零刻度间隔一段距离 |
||||
boundaryGap: true, |
||||
// 修饰刻度标签的颜色即x坐标数据 |
||||
axisLabel: { |
||||
// interval: 0, //强制显示所有x轴数据 |
||||
// rotate: 30, //x轴坐标字体倾斜30度 |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, //x轴分割线 |
||||
}, |
||||
yAxis: { |
||||
min: 0, |
||||
// max:20, |
||||
// // // min:'dataMin', |
||||
// // // max:'dataMax', |
||||
// name: "kwh", // 第一个 y 轴的单位描述 |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}, |
||||
miniInterval: 5, |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
}, |
||||
//y轴分割线段数 |
||||
// splitNumber: 10, |
||||
// 修改y轴分割线的颜色 |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: 8, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
}, |
||||
echartsData() { |
||||
viewYearEnergy().then((res) => { |
||||
console.log("折线图返回值", res); |
||||
this.energyTypes = res.rows; |
||||
// 处理值 |
||||
// 在组件挂载完成后调用 handleEnter 方法 |
||||
if (this.energyTypes.length > 0) { |
||||
this.handleEnter(0, this.energyTypes[0].name); |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.right-table { |
||||
padding: 27px 15px 35px 15px; |
||||
} |
||||
.mr20 { |
||||
width: 92px; |
||||
padding: 2px; |
||||
} |
||||
.charts { |
||||
margin-top: 20px; |
||||
width: 100%; |
||||
height: 300px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,330 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="left-tree"> |
||||
<!-- 为 el-tree 设置一个固定的高度和滚动条 --> |
||||
<div style="height: 550px; overflow-y: auto"> |
||||
<el-tree |
||||
ref="tree" |
||||
:data="treeData" |
||||
node-key="id" |
||||
:default-expand-all="false" |
||||
:default-expanded-keys="expandedKeys" |
||||
:auto-expand-parent="true" |
||||
icon-class="none" |
||||
@node-expand="handleNodeExpand" |
||||
@node-collapse="handleNodeCollapse" |
||||
:highlight-current="true" |
||||
@node-click="handleNodeClick" |
||||
> |
||||
<template #default="{ node }"> |
||||
<span class="custom-tree-node"> |
||||
<!-- 根据节点状态动态设置图标类名 --> |
||||
<div class="tree-left"> |
||||
<i :class="getIconClass(node)" class="custom-tree-icon"></i> |
||||
<span class="tree-label">{{ node.label }}</span> |
||||
</div> |
||||
</span> |
||||
</template> |
||||
</el-tree> |
||||
</div> |
||||
<div class="status"> |
||||
<div class="status-li"> |
||||
<div class="status1">正常</div> |
||||
<div>0个</div> |
||||
</div> |
||||
<div class="status-li"> |
||||
<div class="status2">报警</div> |
||||
<div>0个</div> |
||||
</div> |
||||
<div class="status-li"> |
||||
<div class="status3">异常</div> |
||||
<div>0个</div> |
||||
</div> |
||||
<div class="status-li"> |
||||
<div class="status4">离线</div> |
||||
<div>0个</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="right-monitor"> |
||||
<div> |
||||
<div class="buildingDiv"> |
||||
<img |
||||
class="title-bg" |
||||
src="../../../assets/images/title-bg.png" |
||||
alt="" |
||||
/> |
||||
<div class="title-word">{{ buildingName }}</div> |
||||
</div> |
||||
<div class="monitor-context" v-loading="loading"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { spaceTree } from "@/api/region"; |
||||
import { waterOperateList, operationConrol } from "@/api/hotWater/waterControl"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
buildingName: "", |
||||
treeData: [], |
||||
defaultProps: { |
||||
children: "children", |
||||
label: "label", |
||||
}, |
||||
deviceList: [], |
||||
expandedKeys: [], |
||||
currentId: "", //当前选中高亮的id |
||||
currentName: "", //当前选中的名称 |
||||
currentLevel: "", //当前节点的层级 |
||||
currentParentId: "", //当前节点的上级的id |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.getSysBuild(); |
||||
}, |
||||
methods: { |
||||
getSysBuild() { |
||||
spaceTree().then((res) => { |
||||
console.log("楼栋返回值", res); |
||||
if (res.code == 200) { |
||||
// 只需要保留热水的系统 |
||||
console.log("楼栋返回值", res); |
||||
let newRes = { ...res }; |
||||
|
||||
if (newRes.data && newRes.data[0] && newRes.data[0].children) { |
||||
newRes.data[0].children = newRes.data[0].children.filter((item) => { |
||||
// 假设子项有一个 label属性，用于检查是否包含 "热水" |
||||
return item.label && item.label.includes("热水"); |
||||
}); |
||||
} |
||||
// 指定要保留的最大层级（从 1 开始计数），这里假设指定为第 2 级 |
||||
const targetLevel = 4; |
||||
// 从 data[0] 开始处理，当前层级为 1 |
||||
if (newRes.data[0]) { |
||||
this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel); |
||||
} |
||||
console.log("筛选后的新结果", newRes); |
||||
this.treeData = newRes.data; |
||||
this.$nextTick(() => { |
||||
this.$refs.tree.setCurrentKey(this.treeData[0].id); |
||||
}); |
||||
console.log("this.treeData[0].id", this.treeData[0].id); |
||||
console.log("this.treeData[0].label", this.treeData[0].label); |
||||
this.currentId = this.treeData[0].id; |
||||
this.currentLevel = this.treeData[0].nodeType; |
||||
this.currentName = this.treeData[0].label; |
||||
this.getExpandedKeys(this.treeData, 2); |
||||
} |
||||
}); |
||||
}, |
||||
// 递归函数，用于去除指定层级往后的 children 数据 |
||||
removeChildrenAfterLevel(obj, currentLevel, targetLevel) { |
||||
if (currentLevel >= targetLevel) { |
||||
// 当达到指定层级时，将 children 属性置为空数组 |
||||
obj.children = []; |
||||
return; |
||||
} |
||||
if (obj.children && obj.children.length > 0) { |
||||
// 若存在 children 数组，则递归处理每个子项 |
||||
for (let i = 0; i < obj.children.length; i++) { |
||||
this.removeChildrenAfterLevel( |
||||
obj.children[i], |
||||
currentLevel + 1, |
||||
targetLevel |
||||
); |
||||
} |
||||
} |
||||
}, |
||||
// 默认只展示一二级菜单 |
||||
getExpandedKeys(nodes, level) { |
||||
nodes.forEach((node) => { |
||||
if (level <= this.currentId + 4) { |
||||
this.expandedKeys.push(node.id); |
||||
} |
||||
if (node.children) { |
||||
this.getExpandedKeys(node.children, level + 1); |
||||
} |
||||
}); |
||||
}, |
||||
// 更换图标 |
||||
getIconClass(node) { |
||||
console.log("当前图标的节点内容", node); |
||||
if (node.level === 5) { |
||||
// 三级菜单时的图标 |
||||
if (node.expanded) { |
||||
return "el-icon-document-opened"; // 三级菜单展开时的图标类名 |
||||
} |
||||
return "el-icon-document"; // 三级菜单收缩时的图标类名 |
||||
} |
||||
if (node.expanded) { |
||||
return "el-icon-folder-opened"; // 非三级菜单展开时的图标类名 |
||||
} |
||||
return "el-icon-folder-add"; // 非三级菜单收缩时的图标类名 |
||||
}, |
||||
handleNodeExpand(node) { |
||||
// 节点展开时触发 |
||||
}, |
||||
handleNodeCollapse(node) { |
||||
// 节点收缩时触发 |
||||
}, |
||||
// 点击当前节点，保存节点内容 |
||||
handleNodeClick(node, data) { |
||||
console.log("点击的当前节点", node, data); |
||||
this.currentId = node.id; |
||||
this.currentLevel = node.nodeType; |
||||
this.currentName = node.label; |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.app-container { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: stretch; |
||||
height: 100%; |
||||
.left-tree { |
||||
width: 216px; |
||||
padding: 15px 10px; |
||||
border: 1px solid #004b8c; |
||||
min-height: 800px; |
||||
.status { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
flex-wrap: wrap; |
||||
margin-top: 20px; |
||||
.status-li { |
||||
width: 50%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-bottom: 15px; |
||||
} |
||||
.status1, |
||||
.status2, |
||||
.status3, |
||||
.status4 { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
margin-bottom: 5px; |
||||
} |
||||
.status1::before { |
||||
content: ""; |
||||
width: 10px; |
||||
height: 10px; |
||||
border-radius: 50%; |
||||
background-color: #00d2ff; |
||||
margin-right: 5px; |
||||
} |
||||
.status2::before { |
||||
content: ""; |
||||
width: 10px; |
||||
height: 10px; |
||||
border-radius: 50%; |
||||
background-color: #ff2f2f; |
||||
margin-right: 5px; |
||||
} |
||||
.status3::before { |
||||
content: ""; |
||||
width: 10px; |
||||
height: 10px; |
||||
border-radius: 50%; |
||||
background-color: #ff9908; |
||||
margin-right: 5px; |
||||
} |
||||
.status4::before { |
||||
content: ""; |
||||
width: 10px; |
||||
height: 10px; |
||||
border-radius: 50%; |
||||
background-color: #7398c7; |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
} |
||||
.right-monitor { |
||||
width: calc(100% - 240px); |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
.buildingDiv { |
||||
padding-left: 54px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
margin-bottom: 20px; |
||||
position: relative; |
||||
.title-bg { |
||||
width: 208px; |
||||
height: 38px; |
||||
position: absolute; |
||||
left: 0; |
||||
z-index: 0; |
||||
} |
||||
.title-word { |
||||
z-index: 10; |
||||
font-family: YouSheBiaoTiHei; |
||||
font-size: 24px; |
||||
color: #ffffff; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
.monitor-context { |
||||
height: 640px; |
||||
width: 100%; |
||||
overflow-y: auto; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
flex-wrap: wrap; |
||||
align-content: flex-start; |
||||
} |
||||
} |
||||
} |
||||
.tree-container { |
||||
height: 300px; /* 设置固定高度 */ |
||||
overflow-y: auto; /* 启用垂直滚动条 */ |
||||
} |
||||
// 滚动条 |
||||
:-webkit-scrollbar { |
||||
width: 10px; /* 滚动条宽度 */ |
||||
} |
||||
|
||||
::-webkit-scrollbar-track { |
||||
background: transparent !important; /* 滚动条轨道背景色 */ |
||||
} |
||||
.custom-tree-node { |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
font-size: 14px; |
||||
padding-right: 8px; |
||||
.tree-left { |
||||
.custom-tree-icon { |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
<style scoped> |
||||
/* 自定义高亮颜色 */ |
||||
.left-tree |
||||
>>> .el-tree--highlight-current |
||||
.el-tree-node.is-current |
||||
> .el-tree-node__content { |
||||
background-color: #285b9e !important; |
||||
/* color: #f56c6c; */ |
||||
color: #25f1f8; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,18 @@
|
||||
<template> |
||||
<div>热水监测</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { monitorList } from "@/api/centerairC/sysMonitor"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
deviceList: [], |
||||
}; |
||||
}, |
||||
mounted() {}, |
||||
methods: {}, |
||||
}; |
||||
</script> |
||||
|
||||
<style></style> |
||||
Loading…
Reference in new issue