218 lines
6.6 KiB
Vue
218 lines
6.6 KiB
Vue
<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="item.deviceId+'bmszl'" :open="index===0"
|
|
class="common-collapse-item" :class="handleCardClass(item,index)">
|
|
|
|
<template v-slot:title>
|
|
<view class='title-wrapper'>
|
|
<view class="top">
|
|
<view class="status">{{STACKWorkStatusOptions[item.workStatus] || '暂无数据'}}</view>
|
|
<text class="name">{{item.deviceName}}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<view class='content'>
|
|
<!-- 设备状态栏 -->
|
|
<uni-group mode="card" class="status-card-group">
|
|
<view class="flex-container">
|
|
<view class="flex-lists">
|
|
<view class="grid-item-box">
|
|
<view class="title">工作状态</view>
|
|
<text
|
|
class="text work-status-color">{{STACKWorkStatusOptions[item.workStatus] || '-'}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-lists">
|
|
<view class="grid-item-box">
|
|
<view class="title">与PCS通信</view>
|
|
<text
|
|
class="text">{{communicationStatusOptions[item.pcsCommunicationStatus] || '-'}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-lists">
|
|
<view class="grid-item-box">
|
|
<view class="title">与EMS通信</view>
|
|
<text
|
|
class="text">{{communicationStatusOptions[item.emsCommunicationStatus] || '-'}}</text>
|
|
</view>
|
|
</view>
|
|
</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-col :span="8">
|
|
<view class="title">{{infoDataItem.label}}</view>
|
|
</uni-col>
|
|
<uni-col :span="16">
|
|
<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">簇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 class="no-data" v-else>
|
|
暂无数据
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getBMSOverView
|
|
} from '@/api/ems/site.js'
|
|
import {
|
|
mapState
|
|
} from 'vuex'
|
|
export default {
|
|
computed: {
|
|
...mapState({
|
|
STACKWorkStatusOptions: (state) =>
|
|
state.ems.STACKWorkStatusOptions,
|
|
communicationStatusOptions: (state) =>
|
|
state.ems.communicationStatusOptions,
|
|
})
|
|
},
|
|
data() {
|
|
return {
|
|
list: [],
|
|
siteId: '',
|
|
infoData: [{
|
|
label: '电池堆总电压',
|
|
attr: 'stackVoltage',
|
|
unit: 'V',
|
|
pointName: '电池堆电压'
|
|
},
|
|
{
|
|
label: '可充电量',
|
|
attr: 'availableChargeCapacity',
|
|
unit: 'kWh',
|
|
pointName: '可充电量'
|
|
},
|
|
{
|
|
label: '累计充电量',
|
|
attr: 'totalChargeCapacity',
|
|
unit: 'kWh',
|
|
pointName: '累计充电量'
|
|
},
|
|
{
|
|
label: '电池堆总电流',
|
|
attr: 'stackCurrent',
|
|
unit: 'A',
|
|
pointName: '电池堆总电流'
|
|
},
|
|
{
|
|
label: '可放电量',
|
|
attr: 'availableDischargeCapacity',
|
|
unit: 'kWh',
|
|
pointName: '可放电量'
|
|
},
|
|
{
|
|
label: '累计放电量',
|
|
attr: 'totalDischargeCapacity',
|
|
unit: 'kWh',
|
|
pointName: '累计放电量'
|
|
},
|
|
{
|
|
label: 'SOH',
|
|
attr: 'stackSoh',
|
|
unit: '%',
|
|
pointName: 'SOH'
|
|
},
|
|
{
|
|
label: '平均温度',
|
|
attr: 'operatingTemp',
|
|
unit: '℃',
|
|
pointName: '平均温度'
|
|
},
|
|
{
|
|
label: '绝缘电阻',
|
|
attr: 'stackInsulationResistance',
|
|
unit: 'Ω',
|
|
pointName: '绝缘电阻'
|
|
},
|
|
{
|
|
label: '当前SOC',
|
|
attr: 'stackSoc',
|
|
unit: '%',
|
|
pointName: '当前SOC'
|
|
},
|
|
]
|
|
|
|
}
|
|
},
|
|
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> |