重构
This commit is contained in:
@ -1,103 +1,253 @@
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<div>
|
||||
<div class="pcs-tags">
|
||||
<el-tag
|
||||
size="small"
|
||||
:type="selectedSectionKey ? 'info' : 'primary'"
|
||||
:effect="selectedSectionKey ? 'plain' : 'dark'"
|
||||
class="pcs-tag-item"
|
||||
@click="handleTagClick('')"
|
||||
>
|
||||
全部
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-for="(group, index) in sectionGroups"
|
||||
:key="index + 'ylTag'"
|
||||
size="small"
|
||||
:type="selectedSectionKey === group.sectionKey ? 'primary' : 'info'"
|
||||
:effect="selectedSectionKey === group.sectionKey ? 'dark' : 'plain'"
|
||||
class="pcs-tag-item"
|
||||
@click="handleTagClick(group.sectionKey)"
|
||||
>
|
||||
{{ group.displayName || group.sectionName || "冷却" }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-card
|
||||
v-for="(item,index) in list"
|
||||
:key="index+'ylLise'"
|
||||
class="sbjk-card-container running-card-container"
|
||||
shadow="always">
|
||||
v-for="(group, index) in filteredSectionGroups"
|
||||
:key="index + 'ylSection'"
|
||||
class="sbjk-card-container list running-card-container"
|
||||
shadow="always"
|
||||
>
|
||||
<div slot="header">
|
||||
<span class="large-title">{{ item.deviceName }}</span>
|
||||
<span class="large-title">{{ group.displayName || group.sectionName || "冷却" }}</span>
|
||||
<div class="info">
|
||||
<div>数据更新时间：{{ item.dataUpdateTime || '-' }}</div>
|
||||
</div>
|
||||
<div class="alarm">
|
||||
<el-button type="primary" round size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">
|
||||
详细
|
||||
</el-button>
|
||||
<el-badge :hidden="!item.alarmNum" :value="item.alarmNum || 0" class="item">
|
||||
<i
|
||||
class="el-icon-message-solid alarm-icon"
|
||||
@click="pointDetail(item,'alarmPoint')"
|
||||
></i>
|
||||
</el-badge>
|
||||
<div>状态：{{ group.statusText }}</div>
|
||||
<div>数据更新时间：{{ group.updateTimeText }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-row class="device-info-row">
|
||||
<el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8"
|
||||
class="device-info-col">
|
||||
<span class="pointer" @click="showChart(tempDataItem.title,item.deviceId)">
|
||||
<span class="left">{{ tempDataItem.title }}</span> <span
|
||||
class="right">{{ item[tempDataItem.attr] || '-' }}<span
|
||||
v-html="tempDataItem.unit"></span></span>
|
||||
</span>
|
||||
<el-col
|
||||
v-for="(item, dataIndex) in group.items"
|
||||
:key="dataIndex + 'ylField'"
|
||||
:span="8"
|
||||
class="device-info-col"
|
||||
>
|
||||
<span class="left">{{ item.fieldName }}</span>
|
||||
<span class="right">
|
||||
<i v-if="isPointLoading(item.fieldValue)" class="el-icon-loading point-loading-icon"></i>
|
||||
<span v-else>{{ displayValue(item.fieldValue) | formatNumber }}</span>
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-empty v-show="list.length<=0" :image-size="200"></el-empty>
|
||||
<point-chart ref="pointChart" :site-id="siteId"/>
|
||||
<point-table ref="pointTable"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import {getCoolingDataList} from '@/api/ems/dzjk'
|
||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||
import pointChart from "./../PointChart.vue";
|
||||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
||||
import { getProjectDisplayData } from "@/api/ems/dzjk";
|
||||
import { getDeviceList } from "@/api/ems/site";
|
||||
|
||||
export default {
|
||||
name: 'DzjkSbjkYl',
|
||||
name: "DzjkSbjkYl",
|
||||
mixins: [getQuerySiteId, intervalUpdate],
|
||||
components: {pointChart, PointTable},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
list: [],
|
||||
tempData: [
|
||||
{title: '供水温度', attr: 'gsTemp', unit: '℃'},
|
||||
{title: '回水温度', attr: 'hsTemp', unit: '℃'},
|
||||
{title: '供水压力', attr: 'gsPressure', unit: 'bar'},
|
||||
{title: '回水压力', attr: 'hsPressure', unit: 'bar'},
|
||||
{title: '冷源水温度', attr: 'lysTemp', unit: '℃'},
|
||||
{title: 'VB01开度', attr: 'vb01Kd', unit: '%'},
|
||||
{title: 'VB02开度', attr: 'vb02Kd', unit: '%'},
|
||||
]
|
||||
}
|
||||
displayData: [],
|
||||
selectedSectionKey: "",
|
||||
coolingDeviceList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
moduleDisplayData() {
|
||||
return (this.displayData || []).filter((item) => item.menuCode === "SBJK_YL");
|
||||
},
|
||||
ylTemplateFields() {
|
||||
const source = this.moduleDisplayData || [];
|
||||
const result = [];
|
||||
const seen = new Set();
|
||||
source.forEach((item) => {
|
||||
const fieldName = String(item?.fieldName || "").trim();
|
||||
if (!fieldName || seen.has(fieldName)) {
|
||||
return;
|
||||
}
|
||||
seen.add(fieldName);
|
||||
result.push(fieldName);
|
||||
});
|
||||
return result.length > 0 ? result : this.fallbackFields;
|
||||
},
|
||||
sectionGroups() {
|
||||
const source = this.moduleDisplayData || [];
|
||||
const devices = (this.coolingDeviceList || []).length > 0
|
||||
? this.coolingDeviceList
|
||||
: [{ deviceId: "", deviceName: "冷却" }];
|
||||
return devices.map((device, index) => {
|
||||
const deviceId = String(device?.deviceId || device?.id || "").trim();
|
||||
const sectionKey = deviceId || `COOLING_${index}`;
|
||||
const displayName = String(device?.deviceName || device?.name || deviceId || `冷却${index + 1}`).trim();
|
||||
const exactRows = source.filter((item) => String(item?.deviceId || "").trim() === deviceId);
|
||||
const fallbackRows = source.filter((item) => !String(item?.deviceId || "").trim());
|
||||
|
||||
const exactValueMap = {};
|
||||
exactRows.forEach((item) => {
|
||||
const key = String(item?.fieldName || "").trim();
|
||||
if (key) {
|
||||
exactValueMap[key] = item;
|
||||
}
|
||||
});
|
||||
const fallbackValueMap = {};
|
||||
fallbackRows.forEach((item) => {
|
||||
const key = String(item?.fieldName || "").trim();
|
||||
if (key && fallbackValueMap[key] === undefined) {
|
||||
fallbackValueMap[key] = item;
|
||||
}
|
||||
});
|
||||
|
||||
const items = (this.ylTemplateFields || []).map((fieldName) => {
|
||||
const row = exactValueMap[fieldName] || fallbackValueMap[fieldName] || {};
|
||||
return {
|
||||
fieldName,
|
||||
fieldValue: row.fieldValue,
|
||||
valueTime: row.valueTime,
|
||||
};
|
||||
});
|
||||
|
||||
const statusItem = (items || []).find((it) => String(it.fieldName || "").includes("状态"));
|
||||
const timestamps = [...exactRows, ...fallbackRows]
|
||||
.map((it) => new Date(it?.valueTime).getTime())
|
||||
.filter((ts) => !isNaN(ts));
|
||||
|
||||
return {
|
||||
sectionName: displayName,
|
||||
sectionKey,
|
||||
displayName,
|
||||
deviceId,
|
||||
items,
|
||||
statusText: this.displayValue(statusItem ? statusItem.fieldValue : "-"),
|
||||
updateTimeText: timestamps.length > 0 ? this.formatDate(new Date(Math.max(...timestamps))) : "-",
|
||||
};
|
||||
});
|
||||
},
|
||||
displaySectionGroups() {
|
||||
if (this.sectionGroups.length > 0) {
|
||||
return this.sectionGroups;
|
||||
}
|
||||
return [
|
||||
{
|
||||
sectionName: "冷却参数",
|
||||
items: this.fallbackFields.map((fieldName) => ({ fieldName, fieldValue: "-" })),
|
||||
statusText: "-",
|
||||
updateTimeText: "-",
|
||||
},
|
||||
];
|
||||
},
|
||||
filteredSectionGroups() {
|
||||
const groups = this.displaySectionGroups || [];
|
||||
if (!this.selectedSectionKey) {
|
||||
return groups;
|
||||
}
|
||||
return groups.filter((group) => group.sectionKey === this.selectedSectionKey);
|
||||
},
|
||||
fallbackFields() {
|
||||
return ["供水温度", "回水温度", "供水压力", "回水压力", "冷源水温度", "VB01开度", "VB02开度"];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 查看设备电位表格
|
||||
pointDetail(row, dataType) {
|
||||
const {deviceId} = row
|
||||
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'COOLING'}, dataType)
|
||||
handleTagClick(sectionKey) {
|
||||
this.selectedSectionKey = sectionKey || "";
|
||||
},
|
||||
showChart(pointName, deviceId) {
|
||||
pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'COOLING', deviceId})
|
||||
displayValue(value) {
|
||||
return value === undefined || value === null || value === "" ? "-" : value;
|
||||
},
|
||||
isPointLoading(value) {
|
||||
return this.loading && (value === undefined || value === null || value === "" || value === "-");
|
||||
},
|
||||
formatDate(date) {
|
||||
if (!(date instanceof Date) || isNaN(date.getTime())) {
|
||||
return "-";
|
||||
}
|
||||
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())}`;
|
||||
},
|
||||
getCoolingDeviceList() {
|
||||
return getDeviceList(this.siteId)
|
||||
.then((response) => {
|
||||
const list = response?.data || [];
|
||||
this.coolingDeviceList = list.filter((item) => item.deviceCategory === "COOLING");
|
||||
})
|
||||
.catch(() => {
|
||||
this.coolingDeviceList = [];
|
||||
});
|
||||
},
|
||||
updateData() {
|
||||
this.loading = true
|
||||
getCoolingDataList(this.siteId).then(response => {
|
||||
this.list = JSON.parse(JSON.stringify(response?.data || []));
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
this.loading = true;
|
||||
Promise.all([getProjectDisplayData(this.siteId), this.getCoolingDeviceList()])
|
||||
.then(([response]) => {
|
||||
this.displayData = response?.data || [];
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
init() {
|
||||
this.updateData()
|
||||
this.updateInterval(this.updateData)
|
||||
}
|
||||
this.updateData();
|
||||
this.updateInterval(this.updateData);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sbjk-card-container {
|
||||
&:not(:last-child) {
|
||||
&.list:not(:last-child) {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.info {
|
||||
float: right;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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