重构
This commit is contained in:
@ -1,6 +1,28 @@
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmsdccContainer'" style="margin-bottom:25px;">
|
||||
<div>
|
||||
<div class="pcs-tags">
|
||||
<el-tag
|
||||
size="small"
|
||||
:type="selectedClusterId ? 'info' : 'primary'"
|
||||
:effect="selectedClusterId ? 'plain' : 'dark'"
|
||||
class="pcs-tag-item"
|
||||
@click="handleTagClick('')"
|
||||
>
|
||||
全部
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-for="(item, index) in clusterDeviceList"
|
||||
:key="index + 'clusterTag'"
|
||||
size="small"
|
||||
:type="selectedClusterId === (item.deviceId || item.id) ? 'primary' : 'info'"
|
||||
:effect="selectedClusterId === (item.deviceId || item.id) ? 'dark' : 'plain'"
|
||||
class="pcs-tag-item"
|
||||
@click="handleTagClick(item.deviceId || item.id || '')"
|
||||
>
|
||||
{{ item.deviceName || item.name || item.deviceId || item.id || 'BMS电池簇' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div v-for="(baseInfo,index) in filteredBaseInfoList" :key="index+'bmsdccContainer'" style="margin-bottom:25px;">
|
||||
<el-card shadow="always"
|
||||
class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
||||
:class="handleCardClass(baseInfo)">
|
||||
@ -29,15 +51,15 @@
|
||||
<el-descriptions-item
|
||||
contentClassName="descriptions-direction work-status"
|
||||
:span="1" label="工作状态">
|
||||
{{ CLUSTERWorkStatusOptions[baseInfo.workStatus] }}
|
||||
{{ CLUSTERWorkStatusOptions[baseInfo.workStatus] || '-' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item contentClassName="descriptions-direction"
|
||||
:span="1" label="与PCS通信">
|
||||
{{ $store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus] }}
|
||||
{{ (($store.state.ems && $store.state.ems.communicationStatusOptions) || {})[baseInfo.pcsCommunicationStatus] || '-' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item contentClassName="descriptions-direction"
|
||||
:span="1" label="与EMS通信">
|
||||
{{ $store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus] }}
|
||||
{{ (($store.state.ems && $store.state.ems.communicationStatusOptions) || {})[baseInfo.emsCommunicationStatus] || '-' }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
@ -47,7 +69,9 @@
|
||||
v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1"
|
||||
:label="item.label">
|
||||
<span class="pointer" @click="showChart(item.pointName || '',baseInfo.deviceId)">
|
||||
{{ baseInfo[item.attr] | formatNumber }} <span v-if="item.unit" v-html="item.unit"></span>
|
||||
<i v-if="isPointLoading(baseInfo[item.attr])" class="el-icon-loading point-loading-icon"></i>
|
||||
<span v-else>{{ displayValue(baseInfo[item.attr]) | formatNumber }}</span>
|
||||
<span v-if="item.unit" v-html="item.unit"></span>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
@ -115,7 +139,6 @@
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
|
||||
<point-chart ref="pointChart" :site-id="siteId"/>
|
||||
<point-table ref="pointTable"/>
|
||||
</div>
|
||||
@ -125,7 +148,7 @@
|
||||
<script>
|
||||
import pointChart from "./../PointChart.vue";
|
||||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
||||
import {getBMSBatteryCluster} from '@/api/ems/dzjk'
|
||||
import {getProjectDisplayData, getStackNameList, getClusterNameList} from '@/api/ems/dzjk'
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||
import {mapState} from "vuex";
|
||||
@ -137,11 +160,20 @@ export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
CLUSTERWorkStatusOptions: state => state?.ems?.CLUSTERWorkStatusOptions || {},
|
||||
})
|
||||
}),
|
||||
filteredBaseInfoList() {
|
||||
if (!this.selectedClusterId) {
|
||||
return this.baseInfoList || [];
|
||||
}
|
||||
return (this.baseInfoList || []).filter(item => item.deviceId === this.selectedClusterId);
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
displayData: [],
|
||||
clusterDeviceList: [],
|
||||
selectedClusterId: "",
|
||||
unitObj: {
|
||||
'电压': 'V',
|
||||
'温度': '℃',
|
||||
@ -158,7 +190,15 @@ export default {
|
||||
'SOC单体平均值': '当前SOC',
|
||||
'SOC单体最大值': '最高单体SOC',
|
||||
},
|
||||
baseInfoList: [],
|
||||
baseInfoList: [{
|
||||
siteId: "",
|
||||
deviceId: "",
|
||||
parentDeviceName: "",
|
||||
deviceName: "BMS电池簇",
|
||||
dataUpdateTime: "-",
|
||||
alarmNum: 0,
|
||||
batteryDataList: [],
|
||||
}],
|
||||
infoData: [
|
||||
{label: '簇电压', attr: 'clusterVoltage', unit: 'V', pointName: '簇电压'},
|
||||
{label: '可充电量', attr: 'chargeableCapacity', unit: 'kWh', pointName: '可充电量'},
|
||||
@ -173,6 +213,12 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
displayValue(value) {
|
||||
return value === undefined || value === null || value === "" ? "-" : value;
|
||||
},
|
||||
isPointLoading(value) {
|
||||
return this.loading && (value === undefined || value === null || value === "" || value === "-");
|
||||
},
|
||||
handleCardClass(item) {
|
||||
const {workStatus = ''} = item
|
||||
return !(Object.keys(this.CLUSTERWorkStatusOptions).includes(item.workStatus)) ? "timing-card-container" : workStatus === '9' ? 'warning-card-container' : 'running-card-container'
|
||||
@ -185,23 +231,141 @@ export default {
|
||||
showChart(pointName, deviceId) {
|
||||
pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'CLUSTER', deviceId})
|
||||
},
|
||||
updateData() {
|
||||
this.loading = true
|
||||
getBMSBatteryCluster(this.siteId).then(response => {
|
||||
this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
handleTagClick(deviceId) {
|
||||
this.selectedClusterId = deviceId || "";
|
||||
},
|
||||
init() {
|
||||
this.updateData()
|
||||
this.updateInterval(this.updateData)
|
||||
},
|
||||
getModuleRows(menuCode, sectionName) {
|
||||
return (this.displayData || []).filter(item => item.menuCode === menuCode && item.sectionName === sectionName);
|
||||
},
|
||||
getFieldName(fieldCode) {
|
||||
const raw = String(fieldCode || "").trim();
|
||||
if (!raw) return "";
|
||||
const index = raw.lastIndexOf("__");
|
||||
return index >= 0 ? raw.slice(index + 2) : raw;
|
||||
},
|
||||
getFieldMap(rows = [], deviceId = "") {
|
||||
const map = {};
|
||||
const targetDeviceId = String(deviceId || "");
|
||||
rows.forEach(item => {
|
||||
if (!item || !item.fieldCode) return;
|
||||
const itemDeviceId = String(item.deviceId || "");
|
||||
if (itemDeviceId !== targetDeviceId) return;
|
||||
map[this.getFieldName(item.fieldCode)] = item.fieldValue;
|
||||
});
|
||||
rows.forEach(item => {
|
||||
if (!item || !item.fieldCode) return;
|
||||
const itemDeviceId = String(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())}`;
|
||||
},
|
||||
getClusterDeviceList() {
|
||||
return getStackNameList(this.siteId)
|
||||
.then(response => {
|
||||
const stackList = response?.data || [];
|
||||
if (!stackList.length) {
|
||||
this.clusterDeviceList = [];
|
||||
return;
|
||||
}
|
||||
const requests = stackList.map(stack => {
|
||||
const stackDeviceId = stack.deviceId || stack.id || '';
|
||||
return getClusterNameList({stackDeviceId, siteId: this.siteId})
|
||||
.then(clusterResponse => {
|
||||
const clusterList = clusterResponse?.data || [];
|
||||
return clusterList.map(cluster => ({
|
||||
...cluster,
|
||||
parentDeviceName: stack.deviceName || stack.name || stackDeviceId || '',
|
||||
}));
|
||||
})
|
||||
.catch(() => []);
|
||||
});
|
||||
return Promise.all(requests).then(results => {
|
||||
this.clusterDeviceList = results.flat();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.clusterDeviceList = [];
|
||||
});
|
||||
},
|
||||
buildBaseInfoList() {
|
||||
const devices = (this.clusterDeviceList && this.clusterDeviceList.length > 0)
|
||||
? this.clusterDeviceList
|
||||
: [{deviceId: this.siteId, deviceName: 'BMS电池簇', parentDeviceName: ''}];
|
||||
this.baseInfoList = devices.map(device => ({
|
||||
...(() => {
|
||||
const id = device.deviceId || device.id || this.siteId;
|
||||
const infoMap = this.getFieldMap(this.getModuleRows('SBJK_BMSDCC', '簇信息'), id);
|
||||
const statusMap = this.getFieldMap(this.getModuleRows('SBJK_BMSDCC', '状态'), id);
|
||||
const currentSoc = Number(infoMap.currentSoc);
|
||||
return {
|
||||
...infoMap,
|
||||
workStatus: statusMap.workStatus,
|
||||
pcsCommunicationStatus: statusMap.pcsCommunicationStatus,
|
||||
emsCommunicationStatus: statusMap.emsCommunicationStatus,
|
||||
currentSoc: isNaN(currentSoc) ? 0 : currentSoc,
|
||||
};
|
||||
})(),
|
||||
siteId: this.siteId,
|
||||
deviceId: device.deviceId || device.id || this.siteId,
|
||||
parentDeviceName: device.parentDeviceName || '',
|
||||
deviceName: device.deviceName || device.name || device.deviceId || device.id || 'BMS电池簇',
|
||||
dataUpdateTime: this.getLatestTime('SBJK_BMSDCC'),
|
||||
alarmNum: 0,
|
||||
batteryDataList: [],
|
||||
}));
|
||||
},
|
||||
updateData() {
|
||||
this.loading = true
|
||||
// 先渲染卡片框架，字段值走单点位 loading
|
||||
this.buildBaseInfoList();
|
||||
Promise.all([
|
||||
getProjectDisplayData(this.siteId),
|
||||
this.getClusterDeviceList(),
|
||||
]).then(([response]) => {
|
||||
this.displayData = response?.data || [];
|
||||
this.buildBaseInfoList();
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pcs-tags {
|
||||
margin: 0 0 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pcs-tag-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
//描述列表样式
|
||||
.descriptions-main {
|
||||
@ -247,4 +411,16 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.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