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