348 lines
8.7 KiB
Vue
348 lines
8.7 KiB
Vue
<template>
|
||
<div v-loading="loading">
|
||
<el-row style="background: #fff" class="row-container" :gutter="15">
|
||
<el-col :xs="24" :sm="24" :lg="5">
|
||
<!-- 站点信息-->
|
||
<el-card
|
||
shadow="always"
|
||
class="common-card-container common-card-container-body-no-padding"
|
||
>
|
||
<div slot="header">
|
||
<span class="card-title">站点信息</span>
|
||
<div class="alarm-msg" v-if="tableData.length > 0" @click="toAlarm">
|
||
<i class="el-icon-message-solid"></i> 设备告警
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="box-sizing: border-box; height: 218px; padding: 20px 15px"
|
||
>
|
||
<!-- 地址、运行时间-->
|
||
<div class="site-info site-info-address">
|
||
<div class="title">
|
||
<i class="el-icon-location"></i>
|
||
</div>
|
||
<div class="value">{{ info.siteAddress }}</div>
|
||
</div>
|
||
<div class="site-info">
|
||
<div class="title">
|
||
<i class="el-icon-date"></i>
|
||
</div>
|
||
<div class="value">{{ info.runningTime || '-' }}</div>
|
||
</div>
|
||
<!-- 装机功率、容量 -->
|
||
<el-row :gutter="10" style="margin-top:20px;">
|
||
<el-col
|
||
:span="12"
|
||
class="sjgl-col power-col"
|
||
>
|
||
<div class="sjgl-wrapper">
|
||
<div class="sjgl-title">装机功率(MW)</div>
|
||
<div class="sjgl-value">
|
||
{{ info.installPower | formatNumber }}
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col
|
||
:span="12"
|
||
class="sjgl-col power-col"
|
||
>
|
||
<div class="sjgl-wrapper">
|
||
<div class="sjgl-title">装机容量(MW)</div>
|
||
<div class="sjgl-value">
|
||
{{ info.installCapacity | formatNumber }}
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<!--策略信息-->
|
||
<!-- <el-col :xs="24" :sm="24" :lg="16">-->
|
||
<!-- <cl-info :info="runningInfo.strategyTempInfo"/>-->
|
||
<!-- </el-col>-->
|
||
<!-- 总累计运行数据-->
|
||
<el-col :xs="24" :sm="24" :lg="19">
|
||
<el-card
|
||
shadow="always"
|
||
class="common-card-container common-card-container-body-no-padding"
|
||
>
|
||
<div slot="header">
|
||
<span class="card-title">总累计运行数据</span>
|
||
<div class="total-count">
|
||
<span class="title">总收入</span>
|
||
<span class="value">{{ runningInfo.totalRevenue | formatNumber }}</span>
|
||
<span class="unit">元</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="box-sizing: border-box; height: 218px; padding: 20px 15px"
|
||
>
|
||
<el-row :gutter="10">
|
||
<el-col
|
||
:span="6"
|
||
v-for="(item, index) in sjglData"
|
||
:key="index + 'sjglData'"
|
||
class="sjgl-col"
|
||
>
|
||
<div class="sjgl-wrapper">
|
||
<div class="sjgl-title">{{ item.title }}</div>
|
||
<div class="sjgl-value" :style="{color:item.color}">
|
||
{{ runningInfo[item.attr] | formatNumber }}
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :lg="12">
|
||
<week-chart ref="weekChart"/>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :lg="12">
|
||
<active-chart ref="activeChart"/>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
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 intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||
|
||
export default {
|
||
name: "DzjkSbjkHome",
|
||
components: {WeekChart, ActiveChart, AlarmTable, ClInfo},
|
||
mixins: [getQuerySiteId, intervalUpdate],
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
sjglData: [
|
||
{
|
||
title: "今日充电量（kWh）",
|
||
attr: "dayChargedCap",
|
||
color: '#4472c4'
|
||
},
|
||
{
|
||
title: "今日放电量（kWh）",
|
||
attr: "dayDisChargedCap",
|
||
color: '#70ad47'
|
||
},
|
||
{
|
||
title: "总充电量（kWh）",
|
||
attr: "totalChargedCap",
|
||
color: '#4472c4'
|
||
},
|
||
{
|
||
title: "今日实时收入（元）",
|
||
attr: "dayRevenue",
|
||
color: '#f67438'
|
||
},
|
||
{
|
||
title: "昨日充电量（kWh）",
|
||
attr: "todo",
|
||
color: '#4472c4'
|
||
},
|
||
{
|
||
title: "昨日放电量（kWh）",
|
||
attr: "todo",
|
||
color: '#70ad47'
|
||
},
|
||
{
|
||
title: "总放电量（kWh）",
|
||
attr: "totalDischargedCap",
|
||
color: '#70ad47'
|
||
},
|
||
{
|
||
title: "昨日实时收入（元）",
|
||
attr: "todo",
|
||
color: '#f67438'
|
||
},
|
||
],
|
||
info: {}, //基本信息
|
||
runningInfo: {}, //总累计运行数据+报警表格
|
||
};
|
||
},
|
||
computed: {
|
||
tableData() {
|
||
console.log(
|
||
"this.runningInfo?.siteMonitorHomeAlarmVo ",
|
||
this.runningInfo?.siteMonitorHomeAlarmVo
|
||
);
|
||
return this.runningInfo?.siteMonitorHomeAlarmVo || [];
|
||
},
|
||
},
|
||
methods: {
|
||
toAlarm() {
|
||
this.$router.push({path: "/dzjk/gzgj", query: this.$route.query});
|
||
},
|
||
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;
|
||
});
|
||
// 一分钟循环一次总累计运行数据
|
||
this.updateInterval(this.getRunningInfo);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
//设备告警
|
||
.alarm-msg {
|
||
background: #ff4949;
|
||
padding: 2px 5px;
|
||
font-size: 10px;
|
||
font-weight: bolder;
|
||
border-radius: 3px;
|
||
line-height: 20px;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
//基本信息-地址 运行️时间
|
||
.site-info {
|
||
display: flex;
|
||
font-size: 12px;
|
||
line-height: 20px;
|
||
margin-bottom: 10px;
|
||
align-items: center;
|
||
|
||
&.site-info-address {
|
||
height: 40px;
|
||
}
|
||
|
||
.title {
|
||
color: #1791ff;
|
||
font-size: 18px;
|
||
line-height: 20px;
|
||
margin-right: 7px;
|
||
}
|
||
|
||
.value {
|
||
color: #000;
|
||
font-size: 12px;
|
||
max-height: 40px;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
//总收入
|
||
.total-count {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 12px;
|
||
font-weight: bolder;
|
||
color: #333;
|
||
line-height: 14px;
|
||
|
||
.unit {
|
||
font-style: italic;
|
||
}
|
||
|
||
.value {
|
||
font-size: 22px;
|
||
font-weight: bolder;
|
||
color: #ed2f1d;
|
||
font-style: italic;
|
||
padding: 0 5px;
|
||
}
|
||
}
|
||
|
||
.row-container {
|
||
& > .el-col {
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
|
||
//数据概览
|
||
.sjgl-col {
|
||
.sjgl-wrapper {
|
||
text-align: left;
|
||
padding: 15px 20px;
|
||
background-color: #f2f7fb;
|
||
}
|
||
|
||
&.power-col {
|
||
.sjgl-wrapper {
|
||
padding: 10px;
|
||
|
||
.sjgl-value {
|
||
color: #c44444;
|
||
}
|
||
}
|
||
}
|
||
|
||
&:nth-child(4),
|
||
&:nth-child(2),
|
||
&:nth-child(3),
|
||
&:nth-child(4) {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.sjgl-title {
|
||
color: #717171;
|
||
line-height: 14px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.sjgl-value {
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 22px;
|
||
line-height: 26px;
|
||
font-weight: bolder;
|
||
font-style: italic;
|
||
margin-top: 14px;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
}
|
||
}
|
||
</style>
|