重构
This commit is contained in:
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<div>
|
||||
<el-row style="background: #fff" class="row-container" :gutter="15">
|
||||
<el-col :xs="24" :sm="24" :lg="5">
|
||||
<!-- 站点信息-->
|
||||
@ -21,13 +21,19 @@
|
||||
<div class="title">
|
||||
<i class="el-icon-location"></i>
|
||||
</div>
|
||||
<div class="value">{{ info.siteAddress }}</div>
|
||||
<div class="value">
|
||||
<i v-if="isBaseInfoLoading" class="el-icon-loading"></i>
|
||||
<span v-else>{{ info.siteAddress || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-info">
|
||||
<div class="title">
|
||||
<i class="el-icon-date"></i>
|
||||
</div>
|
||||
<div class="value">{{ info.runningTime || '-' }}</div>
|
||||
<div class="value">
|
||||
<i v-if="isBaseInfoLoading" class="el-icon-loading"></i>
|
||||
<span v-else>{{ info.runningTime || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 装机功率、容量 -->
|
||||
<el-row :gutter="10" style="margin-top:20px;">
|
||||
@ -38,7 +44,8 @@
|
||||
<div class="sjgl-wrapper">
|
||||
<div class="sjgl-title">装机功率(MW)</div>
|
||||
<div class="sjgl-value">
|
||||
{{ info.installPower | formatNumber }}
|
||||
<i v-if="isBaseInfoLoading" class="el-icon-loading"></i>
|
||||
<span v-else>{{ info.installPower | formatNumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -49,7 +56,8 @@
|
||||
<div class="sjgl-wrapper">
|
||||
<div class="sjgl-title">装机容量(MW)</div>
|
||||
<div class="sjgl-value">
|
||||
{{ info.installCapacity | formatNumber }}
|
||||
<i v-if="isBaseInfoLoading" class="el-icon-loading"></i>
|
||||
<span v-else>{{ info.installCapacity | formatNumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -67,7 +75,10 @@
|
||||
<span class="card-title">总累计运行数据</span>
|
||||
<div class="total-count">
|
||||
<span class="title">总收入</span>
|
||||
<span class="value">{{ runningInfo.totalRevenue | formatNumber }}</span>
|
||||
<span class="value">
|
||||
<i v-if="isRunningInfoLoading" class="el-icon-loading"></i>
|
||||
<span v-else>{{ totalRevenueDisplayValue | formatNumber }}</span>
|
||||
</span>
|
||||
<span class="unit">元</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -77,14 +88,15 @@
|
||||
<el-row :gutter="10">
|
||||
<el-col
|
||||
:span="6"
|
||||
v-for="(item, index) in sjglData"
|
||||
v-for="(item, index) in runningDataCards"
|
||||
: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 }}
|
||||
<i v-if="item.loading" class="el-icon-loading"></i>
|
||||
<span v-else>{{ item.value | formatNumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -104,7 +116,7 @@
|
||||
|
||||
<script>
|
||||
import {getSingleSiteBaseInfo} from "@/api/ems/zddt";
|
||||
import {getDzjkHomeView} from "@/api/ems/dzjk";
|
||||
import {getDzjkHomeView, getProjectDisplayData} from "@/api/ems/dzjk";
|
||||
import WeekChart from "./WeekChart.vue";
|
||||
import ActiveChart from "./ActiveChart.vue";
|
||||
import AlarmTable from "./AlarmTable.vue";
|
||||
@ -119,7 +131,9 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
sjglData: [
|
||||
baseInfoLoading: false,
|
||||
runningInfoLoading: false,
|
||||
fallbackSjglData: [
|
||||
{
|
||||
title: "今日充电量（kWh）",
|
||||
attr: "dayChargedCap",
|
||||
@ -163,38 +177,106 @@ export default {
|
||||
],
|
||||
info: {}, //基本信息
|
||||
runningInfo: {}, //总累计运行数据+报警表格
|
||||
runningDisplayData: [], //单站监控项目配置展示数据
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isBaseInfoLoading() {
|
||||
const state = this.$data || {};
|
||||
return !!(state.baseInfoLoading || state.loading);
|
||||
},
|
||||
isRunningInfoLoading() {
|
||||
const state = this.$data || {};
|
||||
return !!(state.runningInfoLoading || state.loading);
|
||||
},
|
||||
tableData() {
|
||||
return this.runningInfo?.siteMonitorHomeAlarmVo || [];
|
||||
},
|
||||
totalRunningSectionData() {
|
||||
return (this.runningDisplayData || []).filter(item => item.sectionName === "总累计运行数据");
|
||||
},
|
||||
totalRevenueDisplayItem() {
|
||||
const sectionData = this.totalRunningSectionData || [];
|
||||
const byFieldCode = sectionData.find(item => item.fieldCode === "totalRevenue");
|
||||
if (byFieldCode) {
|
||||
return byFieldCode;
|
||||
}
|
||||
return sectionData.find(item => item.fieldName === "总收入");
|
||||
},
|
||||
totalRevenueDisplayValue() {
|
||||
return this.totalRevenueDisplayItem ? this.totalRevenueDisplayItem.fieldValue : this.runningInfo.totalRevenue;
|
||||
},
|
||||
runningDataCards() {
|
||||
const sectionData = this.totalRunningSectionData || [];
|
||||
if (sectionData.length > 0) {
|
||||
const revenueFieldCode = this.totalRevenueDisplayItem ? this.totalRevenueDisplayItem.fieldCode : "";
|
||||
return sectionData
|
||||
.filter(item => item.fieldCode !== revenueFieldCode)
|
||||
.map((item, index) => ({
|
||||
title: item.fieldName,
|
||||
value: item.fieldValue,
|
||||
color: this.getCardColor(index),
|
||||
loading: this.isRunningInfoLoading,
|
||||
}));
|
||||
}
|
||||
return this.fallbackSjglData.map(item => ({
|
||||
title: item.title,
|
||||
value: this.runningInfo[item.attr],
|
||||
color: item.color,
|
||||
loading: this.isRunningInfoLoading,
|
||||
}));
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setBaseInfoLoading(loading) {
|
||||
if (Object.prototype.hasOwnProperty.call(this.$data, "baseInfoLoading")) {
|
||||
this.baseInfoLoading = loading;
|
||||
return;
|
||||
}
|
||||
this.$set(this.$data, "baseInfoLoading", loading);
|
||||
},
|
||||
setRunningInfoLoading(loading) {
|
||||
if (Object.prototype.hasOwnProperty.call(this.$data, "runningInfoLoading")) {
|
||||
this.runningInfoLoading = loading;
|
||||
return;
|
||||
}
|
||||
this.$set(this.$data, "runningInfoLoading", loading);
|
||||
},
|
||||
getCardColor(index) {
|
||||
const colors = ['#4472c4', '#70ad47', '#4472c4', '#f67438', '#4472c4', '#70ad47', '#70ad47', '#f67438'];
|
||||
return colors[index % colors.length];
|
||||
},
|
||||
toAlarm() {
|
||||
this.$router.push({path: "/dzjk/gzgj", query: this.$route.query});
|
||||
},
|
||||
getBaseInfo() {
|
||||
this.setBaseInfoLoading(true);
|
||||
return getSingleSiteBaseInfo(this.siteId).then((response) => {
|
||||
this.info = response?.data || {};
|
||||
}).finally(() => {
|
||||
this.setBaseInfoLoading(false);
|
||||
});
|
||||
},
|
||||
getRunningInfo() {
|
||||
return getDzjkHomeView(this.siteId).then((response) => {
|
||||
this.runningInfo = response?.data || {};
|
||||
this.setRunningInfoLoading(true);
|
||||
return Promise.all([
|
||||
getDzjkHomeView(this.siteId),
|
||||
getProjectDisplayData(this.siteId),
|
||||
]).then(([homeResponse, displayResponse]) => {
|
||||
this.runningInfo = homeResponse?.data || {};
|
||||
this.runningDisplayData = displayResponse?.data || [];
|
||||
}).finally(() => {
|
||||
this.setRunningInfoLoading(false);
|
||||
});
|
||||
},
|
||||
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;
|
||||
});
|
||||
Promise.all([this.getBaseInfo(), this.getRunningInfo()]);
|
||||
// 一分钟循环一次总累计运行数据
|
||||
this.updateInterval(this.getRunningInfo);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user