xzzn/emsfront
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实时运行图标更新

Browse Source
This commit is contained in:
baicai
2025-09-27 14:50:20 +08:00
parent 408ba489ca
commit b421d11bc2
5 changed files with 293 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/ems/dzjk.js
View File

@ -146,10 +146,10 @@ export function storagePower(siteId) {
method: 'get' method: 'get'
}) })
} }
//poc平均温度 //poc温度
export function stackAveTemp(siteId) { export function pcsMaxTemp(siteId) {
return request({ return request({
url: `/ems/siteMonitor/runningGraph/stackAveTemp?siteId=${siteId}`, url: `/ems/siteMonitor/runningGraph/pcsMaxTemp?siteId=${siteId}`,
method: 'get' method: 'get'
}) })
} }

150
src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue
View File

@ -1,107 +1,125 @@
<template> <template>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding"> <el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding"
>
<div slot="header"> <div slot="header">
<span class="card-title">储能功率曲线</span> <span class="card-title">PCS有功功率/PCS无功功率</span>
</div> </div>
<div style="height: 360px" id="cnglqxChart"/> <div style="height: 360px" id="cnglqxChart" />
</el-card> </el-card>
</template> </template>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>
<script> <script>
import * as echarts from 'echarts' import * as echarts from "echarts";
import resize from '@/mixins/ems/resize' import resize from "@/mixins/ems/resize";
import {formatDate} from "@/filters/ems"; import { formatDate } from "@/filters/ems";
import {storagePower} from '@/api/ems/dzjk' import { storagePower } from "@/api/ems/dzjk";
export default { export default {
mixins: [resize], mixins: [resize],
data() { data() {
return { return {
chart: null chart: null,
} };
}, },
mounted() { mounted() {
this.chart = echarts.init(document.querySelector('#cnglqxChart')) this.chart = echarts.init(document.querySelector("#cnglqxChart"));
}, },
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return return;
} }
this.chart.dispose() this.chart.dispose();
this.chart = null this.chart = null;
}, },
methods: { methods: {
init(siteId){ init(siteId) {
this.chart.showLoading() this.chart.showLoading();
const x = [] const x = [];
const data1 =[],data2 =[] const data1 = [],
storagePower(siteId).then(response => { data2 = [];
const source = response?.data?.energyStoragePowList || [] storagePower(siteId)
source.forEach(item=>{ .then((response) => {
x.push(formatDate(item.createDate,false,true)) this.setOption(response?.data?.pcsPowerList || []);
data1.push(item.pcsTotalActPower)
data2.push(item.pcsTotalReactivePower)
}) })
this.setOption(x,data1,data2) .finally(() => {
}).finally(()=>{ this.chart.hideLoading();
this.chart.hideLoading() });
})
}, },
setOption(x,data1,data2) { setOption(data) {
// data=[{deviceId:'pcs1',energyStoragePowList:[{createDate,deviceId,pcsTotalActPower,pcsTotalReactivePower}]}]
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) => i.pcsTotalActPower
),
},
{
type: "line",
name: `${element.deviceId}无功功率`,
areaStyle: {
// color:'#FFBD00'
},
data: (element.energyStoragePowList || []).map(
(i) => i.pcsTotalReactivePower
),
}
);
});
this.chart.setOption({ this.chart.setOption({
color:['#FFBD00','#3C81FF'],
legend: { legend: {
left: 'center', left: "center",
top: '10', top: "5",
itemWidth: 10,
itemHeight: 5,
textStyle: {
fontSize: 9,
},
}, },
grid: { grid: {
containLabel: true containLabel: true,
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { // 坐标轴指示器，坐标轴触发有效 axisPointer: {
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' // 坐标轴指示器，坐标轴触发有效
} type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
}, },
textStyle:{ textStyle: {
color:"#333333", color: "#333333",
}, },
xAxis: {type:'category',data:x}, xAxis: { type: "category", data: xdata },
yAxis: { yAxis: {
type: 'value', type: "value",
}, },
dataZoom: [ dataZoom: [
{ {
type: 'inside', type: "inside",
start: 0, start: 0,
end: 100 end: 100,
}, },
{ {
start: 0, start: 0,
end: 100 end: 100,
} },
], ],
series: [ series,
{ });
name:'PCS实时有功功率', },
type: 'line', },
areaStyle: { };
color:'#FFBD00'
},
data: data1,
},{
name:'PCS实时无功功率',
type: 'line',
areaStyle: {
color: '#3C81FF'
},
data: data2
}]
})
}
}
}
</script> </script>

127
src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue
View File

