202 lines
8.0 KiB
Vue
202 lines
8.0 KiB
Vue
|
||
<template>
|
||
<div class="pcs-ems-dashboard-editor-container" v-loading="loading">
|
||
<!-- 顶部六个方块-->
|
||
<real-time-base-info :data="runningHeadData"/>
|
||
<!-- 内容-->
|
||
<el-container class="pcs-container" v-for="(pcsItem,pcsIndex) in pcsList" :key="pcsIndex+'PcsHome'">
|
||
<el-header class="pcs-header">
|
||
<div class="pcs-title">{{pcsItem.deviceName}}</div>
|
||
<div class="pcs-status">
|
||
<div>{{pcsItem.communicationStatus}}</div>
|
||
<div>数据更新时间：{{pcsItem.dataUpdateTime}}</div>
|
||
</div>
|
||
<div class="pcs-btns">
|
||
<el-button type="warning" size="small" @click="problemSaved">故障复位</el-button>
|
||
<el-button size="small" @click="machineClosed">关机</el-button>
|
||
</div>
|
||
</el-header>
|
||
<el-main style="padding: 0">
|
||
<div class="descriptions-main">
|
||
<el-descriptions direction="vertical" :column="4" :colon="false">
|
||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction danger" :span="1" label="工作状态">{{pcsItem.workStatus}}</el-descriptions-item>
|
||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="并网状态">{{pcsItem.gridStatus}}</el-descriptions-item>
|
||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction save" :span="1" label="设备状态">{{pcsItem.deviceStatus}}</el-descriptions-item>
|
||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="控制模式">{{pcsItem.controlMode}}</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
<div class="descriptions-main descriptions-main-bg-color">
|
||
<el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction" direction="vertical" :column="4" :colon="false">
|
||
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">{{pcsItem[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
<div class="descriptions-main" v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'">
|
||
<el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction keep" direction="vertical" :column="4" :colon="false">
|
||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction keep" :span="4" :label="'支路'+(index+1)">{{item.dischargeStatus}}</el-descriptions-item>
|
||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流功率">{{item.dcPower}}kW</el-descriptions-item>
|
||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流电压">{{item.dcVoltage}}V</el-descriptions-item>
|
||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流电流">{{item.dcCurrent}}A</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
</el-main>
|
||
</el-container>
|
||
<el-empty v-show="pcsList.length<=0" :image-size="200"></el-empty>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
|
||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||
import {getRunningHeadInfo,getPcsDetailInfo} from '@/api/ems/dzjk'
|
||
export default {
|
||
name:'DzjkSbjkPcs',
|
||
components:{RealTimeBaseInfo},
|
||
mixins:[getQuerySiteId],
|
||
data() {
|
||
return {
|
||
loading:false,
|
||
runningHeadData:{},//运行信息
|
||
pcsList:[],
|
||
infoData:[
|
||
{label:'总交流有功电率',attr:'totalActivePower',unit:'kW'},
|
||
{label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh'},
|
||
{label:'A相电压',attr:'aPhaseVoltage',unit:'V'},
|
||
{label:'A相电流',attr:'aPhaseCurrent',unit:'A'},
|
||
{label:'总交流无功电率',attr:'totalReactivePower',unit:'kVar'},
|
||
{label:'当天交流放电量',attr:'dailyAcDischargeEnergy',unit:'kWh'},
|
||
{label:'B相电压',attr:'bPhaseVoltage',unit:'V'},
|
||
{label:'B相电流',attr:'bPhaseCurrent',unit:'A'},
|
||
{label:'总交流视在功率',attr:'totalApparentPower',unit:'kVA'},
|
||
{label:'PCS模块温度',attr:'pcsModuleTemperature',unit:'℃'},
|
||
{label:'C相电压',attr:'cPhaseVoltage',unit:'V'},
|
||
{label:'C相电流',attr:'cPhaseCurrent',unit:'A'},
|
||
{label:'总交流功率因数',attr:'totalPowerFactor',unit:''},
|
||
{label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'℃'},
|
||
{label:'交流频率',attr:'acFrequency',unit:'Hz'}
|
||
],
|
||
pcsBranchList:[]//pcs的支路列表
|
||
}
|
||
},
|
||
methods:{
|
||
problemSaved(){
|
||
this.$confirm('确认故障已复位?', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
showClose:false,
|
||
closeOnClickModal:false,
|
||
type: 'warning',
|
||
beforeClose: (action, instance, done) => {
|
||
if (action === 'confirm') {
|
||
instance.confirmButtonLoading = true;
|
||
setTimeout(() => {
|
||
// todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
|
||
done();
|
||
// setTimeout(() => {
|
||
instance.confirmButtonLoading = false;
|
||
// }, 300);
|
||
}, 3000);
|
||
} else {
|
||
done();
|
||
}
|
||
}
|
||
}).then(() => {
|
||
//只有在故障复位成功的情况下会走到这里
|
||
this.$message({
|
||
type: 'success',
|
||
message: '故障复位成功!'
|
||
});
|
||
}).catch(() => {
|
||
//取消复位
|
||
});
|
||
},
|
||
machineClosed(){
|
||
this.$confirm('确认要关机吗?', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
showClose:false,
|
||
closeOnClickModal:false,
|
||
type: 'warning',
|
||
beforeClose: (action, instance, done) => {
|
||
if (action === 'confirm') {
|
||
instance.confirmButtonLoading = true;
|
||
setTimeout(() => {
|
||
// todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
|
||
done();
|
||
// setTimeout(() => {
|
||
instance.confirmButtonLoading = false;
|
||
// }, 300);
|
||
}, 3000);
|
||
} else {
|
||
done();
|
||
}
|
||
}
|
||
}).then(() => {
|
||
//只有在关机成功的情况下会走到这里
|
||
this.$message({
|
||
type: 'success',
|
||
message: '关机成功!'
|
||
});
|
||
}).catch(() => {
|
||
//取消关机
|
||
});
|
||
},
|
||
//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)
|
||
},
|
||
init(){
|
||
this.getRunningHeadData()
|
||
this.getPcsList()
|
||
}
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.pcs-container{
|
||
margin-top: 25px;
|
||
border:1px solid #eeeeee;
|
||
border-radius: 6px 6px 0 0;
|
||
//红色标题
|
||
.pcs-header{
|
||
background: #FC6B69;
|
||
display: flex;
|
||
position: relative;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding: 0;
|
||
height: 60px;
|
||
border-radius: 6px 6px 0 0;
|
||
.pcs-title{
|
||
color: #ffffff;
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
line-height: 20px;
|
||
padding: 0 50px 0 25px;
|
||
}
|
||
.pcs-status{
|
||
color: #ffffff;
|
||
font-size: 12px;
|
||
line-height: 20px;
|
||
}
|
||
.pcs-btns{
|
||
position: absolute;
|
||
right: 25px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
}
|
||
</style>
|