119 lines
3.6 KiB
Vue
119 lines
3.6 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<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
|
|||
|
|
:data="tableData"
|
|||
|
|
height="100%"
|
|||
|
|
stripe
|
|||
|
|
style="width: 100%">
|
|||
|
|
<el-table-column
|
|||
|
|
prop="name"
|
|||
|
|
label="名称">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="status"
|
|||
|
|
label="状态"
|
|||
|
|
class-name="warning-status"
|
|||
|
|
label-class-name="table-head">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="value"
|
|||
|
|
label="告警内容">
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<nllz-chart/>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import NllzChart from "./NllzChart.vue";
|
|||
|
|
export default {
|
|||
|
|
components: {NllzChart},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// todo 没有数据时 显示-？
|
|||
|
|
sjglData:[{
|
|||
|
|
title:'今日充电量（MWh）',
|
|||
|
|
value:'1234'
|
|||
|
|
},{
|
|||
|
|
title:'今日放电量（MWh）',
|
|||
|
|
value:'1234'
|
|||
|
|
},{
|
|||
|
|
title:'总充电量（MWh）',
|
|||
|
|
value:'1234'
|
|||
|
|
},{
|
|||
|
|
title:'总放电量（MWh）',
|
|||
|
|
value:'1234'
|
|||
|
|
}],
|
|||
|
|
// todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
|
|||
|
|
tableData:[{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'}]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</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 ;
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
.warning-status{
|
|||
|
|
color:red;
|
|||
|
|
}
|
|||
|
|
.table-head{
|
|||
|
|
color:#515a6e;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|