重构
This commit is contained in:
@ -41,9 +41,9 @@
|
||||
</view>
|
||||
</uni-group>
|
||||
<!-- 设备数据 -->
|
||||
<uni-group mode="card" class="data-card-group">
|
||||
<uni-row v-for="(infoDataItem,infoDataIndex) in infoData" :key="infoDataIndex+'infoData'"
|
||||
class="data-row">
|
||||
<uni-group mode="card" class="data-card-group">
|
||||
<uni-row v-for="(infoDataItem,infoDataIndex) in infoData" :key="infoDataIndex+'infoData'"
|
||||
class="data-row">
|
||||
<uni-col :span="8">
|
||||
<view class="title">{{infoDataItem.label}}</view>
|
||||
</uni-col>
|
||||
@ -51,37 +51,12 @@
|
||||
<view class="value">{{item[infoDataItem.attr] | formatNumber}}
|
||||
<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-group>
|
||||
<!-- 子设备表格 -->
|
||||
<uni-group mode="card" class="child-card-group" style="margin-bottom:20rpx;">
|
||||
<uni-table border stripe emptyText="暂无数据" class="child-table">
|
||||
<!-- 表头行 -->
|
||||
<uni-tr>
|
||||
<uni-th align="center">名称</uni-th>
|
||||
<uni-th align="center">单体平均值</uni-th>
|
||||
<uni-th align="center">单体最小值</uni-th>
|
||||
<uni-th align="center">单体最小值ID</uni-th>
|
||||
<uni-th align="center">单体最大值</uni-th>
|
||||
<uni-th align="center">单体最大值ID</uni-th>
|
||||
</uni-tr>
|
||||
<!-- 表格数据行 -->
|
||||
<uni-tr v-for="(tableItem, tableIndex) in item.batteryDataList"
|
||||
:key="tableIndex+'batteryDataList'">
|
||||
<uni-td align="center"
|
||||
v-html="`${tableItem.dataName}(${unitObj[tableItem.dataName]})`"></uni-td>
|
||||
<uni-td align="center">{{tableItem.avgData}}</uni-td>
|
||||
<uni-td align="center">{{tableItem.minData}}</uni-td>
|
||||
<uni-td align="center">{{tableItem.minDataID}}</uni-td>
|
||||
<uni-td align="center">{{tableItem.maxData}}</uni-td>
|
||||
<uni-td align="center">{{tableItem.maxDataID}}</uni-td>
|
||||
</uni-tr>
|
||||
</uni-table>
|
||||
</uni-group>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-group>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
<view class="no-data" v-else>
|
||||
暂无数据
|
||||
</view>
|
||||
@ -89,14 +64,16 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getBMSBatteryCluster
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
<script>
|
||||
import {
|
||||
getProjectDisplayData,
|
||||
getStackNameList,
|
||||
getClusterNameList
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
CLUSTERWorkStatusOptions: (state) =>
|
||||
@ -105,16 +82,13 @@
|
||||
state.ems.communicationStatusOptions,
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
unitObj: {
|
||||
'电压': 'V',
|
||||
'温度': '℃',
|
||||
'SOC': '%'
|
||||
},
|
||||
list: [],
|
||||
siteId: '',
|
||||
infoData: [{
|
||||
data() {
|
||||
return {
|
||||
displayData: [],
|
||||
clusterDeviceList: [],
|
||||
list: [],
|
||||
siteId: '',
|
||||
infoData: [{
|
||||
label: '簇电压',
|
||||
attr: 'clusterVoltage',
|
||||
unit: 'V',
|
||||
@ -178,36 +152,157 @@
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCardClass(item) {
|
||||
const {
|
||||
workStatus = ''
|
||||
} = item
|
||||
return !(Object.keys(this.CLUSTERWorkStatusOptions).includes(item.workStatus)) ? "timing-collapse-item" :
|
||||
workStatus === '9' ? 'warning-collapse-item' : 'running-collapse-item'
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.showLoading()
|
||||
this.siteId = options.siteId || ''
|
||||
getBMSBatteryCluster({
|
||||
siteId: this.siteId
|
||||
}).then(response => {
|
||||
this.list = response?.data || []
|
||||
if (this.list.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
// this.$refs.collapse.resize()
|
||||
uni.hideLoading()
|
||||
}, 100)
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
}
|
||||
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
methods: {
|
||||
handleCardClass(item) {
|
||||
const {
|
||||
workStatus = ''
|
||||
} = item
|
||||
return !(Object.keys(this.CLUSTERWorkStatusOptions).includes(item.workStatus)) ? "timing-collapse-item" :
|
||||
workStatus === '9' ? 'warning-collapse-item' : 'running-collapse-item'
|
||||
},
|
||||
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
|
||||
},
|
||||
getFieldRowMap(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
|
||||
const fieldName = this.getFieldName(item.fieldCode)
|
||||
map[fieldName] = item
|
||||
const displayName = String(item.fieldName || '').trim()
|
||||
if (displayName && !map[displayName]) {
|
||||
map[displayName] = item
|
||||
}
|
||||
})
|
||||
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
|
||||
}
|
||||
const displayName = String(item.fieldName || '').trim()
|
||||
if (displayName && !map[displayName]) {
|
||||
map[displayName] = item
|
||||
}
|
||||
})
|
||||
return map
|
||||
},
|
||||
getFieldMap(rows = [], deviceId = '') {
|
||||
const rowMap = this.getFieldRowMap(rows, deviceId)
|
||||
return Object.keys(rowMap).reduce((acc, fieldName) => {
|
||||
const row = rowMap[fieldName]
|
||||
if (acc[fieldName] === undefined) {
|
||||
acc[fieldName] = row?.fieldValue
|
||||
}
|
||||
return acc
|
||||
}, {})
|
||||
},
|
||||
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 = []
|
||||
})
|
||||
},
|
||||
buildList() {
|
||||
const devices = (this.clusterDeviceList && this.clusterDeviceList.length > 0) ? this.clusterDeviceList : [{
|
||||
deviceId: this.siteId,
|
||||
deviceName: 'BMS电池簇',
|
||||
parentDeviceName: ''
|
||||
}]
|
||||
this.list = devices.map(device => {
|
||||
const deviceId = device.deviceId || device.id || this.siteId
|
||||
const infoMap = this.getFieldMap(this.getModuleRows('SBJK_BMSDCC', '簇信息'), deviceId)
|
||||
const statusMap = this.getFieldMap(this.getModuleRows('SBJK_BMSDCC', '状态'), deviceId)
|
||||
return {
|
||||
...infoMap,
|
||||
workStatus: statusMap.workStatus,
|
||||
pcsCommunicationStatus: statusMap.pcsCommunicationStatus,
|
||||
emsCommunicationStatus: statusMap.emsCommunicationStatus,
|
||||
currentSoc: infoMap.currentSoc,
|
||||
siteId: this.siteId,
|
||||
deviceId,
|
||||
parentDeviceName: device.parentDeviceName || '',
|
||||
deviceName: device.deviceName || device.name || device.deviceId || device.id || 'BMS电池簇',
|
||||
dataUpdateTime: this.getLatestTime('SBJK_BMSDCC'),
|
||||
alarmNum: 0,
|
||||
}
|
||||
})
|
||||
},
|
||||
updateData() {
|
||||
return Promise.all([
|
||||
getProjectDisplayData(this.siteId),
|
||||
this.getClusterDeviceList()
|
||||
]).then(([displayResponse]) => {
|
||||
this.displayData = displayResponse?.data || []
|
||||
this.buildList()
|
||||
}).catch(() => {
|
||||
this.displayData = []
|
||||
this.list = []
|
||||
})
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.showLoading()
|
||||
this.siteId = options.siteId || ''
|
||||
this.updateData().finally(() => {
|
||||
if (this.list.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
}, 100)
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -53,45 +53,9 @@
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-group>
|
||||
<!-- 子设备表格 -->
|
||||
<uni-group mode="card" class="child-card-group" style="margin-bottom:20rpx;">
|
||||
<uni-table border stripe emptyText="暂无数据" class="child-table">
|
||||
<!-- 表头行 -->
|
||||
<uni-tr>
|
||||
<uni-th align="center">簇号</uni-th>
|
||||
<uni-th align="center">簇电压</uni-th>
|
||||
<uni-th align="center">簇电流</uni-th>
|
||||
<uni-th align="center">簇SOC</uni-th>
|
||||
<uni-th align="center">单体最高电压</uni-th>
|
||||
<uni-th align="center">电池号码</uni-th>
|
||||
<uni-th align="center">单体最低电压</uni-th>
|
||||
<uni-th align="center">电池号码</uni-th>
|
||||
<uni-th align="center">单体最高温度</uni-th>
|
||||
<uni-th align="center">电池号码</uni-th>
|
||||
<uni-th align="center">单体最低温度</uni-th>
|
||||
<uni-th align="center">电池号码</uni-th>
|
||||
</uni-tr>
|
||||
<!-- 表格数据行 -->
|
||||
<uni-tr v-for="(tableItem, tableIndex) in item.batteryDataList"
|
||||
:key="tableIndex+'batteryDataList'">
|
||||
<uni-td align="center">{{tableItem.clusterId}}</uni-td>
|
||||
<uni-td align="center">{{tableItem.clusterVoltage}}V</uni-td>
|
||||
<uni-td align="center">{{tableItem.clusterCurrent}}A</uni-td>
|
||||
<uni-td align="center">{{tableItem.currentSoc}}%</uni-td>
|
||||
<uni-td align="center">{{tableItem.maxCellVoltage}}V</uni-td>
|
||||
<uni-td align="center">{{tableItem.maxCellVoltageId}}</uni-td>
|
||||
<uni-td align="center">{{tableItem.minCellVoltage}}V</uni-td>
|
||||
<uni-td align="center">{{tableItem.maxCellVoltageId}}</uni-td>
|
||||
<uni-td align="center">{{tableItem.maxCellTemp}}℃</uni-td>
|
||||
<uni-td align="center">{{tableItem.maxCellTempId}}</uni-td>
|
||||
<uni-td align="center">{{tableItem.minCellTemp}}℃</uni-td>
|
||||
<uni-td align="center">{{tableItem.minCellTempId}}</uni-td>
|
||||
</uni-tr>
|
||||
</uni-table>
|
||||
</uni-group>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
<view class="no-data" v-else>
|
||||
暂无数据
|
||||
</view>
|
||||
@ -99,14 +63,15 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getBMSOverView
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
<script>
|
||||
import {
|
||||
getProjectDisplayData,
|
||||
getStackNameList
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
STACKWorkStatusOptions: (state) =>
|
||||
@ -115,11 +80,13 @@
|
||||
state.ems.communicationStatusOptions,
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
siteId: '',
|
||||
infoData: [{
|
||||
data() {
|
||||
return {
|
||||
displayData: [],
|
||||
stackDeviceList: [],
|
||||
list: [],
|
||||
siteId: '',
|
||||
infoData: [{
|
||||
label: '电池堆总电压',
|
||||
attr: 'stackVoltage',
|
||||
unit: 'V',
|
||||
@ -182,37 +149,110 @@
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCardClass(item) {
|
||||
const {
|
||||
workStatus = ''
|
||||
} = item
|
||||
return !Object.keys(this.STACKWorkStatusOptions).find(i => i === workStatus) ? "timing-collapse-item" :
|
||||
workStatus === '9' ? 'warning-collapse-item' : 'running-collapse-item'
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.showLoading()
|
||||
this.siteId = options.siteId || ''
|
||||
getBMSOverView({
|
||||
siteId: this.siteId
|
||||
}).then(response => {
|
||||
this.list = response?.data || []
|
||||
if (this.list.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.collapse.resize()
|
||||
uni.hideLoading()
|
||||
}, 100)
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
}
|
||||
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
},
|
||||
methods: {
|
||||
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
|
||||
},
|
||||
isEmptyValue(value) {
|
||||
return value === undefined || value === null || value === ''
|
||||
},
|
||||
getFieldRowMap(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
|
||||
})
|
||||
rows.forEach(item => {
|
||||
if (!item || !item.fieldCode) return
|
||||
const itemDeviceId = String(item.deviceId || '')
|
||||
if (itemDeviceId !== '') return
|
||||
const fieldName = this.getFieldName(item.fieldCode)
|
||||
const existRow = map[fieldName]
|
||||
if (!existRow || this.isEmptyValue(existRow.fieldValue)) {
|
||||
map[fieldName] = item
|
||||
}
|
||||
})
|
||||
return map
|
||||
},
|
||||
getFieldMap(rowMap = {}) {
|
||||
const map = {}
|
||||
Object.keys(rowMap || {}).forEach((fieldName) => {
|
||||
map[fieldName] = rowMap[fieldName]?.fieldValue
|
||||
})
|
||||
return map
|
||||
},
|
||||
buildBaseInfoList() {
|
||||
const devices = (this.stackDeviceList && this.stackDeviceList.length > 0) ? this.stackDeviceList : [{
|
||||
deviceId: this.siteId,
|
||||
deviceName: 'BMS总览'
|
||||
}]
|
||||
this.list = devices.map(device => {
|
||||
const id = device.deviceId || device.id || this.siteId
|
||||
const infoRowMap = this.getFieldRowMap(this.getModuleRows('SBJK_BMSZL', '堆信息'), id)
|
||||
const statusRowMap = this.getFieldRowMap(this.getModuleRows('SBJK_BMSZL', '状态'), id)
|
||||
const infoMap = this.getFieldMap(infoRowMap)
|
||||
const statusMap = this.getFieldMap(statusRowMap)
|
||||
return {
|
||||
...infoMap,
|
||||
workStatus: statusMap.workStatus,
|
||||
pcsCommunicationStatus: statusMap.pcsCommunicationStatus,
|
||||
emsCommunicationStatus: statusMap.emsCommunicationStatus,
|
||||
siteId: this.siteId,
|
||||
deviceId: id,
|
||||
deviceName: device.deviceName || device.name || device.deviceId || device.id || 'BMS总览',
|
||||
batteryDataList: []
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCardClass(item) {
|
||||
const {
|
||||
workStatus = ''
|
||||
} = item
|
||||
return !Object.keys(this.STACKWorkStatusOptions).find(i => i === workStatus) ? "timing-collapse-item" :
|
||||
workStatus === '9' ? 'warning-collapse-item' : 'running-collapse-item'
|
||||
},
|
||||
updateData() {
|
||||
return Promise.all([
|
||||
getProjectDisplayData(this.siteId),
|
||||
getStackNameList(this.siteId)
|
||||
]).then(([displayResponse, stackResponse]) => {
|
||||
this.displayData = displayResponse?.data || []
|
||||
this.stackDeviceList = stackResponse?.data || []
|
||||
this.buildBaseInfoList()
|
||||
}).catch(() => {
|
||||
this.displayData = []
|
||||
this.stackDeviceList = []
|
||||
this.list = []
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.showLoading()
|
||||
this.siteId = options.siteId || ''
|
||||
this.updateData().then(() => {
|
||||
if (this.list.length === 0) {
|
||||
uni.hideLoading()
|
||||
return
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.collapse && this.$refs.collapse.resize()
|
||||
uni.hideLoading()
|
||||
}, 100)
|
||||
})
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -17,12 +17,12 @@
|
||||
</view>
|
||||
</template>
|
||||
<view class='content'>
|
||||
<uni-group mode="card" class="data-card-group">
|
||||
<uni-row v-for="(tempDataItem,tempDataIndex) in
|
||||
(deviceIdTypeMsg[item.deviceId] || otherTypeMsg)" :key="tempDataIndex+'dbTempData'" class="data-row">
|
||||
<uni-col :span="8">
|
||||
<view class="title">{{tempDataItem.name}}</view>
|
||||
</uni-col>
|
||||
<uni-group mode="card" class="data-card-group">
|
||||
<uni-row v-for="(tempDataItem,tempDataIndex) in
|
||||
(item.fieldConfigs || otherTypeMsg)" :key="tempDataIndex+'dbTempData'" class="data-row">
|
||||
<uni-col :span="8">
|
||||
<view class="title">{{tempDataItem.name}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="16">
|
||||
<view class="value">{{item[tempDataItem.attr] | formatNumber}}
|
||||
<text v-if="tempDataItem.unit" v-html="tempDataItem.unit"></text>
|
||||
@ -40,129 +40,31 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getAmmeterDataList
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
<script>
|
||||
import {
|
||||
getProjectDisplayData,
|
||||
getDeviceList
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
communicationStatusOptions: (state) =>
|
||||
state.ems.communicationStatusOptions,
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
siteId: '',
|
||||
list: [],
|
||||
deviceIdTypeMsg: {
|
||||
'LOAD': [{
|
||||
name: '正向有功电能',
|
||||
attr: 'forwardActive',
|
||||
pointName: '正向有功电能',
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
name: '反向有功电能',
|
||||
attr: 'reverseActive',
|
||||
pointName: '反向有功电能',
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
name: '正向无功电能',
|
||||
attr: 'forwardReactive',
|
||||
pointName: '正向无功电能',
|
||||
unit: 'kvarh'
|
||||
},
|
||||
{
|
||||
name: '反向无功电能',
|
||||
attr: 'reverseReactive',
|
||||
pointName: '反向无功电能',
|
||||
unit: 'kvarh'
|
||||
},
|
||||
{
|
||||
name: '有功功率',
|
||||
attr: 'activePower',
|
||||
pointName: '总有功功率',
|
||||
unit: 'kW'
|
||||
},
|
||||
{
|
||||
name: '无功功率',
|
||||
attr: 'reactivePower',
|
||||
pointName: '总无功功率',
|
||||
unit: 'kvar'
|
||||
}
|
||||
],
|
||||
'METE': [{
|
||||
name: '正向有功电能',
|
||||
attr: 'forwardActive',
|
||||
pointName: '正向有功电能',
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
name: '反向有功电能',
|
||||
attr: 'reverseActive',
|
||||
pointName: '反向有功电能',
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
name: '正向无功电能',
|
||||
attr: 'forwardReactive',
|
||||
pointName: '正向无功电能',
|
||||
unit: 'kvarh'
|
||||
},
|
||||
{
|
||||
name: '反向无功电能',
|
||||
attr: 'reverseReactive',
|
||||
pointName: '反向无功电能',
|
||||
unit: 'kvarh'
|
||||
},
|
||||
{
|
||||
name: '有功功率',
|
||||
attr: 'activePower',
|
||||
pointName: '总有功功率',
|
||||
unit: 'kW'
|
||||
},
|
||||
{
|
||||
name: '无功功率',
|
||||
attr: 'reactivePower',
|
||||
pointName: '总无功功率',
|
||||
unit: 'kvar'
|
||||
}
|
||||
],
|
||||
'METEGF': [{
|
||||
name: '有功电能',
|
||||
attr: 'activeEnergy',
|
||||
pointName: '有功电能',
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
name: '无功电能',
|
||||
attr: 'reactiveEnergy',
|
||||
pointName: '无功电能',
|
||||
unit: 'kvarh'
|
||||
},
|
||||
{
|
||||
name: '有功功率',
|
||||
attr: 'activePower',
|
||||
pointName: '总有功功率',
|
||||
unit: 'kW'
|
||||
},
|
||||
{
|
||||
name: '无功功率',
|
||||
attr: 'reactivePower',
|
||||
pointName: '总无功功率',
|
||||
unit: 'kvar'
|
||||
}
|
||||
]
|
||||
},
|
||||
otherTypeMsg: [{
|
||||
name: '正向有功电能',
|
||||
attr: 'forwardActive',
|
||||
pointName: '正向有功电能',
|
||||
data() {
|
||||
return {
|
||||
siteId: '',
|
||||
displayData: [],
|
||||
ammeterDeviceList: [],
|
||||
list: [],
|
||||
otherTypeMsg: [{
|
||||
name: '正向有功电能',
|
||||
attr: 'forwardActive',
|
||||
pointName: '正向有功电能',
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
@ -171,32 +73,145 @@
|
||||
pointName: '反向有功电能',
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
name: '有功功率',
|
||||
attr: 'activePower',
|
||||
pointName: '总有功功率',
|
||||
unit: 'kW'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.showLoading()
|
||||
this.siteId = options.siteId || ''
|
||||
getAmmeterDataList({
|
||||
siteId: this.siteId
|
||||
}).then(response => {
|
||||
this.list = response?.data || []
|
||||
if (this.list.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.collapse.resize()
|
||||
uni.hideLoading()
|
||||
}, 1000)
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
}
|
||||
{
|
||||
name: '正向无功电能',
|
||||
attr: 'forwardReactive',
|
||||
pointName: '正向无功电能',
|
||||
unit: 'kvarh'
|
||||
},
|
||||
{
|
||||
name: '反向无功电能',
|
||||
attr: 'reverseReactive',
|
||||
pointName: '反向无功电能',
|
||||
unit: 'kvarh'
|
||||
},
|
||||
{
|
||||
name: '有功功率',
|
||||
attr: 'activePower',
|
||||
pointName: '总有功功率',
|
||||
unit: 'kW'
|
||||
},
|
||||
{
|
||||
name: '无功功率',
|
||||
attr: 'reactivePower',
|
||||
pointName: '总无功功率',
|
||||
unit: 'kvar'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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
|
||||
},
|
||||
isEmptyValue(value) {
|
||||
return value === undefined || value === null || value === ''
|
||||
},
|
||||
getFieldRowMap(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
|
||||
})
|
||||
rows.forEach(item => {
|
||||
if (!item || !item.fieldCode) return
|
||||
const itemDeviceId = String(item.deviceId || '')
|
||||
if (itemDeviceId !== '') return
|
||||
const fieldName = this.getFieldName(item.fieldCode)
|
||||
const existRow = map[fieldName]
|
||||
if (!existRow || this.isEmptyValue(existRow.fieldValue)) {
|
||||
map[fieldName] = item
|
||||
}
|
||||
})
|
||||
return map
|
||||
},
|
||||
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
|
||||
const base = this.otherTypeMsg.find(i => i.attr === attr) || {}
|
||||
result.push({
|
||||
name,
|
||||
attr,
|
||||
pointName: base.pointName || name,
|
||||
unit: base.unit || ''
|
||||
})
|
||||
seen[name] = true
|
||||
})
|
||||
return result.length > 0 ? result : this.otherTypeMsg
|
||||
},
|
||||
buildList() {
|
||||
const rows = this.getModuleRows('SBJK_DB')
|
||||
const fieldConfigs = this.getFieldConfigs(rows)
|
||||
let devices = (this.ammeterDeviceList || []).filter(item => item.deviceCategory === 'AMMETER')
|
||||
if (devices.length === 0) {
|
||||
const grouped = {}
|
||||
rows.forEach(item => {
|
||||
const id = String(item?.deviceId || '').trim()
|
||||
if (!id || grouped[id]) return
|
||||
grouped[id] = {
|
||||
deviceId: id,
|
||||
deviceName: id
|
||||
}
|
||||
})
|
||||
devices = Object.values(grouped)
|
||||
}
|
||||
if (devices.length === 0) {
|
||||
devices = [{
|
||||
deviceId: '',
|
||||
deviceName: '电表'
|
||||
}]
|
||||
}
|
||||
this.list = devices.map(device => {
|
||||
const id = String(device.deviceId || device.id || '').trim()
|
||||
const fieldRowMap = this.getFieldRowMap(rows, id)
|
||||
const statusValue = fieldRowMap.communicationStatus?.fieldValue || fieldRowMap.emsCommunicationStatus?.fieldValue || ''
|
||||
const values = {}
|
||||
fieldConfigs.forEach(cfg => {
|
||||
values[cfg.attr] = fieldRowMap[cfg.attr]?.fieldValue
|
||||
})
|
||||
return {
|
||||
...values,
|
||||
deviceId: id,
|
||||
deviceName: device.deviceName || device.name || id || '电表',
|
||||
emsCommunicationStatus: String(statusValue || ''),
|
||||
fieldConfigs
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.showLoading()
|
||||
this.siteId = options.siteId || ''
|
||||
Promise.all([
|
||||
getProjectDisplayData(this.siteId),
|
||||
getDeviceList(this.siteId)
|
||||
]).then(([displayResponse, deviceResponse]) => {
|
||||
this.displayData = displayResponse?.data || []
|
||||
this.ammeterDeviceList = 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()
|
||||
@ -213,4 +228,4 @@
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -329,14 +329,12 @@
|
||||
this.getClusterList()
|
||||
}
|
||||
},
|
||||
getStackList() {
|
||||
getStackNameList({
|
||||
siteId: this.siteId
|
||||
}).then(response => {
|
||||
this.stackOptions = JSON.parse(JSON.stringify(response?.data || [])).map(item => {
|
||||
return {
|
||||
text: item.deviceName,
|
||||
value: item.id
|
||||
getStackList() {
|
||||
getStackNameList(this.siteId).then(response => {
|
||||
this.stackOptions = JSON.parse(JSON.stringify(response?.data || [])).map(item => {
|
||||
return {
|
||||
text: item.deviceName,
|
||||
value: item.id
|
||||
}
|
||||
})
|
||||
})
|
||||
@ -516,4 +514,4 @@
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -179,32 +179,42 @@
|
||||
text: 'PCS',
|
||||
categoryName: 'PCS'
|
||||
},
|
||||
{
|
||||
page: 'db',
|
||||
icon: 'icon-dianbiao4',
|
||||
text: '电表',
|
||||
categoryName: 'AMMETER'
|
||||
},
|
||||
{
|
||||
page: 'dtdc',
|
||||
icon: 'icon-dantidianchi',
|
||||
text: '单体电池',
|
||||
{
|
||||
page: 'db',
|
||||
icon: 'icon-dianbiao4',
|
||||
text: '电表',
|
||||
categoryName: 'AMMETER'
|
||||
},
|
||||
{
|
||||
page: 'yl',
|
||||
icon: 'icon-gongneng-diandongji',
|
||||
text: '冷却',
|
||||
categoryName: 'COOLING'
|
||||
},
|
||||
{
|
||||
page: 'dtdc',
|
||||
icon: 'icon-dantidianchi',
|
||||
text: '单体电池',
|
||||
categoryName: 'BATTERY'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['belongSite']),
|
||||
siteGirdList() {
|
||||
return this.gridList.filter(i => this.deviceCategoryOptions.includes(i.categoryName))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 更新一周冲放曲线时间范围 重置图表
|
||||
updateWeekChartDate(data) {
|
||||
this.weekChartTimeRange = data || []
|
||||
this.siteId && this.getWeekChartData()
|
||||
computed: {
|
||||
...mapGetters(['belongSite', 'currentSiteId']),
|
||||
siteGirdList() {
|
||||
return this.gridList.filter(i => this.deviceCategoryOptions.includes(i.categoryName))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isAvailableSite(siteId) {
|
||||
const site = (this.siteTypeOptions.find(i => i.value === 'cn')?.children || []).find(item => item.value === siteId)
|
||||
return !!(site && !site.disable)
|
||||
},
|
||||
// 更新一周冲放曲线时间范围 重置图表
|
||||
updateWeekChartDate(data) {
|
||||
this.weekChartTimeRange = data || []
|
||||
this.siteId && this.getWeekChartData()
|
||||
},
|
||||
// 更新当日功率曲线时间范围 重置图表
|
||||
updateActiveChartDate(data) {
|
||||
@ -221,16 +231,15 @@
|
||||
} = e.detail
|
||||
this.$tab.navigateTo(`/pages/work/${this.siteGirdList[index].page}/index?siteId=${this.siteId}`)
|
||||
},
|
||||
selectedSite(data) {
|
||||
const [typeObj, siteObj] = data.detail.value
|
||||
const {
|
||||
text,
|
||||
value
|
||||
} = siteObj
|
||||
if (value === this.siteId) return
|
||||
this.siteId = value
|
||||
this.updateSiteInfo()
|
||||
},
|
||||
selectedSite(data) {
|
||||
const siteObj = (data.detail.value || [])[1]
|
||||
const value = siteObj?.value
|
||||
if (!value) return
|
||||
if (value === this.siteId) return
|
||||
this.siteId = value
|
||||
this.$store.commit('SET_CURRENTSITEID', value)
|
||||
this.updateSiteInfo()
|
||||
},
|
||||
updateSiteInfo() {
|
||||
if (!this.siteId) return
|
||||
this.getSiteBaseInfo()
|
||||
@ -241,24 +250,27 @@
|
||||
getSiteList() {
|
||||
getAllSites().then(response => {
|
||||
const data = response?.data || []
|
||||
this.siteTypeOptions.find(i => i.value === 'cn').children = data.map(item => {
|
||||
return {
|
||||
text: item.siteName,
|
||||
value: item.siteId,
|
||||
this.siteTypeOptions.find(i => i.value === 'cn').children = data.map(item => {
|
||||
return {
|
||||
text: item.siteName,
|
||||
value: item.siteId,
|
||||
id: item.id,
|
||||
disable: !this.belongSite || this.belongSite.length === 0 || this
|
||||
.belongSite.includes('all') ? false : !this.belongSite.includes(item
|
||||
.siteId)
|
||||
}
|
||||
})
|
||||
// 设置默认展示的站点
|
||||
this.siteId = this.siteTypeOptions.find(i => i.children && i.children.length > 0)?.children
|
||||
.find(
|
||||
item => !item
|
||||
.disable)?.value || ''
|
||||
this.siteId && this.updateSiteInfo()
|
||||
})
|
||||
},
|
||||
}
|
||||
})
|
||||
const siteChildren = this.siteTypeOptions.find(i => i.value === 'cn')?.children || []
|
||||
// 设置默认展示的站点
|
||||
const defaultSiteId = this.isAvailableSite(this.currentSiteId) ? this.currentSiteId : (siteChildren.find(item =>
|
||||
!item.disable)?.value || '')
|
||||
if (defaultSiteId) {
|
||||
this.siteId = defaultSiteId
|
||||
this.$store.commit('SET_CURRENTSITEID', defaultSiteId)
|
||||
this.updateSiteInfo()
|
||||
}
|
||||
})
|
||||
},
|
||||
getSiteBaseInfo() {
|
||||
getSingleSiteBaseInfo({
|
||||
siteId: this.siteId
|
||||
@ -369,12 +381,20 @@
|
||||
]
|
||||
}))
|
||||
}).finally(() => this.$refs.weekChartDateRangeSelect.showBtnLoading(false))
|
||||
}
|
||||
},
|
||||
// 页面切换不会重新调用,如果希望每次切换页面都重新调接口,使用onShow
|
||||
onLoad() {
|
||||
this.$nextTick(() => {
|
||||
this.getSiteList()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentSiteId(newSiteId) {
|
||||
if (!newSiteId || newSiteId === this.siteId) return
|
||||
if (!this.isAvailableSite(newSiteId)) return
|
||||
this.siteId = newSiteId
|
||||
this.updateSiteInfo()
|
||||
}
|
||||
},
|
||||
// 页面切换不会重新调用,如果希望每次切换页面都重新调接口,使用onShow
|
||||
onLoad() {
|
||||
this.$nextTick(() => {
|
||||
this.getSiteList()
|
||||
this.$refs.weekChartDateRangeSelect.init()
|
||||
this.$refs.activeChartDateRangeSelect.init(true)
|
||||
})
|
||||
@ -581,4 +601,4 @@
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,24 +1,48 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 顶部6个数据 -->
|
||||
<uni-grid class="info-grid" :square="false" :column="2" :showBorder="false">
|
||||
<uni-grid-item v-for="(item,index) in runningHeadData" :key="index+'head'">
|
||||
<view class="grid-item-box">
|
||||
<image :src="require('@/static/images/ems/pcs/'+item.img+'.jpg')" class="icon" alt=""/>
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="text">{{runningHeadInfo[item.attr] | formatNumber}}</view>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
|
||||
<uni-collapse ref="collapse" accordion v-if="list.length > 0">
|
||||
<uni-collapse-item v-for="(item,index) in list" :key="index+'pcs'" :open="index===0"
|
||||
class="common-collapse-item" :class="handleCardClass(item)">
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 顶部总览横向展示 -->
|
||||
<scroll-view class="info-overview-scroll" scroll-x>
|
||||
<view class="info-overview-row">
|
||||
<view class="info-overview-card" v-for="(item,index) in runningHeadCards" :key="index+'head'">
|
||||
<view class="grid-item-box">
|
||||
<image :src="require('@/static/images/ems/pcs/'+item.img+'.jpg')" class="icon" alt="" />
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="text">{{item.value | formatNumber}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 设备标签横向展示 -->
|
||||
<scroll-view class="pcs-tags-scroll" scroll-x>
|
||||
<view class="pcs-tags-row">
|
||||
<view
|
||||
class="pcs-tag-item"
|
||||
:class="{ active: !selectedPcsId }"
|
||||
@click="handleTagClick('')"
|
||||
>
|
||||
全部
|
||||
</view>
|
||||
<view
|
||||
v-for="(item, index) in pcsDeviceList"
|
||||
:key="index + 'pcsTag'"
|
||||
class="pcs-tag-item"
|
||||
:class="{ active: selectedPcsId === (item.deviceId || item.id || '') }"
|
||||
@click="handleTagClick(item.deviceId || item.id || '')"
|
||||
>
|
||||
{{ item.deviceName || item.deviceId || item.id || 'PCS' }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<uni-collapse ref="collapse" accordion v-if="filteredList.length > 0">
|
||||
<uni-collapse-item v-for="(item,index) in filteredList" :key="index+'pcs'" :open="index===0"
|
||||
class="common-collapse-item" :class="handleCardClass(item)">
|
||||
|
||||
<template v-slot:title>
|
||||
<view class='title-wrapper'>
|
||||
<view class="top">
|
||||
<view class="status">{{PCSWorkStatusOptions[item.workStatus] || '暂无数据'}}</view>
|
||||
<view class="status">{{formatDictValue((PCSWorkStatusOptions || {}), item.workStatus, '暂无数据')}}</view>
|
||||
<text class="name">{{item.deviceName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
@ -31,25 +55,25 @@
|
||||
<view class="grid-item-box">
|
||||
<view class="title">工作状态</view>
|
||||
<text
|
||||
class="text work-status-color">{{PCSWorkStatusOptions[item.workStatus] || '-'}}</text>
|
||||
class="text work-status-color">{{formatDictValue((PCSWorkStatusOptions || {}), item.workStatus)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-lists">
|
||||
<view class="grid-item-box">
|
||||
<view class="title">并网状态</view>
|
||||
<text class="text">{{gridStatusOptions[item.gridStatus] || '-'}}</text>
|
||||
<text class="text">{{formatDictValue((gridStatusOptions || {}), item.gridStatus)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-lists">
|
||||
<view class="grid-item-box">
|
||||
<view class="title">设备状态</view>
|
||||
<text class="text">{{deviceStatusOptions[item.deviceStatus] || '-'}}</text>
|
||||
<text class="text">{{formatDictValue((deviceStatusOptions || {}), item.deviceStatus)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-lists">
|
||||
<view class="grid-item-box">
|
||||
<view class="title">控制模式</view>
|
||||
<text class="text">{{controlModeOptions[item.controlMode] || '-'}}</text>
|
||||
<text class="text">{{formatDictValue((controlModeOptions || {}), item.controlMode)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -96,25 +120,25 @@
|
||||
</uni-group>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
<view class="no-data" v-else>
|
||||
暂无数据
|
||||
</uni-collapse>
|
||||
<view class="no-data" v-else>
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getRunningHeadInfo,
|
||||
getPcsDetailInfo
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
<script>
|
||||
import {
|
||||
getProjectDisplayData,
|
||||
getPcsNameList
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
PCSWorkStatusOptions: (state) =>
|
||||
state.ems.PCSWorkStatusOptions,
|
||||
communicationStatusOptions: (state) =>
|
||||
@ -123,46 +147,31 @@
|
||||
state.ems.deviceStatusOptions,
|
||||
gridStatusOptions: (state) =>
|
||||
state.ems.gridStatusOptions,
|
||||
controlModeOptions: (state) =>
|
||||
state.ems.controlModeOptions,
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
runningHeadData: [{
|
||||
title: '实时有功功率(kW)',
|
||||
bgColor: '#FFF2CB',
|
||||
attr: 'totalActivePower',
|
||||
img: 'ssyggl'
|
||||
}, {
|
||||
title: '实时无功功率(kVar)',
|
||||
bgColor: '#CBD6FF',
|
||||
attr: 'totalReactivePower',
|
||||
img: 'sswggl'
|
||||
}, {
|
||||
title: '电池堆SOC',
|
||||
bgColor: '#DCCBFF',
|
||||
attr: 'soc',
|
||||
img: 'soc'
|
||||
}, {
|
||||
title: '电池堆SOH',
|
||||
bgColor: '#FFD4CB',
|
||||
attr: 'soh',
|
||||
img: 'soh'
|
||||
}, {
|
||||
title: '今日充电量(kWh)',
|
||||
bgColor: '#FFD6F8',
|
||||
attr: 'dayChargedCap',
|
||||
img: 'jrcdl'
|
||||
}, {
|
||||
title: '今日放电量(kWh)',
|
||||
bgColor: '#E1FFCA',
|
||||
attr: 'dayDisChargedCap',
|
||||
img: 'jrfdl'
|
||||
}],
|
||||
runningHeadInfo: {},
|
||||
list: [],
|
||||
siteId: '',
|
||||
controlModeOptions: (state) =>
|
||||
state.ems.controlModeOptions,
|
||||
}),
|
||||
runningHeadCards() {
|
||||
const sectionData = (this.runningDisplayData || []).filter(item => item.sectionName === '运行概览')
|
||||
return sectionData.map((item, index) => ({
|
||||
title: item.fieldName,
|
||||
value: item.fieldValue,
|
||||
img: this.getHeadCardImg(item, index)
|
||||
}))
|
||||
},
|
||||
filteredList() {
|
||||
if (!this.selectedPcsId) {
|
||||
return this.list || []
|
||||
}
|
||||
return (this.list || []).filter(item => (item.deviceId || '') === this.selectedPcsId)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
runningDisplayData: [],
|
||||
pcsDeviceList: [],
|
||||
selectedPcsId: '',
|
||||
list: [],
|
||||
siteId: '',
|
||||
infoData: [{
|
||||
label: "总交流有功功率",
|
||||
attr: "totalActivePower",
|
||||
@ -257,79 +266,228 @@
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCardClass(item) {
|
||||
const {
|
||||
workStatus = ''
|
||||
} = item
|
||||
return workStatus === '1' || !Object.keys(this.PCSWorkStatusOptions).find(i => i === workStatus) ?
|
||||
"timing-collapse-item" : workStatus === '2' ? 'warning-collapse-item' : 'running-collapse-item'
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.showLoading()
|
||||
this.siteId = options.siteId || ''
|
||||
getRunningHeadInfo({
|
||||
siteId: this.siteId
|
||||
}).then(response => {
|
||||
this.runningHeadInfo = response?.data || {}
|
||||
})
|
||||
|
||||
getPcsDetailInfo({
|
||||
siteId: this.siteId
|
||||
}).then(response => {
|
||||
this.list = response?.data || []
|
||||
if (this.list.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.collapse.resize()
|
||||
uni.hideLoading()
|
||||
}, 100)
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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, emptyText = '-') {
|
||||
const dict = (options && typeof options === 'object') ? options : {}
|
||||
const key = this.normalizeDictKey(value)
|
||||
if (!key) return emptyText
|
||||
return dict[key] || key
|
||||
},
|
||||
normalizeDeviceId(value) {
|
||||
return String(value == null ? '' : value).trim().toUpperCase()
|
||||
},
|
||||
getModuleRows(menuCode, sectionName) {
|
||||
return (this.runningDisplayData || []).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
|
||||
},
|
||||
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] === undefined || map[fieldName] === null || map[fieldName] === '') {
|
||||
map[fieldName] = item
|
||||
}
|
||||
})
|
||||
return map
|
||||
},
|
||||
getFieldMap(rows = [], deviceId = '') {
|
||||
const rowMap = this.getFieldRowMap(rows, deviceId)
|
||||
return Object.keys(rowMap).reduce((acc, fieldName) => {
|
||||
const row = rowMap[fieldName] || {}
|
||||
acc[fieldName] = row.fieldValue
|
||||
return acc
|
||||
}, {})
|
||||
},
|
||||
getLatestTime(menuCode) {
|
||||
const times = (this.runningDisplayData || [])
|
||||
.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 = []
|
||||
})
|
||||
},
|
||||
buildPcsList() {
|
||||
const devices = this.pcsDeviceList || []
|
||||
this.list = devices.map((device) => ({
|
||||
...this.getFieldMap(this.getModuleRows('SBJK_PCS', '电参量'), device.deviceId || device.id || ''),
|
||||
deviceId: device.deviceId || device.id || '',
|
||||
deviceName: device.deviceName || device.name || device.deviceId || device.id || 'PCS',
|
||||
...this.getFieldMap(this.getModuleRows('SBJK_PCS', '状态'), device.deviceId || device.id || ''),
|
||||
dataUpdateTime: this.getLatestTime('SBJK_PCS'),
|
||||
alarmNum: 0,
|
||||
pcsBranchInfoList: [],
|
||||
}))
|
||||
},
|
||||
getHeadCardImg(item, index) {
|
||||
const imgMap = {
|
||||
totalActivePower: 'ssyggl',
|
||||
totalReactivePower: 'sswggl',
|
||||
soc: 'soc',
|
||||
soh: 'soh',
|
||||
dayChargedCap: 'jrcdl',
|
||||
dayChargedCap_rt: 'jrcdl',
|
||||
dayDisChargedCap: 'jrfdl',
|
||||
dayDisChargedCap_rt: 'jrfdl'
|
||||
}
|
||||
const defaultImgs = ['ssyggl', 'sswggl', 'soc', 'soh', 'jrcdl', 'jrfdl']
|
||||
return imgMap[item.fieldCode] || defaultImgs[index % defaultImgs.length]
|
||||
},
|
||||
handleCardClass(item) {
|
||||
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-collapse-item"
|
||||
: workStatus === '2'
|
||||
? 'warning-collapse-item'
|
||||
: 'running-collapse-item'
|
||||
},
|
||||
handleTagClick(deviceId) {
|
||||
this.selectedPcsId = deviceId || ''
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.showLoading()
|
||||
this.siteId = options.siteId || ''
|
||||
Promise.all([
|
||||
getProjectDisplayData(this.siteId),
|
||||
this.getPcsDeviceList()
|
||||
]).then(([displayResponse]) => {
|
||||
this.runningDisplayData = displayResponse?.data || []
|
||||
this.buildPcsList()
|
||||
if (this.list.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.collapse.resize()
|
||||
uni.hideLoading()
|
||||
}, 100)
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.info-grid {
|
||||
background: #fff;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.uni-grid-item {
|
||||
padding: 20rpx;
|
||||
|
||||
.grid-item-box {
|
||||
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 20rpx;
|
||||
|
||||
.title {
|
||||
color: #333;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #000;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 100rpx;
|
||||
width: 100rpx;
|
||||
display: block;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.info-overview-scroll {
|
||||
background: #fff;
|
||||
padding: 0 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.info-overview-row {
|
||||
display: inline-flex;
|
||||
gap: 20rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.info-overview-card {
|
||||
width: 280rpx;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.grid-item-box {
|
||||
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.grid-item-box .title {
|
||||
color: #333;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.grid-item-box .text {
|
||||
color: #000;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 100rpx;
|
||||
width: 100rpx;
|
||||
display: block;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.pcs-tags-scroll {
|
||||
background: #fff;
|
||||
padding: 0 20rpx 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pcs-tags-row {
|
||||
display: inline-flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.pcs-tag-item {
|
||||
flex: 0 0 auto;
|
||||
padding: 8rpx 22rpx;
|
||||
border-radius: 999rpx;
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #606266;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.4;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.pcs-tag-item.active {
|
||||
color: #fff;
|
||||
background: #007aff;
|
||||
border-color: #007aff;
|
||||
}
|
||||
</style>
|
||||
|
||||
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