CN-627 Dashboard - network overview - 表格组件开发:定制tab功能开发
This commit is contained in:
hyx
@@ -11,18 +11,19 @@
|
||||
padding:1px;
|
||||
border-radius: 4px;
|
||||
.tab-table {
|
||||
border: 0;
|
||||
border:0px;
|
||||
}
|
||||
.data-total{
|
||||
display: flex;
|
||||
height: 20px;
|
||||
display: flex !important;
|
||||
}
|
||||
.data-total-trend {
|
||||
display: flex;
|
||||
margin-left: 6px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 2px;
|
||||
border-radius: 10px;
|
||||
font-weight:500;
|
||||
}
|
||||
.data-total-trend-black {
|
||||
background-color: rgba(113,113,113,0.12);
|
||||
@@ -66,7 +67,7 @@
|
||||
}
|
||||
.el-tabs__item {
|
||||
margin: 0 20px 0 0;
|
||||
padding: 0;
|
||||
padding:0px;
|
||||
font-weight: 400;
|
||||
color:$grey;
|
||||
font-size:14px;
|
||||
@@ -76,7 +77,7 @@
|
||||
color:$blue;
|
||||
height: 33px;
|
||||
margin:0 20px 0 0;
|
||||
padding: 0;
|
||||
padding:0px;
|
||||
font-weight:400;
|
||||
}
|
||||
}
|
||||
@@ -126,5 +127,41 @@
|
||||
height:12px;
|
||||
}
|
||||
}
|
||||
.search-customize-tab:hover {
|
||||
cursor:pointer;
|
||||
}
|
||||
.grid-content{
|
||||
min-height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.customize-tab__popper{
|
||||
height:560px;/*calc(100% - 136px);*/
|
||||
overflow:auto;
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
padding-inline-start: 0px !important;
|
||||
.drag-move {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.list-item {
|
||||
width:100%;
|
||||
color: #575757;
|
||||
margin-bottom: 6px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
font-weight:400;
|
||||
font-size:12px;
|
||||
font-family: Helvetica;
|
||||
|
||||
.icon-drag{
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*top:0px !important;
|
||||
right:200px !important;
|
||||
transform: translateY(126px) !important;*/
|
||||
}
|
||||
|
||||
@@ -155,15 +155,22 @@ export const listScrollPath = [
|
||||
]
|
||||
|
||||
export const networkOverviewTabs = [
|
||||
'network.categories',
|
||||
'network.providers',
|
||||
'network.ips',
|
||||
'network.countries',
|
||||
'network.asns',
|
||||
'network.applications',
|
||||
'network.clientIps',
|
||||
'network.serverIps',
|
||||
'network.providers',
|
||||
'network.domains',
|
||||
'network.protocols',
|
||||
'network.idcTenants',
|
||||
'network.provinces',
|
||||
'network.cities',
|
||||
'network.isps',
|
||||
'network.applicationCategories',
|
||||
'network.domainCategories',
|
||||
'network.hosts',
|
||||
'network.snis'
|
||||
'network.snis',
|
||||
'network.protocolPorts'
|
||||
]
|
||||
|
||||
export const dnsServerRole = {
|
||||
|
||||
@@ -4,18 +4,19 @@
|
||||
class="cn-chart__tabs"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane v-for="(tab,index) in networkOverviewTabs"
|
||||
:label="$t(tab)"
|
||||
:name="tab"
|
||||
<template v-for="(tab,index) in list">
|
||||
<el-tab-pane v-if="tab.checked"
|
||||
:name="tab.label"
|
||||
:key="index"
|
||||
:ref="`chart-tab-${index}`"
|
||||
class="tab-pane"
|
||||
|
||||
>
|
||||
|
||||
<template #label>
|
||||
{{$t(tab.label)}}
|
||||
</template>
|
||||
<el-table
|
||||
id="tabTable"
|
||||
ref="dataTable"
|
||||
:id="`tabTable_${index}`"
|
||||
:ref="`dataTable_${index}`"
|
||||
:data="tableData"
|
||||
border
|
||||
:cell-style="tableCellStyle"
|
||||
@@ -41,7 +42,7 @@
|
||||
<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" style="line-height: 20px;"></i>
|
||||
<i class="cn-icon-constant cn-icon"></i>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@@ -50,6 +51,7 @@
|
||||
</el-table>
|
||||
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
|
||||
</el-tabs>
|
||||
<div class="tab-search" >
|
||||
@@ -59,7 +61,7 @@
|
||||
class="option__select select-column"
|
||||
placeholder=""
|
||||
popper-class="option-popper"
|
||||
:popper-append-to-body="false"
|
||||
:popper-append-to-body="true"
|
||||
size="mini">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
@@ -69,11 +71,39 @@
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="search-customize-tab">
|
||||
<i class="cn-icon-gear cn-icon icon-gear"></i> {{$t('network.customizeTabs')}}
|
||||
</div>
|
||||
<el-popover placement="left"
|
||||
:width="280"
|
||||
:show-arrow="false"
|
||||
:append-to-body="false"
|
||||
:offset="-91"
|
||||
:hide-after="0"
|
||||
title="Customize"
|
||||
popper-class="customize-tab__popper"
|
||||
trigger="click">
|
||||
<template #reference>
|
||||
<div class="search-customize-tab">
|
||||
<i class="cn-icon-gear cn-icon icon-gear"></i> {{$t('network.customize')}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
<transition-group name="drag" class="list" tag="ul">
|
||||
<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>
|
||||
</el-popover>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@@ -216,16 +246,97 @@ export default {
|
||||
}
|
||||
],
|
||||
customTableTitles: [
|
||||
{ label: 'network.categories', prop: 'categories' },
|
||||
{ label: 'network.ips', prop: 'ips' },
|
||||
{ label: 'network.total', prop: 'total' },
|
||||
{ label: 'network.inbound', prop: 'inbound' },
|
||||
{ label: 'network.outbound', prop: 'outbound' }
|
||||
]
|
||||
],
|
||||
list: [
|
||||
{
|
||||
label: 'network.ips',
|
||||
checked: true
|
||||
}, {
|
||||
label: 'network.countries',
|
||||
checked: true
|
||||
}, {
|
||||
label: 'network.asns',
|
||||
checked: true
|
||||
}, {
|
||||
label: 'network.applications',
|
||||
checked: true
|
||||
}, {
|
||||
label: 'network.providers',
|
||||
checked: true
|
||||
}, {
|
||||
label: 'network.domains',
|
||||
checked: true
|
||||
}, {
|
||||
label: 'network.protocols',
|
||||
checked: true
|
||||
}, {
|
||||
label: 'network.idcTenants',
|
||||
checked: true
|
||||
}, {
|
||||
label: 'network.provinces',
|
||||
checked: false
|
||||
}, {
|
||||
label: 'network.cities',
|
||||
checked: false
|
||||
}, {
|
||||
label: 'network.isps',
|
||||
checked: false
|
||||
}, {
|
||||
label: 'network.applicationCategories',
|
||||
checked: false
|
||||
}, {
|
||||
label: 'network.domainCategories',
|
||||
checked: false
|
||||
}, {
|
||||
label: 'network.hosts',
|
||||
checked: false
|
||||
}, {
|
||||
label: 'network.snis',
|
||||
checked: false
|
||||
}, {
|
||||
label: 'network.protocolPorts',
|
||||
checked: false
|
||||
}
|
||||
],
|
||||
dragIndex: '',
|
||||
enterIndex: '',
|
||||
endIndex: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
shuffle () {
|
||||
this.list = _.shuffle(this.list)
|
||||
},
|
||||
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)
|
||||
}
|
||||
},
|
||||
dragstart (index) {
|
||||
this.dragIndex = index
|
||||
},
|
||||
dragenter (e, index) {
|
||||
e.preventDefault()
|
||||
if (this.dragIndex !== index) {
|
||||
const moving = this.list[this.dragIndex]
|
||||
this.list.splice(this.dragIndex, 1)
|
||||
this.list.splice(index, 0, moving)
|
||||
this.dragIndex = index
|
||||
}
|
||||
},
|
||||
dragover (e, index) {
|
||||
e.preventDefault()
|
||||
},
|
||||
handleClick (tab) {
|
||||
console.log(tab)
|
||||
this.customTableTitles[0].label = tab.paneName
|
||||
// this.activeTab = tab.paneName
|
||||
},
|
||||
@@ -243,11 +354,13 @@ export default {
|
||||
return 'border-right:0px;font-size:12px;font-weight:500;padding:4px 0 !important;border-bottom: 1px solid #E2E5EC;'
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
setup (props) {
|
||||
let activeTab = ref(networkOverviewTabs[0])
|
||||
const activeTab = ref(networkOverviewTabs[0])
|
||||
if (props.chartInfo) {
|
||||
if (!_.isEmpty(props.chartInfo.children)) {
|
||||
activeTab = `${props.chartInfo.children[0].id}`
|
||||
// activeTab = `${props.chartInfo.children[0].id}`
|
||||
}
|
||||
// const dataList = [...props.chartInfo.children]
|
||||
}
|
||||
@@ -255,7 +368,6 @@ export default {
|
||||
return {
|
||||
activeTab,
|
||||
networkOverviewTabs
|
||||
|
||||
// dataList
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user