重构
This commit is contained in:
242
pages/work/yl/index.vue
Normal file
242
pages/work/yl/index.vue
Normal file
@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<uni-collapse ref="collapse" accordion v-if="list.length > 0">
|
||||
<uni-collapse-item
|
||||
v-for="(item,index) in list"
|
||||
:key="index + 'ylList'"
|
||||
:open="index === 0"
|
||||
class="common-collapse-item"
|
||||
:class="handleCardClass(item)"
|
||||
>
|
||||
<template v-slot:title>
|
||||
<view class="title-wrapper">
|
||||
<view class="top">
|
||||
<view class="status">{{ item.statusText }}</view>
|
||||
<text class="name">{{ item.deviceName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="content">
|
||||
<uni-group mode="card" class="data-card-group">
|
||||
<uni-row
|
||||
v-for="(field, fieldIndex) in (item.fieldConfigs || fallbackFieldConfigs)"
|
||||
:key="fieldIndex + 'ylField'"
|
||||
class="data-row"
|
||||
>
|
||||
<uni-col :span="8">
|
||||
<view class="title">{{ field.name }}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view class="value">
|
||||
{{ item[field.attr] | formatNumber }}
|
||||
<text v-if="field.unit" v-html="field.unit"></text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-group>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
<view class="no-data" v-else>
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getProjectDisplayData,
|
||||
getDeviceList
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
deviceStatusOptions: (state) => state.ems.deviceStatusOptions,
|
||||
}),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
siteId: '',
|
||||
displayData: [],
|
||||
coolingDeviceList: [],
|
||||
list: [],
|
||||
fallbackFieldConfigs: [{
|
||||
name: '供水温度',
|
||||
attr: 'gsTemp',
|
||||
unit: '℃'
|
||||
}, {
|
||||
name: '回水温度',
|
||||
attr: 'hsTemp',
|
||||
unit: '℃'
|
||||
}, {
|
||||
name: '供水压力',
|
||||
attr: 'gsPressure',
|
||||
unit: 'MPa'
|
||||
}, {
|
||||
name: '回水压力',
|
||||
attr: 'hsPressure',
|
||||
unit: 'MPa'
|
||||
}, {
|
||||
name: '冷源水温度',
|
||||
attr: 'lysTemp',
|
||||
unit: '℃'
|
||||
}, {
|
||||
name: 'VB01开度',
|
||||
attr: 'vb01Kd',
|
||||
unit: '%'
|
||||
}, {
|
||||
name: 'VB02开度',
|
||||
attr: 'vb02Kd',
|
||||
unit: '%'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
normalizeDeviceId(value) {
|
||||
return String(value == null ? '' : value).trim().toUpperCase()
|
||||
},
|
||||
getModuleRows(menuCode) {
|
||||
return (this.displayData || []).filter((item) => item.menuCode === menuCode)
|
||||
},
|
||||
getFieldName(fieldCode) {
|
||||
const raw = String(fieldCode || '').trim()
|
||||
if (!raw) return ''
|
||||
const index = raw.lastIndexOf('__')
|
||||
return index >= 0 ? raw.slice(index + 2) : raw
|
||||
},
|
||||
getFieldUnit(attr) {
|
||||
const field = (this.fallbackFieldConfigs || []).find((item) => item.attr === attr)
|
||||
return field ? (field.unit || '') : ''
|
||||
},
|
||||
getFieldConfigs(rows = []) {
|
||||
const result = []
|
||||
const seen = {}
|
||||
;(rows || []).forEach((item) => {
|
||||
const attr = this.getFieldName(item?.fieldCode)
|
||||
const name = String(item?.fieldName || '').trim()
|
||||
if (!attr || !name || seen[name]) return
|
||||
result.push({
|
||||
name,
|
||||
attr,
|
||||
unit: this.getFieldUnit(attr),
|
||||
})
|
||||
seen[name] = true
|
||||
})
|
||||
return result.length > 0 ? result : this.fallbackFieldConfigs
|
||||
},
|
||||
getFieldRowMap(rows = [], deviceId = '') {
|
||||
const map = {}
|
||||
const targetDeviceId = this.normalizeDeviceId(deviceId || '')
|
||||
rows.forEach((item) => {
|
||||
if (!item || !item.fieldCode) return
|
||||
const itemDeviceId = this.normalizeDeviceId(item.deviceId || '')
|
||||
if (itemDeviceId !== targetDeviceId) return
|
||||
map[this.getFieldName(item.fieldCode)] = item
|
||||
})
|
||||
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]) {
|
||||
map[fieldName] = item
|
||||
}
|
||||
})
|
||||
return map
|
||||
},
|
||||
getLatestUpdateTime(rows = []) {
|
||||
const times = (rows || [])
|
||||
.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())}`
|
||||
},
|
||||
formatStatusText(statusValue) {
|
||||
const key = String(statusValue == null ? '' : statusValue).trim()
|
||||
if (!key) return '暂无数据'
|
||||
return (this.deviceStatusOptions || {})[key] || key
|
||||
},
|
||||
handleCardClass(item) {
|
||||
const key = String(item?.statusValue == null ? '' : item.statusValue).trim()
|
||||
if (key === '1') return 'running-collapse-item'
|
||||
if (key === '2') return 'warning-collapse-item'
|
||||
return 'timing-collapse-item'
|
||||
},
|
||||
buildList() {
|
||||
const rows = this.getModuleRows('SBJK_YL')
|
||||
const fieldConfigs = this.getFieldConfigs(rows)
|
||||
let devices = (this.coolingDeviceList || []).filter((item) => item.deviceCategory === 'COOLING')
|
||||
if (devices.length === 0) {
|
||||
const grouped = {}
|
||||
rows.forEach((item) => {
|
||||
const id = this.normalizeDeviceId(item?.deviceId || '')
|
||||
if (!id || grouped[id]) return
|
||||
grouped[id] = {
|
||||
deviceId: id,
|
||||
deviceName: item?.deviceName || id,
|
||||
deviceStatus: ''
|
||||
}
|
||||
})
|
||||
devices = Object.values(grouped)
|
||||
}
|
||||
if (devices.length === 0) {
|
||||
devices = [{
|
||||
deviceId: '',
|
||||
deviceName: '冷却',
|
||||
deviceStatus: ''
|
||||
}]
|
||||
}
|
||||
|
||||
this.list = devices.map((device) => {
|
||||
const id = this.normalizeDeviceId(device.deviceId || device.id || '')
|
||||
const fieldRowMap = this.getFieldRowMap(rows, id)
|
||||
const values = {}
|
||||
fieldConfigs.forEach((cfg) => {
|
||||
values[cfg.attr] = fieldRowMap[cfg.attr]?.fieldValue
|
||||
})
|
||||
const statusField = Object.values(fieldRowMap).find((row) => String(row?.fieldName || '').includes('状态'))
|
||||
const statusValue = statusField?.fieldValue || device.deviceStatus || ''
|
||||
return {
|
||||
...values,
|
||||
deviceId: id,
|
||||
deviceName: device.deviceName || device.name || id || '冷却',
|
||||
statusValue: String(statusValue || ''),
|
||||
statusText: this.formatStatusText(statusValue),
|
||||
fieldConfigs,
|
||||
dataUpdateTime: this.getLatestUpdateTime(Object.values(fieldRowMap)),
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.showLoading()
|
||||
this.siteId = options.siteId || ''
|
||||
Promise.all([
|
||||
getProjectDisplayData(this.siteId),
|
||||
getDeviceList(this.siteId)
|
||||
]).then(([displayResponse, deviceResponse]) => {
|
||||
this.displayData = displayResponse?.data || []
|
||||
this.coolingDeviceList = deviceResponse?.data || []
|
||||
this.buildList()
|
||||
if (this.list.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.collapse.resize()
|
||||
uni.hideLoading()
|
||||
}, 100)
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user