feat: npm下钻功能内容准备
This commit is contained in:
chenjinsong
489
src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
Normal file
489
src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
Normal file
@@ -0,0 +1,489 @@
|
||||
<template>
|
||||
<div class="network-overview-apps">
|
||||
<div class="line-select-metric">
|
||||
<span>{{$t('network.metric')}}:</span>
|
||||
<div class="line-select__operation">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="metricFilter"
|
||||
placeholder=""
|
||||
popper-class="app-metric"
|
||||
:popper-append-to-body="false"
|
||||
@change="metricChange"
|
||||
>
|
||||
<el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-cards">
|
||||
<div class="app-card" v-for="(app, index) in appData" :key="index">
|
||||
<div class="app-card-title">
|
||||
<div class="app-card-title-name">
|
||||
<i class="cn-icon" :class="app.type === 'provider' ? 'cn-icon-entity' : 'cn-icon-app2'"></i>
|
||||
<span>{{app.name}}</span>
|
||||
</div>
|
||||
<div class="app-card-title-more" v-ele-click-outside="clickOutSide">
|
||||
<span><i class="cn-icon cn-icon-more-dark" @click="moreChange(app)"></i></span>
|
||||
<span class="app-card-title-more-delete" @click="del(app, index)" v-show="app.moreOptions"><i class="cn-icon cn-icon-delete"></i>{{$t('overall.delete')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-card__bodys">
|
||||
<div class="app-card__body">
|
||||
<div class="app-card__body-content">
|
||||
<div class="app-card__body-content-value">
|
||||
<div class="app-card__body-content-number">{{unitConvert(app.rate, unitTypes.number).join(' ')}}</div>
|
||||
<div class="app-card__body-content-percent red" v-if="app.value > 0">
|
||||
+{{unitConvert(app.value, unitTypes.percent).join('')}}
|
||||
</div>
|
||||
<div class="app-card__body-content-percent green" v-else-if="app.value < 0">
|
||||
-{{unitConvert(app.value, unitTypes.percent).join('').replaceAll('-', '')}}
|
||||
</div>
|
||||
<div v-else></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-card__body-previous">
|
||||
<div>Total</div>
|
||||
<div>{{unitConvert(app.total, unitTypes.number).join(' ')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart__drawing" :id="`chart-${app.name}-${app.type}`"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-card app-card--create">
|
||||
<i class="cn-icon cn-icon-add1" @click="addApp"></i>
|
||||
<span @click="addApp">{{$t('overall.add')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-drawer
|
||||
v-model="showAddApp"
|
||||
direction="btt"
|
||||
custom-class="add-app-drawer"
|
||||
:with-header="false"
|
||||
:show-close="false"
|
||||
>
|
||||
<div class="add-app">
|
||||
<div class="add-app__header">
|
||||
<div class="header__title">{{$t('overall.add')}}</div>
|
||||
<div class="header__operations">
|
||||
<div class="header__operation header__operation--cancel" @click="cancelApp">{{$t('overall.cancel')}}</div>
|
||||
<div class="header__operation header__operation--save" @click="save">{{$t('overall.save')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-app__body">
|
||||
<el-tabs v-model="appTypeTab" @tab-click="appTypeTabChange">
|
||||
<el-tab-pane :label="$t('networkOverview.appType.provider')" :name="0">
|
||||
<div class="body__apps">
|
||||
<div class="body__app" :class="{'provide-show': app.provideShow}" v-for="app in providerOptions" :key="app.name" @click="appCheckedChange(app, 0)">
|
||||
<div class="body__app-content">
|
||||
<div class="body__app-left">
|
||||
<span><i class="cn-icon cn-icon-mining-pool"></i></span>
|
||||
<span class="body__app-left-title">{{app.name}}</span>
|
||||
</div>
|
||||
<div class="body__app-content-right" v-if="app.provideShow"><span><i class="cn-icon cn-icon-a-allclear"></i></span></div>
|
||||
</div>
|
||||
<div class="body__app-value">{{app.desc}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('networkOverview.appType.app')" :name="1">
|
||||
<div class="body__apps">
|
||||
<div class="body__app" :class="{'app-show': app.appShow}" v-for="app in appOptions" :key="app.name" @click="appCheckedChange(app, 1)">
|
||||
<div class="body__app-content">
|
||||
<div class="body__app-left">
|
||||
<span><i class="cn-icon cn-icon-mining-pool"></i></span>
|
||||
<span class="body__app-left-title">{{app.name}}</span>
|
||||
</div>
|
||||
<div class="body__app-content-right" v-if="app.appShow"><span><i class="cn-icon cn-icon-a-allclear"></i></span></div>
|
||||
</div>
|
||||
<div class="body__app-value">{{app.desc}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="body__searcher">
|
||||
<el-input v-model="searcherApp" @input="searcherAppChange" size="mini" :placeholder="$t('networkOverview.search')" prefix-icon="el-icon-search"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
import { storageKey, unitTypes } from '@/utils/constants'
|
||||
import * as echarts from 'echarts'
|
||||
import { appListChartOption } from '@/views/charts2/charts/options/echartOption'
|
||||
import { shallowRef } from 'vue'
|
||||
import { get, put } from '@/utils/http'
|
||||
import { api } from '@/utils/api'
|
||||
import _ from 'lodash'
|
||||
import { getSecond } from '@/utils/date-util'
|
||||
import { appTestData, appPrevTestData, providerTestData, providerPrevTestData } from '../appsTestData'
|
||||
import { getChainRatio } from '@/utils/tools'
|
||||
export default {
|
||||
name: 'NetworkOverviewApps',
|
||||
props: {
|
||||
chart: Object,
|
||||
timeFilter: Object
|
||||
},
|
||||
setup () {
|
||||
return {
|
||||
myChart: shallowRef([])
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
metricFilter: 'Bits/s',
|
||||
metricOptions: [
|
||||
{
|
||||
value: 'Bits/s',
|
||||
label: 'Bits/s'
|
||||
},
|
||||
{
|
||||
value: 'Packets/s',
|
||||
label: 'Packets/s'
|
||||
},
|
||||
{
|
||||
value: 'Sessions/s',
|
||||
label: 'Sessions/s'
|
||||
}
|
||||
],
|
||||
appData: [],
|
||||
// 假数据
|
||||
appTempData: [],
|
||||
unitTypes,
|
||||
timer: null,
|
||||
showAddApp: false,
|
||||
// add弹框中的可选项
|
||||
providerOptions: [],
|
||||
appOptions: [],
|
||||
appTypeTab: 0,
|
||||
appShowName: false,
|
||||
searcherApp: '',
|
||||
appShowTypeTab: 0,
|
||||
initialAppOptionsData: [],
|
||||
initialProviderOptionsData: [],
|
||||
// 选中的app，不区分app和provider
|
||||
toSaveApp: [],
|
||||
myChartArray: [],
|
||||
appShowType: 'bytes'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
unitConvert,
|
||||
clickOutSide () {
|
||||
this.appData.forEach(t => {
|
||||
t.moreOptions = false
|
||||
})
|
||||
},
|
||||
init () {
|
||||
// this.appDataQuery(this.appData)
|
||||
const appCards = []
|
||||
const providerCards = []
|
||||
this.appData.forEach(d => {
|
||||
if (d.type === 'app') {
|
||||
appCards.push(d)
|
||||
} else if (d.type === 'provider') {
|
||||
providerCards.push(d)
|
||||
}
|
||||
})
|
||||
let prevRequest
|
||||
let request
|
||||
let params
|
||||
if (appCards.length > 0) {
|
||||
params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime),
|
||||
appLabels: appCards.map(item => {
|
||||
return item.name
|
||||
}).join(',')
|
||||
}
|
||||
prevRequest = get(api.netWorkOverview.applicationCycleTrafficTotal, params)
|
||||
request = get(api.netWorkOverview.applicationTrafficAnalysis, params)
|
||||
this.handleData(prevRequest, request, 'app')
|
||||
}
|
||||
if (providerCards.length > 0) {
|
||||
params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime),
|
||||
appCompanies: providerCards.map(item => {
|
||||
return item.name
|
||||
}).join(',')
|
||||
}
|
||||
prevRequest = get(api.netWorkOverview.appCompanyCycleTrafficTotal, params)
|
||||
request = get(api.netWorkOverview.appCompanyTrafficAnalysis, params)
|
||||
this.handleData(prevRequest, request, 'provider')
|
||||
}
|
||||
},
|
||||
handleData (prevRequest, request, _t) {
|
||||
Promise.all([prevRequest, request]).then(res => {
|
||||
if (res[0].code === 200 && res[1].code === 200) {
|
||||
// if (true) {
|
||||
const prevData = res[0].data.result
|
||||
const data = res[1].data.result
|
||||
/*let prevData
|
||||
let data
|
||||
if (_t === 'app') {
|
||||
prevData = appPrevTestData
|
||||
data = appTestData
|
||||
} else if (_t === 'provider') {
|
||||
prevData = providerPrevTestData
|
||||
data = providerTestData
|
||||
}*/
|
||||
let toCompareType = 'bytes'
|
||||
if (this.metricFilter === 'Sessions/s') {
|
||||
toCompareType = 'sessions'
|
||||
} else if (this.metricFilter === 'Packets/s') {
|
||||
toCompareType = 'packets'
|
||||
}
|
||||
data.forEach(d => {
|
||||
if (d.type === toCompareType) {
|
||||
const prevTypeData = prevData.find(p => p.type === toCompareType)
|
||||
Object.keys(d).forEach(app => {
|
||||
if (app !== 'type') {
|
||||
this.appData.forEach(d2 => {
|
||||
if (d2.type === _t && d2.name === app) {
|
||||
d2.rate = d[app].analysis.rate
|
||||
d2.pRate = prevTypeData ? (prevTypeData[app] ? prevTypeData[app].rate : 0) : 0
|
||||
d2.total = d[app].analysis.total
|
||||
d2.lineData = d[app].values.map(v => [Number(v[0]), Number(v[1]), 'time'])
|
||||
d2.value = getChainRatio(d2.rate, d2.pRate)
|
||||
this.initChart(d2)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
metricChange (value) {
|
||||
if (value === 'Bits/s') {
|
||||
this.appShowType = 'bytes'
|
||||
} else if (value === 'Packets/s') {
|
||||
this.appShowType = 'packets'
|
||||
} else if (value === 'Sessions/s') {
|
||||
this.appShowType = 'sessions'
|
||||
}
|
||||
this.init()
|
||||
},
|
||||
initChart (obj) {
|
||||
let chart = this.myChart.find(m => m.name === obj.name && m.type === obj.type)
|
||||
if (!chart) {
|
||||
chart = echarts.init(document.getElementById(`chart-${obj.name}-${obj.type}`))
|
||||
const chartOption = _.cloneDeep(appListChartOption)
|
||||
chartOption.series = [{
|
||||
...chartOption.series[0],
|
||||
data: obj.lineData,
|
||||
lineStyle: {
|
||||
color: obj.trend === 'up' ? '#7FA054' : '#35ADDA'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: obj.trend === 'up' ? '#7FA054' : '#35ADDA'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: obj.trend === 'up' ? '#7FA054' : '#35ADDA'
|
||||
}
|
||||
])
|
||||
}
|
||||
}]
|
||||
chart.setOption(chartOption)
|
||||
this.myChart.push(chart)
|
||||
this.$nextTick(() => {
|
||||
chart.resize()
|
||||
})
|
||||
}
|
||||
},
|
||||
addApp () {
|
||||
this.showAddApp = true
|
||||
this.searcherApp = ''
|
||||
const letter = 'abcdefghijklmnopqrstuvwxyz'
|
||||
const appOptions = []
|
||||
const providerOptions = []
|
||||
for (let i = 0; i < 100; i++) {
|
||||
appOptions.push({
|
||||
name: letter[i % 26] + i,
|
||||
desc: 'this is a really nice app',
|
||||
appShow: false
|
||||
})
|
||||
providerOptions.push({
|
||||
name: letter[i % 26] + i,
|
||||
desc: 'this is a really nice provider',
|
||||
provideShow: false
|
||||
})
|
||||
}
|
||||
const oldApps = this.appData ? this.appData.filter(a => a.type === 'app') : []
|
||||
const oldProviders = this.appData ? this.appData.filter(a => a.type === 'provider') : []
|
||||
this.appOptions = appOptions.filter(a => {
|
||||
return !oldApps.some(o => o.name === a.name)
|
||||
})
|
||||
this.providerOptions = providerOptions.filter(a => {
|
||||
return !oldProviders.some(o => o.name === a.name)
|
||||
})
|
||||
this.initialAppOptionsData = [...this.appOptions]
|
||||
this.initialProviderOptionsData = [...this.providerOptions]
|
||||
},
|
||||
cancelApp () {
|
||||
this.showAddApp = false
|
||||
},
|
||||
appTypeTabChange (val) {
|
||||
this.appShowTypeTab = val.index
|
||||
this.searcherApp = ''
|
||||
this.searcherAppChange(this.searcherApp)
|
||||
},
|
||||
searcherAppChange (val) {
|
||||
if (val) {
|
||||
if (this.appShowTypeTab == 0) {
|
||||
this.providerOptions = this.initialProviderOptionsData.filter(t => t.name.indexOf(val) > -1)
|
||||
} else if (this.appShowTypeTab == 1) {
|
||||
this.appOptions = this.initialAppOptionsData.filter(t => t.name.indexOf(val) > -1)
|
||||
}
|
||||
} else {
|
||||
if (this.appShowTypeTab == 0) {
|
||||
this.providerOptions = this.initialProviderOptionsData
|
||||
} else if (this.appShowTypeTab == 1) {
|
||||
this.appOptions = this.initialAppOptionsData
|
||||
}
|
||||
}
|
||||
},
|
||||
// 保存变更，并且在增、删app后，根据当前app数量更改整体高度
|
||||
saveChart (toSaveChart) {
|
||||
return new Promise(resolve => {
|
||||
put(api.chart, toSaveChart).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.emitter.emit('reloadChartList')
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
del (app, index) {
|
||||
const appData = _.cloneDeep(this.appData)
|
||||
appData.splice(index, 1)
|
||||
const toSaveParams = this.chart.params.app ? this.chart.params : { app: [] }
|
||||
if (toSaveParams.app.some(p => p.user === parseInt(localStorage.getItem(storageKey.userId)))) {
|
||||
toSaveParams.app.forEach(p => {
|
||||
if (p.user === parseInt(localStorage.getItem(storageKey.userId))) {
|
||||
p.list = appData.map(p => {
|
||||
return {
|
||||
type: p.type,
|
||||
name: p.name
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
toSaveParams.app.push({
|
||||
user: parseInt(localStorage.getItem(storageKey.userId)),
|
||||
list: appData.map(p => {
|
||||
return {
|
||||
type: p.type,
|
||||
name: p.name
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const toSaveChart = {
|
||||
...this.chart,
|
||||
params: JSON.stringify(toSaveParams)
|
||||
}
|
||||
this.saveChart(toSaveChart).then(res => {
|
||||
this.appData.splice(index, 1)
|
||||
})
|
||||
},
|
||||
save () {
|
||||
if (this.toSaveApp.length > 0) {
|
||||
const toSaveParams = this.chart.params.app ? this.chart.params : { app: [] }
|
||||
if (toSaveParams.app.some(p => p.user === parseInt(localStorage.getItem(storageKey.userId)))) {
|
||||
toSaveParams.app.forEach(p => {
|
||||
if (p.user === parseInt(localStorage.getItem(storageKey.userId))) {
|
||||
p.list = [...p.list, ...this.toSaveApp]
|
||||
}
|
||||
})
|
||||
} else {
|
||||
const defaultApp = toSaveParams.app.find(p => p.user === 'default')
|
||||
toSaveParams.app.push({
|
||||
user: parseInt(localStorage.getItem(storageKey.userId)),
|
||||
list: [...defaultApp.list, ...this.toSaveApp]
|
||||
})
|
||||
}
|
||||
const toSaveChart = {
|
||||
...this.chart,
|
||||
params: JSON.stringify(toSaveParams)
|
||||
}
|
||||
this.saveChart(toSaveChart).then(res => {
|
||||
this.appData = _.cloneDeep(toSaveParams.app.find(p => p.user === parseInt(localStorage.getItem(storageKey.userId))).list)
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
this.showAddApp = false
|
||||
this.toSaveApp = []
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
appCheckedChange (app, num) {
|
||||
if (num === 0) {
|
||||
this.providerOptions.forEach(t => {
|
||||
if (t.name === app.name) {
|
||||
t.provideShow = !t.provideShow
|
||||
if (t.provideShow) {
|
||||
this.toSaveApp.push({ type: 'provider', name: app.name })
|
||||
} else {
|
||||
const index = this.toSaveApp.findIndex(a => a.name === app.name)
|
||||
if (index > -1) {
|
||||
this.toSaveApp.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
} else if (num === 1) {
|
||||
this.appOptions.forEach(t => {
|
||||
if (t.name === app.name) {
|
||||
t.appShow = !t.appShow
|
||||
if (t.appShow) {
|
||||
this.toSaveApp.push({ type: 'app', name: app.name })
|
||||
} else {
|
||||
const index = this.toSaveApp.findIndex(a => a.name === app.name)
|
||||
if (index > -1) {
|
||||
this.toSaveApp.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
moreChange (app) {
|
||||
this.appData.forEach(t => {
|
||||
if (t.name === app.name && t.type === app.type) {
|
||||
t.moreOptions = !t.moreOptions
|
||||
}
|
||||
})
|
||||
},
|
||||
resize () {
|
||||
this.myChart.forEach(t => {
|
||||
t.resize()
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.chart.params && this.chart.params.app) {
|
||||
const userId = parseInt(localStorage.getItem(storageKey.userId))
|
||||
const apps = _.cloneDeep(this.chart.params.app)
|
||||
let app = apps.find(p => p.user === userId)
|
||||
if (!app) {
|
||||
app = apps.find(p => p.user === 'default')
|
||||
}
|
||||
this.appData = app.list
|
||||
this.init()
|
||||
window.addEventListener('resize', this.resize)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="ddos-detection">
|
||||
<div class="ddos-detection-title"><i class="cn-icon cn-icon-a-DDosDetection"></i>{{$t('network.ddosDetection')}}</div>
|
||||
<div class="ddos-detection-value">
|
||||
<chart-no-data v-if="isNoData"></chart-no-data>
|
||||
<div class="ddos-detection-type" v-else>
|
||||
<div class="ddos-detection-type-value">
|
||||
<div class="ddos-detection-type-value-name">{{$t('network.numberOfAttacks')}}</div>
|
||||
<div class="ddos-detection-type-value-number">{{$_.get(ddosData, 'attackerCount') || 0}}</div>
|
||||
</div>
|
||||
<div class="ddos-detection-type-value">
|
||||
<div class="ddos-detection-type-value-name">{{$t('network.number0fVictims')}}</div>
|
||||
<div class="ddos-detection-type-value-number">{{$_.get(ddosData, 'victimCount') || 0}}</div>
|
||||
</div>
|
||||
<div class="ddos-detection-type-value">
|
||||
<div class="ddos-detection-type-value-name">{{$t('network.number0fDetectedAttackEvents')}}</div>
|
||||
<div class="ddos-detection-type-value-number">{{$_.get(ddosData, 'attackEventCount') || 0}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-button size="small">{{$t('network.ddosDetection')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from '@/utils/api'
|
||||
import { get } from '@/utils/http'
|
||||
import { getSecond } from '@/utils/date-util'
|
||||
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||
export default {
|
||||
name: 'NetworkOverviewDdosDetection',
|
||||
props: {
|
||||
timeFilter: Object
|
||||
},
|
||||
components: {
|
||||
ChartNoData
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ddosData: {},
|
||||
isNoData: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ddosDetectDataRequests () {
|
||||
const params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime)
|
||||
}
|
||||
get(api.netWorkOverview.ddosEventAnalysis, params).then(res => {
|
||||
if (res.code === 200) {
|
||||
// res.data.result.length = 0
|
||||
if (res.data.result.length === 0) {
|
||||
this.isNoData = true
|
||||
return
|
||||
}
|
||||
this.ddosData = res.data.result[0]
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.ddosDetectDataRequests()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
475
src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
Normal file
475
src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
Normal file
@@ -0,0 +1,475 @@
|
||||
<template>
|
||||
<div class="line network">
|
||||
<chart-no-data v-if="isNoData"></chart-no-data>
|
||||
<template v-else>
|
||||
<div class="chart-drawing" v-show="showMarkLine" id="chart"></div>
|
||||
<div class="line-value-active" v-if="activeShow"></div>
|
||||
<div class="line-value">
|
||||
<div class="line-value-mpackets"
|
||||
v-show="item.show"
|
||||
:class=" {'is-active': activeShow === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
|
||||
v-for="(item, index) in mpackets"
|
||||
:key="index"
|
||||
@mouseenter="mouseenter(item)"
|
||||
@mouseleave="mouseleave(item)"
|
||||
@click="activeChange(item, index)">
|
||||
<div class="line-value-mpackets-name">
|
||||
<div :class="item.class"></div>
|
||||
<div class="mpackets-name">{{$t(item.name)}}</div>
|
||||
</div>
|
||||
<div class="line-value-unit">
|
||||
<span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
|
||||
<span class="line-value-unit-number2">
|
||||
<span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span><span v-if="item.unitType">{{item.unitType}}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-select">
|
||||
<div class="line-select-metric">
|
||||
<span>{{$t('network.metric')}}:</span>
|
||||
<div class="line-select__operation">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="value1"
|
||||
popper-class="metric"
|
||||
@change="metricSelectChange"
|
||||
>
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-select-reference-line">
|
||||
<span>{{$t('network.referenceLine')}}:</span>
|
||||
<div class="line-select__operation">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="value2"
|
||||
:disabled="!activeShow"
|
||||
popper-class="reference-line"
|
||||
@change="referenceSelectChange"
|
||||
>
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { stackedLineChartOption } from '@/views/charts2/charts/options/echartOption'
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
import { unitTypes, chartColor3, chartColor4 } from '@/utils/constants.js'
|
||||
import { shallowRef } from 'vue'
|
||||
import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
|
||||
import _ from 'lodash'
|
||||
import { get } from '@/utils/http'
|
||||
import { api } from '@/utils/api'
|
||||
import { getSecond } from '@/utils/date-util'
|
||||
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||
export default {
|
||||
name: 'NetworkOverviewLine',
|
||||
props: {
|
||||
chart: Object,
|
||||
timeFilter: Object
|
||||
},
|
||||
components: {
|
||||
ChartNoData
|
||||
},
|
||||
setup () {
|
||||
return {
|
||||
myChart: shallowRef(null)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options1: [
|
||||
{
|
||||
value: 'Bits/s',
|
||||
label: 'Bits/s'
|
||||
},
|
||||
{
|
||||
value: 'Packets/s',
|
||||
label: 'Packets/s'
|
||||
},
|
||||
{
|
||||
value: 'Sessions/s',
|
||||
label: 'Sessions/s'
|
||||
}
|
||||
],
|
||||
value1: 'Bits/s',
|
||||
options2: [
|
||||
{
|
||||
value: 'Average',
|
||||
label: 'Average'
|
||||
},
|
||||
{
|
||||
value: '95th Percentile',
|
||||
label: '95th Percentile'
|
||||
},
|
||||
{
|
||||
value: 'Maximum',
|
||||
label: 'Maximum'
|
||||
}
|
||||
],
|
||||
value2: 'Average',
|
||||
mpackets: [
|
||||
{ analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
|
||||
{ analysis: {}, name: 'network.inbound', class: 'inbound', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
|
||||
{ analysis: {}, name: 'network.outbound', class: 'outbound', show: true, invertTab: true, positioning: 2, data: [], unitType: '' },
|
||||
{ analysis: {}, name: 'network.internal', class: 'internal', show: true, invertTab: true, positioning: 3, data: [], unitType: '' },
|
||||
{ analysis: {}, name: 'network.through', class: 'through', show: true, invertTab: true, positioning: 4, data: [], unitType: '' },
|
||||
{ analysis: {}, name: 'network.other', class: 'other', show: true, invertTab: true, positioning: 5, data: [], unitType: '' }
|
||||
],
|
||||
unitConvert,
|
||||
unitTypes,
|
||||
chartDateObject: [],
|
||||
timer: null,
|
||||
activeShow: '',
|
||||
mousemoveCursor: '',
|
||||
leftOffset: 0,
|
||||
sizes: [3, 4, 6, 8, 9, 10],
|
||||
echartsLabelValue: '',
|
||||
echartsType: 'Bits/s',
|
||||
echartsData: {},
|
||||
dynamicVariable: '',
|
||||
showMarkLine: true,
|
||||
isNoData: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeShow (n) {
|
||||
this.$nextTick(() => {
|
||||
this.handleActiveBar(n)
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init (val, show, active) {
|
||||
if (!val) {
|
||||
val = 'Bits/s'
|
||||
}
|
||||
const params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime)
|
||||
}
|
||||
const condition = this.$store.getters.getQueryCondition
|
||||
if (condition) {
|
||||
params.q = condition
|
||||
}
|
||||
get(api.netWorkOverview.totalTrafficAnalysis, params).then((res) => {
|
||||
if (res.code === 200) {
|
||||
// res.data.result.length = 0
|
||||
if (res.data.result.length === 0) {
|
||||
this.isNoData = true
|
||||
return
|
||||
}
|
||||
res.data.result.forEach((t, i) => {
|
||||
if (t.type === 'bytes' && val === 'Bits/s') {
|
||||
const mpackets = _.cloneDeep(this.mpackets)
|
||||
mpackets[0].analysis = t.totalBitsRate.analysis
|
||||
mpackets[1].analysis = t.inboundBitsRate.analysis
|
||||
mpackets[2].analysis = t.outboundBitsRate.analysis
|
||||
mpackets[3].analysis = t.internalBitsRate.analysis
|
||||
mpackets[4].analysis = t.externalBitsRate.analysis
|
||||
mpackets[5].analysis = t.other.analysis
|
||||
mpackets[0].data = t.totalBitsRate.values ? t.totalBitsRate.values : []
|
||||
mpackets[1].data = t.inboundBitsRate.values ? t.inboundBitsRate.values : []
|
||||
mpackets[2].data = t.outboundBitsRate.values ? t.outboundBitsRate.values : []
|
||||
mpackets[3].data = t.internalBitsRate.values ? t.internalBitsRate.values : []
|
||||
mpackets[4].data = t.externalBitsRate.values ? t.externalBitsRate.values : []
|
||||
mpackets[5].data = t.other.values ? t.other.values : []
|
||||
mpackets.forEach(e => {
|
||||
e.unitType = 'bps'
|
||||
if (e.name !== 'network.total' && e.analysis.avg == 0) {
|
||||
e.show = false
|
||||
} else {
|
||||
e.show = true
|
||||
if (!active && show !== this.echartsLabelValue) {
|
||||
this.legendSelectChange(e, 'index')
|
||||
}
|
||||
}
|
||||
})
|
||||
this.mpackets = mpackets
|
||||
this.echartsInit(this.mpackets, show)
|
||||
} else if (t.type === 'packets' && val === 'Packets/s') {
|
||||
const mpackets = _.cloneDeep(this.mpackets)
|
||||
mpackets[0].analysis = t.totalPacketsRate.analysis
|
||||
mpackets[1].analysis = t.inboundPacketsRate.analysis
|
||||
mpackets[2].analysis = t.outboundPacketsRate.analysis
|
||||
mpackets[3].analysis = t.internalPacketsRate.analysis
|
||||
mpackets[4].analysis = t.externalPacketsRate.analysis
|
||||
mpackets[5].analysis = t.other.analysis
|
||||
mpackets[0].data = t.totalPacketsRate.values ? t.totalPacketsRate.values : []
|
||||
mpackets[1].data = t.inboundPacketsRate.values ? t.inboundPacketsRate.values : []
|
||||
mpackets[2].data = t.outboundPacketsRate.values ? t.outboundPacketsRate.values : []
|
||||
mpackets[3].data = t.internalPacketsRate.values ? t.internalPacketsRate.values : []
|
||||
mpackets[4].data = t.externalPacketsRate.values ? t.externalPacketsRate.values : []
|
||||
mpackets[5].data = t.other.values ? t.other.values : []
|
||||
mpackets.forEach(e => {
|
||||
e.unitType = 'packets/s'
|
||||
if (e.name !== 'network.total' && e.analysis.avg == 0) {
|
||||
e.show = false
|
||||
} else {
|
||||
e.show = true
|
||||
if (!active && show !== this.echartsLabelValue) {
|
||||
this.legendSelectChange(e, 'index')
|
||||
}
|
||||
}
|
||||
})
|
||||
this.mpackets = mpackets
|
||||
this.echartsInit(this.mpackets, show)
|
||||
} else if (t.type === 'sessions' && val === 'Sessions/s') {
|
||||
const mpackets = _.cloneDeep(this.mpackets)
|
||||
mpackets[0].analysis = t.totalSessionsRate.analysis
|
||||
mpackets[0].data = t.totalSessionsRate.values ? t.totalSessionsRate.values : []
|
||||
mpackets.forEach((e, i) => {
|
||||
if (i !== 0) {
|
||||
e.show = false
|
||||
}
|
||||
e.unitType = 'sessions/s'
|
||||
if (show !== this.echartsLabelValue) {
|
||||
this.legendSelectChange(e, 0)
|
||||
}
|
||||
})
|
||||
this.mpackets = mpackets
|
||||
this.echartsInit(this.mpackets, show)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
echartsInit (echartsData, show) {
|
||||
const _this = this
|
||||
echartsData = echartsData.filter(t => t.show === true)
|
||||
const dom = document.getElementById('chart')
|
||||
this.myChart = echarts.init(dom)
|
||||
this.chartOption = stackedLineChartOption
|
||||
const chartOption = this.chartOption.series[0]
|
||||
this.chartOption.series = echartsData.map((t, i) => {
|
||||
return {
|
||||
...chartOption,
|
||||
name: t.name,
|
||||
lineStyle: {
|
||||
color: chartColor3[t.positioning],
|
||||
width: 1
|
||||
},
|
||||
stack: t.name !== 'network.total' ? 'network.total' : '',
|
||||
symbolSize: function (value, params) {
|
||||
return _this.symbolSizeSortChange(i, value[0])
|
||||
},
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
borderColor: chartColor4[t.positioning],
|
||||
borderWidth: 2,
|
||||
shadowColor: chartColor4[t.positioning],
|
||||
shadowBlur: this.sizes[t.positioning] + 2
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColor3[t.positioning]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: chartColor3[t.positioning]
|
||||
}
|
||||
])
|
||||
},
|
||||
data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1])]),
|
||||
markLine: {
|
||||
silent: true,
|
||||
lineStyle: {
|
||||
color: '#B4B1A8'
|
||||
},
|
||||
symbol: 'none',
|
||||
label: {
|
||||
formatter (params) {
|
||||
const arr = unitConvert(params.value, unitTypes.number).join('')
|
||||
return _this.echartsLabelValue + '(' + arr + 'packets/s' + ')'
|
||||
},
|
||||
position: 'insideStartTop',
|
||||
color: '#717171',
|
||||
fontFamily: 'NotoSansSChineseRegular'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
if (!show) {
|
||||
this.chartOption.series.forEach((t, i) => {
|
||||
t.markLine.label.show = false
|
||||
t.markLine = []
|
||||
})
|
||||
}
|
||||
if (this.echartsLabelValue === 'Average' && show) {
|
||||
this.chartOption.series.forEach((t, i) => {
|
||||
t.markLine.label.show = true
|
||||
t.markLine.data = [
|
||||
{
|
||||
yAxis: echartsData[i].analysis.avg
|
||||
}
|
||||
]
|
||||
})
|
||||
} else if (this.echartsLabelValue === '95th Percentile' && show) {
|
||||
this.chartOption.series.forEach((t, i) => {
|
||||
t.markLine.label.show = true
|
||||
t.markLine.data = [
|
||||
{ yAxis: echartsData[i].analysis.p95 }
|
||||
]
|
||||
})
|
||||
} else if (this.echartsLabelValue === 'Maximum' && show) {
|
||||
this.chartOption.series.forEach((t, i) => {
|
||||
t.markLine.label.show = true
|
||||
t.markLine.data = [
|
||||
{ yAxis: echartsData[i].analysis.max }
|
||||
]
|
||||
})
|
||||
}
|
||||
this.chartOption.tooltip.formatter = (params) => {
|
||||
params.forEach(t => {
|
||||
t.seriesName = this.$t(t.seriesName)
|
||||
})
|
||||
const str = stackedLineTooltipFormatter(params)
|
||||
return str
|
||||
}
|
||||
this.showMarkLine = true
|
||||
this.myChart.setOption(this.chartOption)
|
||||
},
|
||||
activeChange (item, index) {
|
||||
if (!this.echartsLabelValue) {
|
||||
this.echartsLabelValue = 'Average'
|
||||
} else {
|
||||
this.echartsLabelValue = this.echartsLabelValue
|
||||
}
|
||||
this.activeShow = item.class
|
||||
this.legendSelectChange(item, index, 'active')
|
||||
this.showMarkLine = !item.invertTab
|
||||
this.init(this.echartsType, this.showMarkLine, 'active')
|
||||
},
|
||||
mouseenter (item) {
|
||||
this.mousemoveCursor = item.class
|
||||
this.handleActiveBar(item.class)
|
||||
},
|
||||
mouseleave () {
|
||||
this.mousemoveCursor = ''
|
||||
},
|
||||
dispatchLegendSelectAction (name) {
|
||||
this.myChart && this.myChart.dispatchAction({
|
||||
type: 'legendSelect',
|
||||
name: name
|
||||
})
|
||||
},
|
||||
dispatchLegendUnSelectAction (name) {
|
||||
this.myChart && this.myChart.dispatchAction({
|
||||
type: 'legendUnSelect',
|
||||
name: name
|
||||
})
|
||||
},
|
||||
legendSelectChange (item, index, val) {
|
||||
if (index === 'index') {
|
||||
this.activeShow = !item.class
|
||||
this.dispatchLegendSelectAction(item.name)
|
||||
} else if (this.mpackets[index].name === item.name) {
|
||||
this.dispatchLegendSelectAction(item.name)
|
||||
this.mpackets.forEach((t) => {
|
||||
if (t.name !== item.name) {
|
||||
this.dispatchLegendUnSelectAction(t.name)
|
||||
}
|
||||
})
|
||||
}
|
||||
if (val === 'active') {
|
||||
this.mpackets.forEach(t => {
|
||||
if (item.name === t.name) {
|
||||
t.invertTab = !t.invertTab
|
||||
} else {
|
||||
t.invertTab = true
|
||||
}
|
||||
if (t.invertTab && item.name === t.name) {
|
||||
this.activeShow = !t.class
|
||||
this.mpackets.forEach((e) => {
|
||||
this.dispatchLegendSelectAction(e.name)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
handleActiveBar (value) {
|
||||
if (document.querySelector('.network .line-value-mpackets.is-active')) {
|
||||
const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.network .line-value-mpackets.is-active')
|
||||
const activeBar = document.querySelector('.network .line-value-active')
|
||||
activeBar.style.cssText += `width: ${clientWidth}px; left: ${offsetLeft + this.leftOffset + clientLeft}px;`
|
||||
}
|
||||
},
|
||||
resize () {
|
||||
this.myChart.resize()
|
||||
},
|
||||
metricSelectChange (val) {
|
||||
this.echartsType = val
|
||||
this.activeShow = ''
|
||||
this.handleActiveBar()
|
||||
this.showMarkLine = !this.showMarkLine
|
||||
this.init(val, this.showMarkLine)
|
||||
},
|
||||
referenceSelectChange (val) {
|
||||
this.echartsLabelValue = val
|
||||
this.timer = setTimeout(() => {
|
||||
this.init(this.echartsType, val)
|
||||
}, 200)
|
||||
},
|
||||
symbolSizeSortChange (index, time) {
|
||||
const dataIntegrationArray = []
|
||||
if (stackedLineChartOption.series[0]) {
|
||||
const totalData = stackedLineChartOption.series[0].data.find(t => t[0] === time) // [time, value]
|
||||
dataIntegrationArray.push(totalData)
|
||||
totalData[2] = 0
|
||||
}
|
||||
if (stackedLineChartOption.series[1]) {
|
||||
const inboundData = stackedLineChartOption.series[1].data.find(t => t[0] === time)
|
||||
dataIntegrationArray.push(inboundData)
|
||||
inboundData[2] = 1
|
||||
}
|
||||
if (stackedLineChartOption.series[2]) {
|
||||
const outboundData = stackedLineChartOption.series[2].data.find(t => t[0] === time)
|
||||
dataIntegrationArray.push(outboundData)
|
||||
outboundData[2] = 2
|
||||
}
|
||||
if (stackedLineChartOption.series[3]) {
|
||||
const internalData = stackedLineChartOption.series[3].data.find(t => t[0] === time)
|
||||
dataIntegrationArray.push(internalData)
|
||||
internalData[2] = 3
|
||||
}
|
||||
if (stackedLineChartOption.series[4]) {
|
||||
const throughData = stackedLineChartOption.series[4].data.find(t => t[0] === time)
|
||||
dataIntegrationArray.push(throughData)
|
||||
throughData[2] = 4
|
||||
}
|
||||
if (stackedLineChartOption.series[5]) {
|
||||
const otherData = stackedLineChartOption.series[5].data.find(t => t[0] === time)
|
||||
dataIntegrationArray.push(otherData)
|
||||
otherData[2] = 5
|
||||
}
|
||||
dataIntegrationArray.sort((a, b) => { return a[1] - b[1] })
|
||||
const sortIndex = dataIntegrationArray.findIndex(a => a[2] === index)
|
||||
return this.sizes[sortIndex]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.chart) {
|
||||
this.echartsData = _.cloneDeep(this.chart)
|
||||
}
|
||||
this.timer = setTimeout(() => {
|
||||
this.init()
|
||||
}, 200)
|
||||
window.addEventListener('resize', this.resize)
|
||||
},
|
||||
beforeUnmount () {
|
||||
clearTimeout(this.timer)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="performance-event">
|
||||
<div class="performance-event-title"><i class="cn-icon cn-icon-a-NetworkPerformanceEvent"></i>{{$t('network.networkPerEvent')}}</div>
|
||||
<div class="performance-event-value">
|
||||
<div class="performance-event-pie">
|
||||
<chart-no-data v-if="isNoData"></chart-no-data>
|
||||
<div class="chart-drawing" id="chart1" v-else></div>
|
||||
</div>
|
||||
<div class="performance-event-pie-hr"></div>
|
||||
<div class="performance-event-pie">
|
||||
<chart-no-data v-if="isNoData2"></chart-no-data>
|
||||
<div class="chart-drawing" id="chart2" v-else></div>
|
||||
</div>
|
||||
</div>
|
||||
<el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { pieChartOption1, pieChartOption2 } from '@/views/charts2/charts/options/echartOption.js'
|
||||
import * as echarts from 'echarts'
|
||||
import { shallowRef } from 'vue'
|
||||
import { get } from '@/utils/http'
|
||||
import { api } from '@/utils/api'
|
||||
import { getSecond } from '@/utils/date-util'
|
||||
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||
export default {
|
||||
name: 'NetworkOverviewPerformanceEvent',
|
||||
setup () {
|
||||
return {
|
||||
myChart: shallowRef(null),
|
||||
myChart2: shallowRef(null)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
timeFilter: Object
|
||||
},
|
||||
components: {
|
||||
ChartNoData
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
timer: null,
|
||||
isNoData: false,
|
||||
isNoData2: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime)
|
||||
}
|
||||
const dom = document.getElementById('chart1')
|
||||
const dom2 = document.getElementById('chart2')
|
||||
if (dom) {
|
||||
this.myChart = echarts.init(dom)
|
||||
this.chartOption = pieChartOption1
|
||||
get(api.netWorkOverview.eventSeverity, params).then(res => {
|
||||
if (res.code === 200) {
|
||||
// res.data.result.length = 0
|
||||
if (res.data.result.length === 0) {
|
||||
this.isNoData = true
|
||||
return
|
||||
}
|
||||
res.data.result = res.data.result.map(t => {
|
||||
return {
|
||||
name: t.eventSeverity,
|
||||
value: t.count
|
||||
}
|
||||
})
|
||||
if (res.data.result.length <= 0) {
|
||||
this.chartOption.legend.show = false
|
||||
} else {
|
||||
this.chartOption.legend.show = true
|
||||
}
|
||||
this.chartOption.series[0].data = res.data.result
|
||||
this.myChart.setOption(this.chartOption)
|
||||
}
|
||||
})
|
||||
}
|
||||
if (dom2) {
|
||||
this.myChart2 = echarts.init(dom2)
|
||||
this.chartOption2 = pieChartOption2
|
||||
get(api.netWorkOverview.eventType, params).then(res => {
|
||||
if (res.code === 200) {
|
||||
// res.data.result.length = 0
|
||||
if (res.data.result.length === 0) {
|
||||
this.isNoData2 = true
|
||||
return
|
||||
}
|
||||
res.data.result = res.data.result.map(t => {
|
||||
return {
|
||||
name: t.eventType,
|
||||
value: t.count
|
||||
}
|
||||
})
|
||||
if (res.data.result.length <= 0) {
|
||||
this.chartOption2.legend.show = false
|
||||
} else {
|
||||
this.chartOption2.legend.show = true
|
||||
}
|
||||
this.chartOption2.series[0].data = res.data.result
|
||||
this.myChart2.setOption(this.chartOption2)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
resize () {
|
||||
this.myChart.resize()
|
||||
this.myChart2.resize()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.timer = setTimeout(() => {
|
||||
this.init()
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.resize)
|
||||
},
|
||||
beforeUnmount () {
|
||||
clearTimeout(this.timer)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
896
src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
Normal file
896
src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
Normal file
@@ -0,0 +1,896 @@
|
||||
<template>
|
||||
<div class="tabs">
|
||||
<el-tabs v-model="activeTab"
|
||||
class="cn-chart__tabs"
|
||||
:class="showTabs?'':'tab-hide'"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<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_${index}`"
|
||||
:ref="`dataTable_${index}`"
|
||||
:data="tableData"
|
||||
border
|
||||
v-loading="loading"
|
||||
:cell-style="tableCellStyle"
|
||||
:header-cell-style="tableHeaderCellStyle"
|
||||
class="tab-table"
|
||||
height="100%"
|
||||
>
|
||||
<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">
|
||||
<template v-if="item.prop === 'total'" >
|
||||
<div class="data-total" >
|
||||
{{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '-'}}
|
||||
<div v-if="scope.row['trend'] === 'up'" class="data-total-trend data-total-trend-red">
|
||||
<i class="cn-icon-rise1 cn-icon"></i><span>{{scope.row['trendValue']}}</span>
|
||||
</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><span>{{scope.row['trendValue']}}</span>
|
||||
</div>
|
||||
<div v-else-if="scope.row['trend'] === 'noChange'" class="data-total-trend data-total-trend-black">
|
||||
<i class="cn-icon-constant cn-icon"></i><span>{{scope.row['trendValue']}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'tab'" >
|
||||
<div class="data-click" v-if='drillDown' @click="handleTabValue(item.label,scope.row['tab'])">{{scope.row['tab']}}</div>
|
||||
<div v-else >{{scope.row['tab']}}</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '-'}}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
|
||||
</el-tabs>
|
||||
<div class="tab-search">
|
||||
<div class="search-select" v-if="drillDown">
|
||||
<span>{{$t('network.metric')}}:</span>
|
||||
<el-select v-model="metric"
|
||||
class="option__select select-column"
|
||||
popper-class="option-popper metric-select"
|
||||
:popper-append-to-body="false"
|
||||
key="tabMetric"
|
||||
@change="changeMetric"
|
||||
size="mini">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.label"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<el-popover placement="bottom-end"
|
||||
:width="240"
|
||||
:show-arrow="false"
|
||||
:append-to-body="true"
|
||||
:hide-after="0"
|
||||
popper-class="customize-tab__popper"
|
||||
@show="handleCustomizeButton(true)"
|
||||
@hide="handleCustomizeButton(false)"
|
||||
trigger="click">
|
||||
<template #reference>
|
||||
<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>
|
||||
|
||||
<el-tabs v-model="activeCustomize"
|
||||
@tab-click="handleCustomizeClick"
|
||||
type="card"
|
||||
>
|
||||
<el-tab-pane :label="$t('network.tabs')" name="tabs" width="50%" v-if="showTabs" >
|
||||
<transition-group name="dragTabs" class="list" tag="ul" ref="tabs">
|
||||
<li v-for="(item, index) in list"
|
||||
:key="item.label"
|
||||
class="list-item"
|
||||
@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(index)" :disabled="item.disabled" 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">
|
||||
<template v-for="(item, index) in customTableTitles">
|
||||
<li v-if="item.tabColumn != true"
|
||||
: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>
|
||||
</template>
|
||||
</transition-group>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { networkOverviewTabs, networkOverviewTabList, operationType, networkOverviewSearchUrl, unitTypes } from '@/utils/constants'
|
||||
import { get } from '@/utils/http'
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
|
||||
export default {
|
||||
name: 'NetworkOverviewTabs',
|
||||
data () {
|
||||
return {
|
||||
metric: 'Bits/s',
|
||||
orderBy: 'bytesTotal',
|
||||
tab: 'ip',
|
||||
unitConvert,
|
||||
unitTypes,
|
||||
options: [
|
||||
{
|
||||
value: 'Bits/s',
|
||||
label: 'Bits/s'
|
||||
},
|
||||
{
|
||||
value: 'Packets/s',
|
||||
label: 'Packets/s'
|
||||
},
|
||||
{
|
||||
value: 'Sessions/s',
|
||||
label: 'Sessions/s'
|
||||
}
|
||||
],
|
||||
customTableTitles: [
|
||||
{ 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 },
|
||||
{ label: 'network.internal', prop: 'internal', checked: true, tabColumn: false },
|
||||
{ label: 'network.through', prop: 'through', checked: true, tabColumn: false }
|
||||
],
|
||||
list: this.$_.cloneDeep(networkOverviewTabList),
|
||||
dragIndex: '',
|
||||
dragMetricIndex: '',
|
||||
showBackground: false,
|
||||
tabUrl: networkOverviewTabList[0].url,
|
||||
cycleTotalUrl: networkOverviewTabList[0].cycleTotalUrl,
|
||||
tableData: [],
|
||||
showTabs: true,
|
||||
columnNameGroup: {
|
||||
total: 'bytesTotal',
|
||||
inbound: 'inboundBitsRate',
|
||||
outbound: 'outboundBitsRate',
|
||||
internal: 'internalBitsRate',
|
||||
through: 'throughBitsRate'
|
||||
},
|
||||
metricUnit: 'bytes',
|
||||
loading: false,
|
||||
drillDown: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
chartData: Array,
|
||||
timeFilter: Object,
|
||||
chart: Object
|
||||
},
|
||||
components: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
if (this.chartData) {
|
||||
this.initData()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
changeMetric () {
|
||||
const beforeType = this.$store.getters.getTabOperationBeforeType
|
||||
if (beforeType != operationType.thirdMenu) {
|
||||
this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
|
||||
}
|
||||
this.$store.commit('setTabOperationType', operationType.changeMetric)
|
||||
const curTab = this.getCurTab()
|
||||
const label = curTab.label
|
||||
if (this.metric === 'Bits/s') {
|
||||
this.columnNameGroup = {
|
||||
total: 'bytesTotal',
|
||||
inbound: 'inboundBitsRate',
|
||||
outbound: 'outboundBitsRate',
|
||||
internal: 'internalBitsRate',
|
||||
through: 'throughBitsRate'
|
||||
}
|
||||
this.orderBy = 'bytesTotal'
|
||||
this.metricUnit = 'bytes'
|
||||
|
||||
if (this.customTableTitles.length === 2) {
|
||||
this.customTableTitles = [
|
||||
{ label: label, prop: 'tab', checked: true, tabColumn: true },
|
||||
{ label: 'network.total', prop: 'total', checked: this.customTableTitles[1].checked, tabColumn: false },
|
||||
{ label: 'network.inbound', prop: 'inbound', checked: this.customTableTitles[2] ? this.customTableTitles[2].checked : true, tabColumn: false },
|
||||
{ label: 'network.outbound', prop: 'outbound', checked: this.customTableTitles[3] ? this.customTableTitles[3].checked : true, tabColumn: false },
|
||||
{ label: 'network.internal', prop: 'internal', checked: this.customTableTitles[4] ? this.customTableTitles[4].checked : true, tabColumn: false },
|
||||
{ label: 'network.through', prop: 'through', checked: this.customTableTitles[5] ? this.customTableTitles[5].checked : true, tabColumn: false }
|
||||
]
|
||||
} else {
|
||||
const titleGroup = []
|
||||
this.customTableTitles.forEach(item => {
|
||||
if (item.tabColumn) {
|
||||
item.label = label
|
||||
}
|
||||
titleGroup.push(item)
|
||||
})
|
||||
this.customTableTitles = titleGroup
|
||||
}
|
||||
} else if (this.metric === 'Packets/s') {
|
||||
this.columnNameGroup = {
|
||||
total: 'packetsTotal',
|
||||
inbound: 'inboundPacketsRate',
|
||||
outbound: 'outboundPacketsRate',
|
||||
internal: 'internalPacketsRate',
|
||||
through: 'throughPacketsRate'
|
||||
}
|
||||
this.orderBy = 'packetsTotal'
|
||||
this.metricUnit = 'packets'
|
||||
if (this.customTableTitles.length === 2) {
|
||||
this.customTableTitles = [
|
||||
{ label: label, prop: 'tab', checked: true, tabColumn: true },
|
||||
{ label: 'network.total', prop: 'total', checked: this.customTableTitles[1].checked, tabColumn: false },
|
||||
{ label: 'network.inbound', prop: 'inbound', checked: this.customTableTitles[2] ? this.customTableTitles[2].checked : true, tabColumn: false },
|
||||
{ label: 'network.outbound', prop: 'outbound', checked: this.customTableTitles[3] ? this.customTableTitles[3].checked : true, tabColumn: false },
|
||||
{ label: 'network.internal', prop: 'internal', checked: this.customTableTitles[4] ? this.customTableTitles[4].checked : true, tabColumn: false },
|
||||
{ label: 'network.through', prop: 'through', checked: this.customTableTitles[5] ? this.customTableTitles[5].checked : true, tabColumn: false }
|
||||
]
|
||||
} else {
|
||||
const titleGroup = []
|
||||
this.customTableTitles.forEach(item => {
|
||||
if (item.tabColumn) {
|
||||
item.label = label
|
||||
}
|
||||
titleGroup.push(item)
|
||||
})
|
||||
this.customTableTitles = titleGroup
|
||||
}
|
||||
} else if (this.metric === 'Sessions/s') {
|
||||
this.columnNameGroup = {
|
||||
total: 'sessionsRate'
|
||||
}
|
||||
this.orderBy = 'sessions'
|
||||
this.metricUnit = 'sessions'
|
||||
let totalChecked = true
|
||||
this.customTableTitles.forEach(item => {
|
||||
if (item.prop === 'total') {
|
||||
totalChecked = item.checked
|
||||
}
|
||||
})
|
||||
this.customTableTitles = [
|
||||
{ label: label, prop: 'tab', checked: true, tabColumn: true },
|
||||
{ label: 'network.total', prop: 'total', checked: totalChecked, tabColumn: false }
|
||||
]
|
||||
}
|
||||
let queryParams = {
|
||||
orderBy: this.orderBy,
|
||||
limit: 10,
|
||||
type: curTab.prop
|
||||
}
|
||||
const condition = this.$store.getters.getQueryCondition
|
||||
if (condition) {
|
||||
queryParams = {
|
||||
orderBy: this.orderBy,
|
||||
limit: 10,
|
||||
type: curTab.prop,
|
||||
q: condition
|
||||
}
|
||||
}
|
||||
this.loading = true
|
||||
this.$emit('getChartData', this.getCurUrl(), queryParams)
|
||||
},
|
||||
handleCustomizeButton (status) {
|
||||
this.showBackground = status
|
||||
if (!this.showTabs) {
|
||||
this.activeCustomize = 'metrics'
|
||||
}
|
||||
},
|
||||
getDefaultTab () {
|
||||
let tabObjGroup = this.list.filter(item => item.checked)
|
||||
if (tabObjGroup && tabObjGroup.length > 0) {
|
||||
return tabObjGroup[0]
|
||||
} else {
|
||||
return tabObjGroup = networkOverviewTabList.filter(item => item.checked)[0]
|
||||
}
|
||||
},
|
||||
initData () {
|
||||
const curTab = this.getCurTab()
|
||||
const columnName = this.$store.getters.getBreadcrumbColumnName
|
||||
|
||||
this.list.forEach(item => {
|
||||
const tabDom = document.getElementById('tab-' + item.label)
|
||||
if (tabDom) {
|
||||
tabDom.style.display = ''
|
||||
}
|
||||
})
|
||||
|
||||
const curOperationType = this.$store.getters.getTabOperationType
|
||||
if (curOperationType === operationType.changeTab) { // 切换tab
|
||||
if (curTab) { // tab切换
|
||||
this.activeTab = curTab.label
|
||||
this.customTableTitles[0].label = curTab.label
|
||||
this.$store.commit('setNetworkOverviewCurrentTab', curTab)
|
||||
}
|
||||
this.showTabs = true
|
||||
} else if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
|
||||
// 此处的id为tab- name
|
||||
this.list.forEach(item => {
|
||||
const tabDom = document.getElementById('tab-' + item.label)
|
||||
const paneDom = document.getElementById('pane-' + item.label)
|
||||
if (tabDom) {
|
||||
tabDom.style.display = 'none'
|
||||
}
|
||||
if (paneDom) {
|
||||
if (curTab.label === item.label) {
|
||||
paneDom.style.display = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
this.customTableTitles[0].label = curTab.label
|
||||
this.showTabs = false
|
||||
} else if (curOperationType === operationType.fourthMenu) { // 点击的为第四级菜单
|
||||
const curTab = this.getDefaultTab()
|
||||
if (curTab) {
|
||||
this.activeTab = curTab.label
|
||||
this.customTableTitles[0].label = curTab.label
|
||||
this.$store.commit('setNetworkOverviewCurrentTab', curTab)
|
||||
}
|
||||
this.showTabs = true
|
||||
} else if (curOperationType === operationType.secondMenu) { // 点击的为第二级菜单、或者点击菜单进入、
|
||||
if (curTab) { // tab切换
|
||||
this.activeTab = curTab.label
|
||||
this.customTableTitles[0].label = curTab.label
|
||||
this.$store.commit('setNetworkOverviewCurrentTab', curTab)
|
||||
}
|
||||
this.showTabs = true
|
||||
} else if (curOperationType === operationType.changeMetric) { // 切换metric
|
||||
const beforeOperationType = this.$store.getters.getTabOperationBeforeType
|
||||
if (beforeOperationType === operationType.thirdMenu) {
|
||||
this.list.forEach(item => {
|
||||
const tabDom = document.getElementById('tab-' + item.label)
|
||||
const paneDom = document.getElementById('pane-' + item.label)
|
||||
if (tabDom) {
|
||||
tabDom.style.display = 'none'
|
||||
}
|
||||
if (paneDom) {
|
||||
if (curTab.label === item.label) {
|
||||
paneDom.style.display = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
this.customTableTitles[0].label = curTab.label
|
||||
this.showTabs = false
|
||||
}
|
||||
} else if (curOperationType === operationType.customize) { // customize
|
||||
const beforeOperationType = this.$store.getters.getTabOperationBeforeType
|
||||
if (beforeOperationType === operationType.thirdMenu) {
|
||||
this.list.forEach(item => {
|
||||
const tabDom = document.getElementById('tab-' + item.label)
|
||||
const paneDom = document.getElementById('pane-' + item.label)
|
||||
if (tabDom) {
|
||||
tabDom.style.display = 'none'
|
||||
}
|
||||
if (paneDom) {
|
||||
if (curTab.label === item.label) {
|
||||
paneDom.style.display = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
this.customTableTitles[0].label = curTab.label
|
||||
this.showTabs = false
|
||||
} else {
|
||||
this.list.forEach(item => {
|
||||
const tabDom = document.getElementById('tab-' + item.label)
|
||||
const paneDom = document.getElementById('pane-' + item.label)
|
||||
if (tabDom) {
|
||||
tabDom.style.display = ''
|
||||
}
|
||||
if (paneDom) {
|
||||
if (curTab.label === item.label) {
|
||||
paneDom.style.display = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
this.activeTab = curTab.label
|
||||
this.customTableTitles[0].label = curTab.label
|
||||
this.showTabs = true
|
||||
}
|
||||
}
|
||||
|
||||
this.tableData = []
|
||||
const tabList = []
|
||||
const tableDataTmp = this.chartData.map(item => {
|
||||
tabList.push(item[curTab.prop])
|
||||
return {
|
||||
tab: item[curTab.prop],
|
||||
total: item[this.columnNameGroup.total],
|
||||
inbound: item[this.columnNameGroup.inbound],
|
||||
outbound: item[this.columnNameGroup.outbound],
|
||||
internal: item[this.columnNameGroup.internal],
|
||||
through: item[this.columnNameGroup.through]
|
||||
}
|
||||
})
|
||||
const queryParams = {}
|
||||
if (tabList.length > 0) {
|
||||
const conditionStr = tabList.filter(item => item != '')
|
||||
queryParams.params = conditionStr.toString()
|
||||
queryParams.type = curTab.prop
|
||||
}
|
||||
|
||||
// 获取上一周期的总流量
|
||||
let cycleTotalList = []
|
||||
const condition = this.$store.getters.getQueryCondition
|
||||
if (condition) {
|
||||
queryParams.q = condition
|
||||
}
|
||||
get(this.gerCycleUrl(), queryParams).then(response => {
|
||||
if (response.code === 200) {
|
||||
cycleTotalList = response.data.result
|
||||
tableDataTmp.forEach(item => {
|
||||
const cycle = cycleTotalList.find(i => i[curTab.prop] === item.tab)
|
||||
let trend = ''
|
||||
let trendPercent = ''
|
||||
if (cycle) {
|
||||
const totalDiff = item.total - cycle[this.metricUnit]
|
||||
if (cycle[this.metricUnit]) {
|
||||
trendPercent = Math.round((Math.abs(totalDiff) / cycle[this.metricUnit]) * 100)
|
||||
if (totalDiff > 0) {
|
||||
trend = 'up'
|
||||
} else if (totalDiff < 0) {
|
||||
trend = 'down'
|
||||
} else {
|
||||
trend = 'noChange'
|
||||
}
|
||||
trendPercent = trendPercent + '%'
|
||||
if (trendPercent === '0%') {
|
||||
trend = 'noChange'
|
||||
trendPercent = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
this.tableData.push({
|
||||
tab: item.tab,
|
||||
total: item.total,
|
||||
trend: trend,
|
||||
trendValue: trendPercent,
|
||||
inbound: item.inbound,
|
||||
outbound: item.outbound,
|
||||
internal: item.internal,
|
||||
through: item.through
|
||||
})
|
||||
})
|
||||
this.loading = false
|
||||
} else {
|
||||
this.tableData = tableDataTmp
|
||||
this.loading = false
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false
|
||||
}).finally(e => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
tabChange (index) {
|
||||
const beforeType = this.$store.getters.getTabOperationBeforeType
|
||||
if (beforeType != operationType.thirdMenu) {
|
||||
this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
|
||||
}
|
||||
this.$store.commit('setTabOperationType', operationType.customize)
|
||||
const handleTab = this.list[index]
|
||||
const tabList = this.list.filter(item => item.checked === true)
|
||||
const defaultTab = tabList.length > 0 ? tabList[0] : {}
|
||||
if (handleTab.label === defaultTab.label && handleTab.checked) {
|
||||
this.activeTab = handleTab.label
|
||||
this.customTableTitles.forEach(item => {
|
||||
if (item.tabColumn) {
|
||||
item.label = handleTab.label
|
||||
}
|
||||
})
|
||||
}
|
||||
if (tabList.length === 1) { // 当前操作之后，只有1个tab被选中，则这一个不允许取消选中
|
||||
defaultTab.disabled = true
|
||||
} else if (tabList.length > 1) {
|
||||
this.list.forEach(item => {
|
||||
item.disabled = false
|
||||
})
|
||||
}
|
||||
|
||||
this.tabUrl = tabList[0].url
|
||||
this.cycleTotalUrl = tabList[0].cycleTotalUrl
|
||||
this.$store.commit('setNetworkOverviewCurrentTab', tabList[0])
|
||||
|
||||
let queryParams = {
|
||||
orderBy: this.orderBy,
|
||||
limit: 10,
|
||||
type: tabList[0].prop
|
||||
}
|
||||
const condition = this.$store.getters.getQueryCondition
|
||||
if (condition) {
|
||||
queryParams = {
|
||||
orderBy: this.orderBy,
|
||||
limit: 10,
|
||||
type: tabList[0].prop,
|
||||
q: condition
|
||||
}
|
||||
}
|
||||
this.loading = true
|
||||
this.$emit('getChartData', this.getCurUrl(), queryParams)
|
||||
},
|
||||
handleTabValue (columnName, columnValue) {
|
||||
const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
|
||||
const tabGroup = this.list.filter(item => item.label === columnName)
|
||||
if (tabGroup && tabGroup.length > 0) {
|
||||
this.$store.commit('setNetworkOverviewBeforeTab', tabGroup[0])
|
||||
}
|
||||
this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
|
||||
this.$store.commit('setTabOperationType', operationType.fourthMenu)
|
||||
|
||||
const queryCondition = []
|
||||
const searchProps = tabGroup[0].dillDownProp
|
||||
searchProps.forEach(item => {
|
||||
queryCondition.push(item + "='" + columnValue + "'")
|
||||
})
|
||||
this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
|
||||
/*
|
||||
* 点击表格第一列后
|
||||
1.顶部面包屑增加两级，分别是列名和值；
|
||||
2.panel标题变更为值；
|
||||
3.当前panel只保留折线图和表格；
|
||||
4.面包屑上的值可点击下拉，切换内容；
|
||||
* */
|
||||
this.$store.getters.menuList.forEach(menu => {
|
||||
if (this.$_.isEmpty(menu.children) && menu.route) {
|
||||
if (this.$route.path === menu.route) {
|
||||
menu.columnName = columnName
|
||||
menu.columnValue = columnValue
|
||||
this.$store.commit('setPanelName', columnValue)
|
||||
this.$store.commit('setBreadcrumbColumnName', columnName)
|
||||
this.$store.commit('setBreadcrumbColumnValue', columnValue)
|
||||
}
|
||||
} else if (!this.$_.isEmpty(menu.children)) {
|
||||
menu.children.forEach(child => {
|
||||
if (this.$route.path === child.route) {
|
||||
child.columnName = columnName
|
||||
child.columnValue = columnValue
|
||||
this.$store.commit('setPanelName', columnValue)
|
||||
this.$store.commit('setBreadcrumbColumnName', columnName)
|
||||
this.$store.commit('setBreadcrumbColumnValue', columnValue)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
this.list.forEach((item, index) => {
|
||||
if (item.label === columnName) {
|
||||
item.checked = false
|
||||
}
|
||||
if (oldCurTab && (item.label === oldCurTab.label)) {
|
||||
item.checked = true
|
||||
}
|
||||
})
|
||||
this.$store.commit('setNetworkOverviewTabList', this.list)
|
||||
this.handleSearchParams(columnValue)
|
||||
|
||||
const tabObjGroup = this.list.filter(item => item.checked)
|
||||
if (tabObjGroup && tabObjGroup.length > 0) {
|
||||
const curTab = tabObjGroup[0]
|
||||
this.$store.commit('setNetworkOverviewCurrentTab', curTab)
|
||||
}
|
||||
|
||||
const tab = this.list.filter(item => item.checked)
|
||||
this.tabUrl = tab.url
|
||||
this.cycleTotalUrl = tab.cycleTotalUrl
|
||||
|
||||
// 如果面包屑的columnValue有值，则不更新valueList
|
||||
const valueList = []
|
||||
this.tableData.map(item => {
|
||||
valueList.push(item.tab)
|
||||
})
|
||||
this.$store.commit('setBreadcrumbColumnValueList', valueList)
|
||||
this.$router.push({
|
||||
path: this.$route.path,
|
||||
query: {
|
||||
t: +new Date()
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSearchParams (columnValue) {
|
||||
const queryCondition = []
|
||||
const curTab = this.getCurTab()
|
||||
const searchProps = curTab.dillDownProp
|
||||
searchProps.forEach(item => {
|
||||
queryCondition.push(item + "='" + columnValue + "'")
|
||||
})
|
||||
this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
|
||||
},
|
||||
metricChange () {
|
||||
},
|
||||
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()
|
||||
},
|
||||
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.tableData = []
|
||||
this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
|
||||
this.$store.commit('setTabOperationType', operationType.changeTab)
|
||||
this.customTableTitles[0].label = tab.paneName
|
||||
|
||||
const tabObjGroup = this.list.filter(item => item.label == tab.paneName)
|
||||
if (tabObjGroup && tabObjGroup.length > 0) {
|
||||
const curTab = tabObjGroup[0]
|
||||
this.$store.commit('setNetworkOverviewCurrentTab', curTab)
|
||||
this.tabUrl = curTab.url
|
||||
this.cycleTotalUrl = curTab.cycleTotalUrl
|
||||
this.tab = curTab.prop
|
||||
|
||||
let queryParams = {
|
||||
orderBy: this.orderBy,
|
||||
limit: 10,
|
||||
type: curTab.prop
|
||||
}
|
||||
const condition = this.$store.getters.getQueryCondition
|
||||
if (condition) {
|
||||
queryParams = {
|
||||
orderBy: this.orderBy,
|
||||
limit: 10,
|
||||
type: curTab.prop,
|
||||
q: condition
|
||||
}
|
||||
}
|
||||
this.loading = true
|
||||
this.$emit('getChartData', this.getCurUrl(), queryParams, queryParams.q)
|
||||
}
|
||||
},
|
||||
getCurUrl () {
|
||||
const condition = this.$store.getters.getQueryCondition
|
||||
if (condition) {
|
||||
return networkOverviewSearchUrl.drilldownCurUrl
|
||||
} else {
|
||||
return networkOverviewSearchUrl.curUrl
|
||||
}
|
||||
},
|
||||
handleQueryParams (extraParams) {
|
||||
let queryType = ''
|
||||
const name = this.$store.getters.getBreadcrumbColumnName
|
||||
let tabList = this.$store.getters.getNetworkOverviewTabList
|
||||
if (tabList.length === 0 || !tabList) {
|
||||
tabList = this.$_.cloneDeep(networkOverviewTabList)
|
||||
}
|
||||
|
||||
const curOperationType = this.$store.getters.getTabOperationType
|
||||
if (curOperationType === operationType.fourthMenu) { // 点击的为第四级菜单
|
||||
const tabCheckedGroup = []
|
||||
tabList.forEach(item => {
|
||||
if (item.checked) {
|
||||
tabCheckedGroup.push(item)
|
||||
}
|
||||
})
|
||||
if (tabCheckedGroup && tabCheckedGroup.length > 0) {
|
||||
queryType = tabCheckedGroup[0].prop
|
||||
this.$store.commit('setNetworkOverviewCurrentTab', tabCheckedGroup[0])
|
||||
this.customTableTitles[0].label = tabCheckedGroup[0].label
|
||||
}
|
||||
} else if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
|
||||
const networkOverviewTabList = []
|
||||
tabList.forEach(item => {
|
||||
if (this.$t(item.label) === name) {
|
||||
item.checked = true
|
||||
}
|
||||
networkOverviewTabList.push(item)
|
||||
})
|
||||
this.$store.commit('setNetworkOverviewTabList', networkOverviewTabList)
|
||||
|
||||
const breadcrumbColumnNameUrl = tabList.filter(item => this.$t(item.label) === name)
|
||||
if (breadcrumbColumnNameUrl && breadcrumbColumnNameUrl.length > 0) {
|
||||
queryType = breadcrumbColumnNameUrl[0].prop
|
||||
this.$store.commit('setNetworkOverviewCurrentTab', breadcrumbColumnNameUrl[0])
|
||||
this.customTableTitles[0].label = breadcrumbColumnNameUrl[0].label
|
||||
}
|
||||
} else if (curOperationType === operationType.changeTab) { // 切换tab
|
||||
let curTab = this.$store.getters.getNetworkOverviewCurrentTab
|
||||
if (!curTab) {
|
||||
const list = this.$store.getters.getNetworkOverviewTabList
|
||||
const tabObjGroup = list.filter(item => item.checked)
|
||||
if (tabObjGroup && tabObjGroup.length > 0) {
|
||||
curTab = tabObjGroup[0]
|
||||
}
|
||||
}
|
||||
if (curTab) {
|
||||
queryType = curTab.prop
|
||||
this.customTableTitles[0].label = curTab.label
|
||||
this.$store.commit('setNetworkOverviewCurrentTab', curTab)
|
||||
}
|
||||
} else if (curOperationType === operationType.secondMenu) { // 点击第二级菜单，点击菜单
|
||||
const list = this.$_.cloneDeep(networkOverviewTabList)
|
||||
const tabObjGroup = list.filter(item => item.checked)
|
||||
if (tabObjGroup && tabObjGroup.length > 0) {
|
||||
const curTab = tabObjGroup[0]
|
||||
queryType = curTab.prop
|
||||
this.customTableTitles[0].label = curTab.label
|
||||
this.$store.commit('setNetworkOverviewCurrentTab', curTab)
|
||||
}
|
||||
} else {
|
||||
let curTab = this.$store.getters.getNetworkOverviewCurrentTab
|
||||
if (!curTab) {
|
||||
let list = this.$store.getters.getNetworkOverviewTabList
|
||||
if (list.length === 0 || !list) {
|
||||
list = this.$_.cloneDeep(networkOverviewTabList)
|
||||
}
|
||||
const tabObjGroup = list.filter(item => item.checked)
|
||||
if (tabObjGroup && tabObjGroup.length > 0) {
|
||||
curTab = tabObjGroup[0]
|
||||
}
|
||||
}
|
||||
if (curTab) {
|
||||
queryType = curTab.prop
|
||||
this.customTableTitles[0].label = curTab.label
|
||||
this.$store.commit('setNetworkOverviewCurrentTab', curTab)
|
||||
}
|
||||
}
|
||||
|
||||
if (JSON.stringify(extraParams) === '{}') {
|
||||
extraParams = {
|
||||
type: queryType || networkOverviewTabList[0].prop,
|
||||
orderBy: this.orderBy ? this.orderBy : 'bytesTotal',
|
||||
limit: 10
|
||||
}
|
||||
const condition = this.$store.getters.getQueryCondition
|
||||
if (condition) {
|
||||
extraParams.q = condition
|
||||
}
|
||||
}
|
||||
return extraParams
|
||||
},
|
||||
gerCycleUrl () {
|
||||
const condition = this.$store.getters.getQueryCondition
|
||||
if (condition) {
|
||||
return networkOverviewSearchUrl.drilldownCycleUrl
|
||||
} else {
|
||||
return networkOverviewSearchUrl.cycleUrl
|
||||
}
|
||||
},
|
||||
handleCustomizeClick (tab) {
|
||||
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) {
|
||||
// style = style + 'border-bottom:0px !important;'
|
||||
}
|
||||
if (columnIndex === 0) {
|
||||
style = style + 'color:#046ECA;'
|
||||
}
|
||||
return style
|
||||
},
|
||||
tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
|
||||
return 'border-right:0px;font-size:12px;font-weight:500;padding:4px 0 !important;border-bottom: 1px solid #E2E5EC;'
|
||||
},
|
||||
getCurTab () {
|
||||
let curTab = this.$store.getters.getNetworkOverviewCurrentTab
|
||||
if (!curTab) {
|
||||
const tabObjGroup = this.list.filter(item => item.checked)
|
||||
if (tabObjGroup && tabObjGroup.length > 0) {
|
||||
curTab = tabObjGroup[0]
|
||||
} else {
|
||||
curTab = networkOverviewTabList[0]
|
||||
}
|
||||
this.$store.commit('setNetworkOverviewCurrentTab', curTab)
|
||||
}
|
||||
return curTab
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.chart.params && this.chart.params.drillDown) {
|
||||
this.drillDown = this.chart.params.drillDown
|
||||
}
|
||||
|
||||
this.list = this.$_.cloneDeep(networkOverviewTabList)
|
||||
if (this.$store.getters.getNetworkOverviewTabList.length > 0) {
|
||||
this.list = this.$store.getters.getNetworkOverviewTabList
|
||||
} else {
|
||||
this.$store.commit('setNetworkOverviewTabList', this.list)
|
||||
}
|
||||
const curOperationType = this.$store.getters.getTabOperationType
|
||||
if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
|
||||
const curTab = this.getCurTab()
|
||||
this.customTableTitles[0].label = curTab.label
|
||||
this.showTabs = false
|
||||
this.$nextTick(() => {
|
||||
this.list.forEach(item => {
|
||||
const tabDom = document.getElementById('tab-' + item.label)
|
||||
const paneDom = document.getElementById('pane-' + item.label)
|
||||
if (tabDom) {
|
||||
tabDom.style.display = 'none'
|
||||
}
|
||||
if (paneDom) {
|
||||
if (curTab.label === item.label) {
|
||||
paneDom.style.display = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
const activeTab = networkOverviewTabList[0].label
|
||||
const activeCustomize = ref('tabs')
|
||||
return {
|
||||
activeTab,
|
||||
activeCustomize,
|
||||
networkOverviewTabs
|
||||
}
|
||||
},
|
||||
destroyed () {
|
||||
this.$store.commit('setNetworkOverviewTabList', this.list)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user