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

Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev

Browse Source
This commit is contained in:
@changcode
2022-08-24 09:40:12 +08:00
parent 40b319e0a3 1968baa056
commit fe7e9885f8
19 changed files with 790 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/assets/css/components/views/charts2/panel.scss
View File

@@ -12,6 +12,39 @@
line-height: 24px;
font-weight: 900;
color: #353636;
display:flex;
.score {
.circle-icon {
border-radius: 3px;
width: 6px;
height: 6px;
margin-left: 10px;
margin-right: 4px;
}
.data-score-red {
background: #E26154;
}
.data-score-yellow {
background: #E5A219;
}
.data-score-green {
background: #749F4D;
}
height:24px;
font-family: NotoSansHans-Medium;
font-size: 12px;
color: #353636;
font-weight: 500;
margin-left:8px;
padding-right:13px;
background: #F7F7F7;
border: 1px solid #E2E5EC;
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 4px;
display:flex;
align-items: center;
justify-content: center;
}
}
.panel__time {
display: flex;

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

@@ -149,7 +149,7 @@
<script>
import { useRoute } from 'vue-router'
import { get, put } from '@/utils/http'
import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl,drillDownPanelTypeMapping } from '@/utils/constants'
import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl, drillDownPanelTypeMapping } from '@/utils/constants'
import { api } from '@/utils/api'
import { ref } from 'vue'
import { getNowTime, getSecond } from '@/utils/date-util'
@@ -401,7 +401,7 @@ export default {
this.$store.commit('setBreadcrumbColumnValue', columnValue)
this.$store.commit('setBreadcrumbColumnName', columnName)
const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
let type = tabObjGroup&&tabObjGroup[0]?tabObjGroup[0].prop:''
const type = tabObjGroup && tabObjGroup[0] ? tabObjGroup[0].prop : ''
this.$store.commit('setDimensionType', type)
this.$store.commit('setPanelName', columnValue)
} else if (columnName) { // 点击的为列名
@@ -413,7 +413,7 @@ export default {
const tabList = this.$store.getters.getNetworkOverviewTabList
const curTab = tabList.filter(item => this.$t(item.label) === columnName)[0]
this.$store.commit('setNetworkOverviewCurrentTab', curTab)
this.$store.commit('setDimensionType', curTab?curTab.prop:'')
this.$store.commit('setDimensionType', curTab ? curTab.prop : '')
this.$store.commit('setQueryCondition', '')
this.$store.commit('setNetworkOverviewBeforeTab', null)
} else {
@@ -432,14 +432,14 @@ export default {
})
}
})
//console.log(this.$store.getters.getDimensionType)
if(opeType===3){
// console.log(this.$store.getters.getDimensionType)
if (opeType === 3) {
this.$router.push({
params:{...this.$route.params,fourthPanel:''}
params: { ...this.$route.params, fourthPanel: '' }
})
}else if(opeType!=4){
} else if (opeType != 4) {
this.$router.push({
params:{...this.$route.params,fourthPanel:'',thirdPanel:''}
params: { ...this.$route.params, fourthPanel: '', thirdPanel: '' }
})
}

2
src/router/index.js
View File

@@ -15,7 +15,7 @@ const routes = [
component: () => import('@/components/layout/Home'),
children: [
{
name:'panel',
name: 'panel',
path: '/panel/:typeName',
component: () => import('@/views/charts2/Panel')
},

9
src/utils/api.js
View File

@@ -162,7 +162,14 @@ export const api = {
// 各维度下钻会话统计
relatedSessions: '/interface/application/performance/relatedSessions',
// 各维度下钻流量曲线图
trafficGraph: '/interface/application/performance/overview/drilldown/drilldown/dimension/trafficGraph'
trafficGraph: '/interface/application/performance/overview/drilldown/drilldown/dimension/trafficGraph',
// 下钻地图
map: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/trafficAnalysis',
mapTcp: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/tcpSessionDelay',
mapHttp: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/httpResponseDelay',
mapSsl: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/sslConDelay',
mapPacketLoss: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/tcpSessionDelay',
mapPacketRetrans: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/tcpSessionDelay'
},
location: {
// 折线图

310
src/utils/constants.js
View File

File diff suppressed because one or more lines are too long

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

@@ -231,10 +231,6 @@ export default {
get(requestUrl, this.queryParams).then(response => {
if (response.code === 200) {
this.chartData = response.data.result
} else {
if (this.chart.type === 601) {
this.$refs['tab' + this.chart.id].loading = false
}
}
})
}

6
src/views/charts2/ChartList.vue
View File

@@ -36,7 +36,7 @@
import VueGridLayout from 'vue-grid-layout'
import _ from 'lodash'
import Chart from '@/views/charts2/Chart'
import { panelTypeAndRouteMapping, storageKey,drillDownPanelTypeMapping } from '@/utils/constants'
import { panelTypeAndRouteMapping, storageKey, drillDownPanelTypeMapping } from '@/utils/constants'
import { typeMapping } from '@/views/charts2/chart-tools'
export default {
name: 'ChartList',
@@ -66,7 +66,7 @@ export default {
if (!_.isEmpty(n)) {
if (this.panelType === panelTypeAndRouteMapping.networkAppPerformance) {
this.layout = n.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex)
}else if(Object.values(drillDownPanelTypeMapping).indexOf(this.panelType)>=-1){
} else if (Object.values(drillDownPanelTypeMapping).indexOf(this.panelType) >= -1) {
this.layout = n.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex || !c.params.hasOwnProperty('tabIndex'))
} else {
this.layout = [...n]
@@ -86,7 +86,7 @@ export default {
},
npmTabIndex (n) {
if (this.panelType === panelTypeAndRouteMapping.networkAppPerformance ||
Object.values(drillDownPanelTypeMapping).indexOf(this.panelType)>=-1) {
Object.values(drillDownPanelTypeMapping).indexOf(this.panelType) >= -1) {
this.layout = this.chartList.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex || !c.params.hasOwnProperty('tabIndex'))
}
}

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

@@ -1,7 +1,14 @@
<template>
<div class="panel-box">
<div class="panel__header">
<div class="panel__title">{{panelName?panelName:(panel.i18n ? $t(panel.i18n) : panel.name)}}</div>
<div class="panel__title">{{panelName?panelName:(panel.i18n ? $t(panel.i18n) : panel.name)}}
<div v-if="score" class="score">
<div class="circle-icon" v-if="score <= 2" :class="{'data-score-red': score <= 2}" ></div>
<div class="circle-icon" v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div>
<div class="circle-icon" v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div>
Score:{{score}}
</div>
</div>
<div class="panel__time">
<date-time-range
class="date-time-range"
@@ -31,13 +38,15 @@
</template>
<script>
import {useRoute, useRouter} from 'vue-router'
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
import { panelTypeAndRouteMapping } from '@/utils/constants'
import { panelTypeAndRouteMapping, bytesColumnNameGroupForNpm, scoreUrl, customTableTitlesForAppPerformance } from '@/utils/constants'
import { getPanelList, getChartList } from '@/utils/api'
import { getNowTime } from '@/utils/date-util'
import { getNowTime, getSecond } from '@/utils/date-util'
import { getTypeCategory } from '@/views/charts/charts/tools'
import { computeScore } from '@/utils/tools'
import ChartList from '@/views/charts2/ChartList'
import { get } from '@/utils/http'
export default {
name: 'Panel',
@@ -53,11 +62,58 @@ export default {
chartList: [], // 普通panel的chart
panelLock: true,
extraParams: {},
panelName: ''
panelName: '',
score: null
}
},
async mounted () {
this.panelName = this.$store.getters.getPanelName
if (this.panelName && this.$route.path === '/panel/networkAppPerformance') {
// let columnName = this.$store.getters.getBreadcrumbColumnName
const columnValue = this.$store.getters.getBreadcrumbColumnValue
const queryParams = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
type: this.$store.getters.getDimensionType,
params: columnValue || ''
}
const requestGroup = []
scoreUrl.forEach(url => {
if (url) {
const request = get(url, queryParams, true)
requestGroup.push(request)
}
})
const scoreGroup = []
let score = 0
Promise.all(requestGroup).then(res => {
res.forEach(t => {
if (t.code === 200) {
const data = t.data.result ? t.data.result[0] : null
if (data) {
customTableTitlesForAppPerformance.forEach(item => {
if (data[bytesColumnNameGroupForNpm[item.prop]]) {
score = computeScore(data, item.scoreType)
scoreGroup.push(score)
} else {
scoreGroup.push(0)
}
})
}
}
})
}).finally(() => {
scoreGroup.forEach(i => {
score = Number(score) + Number(i)
})
score = Math.ceil(score * 6)
if (score > 6) {
score = 6
}
this.score = score || 0
})
}
await this.init()
const vm = this
this.emitter.on('reloadChartList', async function () {
@@ -74,14 +130,14 @@ export default {
const panel = ref({})
let panelType = 1 // 取得panel的type
const { params } = useRoute()
let router = useRouter()
let thirdPanel = router.currentRoute.value.params.thirdPanel
let fourthPanel = router.currentRoute.value.params.fourthPanel
if(fourthPanel){
const router = useRouter()
const thirdPanel = router.currentRoute.value.params.thirdPanel
const fourthPanel = router.currentRoute.value.params.fourthPanel
if (fourthPanel) {
panelType = Number(fourthPanel)
}else if(thirdPanel){
} else if (thirdPanel) {
panelType = Number(thirdPanel)
}else {
} else {
panelType = props.entity ? props.entity.type : panelTypeAndRouteMapping[params.typeName]
}
@@ -131,11 +187,17 @@ export default {
})
}
},
timeRefreshChange (startTime, endTime, dateRangeValue) {
reload (startTime, endTime, dateRangeValue) {
this.timeFilter = { startTime: startTime, endTime: endTime, dateRangeValue: dateRangeValue }
},
reload () {
timeRefreshChange () {
// 不是自选时间
if (!this.$refs.dateTimeRange.isCustom) {
const value = this.timeFilter.dateRangeValue
this.$refs.dateTimeRange.quickChange(value)
} else {
this.timeFilter = JSON.parse(JSON.stringify(this.timeFilter))
}
}
}
}

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

@@ -118,19 +118,20 @@
<script>
import unitConvert from '@/utils/unit-convert'
import { storageKey, unitTypes } from '@/utils/constants'
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 {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 { getChainRatio } from '@/utils/tools'
import {getSecond} from '@/utils/date-util'
import {getChainRatio} from '@/utils/tools'
import loading from '@/components/common/Loading'
import ChartNoData from '@/views/charts/charts/ChartNoData'
import { appStackedLineTooltipFormatter } from '@/views/charts/charts/tools'
import {appStackedLineTooltipFormatter} from '@/views/charts/charts/tools'
import chartMixin from '@/views/charts2/chart-mixin'
export default {
name: 'NetworkOverviewApps',
components: {
@@ -198,6 +199,12 @@ export default {
window.removeEventListener('scroll', this.handleScroll, true)
}
}
},
timeFilter: {
deep: true,
handler (n) {
this.init()
}
}
},
methods: {
@@ -320,8 +327,7 @@ export default {
params.forEach(t => {
t.seriesName = this.$t(t.seriesName)
})
const str = appStackedLineTooltipFormatter(params)
return str
return appStackedLineTooltipFormatter(params)
}
chart.setOption(chartOption)
this.myChart.push(chart)

8
src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
View File

@@ -40,6 +40,14 @@ export default {
isNoData: false
}
},
watch: {
timeFilter: {
deep: true,
handler (n) {
this.ddosDetectDataRequests()
}
}
},
methods: {
ddosDetectDataRequests () {
const params = {

6
src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
View File

@@ -147,6 +147,12 @@ export default {
this.$nextTick(() => {
this.handleActiveBar(n)
})
},
timeFilter: {
deep: true,
handler (n) {
this.init(this.echartsType, this.showMarkLine, 'active')
}
}
},
methods: {

6
src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
View File

@@ -140,6 +140,12 @@ export default {
watch: {
loading (n) {
this.toggleLoading(n)
},
timeFilter: {
deep: true,
handler (n) {
this.init()
}
}
},
mounted () {

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

@@ -37,17 +37,21 @@
<template #default="scope" :column="item">
<template v-if="item.columnType === tableColumnType.chainRatio" >
<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>
{{scope.row[item.prop]?((scope.row[item.prop][0]||scope.row[item.prop][0]===0)? unitConvert(scope.row[item.prop][0], unitTypes.number).join(' ') : '-'):'' }}
<template v-if="scope.row[item.prop]">
<div v-if="scope.row[item.prop][1] === 'up'" class="data-total-trend data-total-trend-red">
<i class="cn-icon-rise1 cn-icon"></i><span>{{scope.row[item.prop][2]}}</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 v-else-if="scope.row[item.prop][1] === 'down'" class="data-total-trend data-total-trend-green">
<i class="cn-icon-decline cn-icon"></i><span>{{scope.row[item.prop][2]}}</span>
</div>
<div v-else-if="scope.row['trend'] === 'noChange'" class="data-total-trend data-total-trend-black">
<div v-else-if="scope.row[item.prop][1] === 'noChange'" class="data-total-trend data-total-trend-black">
<i class="cn-icon-constant cn-icon"></i>
</div>
</template>
<template v-else>
-
</template>
</div>
</template>
<template v-else-if="item.columnType === tableColumnType.dillDown" >
@@ -145,10 +149,11 @@
</template>
<script>
import { ref } from 'vue'
import {operationType, unitTypes,networkTable,tableColumnType } from '@/utils/constants'
import { operationType, unitTypes, networkTable, tableColumnType, cycle } from '@/utils/constants'
import { get } from '@/utils/http'
import unitConvert from '@/utils/unit-convert'
import { getChainRatio } from '@/utils/tools'
import { getChainRatio, computeScore } from '@/utils/tools'
import { getSecond } from '@/utils/date-util'
import chartMixin from '@/views/charts2/chart-mixin'
export default {
@@ -177,28 +182,22 @@ export default {
}
],
customTableTitles: [],
list: [],//当前状态列表
networkTabList: [],//原始状态列表
list: [], // 当前状态列表
networkTabList: [], // 原始状态列表
showBackground: false,
tableData: [],
showTabs: true,
columnNameGroup: {
total: 'bytesTotal',
inbound: 'inboundBitsRate',
outbound: 'outboundBitsRate',
internal: 'internalBitsRate',
through: 'throughBitsRate'
},
columnNameGroup: {},
cycleColumnNameGroup: {},
metricUnit: 'bytes',
loading: false,
drillDown: false,
tableColumnType:tableColumnType,
curTable:{},//当前的表格类型
tableType:'',
hasMetricSearch:true,
activeTab:'',
activeCustomize:'',
networkSearchUrl:{}
tableColumnType: tableColumnType,
curTable: {}, // 当前的表格类型
tableType: '',
hasMetricSearch: true,
activeTab: '',
activeCustomize: '',
networkSearchUrl: {}
}
},
props: {
@@ -231,15 +230,16 @@ export default {
const label = curTab.label
if (this.metric === 'Bits/s') {
this.columnNameGroup = this.curTable.bytesColumnNameGroup
this.cycleColumnNameGroup = this.curTable.bytesCycleColumnNameGroup
this.orderBy = 'bytesTotal'
this.metricUnit = 'bytes'
const titleGroup = []
if (this.customTableTitles.length === 2) {
this.curTable.column.forEach((item,index) => {
this.curTable.column.forEach((item, index) => {
if (item.tabColumn) {
item.label = label
}
if(index===1){
if (index === 1) {
item.checked = this.customTableTitles[1].checked
}
titleGroup.push(item)
@@ -253,18 +253,18 @@ export default {
})
}
this.customTableTitles = titleGroup
} else if (this.metric === 'Packets/s') {
this.columnNameGroup = this.curTable.packetsColumnNameGroup
this.cycleColumnNameGroup = this.curTable.packetsCycleColumnNameGroup
this.orderBy = 'packetsTotal'
this.metricUnit = 'packets'
const titleGroup = []
if (this.customTableTitles.length === 2) {
this.curTable.column.forEach((item,index) => {
this.curTable.column.forEach((item, index) => {
if (item.tabColumn) {
item.label = label
}
if(index===1){
if (index === 1) {
item.checked = this.customTableTitles[1].checked
}
titleGroup.push(item)
@@ -280,6 +280,7 @@ export default {
this.customTableTitles = titleGroup
} else if (this.metric === 'Sessions/s') {
this.columnNameGroup = this.curTable.sessionsColumnNameGroup
this.cycleColumnNameGroup = this.curTable.sessionsCycleColumnNameGroup
this.orderBy = 'sessions'
this.metricUnit = 'sessions'
let totalChecked = true
@@ -288,9 +289,10 @@ export default {
totalChecked = item.checked
}
})
const totalColumn = this.customTableTitles.filter(item => item.prop === 'total')
this.customTableTitles = [
{ label: label, prop: 'tab', checked: true, tabColumn: true,columnType:this.curTable.column[0].columnType},
{ label: 'network.total', prop: 'total', checked: totalChecked, tabColumn: false,columnType:this.curTable.column[1].columnType}
{ label: label, prop: 'tab', checked: true, tabColumn: true, columnType: this.curTable.column[0].columnType },
{ label: 'network.total', prop: 'total', checked: totalChecked, tabColumn: false, columnType: this.curTable.column[1].columnType, cycleDataUrl: totalColumn ? totalColumn.cycleDataUrl : '', isInMainUrl: true }
]
}
let queryParams = {
@@ -367,7 +369,8 @@ export default {
this.$store.commit('setNetworkOverviewCurrentTab', curTab)
}
this.showTabs = true
} else if (curOperationType === operationType.secondMenu) { // 点击的为第二级菜单、或者点击菜单进入、
} else if (curOperationType === operationType.secondMenu || curOperationType === operationType.mainMenu) { // 点击的为第二级菜单、或者点击菜单进入、
this.list = this.$_.cloneDeep(this.curTable.tabList)
if (curTab) { // tab切换
this.activeTab = curTab.label
this.customTableTitles[0].label = curTab.label
@@ -428,20 +431,19 @@ export default {
}
}
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 otherData = { tab: item[curTab.prop] }
Object.keys(this.columnNameGroup).forEach(i => {
otherData[i] = item[this.columnNameGroup[i]]
})
const queryParams = {}
return otherData
})
const queryParams = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime)
}
if (tabList.length > 0) {
const conditionStr = tabList.filter(item => item != '')
queryParams.params = conditionStr.toString()
@@ -454,22 +456,28 @@ export default {
if (condition) {
queryParams.q = condition
}
get(this.gerCycleUrl(), queryParams).then(response => {
const self = this
this.customTableTitles.forEach(tableColumn => {
if (tableColumn.columnType === tableColumnType.chainRatio && tableColumn.isInMainUrl) {
get(self.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 = ''//空：无图标；up：向上的图标；down：向下的图标；noChange：横向箭头图标
let trend = ''// 空：无图标；up：向上的图标；down：向下的图标；noChange：横向箭头图标
let trendPercent = ''
if (cycle) {
const totalDiff = item.total - cycle[this.metricUnit]
if (cycle[this.metricUnit] && cycle[this.metricUnit]!=0) {
let chainRatio = getChainRatio(item.total, cycle[this.metricUnit])
const curVal = Number(item[tableColumn.prop])
const preVal = Number(cycle[self.cycleColumnNameGroup[tableColumn.prop]])
if (preVal && preVal != 0) {
const totalDiff = curVal - preVal
const chainRatio = getChainRatio(curVal, preVal)
if (chainRatio === '-') {
trend = ''
trendPercent = ''
}else {
trendPercent = Math.round(Math.abs(chainRatio)* 100)
} else {
trendPercent = Math.round(Math.abs(chainRatio) * 100)
if (totalDiff > 0) {
trend = 'up'
trendPercent = trendPercent + '%'
@@ -477,7 +485,7 @@ export default {
trend = 'down'
trendPercent = trendPercent + '%'
} else {
trend = 'noChange'//横向图标
trend = 'noChange'// 横向图标
}
if (trendPercent === '0%') {
trend = 'noChange'
@@ -486,28 +494,105 @@ export default {
}
}
}
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
item[tableColumn.prop] = [item[tableColumn.prop], trend, trendPercent]
})
})
this.toggleLoading(false)
} else {
this.tableData = tableDataTmp
this.toggleLoading(false)
}
}).catch(e => {
this.toggleLoading(false)
console.log(e)
}).finally(e => {
this.toggleLoading(false)
this.tableData = tableDataTmp
// 查询需要单独查询的，且需要展示环比图标，列的当前周期的数据
this.customTableTitles.forEach(tableColumn => {
if (tableColumn.columnType === tableColumnType.chainRatio && !tableColumn.isInMainUrl) {
get(self.gerColumnUrl(tableColumn), queryParams).then(response => {
if (response.code === 200) {
const columnList = response.data.result
self.tableData.forEach((item, i) => {
const data = columnList.find(i => i[curTab.prop] === item.tab)
if (data) {
item[tableColumn.prop] = data[self.columnNameGroup[tableColumn.prop]]
let score = 0
if (data) {
score = computeScore(data, tableColumn.scoreType)
}
item.scoreGroup = item.scoreGroup ? [...item.scoreGroup, score] : [score]
if (item && item.scoreGroup && item.scoreGroup.length >= 5) {
// self.tableData.forEach(data => {
let score = 0
item.scoreGroup.forEach(i => {
score = Number(score) + Number(i)
})
score = Math.ceil(score * 6)
if (score > 6) {
score = 6
}
item.score = score || 0
}
}
})
}
}).catch(e => {
console.log(e)
self.toggleLoading(false)
}).finally(e => {
// 查询需要单独查询的，且需要展示环比图标，列的前一周期的数据
if (tableColumn.cycle) {
const queryCycleParams = {
...queryParams,
cycle: tableColumn.cycle
}
get(self.gerColumnUrl(tableColumn), queryCycleParams).then(response => {
if (response.code === 200) {
cycleTotalList = response.data.result
self.tableData.forEach(item => {
const cycle = cycleTotalList.find(i => i[curTab.prop] === item.tab)
let trend = ''// 空：无图标；up：向上的图标；down：向下的图标；noChange：横向箭头图标
let trendPercent = ''
if (cycle) {
const curVal = Number(item[tableColumn.prop])
// let preVal = Number(cycle[self.metricUnit])
const preVal = Number(cycle[self.columnNameGroup[tableColumn.prop]])
if (preVal && preVal != 0) {
const totalDiff = curVal - preVal
const chainRatio = getChainRatio(curVal, preVal)
if (chainRatio === '-') {
trend = ''
trendPercent = ''
} else {
trendPercent = Math.round(Math.abs(chainRatio) * 100)
if (totalDiff > 0) {
trend = 'up'
trendPercent = trendPercent + '%'
} else if (totalDiff < 0) {
trend = 'down'
trendPercent = trendPercent + '%'
} else {
trend = 'noChange'// 横向图标
}
if (trendPercent === '0%') {
trend = 'noChange'
trendPercent = ''
}
}
}
}
item[tableColumn.prop] = [item[tableColumn.prop] ? item[tableColumn.prop] : '', trend, trendPercent]
})
}
}).catch(e => {
console.log(e)
})
}
self.toggleLoading(false)
})
}
})
self.toggleLoading(false)
})
}
})
self.toggleLoading(false)
},
tabChange (index) {
const beforeType = this.$store.getters.getTabOperationBeforeType
@@ -582,7 +667,7 @@ export default {
menu.columnValue = columnValue
this.$store.commit('setPanelName', columnValue)
this.$store.commit('setBreadcrumbColumnName', columnName)
this.$store.commit('setDimensionType', tabGroup[0]?tabGroup[0].prop:'')
this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
this.$store.commit('setBreadcrumbColumnValue', columnValue)
}
} else if (!this.$_.isEmpty(menu.children)) {
@@ -592,13 +677,12 @@ export default {
child.columnValue = columnValue
this.$store.commit('setPanelName', columnValue)
this.$store.commit('setBreadcrumbColumnName', columnName)
this.$store.commit('setDimensionType', tabGroup[0]?tabGroup[0].prop:'')
this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
this.$store.commit('setBreadcrumbColumnValue', columnValue)
}
})
}
})
console.log(this.$store.getters.getDimensionType)
let toPanel = null
this.list.forEach((item, index) => {
if (item.label === columnName) {
@@ -627,14 +711,14 @@ export default {
})
this.$store.commit('setBreadcrumbColumnValueList', valueList)
this.$router.push({
name:'panel',
name: 'panel',
path: this.$route.path,
query: {
t: +new Date()
},
params:{
thirdPanel:this.curTable.panelIdOfThirdMenu,
fourthPanel:toPanel
params: {
thirdPanel: this.curTable.panelIdOfThirdMenu,
fourthPanel: toPanel
}
})
},
@@ -717,6 +801,22 @@ export default {
return this.networkSearchUrl.curUrl
}
},
gerCycleUrl () {
const condition = this.$store.getters.getQueryCondition
if (condition) {
return this.networkSearchUrl.drilldownCycleUrl
} else {
return this.networkSearchUrl.cycleUrl
}
},
gerColumnUrl (tableColumn) {
const condition = this.$store.getters.getQueryCondition
if (condition) {
return tableColumn.dillDownCycleDataUrl
} else {
return tableColumn.cycleDataUrl
}
},
handleQueryParams (extraParams) {
let queryType = ''
const name = this.$store.getters.getBreadcrumbColumnName
@@ -768,9 +868,10 @@ export default {
this.customTableTitles[0].label = curTab.label
this.$store.commit('setNetworkOverviewCurrentTab', curTab)
}
} else if (curOperationType === operationType.secondMenu) { // 点击第二级菜单，点击菜单
const list = this.$_.cloneDeep(this.networkTabList)
const tabObjGroup = list.filter(item => item.checked)
} else if (curOperationType === operationType.secondMenu || curOperationType === operationType.mainMenu) { // 点击第二级菜单，点击菜单
this.list = this.$_.cloneDeep(this.curTable.tabList)
this.$store.commit('setNetworkOverviewTabList', this.list)
const tabObjGroup = this.list.filter(item => item.checked)
if (tabObjGroup && tabObjGroup.length > 0) {
const curTab = tabObjGroup[0]
queryType = curTab.prop
@@ -809,14 +910,6 @@ export default {
}
return extraParams
},
gerCycleUrl () {
const condition = this.$store.getters.getQueryCondition
if (condition) {
return this.networkSearchUrl.drilldownCycleUrl
} else {
return this.networkSearchUrl.cycleUrl
}
},
handleCustomizeClick (tab) {
this.activeCustomize = tab.paneName
},
@@ -848,12 +941,9 @@ export default {
}
},
mounted () {
if (this.chart.params && this.chart.params.drillDown) {
this.drillDown = this.chart.params.drillDown
}
//当前表格相关数据初始化
this.tableType = this.chart.params?this.chart.params.name:'networkOverview'
this.curTable = networkTable[this.tableType]?networkTable[this.tableType]:networkTable[0]
// 当前表格相关数据初始化
this.tableType = this.chart.params ? this.chart.params.name : 'networkOverview'
this.curTable = networkTable[this.tableType] ? networkTable[this.tableType] : networkTable.networkOverview
this.hasMetricSearch = this.curTable.hasMetricSearch
this.customTableTitles = this.$_.cloneDeep(this.curTable.column)
this.list = this.$_.cloneDeep(this.curTable.tabList)
@@ -861,6 +951,8 @@ export default {
this.activeTab = this.networkTabList[0].label
this.activeCustomize = ref('tabs')
this.networkSearchUrl = this.curTable.url
this.columnNameGroup = this.curTable.bytesColumnNameGroup
this.cycleColumnNameGroup = this.curTable.bytesCycleColumnNameGroup
if (this.$store.getters.getNetworkOverviewTabList.length > 0) {
this.list = this.$store.getters.getNetworkOverviewTabList
@@ -889,8 +981,8 @@ export default {
}
},
setup (props) {},
destroyed () {
this.$store.commit('setNetworkOverviewTabList', this.list)//保存状态
unmounted () {
this.$store.commit('setNetworkOverviewTabList', this.list)// 保存状态
}
}
</script>

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

@@ -128,14 +128,20 @@ export default {
}
},
mixins: [chartMixin],
watch: {
timeFilter: {
deep: true,
handler (n) {
this.init()
}
}
},
methods: {
init (params) {
if (!params) {
params = {
init () {
const params = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime)
}
}
// 获取table后三列内容
const currentTrafficRequest = get(api.npm.overview.appTrafficAnalysis, { ...params, cycle: 0 })
const lastCycleTrafficRequest = get(api.npm.overview.appTrafficAnalysis, { ...params, cycle: 1 })

8
src/views/charts2/charts/npm/NpmEventsHeader.vue
View File

@@ -24,6 +24,14 @@ export default {
type: 'severity'
}
},
watch: {
timeFilter: {
deep: true,
handler (n) {
this.recentEventsListData()
}
}
},
methods: {
recentEventsListData () {
const params = {

205
src/views/charts2/charts/npm/NpmIpMap.vue
View File

@@ -1,117 +1,58 @@
<template>
<div class="cn-chart__map">
<div class="map-canvas" id="npmMap"></div>
<div class="map-filter">
<el-select
size="mini"
v-model="trafficDirection"
class="map-select map-select__direction"
>
<el-option value="Server">Server</el-option>
<el-option value="Client">Client</el-option>
</el-select>
<el-select
size="mini"
v-model="location"
class="map-select map-select__location"
clearable
placeholder="All"
filterable
>
<template #prefix><i class="cn-icon cn-icon-location" style="color: #575757;"></i></template>
<el-option v-for="(country, index) in locationOptions" :key="index" :value="country.value">{{country.label}}</el-option>
</el-select>
</div>
<div class="map-legend">
<div class="map-legend__row">
<div class="map-legend__symbol map-legend__symbol--green"></div>
<div class="map-legend__desc">{{$t('npm.highScore')}}</div>
</div>
<div class="map-legend__row">
<div class="map-legend__symbol map-legend__symbol--yellow"></div>
<div class="map-legend__desc">{{$t('npm.middleScore')}}</div>
</div>
<div class="map-legend__row">
<div class="map-legend__symbol map-legend__symbol--red"></div>
<div class="map-legend__desc">{{$t('npm.lowScore')}}</div>
</div>
</div>
<div class="map-canvas" id="npmDrillDownMap"></div>
</div>
</template>
<script>
import { mapData, drillDownData } from '@/views/charts2/charts/mapTestData'
import { shallowRef } from 'vue'
import * as am4Core from '@amcharts/amcharts4/core'
import * as am4Maps from '@amcharts/amcharts4/maps'
import { getGeoData } from '@/utils/tools'
import { storageKey, unitTypes } from '@/utils/constants'
import locationOptions from '@/views/charts2/charts/locationOptions'
import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
import { computeScore, getGeoData } from '@/utils/tools'
import { storageKey, unitTypes, countryNameIdMapping } from '@/utils/constants'
import { valueToRangeValue } from '@/utils/unit-convert'
import { getSecond } from '@/utils/date-util'
import { api, getData } from '@/utils/api'
import { get } from '@/utils/http'
import chartMixin from '@/views/charts2/chart-mixin'
export default {
name: 'NpmMap',
name: 'NpmIpMap',
data () {
return {
locationOptions,
mapData,
drillDownData,
myChart: null,
polygonSeries: null,
countrySeries: null,
worldImageSeries: null,
countryImageSeries: null,
// Server | Client
trafficDirection: 'Server',
location: ''
trafficDirection: 'Server'
}
},
mixins: [chartMixin],
methods: {
initMap () {
async initMap () {
// 初始化插件
const chart = am4Core.create('npmMap', am4Maps.MapChart)
chart.geodata = getGeoData(storageKey.iso36112WorldLow)
this.toggleLoading(true)
const geoData = await getGeoData(storageKey.iso36112WorldLow)
const chart = am4Core.create('npmDrillDownMap', am4Maps.MapChart)
chart.geodata = geoData
chart.projection = new am4Maps.projections.Miller()
chart.homeZoomLevel = 2
chart.homeZoomLevel = 1.5
chart.homeGeoPoint = {
latitude: 21,
longitude: 0
}
this.myChart = shallowRef(chart)
this.polygonSeries = shallowRef(this.polygonSeriesFactory())
this.worldImageSeries = shallowRef(this.imageSeriesFactory('score'))
this.worldImageSeries = shallowRef(this.imageSeriesFactory('score', this.polygonSeries))
// 渲染
this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
const countryId = ev.target.dataItem.dataContext.id
ev.target.isHover = false
if (countryId) {
const targetMapObject = this.polygonSeries.getPolygonById(countryId)
targetMapObject.series.chart.zoomToMapObject(targetMapObject)
const geoData = getGeoData(countryId)
if (geoData) {
this.countrySeries = shallowRef(this.polygonSeriesFactory())
this.countrySeries.geodata = geoData
this.countryImageSeries = shallowRef(this.imageSeriesFactory('score'))
this.polygonSeries.hide()
this.worldImageSeries.hide()
const country = ev.target.dataItem.dataContext.name
const queryParams = { ...this.queryParams, ipLocationCountry: country }
const chartData = this.drillDownData
this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries, country, chartData)
}
}
})
},
loadAm4ChartMap (polygonSeries, imageSeries, country, chartData) {
// chartData不为空是下钻
if (chartData) {
this.$emit('showLoading', true)
}
loadAm4ChartMap (polygonSeries, imageSeries) {
try {
// 清除数据
polygonSeries.data.splice(0)
// polygonSeries.data.splice(0)
this.toggleLoading(true)
// 清除legend
this.myChart.children.each((s, i) => {
if (s && s.className !== 'Container') {
@@ -119,25 +60,62 @@ export default {
}
})
this.showMapBackButton = !!country
const data = chartData || this.mapData
const params = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
type: this.$store.getters.getDimensionType,
typeVal: this.$store.getters.getBreadcrumbColumnValue
}
getData(api.npm.overview.map, params).then(res => {
// 计算分数
const tcpRequest = get(api.npm.overview.mapTcp, params)
const httpRequest = get(api.npm.overview.mapHttp, params)
const sslRequest = get(api.npm.overview.mapSsl, params)
const tcpLostRequest = get(api.npm.overview.mapPacketLoss, params)
const packetRetransRequest = get(api.npm.overview.mapPacketRetrans, params)
Promise.all([tcpRequest, httpRequest, sslRequest, tcpLostRequest, packetRetransRequest]).then(res2 => {
const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
const mapData = res
res2.forEach((r, i) => {
if (r.code === 200) {
mapData.forEach(t => {
let score = 0
const find = r.data.result.find(d => d.country === t.country)
if (find) {
score = computeScore(find, i)
}
t[keyPre[i] + 'Score'] = score
})
} else {
mapData.forEach(t => {
t[keyPre[i] + 'Score'] = 0
})
}
})
mapData.forEach(t => {
t.score = Math.ceil((t.tcpScore + t.httpScore + t.sslScore + t.tcpLostScore + t.packetRetransScore) * 6)
if (t.score > 6) {
t.score = 6
}
})
this.loadMarkerData(imageSeries, mapData)
})
}).finally(() => {
this.toggleLoading(false)
})
} catch (e) {
console.error(e)
}
},
loadMarkerData (imageSeries, data) {
imageSeries.data = data.map(r => ({
score: r.score,
id: r.locationId,
name: r.province || r.country,
throughput: valueToRangeValue(r.throughBitsRate, unitTypes.bps).join(' '),
id: r.serverId,
color: this.scoreColor(r.score),
border: this.scoreColor(r.score)
}))
} catch (e) {
console.error(e)
} finally {
if (chartData) {
setTimeout(() => {
this.$emit('showLoading', false)
}, 200)
}
}
},
convertMapData (data) {
},
scoreColor (score) {
if (score >= 0 && score <= 2) {
@@ -148,6 +126,23 @@ export default {
return '#7E9F54'
}
},
generatePolygonTooltipHTML () {
const html = `
<div class="map-tooltip" style="padding-bottom: 10px;">
<div class="map-tooltip__title">{name}</div>
<div class="map-tooltip__content">
<div class="content-row">
<div class="row__label">Score</div>
<div class="row__value">{score}</div>
</div>
<div class="content-row">
<div class="row__label">Throughput</div>
<div class="row__value">{throughput}</div>
</div>
</div>
</div>`
return html
},
polygonSeriesFactory () {
const polygonSeries = this.myChart.series.push(new am4Maps.MapPolygonSeries())
polygonSeries.useGeodata = true
@@ -163,8 +158,7 @@ export default {
polygonTemplate.fill = am4Core.color('#EFEFEF')
return polygonSeries
},
imageSeriesFactory (dataField) {
const vm = this
imageSeriesFactory (dataField, polygonSeries) {
// amcharts实例中增加地图图案series（用来在地图上画圆点、方块、连线等）
const imageSeries = this.myChart.series.push(new am4Maps.MapImageSeries())
// 指定接口数据中哪个字段名代表数值
@@ -174,14 +168,14 @@ export default {
imageTemplate.nonScaling = true
// 通过地区ID来获取经纬度，设置后无需自己提供经纬度
imageTemplate.adapter.add('latitude', function (latitude, target) {
const polygon = vm.polygonSeries.getPolygonById(target.dataItem.dataContext.id)
const polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id)
if (polygon) {
return polygon.visualLatitude
}
return latitude
})
imageTemplate.adapter.add('longitude', function (longitude, target) {
const polygon = vm.polygonSeries.getPolygonById(target.dataItem.dataContext.id)
const polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id)
if (polygon) {
return polygon.visualLongitude
}
@@ -193,11 +187,12 @@ export default {
circle.propertyFields.fill = 'color'
circle.propertyFields.stroke = 'border'
circle.strokeWidth = 1
// circle.tooltipHTML = this.generatePolygonTooltipHTML()
circle.fillOpacity = 0.8
circle.tooltipHTML = this.generatePolygonTooltipHTML()
imageSeries.tooltip.getFillFromObject = false
imageSeries.tooltip.background.fill = am4Core.color('#41495D')
imageSeries.tooltip.background.fill = am4Core.color('#FFFFFF')
imageSeries.tooltip.background.filters.clear()
imageSeries.tooltip.background.stroke = '#41495D'
imageSeries.tooltip.background.stroke = '#C5C5C5'
imageSeries.heatRules.push({
target: circle,
@@ -212,6 +207,14 @@ export default {
},
mounted () {
this.initMap()
},
beforeUnmount () {
this.polygonSeries = null
this.countrySeries = null
this.worldImageSeries = null
this.countryImageSeries = null
this.myChart && this.myChart.dispose()
this.myChart = null
}
}
</script>

14
src/views/charts2/charts/npm/NpmLine.vue
View File

@@ -2,7 +2,7 @@
<div class="npm-line">
<template v-if="chartData.id === 11">
<div class="npm-line-header">
<div class="npm-line-header-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
<div class="npm-line-header-title">{{$t(chartData.i18n) || chartData.name}}</div>
<div class="npm-line-header-rights" v-if="chartData.params && chartData.params.showLegend && !throughputName">
<div class="npm-line-header-right" :class="{'active': item.show}" v-for="(item, index) in chartOptionLineData" :key="index" @click="highlightEvent(item)">
<div class="npm-line-header-icon" :class="'icon' + index"></div>
@@ -14,27 +14,27 @@
<div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template>
<template v-else-if="chartData.id === 12">
<div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
<chart-no-data v-if="tcpName"></chart-no-data>
<div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template>
<template v-else-if="chartData.id === 13">
<div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
<chart-no-data v-if="httpName"></chart-no-data>
<div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template>
<template v-else-if="chartData.id === 14">
<div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
<chart-no-data v-if="sslName"></chart-no-data>
<div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template>
<template v-else-if="chartData.id === 15">
<div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
<chart-no-data v-if="packetsLossName"></chart-no-data>
<div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template>
<template v-else-if="chartData.id === 16">
<div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
<chart-no-data v-if="packetsRetrainsName"></chart-no-data>
<div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template>
@@ -199,7 +199,7 @@ export default {
this.chartOption.series = data.map((t, i) => {
return {
...seriesTemplate,
name: t.legend ? t.legend : this.$_.get(chartData, 'i18n') || chartData.name,
name: t.legend ? t.legend : this.$t(chartData.i18n) || chartData.name,
stack: this.chartData.params.isStack ? 'network.total' : '',
lineStyle: {
width: 1

78
src/views/charts2/charts/npm/NpmMap.vue
View File

@@ -44,7 +44,6 @@
</template>
<script>
import { mapData, drillDownData } from '@/views/charts2/charts/mapTestData'
import { shallowRef } from 'vue'
import * as am4Core from '@amcharts/amcharts4/core'
import * as am4Maps from '@amcharts/amcharts4/maps'
@@ -56,13 +55,12 @@ import { getSecond } from '@/utils/date-util'
import { api, getData } from '@/utils/api'
import { get } from '@/utils/http'
import chartMixin from '@/views/charts2/chart-mixin'
import {Rectangle3D} from '@amcharts/amcharts4/.internal/core/elements/3d/Rectangle3D'
export default {
name: 'NpmMap',
data () {
return {
locationOptions,
mapData,
drillDownData,
myChart: null,
polygonSeries: null,
countrySeries: null,
@@ -92,6 +90,20 @@ export default {
this.worldImageSeries = shallowRef(this.imageSeriesFactory('score', this.polygonSeries))
// 渲染
this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
this.$store.commit('setNpmLocationCountry', ev.target.dataItem.dataContext.name)
this.location = ev.target.dataItem.dataContext.name
if (this.countrySeries) {
this.countrySeries.dispose()
}
if (this.countryImageSeries) {
this.countryImageSeries.dispose()
}
const countryId = ev.target.dataItem.dataContext.id
ev.target.isHover = false
await this.drill(countryId)
})
},
loadAm4ChartMap (polygonSeries, imageSeries) {
try {
@@ -161,8 +173,6 @@ export default {
color: this.scoreColor(r.score),
border: this.scoreColor(r.score)
}))
console.info(imageSeries)
console.info(this.countryImageSeries)
},
scoreColor (score) {
if (score >= 0 && score <= 2) {
@@ -250,23 +260,8 @@ export default {
})
return imageSeries
}
},
watch: {
trafficDirection (n) {
this.$store.commit('setNpmLocationSide', n.toLowerCase())
this.loadAm4ChartMap(this.countrySeries || this.polygonSeries, this.countryImageSeries || this.worldImageSeries)
},
async location (n) {
this.$store.commit('setNpmLocationCountry', n)
if (this.countrySeries) {
this.countrySeries.dispose()
}
if (this.countryImageSeries) {
this.countryImageSeries.dispose()
}
if (n) {
const countryId = countryNameIdMapping[n]
async drill (countryId) {
if (countryId) {
const targetMapObject = this.polygonSeries.getPolygonById(countryId)
targetMapObject.series.chart.zoomToMapObject(targetMapObject)
@@ -282,17 +277,54 @@ export default {
})
}
}
}
},
watch: {
trafficDirection (n) {
this.$store.commit('setNpmLocationSide', n.toLowerCase())
if (this.location) {
this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries)
} else {
this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
}
},
async location (n) {
this.$store.commit('setNpmLocationCountry', n)
this.countrySeries.dispose()
this.countryImageSeries.dispose()
if (n) {
const countryId = countryNameIdMapping[n]
await this.drill(countryId)
} else {
this.polygonSeries.show()
this.worldImageSeries.show()
this.countrySeries = null
this.countryImageSeries = null
this.myChart.zoomToGeoPoint(this.myChart.homeGeoPoint, this.myChart.homeZoomLevel, true)
}
},
timeFilter: {
deep: true,
handler (n) {
if (this.location) {
this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries)
} else {
this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
}
}
}
},
mounted () {
this.initMap()
},
beforeUnmount () {
if (this.polygonSeries) {
this.polygonSeries.mapPolygons.template.events.off('hit', this.mapBlockHitEvent)
}
this.polygonSeries = null
this.countrySeries = null
this.worldImageSeries = null
this.countryImageSeries = null
this.myChart && this.myChart.dispose()
this.myChart = null
}
}
</script>

2
src/views/charts2/charts/npm/NpmRecentEvents.vue
View File

@@ -31,7 +31,7 @@
</el-table-column>
</template>
<template v-slot:empty>
<div class="table-no-data">
<div class="table-no-data" v-show="isNoData">
<svg class="icon" aria-hidden="true">
<use xlink:href="#cn-icon-a-allclear"></use>
</svg>