emsapp/pages/work/bmszl/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+'bmszl'" :open="index===0"
				:title="`${index+1}#${item.deviceName}`" :class="item.workStatus === '0' ? 'running' :'danger'">
				<view>
					<uni-group mode="card" class="work-group">
						<uni-grid :column="3" :showBorder="false">
							<uni-grid-item>
								<view class="grid-item-box">
									<view class="title">工作状态</view>
									<text class="text status">{{workStatusOptions[item.workStatus]}}</text>
								</view>
							</uni-grid-item>
							<uni-grid-item>
								<view class="grid-item-box">
									<view class="title">与PCS通信</view>
									<text
										class="text">{{communicationStatusOptions[item.pcsCommunicationStatus]}}</text>
								</view>
							</uni-grid-item>
							<uni-grid-item>
								<view class="grid-item-box">
									<view class="title">与EMS通信</view>
									<text
										class="text">{{communicationStatusOptions[item.emsCommunicationStatus]}}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</uni-group>
					<uni-group mode="card">
						<uni-grid :column="3" :showBorder="false">
							<uni-grid-item v-for="(infoDataItem,infoDataIndex) in infoData"
								:key="infoDataIndex+'infoData'">
								<view class="grid-item-box">
									<view class="title">{{infoDataItem.label}}</view>
									<text class="text">{{item[infoDataItem.attr]}}
										<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
									</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</uni-group>
					<uni-group mode="card" style="margin-bottom: 25px;">
						<uni-table border stripe emptyText="暂无数据">
							<!-- 表头行 -->
							<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-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.minCellVoltage}}V</uni-td>
								<uni-td align="center">{{tableItem.maxCellTemp}}&#8451;</uni-td>
								<uni-td align="center">{{tableItem.minCellTemp}}&#8451;</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({
				workStatusOptions: (state) =>
					state.ems.workStatusOptions,
				communicationStatusOptions: (state) =>
					state.ems.communicationStatusOptions,
			})
		},
		data() {
			return {
				list: [],
				siteId: '',
				infoData: [{
						label: '电池堆总电压',
						attr: 'stackVoltage',
						unit: 'V'
					},
					{
						label: '可充电量',
						attr: 'availableChargeCapacity',
						unit: 'kWh'
					},
					{
						label: '累计充电量',
						attr: 'totalChargeCapacity',
						unit: 'kWh'
					},
					{
						label: '电池堆总电流',
						attr: 'stackCurrent',
						unit: 'A'
					},
					{
						label: '可放电量',
						attr: 'availableDischargeCapacity',
						unit: 'kWh'
					},
					{
						label: '累计放电量',
						attr: 'totalDischargeCapacity',
						unit: 'kWh'
					},
					{
						label: 'SOH',
						attr: 'stackSoh',
						unit: '%'
					},
					{
						label: '平均温度',
						attr: 'operatingTemp',
						unit: '&#8451;'
					},
					{
						label: '绝缘电阻',
						attr: 'stackInsulationResistance',
						unit: '&Omega;'
					},
					{
						label: '当前SOC',
						attr: 'stackSoc',
						unit: '%'
					},
				]

			}
		},
		mounted() {
			uni.showLoading()
			this.siteId = this.$route.query.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>

<style lang="scss" scoped>
	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px;
		background-color: #fff;

		.title {
			font-size: 14px;
			color: #666;
		}

		.text {
			margin-top: 10px;
			font-size: 16px;
			font-weight: 500;
			color: #666;
			overflow-wrap: anywhere;
		}

	}

	::v-deep {
		.uni-collapse-item__wrap {
			background-color: #eee;
		}

		.running {
			.uni-collapse-item__title-text {
				color: #05AEA3;
			}

			.status {
				color: #05AEA3;
			}

		}

		.danger {
			.uni-collapse-item__title-text {
				color: #FC6B69;
			}

			.status {
				color: #FC6B69;
			}
		}
	}
</style>