20 changed files with 2427 additions and 1752 deletions
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
@ -0,0 +1,596 @@ |
|||||||
|
<template> |
||||||
|
<div class="chart-content"> |
||||||
|
<div class="home-chart"> |
||||||
|
<div |
||||||
|
class="legend-li" |
||||||
|
v-for="(item, index) in timeData2" |
||||||
|
:key="index" |
||||||
|
@click="handleEnter(index)" |
||||||
|
:class="{ timeStyle: timeIndex2 == index }" |
||||||
|
> |
||||||
|
{{ item.title }} |
||||||
|
</div> |
||||||
|
<div class="home-chart-right"> |
||||||
|
<div |
||||||
|
class="imgDiv" |
||||||
|
v-for="(item, index) in imgData" |
||||||
|
:key="index" |
||||||
|
@click="handleImg(index)" |
||||||
|
:class="{ imgStyle: imgIndex == index }" |
||||||
|
> |
||||||
|
<img |
||||||
|
:src="item.imgSrc" |
||||||
|
class="choice-icon" |
||||||
|
id="svgImg " |
||||||
|
alt="" |
||||||
|
:title="item.title" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="charts-div" ref="analyse_ref"></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { homeCharts } from "@/api/index"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
timeData2: [ |
||||||
|
{ title: "系统EER" }, |
||||||
|
{ title: "瞬时冷量(kwr)" }, |
||||||
|
{ title: "瞬时电量(kwh)" }, |
||||||
|
// { title: "总用电量(kwh)" }, |
||||||
|
{ title: "冷冻水供回水温度(℃)" }, |
||||||
|
// { title: "趋近度(℃)" }, |
||||||
|
], |
||||||
|
timeIndex2: 0, //瞬时冷量 |
||||||
|
imgData: [ |
||||||
|
{ |
||||||
|
title: "轮播", |
||||||
|
imgSrc: require("../../assets/images/noactive-0.png"), |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "手动", |
||||||
|
imgSrc: require("../../assets/images/noactive-1.png"), |
||||||
|
}, |
||||||
|
], |
||||||
|
imgIndex: 0, //轮播 |
||||||
|
chartInstance2: null, |
||||||
|
option2: {}, |
||||||
|
xTimeData: [], // 折线图x轴时间 |
||||||
|
//折线图模拟数据 |
||||||
|
electData: [], |
||||||
|
electTime: [], |
||||||
|
waterData: [], |
||||||
|
waterTime: [], |
||||||
|
EERData: [], |
||||||
|
EERTime: [], |
||||||
|
proximityData: [], |
||||||
|
proximityTime: [], |
||||||
|
|
||||||
|
chartInstance2: null, |
||||||
|
option2: {}, |
||||||
|
allDataObj: {}, //接受返回的所有数据 |
||||||
|
xData: [], |
||||||
|
chartsAeries: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initChart2(); |
||||||
|
this.screenAdapter2(); |
||||||
|
window.addEventListener("resize", this.screenAdapter2); |
||||||
|
this.getChartsData(); |
||||||
|
this.move(); |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||||
|
window.removeEventListener("resize", this.screenAdapter2); |
||||||
|
// 消除定时器 |
||||||
|
clearInterval(this.timer); |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
// 图表 or 表格 |
||||||
|
handleImg(index) { |
||||||
|
this.imgIndex = index; |
||||||
|
// console.log("this.timeData2[index].imgSrc", this.timeData2[index].title) |
||||||
|
// 排他，渲染图片 |
||||||
|
for (let i = 0; i < this.imgData.length; i++) { |
||||||
|
const imgSrc = |
||||||
|
i === index ? `active-${index}.png` : `noactive-${i}.png`; |
||||||
|
this.imgData[i].imgSrc = require(`../../assets/images/${imgSrc}`); |
||||||
|
} |
||||||
|
if (index == 0) { |
||||||
|
this.move(); |
||||||
|
} else { |
||||||
|
clearInterval(this.timer); |
||||||
|
} |
||||||
|
}, |
||||||
|
handleEnter(index) { |
||||||
|
this.timeIndex2 = index; |
||||||
|
console.log("有打印瞬时冷量的index吗", this.allDataObj); |
||||||
|
this.chartInstance2.dispose(); |
||||||
|
this.initChart2(); |
||||||
|
this.xData = []; |
||||||
|
this.chartsAeries = []; |
||||||
|
if (index == 1) { |
||||||
|
// 添加折线的配置 |
||||||
|
var singleSeries = { |
||||||
|
smooth: true, |
||||||
|
symbol: "circle", |
||||||
|
// 开始不显示拐点， 鼠标经过显示 |
||||||
|
showSymbol: false, |
||||||
|
itemStyle: { |
||||||
|
color: "#44a2ff", // 折线点的颜色 |
||||||
|
lineStyle: { |
||||||
|
color: "#44a2ff", // 折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
type: "linear", // 线性渐变 |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(11, 117, 211, 1)", // 0% 处的颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 0.8, |
||||||
|
color: "rgba(11, 117, 211, 0.2)", // 100% 处的颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
this.allDataObj.cloudChart.series[0] = { |
||||||
|
...this.allDataObj.cloudChart.series[0], |
||||||
|
...singleSeries, |
||||||
|
}; |
||||||
|
this.chartsAeries = this.allDataObj.cloudChart.series; |
||||||
|
this.xData = this.allDataObj.cloudChart.xaxis.data; |
||||||
|
this.option2.xAxis.data = this.xData; |
||||||
|
this.option2.series = this.chartsAeries; |
||||||
|
} else if (index == 2) { |
||||||
|
// 添加折线的配置 |
||||||
|
var singleSeries = { |
||||||
|
smooth: true, |
||||||
|
symbol: "circle", |
||||||
|
// 开始不显示拐点， 鼠标经过显示 |
||||||
|
showSymbol: false, |
||||||
|
itemStyle: { |
||||||
|
color: "#01c29b", // 折线点的颜色 |
||||||
|
lineStyle: { |
||||||
|
color: "#01c29b", // 折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
type: "linear", // 线性渐变 |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(1, 194, 155, 1)", // 0% 处的颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 0.8, |
||||||
|
color: "rgba(1, 194, 155, 0.2)", // 100% 处的颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
this.allDataObj.eleRateChart.series[0] = { |
||||||
|
...this.allDataObj.eleRateChart.series[0], |
||||||
|
...singleSeries, |
||||||
|
}; |
||||||
|
this.chartsAeries = this.allDataObj.eleRateChart.series; |
||||||
|
this.xData = this.allDataObj.eleRateChart.xaxis.data; |
||||||
|
this.option2.xAxis.data = this.xData; |
||||||
|
this.option2.series = this.chartsAeries; |
||||||
|
} else if (index == 3) { |
||||||
|
// 添加图例的配置 |
||||||
|
let legendData = []; |
||||||
|
this.allDataObj.tempChart.series.forEach((element) => { |
||||||
|
legendData.push(element.name); |
||||||
|
}); |
||||||
|
console.log("图例数组", legendData); |
||||||
|
this.chartsAeries = this.allDataObj.tempChart.series; |
||||||
|
this.xData = this.allDataObj.tempChart.xaxis.data; |
||||||
|
this.option2.legend.show = true; |
||||||
|
this.option2.legend.data = legendData; |
||||||
|
this.option2.xAxis.data = this.xData; |
||||||
|
// 给每个series对象添加showSymbol = false; //一开始时不显示原点,鼠标点击才显示 |
||||||
|
for (var i = 0; i < this.chartsAeries.length; i++) { |
||||||
|
this.chartsAeries[i].showSymbol = false; |
||||||
|
} |
||||||
|
this.option2.series = this.chartsAeries; |
||||||
|
} else if (index == 0) { |
||||||
|
// 添加折线的配置 |
||||||
|
var singleSeries = { |
||||||
|
smooth: true, |
||||||
|
symbol: "circle", |
||||||
|
// 开始不显示拐点， 鼠标经过显示 |
||||||
|
showSymbol: false, |
||||||
|
itemStyle: { |
||||||
|
color: "#ffb219", // 折线点的颜色 |
||||||
|
lineStyle: { |
||||||
|
color: "#ffb219", // 折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
type: "linear", // 线性渐变 |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(255, 178,25 , 0.8)", // 0% 处的颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 0.8, |
||||||
|
color: "rgba(255, 178,25 , 0.2)", // 100% 处的颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
this.allDataObj.copChart.series[0] = { |
||||||
|
...this.allDataObj.copChart.series[0], |
||||||
|
...singleSeries, |
||||||
|
}; |
||||||
|
this.chartsAeries = this.allDataObj.copChart.series; |
||||||
|
this.xData = this.allDataObj.copChart.xaxis.data; |
||||||
|
this.option2.xAxis.data = this.xData; |
||||||
|
this.option2.series = this.chartsAeries; |
||||||
|
} else if (index == 4) { |
||||||
|
// 添加图例的配置 |
||||||
|
let legendData = []; |
||||||
|
this.allDataObj.appChart.series.forEach((element) => { |
||||||
|
legendData.push(element.name); |
||||||
|
}); |
||||||
|
console.log("图例数组", legendData); |
||||||
|
this.chartsAeries = this.allDataObj.appChart.series; |
||||||
|
this.xData = this.allDataObj.appChart.xaxis.data; |
||||||
|
this.option2.legend.show = true; |
||||||
|
this.option2.legend.data = legendData; |
||||||
|
this.option2.xAxis.data = this.xData; |
||||||
|
// 给每个series对象添加showSymbol = false; //一开始时不显示原点,鼠标点击才显示 |
||||||
|
for (var i = 0; i < this.chartsAeries.length; i++) { |
||||||
|
this.chartsAeries[i].showSymbol = false; |
||||||
|
} |
||||||
|
this.option2.series = this.chartsAeries; |
||||||
|
} |
||||||
|
console.log("折线图的xAxis详情", this.xData); |
||||||
|
console.log("折线图的series详情", this.chartsAeries); |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance2.setOption(this.option2); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance2.resize(); |
||||||
|
}, |
||||||
|
//初始化chartInstance2对象 折线图 |
||||||
|
initChart2() { |
||||||
|
this.chartInstance2 = this.$echarts.init(this.$refs.analyse_ref); |
||||||
|
this.option2 = { |
||||||
|
tooltip: { |
||||||
|
trigger: "axis", |
||||||
|
// 使用 formatter 设定 tooltip 内容格式 |
||||||
|
// formatter: function (params) { |
||||||
|
// let seriesHTML = ""; |
||||||
|
// params.forEach(function (item) { |
||||||
|
// seriesHTML += |
||||||
|
// "<div>" + |
||||||
|
// item.seriesName + |
||||||
|
// ': <span style="color: #000000; font-weight: bold;">' + |
||||||
|
// item.value + |
||||||
|
// "</span></div>"; |
||||||
|
// }); |
||||||
|
// return "<div>" + params[0].name + "</div>" + seriesHTML; |
||||||
|
// }, |
||||||
|
// 自定义 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 (seriesName.indexOf("瞬时冷量") !== -1) { |
||||||
|
res += |
||||||
|
marker + |
||||||
|
seriesName + |
||||||
|
":" + |
||||||
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||||
|
value + |
||||||
|
"kwr" + |
||||||
|
"</span><br>"; |
||||||
|
} else if (seriesName.indexOf("用电量") !== -1) { |
||||||
|
res += |
||||||
|
marker + |
||||||
|
seriesName + |
||||||
|
":" + |
||||||
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||||
|
value + |
||||||
|
"kwh" + |
||||||
|
"</span><br>"; |
||||||
|
} else if ( |
||||||
|
seriesName.indexOf("温度") !== -1 || |
||||||
|
seriesName.indexOf("趋近度") !== -1 |
||||||
|
) { |
||||||
|
res += |
||||||
|
marker + |
||||||
|
seriesName + |
||||||
|
":" + |
||||||
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||||
|
value + |
||||||
|
"℃" + |
||||||
|
"</span><br>"; |
||||||
|
} else if (seriesName.indexOf("瞬时功率") !== -1) { |
||||||
|
res += |
||||||
|
marker + |
||||||
|
seriesName + |
||||||
|
":" + |
||||||
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||||
|
value + |
||||||
|
"kwh" + |
||||||
|
"</span><br>"; |
||||||
|
} else { |
||||||
|
res += |
||||||
|
marker + |
||||||
|
seriesName + |
||||||
|
":" + |
||||||
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||||
|
value + |
||||||
|
"</span><br>"; |
||||||
|
} |
||||||
|
} |
||||||
|
return res; |
||||||
|
}, |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
show: false, // 不显示图例 |
||||||
|
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] |
||||||
|
textStyle: { color: "#ffffff" }, |
||||||
|
// left: "0%", |
||||||
|
top: "-1%", |
||||||
|
}, |
||||||
|
|
||||||
|
grid: { |
||||||
|
top: "9%", |
||||||
|
left: "3%", |
||||||
|
right: "2%", |
||||||
|
bottom: "25%", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: "category", |
||||||
|
boundaryGap: true, |
||||||
|
// data: ["2021", "2022", "2023"], |
||||||
|
axisLabel: { |
||||||
|
// interval: 0, //强制显示所有x轴数据 |
||||||
|
color: "rgba(255,255,255,1)", |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
min: 0, |
||||||
|
miniInterval: 5, |
||||||
|
type: "value", |
||||||
|
// 修饰刻度标签的颜色即y坐标数据 |
||||||
|
axisLabel: { |
||||||
|
color: "rgba(255,255,255,1)", |
||||||
|
}, |
||||||
|
// 显示y坐标轴的颜色 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
// X 轴颜色配置 |
||||||
|
color: "#7b918c", |
||||||
|
}, |
||||||
|
}, |
||||||
|
// 修改y轴分割线的颜色 |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#7b918c", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
// 拖拽X轴 |
||||||
|
dataZoom: [ |
||||||
|
{ |
||||||
|
type: "slider", //inside鼠标缩放 |
||||||
|
show: this.showZoom, |
||||||
|
height: 15, // 设置控制区域的高度为 20 像素 |
||||||
|
// fillerColor: 'rgba(255, 0, 0, 0.5)', // 设置选中区域的颜色为半透明的红色 |
||||||
|
// backgroundColor: 'rgba(0, 0, 0, 0.1)', // 设置背景颜色为透明度为 0.1 的黑色 |
||||||
|
start: 0, |
||||||
|
end: 100, |
||||||
|
xAxisIndex: [0], |
||||||
|
handleSize: "120%", // 设置滑块大小为默认大小的 120% |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
// { |
||||||
|
// name: "设备总用电量", |
||||||
|
// type: "line", |
||||||
|
// smooth: true, |
||||||
|
// // data: ["1", "2", "3"], |
||||||
|
// symbol: "circle", |
||||||
|
// // 拐点大小 |
||||||
|
// symbolSize: 8, |
||||||
|
// // 设置拐点颜色以及边框 |
||||||
|
// // itemStyle: { |
||||||
|
// // color: "#0184d5", |
||||||
|
// // borderColor: "rgba(221, 220, 107, .1)", |
||||||
|
// // borderWidth: 12 |
||||||
|
// // }, |
||||||
|
// // 开始不显示拐点， 鼠标经过显示 |
||||||
|
// showSymbol: false, |
||||||
|
// sampling: 'lttb',//降采样策略 |
||||||
|
// //折线颜色 |
||||||
|
// itemStyle: { |
||||||
|
// color: "#44a2ff", //折线点的颜色 |
||||||
|
// lineStyle: { |
||||||
|
// color: "#44a2ff", //折线的颜色 |
||||||
|
// }, |
||||||
|
// }, |
||||||
|
// areaStyle: { |
||||||
|
// color: { |
||||||
|
// //线性渐变 |
||||||
|
// type: "linear", |
||||||
|
// x: 0, |
||||||
|
// y: 0, |
||||||
|
// x2: 0, |
||||||
|
// y2: 1, |
||||||
|
// colorStops: [ |
||||||
|
// { |
||||||
|
// offset: 0, |
||||||
|
// color: "rgba(11, 117, 211, 1)", // 0% 处的颜色 |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// offset: 0.8, |
||||||
|
// color: "rgba(11, 117, 211,0.2)", // 100% 处的颜色 |
||||||
|
// }, |
||||||
|
// ], |
||||||
|
// // global: false, // 缺省为 false |
||||||
|
// }, |
||||||
|
// }, |
||||||
|
// }, |
||||||
|
], |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.chartInstance2.setOption(this.option2, true); |
||||||
|
}, |
||||||
|
screenAdapter2() { |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = this.$refs.analyse_ref.offsetWidth / 130; |
||||||
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||||
|
const adapterOption = { |
||||||
|
// x轴坐标字体大小 |
||||||
|
xAxis: { |
||||||
|
axisLabel: { |
||||||
|
fontSize: titleFontSize * 1.5, |
||||||
|
}, |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
axisLabel: { |
||||||
|
fontSize: titleFontSize * 1.5, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance2.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance2.resize(); |
||||||
|
}, |
||||||
|
// 请求数据 |
||||||
|
getChartsData() { |
||||||
|
this.chartInstance2.dispose(); |
||||||
|
this.initChart2(); |
||||||
|
homeCharts().then((res) => { |
||||||
|
console.log("图表数据查询返回", res); |
||||||
|
if (res.code == 200) { |
||||||
|
this.allDataObj = res.rows; |
||||||
|
console.log("全部的数据", this.allDataObj); |
||||||
|
// 首次加载页面时，显示瞬时冷量 |
||||||
|
this.handleEnter(this.timeIndex2); |
||||||
|
} else { |
||||||
|
this.chartsAeries = []; |
||||||
|
const adapterOption = { |
||||||
|
xAxis: { |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
series: [], |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance2.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance2.resize(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 定时器 |
||||||
|
move() { |
||||||
|
// 定时器 |
||||||
|
this.timer = setInterval(() => { |
||||||
|
this.handleEnter((this.timeIndex2 + 1) % 4); |
||||||
|
}, 1000 * 5 * 60); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.home-chart { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
overflow: hidden; |
||||||
|
cursor: pointer; |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.legend-li { |
||||||
|
text-align: center; |
||||||
|
font-size: 0.2rem; |
||||||
|
color: #95adc8; |
||||||
|
padding: 0.08rem 0.2rem; |
||||||
|
white-space: nowrap; |
||||||
|
margin-right: 0.3rem; |
||||||
|
border: 1px solid #0076c1; |
||||||
|
border-radius: 0.06rem; |
||||||
|
} |
||||||
|
|
||||||
|
.home-chart-right { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
|
||||||
|
.imgDiv { |
||||||
|
width: 0.35rem; |
||||||
|
height: 0.35rem; |
||||||
|
margin: 0.05rem; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.choice-icon { |
||||||
|
width: 0.2rem; |
||||||
|
height: 0.2rem; |
||||||
|
} |
||||||
|
|
||||||
|
.imgStyle { |
||||||
|
background-color: #0076c1; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.charts-div { |
||||||
|
margin-top: 0.3rem; |
||||||
|
width: 100%; |
||||||
|
height: 3.6rem; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,144 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="card-div"> |
|
||||||
<!-- 二通阀 --> |
|
||||||
<div class="card-li"> |
|
||||||
<div class="card-header"> |
|
||||||
<h2 class="card-title">二通阀开度:</h2> |
|
||||||
</div> |
|
||||||
<div class="thermometer"> |
|
||||||
<div class="temprogress" :style="{ width: twoValveValue + '%' }"></div> |
|
||||||
</div> |
|
||||||
<div class="temperature"> |
|
||||||
<span |
|
||||||
v-if="twoValveItem && twoValveItem.status === 1" |
|
||||||
class="error-text" |
|
||||||
>异常</span |
|
||||||
> |
|
||||||
<span v-else>{{ twoValveValue }}%</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<!-- 三通阀 --> |
|
||||||
<div class="card-li"> |
|
||||||
<div class="card-header"> |
|
||||||
<h2 class="card-title">三通阀开度:</h2> |
|
||||||
</div> |
|
||||||
<div class="thermometer"> |
|
||||||
<div |
|
||||||
class="temprogress" |
|
||||||
:style="{ width: threeValveValue + '%' }" |
|
||||||
></div> |
|
||||||
</div> |
|
||||||
<div class="temperature"> |
|
||||||
<span |
|
||||||
v-if="threeValveItem && threeValveItem.status === 1" |
|
||||||
class="error-text" |
|
||||||
>异常</span |
|
||||||
> |
|
||||||
<span v-else>{{ threeValveValue }}%</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
props: { |
|
||||||
subData: { |
|
||||||
type: Array, |
|
||||||
required: true, |
|
||||||
}, |
|
||||||
}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
temData1: "", |
|
||||||
temData2: "", |
|
||||||
temData: [], |
|
||||||
}; |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
// 获取二通阀数据 |
|
||||||
twoValveItem() { |
|
||||||
return this.subData.find( |
|
||||||
(item) => item.deviceTypeName === "二通阀阀门开度" |
|
||||||
); |
|
||||||
}, |
|
||||||
|
|
||||||
// 获取三通阀数据 |
|
||||||
threeValveItem() { |
|
||||||
return this.subData.find( |
|
||||||
(item) => item.deviceTypeName === "三通阀阀门开度" |
|
||||||
); |
|
||||||
}, |
|
||||||
|
|
||||||
// 二通阀开度值 |
|
||||||
twoValveValue() { |
|
||||||
if (!this.twoValveItem || this.twoValveItem.status === 1) return 0; |
|
||||||
// 确保值在 0-100 范围内 |
|
||||||
const value = parseFloat(this.twoValveItem.curValue) || 0; |
|
||||||
return Math.min(Math.max(value, 0), 100); |
|
||||||
}, |
|
||||||
|
|
||||||
// 三通阀开度值 |
|
||||||
threeValveValue() { |
|
||||||
if (!this.threeValveItem || this.threeValveItem.status === 1) return 0; |
|
||||||
// 确保值在 0-100 范围内 |
|
||||||
const value = parseFloat(this.threeValveItem.curValue) || 0; |
|
||||||
return Math.min(Math.max(value, 0), 100); |
|
||||||
}, |
|
||||||
}, |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.card-div { |
|
||||||
width: 100%; |
|
||||||
padding: 20px; |
|
||||||
.card-li { |
|
||||||
width: 100%; |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
margin: 10px; |
|
||||||
.card-header { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
align-items: center; |
|
||||||
.card-title { |
|
||||||
font-size: 15px; |
|
||||||
font-weight: 600; |
|
||||||
color: #ffffff; |
|
||||||
} |
|
||||||
} |
|
||||||
.temperature { |
|
||||||
font-size: 20px; |
|
||||||
font-weight: 700; |
|
||||||
color: #2ecc71; |
|
||||||
position: relative; |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
.thermometer { |
|
||||||
width: calc(100% - 250px); |
|
||||||
min-width: 200px; |
|
||||||
height: 15px; |
|
||||||
background: #3d5581; |
|
||||||
border-radius: 20px; |
|
||||||
margin: 0 0.1rem; |
|
||||||
overflow: hidden; |
|
||||||
box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.1); |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
.temprogress { |
|
||||||
position: absolute; |
|
||||||
left: 0; |
|
||||||
height: 100%; |
|
||||||
border-top-right-radius: 15px; |
|
||||||
border-bottom-right-radius: 15px; |
|
||||||
background: linear-gradient(to right, #3498db, #2ecc71) !important; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@media (min-width: 2000px) { |
|
||||||
} |
|
||||||
</style> |
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,514 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="energy_content"> |
|
||||||
<div class="sys_charts" ref="sys_charts"></div> |
|
||||||
<div class="eer">{{ title }}</div> |
|
||||||
<div class="bad" v-if="subData.status === 1">异常</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import * as echarts from "echarts"; |
|
||||||
export default { |
|
||||||
props: { |
|
||||||
subData: { |
|
||||||
type: Object, |
|
||||||
required: true, |
|
||||||
}, |
|
||||||
title: "", |
|
||||||
}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
chartInstance: null, |
|
||||||
option: {}, |
|
||||||
useForm: { |
|
||||||
useData: 5, |
|
||||||
maxData: 10, //最大的刻度值 |
|
||||||
}, |
|
||||||
}; |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
subData: { |
|
||||||
immediate: true, // 页面加载时立即触发一次监听 |
|
||||||
handler(newVal) { |
|
||||||
// console.log("检测到传功来的数据", this.subData); |
|
||||||
if (Object.keys(newVal).length > 0) { |
|
||||||
console.log("newval", newVal); |
|
||||||
this.$nextTick(() => { |
|
||||||
this.initChart(); |
|
||||||
}); |
|
||||||
} |
|
||||||
}, |
|
||||||
}, |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
this.initChart(); |
|
||||||
this.screenAdapter(); |
|
||||||
window.addEventListener("resize", this.screenAdapter); |
|
||||||
}, |
|
||||||
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() { |
|
||||||
this.chartInstance = echarts.init(this.$refs.sys_charts); |
|
||||||
var dataArr = this.subData.curValue; //值 |
|
||||||
var maxData = 10; //最大值 |
|
||||||
this.option = { |
|
||||||
// backgroundColor: "#0E1327", |
|
||||||
tooltip: { |
|
||||||
formatter: "{a} <br/>{b} : {c}%", |
|
||||||
}, |
|
||||||
|
|
||||||
series: [ |
|
||||||
{ |
|
||||||
name: "外部线", |
|
||||||
type: "gauge", |
|
||||||
radius: "100%", // 动态 |
|
||||||
startAngle: 225, |
|
||||||
endAngle: -45, |
|
||||||
axisLine: { |
|
||||||
lineStyle: { |
|
||||||
color: [ |
|
||||||
[1, "#31F3FF"], // 动态 |
|
||||||
], |
|
||||||
width: 1, |
|
||||||
}, |
|
||||||
}, |
|
||||||
axisLabel: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
axisTick: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
splitLine: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
detail: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
title: { |
|
||||||
//标题 |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "外部刻度", |
|
||||||
type: "gauge", |
|
||||||
radius: "100%", |
|
||||||
min: 0, //最小刻度 |
|
||||||
max: maxData, //最大刻度 |
|
||||||
splitNumber: 10, //刻度数量 |
|
||||||
startAngle: 225, |
|
||||||
endAngle: -45, |
|
||||||
axisLine: { |
|
||||||
show: false, |
|
||||||
lineStyle: { |
|
||||||
color: [[1, "rgba(0,0,0,0)"]], |
|
||||||
}, |
|
||||||
}, //仪表盘轴线 |
|
||||||
axisLabel: { |
|
||||||
show: true, |
|
||||||
color: "#31F3FF", |
|
||||||
fontSize: 9, // 动态 |
|
||||||
distance: -15, // 动态 |
|
||||||
}, //刻度标签。 |
|
||||||
axisTick: { |
|
||||||
show: false, |
|
||||||
}, //刻度样式 |
|
||||||
splitLine: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "内部宽线条", |
|
||||||
type: "gauge", |
|
||||||
radius: "77%", |
|
||||||
startAngle: 225, |
|
||||||
endAngle: -45, |
|
||||||
axisLine: { |
|
||||||
lineStyle: { |
|
||||||
color: [[1, "#122B3C"]], |
|
||||||
width: 20, |
|
||||||
}, |
|
||||||
}, |
|
||||||
axisLabel: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
axisTick: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
splitLine: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
detail: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
title: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "内部细线条", |
|
||||||
type: "gauge", |
|
||||||
radius: "43%", |
|
||||||
startAngle: 225, |
|
||||||
endAngle: -45, |
|
||||||
axisLine: { |
|
||||||
lineStyle: { |
|
||||||
color: [[1, "#385264"]], |
|
||||||
width: 1, |
|
||||||
}, |
|
||||||
}, |
|
||||||
axisLabel: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
axisTick: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
splitLine: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
detail: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
title: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "间隔条形", |
|
||||||
type: "gauge", |
|
||||||
radius: "98%", |
|
||||||
z: 4, |
|
||||||
splitNumber: 20, //多少段间隔 |
|
||||||
startAngle: 225, |
|
||||||
endAngle: -45, |
|
||||||
axisLine: { |
|
||||||
lineStyle: { |
|
||||||
opacity: 0, |
|
||||||
}, |
|
||||||
}, |
|
||||||
axisLabel: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
axisTick: { |
|
||||||
show: true, |
|
||||||
length: 10, |
|
||||||
splitNumber: 1, |
|
||||||
lineStyle: { |
|
||||||
color: "#122B3C", |
|
||||||
width: 0.5, |
|
||||||
}, |
|
||||||
}, |
|
||||||
splitLine: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
detail: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
title: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "数据", |
|
||||||
type: "gauge", |
|
||||||
radius: "70.5%", |
|
||||||
z: 3, |
|
||||||
startAngle: 225, |
|
||||||
max: maxData, |
|
||||||
endAngle: -45, |
|
||||||
axisLine: { |
|
||||||
lineStyle: { |
|
||||||
color: [ |
|
||||||
[dataArr / maxData, "#31F3FF"], // 动态 |
|
||||||
[1, "#16414D"], //未达到区域颜色-变暗 |
|
||||||
], |
|
||||||
width: 10, |
|
||||||
}, |
|
||||||
}, |
|
||||||
tooltip: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
axisLabel: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
axisTick: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
splitLine: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
detail: { |
|
||||||
show: true, |
|
||||||
fontWeight: "bold", |
|
||||||
fontSize: 18, |
|
||||||
offsetCenter: [0, "60%"], // 文字位置偏移 |
|
||||||
color: "#31F3FF", |
|
||||||
}, |
|
||||||
pointer: { |
|
||||||
show: true, |
|
||||||
length: "75%", // 指针长度，可以是百分比或像素值 |
|
||||||
width: 2, // 指针宽度 |
|
||||||
itemStyle: { |
|
||||||
color: "#31F3FF", // 指针颜色 |
|
||||||
borderWidth: 0, |
|
||||||
shadowColor: "rgba(255, 107, 53, 0.5)", // 阴影颜色 |
|
||||||
shadowBlur: 10, // 阴影模糊大小 |
|
||||||
}, |
|
||||||
}, |
|
||||||
data: [ |
|
||||||
{ |
|
||||||
name: "", |
|
||||||
value: dataArr, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
// 内圆-指针外圈阴影 |
|
||||||
{ |
|
||||||
name: "内圆环", |
|
||||||
type: "pie", |
|
||||||
radius: "10%", |
|
||||||
hoverAnimation: false, |
|
||||||
tooltip: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
cursor: "default", |
|
||||||
labelLine: { |
|
||||||
normal: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
}, |
|
||||||
itemStyle: { |
|
||||||
color: "#08ACDF", |
|
||||||
}, |
|
||||||
animation: false, |
|
||||||
data: [1], |
|
||||||
}, |
|
||||||
// 内圆-指针圆圈 |
|
||||||
{ |
|
||||||
name: "内圆环2", |
|
||||||
type: "pie", |
|
||||||
radius: "5%", |
|
||||||
hoverAnimation: false, |
|
||||||
cursor: "default", |
|
||||||
tooltip: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
labelLine: { |
|
||||||
normal: { |
|
||||||
show: false, |
|
||||||
}, |
|
||||||
}, |
|
||||||
itemStyle: { |
|
||||||
color: "#31F3FF", |
|
||||||
}, |
|
||||||
animation: false, |
|
||||||
data: [1], |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
||||||
//把配置项给实例对象 |
|
||||||
this.chartInstance.setOption(this.option, true); |
|
||||||
}, |
|
||||||
screenAdapter() { |
|
||||||
const titleFontSize = this.$refs.sys_charts.offsetWidth / 18; |
|
||||||
const adapterOption = { |
|
||||||
series: [], |
|
||||||
}; |
|
||||||
this.chartInstance.setOption(adapterOption); |
|
||||||
this.chartInstance.resize(); |
|
||||||
}, |
|
||||||
// 请求的数据 |
|
||||||
echartsData() { |
|
||||||
if (this.subData.length > 0) { |
|
||||||
this.useForm.maxData = 10; |
|
||||||
this.useForm.useData = this.subData[0].value; |
|
||||||
let that = this; |
|
||||||
// 使用配置函数 |
|
||||||
const axisLineColor = this.getAxisLineColor( |
|
||||||
this.useForm.useData, |
|
||||||
this.useForm.maxData |
|
||||||
); |
|
||||||
const titleFontSize = this.$refs.sys_charts.offsetWidth / 20; |
|
||||||
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, -titleFontSize * 0.6], // 向上偏移 10 个单位 |
|
||||||
// formatter: function () { |
|
||||||
// // 返回 HTML 标签，使用 rich 里定义的样式 |
|
||||||
// return `{line|${that.useForm.useData}}`; |
|
||||||
// }, |
|
||||||
// rich: { |
|
||||||
// line: { |
|
||||||
// color: "#fff", // 第二行文字颜色 |
|
||||||
// fontSize: titleFontSize, // 第二行文字大小 |
|
||||||
// lineHeight: 5, // 行高，实现间距 |
|
||||||
// }, |
|
||||||
// }, |
|
||||||
// }, |
|
||||||
// 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: 150px; |
|
||||||
} |
|
||||||
.eer { |
|
||||||
font-size: 18px; |
|
||||||
} |
|
||||||
} |
|
||||||
.bad { |
|
||||||
font-size: 18px; |
|
||||||
margin-top: 5px; |
|
||||||
color: red; |
|
||||||
// animation: colorBlink 1s infinite; |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes colorBlink { |
|
||||||
0%, |
|
||||||
100% { |
|
||||||
color: #ff0000; |
|
||||||
} /* 亮红 */ |
|
||||||
50% { |
|
||||||
color: #cc0000; |
|
||||||
} /* 暗红 */ |
|
||||||
} |
|
||||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
|
||||||
@media (min-width: 2000px) { |
|
||||||
.sys_charts { |
|
||||||
height: 1.5rem !important; |
|
||||||
} |
|
||||||
.eer { |
|
||||||
font-size: 0.18rem !important; |
|
||||||
margin-top: 0.25rem !important; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue