178 lines
4.5 KiB
Vue
178 lines
4.5 KiB
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: '总无功功率'
|
|
}
|
|
]
|
|
}
|
|
|
|
}
|
|
},
|
|
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>
|
|
.unknow-bd-device {
|
|
text-align: center;
|
|
padding: 20rpx;
|
|
font-size: 28rpx;
|
|
line-height: 50rpx;
|
|
background-color: #fff;
|
|
color: #000;
|
|
}
|
|
</style> |