diff --git a/src/components/charts/PieTable.vue b/src/components/charts/PieTable.vue index deee373e..eee8bb85 100644 --- a/src/components/charts/PieTable.vue +++ b/src/components/charts/PieTable.vue @@ -37,7 +37,7 @@ :prop="item.prop" #default="{row}"> - {{ nameColumn === 'fqdnCategoryName' ? row['fqdnCategoryName'] :(nameColumn === 'fqdnReputationLevel'? row['fqdnReputationLevel']:(nameColumn==='appCategory'?row['appCategory']:row['appRisk']))}} + {{ nameColumn === 'domainCategoryName' ? row['categoryName'] :(nameColumn === 'domainReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategoryName']:row['appRiskLevel']))}} {{ tableNameColumn === 'appName' ? row['appName'] : row['domain']}} @@ -65,7 +65,7 @@ :prop="item.prop" #default="{row}"> - {{ nameColumn === 'fqdnCategoryName' ? row['categoryName'] :(nameColumn === 'fqdnReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategory']:row['appRisk']))}} + {{ nameColumn === 'domainCategoryName' ? row['categoryName'] :(nameColumn === 'domainReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategoryName']:row['appRiskLevel']))}} {{ tableNameColumn === 'appName' ? row['appName'] : row['domain']}} @@ -221,9 +221,6 @@ export default { } setTimeout(() => { get(replaceUrlPlaceholder(url, queryParams)).then(response2 => { - // app:测试数据生成,如接口可正常返回数据后,删除即可 - response2 = this.initTestDataForAppSecondTable(url, row) - if (response2.code === 200) { this.childrenTableData = response2.data.result } @@ -232,37 +229,7 @@ export default { }) }, 500) }, - initTestDataForAppSecondTable (url, row) { - let rlt = '' - if (url.indexOf('app') > -1) { - rlt = { - code: 200, - msg: '', - data: { - resultType: 'table', - result: [{ - sessions: '0', - packets: '134', - bytes: '33202', - appCategory: row.appCategory, - serverIp: '51.104.167.186', - appRisk: row.appRisk - }, { - sessions: '0', - packets: '134', - bytes: '33202', - appCategory: row.appCategory, - serverIp: '23.164.67.16', - appRisk: row.appRisk - } - ] - }, - success: true - } - } - return rlt - }, getRowKey (row) { if (this.tableNameColumn === 'appName') { return row.appName diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue index 93166592..58d81c9f 100644 --- a/src/views/charts/Chart.vue +++ b/src/views/charts/Chart.vue @@ -962,9 +962,6 @@ export default { this.isError = true this.noData = true this.errorInfo = response.msg || response.message || 'Unknown' - - // 测试数据 - this.initTestEventListData() } }).catch(e => { this.isError = true @@ -992,34 +989,6 @@ export default { } }, - initTestEventListData () { - this.noData = false - - for (let i = 0; i < this.croptyEventList.length; i++) { - this.croptyEventList.splice(i, 1) - } - this.croptyEventList = [{ - time: '2021-11-23 12:00:00', - serverIP: '192.168.1.1', - clientIP: '101.1.1.1', - message: '检测到连接挖矿木马远控地址', - level: 1 - }, { - time: '2021-11-23 12:10:00', - serverIP: '192.168.1.1', - clientIP: '101.1.1.1', - message: '检测到连接挖矿木马远控地址', - level: 1 - }, { - time: '2021-11-23 12:10:00', - serverIP: '192.168.1.1', - clientIP: '101.1.1.1', - message: '检测到连接挖矿木马远控地址', - level: 1 - } - ] - }, - reloadChart () { this.initChart() this.$nextTick(() => { @@ -1951,9 +1920,6 @@ export default { this.isError = true this.noData = true this.errorInfo = response.msg || response.message || 'Unknown' - - // 产生测试数据 - this.initTestTimeBarData(chartParams) } this.myChart.setOption(this.chartOption) }).finally(() => { @@ -1966,23 +1932,6 @@ export default { }) }, - initTestTimeBarData (chartParams) { - this.noData = false - const data = [[1612113120000, '9'], [1612113220000, '2'], [1612113320000, '3'], [1612113420000, '4'], [1612113520000, '1'], [1612113620000, '5'], [1612113720000, '7'], [1612113820000, '9']] - let dataArray = [] - if (chartParams.direction == 'vertical') { // 柱状图竖直方向 - dataArray = data.map((r, i) => { - return [r[0], Number(r[1]), chartParams.unitType] - }) - } else if (chartParams.direction == 'horizontal') { // 柱状图水平方向 - dataArray = data.map((r, i) => { - return [Number(r[1]), r[0], chartParams.unitType] - }) - } - - this.handleTimeChartOption(chartParams, dataArray) - }, - initEchartsCategoryBar (chartParams) { const queryParams = { ...this.queryTimeRange, ...this.entity } get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => { @@ -2005,9 +1954,6 @@ export default { this.isError = true this.noData = true this.errorInfo = response.msg || response.message || 'Unknown' - - // 产生测试数据 - this.initTestCategoryBarData(chartParams) } this.myChart.setOption(this.chartOption) }).finally(() => { @@ -2067,97 +2013,6 @@ export default { } }, - initTestCategoryBarData (chartParams) { - this.noData = false - - let xType = 'category' - let yType = 'value' - let direction = 'vertical' - if (chartParams.direction) { - direction = chartParams.direction - if (direction == 'horizontal') { // 柱状图水平方向 - xType = 'value' - yType = 'category' - } else if (direction == 'vertical') { // 柱状图竖直方向 - xType = 'category' - yType = 'value' - } - } - - let itemColorAlternately = false// true|false 柱体色是否轮替 - if (chartParams.itemColorAlternately) { - itemColorAlternately = chartParams.itemColorAlternately - } - - let dataArray = [] - if (direction == 'horizontal') { // 柱状图水平方向 - dataArray = [ - [240, '中国出版集团公司'], - [200, '中国铁路总公司'], - [175, '中国烟草总公司'], - [140, '中国邮政集团公司'], - [99, '中国石油天然气集团公司'] - ] - } else if (direction == 'vertical') { // 柱状图竖直方向 - dataArray = [ - ['中国出版集团公司', 240], - ['中国铁路总公司', 200], - ['中国烟草总公司', 175], - ['中国邮政集团公司', 140], - ['中国石油天然气集团公司', 99] - ] - } - - this.chartOption = { - tooltip: { - appendToBody: true, - trigger: 'axis', - textStyle: { - width: '20px', - overflow: 'truncate' - }, - formatter: (direction == 'horizontal') ? categoryHorizontalFormatter : categoryVerticalFormatter, - show: true, - className: 'nz-chart-tooltip', - extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important' - }, - xAxis: { - type: xType, - axisTick: { show: false }, - axisLine: { show: false } - }, - yAxis: { - type: yType, - axisTick: { show: false }, - axisLine: { show: false } - }, - grid: { - top: 20, - left: 10, - right: 25, - bottom: 20, - containLabel: true - }, - color: chartBarColor, - series: [{ - barWidth: 15, - data: dataArray, - type: 'bar', - label: { show: false }, - barCategoryGap: '10%', - itemStyle: { - color: function (params) { - if (itemColorAlternately) { - return getCharBartColor([params.dataIndex]) - } else { - return getCharBartColor(0) - } - } - } - }] - } - }, - initEchartsWithStatistics (chartParams) { const queryParams = { ...this.queryTimeRange, ...this.entity } get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => { @@ -2210,82 +2065,6 @@ export default { }) }, - initTestDataForApp (chartParams) { - let rlt = '' - if (chartParams.url.indexOf('App') > -1) { - rlt = { - code: 200, - msg: '', - data: { - resultType: 'table', - result: [{ - appCategory: 'aaa', - uniqApps: 'bbb', - bytes: '1337678073', - packets: '1687757', - sessions: '28307', - appRisk: 'low' - }, { - appCategory: 'www', - uniqApps: 'uuu', - bytes: '1337678073', - packets: '1687757', - sessions: '28307', - appRisk: 'middle' - }, { - appCategory: 'xxx', - uniqApps: 'zzz', - bytes: '1337678073', - packets: '1687757', - sessions: '28307', - appRisk: 'high' - } - ] - }, - success: true - } - } - return rlt - }, - - initTestDataForAppTable (chartParams) { - let rlt = '' - if (chartParams.urlTable.indexOf('app') > -1) { - rlt = { - code: 200, - msg: '', - data: { - resultType: 'table', - result: [{ - sessions: '0', - packets: '134', - bytes: '33202', - appName: 'aacccc', - appCategory: 'aaa', - appRisk: 'low' - }, { - sessions: '0', - packets: '134', - bytes: '33202', - appName: 'wwcccc', - appCategory: 'www', - appRisk: 'middle' - }, { - sessions: '0', - packets: '134', - bytes: '33202', - appName: 'xxcccc', - appCategory: 'xxx', - appRisk: 'high' - } - ] - }, - success: true - } - } - return rlt - }, - initEchartsWithPieTable (chartParams) { const self = this chartParams.valueColumn = this.orderPieTable @@ -2294,9 +2073,6 @@ export default { const tableQueryParams = { ...this.queryTimeRange, limit: 10, order: this.orderPieTable, ...this.entity } // 统计数据的查询参数 tableQueryParams[chartParams.nameColumn] = [] // 处理两个图表不一样的地方) get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => { - // app:测试数据生成,如接口可正常返回数据后,删除即可 - response = this.initTestDataForApp(chartParams) - if (response.code === 200) { if (this.$_.isEmpty(response.data.result)) { this.noData = true @@ -2313,8 +2089,11 @@ export default { interval: 1 } } + const data = response.data.result.map(d => { - tableQueryParams[chartParams.nameColumn].push(d[chartParams.nameColumn]) + if (d[chartParams.nameColumn]) { + this.allSelectPieChartName.push(d[chartParams.nameColumn]) + } return { data: d, name: d[chartParams.nameColumn], @@ -2322,17 +2101,16 @@ export default { unitType: unitType } }) + this.allSelectPieChartName = tableQueryParams[chartParams.nameColumn] this.chartOption.series[0].data = data if (this.chartOption.series[0].data && this.chartOption.series[0].data.length > 10) { // pieWithTable 图例超过10个改为滚动显示 this.chartOption.legend.type = 'scroll' } this.myChart.setOption(this.chartOption) + if (!this.$_.isEmpty(data)) { get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response2 => { - // app:测试数据生成,如接口可正常返回数据后,删除即可 - response2 = this.initTestDataForAppTable(chartParams) - if (response2.code === 200) { this.pieTableData = response2.data.result } else { diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue index c811c39e..5e1fa765 100644 --- a/src/views/entityExplorer/entityList/detailOverview/App.vue +++ b/src/views/entityExplorer/entityList/detailOverview/App.vue @@ -119,7 +119,7 @@ import entityDetailMixin from './entityDetailMixin' import { unitTypes } from '@/utils/constants' import unitConvert from '@/utils/unit-convert' import Chart from '@/views/charts/Chart' -import _ from "lodash"; +import _ from 'lodash' export default { name: 'App', diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue index 3badf438..444b8030 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue @@ -220,7 +220,7 @@ import entityDetailMixin from './entityDetailMixin' import { unitTypes } from '@/utils/constants' import unitConvert from '@/utils/unit-convert' import Chart from '@/views/charts/Chart' -import _ from "lodash"; +import _ from 'lodash' export default { name: 'Domain', components: { diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue index 3992dedd..16d0faca 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue @@ -111,7 +111,7 @@ import { api } from '@/utils/api' import { unitTypes } from '@/utils/constants' import unitConvert from '@/utils/unit-convert' import Chart from '@/views/charts/Chart' -import _ from "lodash"; +import _ from 'lodash' export default { name: 'Ip', diff --git a/src/views/entityExplorer/entityList/entityListMixin.js b/src/views/entityExplorer/entityList/entityListMixin.js index 57178b9c..237210d0 100644 --- a/src/views/entityExplorer/entityList/entityListMixin.js +++ b/src/views/entityExplorer/entityList/entityListMixin.js @@ -81,24 +81,24 @@ export default { switch (this.entityData.entityType) { case ('ip'): { params = { - startTime: this.timeFilter.startTime?parseInt(this.timeFilter.startTime / 1000): Math.floor(now / 1000 - 3600), - endTime: this.timeFilter.endTime?parseInt(this.timeFilter.endTime / 1000):Math.floor(now / 1000), + startTime: this.timeFilter.startTime ? parseInt(this.timeFilter.startTime / 1000) : Math.floor(now / 1000 - 3600), + endTime: this.timeFilter.endTime ? parseInt(this.timeFilter.endTime / 1000) : Math.floor(now / 1000), ip: this.entityData.ipAddr } break } case ('domain'): { params = { - startTime: this.timeFilter.startTime?parseInt(this.timeFilter.startTime / 1000): Math.floor(now / 1000 - 3600), - endTime: this.timeFilter.endTime?parseInt(this.timeFilter.endTime / 1000):Math.floor(now / 1000), + startTime: this.timeFilter.startTime ? parseInt(this.timeFilter.startTime / 1000) : Math.floor(now / 1000 - 3600), + endTime: this.timeFilter.endTime ? parseInt(this.timeFilter.endTime / 1000) : Math.floor(now / 1000), domain: this.entityData.domainName } break } case ('app'): { params = { - startTime: this.timeFilter.startTime?parseInt(this.timeFilter.startTime / 1000): Math.floor(now / 1000 - 3600), - endTime: this.timeFilter.endTime?parseInt(this.timeFilter.endTime / 1000):Math.floor(now / 1000), + startTime: this.timeFilter.startTime ? parseInt(this.timeFilter.startTime / 1000) : Math.floor(now / 1000 - 3600), + endTime: this.timeFilter.endTime ? parseInt(this.timeFilter.endTime / 1000) : Math.floor(now / 1000), appName: this.entityData.appName } break @@ -177,7 +177,7 @@ export default { return { ...seriesTemplate, name: this.$t('entities.sentThroughput'), // 'bytes_sent_rate',//legendMapping[`ip_${r.legend}`], - data: r.values.map(v => [Number(v[0])* 1000, Number(v[1]), unitTypes.byte]), + data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]), itemStyle: { normal: { color: '#69b072', @@ -205,7 +205,7 @@ export default { return { ...seriesTemplate, name: this.$t('entities.receivedThroughput'), // legendMapping[`ip_${r.legend}`], - data: r.values.map(v => [Number(v[0])* 1000, Number(v[1]), unitTypes.byte]), + data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]), itemStyle: { normal: { color: '#7899c6', @@ -239,7 +239,7 @@ export default { } }).finally(() => { this.$nextTick(() => { - if(chartOption){ + if (chartOption) { const myChart = echarts.init(document.getElementById(`entityListChart${this.entityName}`)) myChart.setOption(chartOption) }