141 lines
4.0 KiB
Vue
141 lines
4.0 KiB
Vue
<template>
|
||
<div v-loading="loading">
|
||
<el-row :gutter="32" style="background:#fff;">
|
||
<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>
|
||
</div>
|
||
<div style="height: 310px" >
|
||
<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}}</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :lg="14">
|
||
<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>-->
|
||
</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"
|
||
label="告警内容">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<nllz-chart ref="nllzChart"/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {getDzjkHomeView} from '@/api/ems/dzjk'
|
||
import NllzChart from "./NllzChart.vue";
|
||
import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
|
||
export default {
|
||
name:'DzjkSbjkHome',
|
||
computed: {
|
||
loader() {
|
||
return loader
|
||
}
|
||
},
|
||
components: {NllzChart},
|
||
mixins: [getQuerySiteId],
|
||
data() {
|
||
return {
|
||
loading:false,
|
||
sjglData:[{
|
||
title:'今日充电量（MWh）',
|
||
value:'',
|
||
attr:'dayChargedCap'
|
||
},{
|
||
title:'今日放电量（MWh）',
|
||
value:'',
|
||
attr:'dayDisChargedCap'
|
||
},{
|
||
title:'总充电量（MWh）',
|
||
value:'',
|
||
attr:'totalChargedCap'
|
||
},{
|
||
title:'总放电量（MWh）',
|
||
value:'',
|
||
attr:'totalDischargedCap'
|
||
}],
|
||
// todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
|
||
tableData:[]
|
||
}
|
||
},
|
||
methods:{
|
||
init(){
|
||
this.loading = true
|
||
getDzjkHomeView(this.siteId).then(response => {
|
||
const data = response?.data || {}
|
||
this.sjglData.forEach(item=>{
|
||
item.value = (data[item.attr] || data[item.attr] === 0) ? data[item.attr] : '-'
|
||
})
|
||
this.tableData = data?.siteMonitorHomeAlarmVo || []
|
||
this.$refs.nllzChart.setOption(data)
|
||
}).finally(() => {this.loading = false})
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
//数据概览
|
||
.sjgl-data{
|
||
text-align: center;
|
||
margin-top:20px;
|
||
.sjgl-title{
|
||
color: #666666;
|
||
line-height: 14px;
|
||
padding-top: 18px;
|
||
}
|
||
.sjgl-value{
|
||
color: rgba(51,51,51,1);
|
||
font-size: 26px;
|
||
line-height: 26px;
|
||
font-weight: 500;
|
||
margin-top: 14px;
|
||
}
|
||
}
|
||
//实时告警
|
||
.ssgj-container{
|
||
padding:20px;
|
||
height: 310px;
|
||
box-sizing: border-box;
|
||
::v-deep{
|
||
.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
|
||
background:#FFF2CB ;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|