494 lines
14 KiB
Vue
494 lines
14 KiB
Vue
<template>
|
|
<view class="page-container">
|
|
<!-- 顶部总览横向展示 -->
|
|
<scroll-view class="info-overview-scroll" scroll-x>
|
|
<view class="info-overview-row">
|
|
<view class="info-overview-card" v-for="(item,index) in runningHeadCards" :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">{{item.value | formatNumber}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 设备标签横向展示 -->
|
|
<scroll-view class="pcs-tags-scroll" scroll-x>
|
|
<view class="pcs-tags-row">
|
|
<view
|
|
class="pcs-tag-item"
|
|
:class="{ active: !selectedPcsId }"
|
|
@click="handleTagClick('')"
|
|
>
|
|
全部
|
|
</view>
|
|
<view
|
|
v-for="(item, index) in pcsDeviceList"
|
|
:key="index + 'pcsTag'"
|
|
class="pcs-tag-item"
|
|
:class="{ active: selectedPcsId === (item.deviceId || item.id || '') }"
|
|
@click="handleTagClick(item.deviceId || item.id || '')"
|
|
>
|
|
{{ item.deviceName || item.deviceId || item.id || 'PCS' }}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<uni-collapse ref="collapse" accordion v-if="filteredList.length > 0">
|
|
<uni-collapse-item v-for="(item,index) in filteredList" :key="index+'pcs'" :open="index===0"
|
|
class="common-collapse-item" :class="handleCardClass(item)">
|
|
|
|
<template v-slot:title>
|
|
<view class='title-wrapper'>
|
|
<view class="top">
|
|
<view class="status">{{formatDictValue((PCSWorkStatusOptions || {}), 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">{{formatDictValue((PCSWorkStatusOptions || {}), item.workStatus)}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-lists">
|
|
<view class="grid-item-box">
|
|
<view class="title">并网状态</view>
|
|
<text class="text">{{formatDictValue((gridStatusOptions || {}), item.gridStatus)}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-lists">
|
|
<view class="grid-item-box">
|
|
<view class="title">设备状态</view>
|
|
<text class="text">{{formatDictValue((deviceStatusOptions || {}), item.deviceStatus)}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-lists">
|
|
<view class="grid-item-box">
|
|
<view class="title">控制模式</view>
|
|
<text class="text">{{formatDictValue((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 {
|
|
getProjectDisplayData,
|
|
getPcsNameList
|
|
} from '@/api/ems/site.js'
|
|
import {
|
|
mapState
|
|
} from 'vuex'
|
|
export default {
|
|
computed: {
|
|
...mapState({
|
|
PCSWorkStatusOptions: (state) =>
|
|
state.ems.PCSWorkStatusOptions,
|
|
communicationStatusOptions: (state) =>
|
|
state.ems.communicationStatusOptions,
|
|
deviceStatusOptions: (state) =>
|
|
state.ems.deviceStatusOptions,
|
|
gridStatusOptions: (state) =>
|
|
state.ems.gridStatusOptions,
|
|
controlModeOptions: (state) =>
|
|
state.ems.controlModeOptions,
|
|
}),
|
|
runningHeadCards() {
|
|
const sectionData = (this.runningDisplayData || []).filter(item => item.sectionName === '运行概览')
|
|
return sectionData.map((item, index) => ({
|
|
title: item.fieldName,
|
|
value: item.fieldValue,
|
|
img: this.getHeadCardImg(item, index)
|
|
}))
|
|
},
|
|
filteredList() {
|
|
if (!this.selectedPcsId) {
|
|
return this.list || []
|
|
}
|
|
return (this.list || []).filter(item => (item.deviceId || '') === this.selectedPcsId)
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
runningDisplayData: [],
|
|
pcsDeviceList: [],
|
|
selectedPcsId: '',
|
|
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: "交流频率",
|
|
},
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
normalizeDictKey(value) {
|
|
const raw = String(value == null ? '' : value).trim()
|
|
if (!raw) return ''
|
|
if (/^-?\d+(\.0+)?$/.test(raw)) {
|
|
return String(parseInt(raw, 10))
|
|
}
|
|
return raw
|
|
},
|
|
formatDictValue(options, value, emptyText = '-') {
|
|
const dict = (options && typeof options === 'object') ? options : {}
|
|
const key = this.normalizeDictKey(value)
|
|
if (!key) return emptyText
|
|
return dict[key] || key
|
|
},
|
|
normalizeDeviceId(value) {
|
|
return String(value == null ? '' : value).trim().toUpperCase()
|
|
},
|
|
getModuleRows(menuCode, sectionName) {
|
|
return (this.runningDisplayData || []).filter(item => item.menuCode === menuCode && item.sectionName === sectionName)
|
|
},
|
|
getFieldName(fieldCode) {
|
|
if (!fieldCode) {
|
|
return ''
|
|
}
|
|
const index = fieldCode.lastIndexOf('__')
|
|
return index >= 0 ? fieldCode.slice(index + 2) : fieldCode
|
|
},
|
|
getFieldRowMap(rows = [], deviceId = '') {
|
|
const map = {}
|
|
const targetDeviceId = this.normalizeDeviceId(deviceId || '')
|
|
rows.forEach(item => {
|
|
if (!item || !item.fieldCode) {
|
|
return
|
|
}
|
|
const itemDeviceId = this.normalizeDeviceId(item.deviceId || '')
|
|
if (itemDeviceId !== targetDeviceId) {
|
|
return
|
|
}
|
|
map[this.getFieldName(item.fieldCode)] = item
|
|
})
|
|
rows.forEach(item => {
|
|
if (!item || !item.fieldCode) {
|
|
return
|
|
}
|
|
const itemDeviceId = this.normalizeDeviceId(item.deviceId || '')
|
|
if (itemDeviceId !== '') {
|
|
return
|
|
}
|
|
const fieldName = this.getFieldName(item.fieldCode)
|
|
if (map[fieldName] === undefined || map[fieldName] === null || map[fieldName] === '') {
|
|
map[fieldName] = item
|
|
}
|
|
})
|
|
return map
|
|
},
|
|
getFieldMap(rows = [], deviceId = '') {
|
|
const rowMap = this.getFieldRowMap(rows, deviceId)
|
|
return Object.keys(rowMap).reduce((acc, fieldName) => {
|
|
const row = rowMap[fieldName] || {}
|
|
acc[fieldName] = row.fieldValue
|
|
return acc
|
|
}, {})
|
|
},
|
|
getLatestTime(menuCode) {
|
|
const times = (this.runningDisplayData || [])
|
|
.filter(item => item.menuCode === menuCode && item.valueTime)
|
|
.map(item => new Date(item.valueTime).getTime())
|
|
.filter(ts => !isNaN(ts))
|
|
if (times.length === 0) {
|
|
return '-'
|
|
}
|
|
const date = new Date(Math.max(...times))
|
|
const p = (n) => String(n).padStart(2, '0')
|
|
return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())} ${p(date.getHours())}:${p(date.getMinutes())}:${p(date.getSeconds())}`
|
|
},
|
|
getPcsDeviceList() {
|
|
return getPcsNameList(this.siteId).then((response) => {
|
|
this.pcsDeviceList = response?.data || []
|
|
}).catch(() => {
|
|
this.pcsDeviceList = []
|
|
})
|
|
},
|
|
buildPcsList() {
|
|
const devices = this.pcsDeviceList || []
|
|
this.list = devices.map((device) => ({
|
|
...this.getFieldMap(this.getModuleRows('SBJK_PCS', '电参量'), device.deviceId || device.id || ''),
|
|
deviceId: device.deviceId || device.id || '',
|
|
deviceName: device.deviceName || device.name || device.deviceId || device.id || 'PCS',
|
|
...this.getFieldMap(this.getModuleRows('SBJK_PCS', '状态'), device.deviceId || device.id || ''),
|
|
dataUpdateTime: this.getLatestTime('SBJK_PCS'),
|
|
alarmNum: 0,
|
|
pcsBranchInfoList: [],
|
|
}))
|
|
},
|
|
getHeadCardImg(item, index) {
|
|
const imgMap = {
|
|
totalActivePower: 'ssyggl',
|
|
totalReactivePower: 'sswggl',
|
|
soc: 'soc',
|
|
soh: 'soh',
|
|
dayChargedCap: 'jrcdl',
|
|
dayChargedCap_rt: 'jrcdl',
|
|
dayDisChargedCap: 'jrfdl',
|
|
dayDisChargedCap_rt: 'jrfdl'
|
|
}
|
|
const defaultImgs = ['ssyggl', 'sswggl', 'soc', 'soh', 'jrcdl', 'jrfdl']
|
|
return imgMap[item.fieldCode] || defaultImgs[index % defaultImgs.length]
|
|
},
|
|
handleCardClass(item) {
|
|
const workStatus = this.normalizeDictKey((item && item.workStatus) || '')
|
|
const statusOptions = (this.PCSWorkStatusOptions && typeof this.PCSWorkStatusOptions === 'object')
|
|
? this.PCSWorkStatusOptions
|
|
: {}
|
|
const hasStatus = Object.prototype.hasOwnProperty.call(statusOptions, workStatus)
|
|
return workStatus === '1' || !hasStatus
|
|
? "timing-collapse-item"
|
|
: workStatus === '2'
|
|
? 'warning-collapse-item'
|
|
: 'running-collapse-item'
|
|
},
|
|
handleTagClick(deviceId) {
|
|
this.selectedPcsId = deviceId || ''
|
|
},
|
|
},
|
|
onLoad(options) {
|
|
uni.showLoading()
|
|
this.siteId = options.siteId || ''
|
|
Promise.all([
|
|
getProjectDisplayData(this.siteId),
|
|
this.getPcsDeviceList()
|
|
]).then(([displayResponse]) => {
|
|
this.runningDisplayData = displayResponse?.data || []
|
|
this.buildPcsList()
|
|
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-overview-scroll {
|
|
background: #fff;
|
|
padding: 0 20rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.info-overview-row {
|
|
display: inline-flex;
|
|
gap: 20rpx;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.info-overview-card {
|
|
width: 280rpx;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.grid-item-box {
|
|
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.08);
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
background: #fff;
|
|
}
|
|
|
|
.grid-item-box .title {
|
|
color: #333;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.grid-item-box .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;
|
|
}
|
|
|
|
.pcs-tags-scroll {
|
|
background: #fff;
|
|
padding: 0 20rpx 20rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pcs-tags-row {
|
|
display: inline-flex;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.pcs-tag-item {
|
|
flex: 0 0 auto;
|
|
padding: 8rpx 22rpx;
|
|
border-radius: 999rpx;
|
|
border: 1px solid #dcdfe6;
|
|
color: #606266;
|
|
font-size: 24rpx;
|
|
line-height: 1.4;
|
|
background: #fff;
|
|
}
|
|
|
|
.pcs-tag-item.active {
|
|
color: #fff;
|
|
background: #007aff;
|
|
border-color: #007aff;
|
|
}
|
|
</style>
|