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

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

@@ -95,7 +95,7 @@
right:0px;
.search-select {
color:#575757;
margin-right:20px;
margin-right:10px;
span {
margin-right:3px;
}
@@ -121,14 +121,21 @@
}
.search-customize-tab {
color:$blue;
height:24px;
padding:2px 11px;
.icon-gear{
color:#2C72C6;
width:12px;
height:12px;
margin-right:2px;
font-size: 12px;
}
}
.search-customize-tab:hover {
.search-customize-tab:hover,.search-customize-tab__active {
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{
min-height: 36px;
@@ -136,19 +143,80 @@
}
}
.customize-tab__popper{
height:560px;/*calc(100% - 136px);*/
overflow:auto;
max-height:405px;/*calc(100% - 136px);*/
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-style: none;
padding-inline-start: 0px !important;
/*height:375px;*/
max-height: 358px !important;
overflow:auto;
margin:0 0;
.drag-move {
transition: transform 0.3s;
}
.list-item:last-child {
margin-bottom: 6px;
}
.list-item {
width:100%;
color: #575757;
margin-bottom: 6px;
margin-bottom: 0px;
height: 24px;
line-height: 24px;
text-align: left;
@@ -158,6 +226,25 @@
.icon-drag{
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;
}
}
}

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

@@ -24,8 +24,9 @@
class="tab-table"
height="100%"
>
<template v-for="(item,index) in customTableTitles">
<el-table-column
v-for="(item, index) in customTableTitles"
v-if="item.checked"
class="data-column"
>
<template #header>
@@ -48,6 +49,7 @@
</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">
<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" />
>
<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>
</div>
</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,12 +354,28 @@ 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
}