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

统计报表优化

Browse Source
This commit is contained in:
白菜
2025-09-14 23:33:53 +08:00
parent 52b6083baa
commit e3224d37a1
4 changed files with 136 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -116,16 +116,16 @@ export function getPcsNameList(siteId) {
}) })
} }
//pcs曲线 //pcs曲线
export function getPCSData({siteId,deviceId,startTime,endTime,dataType}) { export function getPCSData({siteId,startTime,endTime,dataType}) {
return request({ return request({
url: `/ems/statsReport/getPCSData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`, url: `/ems/statsReport/getPCSData?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`,
method: 'get' method: 'get'
}) })
} }
//电池堆曲线 //电池堆曲线
export function getStackData({siteId,deviceId,startTime,endTime,dataType}) { export function getStackData({siteId,startTime,endTime,dataType}) {
return request({ return request({
url: `/ems/statsReport/getStackData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`, url: `/ems/statsReport/getStackData?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`,
method: 'get' method: 'get'
}) })
} }
@ -168,9 +168,9 @@ export function batteryAveTemp(siteId) {
}) })
} }
// 功率曲线 // 功率曲线
export function getPowerData({siteId,deviceId,startDate,endDate,dataType}) { export function getPowerData({siteId,startDate,endDate}) {
return request({ return request({
url: `/ems/statsReport/getPowerData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startDate}&endDate=${endDate}&dataType=${dataType}`, url: `/ems/statsReport/getPowerData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
method: 'get' method: 'get'
}) })
} }

108
src/views/ems/dzjk/tjbb/dcdqx/index.vue
View File

@ -3,11 +3,11 @@
<div v-loading="loading"> <div v-loading="loading">
<div class="select-container"> <div class="select-container">
<el-form :inline="true"> <el-form :inline="true">
<el-form-item label="电池堆"> <!-- <el-form-item label="电池堆">-->
<el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据"> <!-- <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
<el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option> <!-- <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>-->
</el-select> <!-- </el-select>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="时间选择"> <el-form-item label="时间选择">
<el-date-picker <el-date-picker
v-model="dateRange" v-model="dateRange"
@ -62,14 +62,14 @@ export default {
defaultDateRange:[],//默认展示的时间 defaultDateRange:[],//默认展示的时间
dateRange:[], dateRange:[],
loading:false, loading:false,
pcs:'', // pcs:'',
pcsOptions: [], // pcsOptions: [],
activeBtn:'1', activeBtn:'1',
btnList:[ btnList:[
{name:'堆平均维度',id:'1',attr:['temp'],source:[['日期','有功功率']]}, {name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
{name:'堆电压',id:'2',attr:['voltage'],source:[['日期','堆电压']]}, {name:'堆电压',id:'2',attr:['voltage'],source:['堆电压']},
{name:'堆电流',id:'3',attr:['current'],source:[['日期','堆电流']]}, {name:'堆电流',id:'3',attr:['current'],source:['堆电流']},
{name:'堆soc',id:'4',attr:['soc'],source:[['日期','堆soc']]}, {name:'堆soc',id:'4',attr:['soc'],source:['堆soc']},
], ],
} }
}, },
@ -90,41 +90,65 @@ export default {
this.dateRange='' this.dateRange=''
this.getData() this.getData()
}, },
getPcsList(){ // getPcsList(){
return getStackNameList(this.siteId).then(response => { // return getStackNameList(this.siteId).then(response => {
const data = JSON.parse(JSON.stringify(response?.data || [])) // const data = JSON.parse(JSON.stringify(response?.data || []))
this.pcsOptions = data // this.pcsOptions = data
this.pcs = data.length>0?data[0].id:''; // this.pcs = data.length>0?data[0].id:'';
}) // })
}, // },
getData(){ getData(){
const {siteId,pcs,activeBtn}=this; const {siteId,activeBtn}=this;
const [start='',end='']=(this.dateRange || []) const [start='',end='']=(this.dateRange || [])
if(!pcs) return
//接口调用完成之后 设置图表、结束loading //接口调用完成之后 设置图表、结束loading
this.loading=true; this.loading=true;
getStackData({siteId,deviceId:pcs,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => { getStackData({siteId,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
this.setOption(response?.data || []) this.setOption(response?.data || [])
}).finally(()=>{this.loading=false;}) }).finally(()=>{this.loading=false;})
}, },
setOption(data) { setOption(data) {
// [{
// "deviceId": "PCS04",
// "dataList": [
// {
// "statisDate": "2025-09-05",
// "activePower": null,
// "reactivePower": null,
// "uCurrent": 1.30,
// "vCurrent": 0.90,
// "wCurrent": 1.00,
// "deviceId": "PCS04"
// },
// {
// "statisDate": "2025-09-04",
// "activePower": null,
// "reactivePower": null,
// "uCurrent": 71.40,
// "vCurrent": 71.30,
// "wCurrent": 71.80,
// "deviceId": "PCS04"
// }
// ]
// }]
const ele = this.btnList.find((item)=>{return item.id === this.activeBtn}) const ele = this.btnList.find((item)=>{return item.id === this.activeBtn})
const source = JSON.parse(JSON.stringify(ele.source)) const sourceBase = JSON.parse(JSON.stringify(ele.source))
const length = ele.attr.length const source=[]
const series = [] const sourceTop = ['日期']
data.forEach((item)=>{ sourceBase.forEach((outer,outerIndex)=>{
const arr = ele.attr.map(key=>item[key]) data.forEach((item,itemIndex)=>{
source.push([item.statisDate,...arr]) sourceTop.push(`${item.deviceId}-${outer}`)
}) item.dataList.forEach((inner,innerIndex)=>{
ele.attr.forEach((item)=>{ if(itemIndex === 0 || innerIndex+1>source.length) {
series.push({ source.push([inner.statisDate])
name:length>1?item:ele.name, }
type:ele.type || 'scatter' source[innerIndex].push(inner[ele.attr[outerIndex]])
}) })
}) })
})
source.unshift(sourceTop)
console.log('========',source)
this.chart.setOption({ this.chart.setOption({
color:['#FFBD00','#3C81FF'],
grid: { grid: {
containLabel: true containLabel: true
}, },
@ -148,7 +172,11 @@ export default {
type: 'value', type: 'value',
}, },
dataset: {source}, dataset: {source},
series series:source[0].slice(1).map(item=>{
return {
type:ele.type || 'scatter'
}
})
},true) },true)
}, },
initChart() { initChart() {
@ -156,16 +184,10 @@ export default {
}, },
init(){ init(){
this.loading = true this.loading = true
this.pcs='' // this.pcs=''
this.pcsOptions=[] // this.pcsOptions=[]
this.initChart() this.initChart()
this.getPcsList().then(()=>{
if(this.pcs){
this.onReset() this.onReset()
}else{
this.loading = false
}
})
} }
}, },
mounted(){ mounted(){

76
src/views/ems/dzjk/tjbb/glqx/index.vue
View File

@ -3,16 +3,6 @@
<div v-loading="loading"> <div v-loading="loading">
<div class="select-container"> <div class="select-container">
<el-form :inline="true"> <el-form :inline="true">
<!-- <el-form-item label="网点">-->
<!-- <el-select v-model="wd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
<!-- <el-option :label="item.name" :value="item.id" v-for="(item,index) in wdOptions" :key="index+'sblxOptions'"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="PCS">
<el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
<el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>
</el-select>
</el-form-item>
<el-form-item label="时间选择"> <el-form-item label="时间选择">
<el-date-picker <el-date-picker
v-model="dateRange" v-model="dateRange"
@ -33,15 +23,6 @@
</el-form> </el-form>
</div> </div>
<div style="margin:30px 0;"> <div style="margin:30px 0;">
<!-- 二个选择按钮-->
<el-row style="">
<el-col :xs="24" :sm="24" :lg="24">
<el-button-group class="ems-btns-group">
<el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
</el-button-group>
</el-col>
</el-row>
<!--echart-->
<div id="glqxEchart" style="height:360px;"></div> <div id="glqxEchart" style="height:360px;"></div>
</div> </div>
</div> </div>
@ -67,26 +48,9 @@ export default {
defaultDateRange:[],//默认展示的时间 defaultDateRange:[],//默认展示的时间
dateRange:[], dateRange:[],
loading:false, loading:false,
pcs:'',
pcsOptions: [],
activeBtn:'1',
btnList:[
{name:'电网功率',id:'1',attr:'gridPower'},
{name:'负载功率',id:'2',attr:'loadPower'},
{name:'储能功率',id:'3',attr:'storagePower'},
{name:'光伏功率',id:'4',attr:'pvPower'},
],
} }
}, },
methods: { methods: {
changeDataType(id){
if(id !== this.activeBtn){
console.log('点击了不同的菜单，更新数据')
this.activeBtn=id;
this.getData()
}
},
// 搜索 // 搜索
onSearch(){ onSearch(){
this.getData() this.getData()
@ -96,31 +60,21 @@ export default {
this.dateRange=[] this.dateRange=[]
this.getData() this.getData()
}, },
getPcsList(){
return getPcsNameList(this.siteId).then(response => {
const data = response?.data || [];
this.pcsOptions = data
this.pcs = data.length>0?data[0].id:'';
})
},
getData(){ getData(){
const {siteId,pcs,activeBtn}=this; const {siteId}=this;
const [start='',end='']=(this.dateRange || []) const [start='',end='']=(this.dateRange || [])
if(!pcs) return
//接口调用完成之后 设置图表、结束loading //接口调用完成之后 设置图表、结束loading
this.loading=true; this.loading=true;
getPowerData({siteId,deviceId:pcs,startDate:formatDate(start),endDate:formatDate(end),dataType:activeBtn}).then(response => { getPowerData({siteId,startDate:formatDate(start),endDate:formatDate(end)}).then(response => {
this.setOption(response?.data || []) this.setOption(response?.data || [])
}).finally(()=>{this.loading=false;}) }).finally(()=>{this.loading=false;})
}, },
setOption(data) { setOption(data) {
const {name,attr} =this.btnList.find(item=>item.id===this.activeBtn) const source = [['日期','电网功率','负载功率','储能功率','光伏功率']]
const source = [['日期',name]] data.forEach(item=>{
data.forEach((item,index)=>{ source.push([item.statisDate,item.gridPower,item.loadPower,item.storagePower,item.pvPower])
source.push([item.statisDate,item[attr]])
}) })
this.chart.setOption({ this.chart.setOption({
color:['#FFBD00','#3C81FF'],
grid: { grid: {
containLabel: true containLabel: true
}, },
@ -146,7 +100,15 @@ export default {
dataset:{source}, dataset:{source},
series: [ series: [
{ {
name, type: 'scatter',
},
{
type: 'scatter',
},
{
type: 'scatter',
},
{
type: 'scatter', type: 'scatter',
} }
] ]
@ -157,16 +119,8 @@ export default {
}, },
init(){ init(){
this.loading = true this.loading = true
this.pcs=''
this.pcsOptions=[]
this.initChart() this.initChart()
this.getPcsList().then(()=>{ this.getData()
if(this.pcs){
this.onReset()
}else{
this.loading = false
}
})
} }
}, },
mounted(){ mounted(){

91
src/views/ems/dzjk/tjbb/pcsqx/index.vue
View File

@ -3,11 +3,11 @@
<div v-loading="loading"> <div v-loading="loading">
<div class="select-container"> <div class="select-container">
<el-form :inline="true"> <el-form :inline="true">
<el-form-item label="PCS"> <!-- <el-form-item label="PCS">-->
<el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据"> <!-- <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
<el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option> <!-- <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>-->
</el-select> <!-- </el-select>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="时间选择"> <el-form-item label="时间选择">
<el-date-picker <el-date-picker
v-model="dateRange" v-model="dateRange"
@ -62,15 +62,15 @@ export default {
defaultDateRange:[],//默认展示的时间 defaultDateRange:[],//默认展示的时间
dateRange:[], dateRange:[],
loading:false, loading:false,
pcs:'', // pcs:'',
pcsOptions: [], // pcsOptions: [],
activeBtn:'1', activeBtn:'1',
btnList:[ btnList:[
{name:'有功功率',id:'1',attr:['activePower'],source:[['日期','有功功率']]}, {name:'有功功率',id:'1',attr:['activePower'],source:['有功功率']},
{name:'无功功率',id:'2',attr:['reactivePower'],source:[['日期','无功功率']]}, {name:'无功功率',id:'2',attr:['reactivePower'],source:['无功功率']},
// {name:'温度',id:'wd'}, // {name:'温度',id:'wd'},
// {name:'三相电压',id:'sxdy'}, // {name:'三相电压',id:'sxdy'},
{name:'三相电流',id:'3',attr:['uCurrent','vCurrent','wCurrent'],source:[['日期','u电流','v电流','w电流']],type:'bar'}, {name:'三相电流',id:'3',attr:['uCurrent','vCurrent','wCurrent'],source:['u电流','v电流','w电流'],type:'bar'},
], ],
} }
@ -93,41 +93,42 @@ export default {
this.dateRange=[] this.dateRange=[]
this.getData() this.getData()
}, },
getPcsList(){ // getPcsList(){
return getPcsNameList(this.siteId).then(response => { // return getPcsNameList(this.siteId).then(response => {
const data = response?.data || []; // const data = response?.data || [];
this.pcsOptions = data // this.pcsOptions = data
this.pcs = data.length>0?data[0].id:''; // this.pcs = data.length>0?data[0].id:'';
}) // })
}, // },
getData(){ getData(){
const {siteId,pcs,activeBtn}=this; const {siteId,activeBtn}=this;
const [start='',end='']=(this.dateRange || []) const [start='',end='']=(this.dateRange || [])
if(!pcs) return
this.loading=true; this.loading=true;
//接口调用完成之后 设置图表、结束loading //接口调用完成之后 设置图表、结束loading
getPCSData({siteId,deviceId:pcs,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => { getPCSData({siteId,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
this.setOption(response?.data || []) this.setOption(response?.data || [])
}).finally(()=>{this.loading=false;}) }).finally(()=>{this.loading=false;})
}, },
setOption(data) { setOption(data) {
const ele = this.btnList.find((item)=>{return item.id === this.activeBtn}) const ele = this.btnList.find((item)=>{return item.id === this.activeBtn})
const source = JSON.parse(JSON.stringify(ele.source)) const sourceBase = JSON.parse(JSON.stringify(ele.source))
const length = ele.attr.length const source=[]
const series = [] const sourceTop = ['日期']
data.forEach((item)=>{ sourceBase.forEach((outer,outerIndex)=>{
const arr = ele.attr.map(key=>item[key]) data.forEach((item,itemIndex)=>{
source.push([item.statisDate,...arr]) sourceTop.push(`${item.deviceId}-${outer}`)
}) item.dataList.forEach((inner,innerIndex)=>{
ele.attr.forEach((item)=>{ if(itemIndex === 0 || innerIndex+1>source.length) {
series.push({ source.push([inner.statisDate])
name:length>1?item:ele.name, }
type:ele.type || 'scatter' source[innerIndex].push(inner[ele.attr[outerIndex]])
}) })
}) })
})
source.unshift(sourceTop)
console.log('========',source)
this.chart.setOption({ this.chart.setOption({
color:['#FFBD00','#3C81FF','#91cc74'],
grid: { grid: {
containLabel: true containLabel: true
}, },
@ -151,7 +152,11 @@ export default {
type: 'value', type: 'value',
}, },
dataset: {source}, dataset: {source},
series series:source[0].slice(1).map(item=>{
return {
type:ele.type || 'scatter'
}
})
},true) },true)
}, },
@ -160,18 +165,18 @@ export default {
}, },
init(){ init(){
this.loading = true this.loading = true
this.pcs='' // this.pcs=''
this.pcsOptions=[] // this.pcsOptions=[]
this.dateRange =[]
this.initChart() this.initChart()
this.getPcsList().then(()=>{
if(this.pcs){
this.onReset() this.onReset()
}else{ // this.getPcsList().then(()=>{
this.loading=false; // if(this.pcs){
} // this.onReset()
// }else{
}) // this.loading=false;
// }
//
// })
} }
}, },
mounted(){ mounted(){