站点首页更新
This commit is contained in:
@ -1,12 +1,24 @@
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<el-row :gutter="32" style="background:#fff;">
|
||||
<el-col :xs="24" :sm="24" :lg="10">
|
||||
<el-row :gutter="15" style="background:#fff;">
|
||||
<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">
|
||||
<span class="card-title">数据概览</span>
|
||||
<span class="card-title">静态信息</span>
|
||||
</div>
|
||||
<div style="height: 310px" >
|
||||
<div style="box-sizing: border-box; height: 250px;padding:20px 15px;" >
|
||||
<el-descriptions class="single-zd-info-container" :column="1" >
|
||||
<el-descriptions-item size="mini" v-for="(item,index) in singleZdInfo" :key="index+'singleZdInfo'" :label="item.title">{{info[item.attr] | formatNumber }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<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="box-sizing: border-box; height: 250px;padding:20px 15px;" >
|
||||
<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>
|
||||
@ -16,10 +28,10 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="14">
|
||||
<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>
|
||||
<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">
|
||||
@ -43,12 +55,13 @@
|
||||
<el-table-column
|
||||
class-name="alarm-content"
|
||||
prop="alarmContent"
|
||||
show-overflow-tooltip
|
||||
label="告警内容">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="工单"
|
||||
fixed="right"
|
||||
width="250"
|
||||
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>
|
||||
@ -60,13 +73,24 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<nllz-chart ref="nllzChart"/>
|
||||
<el-row :gutter="15" style="background:#fff;">
|
||||
<el-col :xs="24" :sm="24" :lg="12">
|
||||
<week-chart ref="weekChart"/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="12">
|
||||
<active-chart ref="activeChart"/>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getSingleSiteBaseInfo} from '@/api/ems/zddt'
|
||||
import {getDzjkHomeView} from '@/api/ems/dzjk'
|
||||
import NllzChart from "./NllzChart.vue";
|
||||
// import NllzChart from "./NllzChart.vue";
|
||||
import WeekChart from "./WeekChart.vue";
|
||||
import ActiveChart from "./ActiveChart.vue";
|
||||
import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
|
||||
export default {
|
||||
name:'DzjkSbjkHome',
|
||||
@ -75,11 +99,24 @@ export default {
|
||||
return loader
|
||||
}
|
||||
},
|
||||
components: {NllzChart},
|
||||
components: {WeekChart,ActiveChart},
|
||||
mixins: [getQuerySiteId],
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
singleZdInfo:[{
|
||||
title:'电站位置',
|
||||
attr:'siteAddress'
|
||||
},{
|
||||
title:'投运时间',
|
||||
attr:'runningTime'
|
||||
},{
|
||||
title:'装机功率(MW)',
|
||||
attr:'installPower'
|
||||
},{
|
||||
title:'装机容量(MW)',
|
||||
attr:'installCapacity',
|
||||
}],
|
||||
sjglData:[{
|
||||
title:'今日充电量（MWh）',
|
||||
value:'',
|
||||
@ -98,7 +135,8 @@ export default {
|
||||
attr:'totalDischargedCap'
|
||||
}],
|
||||
// todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
|
||||
tableData:[]
|
||||
tableData:[],
|
||||
info:{}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
@ -107,14 +145,21 @@ export default {
|
||||
},
|
||||
init(){
|
||||
this.loading = true
|
||||
getSingleSiteBaseInfo(this.siteId).then(response => {
|
||||
console.log('单个站点详情数据',response)
|
||||
this.info = response?.data || {}
|
||||
})
|
||||
getDzjkHomeView(this.siteId).then(response => {
|
||||
const data = response?.data || {}
|
||||
this.sjglData.forEach(item=>{
|
||||
item.value =data[item.attr]
|
||||
})
|
||||
this.tableData = data?.siteMonitorHomeAlarmVo || []
|
||||
this.$refs.nllzChart.setOption(data)
|
||||
// this.$refs.nllzChart.setOption(data)
|
||||
this.$refs.weekChart.setOption(data)
|
||||
this.$refs.activeChart.setOption(data)
|
||||
}).finally(() => {this.loading = false})
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
@ -124,11 +169,12 @@ export default {
|
||||
//数据概览
|
||||
.sjgl-data{
|
||||
text-align: center;
|
||||
margin-top:20px;
|
||||
&:nth-child(1),&:nth-child(2){
|
||||
margin-bottom:25px;
|
||||
}
|
||||
.sjgl-title{
|
||||
color: #666666;
|
||||
line-height: 14px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.sjgl-value{
|
||||
color: rgba(51,51,51,1);
|
||||
@ -136,12 +182,13 @@ export default {
|
||||
line-height: 26px;
|
||||
font-weight: 500;
|
||||
margin-top: 14px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
//实时告警
|
||||
.ssgj-container{
|
||||
padding:20px;
|
||||
height: 310px;
|
||||
height: 250px;
|
||||
box-sizing: border-box;
|
||||
::v-deep{
|
||||
.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
|
||||
|
||||
Reference in New Issue
Block a user