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> |
||||
@ -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