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

db接口参数更新，实时运行接口联调

Browse Source
This commit is contained in:
白菜
2025-07-07 22:10:25 +08:00
parent 21a8871e3c
commit 6523e061bd
10 changed files with 245 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -92,3 +92,33 @@ export function getElectricData({siteId,startDate,endDate}) {
method: 'get'
})
}
// 实时运行
//储能
export function storagePower(siteId) {
return request({
url: `/ems/siteMonitor/runningGraph/storagePower?siteId=${siteId}`,
method: 'get'
})
}
//poc平均温度
export function stackAveTemp(siteId) {
return request({
url: `/ems/siteMonitor/runningGraph/stackAveTemp?siteId=${siteId}`,
method: 'get'
})
}
// 电池平均soc
export function batteryAveSoc(siteId) {
return request({
url: `/ems/siteMonitor/runningGraph/batteryAveSoc?siteId=${siteId}`,
method: 'get'
})
}
// 电池平均温度
export function batteryAveTemp(siteId) {
return request({
url: `/ems/siteMonitor/runningGraph/batteryAveTemp?siteId=${siteId}`,
method: 'get'
})
}

15
src/filters/ems.js
View File

@ -6,14 +6,19 @@ export const formatNumber = (val) => {
}
export const formatDate = (val,toSeconds = false) => {
export const formatDate = (val,toSeconds = false,onlyTime=false) => {
if(!val) return ''
const date = new Date(val)
const month = date.getMonth() + 1,day = date.getDate()
const hours = date.getHours(),minuets=date.getMinutes(),seconds = date.getSeconds();
const front = `${date.getFullYear()}-${month<10?'0'+month : month}-${day<10 ? '0'+day : day}`
const back = `${hours<10 ? '0'+hours : hours}:${minuets<10 ? '0'+minuets : minuets}:${seconds<10 ? '0'+seconds : seconds}`
if(onlyTime) return back
if(!toSeconds){
return `${date.getFullYear()}-${month<10?'0'+month : month}-${day<10 ? '0'+day : day}`
}else{
const hours = date.getHours(),minuets=date.getMinutes(),seconds = date.getSeconds();
return `${date.getFullYear()}-${month<10?'0'+month : month}-${day<10 ? '0'+day : day} ${hours<10 ? '0'+hours : hours}:${minuets<10 ? '0'+minuets : minuets}:${seconds<10 ? '0'+seconds : seconds}`
return front
} else{
return front +''+back
}
}

2
src/utils/request.js
View File

@ -17,7 +17,7 @@ const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 10000
timeout: 60000
})
// request拦截器

36
src/views/ems/dzjk/sbjk/db/index.vue
View File

