145 lines
3.9 KiB
Vue
145 lines
3.9 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有功功率/PCS无功功率</span>
|
|
</div>
|
|
<div style="height: 360px" id="cnglqxChart"/>
|
|
</el-card>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
import resize from "@/mixins/ems/resize";
|
|
import {storagePower} from "@/api/ems/dzjk";
|
|
|
|
export default {
|
|
mixins: [resize],
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.chart = echarts.init(document.querySelector("#cnglqxChart"));
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return;
|
|
}
|
|
this.chart.dispose();
|
|
this.chart = null;
|
|
},
|
|
methods: {
|
|
init(siteId, timeRange) {
|
|
this.chart.showLoading();
|
|
const [startTime = '', endTime = ''] = timeRange;
|
|
storagePower(siteId, startTime, endTime)
|
|
.then((response) => {
|
|
this.setOption(response?.data?.pcsPowerList || []);
|
|
})
|
|
.finally(() => {
|
|
this.chart.hideLoading();
|
|
});
|
|
},
|
|
setOption(data) {
|
|
let xdata = [],
|
|
series = [];
|
|
data.forEach((element, index) => {
|
|
if (index === 0) {
|
|
xdata = (element.energyStoragePowList || []).map((i) => i.createDate);
|
|
}
|
|
series.push(
|
|
{
|
|
type: "line",
|
|
name: `${element.deviceId}有功功率`,
|
|
areaStyle: {
|
|
// color:'#FFBD00'
|
|
},
|
|
data: (element.energyStoragePowList || []).map(
|
|
(i) => {
|
|
return {
|
|
value: i.pcsTotalActPower,
|
|
year: i.dateDay || ''
|
|
}
|
|
}
|
|
)
|
|
},
|
|
{
|
|
type: "line",
|
|
name: `${element.deviceId}无功功率`,
|
|
areaStyle: {
|
|
// color:'#FFBD00'
|
|
},
|
|
data: (element.energyStoragePowList || []).map(
|
|
(i) => {
|
|
return {
|
|
value: i.pcsTotalReactivePower,
|
|
year: i.dateDay || ''
|
|
}
|
|
}
|
|
),
|
|
}
|
|
);
|
|
});
|
|
this.chart && 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,
|
|
}, true);
|
|
},
|
|
},
|
|
};
|
|
</script>
|