126 lines
3.2 KiB
Vue
126 lines
3.2 KiB
Vue
<template>
|
|
<el-card
|
|
shadow="always"
|
|
class="common-card-container common-card-container-body-no-padding"
|
|
>
|
|
<div slot="header">
|
|
<span class="card-title">PCS最高温度</span>
|
|
</div>
|
|
<div style="height: 360px" id="pocpjwdChart" />
|
|
</el-card>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
import resize from "@/mixins/ems/resize";
|
|
import { pcsMaxTemp } from "@/api/ems/dzjk";
|
|
|
|
export default {
|
|
mixins: [resize],
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.chart = echarts.init(document.querySelector("#pocpjwdChart"));
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return;
|
|
}
|
|
this.chart.dispose();
|
|
this.chart = null;
|
|
},
|
|
methods: {
|
|
init(siteId,timeRange) {
|
|
this.chart.showLoading();
|
|
const [startTime='', endTime=''] = timeRange;
|
|
pcsMaxTemp(siteId,startTime,endTime)
|
|
.then((response) => {
|
|
this.setOption(response?.data?.pcsMaxTempList || []);
|
|
})
|
|
.finally(() => {
|
|
this.chart.hideLoading();
|
|
});
|
|
},
|
|
setOption(data) {
|
|
let xdata = [],
|
|
series = [];
|
|
data.forEach((element, index) => {
|
|
if (index === 0) {
|
|
xdata = (element.maxTempVoList || []).map((i) => i.createDate);
|
|
}
|
|
series.push({
|
|
type: "line",
|
|
name: `${element.deviceId}最高温度`,
|
|
areaStyle: {
|
|
// color:'#FFBD00'
|
|
},
|
|
data: (element.maxTempVoList || []).map((i) => {
|
|
return {
|
|
value: i.temp,
|
|
year: i.dateDay
|
|
}
|
|
}),
|
|
});
|
|
});
|
|
this.chart.setOption({
|
|
legend: {
|
|
left: "center",
|
|
top: "5",
|
|
itemWidth: 10,
|
|
itemHeight: 5,
|
|
textStyle: {
|
|
fontSize: 9,
|
|
},
|
|
},
|
|
grid: {
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
show:true,
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
formatter :(params)=>{
|
|
if(params.length <= 0) return
|
|
let result = (params[0].data.year || '')+' '+params[0].name + '<div>'
|
|
params.forEach(item=>{
|
|
const {color,seriesName,value} = item
|
|
result += `<div style="position: relative;padding-left:20px;line-height: 20px;">
|
|
<div style="position: absolute;top:50%;left:0;width:12px;height:12px;border-radius:100%;background: ${color};transform: translateY(-50%)"></div>
|
|
<span>${seriesName}</span><span style="margin-left:20px;font-weight: 700">${value}</span></div>`
|
|
})
|
|
result+='</div>'
|
|
return result
|
|
}
|
|
},
|
|
textStyle: {
|
|
color: "#333333",
|
|
},
|
|
xAxis: { type: "category", data: xdata },
|
|
yAxis: {
|
|
type: "value",
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: "inside",
|
|
start: 0,
|
|
end: 100,
|
|
},
|
|
{
|
|
start: 0,
|
|
end: 100,
|
|
},
|
|
],
|
|
series,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|