CN-627 Dashboard - network overview - 表格组件开发:自定义metric功能
This commit is contained in:
hanyuxia
@@ -24,30 +24,32 @@
|
||||
class="tab-table"
|
||||
height="100%"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="(item, index) in customTableTitles"
|
||||
class="data-column"
|
||||
>
|
||||
<template #header>
|
||||
<span class="data-column__span">{{$t(item.label)}}</span>
|
||||
</template>
|
||||
<template #default="scope" :column="item">
|
||||
<div class="data-total" >
|
||||
{{scope.row[item.prop]}}
|
||||
<template v-if="item.prop === 'total'" >
|
||||
<div v-if="scope.row['trend'] === 'up'" class="data-total-trend data-total-trend-red">
|
||||
<i class="cn-icon-rise1 cn-icon"></i>{{scope.row['trendValue']}}
|
||||
</div>
|
||||
<div v-else-if="scope.row['trend'] === 'down'" class="data-total-trend data-total-trend-green">
|
||||
<i class="cn-icon-decline cn-icon"></i>{{scope.row['trendValue']}}
|
||||
</div>
|
||||
<div v-else class="data-total-trend data-total-trend-black">
|
||||
<i class="cn-icon-constant cn-icon"></i>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="(item,index) in customTableTitles">
|
||||
<el-table-column
|
||||
v-if="item.checked"
|
||||
class="data-column"
|
||||
>
|
||||
<template #header>
|
||||
<span class="data-column__span">{{$t(item.label)}}</span>
|
||||
</template>
|
||||
<template #default="scope" :column="item">
|
||||
<div class="data-total" >
|
||||
{{scope.row[item.prop]}}
|
||||
<template v-if="item.prop === 'total'" >
|
||||
<div v-if="scope.row['trend'] === 'up'" class="data-total-trend data-total-trend-red">
|
||||
<i class="cn-icon-rise1 cn-icon"></i>{{scope.row['trendValue']}}
|
||||
</div>
|
||||
<div v-else-if="scope.row['trend'] === 'down'" class="data-total-trend data-total-trend-green">
|
||||
<i class="cn-icon-decline cn-icon"></i>{{scope.row['trendValue']}}
|
||||
</div>
|
||||
<div v-else class="data-total-trend data-total-trend-black">
|
||||
<i class="cn-icon-constant cn-icon"></i>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
</el-tab-pane>
|
||||
@@ -59,7 +61,6 @@
|
||||
<span>{{$t('network.metric')}}:</span>
|
||||
<el-select v-model="metric"
|
||||
class="option__select select-column"
|
||||
placeholder=""
|
||||
popper-class="option-popper metric-select"
|
||||
:popper-append-to-body="false"
|
||||
size="mini">
|
||||
@@ -71,36 +72,59 @@
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<el-popover placement="left"
|
||||
:width="280"
|
||||
<el-popover placement="bottom-end"
|
||||
:width="240"
|
||||
:show-arrow="false"
|
||||
:append-to-body="false"
|
||||
:offset="-91"
|
||||
:append-to-body="true"
|
||||
:hide-after="0"
|
||||
title="Customize"
|
||||
popper-class="customize-tab__popper"
|
||||
@show="handleCustomizeButton(true)"
|
||||
@hide="handleCustomizeButton(false)"
|
||||
trigger="click">
|
||||
<template #reference>
|
||||
<div class="search-customize-tab">
|
||||
<i class="cn-icon-gear cn-icon icon-gear"></i> {{$t('network.customize')}}
|
||||
<div class="search-customize-tab " :class="showBackground?'search-customize-tab__active':''" >
|
||||
<i class="cn-icon-gear cn-icon icon-gear"></i> <span> {{$t('network.customize')}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
<transition-group name="drag" class="list" tag="ul">
|
||||
<li v-for="(item, index) in list"
|
||||
<el-tabs v-model="activeCustomize"
|
||||
@tab-click="handleCustomizeClick"
|
||||
type="card"
|
||||
>
|
||||
<el-tab-pane :label="$t('network.tabs')" name="tabs" width="50%" >
|
||||
<transition-group name="dragTabs" class="list" tag="ul" ref="tabs">
|
||||
<li v-for="(item, index) in list"
|
||||
:key="item.label"
|
||||
class="list-item"
|
||||
>
|
||||
<i class="cn-icon-sort cn-icon icon-drag"
|
||||
@dragenter="dragenter($event, index)"
|
||||
@dragover="dragover($event, index)"
|
||||
@dragstart="dragstart(index)"
|
||||
draggable="true"
|
||||
></i> <el-checkbox @change="tabChange" v-model="item.checked" :label="$t(item.label) " size="small" />
|
||||
</li>
|
||||
</transition-group>
|
||||
</div>
|
||||
@dragenter="dragenter($event, index)"
|
||||
@dragover="dragover($event, index)"
|
||||
@dragstart="dragstart(index)"
|
||||
draggable="true"
|
||||
>
|
||||
<i class="cn-icon-sort cn-icon icon-drag"
|
||||
|
||||
:key="item.label"
|
||||
></i> <el-checkbox @change="tabChange" v-model="item.checked" :label="$t(item.label) " size="small" :key="item.label"/>
|
||||
</li>
|
||||
</transition-group>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('network.metric')" name="metrics" width="50%" >
|
||||
<transition-group name="dragMetric" class="list" tag="ul" ref="metric">
|
||||
<li v-for="(item, index) in customTableTitles"
|
||||
:key="item.label"
|
||||
class="list-item"
|
||||
@dragenter="dragMetricEnter($event, index)"
|
||||
@dragover="dragMetricOver($event, index)"
|
||||
@dragstart="dragMetricStart(index)"
|
||||
draggable="true"
|
||||
>
|
||||
<i class="cn-icon-sort cn-icon icon-drag"
|
||||
:key="item.label"
|
||||
></i> <el-checkbox @change="metricChange" v-model="item.checked" :label="$t(item.label) " size="small" :key="item.label"/>
|
||||
</li>
|
||||
</transition-group>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-popover>
|
||||
</div>
|
||||
|
||||
@@ -116,7 +140,7 @@ export default {
|
||||
name: 'NetworkOverviewTabs',
|
||||
data () {
|
||||
return {
|
||||
metric: '',
|
||||
metric: 'Bits',
|
||||
options: [
|
||||
{
|
||||
value: 'Bits',
|
||||
@@ -133,7 +157,7 @@ export default {
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
ips: 'cate',
|
||||
tab: 'cate',
|
||||
total: 10,
|
||||
trend: 'up',
|
||||
trendValue: '33%',
|
||||
@@ -141,7 +165,7 @@ export default {
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
ips: 'cate',
|
||||
tab: 'cate',
|
||||
total: 10,
|
||||
trendValue: '6%',
|
||||
trend: '',
|
||||
@@ -149,7 +173,7 @@ export default {
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
ips: 'cate',
|
||||
tab: 'cate',
|
||||
total: 10,
|
||||
trend: 'up',
|
||||
trendValue: '6%',
|
||||
@@ -157,7 +181,7 @@ export default {
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
ips: 'cate',
|
||||
tab: 'cate',
|
||||
total: 10,
|
||||
trend: 'down',
|
||||
trendValue: '2%',
|
||||
@@ -165,7 +189,7 @@ export default {
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
ips: 'cate',
|
||||
tab: 'cate',
|
||||
total: 10,
|
||||
trend: 'down',
|
||||
trendValue: '2%',
|
||||
@@ -173,7 +197,7 @@ export default {
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
ips: 'cate',
|
||||
tab: 'cate',
|
||||
total: 10,
|
||||
trend: '',
|
||||
trendValue: '2%',
|
||||
@@ -181,7 +205,7 @@ export default {
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
ips: 'cate',
|
||||
tab: 'cate',
|
||||
total: 10,
|
||||
trend: 'down',
|
||||
trendValue: '2%',
|
||||
@@ -189,7 +213,7 @@ export default {
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
ips: 'cate',
|
||||
tab: 'cate',
|
||||
total: 10,
|
||||
trend: 'down',
|
||||
trendValue: '2%',
|
||||
@@ -197,7 +221,7 @@ export default {
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
ips: 'cate',
|
||||
tab: 'cate',
|
||||
total: 10,
|
||||
trend: 'down',
|
||||
trendValue: '2%',
|
||||
@@ -205,7 +229,7 @@ export default {
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
ips: 'cate',
|
||||
tab: 'cate',
|
||||
total: 10,
|
||||
trend: 'up',
|
||||
trendValue: '2%',
|
||||
@@ -213,7 +237,7 @@ export default {
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
ips: 'cate',
|
||||
tab: 'cate',
|
||||
total: 10,
|
||||
trend: 'down',
|
||||
trendValue: '2%',
|
||||
@@ -221,7 +245,7 @@ export default {
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
ips: 'cate',
|
||||
tab: 'cate',
|
||||
total: 10,
|
||||
trend: 'down',
|
||||
trendValue: '2%',
|
||||
@@ -229,7 +253,7 @@ export default {
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
ips: 'cate',
|
||||
tab: 'cate',
|
||||
total: 10,
|
||||
trend: 'down',
|
||||
trendValue: '2%',
|
||||
@@ -237,7 +261,7 @@ export default {
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
ips: 'cate',
|
||||
tab: 'cate',
|
||||
total: 10,
|
||||
trend: 'down',
|
||||
trendValue: '2%',
|
||||
@@ -246,65 +270,81 @@ export default {
|
||||
}
|
||||
],
|
||||
customTableTitles: [
|
||||
{ label: 'network.ips', prop: 'ips' },
|
||||
{ label: 'network.total', prop: 'total' },
|
||||
{ label: 'network.inbound', prop: 'inbound' },
|
||||
{ label: 'network.outbound', prop: 'outbound' }
|
||||
{ label: 'network.ips', prop: 'tab', checked: true, tabColumn: true },
|
||||
{ label: 'network.total', prop: 'total', checked: true, tabColumn: false },
|
||||
{ label: 'network.inbound', prop: 'inbound', checked: true, tabColumn: false },
|
||||
{ label: 'network.outbound', prop: 'outbound', checked: true, tabColumn: false }
|
||||
],
|
||||
list: [
|
||||
{
|
||||
label: 'network.ips',
|
||||
prop: 'tab',
|
||||
checked: true
|
||||
}, {
|
||||
label: 'network.countries',
|
||||
prop: 'tab',
|
||||
checked: true
|
||||
}, {
|
||||
label: 'network.asns',
|
||||
prop: 'tab',
|
||||
checked: true
|
||||
}, {
|
||||
label: 'network.applications',
|
||||
prop: 'tab',
|
||||
checked: true
|
||||
}, {
|
||||
label: 'network.providers',
|
||||
prop: 'tab',
|
||||
checked: true
|
||||
}, {
|
||||
label: 'network.domains',
|
||||
prop: 'tab',
|
||||
checked: true
|
||||
}, {
|
||||
label: 'network.protocols',
|
||||
prop: 'tab',
|
||||
checked: true
|
||||
}, {
|
||||
label: 'network.idcTenants',
|
||||
prop: 'tab',
|
||||
checked: true
|
||||
}, {
|
||||
label: 'network.provinces',
|
||||
prop: 'tab',
|
||||
checked: false
|
||||
}, {
|
||||
label: 'network.cities',
|
||||
prop: 'tab',
|
||||
checked: false
|
||||
}, {
|
||||
label: 'network.isps',
|
||||
prop: 'tab',
|
||||
checked: false
|
||||
}, {
|
||||
label: 'network.applicationCategories',
|
||||
prop: 'tab',
|
||||
checked: false
|
||||
}, {
|
||||
label: 'network.domainCategories',
|
||||
prop: 'tab',
|
||||
checked: false
|
||||
}, {
|
||||
label: 'network.hosts',
|
||||
prop: 'tab',
|
||||
checked: false
|
||||
}, {
|
||||
label: 'network.snis',
|
||||
prop: 'tab',
|
||||
checked: false
|
||||
}, {
|
||||
label: 'network.protocolPorts',
|
||||
prop: 'tab',
|
||||
checked: false
|
||||
}
|
||||
],
|
||||
dragIndex: '',
|
||||
enterIndex: '',
|
||||
endIndex: ''
|
||||
dragMetricIndex: '',
|
||||
showBackground: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@@ -314,13 +354,29 @@ export default {
|
||||
shuffle () {
|
||||
this.list = _.shuffle(this.list)
|
||||
},
|
||||
handleCustomizeButton (status) {
|
||||
console.log(this.showBackground)
|
||||
this.showBackground = status
|
||||
},
|
||||
tabChange () {
|
||||
const tabList = this.list.filter(item => item.checked == true)
|
||||
if (tabList && tabList.length > 0) {
|
||||
this.activeTab = tabList[0].label
|
||||
this.customTableTitles[0].label = this.$t(tabList[0].label)
|
||||
this.customTableTitles.forEach(item => {
|
||||
if (item.tabColumn) {
|
||||
item.label = tabList[0].label
|
||||
item.prop = tabList[0].prop
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
metricChange () {
|
||||
// const metricList = this.customTableTitles.filter(item => item.checked == true)
|
||||
// if (metricList && metricList.length > 0) {
|
||||
// this.activeCustomize = metricList[0].label
|
||||
// this.customTableTitles[0].label = this.$t(metricList[0].label)
|
||||
// }
|
||||
},
|
||||
dragstart (index) {
|
||||
this.dragIndex = index
|
||||
},
|
||||
@@ -336,10 +392,34 @@ export default {
|
||||
dragover (e, index) {
|
||||
e.preventDefault()
|
||||
},
|
||||
dragMetricStart (index) {
|
||||
this.dragMetricIndex = index
|
||||
},
|
||||
dragMetricEnter (e, index) {
|
||||
e.preventDefault()
|
||||
if (this.dragMetricIndex !== index) {
|
||||
const moving = this.customTableTitles[this.dragMetricIndex]
|
||||
this.customTableTitles.splice(this.dragMetricIndex, 1)
|
||||
this.customTableTitles.splice(index, 0, moving)
|
||||
this.dragMetricIndex = index
|
||||
}
|
||||
},
|
||||
dragMetricOver (e, index) {
|
||||
e.preventDefault()
|
||||
},
|
||||
handleClick (tab) {
|
||||
this.customTableTitles[0].label = tab.paneName
|
||||
this.customTableTitles.forEach(item => {
|
||||
if (item.tabColumn) {
|
||||
item.label = tab.paneName
|
||||
}
|
||||
})
|
||||
// this.customTableTitles[0].label = tab.paneName
|
||||
// this.activeTab = tab.paneName
|
||||
},
|
||||
handleCustomizeClick (tab) {
|
||||
// this.customTableTitles[0].label = tab.paneName
|
||||
this.activeCustomize = tab.paneName
|
||||
},
|
||||
tableCellStyle ({ row, column, rowIndex, columnIndex }) {
|
||||
let style = 'border-right:0px;font-size:12px;padding:7px 0 !important;border-bottom: 1px solid #ECECEC;'
|
||||
if (rowIndex === this.tableData.length - 1) {
|
||||
@@ -364,9 +444,11 @@ export default {
|
||||
}
|
||||
// const dataList = [...props.chartInfo.children]
|
||||
}
|
||||
const activeCustomize = ref('tabs')
|
||||
|
||||
return {
|
||||
activeTab,
|
||||
activeCustomize,
|
||||
networkOverviewTabs
|
||||
// dataList
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user