@ -1,99 +1,106 @@
<template> <template>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding"> <el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding"
>
<div slot="header"> <div slot="header">
<span class="card-title">电池平均SOC</span> <span class="card-title">平均SOC</span>
</div> </div>
<div style="height: 360px" id="dcpjsocChart"/> <div style="height: 360px" id="dcpjsocChart" />
</el-card> </el-card>
</template> </template>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>
<script> <script>
import * as echarts from 'echarts' import * as echarts from "echarts";
import resize from '@/mixins/ems/resize' import resize from "@/mixins/ems/resize";
import {formatDate} from "@/filters/ems"; import { formatDate } from "@/filters/ems";
import {batteryAveSoc} from '@/api/ems/dzjk' import { batteryAveSoc } from "@/api/ems/dzjk";
export default { export default {
mixins: [resize], mixins: [resize],
data() { data() {
return { return {
chart: null chart: null,
} };
}, },
mounted() { mounted() {
this.chart = echarts.init(document.querySelector('#dcpjsocChart')) this.chart = echarts.init(document.querySelector("#dcpjsocChart"));
}, },
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return return;
} }
this.chart.dispose() this.chart.dispose();
this.chart = null this.chart = null;
}, },
methods: { methods: {
init(siteId){ init(siteId) {
this.chart.showLoading() this.chart.showLoading();
const x = [] batteryAveSoc(siteId)
const data =[] .then((response) => {
batteryAveSoc(siteId).then(response => { this.setOption(response?.data?.batteryAveSOCList || []);
const source = response?.data?.batteryAveSOCList || []
source.forEach(item=>{
x.push(formatDate(item.createDate,false,true))
data.push(item.batterySOC)
}) })
this.setOption(x,data) .finally(() => {
}).finally(()=>{ this.chart.hideLoading();
this.chart.hideLoading() });
})
}, },
setOption(x,data) { setOption(data) {
this.chart.setOption({ let xdata = [],
color:['#FFBD00','#3C81FF'], ydata = [];
// legend: { data.forEach((element) => {
// left: 'center', xdata.push(element.createDate);
// bottom: '10', ydata.push(element.batterySOC);
// }, });
tooltip: { xdata = this.chart.setOption({
trigger: 'axis', legend: {
axisPointer: { // 坐标轴指示器，坐标轴触发有效 left: "center",
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' top: "5",
} itemWidth: 10,
itemHeight: 5,
textStyle: {
fontSize: 9,
},
}, },
grid: { grid: {
containLabel: true containLabel: true,
}, },
textStyle:{ tooltip: {
color:"#333333", trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
}, },
xAxis: {type:'category',data:x}, textStyle: {
color: "#333333",
},
xAxis: { type: "category", data: xdata },
yAxis: { yAxis: {
type: 'value', type: "value",
}, },
dataZoom: [ dataZoom: [
{ {
type: 'inside', type: "inside",
start: 0, start: 0,
end: 100 end: 100,
}, },
{ {
start: 0, start: 0,
end: 100 end: 100,
} },
], ],
series: [ series: [
{ {
name:'电池平均SOC', type: "line",
data: data, name: `平均SOC`,
type: 'line',
areaStyle: { areaStyle: {
color:'#FFBD00' // color:'#FFBD00'
} },
data: ydata,
}] },
}) ],
} });
} },
} },
};
</script> </script>

125
src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue
View File

