合并develop最新代码
This commit is contained in:
@ -1,148 +1,221 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="ems-dashboard-editor-container">
|
||||
<el-row :gutter="32" style="background:#fff;">
|
||||
<el-col :xs="24" :sm="24" :lg="10">
|
||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
|
||||
<div
|
||||
class="ems-dashboard-editor-container ems-content-container-padding"
|
||||
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-col>
|
||||
<el-col :xs="24" :sm="24" :lg="6">
|
||||
<el-card
|
||||
shadow="always"
|
||||
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="height: 310px" >
|
||||
<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"
|
||||
>
|
||||
<div slot="header">
|
||||
<span class="card-title">总累计运行数据</span>
|
||||
</div>
|
||||
<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">{{item.value | 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="14">
|
||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
|
||||
<div slot="header">
|
||||
<span class="card-title">实时告警</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text" size="small">通讯状态：<span style="color:red">超时</span></el-button>-->
|
||||
</div>
|
||||
<div class="ssgj-container">
|
||||
<el-table
|
||||
class="common-table"
|
||||
:data="tableData"
|
||||
height="100%"
|
||||
stripe
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="deviceName"
|
||||
label="名称">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="状态"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span :class="{'circle warning-status' : scope.row.status !== 0}">{{ $store.state.ems.warnOptions[scope.row.status]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
class-name="alarm-content"
|
||||
prop="alarmContent"
|
||||
label="告警内容">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="工单"
|
||||
fixed="right"
|
||||
width="250"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="mini" v-if="scope.row.ticketNo" @click="toTicket">已生成工单(工单号:{{scope.row.ticketNo}})</el-button>
|
||||
<el-button type="primary" size="mini" v-else @click="toTicket">生成工单</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-col :xs="24" :sm="24" :lg="10">
|
||||
<cl-info :info="runningInfo.strategyTempInfo" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="24">
|
||||
<week-chart ref="weekChart" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="24">
|
||||
<active-chart ref="activeChart" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<nllz-chart ref="nllzChart"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getDzjkHomeView} from '@/api/ems/dzjk'
|
||||
import NllzChart from "./NllzChart.vue";
|
||||
import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
|
||||
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";
|
||||
export default {
|
||||
name:'DzjkSbjkHome',
|
||||
components: {NllzChart},
|
||||
name: "DzjkSbjkHome",
|
||||
components: { WeekChart, ActiveChart, AlarmTable, ClInfo },
|
||||
mixins: [getQuerySiteId],
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
sjglData:[{
|
||||
title:'今日充电量（MWh）',
|
||||
value:'',
|
||||
attr:'dayChargedCap'
|
||||
},{
|
||||
title:'今日放电量（MWh）',
|
||||
value:'',
|
||||
attr:'dayDisChargedCap'
|
||||
},{
|
||||
title:'总充电量（MWh）',
|
||||
value:'',
|
||||
attr:'totalChargedCap'
|
||||
},{
|
||||
title:'总放电量（MWh）',
|
||||
value:'',
|
||||
attr:'totalDischargedCap'
|
||||
}],
|
||||
// todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
|
||||
tableData:[]
|
||||
}
|
||||
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: {}, //总累计运行数据+报警表格
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
toTicket(){
|
||||
this.$router.push({path:'/ticket'})
|
||||
computed: {
|
||||
tableData() {
|
||||
console.log(
|
||||
"this.runningInfo?.siteMonitorHomeAlarmVo ",
|
||||
this.runningInfo?.siteMonitorHomeAlarmVo
|
||||
);
|
||||
return this.runningInfo?.siteMonitorHomeAlarmVo || [];
|
||||
},
|
||||
init(){
|
||||
this.loading = true
|
||||
getDzjkHomeView(this.siteId).then(response => {
|
||||
const data = response?.data || {}
|
||||
this.sjglData.forEach(item=>{
|
||||
item.value =data[item.attr]
|
||||
})
|
||||
this.tableData = data?.siteMonitorHomeAlarmVo || []
|
||||
this.$refs.nllzChart.setOption(data)
|
||||
}).finally(() => {this.loading = false})
|
||||
}
|
||||
},
|
||||
}
|
||||
methods: {
|
||||
getBaseInfo() {
|
||||
return getSingleSiteBaseInfo(this.siteId).then((response) => {
|
||||
this.info = response?.data || {};
|
||||
});
|
||||
},
|
||||
getRunningInfo() {
|
||||
return getDzjkHomeView(this.siteId).then((response) => {
|
||||
this.runningInfo = response?.data || {};
|
||||
});
|
||||
},
|
||||
init() {
|
||||
this.loading = true;
|
||||
// 功率曲线
|
||||
this.$refs.activeChart.init(this.siteId);
|
||||
// 一周冲放曲线
|
||||
this.$refs.weekChart.init(this.siteId);
|
||||
// 静态信息 this.getBaseInfo()
|
||||
// 总累计运行数据+故障告警 this.getRunningInfo()
|
||||
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;
|
||||
margin-top:20px;
|
||||
.sjgl-title{
|
||||
.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;
|
||||
line-height: 14px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.sjgl-value{
|
||||
color: rgba(51,51,51,1);
|
||||
font-size: 26px;
|
||||
line-height: 26px;
|
||||
font-weight: 500;
|
||||
margin-top: 14px;
|
||||
.el-descriptions-item__content {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
//实时告警
|
||||
.ssgj-container{
|
||||
padding:20px;
|
||||
height: 310px;
|
||||
box-sizing: border-box;
|
||||
::v-deep{
|
||||
.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
|
||||
background:#FFF2CB ;
|
||||
}
|
||||
/* 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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user