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曲线
export function getPCSData({siteId,deviceId,startTime,endTime,dataType}) {
export function getPCSData({siteId,startTime,endTime,dataType}) {
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'
})
}
//电池堆曲线
export function getStackData({siteId,deviceId,startTime,endTime,dataType}) {
export function getStackData({siteId,startTime,endTime,dataType}) {
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'
})
}
@ -168,9 +168,9 @@ export function batteryAveTemp(siteId) {
})
}
// 功率曲线
export function getPowerData({siteId,deviceId,startDate,endDate,dataType}) {
export function getPowerData({siteId,startDate,endDate}) {
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'
})
}

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

@ -3,11 +3,11 @@
<div v-loading="loading">
<div class="select-container">
<el-form :inline="true">
<el-form-item label="电池堆">
<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-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-date-picker
v-model="dateRange"
@ -62,14 +62,14 @@ export default {
defaultDateRange:[],//默认展示的时间
dateRange:[],
loading:false,
pcs:'',
pcsOptions: [],
// pcs:'',
// pcsOptions: [],
activeBtn:'1',
btnList:[
{name:'堆平均维度',id:'1',attr:['temp'],source:[['日期','有功功率']]},
{name:'堆电压',id:'2',attr:['voltage'],source:[['日期','堆电压']]},
{name:'堆电流',id:'3',attr:['current'],source:[['日期','堆电流']]},
{name:'堆soc',id:'4',attr:['soc'],source:[['日期','堆soc']]},
{name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
{name:'堆电压',id:'2',attr:['voltage'],source:['堆电压']},
{name:'堆电流',id:'3',attr:['current'],source:['堆电流']},
{name:'堆soc',id:'4',attr:['soc'],source:['堆soc']},
],
}
},
@ -90,41 +90,65 @@ export default {
this.dateRange=''
this.getData()
},
getPcsList(){
return getStackNameList(this.siteId).then(response => {
const data = JSON.parse(JSON.stringify(response?.data || []))
this.pcsOptions = data
this.pcs = data.length>0?data[0].id:'';
})
},
// getPcsList(){
// return getStackNameList(this.siteId).then(response => {
// const data = JSON.parse(JSON.stringify(response?.data || []))
// this.pcsOptions = data
// this.pcs = data.length>0?data[0].id:'';
// })
// },
getData(){
const {siteId,pcs,activeBtn}=this;
const {siteId,activeBtn}=this;
const [start='',end='']=(this.dateRange || [])
if(!pcs) return
//接口调用完成之后 设置图表、结束loading
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 || [])
}).finally(()=>{this.loading=false;})
},
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 source = JSON.parse(JSON.stringify(ele.source))
const length = ele.attr.length
const series = []
data.forEach((item)=>{
const arr = ele.attr.map(key=>item[key])
source.push([item.statisDate,...arr])
})
ele.attr.forEach((item)=>{
series.push({
name:length>1?item:ele.name,
type:ele.type || 'scatter'
const sourceBase = JSON.parse(JSON.stringify(ele.source))
const source=[]
const sourceTop = ['日期']
sourceBase.forEach((outer,outerIndex)=>{
data.forEach((item,itemIndex)=>{
sourceTop.push(`${item.deviceId}-${outer}`)
item.dataList.forEach((inner,innerIndex)=>{
if(itemIndex === 0 || innerIndex+1>source.length) {
source.push([inner.statisDate])
}
source[innerIndex].push(inner[ele.attr[outerIndex]])
})
})
})
source.unshift(sourceTop)
console.log('========',source)
this.chart.setOption({
color:['#FFBD00','#3C81FF'],
grid: {
containLabel: true
},
@ -148,7 +172,11 @@ export default {
type: 'value',
},
dataset: {source},
series
series:source[0].slice(1).map(item=>{
return {
type:ele.type || 'scatter'
}
})
},true)
},
initChart() {
@ -156,16 +184,10 @@ export default {
},
init(){
this.loading = true
this.pcs=''
this.pcsOptions=[]
// this.pcs=''
// this.pcsOptions=[]
this.initChart()
this.getPcsList().then(()=>{
if(this.pcs){
this.onReset()
}else{
this.loading = false
}
})
this.onReset()
}
},
mounted(){

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

@ -3,16 +3,6 @@
<div v-loading="loading">
<div class="select-container">
<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-date-picker
v-model="dateRange"
@ -33,15 +23,6 @@
</el-form>
</div>
<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>
</div>
@ -67,26 +48,9 @@ export default {
defaultDateRange:[],//默认展示的时间
dateRange:[],
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: {
changeDataType(id){
if(id !== this.activeBtn){
console.log('点击了不同的菜单，更新数据')
this.activeBtn=id;
this.getData()
}
},
// 搜索
onSearch(){
this.getData()
@ -96,31 +60,21 @@ export default {
this.dateRange=[]
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(){
const {siteId,pcs,activeBtn}=this;
const {siteId}=this;
const [start='',end='']=(this.dateRange || [])
if(!pcs) return
//接口调用完成之后 设置图表、结束loading
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 || [])
}).finally(()=>{this.loading=false;})
},
setOption(data) {
const {name,attr} =this.btnList.find(item=>item.id===this.activeBtn)
const source = [['日期',name]]
data.forEach((item,index)=>{
source.push([item.statisDate,item[attr]])
const source = [['日期','电网功率','负载功率','储能功率','光伏功率']]
data.forEach(item=>{
source.push([item.statisDate,item.gridPower,item.loadPower,item.storagePower,item.pvPower])
})
this.chart.setOption({
color:['#FFBD00','#3C81FF'],
grid: {
containLabel: true
},
@ -146,7 +100,15 @@ export default {
dataset:{source},
series: [
{
name,
type: 'scatter',
},
{
type: 'scatter',
},
{
type: 'scatter',
},
{
type: 'scatter',
}
]
@ -157,16 +119,8 @@ export default {
},
init(){
this.loading = true
this.pcs=''
this.pcsOptions=[]
this.initChart()
this.getPcsList().then(()=>{
if(this.pcs){
this.onReset()
}else{
this.loading = false
}
})
this.getData()
}
},
mounted(){

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

@ -3,11 +3,11 @@
<div v-loading="loading">
<div class="select-container">
<el-form :inline="true">
<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="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-date-picker
v-model="dateRange"
@ -62,15 +62,15 @@ export default {
defaultDateRange:[],//默认展示的时间
dateRange:[],
loading:false,
pcs:'',
pcsOptions: [],
// pcs:'',
// pcsOptions: [],
activeBtn:'1',
btnList:[
{name:'有功功率',id:'1',attr:['activePower'],source:[['日期','有功功率']]},
{name:'无功功率',id:'2',attr:['reactivePower'],source:[['日期','无功功率']]},
{name:'有功功率',id:'1',attr:['activePower'],source:['有功功率']},
{name:'无功功率',id:'2',attr:['reactivePower'],source:['无功功率']},
// {name:'温度',id:'wd'},
// {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.getData()
},
getPcsList(){
return getPcsNameList(this.siteId).then(response => {
const data = response?.data || [];
this.pcsOptions = data
this.pcs = data.length>0?data[0].id:'';
})
},
// getPcsList(){
// return getPcsNameList(this.siteId).then(response => {
// const data = response?.data || [];
// this.pcsOptions = data
// this.pcs = data.length>0?data[0].id:'';
// })
// },
getData(){
const {siteId,pcs,activeBtn}=this;
const {siteId,activeBtn}=this;
const [start='',end='']=(this.dateRange || [])
if(!pcs) return
this.loading=true;
//接口调用完成之后 设置图表、结束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 || [])
}).finally(()=>{this.loading=false;})
},
setOption(data) {
const ele = this.btnList.find((item)=>{return item.id === this.activeBtn})
const source = JSON.parse(JSON.stringify(ele.source))
const length = ele.attr.length
const series = []
data.forEach((item)=>{
const arr = ele.attr.map(key=>item[key])
source.push([item.statisDate,...arr])
})
ele.attr.forEach((item)=>{
series.push({
name:length>1?item:ele.name,
type:ele.type || 'scatter'
const sourceBase = JSON.parse(JSON.stringify(ele.source))
const source=[]
const sourceTop = ['日期']
sourceBase.forEach((outer,outerIndex)=>{
data.forEach((item,itemIndex)=>{
sourceTop.push(`${item.deviceId}-${outer}`)
item.dataList.forEach((inner,innerIndex)=>{
if(itemIndex === 0 || innerIndex+1>source.length) {
source.push([inner.statisDate])
}
source[innerIndex].push(inner[ele.attr[outerIndex]])
})
})
})
source.unshift(sourceTop)
console.log('========',source)
this.chart.setOption({
color:['#FFBD00','#3C81FF','#91cc74'],
grid: {
containLabel: true
},
@ -151,7 +152,11 @@ export default {
type: 'value',
},
dataset: {source},
series
series:source[0].slice(1).map(item=>{
return {
type:ele.type || 'scatter'
}
})
},true)
},
@ -160,18 +165,18 @@ export default {
},
init(){
this.loading = true
this.pcs=''
this.pcsOptions=[]
this.dateRange =[]
// this.pcs=''
// this.pcsOptions=[]
this.initChart()
this.getPcsList().then(()=>{
if(this.pcs){
this.onReset()
}else{
this.loading=false;
}
})
this.onReset()
// this.getPcsList().then(()=>{
// if(this.pcs){
// this.onReset()
// }else{
// this.loading=false;
// }
//
// })
}
},
mounted(){