gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-38 feat： 添加 chart type 31

Browse Source
This commit is contained in:
zhangyu
2021-06-23 15:57:34 +08:00
parent 407e1c9c9f
commit becfb5b120
23 changed files with 334 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/components/charts/PieTable.vue Normal file
View File

@@ -0,0 +1,103 @@
<template>
<el-table
v-loading="loading"
class="pie-table"
:data="tableData"
style="width: 100%;border: 1px solid #E7EAED"
:size="'mini'"
:height="'100%'">
<el-table-column type="expand" :min-width="'5%'">
<template #default="props">
<el-table
class="expand-table"
:data=" props.row.children"
style="width: 100%;"
:show-header="false"
:size="'mini'"
:height="'100%'">
<el-table-column
min-width="5%">
</el-table-column>
<el-table-column
v-for="(item, index) in tableTitles"
:key="index"
:min-width="item.width"
:label="item.label"
:prop="item.prop">
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column
v-for="(item, index) in tableTitles"
:key="index"
:min-width="item.width"
:label="item.label"
:prop="item.prop">
</el-table-column>
</el-table>
</template>
<script>
export default {
name: 'PieTable',
props: {
tableData: Array
},
watch: {
tableData: {
deep: true,
immediate: true,
handler (n) {
console.log(n)
}
}
},
data () {
return {
loading: false,
tableTitles: [
{
label: this.$t('chart.pieTable.domain'),
prop: 'domain',
width: '20%'
},
{
label: this.$t('chart.pieTable.sessions'),
prop: 'sessions',
width: '25%'
},
{
label: this.$t('chart.pieTable.packets'),
prop: 'packets',
width: '25%'
},
{
label: this.$t('chart.pieTable.bytes'),
prop: 'bytes',
width: '25%'
}
]
}
}
}
</script>
<style scoped>
/deep/ .el-table__expanded-cell[class*=cell]{
padding: 0;
}
.expand-table /deep/ .el-table__body .el-table__row:last-of-type td{
border: none;
}
.pie-table{
font-family: Roboto-Medium;
font-size: 14px;
color: #333333;
font-weight: 500;
}
.expand-table{
font-weight: 400;
color: #606266;
}
</style>