gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:overview 填充table组件

Browse Source
This commit is contained in:
wangwenrui
2020-03-19 19:21:12 +08:00
parent 5fe1124dbc
commit f07fa1f030
5 changed files with 625 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
nezha-fronted/src/components/page/dashboard/overview/tableBox.vue
View File

@@ -1,78 +1,86 @@
<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">
<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-col">
<div>{{showData.screen.total.title}}</div>
<template v-if="showData.screen.total.showPopover">
<el-popover trigger="hover" placement="top">
<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':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">
<el-popover trigger="hover" placement="top">
<div class="popover-container">
<div v-for="(pop,index) in showData.screen.total.popover">
<span>{{pop.label}}:</span>&nbsp;
<span>{{pop.value}}</span>
</div>
</div>
<template slot="reference">
<div class="super-font">{{showData.screen.total.num}}</div>
</template>
</el-popover>
</template>
<template v-else>
<div class="super-font">{{showData.screen.total.num}}</div>
</template>
</div>
</div>
</div>
<div class="screen-bottom" v-show="showData.screen.stat.show">
<div class="screen-row">
<div class="screen-col avg-children-space"><i class="nz-icon nz-icon-arrow-up middle-icon green-icon"></i><span class="middle-font">{{showData.screen.stat.up}}</span></div>
<div class="screen-col avg-children-space"><i class="nz-icon nz-icon-arrow-down middle-icon red-icon"></i><span class="middle-font">{{showData.screen.stat.down}}</span></div>
</div>
</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"
:data="showData.table.tableData"
v-scrollBar:el-table
height="100%"
>
<el-table-column
:resizable="false"
v-for="(item, index) in showData.table.tableLabel"
v-if="item.show"
:key="`col-${index}`"
:label="item.label"
show-overflow-tooltip
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" >
<div class="popover-container">
<div v-for="(pop,index) in showData.screen.total.popover">
<div v-for="(pop,index) in item.popover">
<span>{{pop.label}}:</span>&nbsp;
<span>{{pop.value}}</span>
<span>{{scope.row[pop.prop]}}</span>
</div>
</div>
<template slot="reference">
<div class="super-font">{{showData.screen.total.num}}</div>
<span>{{scope.row[item.prop]}}</span>
</template>
</el-popover>
</template>
<template v-else>
<div class="super-font">{{showData.screen.total.num}}</div>
{{scope.row[item.prop]}}
</template>
</div>
</div>
</div>
<div class="screen-bottom" v-show="showData.screen.stat.show">
<div class="screen-row">
<div class="screen-col avg-children-space"><i class="nz-icon nz-icon-arrow-up middle-icon green-icon"></i><span class="middle-font">{{showData.screen.stat.up}}</span></div>
<div class="screen-col avg-children-space"><i class="nz-icon nz-icon-arrow-down middle-icon red-icon"></i><span class="middle-font">{{showData.screen.stat.down}}</span></div>
</div>
</div>
</div>
</div>
<div class="table-box-right overview-table" v-show="showData.table.show">
<el-table
class="overview-table"
:data="showData.table.tableData"
v-scrollBar:el-table
height="100%"
>
<el-table-column
:resizable="false"
v-for="(item, index) in showData.table.tableLabel"
v-if="item.show"
:key="`col-${index}`"
:label="item.label"
show-overflow-tooltip
min-width="110px"
>
<template slot-scope="scope" :column="item">
<template v-if="item.showPopover">
<el-popover trigger="hover" placement="right" >
<div class="popover-container">
<div v-for="(pop,index) in item.popover">
<span>{{pop.label}}:</span>&nbsp;
<span>{{scope.row[pop.prop]}}</span>
</div>
</div>
<template slot="reference">
<span>{{scope.row[item.prop]}}</span>
</template>
</el-popover>
</template>
<template v-else>
{{scope.row[item.prop]}}
</template>
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
</el-table>
</div>
</div>
</template>
@@ -92,7 +100,10 @@
total:{ //左侧上方大图标及total信息
show:true,
num:0,
title:''
title:'',
showPopover:true,
icon:'0',
popover:[]
},
stat:{//左侧下方 小图标，
show:true,