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

CN-700 界面刷新保持状态-下钻table等

Browse Source
This commit is contained in:
hanyuxia
2022-09-16 17:46:20 +08:00
parent ddc47208e1
commit 7967f9a764
11 changed files with 633 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -124,6 +124,9 @@
.el-tabs__content {
height: 100% !important;
}
.el-tabs__header {
display:none;
}
}
.tab-search {
position:absolute;

23
src/components/layout/Header.vue
View File

@@ -180,9 +180,10 @@
<script>
import { useRoute } from 'vue-router'
import { get, put } from '@/utils/http'
import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl } from '@/utils/constants'
import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl, curTabState } from '@/utils/constants'
import { api } from '@/utils/api'
import { ref } from 'vue'
import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
import { getNowTime, getSecond } from '@/utils/date-util'
export default {
@@ -229,7 +230,8 @@ export default {
path: '/detection/performanceEvent'
}
],
curPageNum: 1
curPageNum: 1,
curTabState: curTabState
}
},
computed: {
@@ -432,6 +434,13 @@ export default {
}
})
},
changeTabState (param, value) {
const { query } = this.$route
const newQuery = {}
newQuery[param] = value
const newUrl = urlParamsHandler(window.location.href, query, newQuery)
overwriteUrl(newUrl)
},
jump (route, columnName, columnValue, opeType) {
this.showMenu = false
if (opeType) {
@@ -465,7 +474,7 @@ export default {
this.$store.commit('setPanelName', columnName)
const tabList = this.$store.getters.getNetworkOverviewTabList
const curTab = tabList.filter(item => this.$t(item.label) === columnName)[0]
this.$store.commit('setNetworkOverviewCurrentTab', curTab)
this.changeTabState(this.curTabState.curTab, curTab)
this.$store.commit('setDimensionType', curTab ? curTab.prop : '')
this.$store.commit('setQueryCondition', '')
this.$store.commit('setNetworkOverviewBeforeTab', null)
@@ -476,8 +485,8 @@ export default {
this.$store.commit('setBreadcrumbColumnName', '')
this.$store.commit('setDimensionType', '')
this.$store.commit('setPanelName', '')
this.$store.commit('setBreadcrumbColumnValueList', [])
this.$store.commit('setNetworkOverviewCurrentTab', null)
// this.$store.commit('setBreadcrumbColumnValueList', [])
this.changeTabState(this.curTabState.curTab, null)
this.$store.commit('setQueryCondition', '')
this.$store.commit('setNetworkOverviewBeforeTab', null)
}
@@ -488,11 +497,11 @@ export default {
// console.log(this.$store.getters.getDimensionType)
if (opeType === 3) {
this.$router.push({
params: { ...this.$route.params, fourthPanel: '' }
query: { ...this.$route.query, fourthPanel: '' }
})
} else if (opeType != 4) {
this.$router.push({
params: { ...this.$route.params, fourthPanel: '', thirdPanel: '' }
query: { ...this.$route.query, fourthPanel: '', thirdPanel: '' }
})
}
if (route === this.route) {

22
src/store/modules/panel.js
View File

@@ -25,7 +25,6 @@ const panel = {
panelName、
breadcrumbColumnName、
breadcrumbColumnValue、
breadcrumbColumnValueList、
networkOverviewCurrentTab、
queryCondition
点击顶部第二级菜单：与点击菜单相同
@@ -42,8 +41,7 @@ const panel = {
breadcrumbColumnName: '', // 点击tab里的value，都会修改此值,为面包屑的菜单
dimensionType: '', // 维度
breadcrumbColumnValue: '', // 点击tab里的value，都会修改此值,为面包屑的菜单
breadcrumbColumnValueList: [], // 第四级面包屑的下拉列表
networkOverviewCurrentTab: null, // 只代表选中的tab，有时会与面包屑中显示的值不同
// networkOverviewCurrentTab: null, // 只代表选中的tab，有时会与面包屑中显示的值不同
networkOverviewBeforeTab: null, // 点击表格的值时使用，记录点击当前tab表格的值之前点击的表格值所属的tab
queryCondition: '', // 数据查询的条件
networkOverviewTabList: [], // 存储tab列表的一些状态：如是否选中
@@ -114,12 +112,9 @@ const panel = {
setBreadcrumbColumnValue (state, breadcrumbColumnValue) {
state.breadcrumbColumnValue = breadcrumbColumnValue
},
setBreadcrumbColumnValueList (state, breadcrumbColumnValueList) {
state.breadcrumbColumnValueList = breadcrumbColumnValueList
},
setNetworkOverviewCurrentTab (state, networkOverviewCurrentTab) {
state.networkOverviewCurrentTab = networkOverviewCurrentTab
},
// setNetworkOverviewCurrentTab (state, networkOverviewCurrentTab) {
// state.networkOverviewCurrentTab = networkOverviewCurrentTab
// },
setQueryCondition (state, queryCondition) {
state.queryCondition = queryCondition
},
@@ -200,12 +195,9 @@ const panel = {
getBreadcrumbColumnValue (state) {
return state.breadcrumbColumnValue
},
getBreadcrumbColumnValueList (state) {
return state.breadcrumbColumnValueList
},
getNetworkOverviewCurrentTab (state) {
return state.networkOverviewCurrentTab
},
// getNetworkOverviewCurrentTab (state) {
// return state.networkOverviewCurrentTab
// },
getQueryCondition (state) {
return state.queryCondition
},

9
src/utils/constants.js
View File

@@ -238,6 +238,15 @@ export const cycle = {
pre: 1
}
export const curTabState = {
curTab: 'curTab',
tableMetric: 'tableMetric',
tableShowMore: 'tableShowMore',
tableSortColumn: 'tableSortColumn',
tableSortType: 'tableSortType',
tableSortTab: 'tableSortTab'
}
export const scoreUrl = [
'/interface/application/performance/overview/drilldown/dimensionTcpSessionDelay',
'/interface/application/performance/overview/drilldown/dimensionSslConDelay',

9
src/utils/tools.js
View File

@@ -837,6 +837,15 @@ export function computeScore (data, index) {
return score * k
}
// 改变tab状态(url中)：当前tab，
export function changeTabState (param, value) {
const query = router.query
query[param] = JSON.stringify(value)
router.push({
query: query
})
}
// cleanOldParams: true|false，是否清除oldParams
export function urlParamsHandler (url, oldParams, newParams, cleanOldParams) {
let newUrl = url.split('?')[0]

3
src/views/charts2/Chart.vue
View File

@@ -20,11 +20,10 @@
:time-filter="timeFilter"
@toggleLoading="toggleLoading"
></network-overview-performance-event>
<network-overview-tabs @getChartData="getChartData"
<network-overview-tabs
v-else-if="chart.type === typeMapping.networkOverview.table"
:time-filter="timeFilter"
:chart="chart"
:chartData="chartData"
:ref="`tab${chart.id}`"
@toggleLoading="toggleLoading"
></network-overview-tabs>

4
src/views/charts2/Panel.vue
View File

@@ -148,8 +148,8 @@ export default {
const panel = ref({})
let panelType = 1 // 取得panel的type
const { params, query } = useRoute()
const thirdPanel = params.thirdPanel
const fourthPanel = params.fourthPanel
const thirdPanel = query.thirdPanel
const fourthPanel = query.fourthPanel
if (fourthPanel) {
panelType = Number(fourthPanel)
} else if (thirdPanel) {

21
src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
View File

@@ -118,7 +118,7 @@
<script>
import unitConvert from '@/utils/unit-convert'
import { storageKey, unitTypes, networkTable, operationType } from '@/utils/constants'
import { storageKey, unitTypes, networkTable, operationType, curTabState } from '@/utils/constants'
import * as echarts from 'echarts'
import { appListChartOption } from '@/views/charts2/charts/options/echartOption'
import { ref, shallowRef } from 'vue'
@@ -126,7 +126,7 @@ import { get, put } from '@/utils/http'
import { api } from '@/utils/api'
import _ from 'lodash'
import { getSecond } from '@/utils/date-util'
import {getChainRatio, overwriteUrl, urlParamsHandler} from '@/utils/tools'
import { getChainRatio, overwriteUrl, urlParamsHandler } from '@/utils/tools'
import loading from '@/components/common/Loading'
import ChartNoData from '@/views/charts/charts/ChartNoData'
import { appStackedLineTooltipFormatter } from '@/views/charts/charts/tools'
@@ -180,7 +180,8 @@ export default {
offset: 0,
flag: false,
timerSearch: null,
loadingBody: false
loadingBody: false,
curTabState: curTabState
}
},
setup () {
@@ -370,16 +371,26 @@ export default {
const tabObjGroup = list.filter(item => item.checked)
if (tabObjGroup && tabObjGroup.length > 0) {
const curTab = tabObjGroup[0]
this.$store.commit('setNetworkOverviewCurrentTab', curTab)
this.changeTabState(this.curTabState.curTab, curTab)
}
this.$router.push({
params: {
query: {
...this.$route.query,
thirdPanel: curTable.panelIdOfThirdMenu ? curTable.panelIdOfThirdMenu : '',
fourthPanel: toPanel || ''
}
})
}
},
changeTabState (param, value) {
const query = {
...this.$route.query
}
query[param] = value
this.$router.push({
query: query
})
},
initChart (obj) {
let chart = this.myChart.find(m => m.name === obj.name && m.type === obj.type)
if (!chart) {

957
src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
View File

File diff suppressed because it is too large Load Diff

28
src/views/charts2/charts/npm/NpmAppCategoryScore.vue
View File

@@ -21,7 +21,7 @@
:data="tableData"
class="app-table"
height="100%"
empty-text=""
empty-text=" "
>
<template v-for="(item, index) in customTableTitles" :key="index">
<el-table-column class="data-column">
@@ -107,14 +107,14 @@
</template>
<script>
import { unitTypes, npmCategoryInfoMapping, networkTable, operationType, npmCategoryToAppCategoryMap } from '@/utils/constants'
import { unitTypes, npmCategoryInfoMapping, networkTable, operationType, npmCategoryToAppCategoryMap, curTabState } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util'
import { get } from '@/utils/http'
import { getChainRatio, computeScore } from '@/utils/tools'
import { getChainRatio, computeScore, changeCurTab } from '@/utils/tools'
import chartMixin from '@/views/charts2/chart-mixin'
import ChartNoData from "@/views/charts/charts/ChartNoData";
import ChartNoData from '@/views/charts/charts/ChartNoData'
export default {
name: 'NpmAppCategoryScore',
data () {
@@ -138,7 +138,8 @@ export default {
{ label: 'network.outbound', prop: 'outbound' },
{ label: 'network.inbound', prop: 'inbound' }
],
isNoData: false
isNoData: false,
curTabState: curTabState
}
},
components: {
@@ -233,7 +234,8 @@ export default {
const value = npmCategoryToAppCategoryMap[key]
const tabType = 'network.applicationCategories'
const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
const curTable = networkTable.networkOverview
// const curTable = networkTable.networkOverview
const curTable = networkTable.networkAppPerformance
const list = this.$store.getters.getNetworkOverviewTabList
const tabGroup = list.filter(item => item.label === tabType)
if (tabGroup && tabGroup.length > 0) {
@@ -286,14 +288,24 @@ export default {
const tabObjGroup = list.filter(item => item.checked)
if (tabObjGroup && tabObjGroup.length > 0) {
const curTab = tabObjGroup[0]
this.$store.commit('setNetworkOverviewCurrentTab', curTab)
this.changeTabState(this.curTabState.curTab, curTab)
}
this.$router.push({
params: {
query: {
...this.$route.query,
thirdPanel: curTable.panelIdOfThirdMenu ? curTable.panelIdOfThirdMenu : '',
fourthPanel: toPanel || ''
}
})
},
changeTabState (param, value) {
const query = {
...this.$route.query
}
query[param] = value
this.$router.push({
query: query
})
}
},
mounted () {

32
src/views/charts2/charts/npm/NpmTabs.vue
View File

@@ -77,6 +77,7 @@ export default {
},
mounted () {
if (this.chart.panelId === drillDownPanelTypeMapping.npmOverviewIp) {
const self = this
// 当client或server的session数为0时，对应tab置灰，不可选，默认高亮另一个不为0的tab
const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
const params = {
@@ -86,28 +87,35 @@ export default {
}
get(api.npm.overview.relatedSessions, params).then(res => {
if (res.code === 200) {
this.sessionData = res.data.result
this.clientSessions = this.sessionData.clientSessions / (this.sessionData.clientSessions * 1 + this.sessionData.serverSessions * 1)
this.serverSessions = this.sessionData.serverSessions / (this.sessionData.clientSessions * 1 + this.sessionData.serverSessions * 1)
self.sessionData = res.data.result
self.clientSessions = self.sessionData.clientSessions / (self.sessionData.clientSessions * 1 + self.sessionData.serverSessions * 1)
self.serverSessions = self.sessionData.serverSessions / (self.sessionData.clientSessions * 1 + self.sessionData.serverSessions * 1)
}
}).finally(() => {
if (this.clientSessions === 0) {
this.currentTab = 1
this.tabs[0].disable = true
this.tabs[1].disable = false
if (self.clientSessions === 0) {
self.currentTab = 1
self.tabs[0].disable = true
self.tabs[1].disable = false
const tabEle = document.getElementById('tab-0')
tabEle.style.cssText = 'cursor: not-allowed;'
} else if (this.serverSessions === 0) {
this.tabs[0].disable = false
this.tabs[1].disable = true
setTimeout(() => {
self.handleActiveBar(1)
}, 400)
} else if (self.serverSessions === 0) {
self.currentTab = 0
self.tabs[0].disable = false
self.tabs[1].disable = true
setTimeout(() => {
const tabEle = document.getElementById('tab-1')
tabEle.style.cssText = 'cursor: not-allowed;'
this.handleActiveBar(0)
self.handleActiveBar(0)
}, 400)
} else {
self.currentTab = 0
self.tabs[0].disable = false
self.tabs[1].disable = false
setTimeout(() => {
this.handleActiveBar(0)
self.handleActiveBar(0)
}, 400)
}
})