You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
628 lines
18 KiB
628 lines
18 KiB
<template> |
|
<div class="energy_content"> |
|
<div class="sys_charts" ref="sys_charts"></div> |
|
<div class="eer"> |
|
<div>用电量:{{ energyMes.totalEle }}kw/h</div> |
|
<div>用水量:{{ energyMes.totalWater }}吨</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import * as echarts from "echarts"; |
|
import { eventBus } from "@/utils/evenBus"; |
|
import { overView } from "@/api/bigScreen"; |
|
import { getDay, getMonth, getYear } from "@/utils/datetime"; |
|
export default { |
|
data() { |
|
return { |
|
chartInstance: null, |
|
option: {}, |
|
isShowModule: false, |
|
energyCostText: "eer数据", |
|
dateUse: "", |
|
useForm: { |
|
useData: 5, |
|
maxData: 10, //最大的刻度值 |
|
}, |
|
queryType: "day", //默认页面为day |
|
dataTime: "", |
|
energyMes: {}, |
|
}; |
|
}, |
|
created() { |
|
eventBus.$on("data-sent-queryType", (data) => { |
|
this.queryType = data; |
|
console.log("得到的queryType为", this.queryType); |
|
this.getChartsData(); |
|
}); |
|
}, |
|
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() { |
|
if (this.queryType === "day") { |
|
this.dataTime = getDay(0); |
|
} else if (this.queryType === "month") { |
|
this.dataTime = getMonth(0); |
|
} else if (this.queryType === "year") { |
|
this.dataTime = getYear(0); |
|
} |
|
let data = { |
|
timeType: this.queryType, |
|
startTime: this.dataTime, |
|
endTime: this.dataTime, |
|
systemType: "1", |
|
}; |
|
overView(data).then((res) => { |
|
console.log("两个系统参数返回", res); |
|
if (res.code == 200) { |
|
this.energyMes = res.rows[0]; |
|
this.useForm.maxData = 50; //最大值 |
|
const { totalEle, totalWater } = res.rows[0]; |
|
if (totalEle === 0 || totalWater === 0) { |
|
this.useForm.useData = 0; |
|
} else { |
|
const result = totalEle / totalWater; |
|
if (Number.isInteger(result)) { |
|
this.useForm.useData = result; |
|
} else { |
|
this.useForm.useData = parseFloat(result.toFixed(2)); |
|
} |
|
} |
|
console.log("热水的eer", this.useForm.useData); |
|
let that = this; |
|
// 使用配置函数 |
|
const axisLineColor = this.getAxisLineColor( |
|
this.useForm.useData, |
|
this.useForm.maxData |
|
); |
|
const titleFontSize = this.$refs.sys_charts.offsetWidth / 25; |
|
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, -25], // 向上偏移 10 个单位 |
|
formatter: function () { |
|
// 返回 HTML 标签，使用 rich 里定义的样式 |
|
return `{line1|${that.useForm.useData}}\n{line2| kwh/吨}`; |
|
}, |
|
rich: { |
|
line1: { |
|
color: "#39dd4f", // 第一行文字颜色 |
|
fontSize: 20, // 第一行文字大小 |
|
lineHeight: 34, // 行高，实现间距 |
|
}, |
|
line2: { |
|
color: "#fff", // 第二行文字颜色 |
|
fontSize: 14, // 第二行文字大小 |
|
lineHeight: 24, // 行高，实现间距 |
|
}, |
|
}, |
|
}, |
|
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%; |
|
padding: 10px 0; |
|
.sys_charts { |
|
width: 100%; |
|
height: 160px; |
|
} |
|
.eer { |
|
width: 80%; |
|
color: #fff; |
|
font-size: 18px; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: space-between; |
|
margin: 10px 0; |
|
} |
|
} |
|
// 媒体查询，适配大于2000px分辨率的大屏样式 |
|
@media (min-width: 2000px) { |
|
.energy_content { |
|
padding: 0.1rem 0 !important; |
|
.sys_charts { |
|
height: 1.6rem !important; |
|
} |
|
.eer { |
|
font-size: 0.18rem !important; |
|
margin: 0.2rem 0 !important; |
|
} |
|
} |
|
} |
|
</style>
|
|
|