优化
This commit is contained in:
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<el-row :gutter="15" style="background:#fff;">
|
||||
<el-row style="background:#fff;" class="row-container">
|
||||
<el-col v-if="tableData.length>0" :xs="24" :sm="24" :lg="24">
|
||||
<alarm-table :tableData="tableData"/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="6">
|
||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
|
||||
<div slot="header">
|
||||
@ -22,7 +25,7 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" v-for="(item,index) in sjglData" :key="index+'sjglData'" class="sjgl-data">
|
||||
<div class="sjgl-title">{{item.title}}</div>
|
||||
<div class="sjgl-value">{{item.value | formatNumber}}</div>
|
||||
<div class="sjgl-value">{{runningInfo[item.attr] | formatNumber}}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@ -31,70 +34,35 @@
|
||||
<el-col :xs="24" :sm="24" :lg="10">
|
||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
|
||||
<div slot="header">
|
||||
<span class="card-title">当前报警</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text" size="small">通讯状态：<span style="color:red">超时</span></el-button>-->
|
||||
<span class="card-title">策略信息</span>
|
||||
</div>
|
||||
<div class="ssgj-container">
|
||||
<el-table
|
||||
class="common-table"
|
||||
:data="tableData"
|
||||
height="100%"
|
||||
stripe
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="deviceName"
|
||||
label="名称">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="状态"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span :class="{'circle warning-status' : scope.row.status !== 0}">{{ $store.state.ems.warnOptions[scope.row.status]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
class-name="alarm-content"
|
||||
prop="alarmContent"
|
||||
show-overflow-tooltip
|
||||
label="告警内容">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="工单"
|
||||
fixed="right"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="mini" v-if="scope.row.ticketNo" @click="toTicket">已生成工单(工单号:{{scope.row.ticketNo}})</el-button>
|
||||
<el-button type="primary" size="mini" v-else @click="toTicket">生成工单</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="box-sizing: border-box; height: 250px;padding:20px 15px;" >
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="15" style="background:#fff;">
|
||||
<el-col :xs="24" :sm="24" :lg="12">
|
||||
<el-col :xs="24" :sm="24" :lg="24">
|
||||
<week-chart ref="weekChart"/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="12">
|
||||
<el-col :xs="24" :sm="24" :lg="24">
|
||||
<active-chart ref="activeChart"/>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getSingleSiteBaseInfo} from '@/api/ems/zddt'
|
||||
import {getDzjkHomeView, getPcsNameList, getPowerData} from '@/api/ems/dzjk'
|
||||
import {getDzjkHomeView} from '@/api/ems/dzjk'
|
||||
import WeekChart from "./WeekChart.vue";
|
||||
import ActiveChart from "./ActiveChart.vue";
|
||||
import AlarmTable from "./AlarmTable.vue";
|
||||
import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
|
||||
import {formatDate} from "@/filters/ems";
|
||||
export default {
|
||||
name:'DzjkSbjkHome',
|
||||
components: {WeekChart,ActiveChart},
|
||||
components: {WeekChart,ActiveChart,AlarmTable},
|
||||
mixins: [getQuerySiteId],
|
||||
data() {
|
||||
return {
|
||||
@ -114,67 +82,50 @@ export default {
|
||||
}],
|
||||
sjglData:[{
|
||||
title:'今日充电量（MWh）',
|
||||
value:'',
|
||||
attr:'dayChargedCap'
|
||||
},{
|
||||
title:'今日放电量（MWh）',
|
||||
value:'',
|
||||
attr:'dayDisChargedCap'
|
||||
},{
|
||||
title:'总充电量（MWh）',
|
||||
value:'',
|
||||
attr:'totalChargedCap'
|
||||
},{
|
||||
title:'总放电量（MWh）',
|
||||
value:'',
|
||||
attr:'totalDischargedCap'
|
||||
}],
|
||||
tableData:[],
|
||||
info:{}
|
||||
info:{},//基本信息
|
||||
runningInfo:{},//总累计运行数据+报警表格
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
tableData(){
|
||||
console.log('this.runningInfo?.siteMonitorHomeAlarmVo ',this.runningInfo?.siteMonitorHomeAlarmVo )
|
||||
return this.runningInfo?.siteMonitorHomeAlarmVo || []
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
toTicket(){
|
||||
this.$router.push({path:'/ticket'})
|
||||
},
|
||||
getGVQXData(){
|
||||
this.$refs.activeChart.showLoading()
|
||||
const {siteId}=this,now=new Date()
|
||||
getPcsNameList(this.siteId).then(response=>{
|
||||
const data=response?.data || [];
|
||||
if(data.length>0){
|
||||
//接口调用完成之后 设置图表、结束loading
|
||||
getPowerData({siteId,deviceId:data[0].id,startDate:formatDate(now),endDate:formatDate(now),dataType:'1'}).then(response => {
|
||||
this.$refs.activeChart.setOption(response?.data || [])
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getBaseInfo(){
|
||||
this.$refs.weekChart.showLoading()
|
||||
getSingleSiteBaseInfo(this.siteId).then(response => {
|
||||
return getSingleSiteBaseInfo(this.siteId).then(response => {
|
||||
this.info = response?.data || {}
|
||||
const {sevenDayDisChargeStats=[],unit=''} = this.info
|
||||
this.$refs.weekChart.setOption(sevenDayDisChargeStats,unit)
|
||||
})
|
||||
},
|
||||
getTableData(){
|
||||
getDzjkHomeView(this.siteId).then(response => {
|
||||
getRunningInfo(){
|
||||
return getDzjkHomeView(this.siteId).then(response => {
|
||||
const data = response?.data || {}
|
||||
this.sjglData.forEach(item=>{
|
||||
item.value =data[item.attr]
|
||||
})
|
||||
this.tableData = data?.siteMonitorHomeAlarmVo || []
|
||||
}).finally(() => {this.loading = false})
|
||||
this.runningInfo = data
|
||||
})
|
||||
},
|
||||
init(){
|
||||
this.loading = true
|
||||
// 功率曲线
|
||||
this.getGVQXData()
|
||||
// 基本信息+冲放曲线
|
||||
this.getBaseInfo()
|
||||
//其他数据
|
||||
this.getTableData()
|
||||
this.$refs.activeChart.init(this.siteId)
|
||||
// 一周冲放曲线
|
||||
this.$refs.weekChart.init(this.siteId)
|
||||
// 静态信息 this.getBaseInfo()
|
||||
// 总累计运行数据+故障告警 this.getRunningInfo()
|
||||
Promise.all([this.getBaseInfo(),this.getRunningInfo()]).finally(()=>{
|
||||
this.loading = false
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
@ -182,6 +133,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.row-container{
|
||||
&>.el-col{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
//数据概览
|
||||
.sjgl-data{
|
||||
text-align: center;
|
||||
@ -201,16 +157,25 @@ export default {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
//实时告警
|
||||
.ssgj-container{
|
||||
padding:20px;
|
||||
height: 250px;
|
||||
box-sizing: border-box;
|
||||
::v-deep{
|
||||
.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
|
||||
background:#FFF2CB ;
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
/* card标题里的时间选择器 */
|
||||
.time-range-card{
|
||||
&.common-card-container .el-card__header{
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
.time-range-header{
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.card-title{
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user