139 lines
7.6 KiB
Vue
139 lines
7.6 KiB
Vue
|
||
<template>
|
||
<div v-loading="loading" class="pcs-ems-dashboard-editor-container">
|
||
<!-- 顶部六个方块-->
|
||
<real-time-base-info :data="runningHeadData"/>
|
||
<div v-for="(pcsItem,pcsIndex) in pcsList" :key="pcsIndex+'PcsHome'" style="margin-bottom:25px;">
|
||
<el-card :class="{
|
||
'warning-card-container':pcsItem.workStatus === '1',
|
||
'timing-card-container':pcsItem.workStatus === '2',
|
||
'running-card-container':!['1','2'].includes(pcsItem.workStatus)
|
||
}" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
||
shadow="always">
|
||
<div slot="header">
|
||
<span class="large-title">{{pcsIndex+1}}#{{pcsItem.deviceName}}</span>
|
||
<div class="info">
|
||
<div>
|
||
{{
|
||
$store.state.ems.communicationStatusOptions[
|
||
pcsItem.communicationStatus
|
||
]
|
||
}}
|
||
</div>
|
||
<div>数据更新时间：{{ pcsItem.dataUpdateTime }}</div>
|
||
</div>
|
||
<div class="alarm">
|
||
<el-badge :value="pcsItem.alarmNum || 0" class="item">
|
||
<i class="el-icon-message-solid" style="font-size: 26px;color: #fff;display: block;"></i>
|
||
</el-badge>
|
||
</div>
|
||
</div>
|
||
<div class="descriptions-main">
|
||
<el-descriptions :colon="false" :column="4" direction="vertical">
|
||
<el-descriptions-item :contentClassName="`descriptions-direction ${pcsItem.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" labelClassName="descriptions-label">{{$store.state.ems.workStatusOptions[pcsItem.workStatus]}}</el-descriptions-item>
|
||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="并网状态" labelClassName="descriptions-label">{{$store.state.ems.gridStatusOptions[pcsItem.gridStatus]}}</el-descriptions-item>
|
||
<el-descriptions-item :contentClassName="`descriptions-direction ${pcsItem.deviceStatus === '0' ? 'save' : 'danger'}`" :span="1" label="设备状态" labelClassName="descriptions-label">{{$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]}}</el-descriptions-item>
|
||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="控制模式" labelClassName="descriptions-label">{{$store.state.ems.controlModeOptions[pcsItem.controlMode]}}</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
<div class="descriptions-main descriptions-main-bg-color">
|
||
<el-descriptions :colon="false" :column="4" contentClassName="descriptions-direction" direction="vertical" labelClassName="descriptions-label">
|
||
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label" :span="1">
|
||
<span class="pointer" @click="showChart(item.pointName || '','PCS',pcsItem.deviceId)">
|
||
{{pcsItem[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span>
|
||
</span>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
<div v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'" class="descriptions-main">
|
||
<el-descriptions :colon="false" :column="4" contentClassName="descriptions-direction keep" direction="vertical" labelClassName="descriptions-label">
|
||
<el-descriptions-item :label="'支路'+(index+1)" :span="4" contentClassName="descriptions-direction keep" labelClassName="descriptions-label">{{item.dischargeStatus}}</el-descriptions-item>
|
||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流功率" labelClassName="descriptions-label">
|
||
<span class="pointer" @click="showChart('直流功率','PCS分支设备',item.deviceId)">{{item.dcPower}}kW</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流电压" labelClassName="descriptions-label">
|
||
<span class="pointer" @click="showChart('直流电压','PCS分支设备',item.deviceId)">{{item.dcVoltage}}V</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流电流" labelClassName="descriptions-label">
|
||
<span class="pointer" @click="showChart('直流电流','PCS分支设备',item.deviceId)">{{item.dcCurrent}}A</span>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
<el-empty v-show="pcsList.length<=0" :image-size="200"></el-empty>
|
||
<!-- 电位图表 showChart({pointName:点位名称,categoryName:设备名称})-->
|
||
<point-chart ref="pointChart" :site-id="siteId"/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import pointChart from "./../PointChart.vue";
|
||
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
|
||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||
import {getRunningHeadInfo,getPcsDetailInfo} from '@/api/ems/dzjk'
|
||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||
export default {
|
||
name:'DzjkSbjkPcs',
|
||
components:{RealTimeBaseInfo,pointChart},
|
||
mixins:[getQuerySiteId,intervalUpdate],
|
||
data() {
|
||
return {
|
||
loading:false,
|
||
runningHeadData:{},//运行信息
|
||
pcsList:[],
|
||
infoData:[
|
||
{label:'总交流有功电率',attr:'totalActivePower',unit:'kW',pointName:'总交流有功电率'},
|
||
{label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh',pointName:'当天交流充电量 (kWh)'},
|
||
{label:'A相电压',attr:'aPhaseVoltage',unit:'V',pointName:''},
|
||
{label:'A相电流',attr:'aPhaseCurrent',unit:'A',pointName:'A相电流'},
|
||
{label:'总交流无功电率',attr:'totalReactivePower',unit:'kVar',pointName:'总交流无功电率'},
|
||
{label:'当天交流放电量',attr:'dailyAcDischargeEnergy',unit:'kWh',pointName:'当天交流放电量 (kWh)'},
|
||
{label:'B相电压',attr:'bPhaseVoltage',unit:'V',pointName:''},
|
||
{label:'B相电流',attr:'bPhaseCurrent',unit:'A',pointName:'B相电流'},
|
||
{label:'总交流视在功率',attr:'totalApparentPower',unit:'kVA',pointName:'总交流视在功率'},
|
||
{label:'PCS模块温度',attr:'pcsModuleTemperature',unit:'℃',pointName:''},
|
||
{label:'C相电压',attr:'cPhaseVoltage',unit:'V',pointName:''},
|
||
{label:'C相电流',attr:'cPhaseCurrent',unit:'A',pointName:'C相电流'},
|
||
{label:'总交流功率因数',attr:'totalPowerFactor',unit:'',pointName:'总交流功率因数'},
|
||
{label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'℃',pointName:''},
|
||
{label:'交流频率',attr:'acFrequency',unit:'Hz',pointName:'交流频率'}
|
||
],
|
||
pcsBranchList:[],//pcs的支路列表
|
||
}
|
||
},
|
||
methods:{
|
||
//todo 后续需要新增设备id
|
||
showChart(pointName,categoryName,deviceId){
|
||
console.log('点击查询图表',pointName,categoryName,deviceId)
|
||
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
|
||
},
|
||
//6个方块数据
|
||
getRunningHeadData(){
|
||
getRunningHeadInfo(this.siteId).then(response => {
|
||
this.runningHeadData = response?.data || {}
|
||
})
|
||
},
|
||
getPcsList(){
|
||
this.loading = true
|
||
getPcsDetailInfo(this.siteId).then(response => {
|
||
const data = response?.data || {}
|
||
this.pcsList = JSON.parse(JSON.stringify(data))
|
||
}).finally(()=>this.loading = false)
|
||
},
|
||
updateData(){
|
||
this.getRunningHeadData()
|
||
this.getPcsList()
|
||
},
|
||
init(){
|
||
this.updateData()
|
||
this.updateInterval(this.updateData)
|
||
}
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
</style>
|