emsapp/pages/work/pcs/index.vue

<template>
	<view class="page-container">
		<!-- 顶部6个数据 -->
		<uni-grid class="info-grid" :column="2" :showBorder="false" style="margin-bottom: 10px;">
			<uni-grid-item v-for="(item,index) in runningHeadData" :key="index+'head'">
				<view class="grid-item-box">
					<view class="title">{{item.title}}</view>
					<text class="text">{{runningHeadInfo[item.attr] | formatNumber}}</text>
				</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="item.deviceId+'pcs'" :open="index===0"
				:class="item.workStatus === '1' ? 'danger' : item.workStatus === '2' ? 'close' : 'running'">
				<template v-slot:title>
					<view class="title-row">
						<view class="title">{{index+1}}#{{item.deviceName || ''}}</view>
						<view class="msg">
							<view>{{communicationStatusOptions[item.communicationStatus] || ''}}</view>
							<view>数据更新时间：{{item.dataUpdateTime || ''}}</view>
						</view>
					</view>
				</template>
				<view>
					<uni-group mode="card">
						<uni-grid :column="4" :showBorder="false">
							<uni-grid-item>
								<view class="grid-item-box">
									<view class="title">工作状态</view>
									<text class="text"
										:class="item.workStatus === '0' ? 'status-running' : 'status-danger'">{{workStatusOptions[item.workStatus]}}</text>
								</view>
							</uni-grid-item>
							<uni-grid-item>
								<view class="grid-item-box">
									<view class="title">并网状态</view>
									<text class="text">{{gridStatusOptions[item.gridStatus]}}</text>
								</view>
							</uni-grid-item>
							<uni-grid-item>
								<view class="grid-item-box">
									<view class="title">设备状态</view>
									<text class="text"
										:class="item.deviceStatus === '0' ? 'status-running' : 'status-danger'">{{deviceStatusOptions[item.deviceStatus]}}</text>
								</view>
							</uni-grid-item>
							<uni-grid-item>
								<view class="grid-item-box">
									<view class="title">控制模式</view>
									<text class="text">{{controlModeOptions[item.controlMode]}}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</uni-group>
					<!-- infoData -->
					<uni-group mode="card"
						:style="{marginBottom:!item.pcsBranchInfoList || item.pcsBranchInfoList.length === 0 ?'25px' : ''}">
						<uni-grid :column="2" showBorder class="info-grid">
							<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] | formatNumber}}
										<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
									</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</uni-group>
					<!-- 支路 -->
					<uni-group class="pcs-branch-group" :title="`支路${pcsBranchIndex+1}`" mode="card"
						v-for="(pcsBranchItem,pcsBranchIndex) in item.pcsBranchInfoList"
						:key="pcsBranchIndex+'pcsBranchInfoList'">
						<uni-grid :column="3" :showBorder="false" class="info-grid">
							<uni-grid-item>
								<view class="grid-item-box">
									<view class="title">直流功率</view>
									<text class="text">{{pcsBranchItem.dcPower}}kW</text>
								</view>
							</uni-grid-item>
							<uni-grid-item>
								<view class="grid-item-box">
									<view class="title">直流电压</view>
									<text class="text">{{pcsBranchItem.dcVoltage}}V</text>
								</view>
							</uni-grid-item>
							<uni-grid-item>
								<view class="grid-item-box">
									<view class="title">直流电流</view>
									<text class="text">{{pcsBranchItem.dcCurrent}}A</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</uni-group>
				</view>
			</uni-collapse-item>
		</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({
				workStatusOptions: (state) =>
					state.ems.workStatusOptions,
				communicationStatusOptions: (state) =>
					state.ems.communicationStatusOptions,
				deviceStatusOptions: (state) =>
					state.ems.deviceStatusOptions,
				gridStatusOptions: (state) =>
					state.ems.gridStatusOptions,
				controlModeOptions: (state) =>
					state.ems.controlModeOptions,
			})
		},
		data() {
			return {
				runningHeadData: [{
					title: '实时有功功率（kW）',
					bgColor: '#FFF2CB',
					attr: 'totalActivePower'
				}, {
					title: '实时无功功率（kVar）',
					bgColor: '#CBD6FF',
					attr: 'totalReactivePower'
				}, {
					title: '电池堆SOC',
					bgColor: '#DCCBFF',
					attr: 'soc'
				}, {
					title: '电池堆SOH',
					bgColor: '#FFD4CB',
					attr: 'soh'
				}, {
					title: '今日充电量（kWh）',
					bgColor: '#FFD6F8',
					attr: 'dayChargedCap'
				}, {
					title: '今日放电量（kWh）',
					bgColor: '#E1FFCA',
					attr: 'dayDisChargedCap'
				}],
				runningHeadInfo: {},
				list: [],
				siteId: '',
				infoData: [{
						label: "总交流有功电率",
						attr: "totalActivePower",
						unit: "kW",
						pointName: "总交流有功电率",
					},
					{
						label: "总交流无功电率",
						attr: "totalReactivePower",
						unit: "kVar",
						pointName: "总交流无功电率",
					},
					{
						label: "当天交流充电量",
						attr: "dailyAcChargeEnergy",
						unit: "kWh",
						pointName: "当天交流充电量 (kWh)",
					},
					{
						label: "当天交流放电量",
						attr: "dailyAcDischargeEnergy",
						unit: "kWh",
						pointName: "当天交流放电量 (kWh)",
					},
					{
						label: "A相电压",
						attr: "aPhaseVoltage",
						unit: "V",
						pointName: ""
					},
					{
						label: "A相电流",
						attr: "aPhaseCurrent",
						unit: "A",
						pointName: "A相电流",
					},

					{
						label: "B相电压",
						attr: "bPhaseVoltage",
						unit: "V",
						pointName: ""
					},
					{
						label: "B相电流",
						attr: "bPhaseCurrent",
						unit: "A",
						pointName: "B相电流",
					},
					{
						label: "总交流视在功率",
						attr: "totalApparentPower",
						unit: "kVA",
						pointName: "总交流视在功率",
					},
					{
						label: "总交流功率因数",
						attr: "totalPowerFactor",
						unit: "",
						pointName: "总交流功率因数",
					},
					{
						label: "PCS模块温度",
						attr: "pcsModuleTemperature",
						unit: "&#8451;",
						pointName: "",
					},
					{
						label: "PCS环境温度",
						attr: "pcsEnvironmentTemperature",
						unit: "&#8451;",
						pointName: "",
					},
					{
						label: "C相电压",
						attr: "cPhaseVoltage",
						unit: "V",
						pointName: ""
					},
					{
						label: "C相电流",
						attr: "cPhaseCurrent",
						unit: "A",
						pointName: "C相电流",
					},

					{
						label: "交流频率",
						attr: "acFrequency",
						unit: "Hz",
						pointName: "交流频率",
					},
				]
			}
		},
		mounted() {
			uni.showLoading()
			this.siteId = this.$route.query.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()
			})
		}
	}
</script>

<style lang="scss" scoped>
	.title-row {
		padding: 0 15px;
		position: relative;
		height: 50px;

		.title {
			font-weight: 500;
			line-height: 50px;
		}

		.msg {
			position: absolute;
			right: 15px;
			top: 50%;
			transform: translateY(-50%);
			text-align: right;
		}
	}

	.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;
		}

		.status-danger {
			color: #FC6B69;
		}

		.status-running {
			color: #05AEA3;
		}

	}

	::v-deep {
		.info-grid {
			.uni-grid-item {
				height: 80px !important;

				.grid-item-box {
					padding: 0;
				}
			}
		}

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

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

			.title-row {
				color: #05AEA3;
			}


		}

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

			.title-row {
				color: #FC6B69;
			}
		}

		.close {
			.uni-collapse-item__title-text {
				color: #666666;
			}

			.title-row {
				color: #666666;
			}
		}

		// 支路样式
		.pcs-branch-group {
			.uni-group__title {
				background-color: #959595;

				.uni-group__title-text {
					color: #fff;
				}
			}

			.uni-group__content {
				padding: 0;

			}

			&.uni-group--card:last-child {
				margin-bottom: 25px;
			}
		}

	}
</style>