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

Merge branch 'develop' into single-develop

Browse Source
This commit is contained in:
白菜
2025-09-17 14:57:30 +08:00
parent 3d5d8918d7 36b1e19120
commit 25bb28f77a
31 changed files with 1527 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
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,71 @@ 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;})
},
compareDate(date1,date2){
console.log('比较时间',date1,date2)
// 年2025-09/天2025-09-15/时2025-09-15/10:00
if(date1.indexOf(':') > -1 && date2.indexOf(':') > -1){
return parseInt(date1) - parseInt(date2)
}
const [date1_Y='',date1_M='',date1_D=''] = date1.split('-')//根据空格区分[年月日,小时]
const [date2_Y='',date2_M='',date2_D=''] = date2.split('-')//根据空格区分[年月日,小时]
return (date1_Y === date2_Y && date1_M === date2_M && date1_D - date2_D) || (date1_Y === date2_Y && date1_M - date2_M) || date1_Y - date2_Y
},
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 = []
const sourceBase = JSON.parse(JSON.stringify(ele.source))
// sourceBase={name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
const source=[]
const sourceTop = ['日期']
let map={},mapArr=[]
// 生成所有{日期:[],日期:[]}格式的对象和所有包含所有日期的[日期1,日期2...]
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'
item.dataList.forEach((inner)=>{
// 日期格式
// 年2025-09/天2025-09-15/时2025-09-15/10:00
// 所有数据的日期格式一致
if(!map[inner.statisDate]) {
map[inner.statisDate] = []
mapArr.push(inner.statisDate)
}
})
})
data.forEach((item,itemIndex)=>{
const dataTimeList = item.dataList.map(i =>i.statisDate)
const noDataTime = mapArr.filter(i=>!dataTimeList.includes(i))
sourceBase.forEach((outer,outerIndex)=>{
sourceTop.push(`${item.deviceId}-${outer}`)
noDataTime.forEach(i=>map[i].push(''))
item.dataList.forEach((inner,innerIndex)=>{
map[inner.statisDate].push(inner[ele.attr[outerIndex]])
})
})
})
mapArr = mapArr.sort((a,b)=>this.compareDate(a,b))
mapArr.forEach(item=>{
source.push([item,...map[item]])
})
source.unshift(sourceTop)
console.log('map=',map)
console.log('mapArr=',mapArr)
console.log('========',source)
this.chart.setOption({
color:['#FFBD00','#3C81FF'],
grid: {
containLabel: true
},
@ -148,7 +178,11 @@ export default {
type: 'value',
},
dataset: {source},
series
series:source[0].slice(1).map(item=>{
return {
type:ele.type || 'scatter'
}
})
},true)
},
initChart() {
@ -156,16 +190,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(){

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

@ -72,7 +72,6 @@ export default {
source.push([item.ammeterDate, item.chargedCap,item.disChargedCap,item.dailyEfficiency])
})
this.chart.setOption({
color:['#FFBD00','#3C81FF','#05AEA3'],
legend: {
left: 'center',
bottom: '15',
@ -110,18 +109,22 @@ export default {
dataset:{
source
},
//所有充放电颜色保持统一
series: [
{
yAxisIndex:0,
type: 'bar',//柱状图
color:'#4472c4'
},
{
yAxisIndex:0,
type: 'bar',//柱状图
color:'#70ad47'
},
{
yAxisIndex:1,
type: 'line',//柱状图
color:'#FFBD00'
},
]
})

121
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,72 @@ 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;})
},
compareDate(date1,date2){
console.log('比较时间',date1,date2)
// 年2025-09/天2025-09-15/时2025-09-15/10:00
if(date1.indexOf(':') > -1 && date2.indexOf(':') > -1){
return parseInt(date1) - parseInt(date2)
}
const [date1_Y='',date1_M='',date1_D=''] = date1.split('-')//根据空格区分[年月日,小时]
const [date2_Y='',date2_M='',date2_D=''] = date2.split('-')//根据空格区分[年月日,小时]
return (date1_Y === date2_Y && date1_M === date2_M && date1_D - date2_D) || (date1_Y === date2_Y && date1_M - date2_M) || date1_Y - date2_Y
},
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 = []
const sourceBase = JSON.parse(JSON.stringify(ele.source))
// sourceBase={name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
const source=[]
const sourceTop = ['日期']
let map={},mapArr=[]
// 生成所有{日期:[],日期:[]}格式的对象和所有包含所有日期的[日期1,日期2...]
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'
item.dataList.forEach((inner)=>{
// 日期格式
// 年2025-09/天2025-09-15/时2025-09-15/10:00
// 所有数据的日期格式一致
if(!map[inner.statisDate]) {
map[inner.statisDate] = []
mapArr.push(inner.statisDate)
}
})
})
data.forEach((item,itemIndex)=>{
const dataTimeList = item.dataList.map(i =>i.statisDate)
const noDataTime = mapArr.filter(i=>!dataTimeList.includes(i))
sourceBase.forEach((outer,outerIndex)=>{
sourceTop.push(`${item.deviceId}-${outer}`)
noDataTime.forEach(i=>map[i].push(''))
item.dataList.forEach((inner,innerIndex)=>{
map[inner.statisDate].push(inner[ele.attr[outerIndex]])
})
})
})
mapArr = mapArr.sort((a,b)=>this.compareDate(a,b))
mapArr.forEach(item=>{
source.push([item,...map[item]])
})
source.unshift(sourceTop)
console.log('map=',map)
console.log('mapArr=',mapArr)
console.log('========',source)
this.chart.setOption({
color:['#FFBD00','#3C81FF','#91cc74'],
grid: {
containLabel: true
},
@ -151,7 +182,11 @@ export default {
type: 'value',
},
dataset: {source},
series
series:source[0].slice(1).map(item=>{
return {
type:ele.type || 'scatter'
}
})
},true)
},
@ -160,18 +195,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(){