@ -3,7 +3,7 @@
<div v-loading="loading">
<el-card shadow="always" class="common-card-container" :class="zbInfo.emsCommunicationStatus === '1' ? 'zb-common-card-container' : 'cnb-common-card-container'">
<div slot="header">
<span class="large-title">1#总表</span>
<span class="large-title">1#{{zbInfo.deviceName}}</span>
<div class="status">
<div>{{$store.state.ems.communicationStatusOptions[zbInfo.emsCommunicationStatus]}}</div>
<div>数据更新时间：{{zbInfo.dataUpdateTime}}</div>
@ -11,7 +11,7 @@
</div>
<el-table
class="common-table"
:data="zbInfo.ammeterDataDetailInfos"
:data="zbInfo.loadDataDetailInfo"
stripe
style="width: 100%;">
<el-table-column
@ -24,11 +24,11 @@
>
</el-table-column>
<el-table-column
prop="sharpKwh"
prop="peakKwh"
label="尖/kWh">
</el-table-column>
<el-table-column
prop="peakKwh"
prop="highKwh"
label="峰/kWh">
</el-table-column>
<el-table-column
@ -43,7 +43,7 @@
</el-card>
<el-card shadow="always" class="common-card-container" :class="cnbInfo.emsCommunicationStatus === '1' ? 'zb-common-card-container' : 'cnb-common-card-container'">
<div slot="header">
<span class="large-title">2#储能表</span>
<span class="large-title">2#{{cnbInfo.deviceName}}</span>
<div class="status">
<div>{{$store.state.ems.communicationStatusOptions[cnbInfo.emsCommunicationStatus]}}</div>
<div>数据更新时间：{{cnbInfo.dataUpdateTime}}</div>
@ -51,7 +51,7 @@
</div>
<el-table
class="common-table"
:data="cnbInfo.ammeterDataDetailInfos"
:data="cnbInfo.meteDataDetailInfo"
stripe
style="width: 100%;">
<el-table-column
@ -59,25 +59,13 @@
label="类别">
</el-table-column>
<el-table-column
prop="totalKwh"
label="总/kWh"
prop="activePower"
label="有功功率"
>
</el-table-column>
<el-table-column
prop="sharpKwh"
label="尖/kWh">
</el-table-column>
<el-table-column
prop="peakKwh"
label="峰/kWh">
</el-table-column>
<el-table-column
prop="flatKwh"
label="平/kWh">
</el-table-column>
<el-table-column
prop="valleyKwh"
label="谷/kWh">
prop="reactivePower"
label="无功功率">
</el-table-column>
</el-table>
</el-card>
@ -102,8 +90,8 @@ export default {
init(){
this.loading = true
getAmmeterDataList(this.siteId).then(response => {
this.zbInfo =JSON.parse(JSON.stringify(response?.data[0] || {}));
this.cnbInfo =JSON.parse(JSON.stringify(response?.data[1] || {}));
this.zbInfo =JSON.parse(JSON.stringify(response?.data?.ammeterLoadData || {}));
this.cnbInfo =JSON.parse(JSON.stringify(response?.data?.ammeterMeteData || {}));
}).finally(() => {this.loading = false})
}
},

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

