emsapp/pages/work/bmsdcc/index.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+'bmscc'" :open="index===0"
				class="common-collapse-item" :class="handleCardClass(item)">

				<template v-slot:title>
					<view class='title-wrapper'>
						<view class="top">
							<view class="status">{{CLUSTERWorkStatusOptions[item.workStatus] || '暂无数据'}}</view>
							<text
								class="name">{{`${item.parentDeviceName?`${item.parentDeviceName} -> ` : ''}${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">{{CLUSTERWorkStatusOptions[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">单体最小值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>
		<view class="no-data" v-else>
			暂无数据
		</view>
	</view>

</template>

<script>
	import {
		getBMSBatteryCluster
	} from '@/api/ems/site.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState({
				CLUSTERWorkStatusOptions: (state) =>
					state.ems.CLUSTERWorkStatusOptions,
				communicationStatusOptions: (state) =>
					state.ems.communicationStatusOptions,
			})
		},
		data() {
			return {
				unitObj: {
					'电压': 'V',
					'温度': '&#8451;',
					'SOC': '%'
				},
				list: [],
				siteId: '',
				infoData: [{
						label: '簇电压',
						attr: 'clusterVoltage',
						unit: 'V',
						pointName: '簇电压'
					},
					{
						label: '可充电量',
						attr: 'chargeableCapacity',
						unit: 'kWh',
						pointName: '可充电量'
					},
					{
						label: '累计充电量',
						attr: 'totalChargedCapacity',
						unit: 'kWh',
						pointName: '累计充电量'
					},
					{
						label: '簇电流',
						attr: 'clusterCurrent',
						unit: 'A',
						pointName: '簇电流'
					},
					{
						label: '可放电量',
						attr: 'dischargeableCapacity',
						unit: 'kWh',
						pointName: '可放电量'
					},
					{
						label: '累计放电量',
						attr: 'totalDischargedCapacity',
						unit: 'kWh',
						pointName: '累计放电量'
					},
					{
						label: 'SOH',
						attr: 'soh',
						unit: '%',
						pointName: 'SOH'
					},
					{
						label: '平均温度',
						attr: 'averageTemperature',
						unit: '&#8451;',
						pointName: '平均温度'
					},
					{
						label: '绝缘电阻',
						attr: 'insulationResistance',
						unit: '&Omega;',
						pointName: '绝缘电阻'
					},
					{
						label: '当前SOC',
						attr: 'currentSoc',
						unit: '%',
						pointName: '当前SOC'
					},
				]

			}
		},
		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>