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

CN-627 Dashboard - network overview - 表格组件开发:自定义metric功能

Browse Source
This commit is contained in:
hanyuxia
2022-07-22 18:22:00 +08:00
parent f3ad367516
commit cbf472f0ef
2 changed files with 243 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/assets/css/components/views/charts2/networkOverviewTabs.scss
View File

@@ -95,7 +95,7 @@
right:0px; right:0px;
.search-select { .search-select {
color:#575757; color:#575757;
margin-right:20px; margin-right:10px;
span { span {
margin-right:3px; margin-right:3px;
} }
@@ -121,14 +121,21 @@
} }
.search-customize-tab { .search-customize-tab {
color:$blue; color:$blue;
height:24px;
padding:2px 11px;
.icon-gear{ .icon-gear{
color:#2C72C6; color:#2C72C6;
width:12px; width:12px;
height:12px; height:12px;
margin-right:2px;
font-size: 12px;
} }
} }
.search-customize-tab:hover { .search-customize-tab:hover,.search-customize-tab__active {
cursor:pointer; cursor:pointer;
background: rgba(56,172,210,0.10);
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 2px;
} }
.grid-content{ .grid-content{
min-height: 36px; min-height: 36px;
@@ -136,19 +143,80 @@
} }
} }
.customize-tab__popper{ .customize-tab__popper{
height:560px;/*calc(100% - 136px);*/ max-height:405px;/*calc(100% - 136px);*/
overflow:auto; overflow:hidden;
padding: 0px !important;
background: #FFFFFF;
/*border: 1px solid #C5C5C5;*/
border:1px solid #C5C5C5 !important;
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
border-radius: 2px !important;
.el-popper {
max-height: 405px;
}
.el-tabs__header{
font-size: 12px;
color:green !important;
font-weight: 500;
margin: 0px ;
border-bottom: 1px solid #E2E5EC;
}
.el-tabs__content {
max-height: 358px !important;
margin:8px 0 6px 0;
}
.el-tabs__nav{
width:100%;
}
.el-tabs__nav-wrap {
margin-bottom: 0px !important;
}
.el-tabs__item{
width:50%;
text-align:center;
padding:0px;
height:30px;
line-height: 30px;
font-size: 12px;
color: #353636;
font-weight: 500;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
border-top: 3px solid #38ACD2;
}
.el-tabs--card > .el-tabs__header .el-tabs__item:first-child{
border-radius: 2.5px 0 0 0;
}
.el-tabs--card > .el-tabs__header .el-tabs__item:last-child{
border-radius: 0 2.5px 0 0 ;
border-left: 1px #E2E5EC solid !important;
}
.el-tabs--card > .el-tabs__header .el-tabs__item{
border-bottom: 0px ;
border-top: 3px solid white;
}
.el-tabs--card > .el-tabs__header .el-tabs__nav {
border:0px ;
}
.list { .list {
list-style: none; list-style: none;
padding-inline-start: 0px !important; padding-inline-start: 0px !important;
/*height:375px;*/
max-height: 358px !important;
overflow:auto;
margin:0 0;
.drag-move { .drag-move {
transition: transform 0.3s; transition: transform 0.3s;
} }
.list-item:last-child {
margin-bottom: 6px;
}
.list-item { .list-item {
width:100%; width:100%;
color: #575757; color: #575757;
margin-bottom: 6px; margin-bottom: 0px;
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
text-align: left; text-align: left;
@@ -158,6 +226,25 @@
.icon-drag{ .icon-drag{
cursor: move; cursor: move;
margin-left:6px;
margin-right:3px;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #38ACD2;
border-color: #38ACD2;
border-radius: 2px;
}
.el-checkbox__input .el-checkbox__inner {
background-color: #F2F7F9;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 2px;
}
.el-checkbox__input.is-checked + .el-checkbox__label,.el-checkbox__input + .el-checkbox__label {
font-family: Helvetica;
font-size: 12px;
color: #575757;
font-weight: 400;
} }
} }
} }
@@ -170,4 +257,4 @@
.el-popper__arrow { .el-popper__arrow {
display: none; display: none;
} }
} }

218
src/views/charts2/charts/NetworkOverviewTabs.vue
View File

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