emsapp/pages/work/db/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="index+'dbList'" :open="index===0"
				class="common-collapse-item" :class="{
					'timing-collapse-item':!['0','2'].includes(item.emsCommunicationStatus),
							'warning-collapse-item':item.emsCommunicationStatus === '2',
							'running-collapse-item':item.emsCommunicationStatus === '0'
				}">
				<template v-slot:title>
					<view class='title-wrapper'>
						<view class="top">
							<view class="status">{{communicationStatusOptions[item.emsCommunicationStatus] || '暂无数据'}}
							</view>
							<text class="name">{{item.deviceName}}</text>
						</view>
					</view>
				</template>
				<view class='content' v-if="deviceIdTypeMsg[item.deviceId]">
					<uni-group mode="card" class="data-card-group">
						<uni-row v-for="(tempDataItem,tempDataIndex) in
						deviceIdTypeMsg[item.deviceId]" :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="infoDataItem.unit" v-html="infoDataItem.unit"></text> -->
								</view>
							</uni-col>
						</uni-row>
					</uni-group>
				</view>
				<view v-else class='unknow-bd-device'>未知的电表数据</view>
			</uni-collapse-item>
		</uni-collapse>
		<view class="no-data" v-else>
			暂无数据
		</view>
	</view>

</template>

<script>
	import {
		getAmmeterDataList
	} 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: '正向有功电能'
						},
						{
							name: '反向有功电能',
							attr: 'reverseActive',
							pointName: '反向有功电能'
						},
						{
							name: '正向无功电能',
							attr: 'forwardReactive',
							pointName: '正向无功电能'
						},
						{
							name: '反向无功电能',
							attr: 'reverseReactive',
							pointName: '反向无功电能'
						},
						{
							name: '有功功率',
							attr: 'activePower',
							pointName: '总有功功率'
						},
						{
							name: '无功功率',
							attr: 'reactivePower',
							pointName: '总无功功率'
						}
					],
					'METE': [{
							name: '正向有功电能',
							attr: 'forwardActive',
							pointName: '正向有功电能'
						},
						{
							name: '反向有功电能',
							attr: 'reverseActive',
							pointName: '反向有功电能'
						},
						{
							name: '正向无功电能',
							attr: 'forwardReactive',
							pointName: '正向无功电能'
						},
						{
							name: '反向无功电能',
							attr: 'reverseReactive',
							pointName: '反向无功电能'
						},
						{
							name: '有功功率',
							attr: 'activePower',
							pointName: '总有功功率'
						},
						{
							name: '无功功率',
							attr: 'reactivePower',
							pointName: '总无功功率'
						}
					],
					'METEGF': [{
							name: '有功电能',
							attr: 'activeEnergy',
							pointName: '有功电能'
						},
						{
							name: '无功电能',
							attr: 'reactiveEnergy',
							pointName: '无功电能'
						},
						{
							name: '有功功率',
							attr: 'activePower',
							pointName: '总有功功率'
						},
						{
							name: '无功功率',
							attr: 'reactivePower',
							pointName: '总无功功率'
						}
					]
				}

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

			}).catch(() => {
				uni.hideLoading()
			})
		}
	}
</script>
<style lang="scss" scoped>
	.unknow-bd-device {
		text-align: center;
		padding: 20rpx;
		font-size: 28rpx;
		line-height: 50rpx;
		background-color: #fff;
		color: #000;
	}
</style>