14 changed files with 1273 additions and 576 deletions
@ -0,0 +1,798 @@ |
|||||||
|
<template> |
||||||
|
<div class="sys_content"> |
||||||
|
<div class="sys_charts" ref="sys_charts"></div> |
||||||
|
<div class="score"> |
||||||
|
<div class="excellent">优秀</div> |
||||||
|
<div class="good">良好</div> |
||||||
|
<div class="bad">差</div> |
||||||
|
<div class="improve">需要改进</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { getCoeData } from "@/api/index"; |
||||||
|
import * as echarts from "echarts"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
data1: "0", |
||||||
|
data2: "0", |
||||||
|
data3: "0", |
||||||
|
data4: "0", |
||||||
|
data5: "0", |
||||||
|
chartInstance2: null, |
||||||
|
option2: {}, |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getCoe() |
||||||
|
this.initChart2(); |
||||||
|
this.screenAdapter2(); |
||||||
|
window.addEventListener("resize", this.screenAdapter2); |
||||||
|
// this.nowData() |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||||
|
window.removeEventListener("resize", this.screenAdapter2); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 根据值和仪表盘颜色区间获取对应颜色 |
||||||
|
getGaugeColor(value, min, max, colorRanges) { |
||||||
|
// 确保value为数字类型 |
||||||
|
const numValue = Number(value); |
||||||
|
if (isNaN(numValue) || numValue <= min) { |
||||||
|
// 值为0或无效时，返回第一个区间的颜色 |
||||||
|
return colorRanges[0][1]; |
||||||
|
} |
||||||
|
// 将实际值转为百分比 [0, 1] |
||||||
|
const percent = (numValue - min) / (max - min); |
||||||
|
// 遍历颜色区间，找到当前值所在的区间 |
||||||
|
for (let i = 0; i < colorRanges.length; i++) { |
||||||
|
if (percent <= colorRanges[i][0]) { |
||||||
|
return colorRanges[i][1]; |
||||||
|
} |
||||||
|
} |
||||||
|
// 超出范围返回最后一个颜色 |
||||||
|
return colorRanges[colorRanges.length - 1][1]; |
||||||
|
}, |
||||||
|
//初始化chartInstance2对象 折线图 |
||||||
|
initChart2() { |
||||||
|
const titleFontSize = this.$refs.sys_charts.offsetWidth / 180; |
||||||
|
this.chartInstance2 = echarts.init(this.$refs.sys_charts); |
||||||
|
this.option2 = { |
||||||
|
tooltip: { //弹窗组件 |
||||||
|
formatter: "{a} <br/>{b} : {c}" |
||||||
|
}, |
||||||
|
// 设置仪表盘的背景颜色 整个cavas |
||||||
|
// backgroundColor: "#f5f5f5", |
||||||
|
series: [ |
||||||
|
{ //主机 |
||||||
|
name: '实时EER系数', |
||||||
|
type: 'gauge', |
||||||
|
radius: "65%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。 |
||||||
|
center: ["48%", "40%"], |
||||||
|
startAngle: 180, |
||||||
|
endAngle: 0, |
||||||
|
clockWise: true, |
||||||
|
min: 0, |
||||||
|
max: 15, |
||||||
|
splitNumber: 4, // 仪表盘刻度的分割段数,默认 10。 |
||||||
|
axisTick: { // 刻度(线)样式。 |
||||||
|
distance: titleFontSize * 0.2, |
||||||
|
length: titleFontSize, |
||||||
|
show: true, // 是否显示刻度(线),默认 true。 |
||||||
|
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。 |
||||||
|
lineStyle: { // 刻度线样式。 |
||||||
|
color: "auto", //线的颜色,默认 #eee。 |
||||||
|
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
||||||
|
width: titleFontSize * 0.1, |
||||||
|
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted |
||||||
|
// shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
||||||
|
// shadowColor: "#fff", //阴影颜色。支持的格式同color。 |
||||||
|
}, |
||||||
|
}, |
||||||
|
pointer: { |
||||||
|
length: '40%', // 指针长度 |
||||||
|
width: titleFontSize * 0.4, |
||||||
|
offsetCenter: ['0', '-20%'], // 详情位置的偏移量 |
||||||
|
itemStyle: { |
||||||
|
color: 'auto'// 指针颜色自动匹配轴线颜色 |
||||||
|
} |
||||||
|
}, |
||||||
|
axisLine: { // 仪表盘轴线(轮廓线)相关配置。 |
||||||
|
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。 |
||||||
|
lineStyle: { // 仪表盘轴线样式。 |
||||||
|
width: titleFontSize, |
||||||
|
color: [ // 轴线颜色区间，可以设置不同的颜色渐变区间 |
||||||
|
[0.35, '#ffb219'], |
||||||
|
[0.38, '#00be97'], |
||||||
|
[1, '#208fff'], |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
splitLine: { // 分隔线样式。 |
||||||
|
distance: titleFontSize * 0.35, |
||||||
|
show: true, // 是否显示分隔线,默认 true。 |
||||||
|
length: titleFontSize, |
||||||
|
lineStyle: { // 分隔线样式。 |
||||||
|
color: "auto", //线的颜色,默认 #eee。 |
||||||
|
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
||||||
|
width: titleFontSize * 0.2, |
||||||
|
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted |
||||||
|
// shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
||||||
|
// shadowColor: "#fff", //阴影颜色。支持的格式同color。 |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
show: true, // 是否显示标签,默认 true。 |
||||||
|
fontSize: titleFontSize * 1.5, |
||||||
|
distance: titleFontSize * 1.5, |
||||||
|
color: 'inherit', |
||||||
|
}, |
||||||
|
title: { |
||||||
|
color: '#ffffff', |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
offsetCenter: ['-30%', '20%'],//设置文字位置 |
||||||
|
}, |
||||||
|
detail: { |
||||||
|
valueAnimation: true, |
||||||
|
animationDuration: 2000, |
||||||
|
color: '#c5fff3', |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
offsetCenter: ['28%', '20%'], // 设置数字位置 |
||||||
|
}, |
||||||
|
data: [{ |
||||||
|
value: 0, |
||||||
|
name: '主机' |
||||||
|
}] |
||||||
|
}, |
||||||
|
{//冷却塔 |
||||||
|
name: '实时EER系数', |
||||||
|
type: 'gauge', |
||||||
|
radius: "65%", |
||||||
|
center: ["48%", "90%"], |
||||||
|
startAngle: 180, |
||||||
|
endAngle: 0, |
||||||
|
clockWise: true, |
||||||
|
min: 0, |
||||||
|
max: 120, |
||||||
|
splitNumber: 4, |
||||||
|
axisTick: { |
||||||
|
distance: titleFontSize * 0.2, |
||||||
|
show: true, |
||||||
|
splitNumber: 5, |
||||||
|
length: titleFontSize, |
||||||
|
lineStyle: { |
||||||
|
color: "auto", |
||||||
|
opacity: 1, |
||||||
|
width: titleFontSize * 0.1, |
||||||
|
type: "solid", |
||||||
|
}, |
||||||
|
}, |
||||||
|
pointer: { |
||||||
|
length: '40%', |
||||||
|
width: titleFontSize * 0.4, // 指针宽度 |
||||||
|
offsetCenter: [0, '-25%'], |
||||||
|
itemStyle: { |
||||||
|
color: 'auto' |
||||||
|
} |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
width: titleFontSize, |
||||||
|
color: [ |
||||||
|
[0.407, '#ffb219'], |
||||||
|
[0.446, '#00be97'], |
||||||
|
[1, '#208fff'], |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
distance: titleFontSize * 0.35, |
||||||
|
show: true, |
||||||
|
length: titleFontSize, |
||||||
|
lineStyle: { |
||||||
|
color: "auto", |
||||||
|
opacity: 1, |
||||||
|
width: titleFontSize * 0.2, |
||||||
|
type: "solid", |
||||||
|
} |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
show: true, |
||||||
|
fontSize: titleFontSize * 1.5, //刻度线数字字体大小 |
||||||
|
distance: titleFontSize * 1.5, |
||||||
|
color: 'inherit', |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
offsetCenter: ['-33%', '20%'], |
||||||
|
color: '#ffffff' |
||||||
|
}, |
||||||
|
detail: { |
||||||
|
valueAnimation: true, |
||||||
|
animationDuration: 2000, |
||||||
|
color: '#c5fff3', |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
offsetCenter: ['28%', '20%'], // 设置数字位置 |
||||||
|
}, |
||||||
|
data: [{ |
||||||
|
value: 0, |
||||||
|
name: "冷却塔" |
||||||
|
}] |
||||||
|
}, |
||||||
|
{//系统能效 |
||||||
|
name: '实时EER系数', |
||||||
|
type: 'gauge', |
||||||
|
detail: { formatter: '{value}' }, |
||||||
|
radius: "90%", |
||||||
|
center: ["15%", "55%"], |
||||||
|
startAngle: 225, |
||||||
|
endAngle: -45, |
||||||
|
clockWise: true, |
||||||
|
min: 0, |
||||||
|
max: 10, |
||||||
|
splitNumber: 4, |
||||||
|
axisTick: { |
||||||
|
distance: titleFontSize * 0.4, |
||||||
|
show: true, |
||||||
|
splitNumber: 5, |
||||||
|
length: titleFontSize * 1.2, |
||||||
|
lineStyle: { |
||||||
|
color: "auto", |
||||||
|
opacity: 1, |
||||||
|
width: titleFontSize * 0.2, |
||||||
|
type: "solid", |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
color: 'inherit', |
||||||
|
fontSize: titleFontSize * 1.8, |
||||||
|
distance: titleFontSize * 3, |
||||||
|
}, |
||||||
|
pointer: { |
||||||
|
width: titleFontSize * 0.6, |
||||||
|
itemStyle: { |
||||||
|
color: 'auto' |
||||||
|
} |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
width: titleFontSize * 1.6, |
||||||
|
color: [ |
||||||
|
[0.35, '#ee5e5e'], |
||||||
|
[0.415, '#ffb219'], |
||||||
|
[0.5, '#00be97'], |
||||||
|
[1, '#208fff'], |
||||||
|
], |
||||||
|
} |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
distance: titleFontSize * 0.35, |
||||||
|
show: true, |
||||||
|
length: titleFontSize * 2, |
||||||
|
lineStyle: { |
||||||
|
color: "auto", |
||||||
|
opacity: 1, |
||||||
|
width: titleFontSize * 0.2, |
||||||
|
type: "solid", |
||||||
|
} |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: titleFontSize * 2.6, |
||||||
|
color: '#ffffff', |
||||||
|
offsetCenter: ['-25%', '90%'],//设置文字位置 |
||||||
|
}, |
||||||
|
detail: { |
||||||
|
valueAnimation: true, |
||||||
|
animationDuration: 2000, |
||||||
|
color: '#c5fff3', |
||||||
|
fontSize: titleFontSize * 2.6, |
||||||
|
offsetCenter: ['35%', '90%'], // 设置数字位置 |
||||||
|
}, |
||||||
|
data: [{ |
||||||
|
value: 0, |
||||||
|
name: '系统EER', |
||||||
|
}] |
||||||
|
}, |
||||||
|
{//冷冻泵 |
||||||
|
name: '实时EER系数', |
||||||
|
type: 'gauge', |
||||||
|
radius: "65%", |
||||||
|
center: ["75%", "40%"], |
||||||
|
startAngle: 180, |
||||||
|
endAngle: 0, |
||||||
|
clockWise: true, |
||||||
|
min: 0, |
||||||
|
max: 100, |
||||||
|
splitNumber: 4, |
||||||
|
axisTick: { |
||||||
|
distance: titleFontSize * 0.2, |
||||||
|
show: true, |
||||||
|
splitNumber: 5, |
||||||
|
length: titleFontSize, |
||||||
|
lineStyle: { |
||||||
|
color: "auto", |
||||||
|
opacity: 1, |
||||||
|
width: titleFontSize * 0.1, |
||||||
|
type: "solid", |
||||||
|
}, |
||||||
|
}, |
||||||
|
pointer: { |
||||||
|
length: '40%', |
||||||
|
width: titleFontSize * 0.4, // 指针宽度 |
||||||
|
offsetCenter: [0, '-20%'], |
||||||
|
// width: 3.5, // 指针宽度 |
||||||
|
itemStyle: { |
||||||
|
color: 'auto' |
||||||
|
} |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
width: titleFontSize, |
||||||
|
color: [ |
||||||
|
[0.417, '#ffb219'], |
||||||
|
[0.459, '#00be97'], |
||||||
|
[1, '#208fff'], |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: true, |
||||||
|
distance: titleFontSize * 0.35, |
||||||
|
length: titleFontSize, |
||||||
|
lineStyle: { |
||||||
|
color: "auto", |
||||||
|
opacity: 1, |
||||||
|
width: titleFontSize * 0.2, |
||||||
|
type: "solid", |
||||||
|
} |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
show: true, |
||||||
|
fontSize: titleFontSize * 1.5, |
||||||
|
distance: titleFontSize * 1.5, |
||||||
|
color: 'inherit', |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
offsetCenter: ['-33%', '20%'], |
||||||
|
color: '#ffffff' |
||||||
|
}, |
||||||
|
detail: { |
||||||
|
valueAnimation: true, |
||||||
|
animationDuration: 2000, |
||||||
|
color: '#c5fff3', |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
offsetCenter: ['28%', '20%'], // 设置数字位置 |
||||||
|
}, |
||||||
|
data: [{ |
||||||
|
value: 0, |
||||||
|
name: '冷冻泵' |
||||||
|
}] |
||||||
|
}, |
||||||
|
{//冷却泵 |
||||||
|
name: '实时EER系数', |
||||||
|
type: 'gauge', |
||||||
|
radius: "65%", |
||||||
|
center: ["75%", "90%"], |
||||||
|
startAngle: 180, |
||||||
|
endAngle: 0, |
||||||
|
clockWise: true, |
||||||
|
min: 0, |
||||||
|
max: 100, |
||||||
|
splitNumber: 4, |
||||||
|
axisTick: { |
||||||
|
distance: titleFontSize * 0.2, |
||||||
|
show: true, |
||||||
|
splitNumber: 5, |
||||||
|
length: titleFontSize, |
||||||
|
lineStyle: { |
||||||
|
color: "auto", |
||||||
|
opacity: 1, |
||||||
|
width: titleFontSize * 0.1, |
||||||
|
type: "solid", |
||||||
|
}, |
||||||
|
}, |
||||||
|
pointer: { |
||||||
|
length: '40%', |
||||||
|
width: titleFontSize * 0.4,// 指针宽度 |
||||||
|
offsetCenter: [0, '-20%'], |
||||||
|
itemStyle: { |
||||||
|
color: 'auto' |
||||||
|
} |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
width: titleFontSize, |
||||||
|
color: [ |
||||||
|
[0.417, '#ffb219'], |
||||||
|
[0.459, '#00be97'], |
||||||
|
[1, '#208fff'], |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
distance: titleFontSize * 0.35, |
||||||
|
show: true, |
||||||
|
length: titleFontSize, |
||||||
|
lineStyle: { |
||||||
|
color: "auto", |
||||||
|
opacity: 1, |
||||||
|
width: titleFontSize * 0.2, |
||||||
|
type: "solid", |
||||||
|
} |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
show: true, |
||||||
|
fontSize: titleFontSize * 1.5, |
||||||
|
distance: titleFontSize * 1.5, |
||||||
|
color: 'inherit', |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
offsetCenter: ['-33%', '20%'], |
||||||
|
color: '#ffffff' |
||||||
|
}, |
||||||
|
detail: { |
||||||
|
valueAnimation: true, |
||||||
|
animationDuration: 2000, |
||||||
|
color: '#c5fff3', |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
offsetCenter: ['28%', '20%'], // 设置数字位置 |
||||||
|
}, |
||||||
|
data: [{ |
||||||
|
value: 0, |
||||||
|
name: "冷却泵" |
||||||
|
}] |
||||||
|
|
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.chartInstance2.setOption(this.option2, true); |
||||||
|
}, |
||||||
|
// 定时器 |
||||||
|
nowData() {//把option.series[0].data[0].value的值使用random()方法获取一个随机数 |
||||||
|
const v0 = (Math.random() * 7).toFixed(2); |
||||||
|
const v1 = (Math.random() * 10).toFixed(2); |
||||||
|
const v2 = (Math.random() * 2).toFixed(2); |
||||||
|
const v3 = (Math.random() * 2).toFixed(2); |
||||||
|
const v4 = (Math.random() * 10).toFixed(2); |
||||||
|
|
||||||
|
// 根据值动态设置 detail 颜色 |
||||||
|
const color0 = this.getGaugeColor(v0, 0, 15, [[0.35, '#ffb219'], [0.38, '#00be97'], [1, '#208fff']]); |
||||||
|
const color1 = this.getGaugeColor(v1, 0, 120, [[0.407, '#ffb219'], [0.446, '#00be97'], [1, '#208fff']]); |
||||||
|
const color2 = this.getGaugeColor(v2, 0, 10, [[0.35, '#ee5e5e'], [0.415, '#ffb219'], [0.5, '#00be97'], [1, '#208fff']]); |
||||||
|
const color3 = this.getGaugeColor(v3, 0, 100, [[0.417, '#ffb219'], [0.459, '#00be97'], [1, '#208fff']]); |
||||||
|
const color4 = this.getGaugeColor(v4, 0, 100, [[0.417, '#ffb219'], [0.459, '#00be97'], [1, '#208fff']]); |
||||||
|
|
||||||
|
// 使用 merge 模式更新，确保 detail.color 生效 |
||||||
|
this.chartInstance2.setOption({ |
||||||
|
series: [ |
||||||
|
{ detail: { color: color0 }, data: [{ value: v0 }] }, |
||||||
|
{ detail: { color: color1 }, data: [{ value: v1 }] }, |
||||||
|
{ detail: { color: color2 }, data: [{ value: v2 }] }, |
||||||
|
{ detail: { color: color3 }, data: [{ value: v3 }] }, |
||||||
|
{ detail: { color: color4 }, data: [{ value: v4 }] }, |
||||||
|
] |
||||||
|
}); |
||||||
|
setInterval(this.nowData, 100000); |
||||||
|
this.clear(); |
||||||
|
}, |
||||||
|
clear() { |
||||||
|
clearInterval(this.nowData); |
||||||
|
this.nowData = null; |
||||||
|
}, |
||||||
|
screenAdapter2() { |
||||||
|
const titleFontSize = this.$refs.sys_charts.offsetWidth / 180; |
||||||
|
const adapterOption = { |
||||||
|
series: [ |
||||||
|
{ //主机 |
||||||
|
name: '实时EER系数', |
||||||
|
type: 'gauge', |
||||||
|
axisTick: { // 刻度(线)样式。 |
||||||
|
distance: titleFontSize * 0.2, //刻度线离边缘的距离 |
||||||
|
length: titleFontSize, // 刻度线长。支持相对半径的百分比,默认 8。 |
||||||
|
lineStyle: { // 刻度线样式。 |
||||||
|
width: titleFontSize * 0.1, //线度,默认 1。 |
||||||
|
}, |
||||||
|
}, |
||||||
|
pointer: { |
||||||
|
width: titleFontSize * 0.4, // 指针宽度 |
||||||
|
}, |
||||||
|
axisLine: { // 仪表盘轴线(轮廓线)相关配置。 |
||||||
|
lineStyle: { // 仪表盘轴线样式。 |
||||||
|
width: titleFontSize, //轴线宽度,默认 30。 |
||||||
|
} |
||||||
|
}, |
||||||
|
splitLine: { // 分隔线样式。 |
||||||
|
distance: titleFontSize * 0.35, //分割线离边缘的距离 |
||||||
|
length: titleFontSize, // 分隔线线长。支持相对半径的百分比,默认 30。 |
||||||
|
lineStyle: { // 分隔线样式。 |
||||||
|
width: titleFontSize * 0.2, //线度,默认 2。 |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
fontSize: titleFontSize * 1.5, |
||||||
|
distance: titleFontSize * 1.5, // 标签与刻度线的距离,默认 5。 |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
}, |
||||||
|
detail: { |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ //冷却塔 |
||||||
|
name: '实时EER系数', |
||||||
|
type: 'gauge', |
||||||
|
axisTick: { // 刻度(线)样式。 |
||||||
|
distance: titleFontSize * 0.2, //刻度线离边缘的距离 |
||||||
|
length: titleFontSize, // 刻度线长。支持相对半径的百分比,默认 8。 |
||||||
|
lineStyle: { // 刻度线样式。 |
||||||
|
width: titleFontSize * 0.1, //线度,默认 1。 |
||||||
|
}, |
||||||
|
}, |
||||||
|
pointer: { |
||||||
|
width: titleFontSize * 0.4, // 指针宽度 |
||||||
|
}, |
||||||
|
axisLine: { // 仪表盘轴线(轮廓线)相关配置。 |
||||||
|
lineStyle: { // 仪表盘轴线样式。 |
||||||
|
width: titleFontSize, //轴线宽度,默认 30。 |
||||||
|
} |
||||||
|
}, |
||||||
|
splitLine: { // 分隔线样式。 |
||||||
|
distance: titleFontSize * 0.35, //分割线离边缘的距离 |
||||||
|
length: titleFontSize, // 分隔线线长。支持相对半径的百分比,默认 30。 |
||||||
|
lineStyle: { // 分隔线样式。 |
||||||
|
width: titleFontSize * 0.2, //线度,默认 2。 |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
fontSize: titleFontSize * 1.5, |
||||||
|
distance: titleFontSize * 1.5, // 标签与刻度线的距离,默认 5。 |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
}, |
||||||
|
detail: { |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ //系统能效 |
||||||
|
name: '实时EER系数', |
||||||
|
type: 'gauge', |
||||||
|
axisTick: { // 刻度(线)样式。 |
||||||
|
distance: titleFontSize * 0.4, //刻度线离边缘的距离 |
||||||
|
length: titleFontSize * 1.2, // 刻度线长。支持相对半径的百分比,默认 8。 |
||||||
|
lineStyle: { // 刻度线样式。 |
||||||
|
width: titleFontSize * 0.2, //线度,默认 1。 |
||||||
|
}, |
||||||
|
}, |
||||||
|
pointer: { |
||||||
|
width: titleFontSize * 0.6, // 指针宽度 |
||||||
|
}, |
||||||
|
axisLine: { // 仪表盘轴线(轮廓线)相关配置。 |
||||||
|
lineStyle: { // 仪表盘轴线样式。 |
||||||
|
width: titleFontSize * 1.6, //轴线宽度,默认 30。 |
||||||
|
} |
||||||
|
}, |
||||||
|
splitLine: { // 分隔线样式。 |
||||||
|
distance: titleFontSize * 0.35, //分割线离边缘的距离 |
||||||
|
length: titleFontSize * 2, // 分隔线线长。支持相对半径的百分比,默认 30。 |
||||||
|
lineStyle: { // 分隔线样式。 |
||||||
|
width: titleFontSize * 0.2, //线度,默认 2。 |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
fontSize: titleFontSize * 1.8, |
||||||
|
distance: titleFontSize * 3, // 标签与刻度线的距离,默认 5。 |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: titleFontSize * 2.6, |
||||||
|
}, |
||||||
|
detail: { |
||||||
|
fontSize: titleFontSize * 2.6, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ //冷冻泵 |
||||||
|
name: '实时EER系数', |
||||||
|
type: 'gauge', |
||||||
|
axisTick: { // 刻度(线)样式。 |
||||||
|
distance: titleFontSize * 0.2, //刻度线离边缘的距离 |
||||||
|
length: titleFontSize, // 刻度线长。支持相对半径的百分比,默认 8。 |
||||||
|
lineStyle: { // 刻度线样式。 |
||||||
|
width: titleFontSize * 0.1, //线度,默认 1。 |
||||||
|
}, |
||||||
|
}, |
||||||
|
pointer: { |
||||||
|
width: titleFontSize * 0.4, // 指针宽度 |
||||||
|
}, |
||||||
|
axisLine: { // 仪表盘轴线(轮廓线)相关配置。 |
||||||
|
lineStyle: { // 仪表盘轴线样式。 |
||||||
|
width: titleFontSize, //轴线宽度,默认 30。 |
||||||
|
} |
||||||
|
}, |
||||||
|
splitLine: { // 分隔线样式。 |
||||||
|
distance: titleFontSize * 0.35, //分割线离边缘的距离 |
||||||
|
length: titleFontSize, // 分隔线线长。支持相对半径的百分比,默认 30。 |
||||||
|
lineStyle: { // 分隔线样式。 |
||||||
|
width: titleFontSize * 0.2, //线度,默认 2。 |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
fontSize: titleFontSize * 1.5, |
||||||
|
distance: titleFontSize * 1.5, // 标签与刻度线的距离,默认 5。 |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
}, |
||||||
|
detail: { |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ //冷却泵 |
||||||
|
name: '实时EER系数', |
||||||
|
type: 'gauge', |
||||||
|
axisTick: { // 刻度(线)样式。 |
||||||
|
distance: titleFontSize * 0.2, //刻度线离边缘的距离 |
||||||
|
length: titleFontSize, // 刻度线长。支持相对半径的百分比,默认 8。 |
||||||
|
lineStyle: { // 刻度线样式。 |
||||||
|
width: titleFontSize * 0.1, //线度,默认 1。 |
||||||
|
}, |
||||||
|
}, |
||||||
|
pointer: { |
||||||
|
width: titleFontSize * 0.4, // 指针宽度 |
||||||
|
}, |
||||||
|
axisLine: { // 仪表盘轴线(轮廓线)相关配置。 |
||||||
|
lineStyle: { // 仪表盘轴线样式。 |
||||||
|
width: titleFontSize, //轴线宽度,默认 30。 |
||||||
|
} |
||||||
|
}, |
||||||
|
splitLine: { // 分隔线样式。 |
||||||
|
distance: titleFontSize * 0.35, //分割线离边缘的距离 |
||||||
|
length: titleFontSize, // 分隔线线长。支持相对半径的百分比,默认 30。 |
||||||
|
lineStyle: { // 分隔线样式。 |
||||||
|
width: titleFontSize * 0.2, //线度,默认 2。 |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
fontSize: titleFontSize * 1.5, |
||||||
|
distance: titleFontSize * 1.5, // 标签与刻度线的距离,默认 5。 |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
}, |
||||||
|
detail: { |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
}, |
||||||
|
},] |
||||||
|
}; |
||||||
|
this.chartInstance2.setOption(adapterOption); |
||||||
|
this.chartInstance2.resize(); |
||||||
|
}, |
||||||
|
// 系统系数 |
||||||
|
getCoe() { |
||||||
|
getCoeData().then((res) => { |
||||||
|
console.log("系统系数返回", res) |
||||||
|
if (res.code == 200) { |
||||||
|
this.data1 = res.rows[0].sysCoe || this.data1; |
||||||
|
this.data2 = res.rows[0].chillerCoe || this.data2; |
||||||
|
this.data3 = res.rows[0].chillPumpCoe || this.data3; |
||||||
|
this.data4 = res.rows[0].coolPumpCoe || this.data4; |
||||||
|
this.data5 = res.rows[0].towerCoe || this.data5; |
||||||
|
|
||||||
|
// 主机 |
||||||
|
const color0 = this.getGaugeColor(this.data2, 0, 15, [[0.35, '#ffb219'], [0.38, '#00be97'], [1, '#208fff']]); |
||||||
|
this.option2.series[0].data[0].value = this.data2; |
||||||
|
this.option2.series[0].detail.color = color0; |
||||||
|
|
||||||
|
// 冷却塔 |
||||||
|
const color1 = this.getGaugeColor(this.data5, 0, 120, [[0.407, '#ffb219'], [0.446, '#00be97'], [1, '#208fff']]); |
||||||
|
this.option2.series[1].data[0].value = this.data5; |
||||||
|
this.option2.series[1].detail.color = color1; |
||||||
|
|
||||||
|
// 系统EER |
||||||
|
const color2 = this.getGaugeColor(this.data1, 0, 10, [[0.35, '#ee5e5e'], [0.415, '#ffb219'], [0.5, '#00be97'], [1, '#208fff']]); |
||||||
|
this.option2.series[2].data[0].value = this.data1; |
||||||
|
this.option2.series[2].detail.color = color2; |
||||||
|
|
||||||
|
// 冷冻泵 |
||||||
|
const color3 = this.getGaugeColor(this.data3, 0, 100, [[0.417, '#ffb219'], [0.459, '#00be97'], [1, '#208fff']]); |
||||||
|
this.option2.series[3].data[0].value = this.data3; |
||||||
|
this.option2.series[3].detail.color = color3; |
||||||
|
|
||||||
|
// 冷却泵 |
||||||
|
const color4 = this.getGaugeColor(this.data4, 0, 100, [[0.417, '#ffb219'], [0.459, '#00be97'], [1, '#208fff']]); |
||||||
|
this.option2.series[4].data[0].value = this.data4; |
||||||
|
this.option2.series[4].detail.color = color4; |
||||||
|
|
||||||
|
// 使用 merge 模式更新，确保 detail.color 生效 |
||||||
|
this.chartInstance2.setOption({ |
||||||
|
series: [ |
||||||
|
{ detail: { color: color0 }, data: [{ value: this.data2, name: '主机' }] }, |
||||||
|
{ detail: { color: color1 }, data: [{ value: this.data5, name: '冷却塔' }] }, |
||||||
|
{ detail: { color: color2 }, data: [{ value: this.data1, name: '系统EER' }] }, |
||||||
|
{ detail: { color: color3 }, data: [{ value: this.data3, name: '冷冻泵' }] }, |
||||||
|
{ detail: { color: color4 }, data: [{ value: this.data4, name: '冷却泵' }] }, |
||||||
|
] |
||||||
|
}); |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.sys_content { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: flex-start; |
||||||
|
width: 100%; |
||||||
|
height:3rem; |
||||||
|
padding: 20px; |
||||||
|
|
||||||
|
.sys_charts { |
||||||
|
width: 90%; |
||||||
|
height: 2.5rem; |
||||||
|
margin-bottom: -0.9rem; |
||||||
|
} |
||||||
|
|
||||||
|
.score { |
||||||
|
width: 10%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
font-size: 0.18rem; |
||||||
|
color: #ffffff; |
||||||
|
margin: 10px; |
||||||
|
|
||||||
|
.excellent, |
||||||
|
.good, |
||||||
|
.bad, |
||||||
|
.improve { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 0.1rem; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
.excellent::before, |
||||||
|
.good::before, |
||||||
|
.bad::before, |
||||||
|
.improve::before { |
||||||
|
display: block; |
||||||
|
content: ''; |
||||||
|
width: 0.15rem; |
||||||
|
height: 0.14rem; |
||||||
|
margin-right: 0.16rem; |
||||||
|
} |
||||||
|
|
||||||
|
.excellent::before { |
||||||
|
background-color: #208fff; |
||||||
|
} |
||||||
|
|
||||||
|
.good::before { |
||||||
|
background-color: #00be97; |
||||||
|
} |
||||||
|
|
||||||
|
.bad::before { |
||||||
|
background-color: #ffb219; |
||||||
|
} |
||||||
|
|
||||||
|
.improve::before { |
||||||
|
background-color: #ee5e5e; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue