feat:overview 填充table组件
This commit is contained in:
wangwenrui
@@ -185,7 +185,7 @@ const en = {
|
||||
asset:{
|
||||
title:'Asset',
|
||||
assetType:'Asset Type',
|
||||
num:'Nun',
|
||||
num:'Num',
|
||||
alert:'Alert',
|
||||
alertLow:'Low',
|
||||
alertMedium:'Medium',
|
||||
@@ -194,7 +194,24 @@ const en = {
|
||||
outStock:'Out Stock',
|
||||
pingUp:'Up',
|
||||
pingDown:'Down',
|
||||
|
||||
host:'Host'
|
||||
},
|
||||
project:{
|
||||
project:'Project',
|
||||
name:'Name',
|
||||
module:'Module',
|
||||
endpoint:'Endpoint',
|
||||
},
|
||||
dataCenter:{
|
||||
dataCenter:'DataCenter',
|
||||
cabinet:'Cabinet',
|
||||
promServer:'Prom Server',
|
||||
},
|
||||
alert:{
|
||||
level:'Level',
|
||||
alertRule:'Alert Rule',
|
||||
ruleNum:'Rule Num',
|
||||
alertNum:'Alert Num'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -55,7 +55,6 @@
|
||||
height: calc(100% - 45px);
|
||||
width: 100%;
|
||||
}
|
||||
/*100份*/
|
||||
.overview-content .content-row-box{
|
||||
width: 99%;
|
||||
display: flex;
|
||||
@@ -68,6 +67,12 @@
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flex-container{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.box-height-200{
|
||||
height: 200px;
|
||||
}
|
||||
@@ -86,4 +91,19 @@
|
||||
.box-height-500{
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.mini-button{
|
||||
display: inline-block;
|
||||
//visibility: hidden;
|
||||
}
|
||||
.mini-button .mini-button-icon{
|
||||
visibility: hidden;
|
||||
}
|
||||
.mini-button:hover .mini-button-icon{
|
||||
visibility: visible;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mini-font{
|
||||
font-size: 12px;
|
||||
-webkit-transform:scale(0.7);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -31,18 +31,44 @@
|
||||
<el-scrollbar style="height: 100%" ref="overviewScrollbar">
|
||||
<div class="content-row-box" >
|
||||
<div class="content-col-box box-height-200 " style="flex:3;">
|
||||
<table-box :pop-data="assetStatData" ref="assetTab"></table-box>
|
||||
<table-box :pop-data="assetStatData" ref="assetTab">
|
||||
<div :slot="this.$t('dashboard.overview.asset.assetType')+'-header'" class="mini-button" @click="showTypeFilter" >
|
||||
<span class="mini-button-icon"><i class="nz-icon mini-font nz-icon-arrow-down" ></i></span>
|
||||
<div v-show="this.typeFilter.show">
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</table-box>
|
||||
</div>
|
||||
<div class="content-col-box box-height-200 " style="flex: 2">
|
||||
<table-box :pop-data="projectStatData" ref="projectTab"></table-box>
|
||||
</div>
|
||||
<div class="content-col-box box-height-200 " style="flex:1;">
|
||||
<table-box :pop-data="endpointStatData" ref="endpointTab"></table-box>
|
||||
</div>
|
||||
<div class="content-col-box box-height-200 " style="flex: 2"></div>
|
||||
<div class="content-col-box box-height-200 " style="flex:1;"></div>
|
||||
</div>
|
||||
<div class="content-row-box">
|
||||
<div class="content-col-box box-height-250 " style="flex: 1;"></div>
|
||||
<div class="content-col-box box-height-250 " style="flex: 1;">
|
||||
<div class="flex-container">
|
||||
<div style="flex: 2;">
|
||||
<table-box :pop-data="dataCenterStatData" ref="dataCenterTab"></table-box>
|
||||
</div>
|
||||
<div style="flex: 3;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-row-box">
|
||||
<div class="content-col-box box-height-300 "style="flex: 3"></div>
|
||||
<div class="content-col-box box-height-300 "style="flex: 5;"></div>
|
||||
<div class="content-col-box box-height-300 "style="flex: 2"></div>
|
||||
<div class="content-col-box box-height-300 "style="flex: 3">
|
||||
<table-box :pop-data="topNStatData" ref="topNTab"></table-box>
|
||||
</div>
|
||||
<div class="content-col-box box-height-300 "style="flex: 8;"></div>
|
||||
<div class="content-col-box box-height-300 "style="flex: 2;">
|
||||
<table-box :pop-data="alertRuleStatData" ref="alertRuleTab" ></table-box>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
@@ -62,6 +88,15 @@
|
||||
data(){
|
||||
return {
|
||||
assetStatData:{},
|
||||
typeFilter:{
|
||||
show:false,
|
||||
type:'typeStat'
|
||||
},
|
||||
projectStatData:{},
|
||||
endpointStatData:{},
|
||||
dataCenterStatData:{},
|
||||
topNStatData:{},
|
||||
alertRuleStatData:{},
|
||||
sysTime:'',
|
||||
sysDate:'',
|
||||
sysWeek:'',
|
||||
@@ -71,14 +106,24 @@
|
||||
},
|
||||
methods:{
|
||||
/*加载数据 start*/
|
||||
initData:function(){
|
||||
this.queryAssetData();
|
||||
this.queryProjectData();
|
||||
this.queryEndpointData();
|
||||
this.queryDataCenterData();
|
||||
this.queryAlertTopNData();
|
||||
this.queryAlertRuleStatData();
|
||||
},
|
||||
queryAssetData:function(){
|
||||
// this.$refs.assetTab.startLoading();
|
||||
this.$refs.assetTab.startLoading();
|
||||
axios.get('/overview/assetStat').then((res)=>{
|
||||
let response=res.data;
|
||||
if(response.msg == 'success'){
|
||||
let showData=response.data.typeStat;
|
||||
this.assetStatData=this.formatAssetData(showData,response.data.totalStat);
|
||||
// this.$refs.assetTab.endLoading();
|
||||
this.$refs.assetTab.endLoading();
|
||||
}else{
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -87,11 +132,14 @@
|
||||
let assetStatData={
|
||||
screen:{ //左侧概览信息
|
||||
show:true,
|
||||
direction:'row',
|
||||
total:{ //左侧上方大图标及total信息
|
||||
show:true,
|
||||
direction:'row',
|
||||
num:totalData.total,
|
||||
title:this.$t('dashboard.overview.asset.title'),
|
||||
showPopover:true,
|
||||
icon:'nz-icon nz-icon-asset',
|
||||
popover:[
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.inStock'),
|
||||
@@ -179,12 +227,448 @@
|
||||
}
|
||||
return assetStatData;
|
||||
}else{
|
||||
return {};
|
||||
console.error('the param is invalid');
|
||||
return {};
|
||||
}
|
||||
|
||||
},
|
||||
queryProjectData:function(){
|
||||
this.$refs.projectTab.startLoading();
|
||||
this.$get('/overview/projectStat').then(response=>{
|
||||
if(response.msg == 'success'){
|
||||
let showData=response.data;
|
||||
this.projectStatData=this.formatProjectData(showData);
|
||||
this.$refs.projectTab.endLoading();
|
||||
}else{
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
formatProjectData:function(data){
|
||||
if(data){
|
||||
return {
|
||||
screen:{ //左侧概览信息
|
||||
show:true,
|
||||
direction:'row',
|
||||
total:{ //左侧上方大图标及total信息
|
||||
show:true,
|
||||
direction:'row',
|
||||
num:data.total,
|
||||
title:this.$t('dashboard.overview.project.project'),
|
||||
showPopover:false,
|
||||
icon:'nz-icon nz-icon-project',
|
||||
popover:[]
|
||||
},
|
||||
stat:{//左侧下方 小图标，
|
||||
show:false,
|
||||
up:0,
|
||||
down:0
|
||||
}
|
||||
},
|
||||
table:{//右侧table
|
||||
show:true,
|
||||
tableData:data.projectStat,
|
||||
tableLabel:[
|
||||
{
|
||||
label:this.$t('dashboard.overview.project.name'),
|
||||
prop:'name',
|
||||
show:true,
|
||||
showPopover:true,
|
||||
popover:[
|
||||
{
|
||||
label:this.$t('dashboard.overview.project.module'),
|
||||
prop:'moduleNum'
|
||||
},
|
||||
{
|
||||
label:this.$t('dashboard.overview.project.endpoint'),
|
||||
prop:'endpointNum'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.alert'),
|
||||
prop:'alertNum',
|
||||
show:true,
|
||||
showPopover: false
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}else{
|
||||
console.error('the param is invalid');
|
||||
return {}
|
||||
}
|
||||
},
|
||||
queryEndpointData:function(){
|
||||
this.$refs.endpointTab.startLoading();
|
||||
this.$get('/overview/endpointStat').then(response=>{
|
||||
if(response.msg == 'success'){
|
||||
let showData=response.data;
|
||||
this.endpointStatData=this.formatEndpointData(showData);
|
||||
this.$refs.endpointTab.endLoading();
|
||||
}else{
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
formatEndpointData:function(data){
|
||||
if(data){
|
||||
return {
|
||||
screen:{ //左侧概览信息
|
||||
show:true,
|
||||
direction:'row',
|
||||
total:{ //左侧上方大图标及total信息
|
||||
show:true,
|
||||
direction:'row',
|
||||
num:data.total,
|
||||
title:this.$t('dashboard.overview.project.endpoint'),
|
||||
showPopover:false,
|
||||
icon:'nz-icon nz-icon-project',
|
||||
popover:[]
|
||||
},
|
||||
stat:{//左侧下方 小图标，
|
||||
show:true,
|
||||
up:data.up,
|
||||
down:data.down
|
||||
}
|
||||
},
|
||||
table:{//右侧table
|
||||
show:false,
|
||||
tableData:[],
|
||||
tableLabel:[]
|
||||
}
|
||||
}
|
||||
}else{
|
||||
console.error('the param is invalid');
|
||||
return {}
|
||||
}
|
||||
},
|
||||
queryDataCenterData:function(){
|
||||
this.$refs.dataCenterTab.startLoading();
|
||||
this.$get('/overview/datacenterStat').then(response=>{
|
||||
if(response.msg == 'success') {
|
||||
let showData = response.data;
|
||||
this.dataCenterStatData = this.formatDataCenterData(showData);
|
||||
this.$refs.dataCenterTab.endLoading();
|
||||
}else{
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
formatDataCenterData:function(data){
|
||||
if(data){
|
||||
return {
|
||||
screen:{ //左侧概览信息
|
||||
show:true,
|
||||
direction:'row',
|
||||
total:{ //左侧上方大图标及total信息
|
||||
show:true,
|
||||
direction:'column',
|
||||
num:data.dcTotal,
|
||||
title:this.$t('dashboard.overview.dataCenter.dataCenter'),
|
||||
showPopover:true,
|
||||
icon:'nz-icon nz-icon-page',
|
||||
popover:[
|
||||
{
|
||||
label:this.$t('dashboard.overview.dataCenter.cabinet'),
|
||||
value:data.cabinetTotal
|
||||
}
|
||||
]
|
||||
},
|
||||
stat:{//左侧下方 小图标，
|
||||
show:false,
|
||||
up:0,
|
||||
down:0
|
||||
}
|
||||
},
|
||||
table:{//右侧table
|
||||
show:true,
|
||||
tableData:data.dcStat,
|
||||
tableLabel:[
|
||||
{
|
||||
label:this.$t('dashboard.overview.project.name'),
|
||||
prop:'name',
|
||||
show:true,
|
||||
showPopover:true,
|
||||
popover:[
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.pingUp'),
|
||||
prop:'endpointUp'
|
||||
},
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.pingDown'),
|
||||
prop:'endpointDown'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label:this.$t('dashboard.overview.dataCenter.promServer'),
|
||||
prop:'promTotal',
|
||||
show:true,
|
||||
showPopover: true,
|
||||
popover: [
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.pingUp'),
|
||||
prop:'promUp'
|
||||
},
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.pingDown'),
|
||||
prop:'promDown'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.title'),
|
||||
prop:'assetTotal',
|
||||
show:true,
|
||||
showPopover: true,
|
||||
popover: [
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.inStock'),
|
||||
prop:'assetInStock'
|
||||
},
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.outStock'),
|
||||
prop:'assetOutStock'
|
||||
},
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.pingUp'),
|
||||
prop:'assetPingUp'
|
||||
},
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.pingDown'),
|
||||
prop:'assetPingDown'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.alert'),
|
||||
prop:'alertTotal',
|
||||
show:true,
|
||||
showPopover: true,
|
||||
popover: [
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.alertLow'),
|
||||
prop:'alertLow'
|
||||
},
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.alertMedium'),
|
||||
prop:'alertMedium'
|
||||
},
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.alertHigh'),
|
||||
prop:'alertHigh'
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}else{
|
||||
console.error('the param is invalid');
|
||||
return {}
|
||||
}
|
||||
},
|
||||
queryAlertTopNData:function(){
|
||||
this.$refs.topNTab.startLoading();
|
||||
this.$get('/overview/alertStatByRule?top=10').then(response=>{
|
||||
if(response.msg == 'success') {
|
||||
let showData = response.data.list;
|
||||
this.topNStatData = this.formatAlertTopNData(showData);
|
||||
this.$refs.topNTab.endLoading();
|
||||
}else{
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
formatAlertTopNData:function(data){
|
||||
if(data){
|
||||
return {
|
||||
screen:{ //左侧概览信息
|
||||
show:false,
|
||||
direction:'row',
|
||||
total:{ //左侧上方大图标及total信息
|
||||
show:true,
|
||||
direction:'row',
|
||||
num:0,
|
||||
title:'',
|
||||
showPopover:false,
|
||||
icon:'',
|
||||
popover:[]
|
||||
},
|
||||
stat:{//左侧下方 小图标，
|
||||
show:false,
|
||||
up:0,
|
||||
down:0
|
||||
}
|
||||
},
|
||||
table:{//右侧table
|
||||
show:true,
|
||||
tableData:data,
|
||||
tableLabel:[
|
||||
{
|
||||
label:this.$t('dashboard.overview.project.name'),
|
||||
prop:'alertName',
|
||||
show:true,
|
||||
showPopover:false,
|
||||
popover:[]
|
||||
},
|
||||
{
|
||||
label:this.$t('dashboard.overview.alert.level'),
|
||||
prop:'level',
|
||||
show:true,
|
||||
showPopover:false,
|
||||
popover:[]
|
||||
},
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.num'),
|
||||
prop:'nums',
|
||||
show:true,
|
||||
showPopover:false,
|
||||
popover:[]
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}else{
|
||||
console.error('the param is invalid');
|
||||
return {}
|
||||
}
|
||||
},
|
||||
queryAssetTopNData:function(){
|
||||
this.$refs.topNTab.startLoading();
|
||||
this.$get('/overview/alertStatByAsset?top=10').then(response=>{
|
||||
if(response.msg == 'success') {
|
||||
let showData=response.data.list;
|
||||
this.topNStatData=this.formatAssetTopNData(showData);
|
||||
this.$refs.topNTab.endLoading();
|
||||
}else{
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
formatAssetTopNData:function(data){
|
||||
if(data){
|
||||
return {
|
||||
screen:{ //左侧概览信息
|
||||
show:false,
|
||||
direction:'row',
|
||||
total:{ //左侧上方大图标及total信息
|
||||
show:true,
|
||||
direction:'row',
|
||||
num:0,
|
||||
title:'',
|
||||
showPopover:false,
|
||||
icon:'',
|
||||
popover:[]
|
||||
},
|
||||
stat:{//左侧下方 小图标，
|
||||
show:false,
|
||||
up:0,
|
||||
down:0
|
||||
}
|
||||
},
|
||||
table:{//右侧table
|
||||
show:true,
|
||||
tableData:data,
|
||||
tableLabel:[
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.host'),
|
||||
prop:'host',
|
||||
show:true,
|
||||
showPopover:false,
|
||||
popover:[]
|
||||
},
|
||||
|
||||
{
|
||||
label:this.$t('dashboard.overview.asset.num'),
|
||||
prop:'nums',
|
||||
show:true,
|
||||
showPopover:false,
|
||||
popover:[]
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}else{
|
||||
console.error('the param is invalid');
|
||||
return {}
|
||||
}
|
||||
},
|
||||
queryAlertRuleStatData:function(){
|
||||
this.$refs.alertRuleTab.startLoading();
|
||||
this.$get('/overview/alertRuleStat').then(response=>{
|
||||
if(response.msg == 'success') {
|
||||
let showData=response.data;
|
||||
this.alertRuleStatData=this.formatAlertRuleData(showData);
|
||||
this.$refs.alertRuleTab.endLoading();
|
||||
}else{
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
formatAlertRuleData:function(data){
|
||||
if(data){
|
||||
return {
|
||||
screen:{ //左侧概览信息
|
||||
show:true,
|
||||
direction:'column',
|
||||
total:{ //左侧上方大图标及total信息
|
||||
show:true,
|
||||
direction:'row',
|
||||
num:data.alertRuleTotal,
|
||||
title:this.$t('dashboard.overview.alert.alertRule'),
|
||||
showPopover:false,
|
||||
icon:'nz-icon nz-icon-page',
|
||||
popover:[]
|
||||
},
|
||||
stat:{//左侧下方 小图标，
|
||||
show:false,
|
||||
up:0,
|
||||
down:0
|
||||
}
|
||||
},
|
||||
table:{//右侧table
|
||||
show:true,
|
||||
tableData:data.alertRule,
|
||||
tableLabel:[
|
||||
{
|
||||
label:this.$t('dashboard.overview.alert.level'),
|
||||
prop:'level',
|
||||
show:true,
|
||||
showPopover:false,
|
||||
popover:[]
|
||||
},
|
||||
{
|
||||
label:this.$t('dashboard.overview.alert.ruleNum'),
|
||||
prop:'ruleNum',
|
||||
show:true,
|
||||
showPopover:false,
|
||||
popover:[]
|
||||
},
|
||||
{
|
||||
label:this.$t('dashboard.overview.alert.alertNum'),
|
||||
prop:'alertNum',
|
||||
show:true,
|
||||
showPopover:false,
|
||||
popover:[]
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}else{
|
||||
console.error('the param is invalid');
|
||||
return {}
|
||||
}
|
||||
},
|
||||
/*加载数据 end*/
|
||||
showTypeFilter:function(){
|
||||
this.typeFilter.show=true;
|
||||
console.log(this.typeFilter.show)
|
||||
},
|
||||
closeTypeFilter:function(){
|
||||
// this.typeFilter.show=false;
|
||||
},
|
||||
/*header 时间处理 start*/
|
||||
initDate:function(){
|
||||
this.sysTime=this.getTime();
|
||||
@@ -245,7 +729,7 @@
|
||||
},
|
||||
mounted() {
|
||||
this.initDate();
|
||||
this.queryAssetData();
|
||||
this.initData();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -2,6 +2,10 @@
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.table-column-box{
|
||||
flex-direction: column;
|
||||
}
|
||||
.table-box .table-box-left{
|
||||
flex: 1;
|
||||
@@ -26,6 +30,14 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.table-screen .screen-column{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
}
|
||||
.screen-row .screen-col{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
@@ -63,4 +75,8 @@ popover-container{
|
||||
.overview-table {
|
||||
background-color: #FCFCFC !important;
|
||||
}
|
||||
.fill-flex-cavity:after{
|
||||
flex:1;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<div class="table-box">
|
||||
<div class="table-box" :class="{'table-column-box':showData&&showData.screen&&showData.screen.direction=='column'}">
|
||||
<loading ref="loading"></loading>
|
||||
<div class="table-box-left">
|
||||
<div class="table-screen" v-show="showData.screen.show">
|
||||
<template v-if="showData&&showData.screen">
|
||||
<div class="table-box-left" v-show="showData.screen.show">
|
||||
<div class="table-screen" :class="{'fill-flex-cavity':!showData.screen.stat.show&&showData.screen.total.direction != 'column'}">
|
||||
<div class="screen-top" v-show="showData.screen.total.show" >
|
||||
<div class="screen-row">
|
||||
<div class="screen-col"><i class="nz-icon nz-icon-asset super-icon"></i></div>
|
||||
<div :class="{'screen-row':showData.screen.total.direction == 'row','screen-column':showData.screen.total.direction == 'column'}">
|
||||
<div class="screen-col"><i class="super-icon" :class="showData.screen.total.icon"></i></div>
|
||||
<div class="screen-col">
|
||||
<div>{{showData.screen.total.title}}</div>
|
||||
<template v-if="showData.screen.total.showPopover">
|
||||
@@ -35,6 +36,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="showData&&showData.table">
|
||||
<div class="table-box-right overview-table" v-show="showData.table.show">
|
||||
<el-table
|
||||
class="overview-table"
|
||||
@@ -49,8 +52,11 @@
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
show-overflow-tooltip
|
||||
min-width="110px"
|
||||
min-width="90"
|
||||
>
|
||||
<template slot="header" slot-scope="scope">
|
||||
{{item.label}}<slot :name="item.label+'-header'"></slot>
|
||||
</template>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template v-if="item.showPopover">
|
||||
<el-popover trigger="hover" placement="right" >
|
||||
@@ -73,6 +79,8 @@
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -92,7 +100,10 @@
|
||||
total:{ //左侧上方大图标及total信息
|
||||
show:true,
|
||||
num:0,
|
||||
title:''
|
||||
title:'',
|
||||
showPopover:true,
|
||||
icon:'0',
|
||||
popover:[]
|
||||
},
|
||||
stat:{//左侧下方 小图标，
|
||||
show:true,
|
||||
|
||||
Reference in New Issue
Block a user