emsapp/pages/work/db/index.vue

<template>
	<view class="page-container">
		<uni-collapse ref="collapse">
			<uni-collapse-item open v-for="(item,index) in list" :key="index+'dbList'"
				:class="item.emsCommunicationStatus !== '0' ? 'danger' :'running'">
				<template v-slot:title>
					<view class="title-row">
						<view class="title">{{index+1}}#{{item.deviceName || ''}}</view>
						<view class="msg">
							<view>{{communicationStatusOptions[item.emsCommunicationStatus] || ''}}</view>
							<view>数据更新时间：{{item.dataUpdateTime || ''}}</view>
						</view>
					</view>
				</template>
				<uni-group mode="card">
					<uni-grid :column="2" showBorder class="info-grid">
						<uni-grid-item v-for="(tempDataItem,tempDataIndex) in
							deviceIdTypeMsg[item.deviceId]" :key="tempDataIndex+'dbTempData'">
							<view class="grid-item-box">
								<view class="title">{{tempDataItem.name}}</view>
								<text class="text">{{item[tempDataItem.attr]}}
									<!-- <text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text> -->
								</text>
							</view>
						</uni-grid-item>
					</uni-grid>

					<!-- <uni-row v-for="(tempDataItem,tempDataIndex) in deviceIdTypeMsg[item.deviceId]"
						:key="tempDataIndex+'dbTempData'">
						<uni-col :span="8">
							<view>{{tempDataItem.name}}</view>
						</uni-col>
						<uni-col :span="16">
							<view>{{item[tempDataItem.attr]}}</view>
						</uni-col>
					</uni-row> -->
				</uni-group>
			</uni-collapse-item>
		</uni-collapse>

	</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: '总无功功率'
						}
					]
				}

			}
		},
		mounted() {
			uni.showLoading()
			this.siteId = this.$route.query.siteId || ''
			getAmmeterDataList({
				siteId: this.siteId
			}).then(response => {
				this.list = response?.data || []
				this.$nextTick(() => {
					setTimeout(() => {
						this.$refs.collapse.resize()
						uni.hideLoading()
					}, 100)
				})
			}).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-group__title {
			background-color: #959595;

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

		.uni-collapse-item__wrap-content {
			.uni-group--card:last-child {
				margin-bottom: 25px;
			}
		}

		// row-行样式
		.uni-group__content {
			padding: 10px 15px;

			.uni-row {
				padding: 5px 0;
			}


		}

		// 折叠面板内容区域背景颜色
		.uni-collapse-item__wrap {
			background-color: #eee;
		}

		// 运行状态颜色区分
		.running {
			.uni-group__title {
				background-color: #05AEA3;
			}

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

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

		}

		.danger {
			.uni-group__title {
				background-color: #FC6B69;
			}

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

			.title-row {
				color: #FC6B69;
			}
		}
	}
</style>