Merge branch 'develop' into single-develop
This commit is contained in:
白菜
@ -124,7 +124,7 @@ export default {
|
||||
return {
|
||||
loading:false,
|
||||
btnList:[
|
||||
{name:'今日告警',id:'today'},
|
||||
{name:'未处理告警',id:'today'},
|
||||
{name:'历史告警',id:'history'},
|
||||
],
|
||||
deviceOptions:[],//设备列表
|
||||
@ -173,17 +173,6 @@ export default {
|
||||
onSearch(){
|
||||
this.pageNum =1//每次搜索从1开始搜索
|
||||
const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
|
||||
// 选中了时间范围
|
||||
if(alarmStartTime && alarmStartTime){
|
||||
// 如果选择的时间范围是今天
|
||||
if(this.isSameDay(alarmStartTime,alarmEndTime) && this.isSameDay(alarmStartTime,new Date())){
|
||||
this.activeBtn = 'today'
|
||||
}else {
|
||||
this.activeBtn = 'history'
|
||||
}
|
||||
}else{
|
||||
//没有选择时间范围 还是按照选中的今日告警、历史告警查询
|
||||
}
|
||||
this.getData()
|
||||
},
|
||||
// 重置
|
||||
@ -198,17 +187,6 @@ export default {
|
||||
if(id !== this.activeBtn){
|
||||
console.log('点击了不同的菜单，更新数据')
|
||||
this.activeBtn=id;
|
||||
const [alarmStartTime,alarmEndTime]=(this.dateRange || [])
|
||||
// 切换到今日告警，如果已经选择了时间范围清空
|
||||
if(alarmStartTime && alarmEndTime){
|
||||
// 如果切换到了今日告警，时间范围不相等或者相等但是不是今天 清空时间选择范围
|
||||
if(id === 'today' && !this.isSameDay(alarmStartTime,alarmEndTime) || (this.isSameDay(alarmStartTime,alarmEndTime) && !this.isSameDay(alarmStartTime,new Date()))){
|
||||
this.dateRange = []
|
||||
}else if(id === 'history' && this.isSameDay(alarmStartTime,alarmEndTime) && this.isSameDay(alarmStartTime,new Date())){
|
||||
// 切换成历史告警，但是选择时间范围是当天，清空时间范围
|
||||
this.dateRange = []
|
||||
}
|
||||
}
|
||||
this.getData()
|
||||
}
|
||||
},
|
||||
@ -218,21 +196,8 @@ export default {
|
||||
const {deviceId,alarmLevel} = this.search
|
||||
const {siteId,pageNum,pageSize,activeBtn} =this
|
||||
const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
|
||||
let start='',end = '',now =new Date()
|
||||
if(activeBtn === 'today'){
|
||||
start = end = now
|
||||
}else{
|
||||
if(alarmStartTime && alarmEndTime){
|
||||
start = alarmStartTime
|
||||
end = alarmEndTime
|
||||
}else{
|
||||
start=''
|
||||
end = ''
|
||||
// now
|
||||
// end.setDate(end.getDate() - 1);
|
||||
}
|
||||
}
|
||||
getAlarmDetailList({deviceId,alarmLevel,siteId,pageSize,pageNum,alarmStartTime:formatDate(start),alarmEndTime:formatDate(end)}).then(response => {
|
||||
let status = activeBtn === 'today' ? '0' : '1,2'
|
||||
getAlarmDetailList({status,deviceId,alarmLevel,siteId,pageSize,pageNum,alarmStartTime:formatDate(alarmStartTime),alarmEndTime:formatDate(alarmEndTime)}).then(response => {
|
||||
this.tableData=response?.rows || [];
|
||||
this.totalSize = response?.total || 0
|
||||
}).finally(() => {this.loading=false})
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
import * as echarts from 'echarts'
|
||||
import resize from '@/mixins/ems/resize'
|
||||
import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
|
||||
import {getPcsNameList, getPowerData} from '@/api/ems/dzjk'
|
||||
import { getPointData } from '@/api/ems/dzjk'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
@ -23,7 +23,7 @@ export default {
|
||||
chart: null,
|
||||
timeRange:[],
|
||||
siteId:'',
|
||||
deviceId:''
|
||||
isInit:true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -42,33 +42,23 @@ export default {
|
||||
// 更新时间范围 重置图表
|
||||
updateDate(data){
|
||||
this.timeRange=data
|
||||
this.getGVQXData()
|
||||
!this.isInit && this.getGVQXData()
|
||||
this.isInit = false
|
||||
},
|
||||
getGVQXData(){
|
||||
this.showLoading()
|
||||
const {siteId,deviceId,timeRange}=this
|
||||
if(!deviceId) return this.hideLoading()
|
||||
getPowerData({siteId,deviceId,startDate:timeRange[0],endDate:timeRange[1],dataType:'1'}).then(response => {
|
||||
const {siteId,timeRange}=this
|
||||
getPointData({siteId,startDate:timeRange[0],endDate:timeRange[1]}).then(response => {
|
||||
this.setOption(response?.data || [])
|
||||
}).finally(()=>this.hideLoading())
|
||||
},
|
||||
init(siteId){
|
||||
//初始化 清空数据
|
||||
this.siteId = siteId
|
||||
this.isInit = true
|
||||
this.timeRange=[]
|
||||
this.deviceId=''
|
||||
this.$refs.dateRangeSelect.init()
|
||||
this.showLoading()
|
||||
getPcsNameList(siteId).then(response=>{
|
||||
const data=response?.data || [];
|
||||
if(data.length>0){
|
||||
this.deviceId=data[0].id
|
||||
//接口调用完成之后 设置图表、结束loading
|
||||
this.getGVQXData()
|
||||
}else{
|
||||
this.hideLoading()
|
||||
}
|
||||
})
|
||||
this.$refs.dateRangeSelect.init(true)
|
||||
this.getGVQXData()
|
||||
},
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#activeChart'))
|
||||
@ -80,12 +70,12 @@ export default {
|
||||
this.chart && this.chart.hideLoading()
|
||||
},
|
||||
setOption(data) {
|
||||
const source = [['日期','电网功率']]
|
||||
const source = [['日期','电网功率','负载功率','储能功率','光伏功率','soc平均值','soh平均值','电池平均温度平均值']]
|
||||
console.log('source.slice(1)',source[0].slice(1))
|
||||
this.chart && data.forEach((item)=>{
|
||||
source.push([item.statisDate,item.gridPower])
|
||||
source.push([item.statisDate,item.gridPower,item.loadPower,item.storagePower,item.pvPower,item.avgSoc,item.avgSoh,item.avgTemp])
|
||||
})
|
||||
this.chart.setOption({
|
||||
color:['#FFBD00','#3C81FF'],
|
||||
grid: {
|
||||
containLabel: true
|
||||
},
|
||||
@ -105,16 +95,21 @@ export default {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
dataset:{source},
|
||||
series: [
|
||||
yAxis: [
|
||||
{
|
||||
name:'电网功率',
|
||||
type: 'value',
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
},
|
||||
],
|
||||
dataset:{source},
|
||||
series: source[0].slice(1).map((item,index)=>{
|
||||
return {
|
||||
type: 'line',
|
||||
yAxisIndex:index<=4 ? 0 : 1
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
@ -72,7 +72,7 @@ export default {
|
||||
source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
|
||||
})
|
||||
this.chart && this.chart.setOption({
|
||||
color:['#FFBD00','#3C81FF','#05AEA3'],
|
||||
color:['#4472c4','#70ad47'],//所有充放电颜色保持统一
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
@ -107,11 +107,11 @@ export default {
|
||||
series: [
|
||||
{
|
||||
yAxisIndex:0,
|
||||
type: 'line',
|
||||
type: 'bar',
|
||||
},
|
||||
{
|
||||
yAxisIndex:0,
|
||||
type: 'line',
|
||||
type: 'bar',
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
class="common-card-container common-card-container-body-no-padding"
|
||||
>
|
||||
<div slot="header">
|
||||
<span class="card-title">静态信息</span>
|
||||
<span class="card-title">站点信息</span>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; height: 250px; padding: 20px 15px"
|
||||
@ -105,11 +105,11 @@ export default {
|
||||
],
|
||||
sjglData: [
|
||||
{
|
||||
title: "今日充电量（MWh）",
|
||||
title: "今日充电量（kWh）",
|
||||
attr: "dayChargedCap",
|
||||
},
|
||||
{
|
||||
title: "今日放电量（MWh）",
|
||||
title: "今日放电量（kWh）",
|
||||
attr: "dayDisChargedCap",
|
||||
},
|
||||
{
|
||||
@ -202,20 +202,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
/* card标题里的时间选择器 */
|
||||
.time-range-card {
|
||||
&.common-card-container .el-card__header {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
.time-range-header {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.card-title {
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
221
src/views/ems/dzjk/sbjk/PointChart.vue
Normal file
221
src/views/ems/dzjk/sbjk/PointChart.vue
Normal file
@ -0,0 +1,221 @@
|
||||
<!--电位展示图表-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible.sync="show"
|
||||
:title="pointName"
|
||||
:close-on-click-modal="false"
|
||||
show-close
|
||||
destroy-on-close
|
||||
lock-scroll
|
||||
append-to-body
|
||||
width="1000px"
|
||||
class="ems-dialog"
|
||||
:before-close="handleColsed"
|
||||
>
|
||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
|
||||
<div slot="header" class="time-range-header">
|
||||
<el-radio-group class="card-title" v-model="dataUnit">
|
||||
<el-radio :label="1">分钟</el-radio>
|
||||
<el-radio :label="2">小时</el-radio>
|
||||
<el-radio :label="3">天</el-radio>
|
||||
</el-radio-group>
|
||||
<date-time-select ref="dateTimeSelect" :data-unit="dataUnit" @initDate="((e)=>dataRange=e||[])" @updateDate="updateDate"/>
|
||||
</div>
|
||||
<div style="height: 350px" id="searchChart"></div>
|
||||
</el-card>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import resize from "@/mixins/ems/resize";
|
||||
import DateTimeSelect from "@/views/ems/search/DateTimeSelect.vue";
|
||||
import {getPointValueList} from "@/api/ems/search";
|
||||
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
|
||||
export default {
|
||||
components: {DateRangeSelect, DateTimeSelect},
|
||||
mixins: [resize],
|
||||
props: {
|
||||
siteId:{
|
||||
type: String,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isDtdc(){
|
||||
return this.categoryName === '单体电池'
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
show(val) {
|
||||
if(!val){
|
||||
this.pointName=''
|
||||
this.categoryName=''
|
||||
this.deviceId=''
|
||||
this.dataUnit=1
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.hideLoading()
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
}
|
||||
},
|
||||
dataUnit:{
|
||||
handler(newVal,oldVal){
|
||||
console.log('wacth到了dataUnit的变化',newVal,oldVal)
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.dateTimeSelect.init()
|
||||
this.getDate()
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
show:false,
|
||||
chart:null,
|
||||
dataUnit:1,
|
||||
dataRange:[],
|
||||
child:[],//单体电池需要数据 暂不删除
|
||||
pointName:'',
|
||||
categoryName:'',
|
||||
deviceId:''
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
showChart({pointName,categoryName,deviceId}){
|
||||
//初始化数据
|
||||
this.pointName=pointName
|
||||
this.categoryName=categoryName
|
||||
this.deviceId=deviceId
|
||||
this.show = true
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.dateTimeSelect.init()
|
||||
this.initChart()
|
||||
this.getDate()
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#searchChart'))
|
||||
},
|
||||
showLoading(){
|
||||
this.chart && this.chart.showLoading()
|
||||
},
|
||||
hideLoading(){
|
||||
this.chart && this.chart.hideLoading()
|
||||
},
|
||||
getDate(){
|
||||
this.showLoading()
|
||||
const{dataUnit,dataRange:[start='',end=''],child}=this
|
||||
let siteDeviceMap={}
|
||||
child.forEach(([first,second,third])=>{
|
||||
if(siteDeviceMap[first]){
|
||||
siteDeviceMap[first].push(third)
|
||||
}else{
|
||||
siteDeviceMap[first]=[]
|
||||
siteDeviceMap[first].push(third)
|
||||
}
|
||||
})
|
||||
let startDate,endDate
|
||||
if(start && dataUnit===3){
|
||||
// startDate= start + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
|
||||
startDate = start + ' 00:00:00'
|
||||
}else{
|
||||
startDate=start
|
||||
}
|
||||
if(end && dataUnit===3){
|
||||
// endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
|
||||
endDate = end + ' 00:00:00'
|
||||
}else{
|
||||
endDate=end
|
||||
}
|
||||
|
||||
getPointValueList({siteIds:[this.siteId],deviceId:this.deviceId,dataUnit,categoryName:this.categoryName,pointName:this.pointName,startDate,endDate,siteDeviceMap:{}}).then(response => {
|
||||
this.setOption(response?.data || [])
|
||||
}).finally(()=>{
|
||||
this.hideLoading()
|
||||
})
|
||||
},
|
||||
setOption(data) {
|
||||
if(!this.chart) return
|
||||
this.chart.clear()
|
||||
console.log('返回的数据',data)
|
||||
let dataset=[]
|
||||
if(data.length>0){
|
||||
data.forEach((item,index)=>{
|
||||
item.deviceList.forEach(inner=>{
|
||||
dataset.push({
|
||||
name:`${this.isDtdc ? `${inner.parentDeviceId ? inner.parentDeviceId+'-' : ''}` : ''}${inner.deviceId}`,
|
||||
type:'line',
|
||||
xdata:[],
|
||||
data:[]
|
||||
})
|
||||
const length = dataset.length
|
||||
inner.pointValueList.forEach(value=>{
|
||||
dataset[length-1].xdata.push(value.valueDate)
|
||||
dataset[length-1].data.push(value.pointValue)
|
||||
})
|
||||
})
|
||||
})
|
||||
}else{
|
||||
this.$message.warning('暂无数据')
|
||||
}
|
||||
console.log('图表数据',dataset)
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
// left: 'center',
|
||||
// top: '10',
|
||||
},
|
||||
grid: {
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color:"#333333",
|
||||
},
|
||||
xAxis: {type:'category',data:dataset?.[0]?.xdata || []},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 0,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
series: dataset
|
||||
})
|
||||
},
|
||||
updateDate(val){
|
||||
this.dataRange =val || []
|
||||
this.getDate()
|
||||
},
|
||||
handleColsed(done) {
|
||||
if (!this.chart) {
|
||||
return done();
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
done();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep {
|
||||
.card-title .el-radio{
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -2,9 +2,13 @@
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmsdccContainer'" style="margin-bottom:25px;">
|
||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding common-card-container-no-title-bg">
|
||||
<el-card shadow="always" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
||||
:class="{
|
||||
'warning-card-container':baseInfo.workStatus && baseInfo.workStatus !== '0',
|
||||
'running-card-container':baseInfo.workStatus === '0'
|
||||
}">
|
||||
<div slot="header">
|
||||
<span class="large-title">{{index+1}}#{{baseInfo.deviceName}}</span>
|
||||
<span class="large-title">{{index+1}}#{{baseInfo.parentDeviceName?`${baseInfo.parentDeviceName} —> ` : ''}}{{baseInfo.deviceName}}</span>
|
||||
</div>
|
||||
<div class="descriptions-main">
|
||||
<el-descriptions direction="vertical" :column="3" :colon="false">
|
||||
@ -15,14 +19,18 @@
|
||||
</div>
|
||||
<div class="descriptions-main descriptions-main-bg-color">
|
||||
<el-descriptions direction="vertical" :column="3" :colon="false">
|
||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">{{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
|
||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">
|
||||
<span class="pointer" @click="showChart(item.pointName || '','电池簇',baseInfo.deviceId)">
|
||||
{{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<!-- 进度-->
|
||||
<div class="process-container">
|
||||
<div class="process-line-bg">
|
||||
<div class="process-line":style="{height:baseInfo.currentSoc+'%'}"></div>
|
||||
<div class="process-line" :style="{height:baseInfo.currentSoc+'%'}"></div>
|
||||
</div>
|
||||
<div class="process">当前SOC : {{baseInfo.currentSoc}}%</div>
|
||||
<div class="process pointer" @click="showChart( '当前SOC','电池簇',baseInfo.deviceId)">当前SOC : {{baseInfo.currentSoc}}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
@ -41,10 +49,16 @@
|
||||
prop="avgData"
|
||||
label="单体平均值"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.avgData}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="minData"
|
||||
label="单体最小值">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.minData}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="minDataID"
|
||||
@ -53,6 +67,9 @@
|
||||
<el-table-column
|
||||
prop="maxData"
|
||||
label="单体最大值">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointe " @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.maxData}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="maxDataID"
|
||||
@ -62,17 +79,20 @@
|
||||
</el-card>
|
||||
</div>
|
||||
<el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
|
||||
<point-chart ref="pointChart" :site-id="siteId"/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pointChart from "./../PointChart.vue";
|
||||
import {getBMSBatteryCluster} from '@/api/ems/dzjk'
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||
export default {
|
||||
name:'DzjkSbjkBmsdcc',
|
||||
mixins:[getQuerySiteId],
|
||||
components:{},
|
||||
mixins:[getQuerySiteId,intervalUpdate],
|
||||
components:{pointChart},
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
@ -81,27 +101,45 @@ export default {
|
||||
'温度':'℃',
|
||||
'SOC':'%'
|
||||
},
|
||||
tablePointNameMap:{
|
||||
'电压单体最小值':'最低单体电压',
|
||||
'电压单体平均值':'电压平均值',
|
||||
'电压单体最大值':'最高单体电压',
|
||||
'温度单体最小值':'最低单体温度',
|
||||
'温度单体平均值':'温度平均值',
|
||||
'温度单体最大值':'最高单体温度',
|
||||
'SOC单体最小值':'最低单体SOC',
|
||||
'SOC单体平均值':'当前SOC',
|
||||
'SOC单体最大值':'最高单体SOC',
|
||||
},
|
||||
baseInfoList:[],
|
||||
infoData:[
|
||||
{label:'簇电压',attr:'clusterVoltage',unit:'V'},
|
||||
{label:'可充电量',attr:'chargeableCapacity',unit:'kWh'},
|
||||
{label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh'},
|
||||
{label:'簇电流',attr:'clusterCurrent',unit:'A'},
|
||||
{label:'可放电量',attr:'dischargeableCapacity',unit:'kWh'},
|
||||
{label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh'},
|
||||
{label:'SOH',attr:'soh',unit:'%'},
|
||||
{label:'平均温度',attr:'averageTemperature',unit:'℃'},
|
||||
{label:'绝缘电阻',attr:'insulationResistance',unit:'Ω'},
|
||||
{label:'簇电压',attr:'clusterVoltage',unit:'V',pointName:'簇电压'},
|
||||
{label:'可充电量',attr:'chargeableCapacity',unit:'kWh',pointName:'可充电量'},
|
||||
{label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh',pointName:'累计充电量'},
|
||||
{label:'簇电流',attr:'clusterCurrent',unit:'A',pointName:'簇电流'},
|
||||
{label:'可放电量',attr:'dischargeableCapacity',unit:'kWh',pointName:'可放电量'},
|
||||
{label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh',pointName:'累计放电量'},
|
||||
{label:'SOH',attr:'soh',unit:'%',pointName:'SOH'},
|
||||
{label:'平均温度',attr:'averageTemperature',unit:'℃',pointName:'平均温度'},
|
||||
{label:'绝缘电阻',attr:'insulationResistance',unit:'Ω',pointName:'绝缘电阻'},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
init(){
|
||||
showChart(pointName,categoryName,deviceId){
|
||||
console.log('点击查询图表',pointName,categoryName,deviceId)
|
||||
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
|
||||
},
|
||||
updateData(){
|
||||
this.loading = true
|
||||
getBMSBatteryCluster(this.siteId).then(response => {
|
||||
this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
|
||||
}).finally(() => {this.loading = false})
|
||||
|
||||
},
|
||||
init(){
|
||||
this.updateData()
|
||||
this.updateInterval(this.updateData)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,145 +2,165 @@
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmszlContainer'" style="margin-bottom:25px;">
|
||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding common-card-container-no-title-bg">
|
||||
<el-card :class="{
|
||||
'warning-card-container':baseInfo.workStatus && baseInfo.workStatus !== '0',
|
||||
'running-card-container':baseInfo.workStatus === '0'
|
||||
}" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
||||
shadow="always">
|
||||
<div slot="header">
|
||||
<span class="large-title">{{index+1}}#{{baseInfo.deviceName}}</span>
|
||||
</div>
|
||||
<div class="descriptions-main">
|
||||
<el-descriptions direction="vertical" :column="3" :colon="false">
|
||||
<el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" >{{$store.state.ems.workStatusOptions[baseInfo.workStatus]}}</el-descriptions-item>
|
||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="与PCS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item>
|
||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="与EMS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus]}}</el-descriptions-item>
|
||||
<el-descriptions :colon="false" :column="3" direction="vertical">
|
||||
<el-descriptions-item :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" labelClassName="descriptions-label" >{{$store.state.ems.workStatusOptions[baseInfo.workStatus]}}</el-descriptions-item>
|
||||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与PCS通信" labelClassName="descriptions-label">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item>
|
||||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与EMS通信" labelClassName="descriptions-label">{{$store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus]}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div class="descriptions-main descriptions-main-bg-color">
|
||||
<el-descriptions direction="vertical" :column="3" :colon="false">
|
||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">{{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
|
||||
<el-descriptions :colon="false" :column="3" direction="vertical">
|
||||
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label" :span="1" contentClassName="descriptions-direction" labelClassName="descriptions-label">
|
||||
<span class="pointer" @click="showChart(item.pointName || '','电池堆',baseInfo.deviceId)">
|
||||
{{baseInfo[item.attr] | formatNumber}}<span v-if="item.unit" v-html="item.unit"></span>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<!-- 进度-->
|
||||
<div class="process-container">
|
||||
<div class="process-line-bg">
|
||||
<div class="process-line" :style="{height:baseInfo.stackSoc+'%'}"></div>
|
||||
<div :style="{height:baseInfo.stackSoc+'%'}" class="process-line"></div>
|
||||
</div>
|
||||
<div class="process">当前SOC : {{baseInfo.stackSoc}}%</div>
|
||||
<div class="process pointer" @click="showChart('当前SOC','电池堆',baseInfo.deviceId)">当前SOC : {{baseInfo.stackSoc}}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
class="common-table"
|
||||
:data="baseInfo.batteryDataList"
|
||||
stripe
|
||||
class="common-table"
|
||||
max-height="500"
|
||||
stripe
|
||||
style="width: 100%;margin-top:25px;">
|
||||
<el-table-column
|
||||
prop="clusterId"
|
||||
label="簇号">
|
||||
label="簇号"
|
||||
prop="clusterId">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="簇电压"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.clusterVoltage}} V</span>
|
||||
<span class="pointer" @click="showChart('簇电压','电池簇',scope.row.clusterId)">{{scope.row.clusterVoltage}} V</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="簇电流">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.clusterCurrent}} A</span>
|
||||
<span class="pointer" @click="showChart('簇电流','电池簇',scope.row.clusterId)">{{scope.row.clusterCurrent}} A</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="簇SOC">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.currentSoc}} %</span>
|
||||
<span class="pointer" @click="showChart('当前SOC','电池簇',scope.row.clusterId)">{{scope.row.currentSoc}} %</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="maxVoltage"
|
||||
label="单体最高电压">
|
||||
label="单体最高电压"
|
||||
prop="maxVoltage">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.maxCellVoltage}} V</span>
|
||||
<span class="pointer" @click="showChart('最高单体电压','电池簇',scope.row.clusterId)">{{scope.row.maxCellVoltage}} V</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="maxCellVoltageId"
|
||||
label="电池号码">
|
||||
label="电池号码"
|
||||
prop="maxCellVoltageId">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="minVoltage"
|
||||
label="单体最低电压">
|
||||
label="单体最低电压"
|
||||
prop="minVoltage">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.minCellVoltage}} V</span>
|
||||
<span class="pointer" @click="showChart('最低单体电压','电池簇',scope.row.clusterId)">{{scope.row.minCellVoltage}} V</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="minCellVoltageId"
|
||||
label="电池号码">
|
||||
label="电池号码"
|
||||
prop="minCellVoltageId">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="单体最高温度">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.maxCellTemp}} ℃</span>
|
||||
<span class="pointer" @click="showChart('最高单体温度','电池簇',scope.row.clusterId)">{{scope.row.maxCellTemp}} ℃</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="maxCellTempId"
|
||||
label="电池号码">
|
||||
label="电池号码"
|
||||
prop="maxCellTempId">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="minTemperature"
|
||||
label="单体最低温度">
|
||||
label="单体最低温度"
|
||||
prop="minTemperature">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.minCellTemp}} ℃</span>
|
||||
<span class="pointer" @click="showChart('最低单体温度','电池簇',scope.row.clusterId)">{{scope.row.minCellTemp}} ℃</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="minCellTempId"
|
||||
label="电池号码">
|
||||
label="电池号码"
|
||||
prop="minCellTempId">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
|
||||
<point-chart ref="pointChart" :site-id="siteId"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getBMSOverView} from '@/api/ems/dzjk'
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||
import pointChart from "./../PointChart.vue";
|
||||
export default {
|
||||
name:'DzjkSbjkBmszl',
|
||||
mixins:[getQuerySiteId],
|
||||
components: {pointChart,},
|
||||
mixins:[getQuerySiteId,intervalUpdate],
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
baseInfoList:[],
|
||||
infoData:[
|
||||
{label:'电池堆总电压',attr:'stackVoltage',unit:'V'},
|
||||
{label:'可充电量',attr:'availableChargeCapacity',unit:'kWh'},
|
||||
{label:'累计充电量',attr:'totalChargeCapacity',unit:'kWh'},
|
||||
{label:'电池堆总电流',attr:'stackCurrent',unit:'A'},
|
||||
{label:'可放电量',attr:'availableDischargeCapacity',unit:'kWh'},
|
||||
{label:'累计放电量',attr:'totalDischargeCapacity',unit:'kWh'},
|
||||
{label:'SOH',attr:'stackSoh',unit:'%'},
|
||||
{label:'平均温度',attr:'operatingTemp',unit:'℃'},
|
||||
{label:'绝缘电阻',attr:'stackInsulationResistance',unit:'Ω'},
|
||||
{label:'电池堆总电压',attr:'stackVoltage',unit:'V',pointName:'电池堆电压'},
|
||||
{label:'可充电量',attr:'availableChargeCapacity',unit:'kWh',pointName:'可充电量'},
|
||||
{label:'累计充电量',attr:'totalChargeCapacity',unit:'kWh',pointName:'累计充电量'},
|
||||
{label:'电池堆总电流',attr:'stackCurrent',unit:'A',pointName:'电池堆总电流'},
|
||||
{label:'可放电量',attr:'availableDischargeCapacity',unit:'kWh',pointName:'可放电量'},
|
||||
{label:'累计放电量',attr:'totalDischargeCapacity',unit:'kWh',pointName:'累计放电量'},
|
||||
{label:'SOH',attr:'stackSoh',unit:'%',pointName:'SOH'},
|
||||
{label:'平均温度',attr:'operatingTemp',unit:'℃',pointName:'平均温度'},
|
||||
{label:'绝缘电阻',attr:'stackInsulationResistance',unit:'Ω',pointName:'绝缘电阻'},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
init(){
|
||||
this.loading=true;
|
||||
showChart(pointName,categoryName,deviceId){
|
||||
console.log('点击查询图表',pointName,categoryName,deviceId)
|
||||
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
|
||||
},
|
||||
updateData(){
|
||||
this.loading = true
|
||||
getBMSOverView(this.siteId).then(response => {
|
||||
this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
|
||||
}).finally(() => {this.loading = false})
|
||||
},
|
||||
init(){
|
||||
this.updateData()
|
||||
this.updateInterval(this.updateData)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
::v-deep {
|
||||
//描述列表样式
|
||||
.descriptions-main {
|
||||
|
||||
@ -2,16 +2,15 @@
|
||||
<div v-loading="loading">
|
||||
<el-card
|
||||
shadow="always"
|
||||
class="common-card-container"
|
||||
:class="
|
||||
zbInfo.emsCommunicationStatus !== '0'
|
||||
? 'zb-common-card-container'
|
||||
: 'cnb-common-card-container'
|
||||
"
|
||||
class="sbjk-card-container"
|
||||
:class="{
|
||||
'warning-card-container':zbInfo.emsCommunicationStatus && zbInfo.emsCommunicationStatus !== '0',
|
||||
'running-card-container':zbInfo.emsCommunicationStatus === '0'
|
||||
}"
|
||||
>
|
||||
<div slot="header">
|
||||
<span class="large-title">1#{{ zbInfo.deviceName }}</span>
|
||||
<div class="status">
|
||||
<div class="info">
|
||||
<div>
|
||||
{{
|
||||
$store.state.ems.communicationStatusOptions[
|
||||
@ -25,6 +24,7 @@
|
||||
<el-table
|
||||
class="common-table"
|
||||
:data="zbInfo.loadDataDetailInfo"
|
||||
@cell-click="(row,col)=>{handlerCell(zbInfo.deviceId,row,col)}"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
@ -38,17 +38,16 @@
|
||||
</el-card>
|
||||
<el-card
|
||||
shadow="always"
|
||||
class="common-card-container"
|
||||
class="sbjk-card-container"
|
||||
style="margin-top: 20px"
|
||||
:class="
|
||||
cnbInfo.emsCommunicationStatus !== '0'
|
||||
? 'zb-common-card-container'
|
||||
: 'cnb-common-card-container'
|
||||
"
|
||||
:class="{
|
||||
'warning-card-container':zbInfo.emsCommunicationStatus && zbInfo.emsCommunicationStatus !== '0',
|
||||
'running-card-container':zbInfo.emsCommunicationStatus === '0'
|
||||
}"
|
||||
>
|
||||
<div slot="header">
|
||||
<span class="large-title">2#{{ cnbInfo.deviceName }}</span>
|
||||
<div class="status">
|
||||
<div class="info">
|
||||
<div>
|
||||
{{
|
||||
$store.state.ems.communicationStatusOptions[
|
||||
@ -62,6 +61,7 @@
|
||||
<el-table
|
||||
class="common-table"
|
||||
:data="cnbInfo.meteDataDetailInfo"
|
||||
@cell-click="(row,col)=>{handlerCellCN(cnbInfo.deviceId,row,col)}"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
@ -71,15 +71,19 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<point-chart ref="pointChart" :site-id="siteId"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pointChart from "./../PointChart.vue";
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import { getAmmeterDataList } from "@/api/ems/dzjk";
|
||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||
export default {
|
||||
name: "DzjkSbjkDb",
|
||||
mixins: [getQuerySiteId],
|
||||
mixins: [getQuerySiteId,intervalUpdate],
|
||||
components:{pointChart},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
@ -88,20 +92,42 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
handlerCell(id,row,column){
|
||||
if(column.label !== '类别'){
|
||||
const arr = row.category.split('')
|
||||
arr.splice(6,0,column.label[0])
|
||||
this.showChart(arr.join(''),'电表',id)
|
||||
}
|
||||
},
|
||||
handlerCellCN(id,row,column){
|
||||
if(column.label !== '类别'){
|
||||
const arr = row.category.split('')
|
||||
arr.splice(2,arr.length-2,column.label)
|
||||
this.showChart(arr.join(''),'电表',id)
|
||||
}
|
||||
},
|
||||
showChart(pointName,categoryName,deviceId){
|
||||
console.log('点击查询图表',pointName,categoryName,deviceId)
|
||||
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
|
||||
},
|
||||
updateData(){
|
||||
this.loading = true;
|
||||
getAmmeterDataList(this.siteId)
|
||||
.then((response) => {
|
||||
this.zbInfo = JSON.parse(
|
||||
JSON.stringify(response?.data?.ammeterLoadData || {})
|
||||
);
|
||||
this.cnbInfo = JSON.parse(
|
||||
JSON.stringify(response?.data?.ammeterMeteData || {})
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
.then((response) => {
|
||||
this.zbInfo = JSON.parse(
|
||||
JSON.stringify(response?.data?.ammeterLoadData || {})
|
||||
);
|
||||
this.cnbInfo = JSON.parse(
|
||||
JSON.stringify(response?.data?.ammeterMeteData || {})
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
init() {
|
||||
this.updateData()
|
||||
this.updateInterval(this.updateData)
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
@ -109,32 +135,16 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.zb-common-card-container,
|
||||
.cnb-common-card-container {
|
||||
.common-card-container {
|
||||
::v-deep {
|
||||
.el-card__header {
|
||||
padding: 10px 14px;
|
||||
background-color: #fc6b69;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
.el-table__row td{
|
||||
&:not(:first-child){
|
||||
.cell{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cnb-common-card-container {
|
||||
margin-top: 25px;
|
||||
::v-deep {
|
||||
.el-card__header {
|
||||
background-color: #05aea3;
|
||||
}
|
||||
}
|
||||
}
|
||||
.status {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<el-card
|
||||
v-loading="loading"
|
||||
shadow="always"
|
||||
class="common-card-container common-card-container-no-title-bg"
|
||||
class="sbjk-card-container common-card-container-no-title-bg running-card-container"
|
||||
>
|
||||
<div slot="header">
|
||||
<span class="large-title">单体电池实时数据</span>
|
||||
|
||||
@ -1,141 +1,112 @@
|
||||
|
||||
<template>
|
||||
<div class="pcs-ems-dashboard-editor-container" v-loading="loading">
|
||||
<div v-loading="loading" class="pcs-ems-dashboard-editor-container">
|
||||
<!-- 顶部六个方块-->
|
||||
<real-time-base-info :data="runningHeadData"/>
|
||||
<!-- 内容-->
|
||||
<el-container class="pcs-container" v-for="(pcsItem,pcsIndex) in pcsList" :key="pcsIndex+'PcsHome'">
|
||||
<!-- 背景颜色根据工作状态来展示-->
|
||||
<el-header class="pcs-header" :class="pcsItem.workStatus === '1' ? 'warn' : pcsItem.workStatus === '2' ? 'close' : ''">
|
||||
<div class="pcs-title">{{pcsItem.deviceName}}</div>
|
||||
<div class="pcs-status">
|
||||
<div>{{$store.state.ems.communicationStatusOptions[pcsItem.communicationStatus]}}</div>
|
||||
<div>数据更新时间：{{pcsItem.dataUpdateTime}}</div>
|
||||
<div v-for="(pcsItem,pcsIndex) in pcsList" :key="pcsIndex+'PcsHome'" style="margin-bottom:25px;">
|
||||
<el-card :class="{
|
||||
'warning-card-container':pcsItem.workStatus === '1',
|
||||
'timing-card-container':pcsItem.workStatus === '2',
|
||||
'running-card-container':!['1','2'].includes(pcsItem.workStatus)
|
||||
}" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
||||
shadow="always">
|
||||
<div slot="header">
|
||||
<span class="large-title">{{pcsIndex+1}}#{{pcsItem.deviceName}}</span>
|
||||
<div class="info">
|
||||
<div>
|
||||
{{
|
||||
$store.state.ems.communicationStatusOptions[
|
||||
pcsItem.communicationStatus
|
||||
]
|
||||
}}
|
||||
</div>
|
||||
<div>数据更新时间：{{ pcsItem.dataUpdateTime }}</div>
|
||||
</div>
|
||||
<div class="alarm">
|
||||
<el-badge :value="pcsItem.alarmNum || 0" class="item">
|
||||
<i class="el-icon-message-solid" style="font-size: 26px;color: #fff;display: block;"></i>
|
||||
</el-badge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pcs-btns">
|
||||
<el-badge :value="pcsItem.alarmNum || 0" class="item">
|
||||
<i class="el-icon-message-solid" style="font-size: 26px;color: #fff;display: block;"></i>
|
||||
</el-badge>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main style="padding: 0">
|
||||
<div class="descriptions-main">
|
||||
<el-descriptions direction="vertical" :column="4" :colon="false">
|
||||
<el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${pcsItem.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态">{{$store.state.ems.workStatusOptions[pcsItem.workStatus]}}</el-descriptions-item>
|
||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="并网状态">{{$store.state.ems.gridStatusOptions[pcsItem.gridStatus]}}</el-descriptions-item>
|
||||
<el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${pcsItem.deviceStatus === '0' ? 'save' : 'danger'}`" :span="1" label="设备状态">{{$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]}}</el-descriptions-item>
|
||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="控制模式">{{$store.state.ems.controlModeOptions[pcsItem.controlMode]}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div class="descriptions-main descriptions-main-bg-color">
|
||||
<el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction" direction="vertical" :column="4" :colon="false">
|
||||
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">{{pcsItem[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div class="descriptions-main" v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'">
|
||||
<el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction keep" direction="vertical" :column="4" :colon="false">
|
||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction keep" :span="4" :label="'支路'+(index+1)">{{item.dischargeStatus}}</el-descriptions-item>
|
||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流功率">{{item.dcPower}}kW</el-descriptions-item>
|
||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流电压">{{item.dcVoltage}}V</el-descriptions-item>
|
||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流电流">{{item.dcCurrent}}A</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<div class="descriptions-main">
|
||||
<el-descriptions :colon="false" :column="4" direction="vertical">
|
||||
<el-descriptions-item :contentClassName="`descriptions-direction ${pcsItem.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" labelClassName="descriptions-label">{{$store.state.ems.workStatusOptions[pcsItem.workStatus]}}</el-descriptions-item>
|
||||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="并网状态" labelClassName="descriptions-label">{{$store.state.ems.gridStatusOptions[pcsItem.gridStatus]}}</el-descriptions-item>
|
||||
<el-descriptions-item :contentClassName="`descriptions-direction ${pcsItem.deviceStatus === '0' ? 'save' : 'danger'}`" :span="1" label="设备状态" labelClassName="descriptions-label">{{$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]}}</el-descriptions-item>
|
||||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="控制模式" labelClassName="descriptions-label">{{$store.state.ems.controlModeOptions[pcsItem.controlMode]}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div class="descriptions-main descriptions-main-bg-color">
|
||||
<el-descriptions :colon="false" :column="4" contentClassName="descriptions-direction" direction="vertical" labelClassName="descriptions-label">
|
||||
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label" :span="1">
|
||||
<span class="pointer" @click="showChart(item.pointName || '','PCS',pcsItem.deviceId)">
|
||||
{{pcsItem[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'" class="descriptions-main">
|
||||
<el-descriptions :colon="false" :column="4" contentClassName="descriptions-direction keep" direction="vertical" labelClassName="descriptions-label">
|
||||
<el-descriptions-item :label="'支路'+(index+1)" :span="4" contentClassName="descriptions-direction keep" labelClassName="descriptions-label">{{item.dischargeStatus}}</el-descriptions-item>
|
||||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流功率" labelClassName="descriptions-label">
|
||||
<span class="pointer" @click="showChart('直流功率','PCS分支设备',item.deviceId)">{{item.dcPower}}kW</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流电压" labelClassName="descriptions-label">
|
||||
<span class="pointer" @click="showChart('直流电压','PCS分支设备',item.deviceId)">{{item.dcVoltage}}V</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流电流" labelClassName="descriptions-label">
|
||||
<span class="pointer" @click="showChart('直流电流','PCS分支设备',item.deviceId)">{{item.dcCurrent}}A</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-empty v-show="pcsList.length<=0" :image-size="200"></el-empty>
|
||||
|
||||
<!-- 电位图表 showChart({pointName:点位名称,categoryName:设备名称})-->
|
||||
<point-chart ref="pointChart" :site-id="siteId"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pointChart from "./../PointChart.vue";
|
||||
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import {getRunningHeadInfo,getPcsDetailInfo} from '@/api/ems/dzjk'
|
||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||
export default {
|
||||
name:'DzjkSbjkPcs',
|
||||
components:{RealTimeBaseInfo},
|
||||
mixins:[getQuerySiteId],
|
||||
components:{RealTimeBaseInfo,pointChart},
|
||||
mixins:[getQuerySiteId,intervalUpdate],
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
runningHeadData:{},//运行信息
|
||||
pcsList:[],
|
||||
infoData:[
|
||||
{label:'总交流有功电率',attr:'totalActivePower',unit:'kW'},
|
||||
{label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh'},
|
||||
{label:'A相电压',attr:'aPhaseVoltage',unit:'V'},
|
||||
{label:'A相电流',attr:'aPhaseCurrent',unit:'A'},
|
||||
{label:'总交流无功电率',attr:'totalReactivePower',unit:'kVar'},
|
||||
{label:'当天交流放电量',attr:'dailyAcDischargeEnergy',unit:'kWh'},
|
||||
{label:'B相电压',attr:'bPhaseVoltage',unit:'V'},
|
||||
{label:'B相电流',attr:'bPhaseCurrent',unit:'A'},
|
||||
{label:'总交流视在功率',attr:'totalApparentPower',unit:'kVA'},
|
||||
{label:'PCS模块温度',attr:'pcsModuleTemperature',unit:'℃'},
|
||||
{label:'C相电压',attr:'cPhaseVoltage',unit:'V'},
|
||||
{label:'C相电流',attr:'cPhaseCurrent',unit:'A'},
|
||||
{label:'总交流功率因数',attr:'totalPowerFactor',unit:''},
|
||||
{label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'℃'},
|
||||
{label:'交流频率',attr:'acFrequency',unit:'Hz'}
|
||||
{label:'总交流有功电率',attr:'totalActivePower',unit:'kW',pointName:'总交流有功电率'},
|
||||
{label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh',pointName:'当天交流充电量 (kWh)'},
|
||||
{label:'A相电压',attr:'aPhaseVoltage',unit:'V',pointName:''},
|
||||
{label:'A相电流',attr:'aPhaseCurrent',unit:'A',pointName:'A相电流'},
|
||||
{label:'总交流无功电率',attr:'totalReactivePower',unit:'kVar',pointName:'总交流无功电率'},
|
||||
{label:'当天交流放电量',attr:'dailyAcDischargeEnergy',unit:'kWh',pointName:'当天交流放电量 (kWh)'},
|
||||
{label:'B相电压',attr:'bPhaseVoltage',unit:'V',pointName:''},
|
||||
{label:'B相电流',attr:'bPhaseCurrent',unit:'A',pointName:'B相电流'},
|
||||
{label:'总交流视在功率',attr:'totalApparentPower',unit:'kVA',pointName:'总交流视在功率'},
|
||||
{label:'PCS模块温度',attr:'pcsModuleTemperature',unit:'℃',pointName:''},
|
||||
{label:'C相电压',attr:'cPhaseVoltage',unit:'V',pointName:''},
|
||||
{label:'C相电流',attr:'cPhaseCurrent',unit:'A',pointName:'C相电流'},
|
||||
{label:'总交流功率因数',attr:'totalPowerFactor',unit:'',pointName:'总交流功率因数'},
|
||||
{label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'℃',pointName:''},
|
||||
{label:'交流频率',attr:'acFrequency',unit:'Hz',pointName:'交流频率'}
|
||||
],
|
||||
pcsBranchList:[],//pcs的支路列表
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
problemSaved(){
|
||||
this.$confirm('确认故障已复位?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
showClose:false,
|
||||
closeOnClickModal:false,
|
||||
type: 'warning',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
setTimeout(() => {
|
||||
done();
|
||||
instance.confirmButtonLoading = false;
|
||||
}, 3000);
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
}
|
||||
}).then(() => {
|
||||
//只有在故障复位成功的情况下会走到这里
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '故障复位成功!'
|
||||
});
|
||||
}).catch(() => {
|
||||
//取消复位
|
||||
});
|
||||
},
|
||||
machineClosed(){
|
||||
this.$confirm('确认要关机吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
showClose:false,
|
||||
closeOnClickModal:false,
|
||||
type: 'warning',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
setTimeout(() => {
|
||||
done();
|
||||
instance.confirmButtonLoading = false;
|
||||
}, 3000);
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
}
|
||||
}).then(() => {
|
||||
//只有在关机成功的情况下会走到这里
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '关机成功!'
|
||||
});
|
||||
}).catch(() => {
|
||||
//取消关机
|
||||
});
|
||||
//todo 后续需要新增设备id
|
||||
showChart(pointName,categoryName,deviceId){
|
||||
console.log('点击查询图表',pointName,categoryName,deviceId)
|
||||
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
|
||||
},
|
||||
//6个方块数据
|
||||
getRunningHeadData(){
|
||||
@ -150,54 +121,18 @@ export default {
|
||||
this.pcsList = JSON.parse(JSON.stringify(data))
|
||||
}).finally(()=>this.loading = false)
|
||||
},
|
||||
init(){
|
||||
updateData(){
|
||||
this.getRunningHeadData()
|
||||
this.getPcsList()
|
||||
},
|
||||
init(){
|
||||
this.updateData()
|
||||
this.updateInterval(this.updateData)
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pcs-container{
|
||||
margin-top: 25px;
|
||||
border:1px solid #eeeeee;
|
||||
border-radius: 6px 6px 0 0;
|
||||
//红色标题
|
||||
.pcs-header{
|
||||
background: #05AEA3;
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
height: 60px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
.pcs-title{
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
padding: 0 50px 0 25px;
|
||||
}
|
||||
.pcs-status{
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.pcs-btns{
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.pcs-header.warn{
|
||||
background-color:#FC6B69 ;
|
||||
}
|
||||
.pcs-header.close{
|
||||
background-color:#666666 ;
|
||||
}
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
@ -34,11 +34,12 @@ import DcpjwdChart from './DcpjwdChart.vue'
|
||||
import DcpjsocChart from './DcpjsocChart.vue'
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import {getRunningHeadInfo} from '@/api/ems/dzjk'
|
||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||
|
||||
export default {
|
||||
name:'DzjkSbjkSsyx',
|
||||
components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart},
|
||||
mixins:[getQuerySiteId],
|
||||
mixins:[getQuerySiteId,intervalUpdate],
|
||||
data() {
|
||||
return {
|
||||
runningHeadData:{},//运行信息
|
||||
@ -51,15 +52,18 @@ export default {
|
||||
this.runningHeadData = response?.data || {}
|
||||
})
|
||||
},
|
||||
updateData(){
|
||||
this.$refs.cnglqx.init(this.siteId)
|
||||
this.$refs.pocpjwd.init(this.siteId)
|
||||
this.$refs.dcpjsoc.init(this.siteId)
|
||||
this.$refs.dcpjwd.init(this.siteId)
|
||||
},
|
||||
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)
|
||||
this.updateData()
|
||||
this.updateInterval(this.updateData)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<div class="yl-item-container" :class="{'yl-warn-item-container':item.workMode !== '0'}" v-for="(item,index) in list" :key="index+'ylLise'">
|
||||
<div class="yl-item-container" :class="{'yl-warn-item-container':item.workMode !== '0','yl-normal-item-container':item.workMode === '0'}" v-for="(item,index) in list" :key="index+'ylLise'">
|
||||
<div class="header">
|
||||
<div class="header-title">{{item.systemName}}</div>
|
||||
<div>工作模式：<span class="header-values">{{$store.state.ems.workModeOptions[item.workMode]}}</span></div>
|
||||
@ -21,9 +21,10 @@
|
||||
<script>
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import {getCoolingDataList} from '@/api/ems/dzjk'
|
||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||
export default {
|
||||
name:'DzjkSbjkYl',
|
||||
mixins:[getQuerySiteId],
|
||||
mixins:[getQuerySiteId,intervalUpdate],
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
@ -40,11 +41,15 @@ export default {
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
init(){
|
||||
updateData(){
|
||||
this.loading = true
|
||||
getCoolingDataList(this.siteId).then(response => {
|
||||
this.list = JSON.parse(JSON.stringify(response?.data || []));
|
||||
}).finally(() => {this.loading = false})
|
||||
},
|
||||
init(){
|
||||
this.updateData()
|
||||
this.updateInterval(this.updateData)
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
@ -56,7 +61,6 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.yl-item-container{
|
||||
border-radius: 5px;
|
||||
background-color: #EBF6F6;
|
||||
&:not(:last-child){
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
@ -73,11 +77,9 @@ export default {
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
background-color: #05AEA3;
|
||||
text-align: center;
|
||||
}
|
||||
.header-values{
|
||||
color: #05AEA3;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@ -113,5 +115,16 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.yl-normal-item-container{
|
||||
background-color: #EBF6F6;
|
||||
.header{
|
||||
.header-title{
|
||||
background-color: #05AEA3;
|
||||
}
|
||||
.header-values{
|
||||
color: #05AEA3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -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(){
|
||||
|
||||
@ -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(){
|
||||
|
||||
@ -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'
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
@ -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(){
|
||||
|
||||
@ -112,11 +112,14 @@
|
||||
>
|
||||
{{ communicationStatusOptions[item.communicationStatus] }}
|
||||
</div>
|
||||
<div class="row-items-img">
|
||||
<img
|
||||
class="img-bms"
|
||||
:src="require('@/assets/images/ems/bms.png')"
|
||||
/>
|
||||
<div class="row-items-img row-items-img-bms">
|
||||
<div style="position:relative;">
|
||||
<img
|
||||
class="img-bms"
|
||||
:src="require('@/assets/images/ems/bms.png')"
|
||||
/>
|
||||
<div class="num">{{item.batteryNum || 0}}</div>
|
||||
</div>
|
||||
<div class="name">{{ item.deviceName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -179,11 +182,14 @@
|
||||
]
|
||||
}}
|
||||
</div>
|
||||
<div class="row-items-img">
|
||||
<img
|
||||
class="img-pcs"
|
||||
:src="require('@/assets/images/ems/bms.png')"
|
||||
/>
|
||||
<div class="row-items-img row-items-img-bms">
|
||||
<div style="position: relative">
|
||||
<img
|
||||
class="img-bms"
|
||||
:src="require('@/assets/images/ems/bms.png')"
|
||||
/>
|
||||
<div class="num">{{item.batteryNum || 0}}</div>
|
||||
</div>
|
||||
<div class="name">{{ item.children[0].deviceName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -505,10 +511,26 @@ $lineColor: #86bcc7;
|
||||
.row-items-img {
|
||||
position: relative;
|
||||
padding-top: 12px;
|
||||
&.row-items-img-bms{
|
||||
padding-top: 14px;
|
||||
.num{
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
padding: 2px 4px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
background-color: #03c69d;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 80px;
|
||||
height: auto;
|
||||
display: block;
|
||||
position: relative;
|
||||
&.img-lq {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user