330 lines
8.7 KiB
Vue
330 lines
8.7 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<!-- 顶部6个数据 -->
|
||
<uni-grid class="info-grid" :square="false" :column="2" :showBorder="false">
|
||
<uni-grid-item v-for="(item,index) in runningHeadData" :key="index+'head'">
|
||
<view class="grid-item-box">
|
||
<image :src="require('@/static/images/ems/pcs/'+item.img+'.jpg')" class="icon" alt="">
|
||
<view class="title">{{item.title}}</view>
|
||
<view class="text">{{runningHeadInfo[item.attr] | formatNumber}}</view>
|
||
</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="index+'pcs'" :open="index===0"
|
||
class="common-collapse-item" :class="{
|
||
'timing-collapse-item':!['0','2'].includes(item.workStatus),
|
||
'warning-collapse-item':item.workStatus === '2',
|
||
'running-collapse-item':item.workStatus === '0'
|
||
}">
|
||
|
||
<template v-slot:title>
|
||
<view class='title-wrapper'>
|
||
<view class="top">
|
||
<view class="status">{{workStatusOptions[item.workStatus] || '暂无数据'}}</view>
|
||
<text class="name">{{item.deviceName}}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class='content'>
|
||
<!-- 设备状态栏 -->
|
||
<uni-group mode="card" class="status-card-group no-wrapper-padding">
|
||
<view class="flex-container">
|
||
<view class="flex-lists">
|
||
<view class="grid-item-box">
|
||
<view class="title">工作状态</view>
|
||
<text
|
||
class="text work-status-color">{{workStatusOptions[item.workStatus] || '-'}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-lists">
|
||
<view class="grid-item-box">
|
||
<view class="title">并网状态</view>
|
||
<text class="text">{{gridStatusOptions[item.gridStatus] || '-'}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-lists">
|
||
<view class="grid-item-box">
|
||
<view class="title">设备状态</view>
|
||
<text class="text">{{deviceStatusOptions[item.deviceStatus] || '-'}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-lists">
|
||
<view class="grid-item-box">
|
||
<view class="title">控制模式</view>
|
||
<text class="text">{{controlModeOptions[item.controlMode] || '-'}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-group>
|
||
<!-- 设备数据 -->
|
||
<uni-group mode="card" class="data-card-group"
|
||
:style="{marginBottom:!item.pcsBranchInfoList || item.pcsBranchInfoList.length === 0 ?'25px' : ''}">
|
||
<uni-row v-for="(infoDataItem,infoDataIndex) in infoData" :key="infoDataIndex+'infoData'"
|
||
class="data-row">
|
||
<uni-col :span="8">
|
||
<view class="title">{{infoDataItem.label}}</view>
|
||
</uni-col>
|
||
<uni-col :span="16">
|
||
<view class="value">{{item[infoDataItem.attr] | formatNumber}}
|
||
<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</uni-group>
|
||
<!-- 支路 -->
|
||
<uni-group class="branch-card-group" :title="`支路${pcsBranchIndex+1}`" mode="card"
|
||
v-for="(pcsBranchItem,pcsBranchIndex) in item.pcsBranchInfoList"
|
||
:key="pcsBranchIndex+'pcsBranchInfoList'">
|
||
<view class="flex-container">
|
||
<view class="flex-lists">
|
||
<view class="grid-item-box">
|
||
<view class="title">直流功率</view>
|
||
<text class="text">{{pcsBranchItem.dcPower}}kW</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-lists">
|
||
<view class="grid-item-box">
|
||
<view class="title">直流电压</view>
|
||
<text class="text">{{pcsBranchItem.dcVoltage}}V</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-lists">
|
||
<view class="grid-item-box">
|
||
<view class="title">直流电流</view>
|
||
<text class="text">{{pcsBranchItem.dcCurrent}}A</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</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',
|
||
img: 'ssyggl'
|
||
}, {
|
||
title: '实时无功功率（kVar）',
|
||
bgColor: '#CBD6FF',
|
||
attr: 'totalReactivePower',
|
||
img: 'sswggl'
|
||
}, {
|
||
title: '电池堆SOC',
|
||
bgColor: '#DCCBFF',
|
||
attr: 'soc',
|
||
img: 'soc'
|
||
}, {
|
||
title: '电池堆SOH',
|
||
bgColor: '#FFD4CB',
|
||
attr: 'soh',
|
||
img: 'soh'
|
||
}, {
|
||
title: '今日充电量（kWh）',
|
||
bgColor: '#FFD6F8',
|
||
attr: 'dayChargedCap',
|
||
img: 'jrcdl'
|
||
}, {
|
||
title: '今日放电量（kWh）',
|
||
bgColor: '#E1FFCA',
|
||
attr: 'dayDisChargedCap',
|
||
img: 'jrfdl'
|
||
}],
|
||
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: "℃",
|
||
pointName: "",
|
||
},
|
||
{
|
||
label: "PCS环境温度",
|
||
attr: "pcsEnvironmentTemperature",
|
||
unit: "℃",
|
||
pointName: "",
|
||
},
|
||
{
|
||
label: "C相电压",
|
||
attr: "cPhaseVoltage",
|
||
unit: "V",
|
||
pointName: ""
|
||
},
|
||
{
|
||
label: "C相电流",
|
||
attr: "cPhaseCurrent",
|
||
unit: "A",
|
||
pointName: "C相电流",
|
||
},
|
||
|
||
{
|
||
label: "交流频率",
|
||
attr: "acFrequency",
|
||
unit: "Hz",
|
||
pointName: "交流频率",
|
||
},
|
||
]
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
uni.showLoading()
|
||
this.siteId = options.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>
|
||
.info-grid {
|
||
background: #fff;
|
||
padding: 0 20rpx;
|
||
|
||
.uni-grid-item {
|
||
padding: 20rpx;
|
||
|
||
.grid-item-box {
|
||
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.08);
|
||
border-radius: 20rpx;
|
||
|
||
.title {
|
||
color: #333;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.text {
|
||
color: #000;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.icon {
|
||
height: 100rpx;
|
||
width: 100rpx;
|
||
display: block;
|
||
border-radius: 20rpx;
|
||
}
|
||
}
|
||
</style> |