390 lines
9.1 KiB
Vue
390 lines
9.1 KiB
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] || '-'}}</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]}}
|
||
<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'
|
||
},
|
||
{
|
||
label: '总交流无功电率',
|
||
attr: 'totalReactivePower',
|
||
unit: 'kVar'
|
||
},
|
||
{
|
||
label: '当天交流充电量',
|
||
attr: 'dailyAcChargeEnergy',
|
||
unit: 'kWh'
|
||
},
|
||
{
|
||
label: '当天交流放电量',
|
||
attr: 'dailyAcDischargeEnergy',
|
||
unit: 'kWh'
|
||
},
|
||
{
|
||
label: '总交流视在功率',
|
||
attr: 'totalApparentPower',
|
||
unit: 'kVA'
|
||
},
|
||
{
|
||
label: '总交流功率因数',
|
||
attr: 'totalPowerFactor',
|
||
unit: ''
|
||
},
|
||
{
|
||
label: 'PCS模块温度',
|
||
attr: 'pcsModuleTemperature',
|
||
unit: '℃'
|
||
},
|
||
{
|
||
label: 'PCS环境温度',
|
||
attr: 'pcsEnvironmentTemperature',
|
||
unit: '℃'
|
||
},
|
||
{
|
||
label: 'A相电压',
|
||
attr: 'aPhaseVoltage',
|
||
unit: 'V'
|
||
},
|
||
{
|
||
label: 'A相电流',
|
||
attr: 'aPhaseCurrent',
|
||
unit: 'A'
|
||
},
|
||
{
|
||
label: 'B相电压',
|
||
attr: 'bPhaseVoltage',
|
||
unit: 'V'
|
||
},
|
||
{
|
||
label: 'B相电流',
|
||
attr: 'bPhaseCurrent',
|
||
unit: 'A'
|
||
},
|
||
{
|
||
label: 'C相电压',
|
||
attr: 'cPhaseVoltage',
|
||
unit: 'V'
|
||
},
|
||
{
|
||
label: 'C相电流',
|
||
attr: 'cPhaseCurrent',
|
||
unit: 'A'
|
||
},
|
||
{
|
||
label: '交流频率',
|
||
attr: 'acFrequency',
|
||
unit: 'Hz'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
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> |