重构
This commit is contained in:
@ -1,9 +1,29 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="pcs-ems-dashboard-editor-container">
|
||||
<!-- 顶部六个方块-->
|
||||
<real-time-base-info :data="runningHeadData"/>
|
||||
<div class="pcs-ems-dashboard-editor-container">
|
||||
<div class="pcs-tags">
|
||||
<el-tag
|
||||
size="small"
|
||||
:type="selectedPcsId ? 'info' : 'primary'"
|
||||
:effect="selectedPcsId ? 'plain' : 'dark'"
|
||||
class="pcs-tag-item"
|
||||
@click="handleTagClick('')"
|
||||
>
|
||||
全部
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-for="(item, index) in pcsDeviceList"
|
||||
:key="index + 'pcsTag'"
|
||||
size="small"
|
||||
:type="selectedPcsId === (item.deviceId || item.id) ? 'primary' : 'info'"
|
||||
:effect="selectedPcsId === (item.deviceId || item.id) ? 'dark' : 'plain'"
|
||||
class="pcs-tag-item"
|
||||
@click="handleTagClick(item.deviceId || item.id || '')"
|
||||
>
|
||||
{{ item.deviceName || item.deviceId || item.id || 'PCS' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div
|
||||
v-for="(pcsItem, pcsIndex) in pcsList"
|
||||
v-for="(pcsItem, pcsIndex) in filteredPcsList"
|
||||
:key="pcsIndex + 'PcsHome'"
|
||||
style="margin-bottom: 25px"
|
||||
>
|
||||
@ -18,19 +38,11 @@
|
||||
>
|
||||
<div class="info">
|
||||
<div>
|
||||
{{
|
||||
$store.state.ems.communicationStatusOptions[
|
||||
pcsItem.communicationStatus
|
||||
]
|
||||
}}
|
||||
{{ (($store.state.ems && $store.state.ems.communicationStatusOptions) || {})[pcsItem.communicationStatus] || '-' }}
|
||||
</div>
|
||||
<div>数据更新时间：{{ pcsItem.dataUpdateTime }}</div>
|
||||
</div>
|
||||
<div class="alarm">
|
||||
<el-button type="primary" round size="small" style="margin-right:20px;"
|
||||
@click="pointDetail(pcsItem,'point')">
|
||||
详细
|
||||
</el-button>
|
||||
<el-badge :hidden="!pcsItem.alarmNum" :value="pcsItem.alarmNum || 0" class="item">
|
||||
<i
|
||||
class="el-icon-message-solid alarm-icon"
|
||||
@ -46,9 +58,7 @@
|
||||
:span="1"
|
||||
label="工作状态"
|
||||
labelClassName="descriptions-label"
|
||||
>{{
|
||||
PCSWorkStatusOptions[pcsItem.workStatus]
|
||||
}}
|
||||
>{{ formatDictValue((PCSWorkStatusOptions || {}), pcsItem.workStatus) }}
|
||||
</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item
|
||||
@ -56,9 +66,7 @@
|
||||
contentClassName="descriptions-direction"
|
||||
label="并网状态"
|
||||
labelClassName="descriptions-label"
|
||||
>{{
|
||||
$store.state.ems.gridStatusOptions[pcsItem.gridStatus]
|
||||
}}
|
||||
>{{ formatDictValue((($store.state.ems && $store.state.ems.gridStatusOptions) || {}), pcsItem.gridStatus) }}
|
||||
</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item
|
||||
@ -68,9 +76,7 @@
|
||||
:span="1"
|
||||
label="设备状态"
|
||||
labelClassName="descriptions-label"
|
||||
>{{
|
||||
$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]
|
||||
}}
|
||||
>{{ formatDictValue((($store.state.ems && $store.state.ems.deviceStatusOptions) || {}), pcsItem.deviceStatus) }}
|
||||
</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item
|
||||
@ -78,9 +84,7 @@
|
||||
contentClassName="descriptions-direction"
|
||||
label="控制模式"
|
||||
labelClassName="descriptions-label"
|
||||
>{{
|
||||
$store.state.ems.controlModeOptions[pcsItem.controlMode]
|
||||
}}
|
||||
>{{ formatDictValue((($store.state.ems && $store.state.ems.controlModeOptions) || {}), pcsItem.controlMode) }}
|
||||
</el-descriptions-item
|
||||
>
|
||||
</el-descriptions>
|
||||
@ -105,7 +109,8 @@
|
||||
showChart(item.pointName || '', pcsItem.deviceId)
|
||||
"
|
||||
>
|
||||
{{ pcsItem[item.attr] | formatNumber }}
|
||||
<i v-if="isPointLoading(pcsItem[item.attr])" class="el-icon-loading point-loading-icon"></i>
|
||||
<span v-else>{{ displayValue(pcsItem[item.attr]) | formatNumber }}</span>
|
||||
<span v-if="item.unit" v-html="item.unit"></span>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
@ -171,7 +176,6 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-empty v-show="pcsList.length <= 0" :image-size="200"></el-empty>
|
||||
<point-chart ref="pointChart" :site-id="siteId"/>
|
||||
<point-table ref="pointTable"/>
|
||||
</div>
|
||||
@ -180,26 +184,39 @@
|
||||
<script>
|
||||
import pointChart from "./../PointChart.vue";
|
||||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
||||
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import {getPcsDetailInfo, getRunningHeadInfo} from "@/api/ems/dzjk";
|
||||
import {getPcsNameList, getProjectDisplayData} from "@/api/ems/dzjk";
|
||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "DzjkSbjkPcs",
|
||||
components: {RealTimeBaseInfo, pointChart, PointTable},
|
||||
components: {pointChart, PointTable},
|
||||
mixins: [getQuerySiteId, intervalUpdate],
|
||||
computed: {
|
||||
...mapState({
|
||||
PCSWorkStatusOptions: state => state?.ems?.PCSWorkStatusOptions || {},
|
||||
})
|
||||
}),
|
||||
filteredPcsList() {
|
||||
if (!this.selectedPcsId) {
|
||||
return this.pcsList || [];
|
||||
}
|
||||
return (this.pcsList || []).filter(item => item.deviceId === this.selectedPcsId);
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
runningHeadData: {}, //运行信息
|
||||
pcsList: [],
|
||||
displayData: [],
|
||||
pcsDeviceList: [],
|
||||
selectedPcsId: "",
|
||||
pcsList: [{
|
||||
deviceId: "",
|
||||
deviceName: "PCS",
|
||||
dataUpdateTime: "-",
|
||||
alarmNum: 0,
|
||||
pcsBranchInfoList: [],
|
||||
}],
|
||||
infoData: [
|
||||
{
|
||||
label: "总交流有功功率",
|
||||
@ -277,13 +294,43 @@ export default {
|
||||
pointName: "交流频率",
|
||||
},
|
||||
],
|
||||
pcsBranchList: [], //pcs的支路列表
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
displayValue(value) {
|
||||
return value === undefined || value === null || value === "" ? "-" : value;
|
||||
},
|
||||
isPointLoading(value) {
|
||||
return this.loading && (value === undefined || value === null || value === "" || value === "-");
|
||||
},
|
||||
normalizeDictKey(value) {
|
||||
const raw = String(value == null ? "" : value).trim();
|
||||
if (!raw) return "";
|
||||
if (/^-?\d+(\.0+)?$/.test(raw)) {
|
||||
return String(parseInt(raw, 10));
|
||||
}
|
||||
return raw;
|
||||
},
|
||||
formatDictValue(options, value) {
|
||||
const dict = (options && typeof options === "object") ? options : {};
|
||||
const key = this.normalizeDictKey(value);
|
||||
if (!key) return "-";
|
||||
return dict[key] || key;
|
||||
},
|
||||
normalizeDeviceId(value) {
|
||||
return String(value == null ? "" : value).trim().toUpperCase();
|
||||
},
|
||||
handleCardClass(item) {
|
||||
const {workStatus = ''} = item
|
||||
return workStatus === '1' || !Object.keys(this.PCSWorkStatusOptions).find(i => i === workStatus) ? "timing-card-container" : workStatus === '2' ? 'warning-card-container' : 'running-card-container'
|
||||
const workStatus = this.normalizeDictKey((item && item.workStatus) || "");
|
||||
const statusOptions = (this.PCSWorkStatusOptions && typeof this.PCSWorkStatusOptions === 'object')
|
||||
? this.PCSWorkStatusOptions
|
||||
: {};
|
||||
const hasStatus = Object.prototype.hasOwnProperty.call(statusOptions, workStatus);
|
||||
return workStatus === '1' || !hasStatus
|
||||
? "timing-card-container"
|
||||
: workStatus === '2'
|
||||
? 'warning-card-container'
|
||||
: 'running-card-container';
|
||||
},
|
||||
// 查看设备电位表格
|
||||
pointDetail(row, dataType) {
|
||||
@ -294,24 +341,92 @@ export default {
|
||||
pointName &&
|
||||
this.$refs.pointChart.showChart({pointName, deviceCategory: isBranch ? 'BRANCH' : 'PCS', deviceId});
|
||||
},
|
||||
//6个方块数据
|
||||
getRunningHeadData() {
|
||||
getRunningHeadInfo(this.siteId).then((response) => {
|
||||
this.runningHeadData = response?.data || {};
|
||||
handleTagClick(deviceId) {
|
||||
this.selectedPcsId = deviceId || "";
|
||||
},
|
||||
getModuleRows(menuCode, sectionName) {
|
||||
return (this.displayData || []).filter(item => item.menuCode === menuCode && item.sectionName === sectionName);
|
||||
},
|
||||
getFieldName(fieldCode) {
|
||||
if (!fieldCode) {
|
||||
return "";
|
||||
}
|
||||
const index = fieldCode.lastIndexOf("__");
|
||||
return index >= 0 ? fieldCode.slice(index + 2) : fieldCode;
|
||||
},
|
||||
getFieldMap(rows = [], deviceId = "") {
|
||||
const map = {};
|
||||
const targetDeviceId = this.normalizeDeviceId(deviceId || "");
|
||||
// 设备维度优先：先吃 device_id 对应值，再用默认值(空 device_id)补齐
|
||||
rows.forEach(item => {
|
||||
if (!item || !item.fieldCode) {
|
||||
return;
|
||||
}
|
||||
const itemDeviceId = this.normalizeDeviceId(item.deviceId || "");
|
||||
if (itemDeviceId !== targetDeviceId) {
|
||||
return;
|
||||
}
|
||||
map[this.getFieldName(item.fieldCode)] = item.fieldValue;
|
||||
});
|
||||
rows.forEach(item => {
|
||||
if (!item || !item.fieldCode) {
|
||||
return;
|
||||
}
|
||||
const itemDeviceId = this.normalizeDeviceId(item.deviceId || "");
|
||||
if (itemDeviceId !== "") {
|
||||
return;
|
||||
}
|
||||
const fieldName = this.getFieldName(item.fieldCode);
|
||||
if (map[fieldName] === undefined || map[fieldName] === null || map[fieldName] === "") {
|
||||
map[fieldName] = item.fieldValue;
|
||||
}
|
||||
});
|
||||
return map;
|
||||
},
|
||||
getLatestTime(menuCode) {
|
||||
const times = (this.displayData || [])
|
||||
.filter(item => item.menuCode === menuCode && item.valueTime)
|
||||
.map(item => new Date(item.valueTime).getTime())
|
||||
.filter(ts => !isNaN(ts));
|
||||
if (times.length === 0) {
|
||||
return '-';
|
||||
}
|
||||
const date = new Date(Math.max(...times));
|
||||
const p = (n) => String(n).padStart(2, '0');
|
||||
return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())} ${p(date.getHours())}:${p(date.getMinutes())}:${p(date.getSeconds())}`;
|
||||
},
|
||||
getPcsDeviceList() {
|
||||
return getPcsNameList(this.siteId).then((response) => {
|
||||
this.pcsDeviceList = response?.data || [];
|
||||
}).catch(() => {
|
||||
this.pcsDeviceList = [];
|
||||
});
|
||||
},
|
||||
getPcsList() {
|
||||
this.loading = true;
|
||||
getPcsDetailInfo(this.siteId)
|
||||
.then((response) => {
|
||||
const data = response?.data || {};
|
||||
this.pcsList = JSON.parse(JSON.stringify(data));
|
||||
})
|
||||
.finally(() => (this.loading = false));
|
||||
buildPcsList() {
|
||||
const devices = (this.pcsDeviceList && this.pcsDeviceList.length > 0)
|
||||
? this.pcsDeviceList
|
||||
: [{deviceId: this.siteId, deviceName: 'PCS'}];
|
||||
this.pcsList = devices.map((device) => ({
|
||||
...this.getFieldMap(this.getModuleRows('SBJK_PCS', '电参量'), device.deviceId || device.id || this.siteId),
|
||||
deviceId: device.deviceId || device.id || this.siteId,
|
||||
deviceName: device.deviceName || device.name || device.deviceId || device.id || 'PCS',
|
||||
...this.getFieldMap(this.getModuleRows('SBJK_PCS', '状态'), device.deviceId || device.id || this.siteId),
|
||||
dataUpdateTime: this.getLatestTime('SBJK_PCS'),
|
||||
alarmNum: 0,
|
||||
pcsBranchInfoList: [],
|
||||
}));
|
||||
},
|
||||
updateData() {
|
||||
this.getRunningHeadData();
|
||||
this.getPcsList();
|
||||
this.loading = true;
|
||||
// 先渲染卡片框架，字段值走单点位 loading
|
||||
this.buildPcsList();
|
||||
Promise.all([
|
||||
getProjectDisplayData(this.siteId),
|
||||
this.getPcsDeviceList(),
|
||||
]).then(([displayResponse]) => {
|
||||
this.displayData = displayResponse?.data || [];
|
||||
this.buildPcsList();
|
||||
}).finally(() => (this.loading = false));
|
||||
},
|
||||
init() {
|
||||
this.updateData();
|
||||
@ -320,5 +435,29 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.pcs-tags {
|
||||
margin: 0 0 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
.pcs-tag-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.point-loading-icon {
|
||||
color: #409eff;
|
||||
display: inline-block;
|
||||
transform-origin: center;
|
||||
animation: pointLoadingSpinPulse 1.1s linear infinite;
|
||||
}
|
||||
@keyframes pointLoadingSpinPulse {
|
||||
0% { opacity: 0.45; transform: rotate(0deg) scale(0.9); }
|
||||
50% { opacity: 1; transform: rotate(180deg) scale(1.08); }
|
||||
100% { opacity: 0.45; transform: rotate(360deg) scale(0.9); }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user