@ -11,8 +11,9 @@
<style scoped lang="scss"></style>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/mixins/ems/resize'
import {formatDate} from "@/filters/ems";
import {storagePower} from '@/api/ems/dzjk'
export default {
mixins: [resize],
@ -22,9 +23,7 @@ export default {
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
this.chart = echarts.init(document.querySelector('#cnglqxChart'))
},
beforeDestroy() {
if (!this.chart) {
@ -34,17 +33,31 @@ export default {
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.querySelector('#cnglqxChart'))
this.setOptions()
init(siteId){
this.chart.showLoading()
const x = []
const data1 =[],data2 =[]
storagePower(siteId).then(response => {
const source = response?.data?.energyStoragePowList || []
source.forEach(item=>{
x.push(formatDate(item.createDate,false,true))
data1.push(item.pcsTotalActPower)
data2.push(item.pcsTotalReactivePower)
})
this.setOption(x,data1,data2)
}).finally(()=>{
this.chart.hideLoading()
})
},
setOptions() {
setOption(x,data1,data2) {
this.chart.setOption({
color:['#FFBD00','#3C81FF'],
legend: {
left: 'center',
bottom: '10',
top: '10',
},
grid: {
left: "15%"
},
tooltip: {
trigger: 'axis',
@ -55,23 +68,37 @@ export default {
textStyle:{
color:"#333333",
},
xAxis: {
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
},
xAxis: {type:'category',data:x},
yAxis: {
type: 'value',
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 10
},
{
start: 0,
end: 10
}
],
// POC昨日有功功率、POC昨日无功功率
series: [
{
name:'POC实时有功功率',
data: [80,92,1,34,90,130,320,80,9,91,34,90],
type: 'line',
areaStyle: {
color:'#FFBD00'
},
data: data1,
},{
name:'POC实时无功功率',
data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
type: 'line',
areaStyle: {
color: '#3C81FF'
},
data: data2
}]
})
}

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

@ -11,9 +11,9 @@
<style scoped lang="scss"></style>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/mixins/ems/resize'
import {formatDate} from "@/filters/ems";
import {batteryAveSoc} from '@/api/ems/dzjk'
export default {
mixins: [resize],
data() {
@ -22,9 +22,7 @@ export default {
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
this.chart = echarts.init(document.querySelector('#dcpjsocChart'))
},
beforeDestroy() {
if (!this.chart) {
@ -34,44 +32,53 @@ export default {
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.querySelector('#dcpjsocChart'))
this.setOptions()
init(siteId){
this.chart.showLoading()
const x = []
const data =[]
batteryAveSoc(siteId).then(response => {
const source = response?.data?.batteryAveSOCList || []
source.forEach(item=>{
x.push(formatDate(item.createDate,false,true))
data.push(item.batterySOC)
})
this.setOption(x,data)
}).finally(()=>{
this.chart.hideLoading()
})
},
setOptions() {
setOption(x,data) {
this.chart.setOption({
color:['#FFBD00','#3C81FF'],
legend: {
left: 'center',
bottom: '10',
},
// legend: {
// left: 'center',
// bottom: '10',
// },
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: "15%"
},
textStyle:{
color:"#333333",
},
xAxis: {
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
},
xAxis: {type:'category',data:x},
yAxis: {
type: 'value',
},
// POC昨日有功功率、POC昨日无功功率
series: [
{
name:'昨日同时段电池平均SOC',
data: [80,92,1,34,90,130,320,80,9,91,34,90],
type: 'scatter',
name:'电池平均SOC',
data: data,
type: 'line',
areaStyle: {
color:'#FFBD00'
}
},{
name:'实时电池平均SOC',
data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
type: 'scatter',
}]
})
}

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

@ -11,8 +11,9 @@
<style scoped lang="scss"></style>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/mixins/ems/resize'
import {formatDate} from "@/filters/ems";
import {batteryAveTemp} from '@/api/ems/dzjk'
export default {
mixins: [resize],
@ -22,9 +23,7 @@ export default {
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
this.chart = echarts.init(document.querySelector('#dcpjwdChart'))
},
beforeDestroy() {
if (!this.chart) {
@ -34,44 +33,63 @@ export default {
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.querySelector('#dcpjwdChart'))
this.setOptions()
init(siteId){
this.chart.showLoading()
const x = []
const data1 =[],data2 =[]
batteryAveTemp(siteId).then(response => {
const source = response?.data?.batteryAveTempList || []
source.forEach(item=>{
x.push(formatDate(item.createDate,false,true))
data1.push(item.batteryTemp)
})
this.setOption(x,data1,data2)
}).finally(()=>{
this.chart.hideLoading()
})
},
setOptions() {
setOption(x,data) {
this.chart.setOption({
color:['#FFBD00','#3C81FF'],
legend: {
left: 'center',
bottom: '10',
},
color:['#3C81FF'],
// legend: {
// left: 'center',
// bottom: '10',
// },
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: "15%"
},
textStyle:{
color:"#333333",
},
xAxis: {
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
},
xAxis: {type:'category',data:x},
yAxis: {
type: 'value',
},
// POC昨日有功功率、POC昨日无功功率
dataZoom: [
{
type: 'inside',
start: 0,
end: 10
},
{
start: 0,
end: 10
}
],
series: [
{
name:'昨日同时段温度',
data: [80,92,1,34,90,130,320,80,9,91,34,90],
type: 'line',
},{
name:'实时温度',
data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
name:'电池平均温度',
data: data,
type: 'line',
areaStyle: {
color:'#3C81FF'
},
}]
})
}

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

@ -11,8 +11,9 @@
<style scoped lang="scss"></style>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/mixins/ems/resize'
import {formatDate} from "@/filters/ems";
import {stackAveTemp} from '@/api/ems/dzjk'
export default {
mixins: [resize],
@ -22,9 +23,7 @@ export default {
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
this.chart = echarts.init(document.querySelector('#pocpjwdChart'))
},
beforeDestroy() {
if (!this.chart) {
@ -34,44 +33,60 @@ export default {
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.querySelector('#pocpjwdChart'))
this.setOptions()
init(siteId){
this.chart.showLoading()
const x = []
const data =[]
stackAveTemp(siteId).then(response => {
const source = response?.data?.stackAveTempList || []
source.forEach(item=>{
x.push(formatDate(item.createDate,false,true))
data.push(item.temp)
})
this.setOption(x,data)
}).finally(()=>{
this.chart.hideLoading()
})
},
setOptions() {
setOption(x,data) {
this.chart.setOption({
color:['#FFBD00','#3C81FF'],
legend: {
left: 'center',
bottom: '10',
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: "15%"
},
textStyle:{
color:"#333333",
},
xAxis: {
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
},
xAxis: {type:'category',data:x},
yAxis: {
type: 'value',
},
// POC昨日有功功率、POC昨日无功功率
dataZoom: [
{
type: 'inside',
start: 0,
end: 10
},
{
start: 0,
end: 10
}
],
series: [
{
name:'昨日同时段温度',
data: [80,92,1,34,90,130,320,80,9,91,34,90],
type: 'bar',
name:'Poc平均温度',
data: data,
type: 'line',
areaStyle: {
color:'#FFBD00'
}
},{
name:'实时温度',
data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
type: 'bar',
}]
})
}

32
src/views/ems/dzjk/sbjk/ssyx/index.vue
View File

@ -2,22 +2,22 @@
<template>
<div class="ssyx-ems-dashboard-editor-container">
<!-- 6个方块-->
<real-time-base-info/>
<real-time-base-info :data="runningHeadData"/>
<!-- echart图表-->
<el-row :gutter="32" style="background:#fff;margin:30px 0;">
<el-col :xs="24" :sm="12" :lg="12">
<cnglqx-chart/>
<cnglqx-chart ref='cnglqx'/>
</el-col>
<el-col :xs="24" :sm="12" :lg="12">
<pocpjwd-chart/>
<pocpjwd-chart ref='pocpjwd'/>
</el-col>
</el-row>
<el-row :gutter="32" style="margin:30px 0;">
<el-col :xs="24" :sm="12" :lg="12">
<dcpjsoc-chart/>
<dcpjsoc-chart ref="dcpjsoc"/>
</el-col>
<el-col :xs="24" :sm="12" :lg="12">
<dcpjwd-chart/>
<dcpjwd-chart ref="dcpjwd"/>
</el-col>
</el-row>
</div>
@ -32,14 +32,36 @@ import CnglqxChart from './CnglqxChart.vue'
import PocpjwdChart from './PocpjwdChart.vue'
import DcpjwdChart from './DcpjwdChart.vue'
import DcpjsocChart from './DcpjsocChart.vue'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getRunningHeadInfo} from '@/api/ems/dzjk'
export default {
name:'DzjkSbjkSsyx',
components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart},
mixins:[getQuerySiteId],
data() {
return {
runningHeadData:{},//运行信息
}
},
methods:{
//6个方块数据
getRunningHeadData(){
getRunningHeadInfo(this.siteId).then(response => {
this.runningHeadData = response?.data || {}
})
},
init(){
this.getRunningHeadData()
this.$nextTick(()=>{
this.$refs.cnglqx.init(this.siteId)
this.$refs.pocpjwd.init(this.siteId)
this.$refs.dcpjsoc.init(this.siteId)
this.$refs.dcpjwd.init(this.siteId)
})
}
}
}
</script>

12
src/views/ems/dzjk/tjbb/gltj/Dlzb.vue
View File

@ -66,7 +66,7 @@ export default {
this.dateRange=[]
this.getData()
},
setOption(data){
setOption(data,unit){
const source = [['日期','充电量','放电量','效率']]
data.forEach(item=>{
source.push([item.ammeterDate, item.chargedCap,item.disChargedCap,item.dailyEfficiency])
@ -78,7 +78,11 @@ export default {
// bottom: '10',
// },
tooltip: {},
xAxis: { type: 'category' },
xAxis: {
type: 'category',
name:unit,
nameLocation:'center'
},
yAxis: [{
type: 'value',
name:'充电量/放电量kWh',
@ -124,8 +128,8 @@ export default {
const [start='',end='']=this.dateRange || [];
const startDate=formatDate(start),endDate = formatDate(end)
getElectricData({siteId:this.siteId,startDate,endDate}).then(response => {
const {totalChargedCap='',totalDisChargedCap='',efficiency='',sevenDayDisChargeStats=[]}=response?.data || {}
this.setOption(sevenDayDisChargeStats || [])
const {totalChargedCap='',totalDisChargedCap='',efficiency='',sevenDayDisChargeStats=[],unit=''}=response?.data || {}
this.setOption(sevenDayDisChargeStats || [],unit)
this.totalChargedCap=totalChargedCap
this.totalDisChargedCap=totalDisChargedCap
this.efficiency=efficiency