@ -1,99 +1,110 @@
<template> <template>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding"> <el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding"
>
<div slot="header"> <div slot="header">
<span class="card-title">电池平均温度</span> <span class="card-title">电池平均温度</span>
</div> </div>
<div style="height: 360px" id="dcpjwdChart"/> <div style="height: 360px" id="dcpjwdChart" />
</el-card> </el-card>
</template> </template>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>
<script> <script>
import * as echarts from 'echarts' import * as echarts from "echarts";
import resize from '@/mixins/ems/resize' import resize from "@/mixins/ems/resize";
import {formatDate} from "@/filters/ems"; import { formatDate } from "@/filters/ems";
import {batteryAveTemp} from '@/api/ems/dzjk' import { batteryAveTemp } from "@/api/ems/dzjk";
export default { export default {
mixins: [resize], mixins: [resize],
data() { data() {
return { return {
chart: null chart: null,
} };
}, },
mounted() { mounted() {
this.chart = echarts.init(document.querySelector('#dcpjwdChart')) this.chart = echarts.init(document.querySelector("#dcpjwdChart"));
}, },
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return return;
} }
this.chart.dispose() this.chart.dispose();
this.chart = null this.chart = null;
}, },
methods: { methods: {
init(siteId){ init(siteId) {
this.chart.showLoading() this.chart.showLoading();
const x = [] const x = [];
const data1 =[],data2 =[] const data1 = [],
batteryAveTemp(siteId).then(response => { data2 = [];
const source = response?.data?.batteryAveTempList || [] batteryAveTemp(siteId)
source.forEach(item=>{ .then((response) => {
x.push(formatDate(item.createDate,false,true)) this.setOption(response?.data?.batteryAveTempList || []);
data1.push(item.batteryTemp)
}) })
this.setOption(x,data1,data2) .finally(() => {
}).finally(()=>{ this.chart.hideLoading();
this.chart.hideLoading() });
})
}, },
setOption(x,data) { setOption(data) {
this.chart.setOption({ let xdata = [],
color:['#3C81FF'], ydata = [];
// legend: { data.forEach((element) => {
// left: 'center', xdata.push(element.createDate);
// bottom: '10', ydata.push(element.batteryTemp);
// }, });
tooltip: { xdata = this.chart.setOption({
trigger: 'axis', legend: {
axisPointer: { // 坐标轴指示器，坐标轴触发有效 left: "center",
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' top: "5",
} itemWidth: 10,
itemHeight: 5,
textStyle: {
fontSize: 9,
},
}, },
grid: { grid: {
containLabel: true containLabel: true,
}, },
textStyle:{ tooltip: {
color:"#333333", trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
}, },
xAxis: {type:'category',data:x}, textStyle: {
color: "#333333",
},
xAxis: { type: "category", data: xdata },
yAxis: { yAxis: {
type: 'value', type: "value",
}, },
dataZoom: [ dataZoom: [
{ {
type: 'inside', type: "inside",
start: 0, start: 0,
end: 100 end: 100,
}, },
{ {
start: 0, start: 0,
end: 100 end: 100,
} },
], ],
series: [ series: [
{ {
name:'电池平均温度', type: "line",
data: data, name: `电池平均温度`,
type: 'line',
areaStyle: { areaStyle: {
color:'#3C81FF' // color:'#FFBD00'
}, },
}] data: ydata,
}) },
} ],
} });
} },
},
};
</script> </script>

129
src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue
View File

@ -1,96 +1,109 @@
<template> <template>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding"> <el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding"
>
<div slot="header"> <div slot="header">
<span class="card-title">PCS平均温度</span> <span class="card-title">PCS最高温度</span>
</div> </div>
<div style="height: 360px" id="pocpjwdChart"/> <div style="height: 360px" id="pocpjwdChart" />
</el-card> </el-card>
</template> </template>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>
<script> <script>
import * as echarts from 'echarts' import * as echarts from "echarts";
import resize from '@/mixins/ems/resize' import resize from "@/mixins/ems/resize";
import {formatDate} from "@/filters/ems"; import { formatDate } from "@/filters/ems";
import {stackAveTemp} from '@/api/ems/dzjk' import { pcsMaxTemp } from "@/api/ems/dzjk";
export default { export default {
mixins: [resize], mixins: [resize],
data() { data() {
return { return {
chart: null chart: null,
} };
}, },
mounted() { mounted() {
this.chart = echarts.init(document.querySelector('#pocpjwdChart')) this.chart = echarts.init(document.querySelector("#pocpjwdChart"));
}, },
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return return;
} }
this.chart.dispose() this.chart.dispose();
this.chart = null this.chart = null;
}, },
methods: { methods: {
init(siteId){ init(siteId) {
this.chart.showLoading() this.chart.showLoading();
const x = [] const x = [];
const data =[] const data = [];
stackAveTemp(siteId).then(response => { pcsMaxTemp(siteId)
const source = response?.data?.stackAveTempList || [] .then((response) => {
source.forEach(item=>{ this.setOption(response?.data?.pcsMaxTempList || []);
x.push(formatDate(item.createDate,false,true))
data.push(item.temp)
}) })
this.setOption(x,data) .finally(() => {
}).finally(()=>{ this.chart.hideLoading();
this.chart.hideLoading() });
})
}, },
setOption(x,data) { 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) => i.temp),
});
});
this.chart.setOption({ this.chart.setOption({
color:['#FFBD00','#3C81FF'], legend: {
tooltip: { left: "center",
trigger: 'axis', top: "5",
axisPointer: { // 坐标轴指示器，坐标轴触发有效 itemWidth: 10,
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' itemHeight: 5,
} textStyle: {
fontSize: 9,
},
}, },
grid: { grid: {
containLabel: true containLabel: true,
}, },
textStyle:{ tooltip: {
color:"#333333", trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
}, },
xAxis: {type:'category',data:x}, textStyle: {
color: "#333333",
},
xAxis: { type: "category", data: xdata },
yAxis: { yAxis: {
type: 'value', type: "value",
}, },
dataZoom: [ dataZoom: [
{ {
type: 'inside', type: "inside",
start: 0, start: 0,
end: 100 end: 100,
}, },
{ {
start: 0, start: 0,
end: 100 end: 100,
} },
], ],
series: [ series,
{ });
name:'PCS平均温度', },
data: data, },
type: 'line', };
areaStyle: {
color:'#FFBD00'
}
}]
})
}
}
}
</script> </script>