单体电池、策略
This commit is contained in:
@ -1,185 +1,218 @@
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<el-row style="background:#fff;" class="row-container" :gutter="15">
|
||||
<el-col v-if="tableData.length>0" :xs="24" :sm="24" :lg="24">
|
||||
<alarm-table :tableData="tableData"/>
|
||||
<el-row style="background: #fff" class="row-container" :gutter="15">
|
||||
<el-col v-if="tableData.length > 0" :xs="24" :sm="24" :lg="24">
|
||||
<alarm-table :tableData="tableData" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="6">
|
||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
|
||||
<el-card
|
||||
shadow="always"
|
||||
class="common-card-container common-card-container-body-no-padding"
|
||||
>
|
||||
<div slot="header">
|
||||
<span class="card-title">静态信息</span>
|
||||
</div>
|
||||
<div style="box-sizing: border-box; height: 250px;padding:20px 15px;" >
|
||||
<el-descriptions class="home-normal-info" :column="1" >
|
||||
<el-descriptions-item size="mini" v-for="(item,index) in singleZdInfo" :key="index+'singleZdInfo'" :label="item.title">{{info[item.attr] | formatNumber }}</el-descriptions-item>
|
||||
<div
|
||||
style="box-sizing: border-box; height: 250px; padding: 20px 15px"
|
||||
>
|
||||
<el-descriptions class="home-normal-info" :column="1">
|
||||
<el-descriptions-item
|
||||
size="mini"
|
||||
v-for="(item, index) in singleZdInfo"
|
||||
:key="index + 'singleZdInfo'"
|
||||
:label="item.title"
|
||||
>{{ info[item.attr] | formatNumber }}</el-descriptions-item
|
||||
>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
|
||||
<el-card
|
||||
shadow="always"
|
||||
class="common-card-container common-card-container-body-no-padding"
|
||||
>
|
||||
<div slot="header">
|
||||
<span class="card-title">总累计运行数据</span>
|
||||
</div>
|
||||
<div style="box-sizing: border-box; height: 250px;padding:20px 15px;" >
|
||||
<div
|
||||
style="box-sizing: border-box; height: 250px; padding: 20px 15px"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" v-for="(item,index) in sjglData" :key="index+'sjglData'" class="sjgl-data">
|
||||
<div class="sjgl-title">{{item.title}}</div>
|
||||
<div class="sjgl-value">{{runningInfo[item.attr] | formatNumber}}</div>
|
||||
<el-col
|
||||
:span="12"
|
||||
v-for="(item, index) in sjglData"
|
||||
:key="index + 'sjglData'"
|
||||
class="sjgl-data"
|
||||
>
|
||||
<div class="sjgl-title">{{ item.title }}</div>
|
||||
<div class="sjgl-value">
|
||||
{{ runningInfo[item.attr] | formatNumber }}
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="10">
|
||||
<cl-info :info="{}"/>
|
||||
<cl-info :info="runningInfo.strategyTempInfo" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="24">
|
||||
<week-chart ref="weekChart"/>
|
||||
<week-chart ref="weekChart" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="24">
|
||||
<active-chart ref="activeChart"/>
|
||||
<active-chart ref="activeChart" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getSingleSiteBaseInfo} from '@/api/ems/zddt'
|
||||
import {getDzjkHomeView} from '@/api/ems/dzjk'
|
||||
import { getSingleSiteBaseInfo } from "@/api/ems/zddt";
|
||||
import { getDzjkHomeView } from "@/api/ems/dzjk";
|
||||
import WeekChart from "./WeekChart.vue";
|
||||
import ActiveChart from "./ActiveChart.vue";
|
||||
import AlarmTable from "./AlarmTable.vue";
|
||||
import ClInfo from './ClInfo.vue';
|
||||
import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
|
||||
import ClInfo from "./ClInfo.vue";
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
export default {
|
||||
name:'DzjkSbjkHome',
|
||||
components: {WeekChart,ActiveChart,AlarmTable,ClInfo},
|
||||
name: "DzjkSbjkHome",
|
||||
components: { WeekChart, ActiveChart, AlarmTable, ClInfo },
|
||||
mixins: [getQuerySiteId],
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
singleZdInfo:[{
|
||||
title:'电站位置',
|
||||
attr:'siteAddress'
|
||||
},{
|
||||
title:'投运时间',
|
||||
attr:'runningTime'
|
||||
},{
|
||||
title:'装机功率(MW)',
|
||||
attr:'installPower'
|
||||
},{
|
||||
title:'装机容量(MW)',
|
||||
attr:'installCapacity',
|
||||
}],
|
||||
sjglData:[{
|
||||
title:'今日充电量（MWh）',
|
||||
attr:'dayChargedCap'
|
||||
},{
|
||||
title:'今日放电量（MWh）',
|
||||
attr:'dayDisChargedCap'
|
||||
},{
|
||||
title:'总充电量（MWh）',
|
||||
attr:'totalChargedCap'
|
||||
},{
|
||||
title:'总放电量（MWh）',
|
||||
attr:'totalDischargedCap'
|
||||
}],
|
||||
info:{},//基本信息
|
||||
runningInfo:{},//总累计运行数据+报警表格
|
||||
}
|
||||
loading: false,
|
||||
singleZdInfo: [
|
||||
{
|
||||
title: "电站位置",
|
||||
attr: "siteAddress",
|
||||
},
|
||||
{
|
||||
title: "投运时间",
|
||||
attr: "runningTime",
|
||||
},
|
||||
{
|
||||
title: "装机功率(MW)",
|
||||
attr: "installPower",
|
||||
},
|
||||
{
|
||||
title: "装机容量(MW)",
|
||||
attr: "installCapacity",
|
||||
},
|
||||
],
|
||||
sjglData: [
|
||||
{
|
||||
title: "今日充电量（MWh）",
|
||||
attr: "dayChargedCap",
|
||||
},
|
||||
{
|
||||
title: "今日放电量（MWh）",
|
||||
attr: "dayDisChargedCap",
|
||||
},
|
||||
{
|
||||
title: "总充电量（MWh）",
|
||||
attr: "totalChargedCap",
|
||||
},
|
||||
{
|
||||
title: "总放电量（MWh）",
|
||||
attr: "totalDischargedCap",
|
||||
},
|
||||
],
|
||||
info: {}, //基本信息
|
||||
runningInfo: {}, //总累计运行数据+报警表格
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
tableData(){
|
||||
console.log('this.runningInfo?.siteMonitorHomeAlarmVo ',this.runningInfo?.siteMonitorHomeAlarmVo )
|
||||
return this.runningInfo?.siteMonitorHomeAlarmVo || []
|
||||
}
|
||||
computed: {
|
||||
tableData() {
|
||||
console.log(
|
||||
"this.runningInfo?.siteMonitorHomeAlarmVo ",
|
||||
this.runningInfo?.siteMonitorHomeAlarmVo
|
||||
);
|
||||
return this.runningInfo?.siteMonitorHomeAlarmVo || [];
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
getBaseInfo(){
|
||||
return getSingleSiteBaseInfo(this.siteId).then(response => {
|
||||
this.info = response?.data || {}
|
||||
})
|
||||
methods: {
|
||||
getBaseInfo() {
|
||||
return getSingleSiteBaseInfo(this.siteId).then((response) => {
|
||||
this.info = response?.data || {};
|
||||
});
|
||||
},
|
||||
getRunningInfo(){
|
||||
return getDzjkHomeView(this.siteId).then(response => {
|
||||
this.runningInfo = response?.data || {}
|
||||
})
|
||||
getRunningInfo() {
|
||||
return getDzjkHomeView(this.siteId).then((response) => {
|
||||
this.runningInfo = response?.data || {};
|
||||
});
|
||||
},
|
||||
init(){
|
||||
this.loading = true
|
||||
init() {
|
||||
this.loading = true;
|
||||
// 功率曲线
|
||||
this.$refs.activeChart.init(this.siteId)
|
||||
this.$refs.activeChart.init(this.siteId);
|
||||
// 一周冲放曲线
|
||||
this.$refs.weekChart.init(this.siteId)
|
||||
this.$refs.weekChart.init(this.siteId);
|
||||
// 静态信息 this.getBaseInfo()
|
||||
// 总累计运行数据+故障告警 this.getRunningInfo()
|
||||
Promise.all([this.getBaseInfo(),this.getRunningInfo()]).finally(()=>{
|
||||
this.loading = false
|
||||
})
|
||||
|
||||
}
|
||||
Promise.all([this.getBaseInfo(), this.getRunningInfo()]).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.row-container{
|
||||
&>.el-col{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
//数据概览
|
||||
.sjgl-data{
|
||||
text-align: center;
|
||||
&:nth-child(1),&:nth-child(2){
|
||||
margin-bottom:25px;
|
||||
}
|
||||
.sjgl-title{
|
||||
color: #666666;
|
||||
line-height: 14px;
|
||||
}
|
||||
.sjgl-value{
|
||||
color: rgba(51,51,51,1);
|
||||
font-size: 26px;
|
||||
line-height: 26px;
|
||||
font-weight: 500;
|
||||
margin-top: 14px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.row-container {
|
||||
& > .el-col {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
//数据概览
|
||||
.sjgl-data {
|
||||
text-align: center;
|
||||
&:nth-child(1),
|
||||
&:nth-child(2) {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.sjgl-title {
|
||||
color: #666666;
|
||||
line-height: 14px;
|
||||
}
|
||||
.sjgl-value {
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-size: 26px;
|
||||
line-height: 26px;
|
||||
font-weight: 500;
|
||||
margin-top: 14px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.home-normal-info{
|
||||
font-size: 12px;
|
||||
.el-descriptions-item__container{
|
||||
.el-descriptions-item__label{
|
||||
color:#666666;
|
||||
}
|
||||
.el-descriptions-item__content{
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.home-normal-info {
|
||||
font-size: 12px;
|
||||
.el-descriptions-item__container {
|
||||
.el-descriptions-item__label {
|
||||
color: #666666;
|
||||
}
|
||||
.el-descriptions-item__content {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* card标题里的时间选择器 */
|
||||
.time-range-card{
|
||||
&.common-card-container .el-card__header{
|
||||
.time-range-card {
|
||||
&.common-card-container .el-card__header {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
.time-range-header{
|
||||
.time-range-header {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.card-title{
|
||||
.card-title {
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user