diff --git a/src/utils/date-util.js b/src/utils/date-util.js index 46780909..a889a4a7 100644 --- a/src/utils/date-util.js +++ b/src/utils/date-util.js @@ -1,7 +1,7 @@ import _ from 'lodash' import { storageKey } from '@/utils/constants' -// 获取初始化时间，默认最近一周 -Date.prototype.setStart = function () { +// 获取初始化时间 +/* Date.prototype.setStart = function () { this.setHours(0) this.setMinutes(0) this.setSeconds(0) @@ -10,7 +10,7 @@ Date.prototype.setEnd = function () { this.setHours(23) this.setMinutes(59) this.setSeconds(59) -} +} */ // 将时间转化为秒 export function getSecond (time) { const ms = getMillisecond(time) diff --git a/src/utils/http.js b/src/utils/http.js index 28e7d193..34f61736 100644 --- a/src/utils/http.js +++ b/src/utils/http.js @@ -122,7 +122,7 @@ export function put (url, params, headers) { }).catch(err => { if (err.response) { resolve(err.response.data) - console.log(err) + console.error(err) } else if (err.message) { resolve(err.message) } diff --git a/src/utils/tools.js b/src/utils/tools.js index 0fd8930a..22b2d1cb 100644 --- a/src/utils/tools.js +++ b/src/utils/tools.js @@ -803,7 +803,6 @@ export function scrollToTop (dom, toTop, duration, direction) { if (oldTimestamp !== null) { if (direction === 'up') { scrollY -= totalScrollDistance * (newTimestamp - oldTimestamp) / duration - console.info(scrollY) if (scrollY < 0) { dom.scrollTop = 0 return diff --git a/src/views/charts/PanelChart.vue b/src/views/charts/PanelChart.vue index 66851842..80889090 100644 --- a/src/views/charts/PanelChart.vue +++ b/src/views/charts/PanelChart.vue @@ -167,7 +167,6 @@ export default { methods: { /* 参数 extraParams 额外请求参数 */ getChartData (url, extraParams = {}, chartTimeFilter, num) { - const vm = this this.loading = true try { if (chartTimeFilter) { @@ -214,7 +213,7 @@ export default { if (Array.isArray(response.data.result)) { response.data.result.forEach(item => { if (item.legend && legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${item.legend}`]) { - item.legend = vm.$t(legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${item.legend}`]) + item.legend = this.$t(legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${item.legend}`]) } }) } diff --git a/src/views/charts/charts/ChartCategoryBar.vue b/src/views/charts/charts/ChartCategoryBar.vue index 7523f7ab..60b91c8e 100644 --- a/src/views/charts/charts/ChartCategoryBar.vue +++ b/src/views/charts/charts/ChartCategoryBar.vue @@ -3,24 +3,16 @@ diff --git a/src/views/charts/charts/ChartEchart.vue b/src/views/charts/charts/ChartEchart.vue index a3ba864b..fde3acb3 100644 --- a/src/views/charts/charts/ChartEchart.vue +++ b/src/views/charts/charts/ChartEchart.vue @@ -173,7 +173,7 @@ export default { } } } else if (this.chartData.length > 1) { // 有多条曲线 - this.handleLegendClick()// 自定义legend的点击事件 + this.myChart.on('legendselectchanged', this.handleLegendClick) } } return serie @@ -240,103 +240,98 @@ export default { }, // 自定义legend的点击事件:此方法只处理多条曲线的情况（单条曲线正常切换legend和曲线） - handleLegendClick () { - const self = this + handleLegendClick (params) { // legend点击事件 - this.myChart.off('legendselectchanged') - this.myChart.on('legendselectchanged', function (params) { - const legendNum = Object.keys(params.selected).length - const selectedNum = self.getSelectedNum(params) + const legendNum = Object.keys(params.selected).length + const selectedNum = this.getSelectedNum(params) - const legendItem = params.selected - if (selectedNum === legendNum) { // 点击前：全部曲线高亮 - for (const name in legendItem) { - if (name === params.name) { - legendItem[name] = true - } else { - legendItem[name] = false - } - } - } else if (selectedNum === 1 && !params.selected[params.name]) { // 点击前：多条曲线，且只有一条曲线高亮时 - for (const name in legendItem) { + const legendItem = params.selected + if (selectedNum === legendNum) { // 点击前：全部曲线高亮 + for (const name in legendItem) { + if (name === params.name) { legendItem[name] = true + } else { + legendItem[name] = false } } - self.myChart.setOption({ - legend: { - selected: legendItem - } - }) - - if (self.getAfterSelectedNum(params) === 1) { // 点击后只有一条曲线高亮 - const chartParams = self.chartInfo.params - // 多条曲线，且只有一条曲线高亮时，显示P50 P90 分位值，不止一个时隐藏标线 - let selectedName = '' - for (const name in legendItem) { - if (legendItem[name]) { - selectedName = name - } - } - - const serieArray = [] - self.chartOption.series.forEach((item, i) => { - if (item.name === selectedName) { - if (!_.isNaN(parseFloat(self.chartData[i].aggregation.p50)) && !_.isNaN(parseFloat(self.chartData[i].aggregation.p90))) { - const markLine = { - silent: true, - symbol: 'none', - label: { - distance: [-50, 0], - formatter (params) { - const arr = unitConvert(Number(params.value), chartParams.unitType).join(' ') - let desc = '' - switch (params.dataIndex) { - case 0: { - desc = 'P50' - break - } - case 1: { - desc = 'P90' - break - } - default: - break - } - return `${arr} (${desc})` - } - }, - data: [ - { - name: 'P50', - yAxis: self.chartData[i].aggregation.p50 - }, - { - name: 'P90', - yAxis: self.chartData[i].aggregation.p90 - } - ] - } - item.markLine = markLine - } - } - serieArray.push(item) - }) - self.myChart.setOption({ - series: serieArray - }) - } else { // 不止一条线高亮时隐藏标线 - const serieArray = [] - self.chartOption.series.forEach((item, i) => { - item.markLine = [] - serieArray.push(item) - }) - self.myChart.setOption({ - series: serieArray - }) + } else if (selectedNum === 1 && !params.selected[params.name]) { // 点击前：多条曲线，且只有一条曲线高亮时 + for (const name in legendItem) { + legendItem[name] = true + } + } + this.myChart.setOption({ + legend: { + selected: legendItem } }) - } + if (this.getAfterSelectedNum(params) === 1) { // 点击后只有一条曲线高亮 + const chartParams = this.chartInfo.params + // 多条曲线，且只有一条曲线高亮时，显示P50 P90 分位值，不止一个时隐藏标线 + let selectedName = '' + for (const name in legendItem) { + if (legendItem[name]) { + selectedName = name + } + } + + const serieArray = [] + this.chartOption.series.forEach((item, i) => { + if (item.name === selectedName) { + if (!_.isNaN(parseFloat(this.chartData[i].aggregation.p50)) && !_.isNaN(parseFloat(this.chartData[i].aggregation.p90))) { + const markLine = { + silent: true, + symbol: 'none', + label: { + distance: [-50, 0], + formatter (params) { + const arr = unitConvert(Number(params.value), chartParams.unitType).join(' ') + let desc = '' + switch (params.dataIndex) { + case 0: { + desc = 'P50' + break + } + case 1: { + desc = 'P90' + break + } + default: + break + } + return `${arr} (${desc})` + } + }, + data: [ + { + name: 'P50', + yAxis: this.chartData[i].aggregation.p50 + }, + { + name: 'P90', + yAxis: this.chartData[i].aggregation.p90 + } + ] + } + item.markLine = markLine + } + } + serieArray.push(item) + }) + this.myChart.setOption({ + series: serieArray + }) + } else { // 不止一条线高亮时隐藏标线 + const serieArray = [] + this.chartOption.series.forEach((item, i) => { + item.markLine = [] + serieArray.push(item) + }) + this.myChart.setOption({ + series: serieArray + }) + } + } } } diff --git a/src/views/charts/charts/ChartEchartAppRelateDomain.vue b/src/views/charts/charts/ChartEchartAppRelateDomain.vue index 10116059..d8c4c4ac 100644 --- a/src/views/charts/charts/ChartEchartAppRelateDomain.vue +++ b/src/views/charts/charts/ChartEchartAppRelateDomain.vue @@ -20,29 +20,18 @@ diff --git a/src/views/charts/charts/ChartIpOpenPortBar.vue b/src/views/charts/charts/ChartIpOpenPortBar.vue index 82818848..32783970 100644 --- a/src/views/charts/charts/ChartIpOpenPortBar.vue +++ b/src/views/charts/charts/ChartIpOpenPortBar.vue @@ -41,14 +41,10 @@ import lodash from 'lodash' import { ipOpenPortBar } from '@/views/charts/charts/options/bar' import { getChartColor } from '@/views/charts/charts/tools' import * as echarts from 'echarts' +import chartEchartMixin from './chart-echart-mixin' export default { name: 'ChartIpOpenPortBar', - setup () { - const myChart = null - return { - myChart - } - }, + mixins: [chartEchartMixin], props: { chartInfo: Object, chartData: [Array, Object], @@ -57,7 +53,6 @@ export default { }, data () { return { - chartOption: null, tableData: [], tableKey: [ { @@ -81,7 +76,7 @@ export default { } }, methods: { - init (id) { + initEcharts (id) { const dom = document.getElementById(id) !this.myChart && (this.myChart = echarts.init(dom)) this.tableData = lodash.cloneDeep(this.chartData) @@ -98,29 +93,7 @@ export default { this.chartOption.series[0].data = protocols this.chartOption.xAxis.data = protocols.map(p => p.name) this.myChart.setOption(this.chartOption) - }, - resize () { - this.myChart.resize() - } - }, - mounted () { - this.debounceFunc = this.$_.debounce(this.resize, 200) - window.addEventListener('resize', this.debounceFunc) - }, - beforeUnmount () { - window.removeEventListener('resize', this.debounceFunc) - }, - watch: { - chartData: { - deep: true, - handler (n) { - this.init(`chart${this.chartInfo.id}`) - } } } } - - diff --git a/src/views/charts/charts/ChartMap.vue b/src/views/charts/charts/ChartMap.vue index c2d30ba4..be4ca482 100644 --- a/src/views/charts/charts/ChartMap.vue +++ b/src/views/charts/charts/ChartMap.vue @@ -174,23 +174,7 @@ export default { // 地图点击事件 if (this.isMapBlock) { - this.polygonSeries.mapPolygons.template.events.on('hit', async ev => { - const countryId = ev.target.dataItem.dataContext.id - if (countryId) { - ev.target.series.chart.zoomToMapObject(ev.target) - ev.target.isHover = false - const geoData = getGeoData(countryId) - if (geoData) { - this.countrySeries = shallowRef(this.polygonSeriesFactory()) - this.countrySeries.geodata = geoData - this.polygonSeries.hide() - const country = ev.target.dataItem.dataContext.serverCountry - const queryParams = { ...this.queryParams, country } - const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams)) - this.loadAm4ChartMap(this.countrySeries, null, country, chartData) - } - } - }) + this.polygonSeries.mapPolygons.template.events.on('hit', this.mapBlockHitEvent) } else if (this.isMapPoint) { /* this.worldImageSeries.mapImages.template.events.on('hit', async ev => { @@ -229,6 +213,23 @@ export default { this.$emit('finishOneMap') } }, + async mapBlockHitEvent (ev) { + const countryId = ev.target.dataItem.dataContext.id + if (countryId) { + ev.target.series.chart.zoomToMapObject(ev.target) + ev.target.isHover = false + const geoData = getGeoData(countryId) + if (geoData) { + this.countrySeries = shallowRef(this.polygonSeriesFactory()) + this.countrySeries.geodata = geoData + this.polygonSeries.hide() + const country = ev.target.dataItem.dataContext.serverCountry + const queryParams = { ...this.queryParams, country } + const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams)) + this.loadAm4ChartMap(this.countrySeries, null, country, chartData) + } + } + }, polygonSeriesFactory () { const polygonSeries = this.myChart.series.push(new am4Maps.MapPolygonSeries()) polygonSeries.useGeodata = true @@ -528,6 +529,15 @@ export default { } } }, + beforeUnmount () { + 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 + }, setup (props) { const circleColor = {} circleColor[dnsServerRole.RTDNSM] = { diff --git a/src/views/charts/charts/ChartSanKey.vue b/src/views/charts/charts/ChartSanKey.vue index cf8fa31e..e07e5db1 100644 --- a/src/views/charts/charts/ChartSanKey.vue +++ b/src/views/charts/charts/ChartSanKey.vue @@ -12,8 +12,10 @@ import unitConvert, { valueToRangeValue } from '@/utils/unit-convert' import { unitTypes } from '@/utils/constants' import * as echarts from 'echarts' import { sankey } from './options/sankey' +import chartEchartMixin from './chart-echart-mixin' export default { name: 'ChartSanKey', + mixins: [chartEchartMixin], props: { chartInfo: Object, chartData: [Array, Object], @@ -25,9 +27,8 @@ export default { } }, methods: { - init (id) { + initEcharts (id) { const vm = this - const chartParams = this.chartInfo.params const entityName = this.entity.ip || this.entity.domain || this.entity.app || this.entity.appName const dom = document.getElementById(id) !this.myChart && (this.myChart = echarts.init(dom)) @@ -105,29 +106,7 @@ export default { this.chartOption.series[0].data = data this.chartOption.series[0].links = link this.myChart.setOption(this.chartOption) - }, - resize () { - this.myChart.resize() - } - }, - mounted () { - this.debounceFunc = this.$_.debounce(this.resize, 100) - window.addEventListener('resize', this.debounceFunc) - }, - beforeUnmount () { - window.removeEventListener('resize', this.debounceFunc) - }, - watch: { - chartData: { - deep: true, - handler (n) { - this.init(`chart${this.chartInfo.id}`) - } } } } - - diff --git a/src/views/charts/charts/ChartTimeBar.vue b/src/views/charts/charts/ChartTimeBar.vue index 20911ece..bb697e57 100644 --- a/src/views/charts/charts/ChartTimeBar.vue +++ b/src/views/charts/charts/ChartTimeBar.vue @@ -11,38 +11,24 @@ import { legendMapping } from '@/views/charts/charts/chart-table-title' import { timeBar } from '@/views/charts/charts/options/bar' -import { getCharBartColor, timeBarTooltipFormatter } from '@/views/charts/charts/tools' +import { getCharBartColor } from '@/views/charts/charts/tools' +import chartEchartMixin from '@/views/charts/charts/chart-echart-mixin' export default { name: 'ChaetTimeBar', - setup () { - const myChart = null - return { - myChart - } - }, - data () { - return { - chartOption: null - } - }, props: { chartInfo: Object, chartData: [Array, Object], resultType: Object, queryParams: Object }, + mixins: [chartEchartMixin], methods: { - init (id) { + initEcharts (id) { const chartParams = this.chartInfo.params const dom = document.getElementById(id) !this.myChart && (this.myChart = echarts.init(dom)) this.chartOption = this.$_.cloneDeep(timeBar) - // this.chartOption.tooltip.trigger = 'item' - // this.chartOption.tooltip.formatter = (params) => { - // const str = timeBarTooltipFormatter(params, chartParams.direction) - // return str - // } if (!chartParams.itemColorAlternately) { this.chartOption.series[0].itemStyle.color = function (params) { return getCharBartColor(0) @@ -117,15 +103,6 @@ export default { return allZero } } - - }, - watch: { - chartData: { - deep: true, - handler (n) { - this.init(`chart${this.chartInfo.id}`) - } - } } } diff --git a/src/views/charts/charts/chart-echart-mixin.js b/src/views/charts/charts/chart-echart-mixin.js index fe06f5f5..fe939400 100644 --- a/src/views/charts/charts/chart-echart-mixin.js +++ b/src/views/charts/charts/chart-echart-mixin.js @@ -1,6 +1,6 @@ import { shallowRef } from 'vue' import * as echarts from 'echarts' -import { storageKey, echartsFontSize } from '@/utils/constants' +import { storageKey } from '@/utils/constants' import { isEchartsLine, isEchartsPie, @@ -98,7 +98,6 @@ export default { let chartOption = item.getOption() if (oldLegendFontSize != echartLegendFontSize) { - console.log('updateLegend....') chartOption = { ...chartOption, legend: { @@ -110,7 +109,6 @@ export default { } } if (oldLabelFontSize != echartLabelFontSize) { - console.log('updateLabel....') const newSeries = [] const chartType = chartOption.series[0].type chartOption.series.forEach((series) => { @@ -224,6 +222,16 @@ export default { }, beforeUnmount () { window.removeEventListener('resize', this.debounceFunc) + if (this.myChart) { + this.myChart.off('legendselectchanged') + this.myChart.dispose() + this.myChart = null + } + if (this.myChart2) { + this.myChart2.off('legendselectchanged') + this.myChart2.dispose() + this.myChart2 = null + } }, watch: { chartData: { diff --git a/src/views/charts/charts/testData.js b/src/views/charts/charts/testData.js deleted file mode 100644 index 2111130f..00000000 --- a/src/views/charts/charts/testData.js +++ /dev/null @@ -1,192 +0,0 @@ -const data = { - status: 200, - code: 200, - queryKey: '4f362f9ee3ffefc777e57fc65af78a2f', - success: true, - message: null, - formatType: 'json', - data: { - resultType: 'matrix', - result: - [ - { - values: [ - ['1642575780', '4324'], - ['1642575840', '5978'], - ['1642575900', '3458'], - ['1642575960', '2533'], - ['1642576020', '4431'], - ['1642576080', '9557'], - ['1642576140', '3131'], - ['1642576200', '2358'], - ['1642576260', '3049'], - ['1642576320', '2602'], - ['1642576380', '2446'], - ['1642576440', '3357'], - ['1642576500', '2777'], ['1642576560', '2080'], ['1642576620', '6080'], ['1642576680', '2620'], ['1642576740', '4394'], ['1642576800', '3403'], ['1642576860', '3820'], ['1642576920', '3022'], ['1642576980', '3139'], ['1642577040', '3012'], ['1642577100', '3749'], ['1642577160', '4947'], ['1642577220', '4005'], ['1642577280', '4724'], ['1642577340', '3426'], ['1642577400', '2785'], ['1642577460', '3451'], ['1642577520', '3317'], ['1642577580', '4970'], ['1642577640', '1869'], ['1642577700', '3491'], ['1642577760', '2410'], ['1642577820', '1802'], ['1642577880', '2199'], ['1642577940', '3083'], ['1642578000', '6992'], ['1642578060', '1782'], ['1642578120', '1610'], ['1642578180', '2993'], ['1642578240', '2195'], ['1642578300', '1855'], ['1642578360', '3784'], ['1642578420', '2969'], ['1642578480', '5891'], ['1642578540', '7949'], ['1642578600', '1655'], ['1642578660', '4799'], ['1642578720', '9208'], ['1642578780', '9159'], ['1642578840', '3296'], ['1642578900', '5717'], ['1642578960', '3911'], ['1642579020', '6369'], ['1642579080', '3183'], ['1642579140', '3051'], ['1642579200', '4449'], ['1642579260', '4990'], ['1642579320', '6962']], - legend: 'packets_received_rate', - aggregation: { first: 4324, last: 6962, avg: '3942.80', max: 9557 } - } - ] - }, - originalUrl: 'http://192.168.44.55:9999?query=SELECT%20%20%20%20%20TIME_FLOOR_WITH_FILL%28UNIX_TIMESTAMP%28common_recv_time%29%2C%27PT1M%27%2C%27zero%27%29%20AS%20stat_time%2C%20%20%20%20%20ROUND%28SUM%28common_s2c_pkt_num%29%2F60%29%20AS%20packets_received_rate%2C%20%20%20%20%20ROUND%28SUM%28common_c2s_pkt_num%29%2F60%29%20AS%20packets_sent_rate%2C%20%20%20%20%20ROUND%28SUM%28common_c2s_pkt_num%20%2B%20common_s2c_pkt_num%29%2F60%29%20AS%20packets_rate%20FROM%20%20%20%20%20tsg_base_metrics%20WHERE%20%20%20%20%20common_recv_time%20%3E%3DtoDateTime%281642575761%29%20%20%20%20%20AND%20common_recv_time%20%3C%20toDateTime%281642579361%29%20GROUP%20BY%20%20%20%20%20stat_time&format=json&option=real-time', - msg: 'OK' -} -const data2 = { - status: 200, - code: 200, - queryKey: '4f362f9ee3ffefc777e57fc65af78a2f', - success: true, - message: null, - formatType: 'json', - originalUrl: 'http://192.168.44.55:9999?query=SELECT%20%20%20%20%20TIME_FLOOR_WITH_FILL%28UNIX_TIMESTAMP%28common_recv_time%29%2C%27PT1M%27%2C%27zero%27%29%20AS%20stat_time%2C%20%20%20%20%20ROUND%28SUM%28common_s2c_pkt_num%29%2F60%29%20AS%20packets_received_rate%2C%20%20%20%20%20ROUND%28SUM%28common_c2s_pkt_num%29%2F60%29%20AS%20packets_sent_rate%2C%20%20%20%20%20ROUND%28SUM%28common_c2s_pkt_num%20%2B%20common_s2c_pkt_num%29%2F60%29%20AS%20packets_rate%20FROM%20%20%20%20%20tsg_base_metrics%20WHERE%20%20%20%20%20common_recv_time%20%3E%3DtoDateTime%281642575761%29%20%20%20%20%20AND%20common_recv_time%20%3C%20toDateTime%281642579361%29%20GROUP%20BY%20%20%20%20%20stat_time&format=json&option=real-time', - msg: 'OK', - data: { - resultType: 'table', - result: [{ - serverCountry: 'America', - serverRegion: 'Washington', - serverId: 'US', - clientCountry: 'China', - clientRegion: 'Beijing', - clientId: 'CN', - events: 27010 - }, { - serverCountry: 'America2', - serverRegion: 'Washington2', - serverId: 'US', - clientCountry: 'China', - clientRegion: 'ShangHai', - clientId: 'CN', - events: 13000 - }, { - serverCountry: 'America2', - serverRegion: 'Washington2', - serverId: 'US', - clientCountry: 'China', - clientRegion: 'ShangHai2', - clientId: 'CN', - events: 13000 - } - ] - } -} -const data3 = { - code: 200, - msg: '', - data: { - resultType: 'object', - result: [{ - port: '80', - protocol: 'HTTP', - banner: 'Http/1.1 200 OK\r\nDate:2021-9-17 13:53:03\r\nServer: Apache', - utime: '2021-9-17 13:53:37' - }, { - port: '80', - protocol: 'HTTP', - banner: 'Http/1.1 200 OK\r\nDate:2021-9-17 13:53:03\r\nServer: Apache', - utime: '2021-9-17 13:53:37' - }, { - port: '80', - protocol: 'HTTP', - banner: 'Http/1.1 200 OK\r\nDate:2021-9-17 13:53:03\r\nServer: Apache', - utime: '2021-9-17 13:53:37' - }, { - port: '80', - protocol: 'HTTP', - banner: 'Http/1.1 200 OK\r\nDate:2021-9-17 13:53:03\r\nServer: Apache', - utime: '2021-9-17 13:53:37' - }, { - port: '443', - protocol: 'HTTPS', - banner: 'Http/1.1 200 OK\r\nDate:2021-9-17 13:53:03\r\nServer: Apache', - utime: '2021-9-17 13:53:37' - }, { - port: '443', - protocol: 'HTTPS', - banner: 'Http/1.1 200 OK\r\nDate:2021-9-17 13:53:03\r\nServer: Apache', - utime: '2021-9-17 13:53:37' - }, { - port: '443', - protocol: 'HTTPS', - banner: 'Http/1.1 200 OK\r\nDate:2021-9-17 13:53:03\r\nServer: Apache', - utime: '2021-9-17 13:53:37' - }, { - port: '443', - protocol: 'HTTPS', - banner: 'Http/1.1 200 OK\r\nDate:2021-9-17 13:53:03\r\nServer: Apache', - utime: '2021-9-17 13:53:37' - }, { - port: '443', - protocol: 'HTTPS', - banner: 'Http/1.1 200 OK\r\nDate:2021-9-17 13:53:03\r\nServer: Apache', - utime: '2021-9-17 13:53:37' - }, { - port: '443', - protocol: 'HTTPS', - banner: 'Http/1.1 200 OK\r\nDate:2021-9-17 13:53:03\r\nServer: Apache', - utime: '2021-9-17 13:53:37' - } - ] - } -} -const data4 = { - msg: 'OK', - queryKey: 'b52e11629e25b6cd130f72e347f6b50f', - code: 200, - data: { - result: [ - { - latency: 0, - linkID: '2049', - bytes: '151596973', - lossPercent: 0, - direction: 'in', - retransPercent: 0.0025 - }, - { latency: 0, linkID: '769', bytes: '88934697', lossPercent: 0, direction: 'in', retransPercent: 7.0E-4 }, - { latency: 0, linkID: '1537', bytes: '163254171', lossPercent: 0, direction: 'in', retransPercent: 0.0049 }, - { latency: 0, linkID: '1281', bytes: '112557520', lossPercent: 2.0E-4, direction: 'in', retransPercent: 0.0044 }, - { latency: 0, linkID: '257', bytes: '126863185', lossPercent: 0, direction: 'in', retransPercent: 0.0068 }, - { latency: 0, linkID: '513', bytes: '145047254', lossPercent: 0, direction: 'in', retransPercent: 0.0045 }, - { latency: 0, linkID: '2048', bytes: '126388053', lossPercent: 0, direction: 'out', retransPercent: 0.0085 }, - { latency: 0, linkID: '768', bytes: '88328714', lossPercent: 0, direction: 'out', retransPercent: 7.0E-4 }, - { latency: 0, linkID: '1536', bytes: '121816536', lossPercent: 0, direction: 'out', retransPercent: 0.0057 }, - { latency: 0, linkID: '1280', bytes: '83435437', lossPercent: 0, direction: 'out', retransPercent: 0.0044 }, - { latency: 0, linkID: '256', bytes: '76227896', lossPercent: 0, direction: 'out', retransPercent: 0.0014 }, - { latency: 0, linkID: '512', bytes: '133311800', lossPercent: 2.0E-4, direction: 'out', retransPercent: 0.0046 }, - { latency: 0, linkID: '1792', bytes: '158745364', lossPercent: 0, direction: 'out', retransPercent: 0.0015 }], - resultType: 'table' - }, - originalUrl: 'http://192.168.44.55:9999?query=%28SELECT%20common_ingress_link_id%20AS%20linkID%2C%27in%27%20as%20direction%2CSUM%28common_c2s_byte_num%20%2B%20common_s2c_byte_num%29%20AS%20bytes%2CROUND%28AVG%28common_establish_latency_ms%29%29%20AS%20latency%2CROUND%28SUM%28common_c2s_tcp_lostlen%20%2B%20common_s2c_tcp_lostlen%29%2F%20SUM%28common_c2s_byte_num%20%2B%20common_s2c_byte_num%20%2B%20common_c2s_tcp_lostlen%20%2B%20common_s2c_tcp_lostlen%29%2C%204%29%20AS%20lossPercent%2CROUND%28SUM%28common_c2s_pkt_retrans%20%2B%20common_s2c_pkt_retrans%29%2F%20SUM%28common_c2s_pkt_num%20%2B%20common_s2c_pkt_num%29%2C%204%29%20AS%20retransPercent%20FROM%20tsg_base_metrics%20WHERE%20common_recv_time%20%3E%3D%20toDateTime%281642665066%29%20AND%20common_recv_time%20%3C%20toDateTime%281642668666%29%20AND%20common_ingress_link_id%20%21%3D%200%20AND%20common_egress_link_id%20%21%3D0%20AND%20common_app_label%20%3D%20%27youku%27%20GROUP%20BY%20linkID%29%20UNION%20ALL%20%28SELECT%20common_egress_link_id%20AS%20linkID%2C%27out%27%20as%20direction%2CSUM%28common_c2s_byte_num%20%2B%20common_s2c_byte_num%29%20AS%20bytes%2CROUND%28AVG%28common_establish_latency_ms%29%29%20AS%20latency%2CROUND%28SUM%28common_c2s_tcp_lostlen%20%2B%20common_s2c_tcp_lostlen%29%2F%20SUM%28common_c2s_byte_num%20%2B%20common_s2c_byte_num%20%2B%20common_c2s_tcp_lostlen%20%2B%20common_s2c_tcp_lostlen%29%2C%204%29%20AS%20lossPercent%2CROUND%28SUM%28common_c2s_pkt_retrans%20%2B%20common_s2c_pkt_retrans%29%2F%20SUM%28common_c2s_pkt_num%20%2B%20common_s2c_pkt_num%29%2C%204%29%20AS%20retransPercent%20FROM%20tsg_base_metrics%20WHERE%20common_recv_time%20%3E%3D%20toDateTime%281642665066%29%20AND%20common_recv_time%20%3C%20toDateTime%281642668666%29%20AND%20common_ingress_link_id%20%21%3D%200%20AND%20common_egress_link_id%20%21%3D0%20AND%20common_app_label%20%3D%20%27youku%27%20GROUP%20BY%20linkID%29&format=json&option=real-time', - success: true, - meta: [{ type: 'long', name: 'linkID' }, { type: 'string', name: 'direction' }, { type: 'long', name: 'bytes' }, { type: 'double', name: 'latency' }, { type: 'double', name: 'lossPercent' }, { type: 'double', name: 'retransPercent' }], - formatType: 'json', - status: 200, - statistics: { result_rows: 13, elapsed: 25, rows_read: 301384, result_size: 1242 } -} -const data5 = { - msg: '', - code: 200, - data: { - result: { - type: 'app_name', - leaf: [ - { - lastTime: 1642665600, - type: 'domain', - leaf: [ - { lastTime: 1636308000, type: 'ip', leaf: [{ lastTime: 1635141600, type: 'ip', name: '223.115.89.63', from: '223.115.89.63', to: '117.174.144.41' }, { lastTime: 1635148800, type: 'ip', name: '112.43.228.3', from: '112.43.228.3', to: '117.174.144.41' }, { lastTime: 1635148800, type: 'ip', name: '223.114.92.57', from: '223.114.92.57', to: '117.174.144.41' }, { lastTime: 1635148800, type: 'ip', name: '36.184.160.177', from: '36.184.160.177', to: '117.174.144.41' }, { lastTime: 1635148800, type: 'ip', name: '223.115.228.135', from: '223.115.228.135', to: '117.174.144.41' }], name: '117.174.144.41', from: 'liang520.com', to: '117.174.144.41' }, { lastTime: 1636441200, type: 'ip', leaf: [{ lastTime: 1635260400, type: 'ip', name: '112.43.73.101', from: '112.43.73.101', to: '111.19.223.41' }, { lastTime: 1635267600, type: 'ip', name: '36.185.137.163', from: '36.185.137.163', to: '111.19.223.41' }, { lastTime: 1635264000, type: 'ip', name: '223.116.37.85', from: '223.116.37.85', to: '111.19.223.41' }, { lastTime: 1635264000, type: 'ip', name: '223.115.113.160', from: '223.115.113.160', to: '111.19.223.41' }, { lastTime: 1635264000, type: 'ip', name: '223.117.217.250', from: '223.117.217.250', to: '111.19.223.41' }], name: '111.19.223.41', from: 'liang520.com', to: '111.19.223.41' }, { lastTime: 1636441200, type: 'ip', leaf: [{ lastTime: 1635267600, type: 'ip', name: '223.114.80.163', from: '223.114.80.163', to: '183.201.220.41' }, { lastTime: 1635292800, type: 'ip', name: '112.43.96.191', from: '112.43.96.191', to: '183.201.220.41' }, { lastTime: 1635292800, type: 'ip', name: '112.43.144.210', from: '112.43.144.210', to: '183.201.220.41' }, { lastTime: 1635289200, type: 'ip', name: '223.116.11.65', from: '223.116.11.65', to: '183.201.220.41' }, { lastTime: 1635282000, type: 'ip', name: '117.191.194.156', from: '117.191.194.156', to: '183.201.220.41' }], name: '183.201.220.41', from: 'liang520.com', to: '183.201.220.41' }, { lastTime: 1636405200, type: 'ip', leaf: [{ lastTime: 1635130800, type: 'ip', name: '36.184.227.203', from: '36.184.227.203', to: '111.1.163.41' }, { lastTime: 1635177600, type: 'ip', name: '223.116.145.228', from: '223.116.145.228', to: '111.1.163.41' }, { lastTime: 1635174000, type: 'ip', name: '36.183.39.156', from: '36.183.39.156', to: '111.1.163.41' }, { lastTime: 1635170400, type: 'ip', name: '112.43.229.151', from: '112.43.229.151', to: '111.1.163.41' }, { lastTime: 1635170400, type: 'ip', name: '223.115.8.121', from: '223.115.8.121', to: '111.1.163.41' }], name: '111.1.163.41', from: 'liang520.com', to: '111.1.163.41' }, { lastTime: 1636401600, type: 'ip', leaf: [{ lastTime: 1635289200, type: 'ip', name: '112.43.33.21', from: '112.43.33.21', to: '36.158.197.41' }, { lastTime: 1635321600, type: 'ip', name: '112.43.41.222', from: '112.43.41.222', to: '36.158.197.41' }, { lastTime: 1635318000, type: 'ip', name: '117.146.227.135', from: '117.146.227.135', to: '36.158.197.41' }, { lastTime: 1635314400, type: 'ip', name: '223.116.31.192', from: '223.116.31.192', to: '36.158.197.41' }, { lastTime: 1635314400, type: 'ip', name: '223.116.29.20', from: '223.116.29.20', to: '36.158.197.41' }], name: '36.158.197.41', from: 'liang520.com', to: '36.158.197.41' }], - name: 'liang520.com', - from: 'youku', - to: 'liang520.com' - }, { lastTime: 1642665600, type: 'domain', leaf: [{ lastTime: 1632672000, type: 'ip', leaf: [{ lastTime: 1632672000, type: 'ip', name: '223.116.225.231', from: '223.116.225.231', to: '123.57.21.195' }], name: '123.57.21.195', from: 'ipinyou.com', to: '123.57.21.195' }, { lastTime: 1633719600, type: 'ip', leaf: [{ lastTime: 1633176000, type: 'ip', name: '112.43.149.103', from: '112.43.149.103', to: '47.93.233.30' }, { lastTime: 1633212000, type: 'ip', name: '223.104.30.238', from: '223.104.30.238', to: '47.93.233.30' }, { lastTime: 1633294800, type: 'ip', name: '223.115.145.178', from: '223.115.145.178', to: '47.93.233.30' }, { lastTime: 1633719600, type: 'ip', name: '223.117.193.110', from: '223.117.193.110', to: '47.93.233.30' }, { lastTime: 1634115600, type: 'ip', name: '223.114.121.227', from: '223.114.121.227', to: '47.93.233.30' }], name: '47.93.233.30', from: 'ipinyou.com', to: '47.93.233.30' }, { lastTime: 1634151600, type: 'ip', leaf: [{ lastTime: 1634151600, type: 'ip', name: '117.145.251.21', from: '117.145.251.21', to: '123.57.221.164' }], name: '123.57.221.164', from: 'ipinyou.com', to: '123.57.221.164' }, { lastTime: 1635206400, type: 'ip', leaf: [{ lastTime: 1635476400, type: 'ip', name: '39.144.202.54', from: '39.144.202.54', to: '111.19.244.41' }, { lastTime: 1635483600, type: 'ip', name: '39.144.30.159', from: '39.144.30.159', to: '111.19.244.41' }, { lastTime: 1635483600, type: 'ip', name: '223.114.244.29', from: '223.114.244.29', to: '111.19.244.41' }, { lastTime: 1635480000, type: 'ip', name: '39.144.206.215', from: '39.144.206.215', to: '111.19.244.41' }, { lastTime: 1635480000, type: 'ip', name: '117.191.177.30', from: '117.191.177.30', to: '111.19.244.41' }], name: '111.19.244.41', from: 'ipinyou.com', to: '111.19.244.41' }, { lastTime: 1635753600, type: 'ip', leaf: [{ lastTime: 1635408000, type: 'ip', name: '223.115.252.24', from: '223.115.252.24', to: '111.19.244.42' }, { lastTime: 1635415200, type: 'ip', name: '223.114.201.80', from: '223.114.201.80', to: '111.19.244.42' }, { lastTime: 1635415200, type: 'ip', name: '223.104.30.187', from: '223.104.30.187', to: '111.19.244.42' }, { lastTime: 1635411600, type: 'ip', name: '112.43.4.171', from: '112.43.4.171', to: '111.19.244.42' }, { lastTime: 1635411600, type: 'ip', name: '112.43.43.54', from: '112.43.43.54', to: '111.19.244.42' }], name: '111.19.244.42', from: 'ipinyou.com', to: '111.19.244.42' }], name: 'ipinyou.com', from: 'youku', to: 'ipinyou.com' }, { lastTime: 1642665600, type: 'domain', leaf: [{ lastTime: 1636124400, type: 'ip', leaf: [{ lastTime: 1634263200, type: 'ip', name: '36.184.13.220', from: '36.184.13.220', to: '111.19.177.228' }, { lastTime: 1634227200, type: 'ip', name: '117.136.26.13', from: '117.136.26.13', to: '111.19.177.228' }, { lastTime: 1634227200, type: 'ip', name: '112.43.92.155', from: '112.43.92.155', to: '111.19.177.228' }, { lastTime: 1634227200, type: 'ip', name: '223.116.208.164', from: '223.116.208.164', to: '111.19.177.228' }, { lastTime: 1634227200, type: 'ip', name: '117.191.179.110', from: '117.191.179.110', to: '111.19.177.228' }], name: '111.19.177.228', from: 'ykimg.com', to: '111.19.177.228' }, { lastTime: 1636038000, type: 'ip', leaf: [{ lastTime: 1635469200, type: 'ip', name: '223.114.81.202', from: '223.114.81.202', to: '112.45.30.241' }, { lastTime: 1635465600, type: 'ip', name: '223.117.210.138', from: '223.117.210.138', to: '112.45.30.241' }, { lastTime: 1635465600, type: 'ip', name: '223.115.56.254', from: '223.115.56.254', to: '112.45.30.241' }, { lastTime: 1635465600, type: 'ip', name: '39.144.201.52', from: '39.144.201.52', to: '112.45.30.241' }, { lastTime: 1635465600, type: 'ip', name: '223.116.160.245', from: '223.116.160.245', to: '112.45.30.241' }], name: '112.45.30.241', from: 'ykimg.com', to: '112.45.30.241' }, { lastTime: 1636038000, type: 'ip', leaf: [{ lastTime: 1634842800, type: 'ip', name: '36.189.108.98', from: '36.189.108.98', to: '110.157.245.244' }, { lastTime: 1635289200, type: 'ip', name: '223.115.67.203', from: '223.115.67.203', to: '110.157.245.244' }, { lastTime: 1635249600, type: 'ip', name: '112.43.109.233', from: '112.43.109.233', to: '110.157.245.244' }, { lastTime: 1635199200, type: 'ip', name: '223.104.233.111', from: '223.104.233.111', to: '110.157.245.244' }, { lastTime: 1635184800, type: 'ip', name: '117.136.26.4', from: '117.136.26.4', to: '110.157.245.244' }], name: '110.157.245.244', from: 'ykimg.com', to: '110.157.245.244' }, { lastTime: 1636048800, type: 'ip', leaf: [{ lastTime: 1633611600, type: 'ip', name: '112.43.0.102', from: '112.43.0.102', to: '111.19.208.248' }, { lastTime: 1633590000, type: 'ip', name: '117.191.194.55', from: '117.191.194.55', to: '111.19.208.248' }, { lastTime: 1633597200, type: 'ip', name: '223.116.177.126', from: '223.116.177.126', to: '111.19.208.248' }, { lastTime: 1633597200, type: 'ip', name: '117.136.26.221', from: '117.136.26.221', to: '111.19.208.248' }, { lastTime: 1633600800, type: 'ip', name: '36.184.122.239', from: '36.184.122.239', to: '111.19.208.248' }], name: '111.19.208.248', from: 'ykimg.com', to: '111.19.208.248' }, { lastTime: 1636052400, type: 'ip', leaf: [{ lastTime: 1634616000, type: 'ip', name: '223.117.146.145', from: '223.117.146.145', to: '222.35.67.244' }, { lastTime: 1634554800, type: 'ip', name: '223.114.4.63', from: '223.114.4.63', to: '222.35.67.244' }, { lastTime: 1634562000, type: 'ip', name: '223.115.57.70', from: '223.115.57.70', to: '222.35.67.244' }, { lastTime: 1634572800, type: 'ip', name: '223.117.129.63', from: '223.117.129.63', to: '222.35.67.244' }, { lastTime: 1634572800, type: 'ip', name: '223.115.23.145', from: '223.115.23.145', to: '222.35.67.244' }], name: '222.35.67.244', from: 'ykimg.com', to: '222.35.67.244' }], name: 'ykimg.com', from: 'youku', to: 'ykimg.com' }, { lastTime: 1642665600, type: 'domain', leaf: [{ lastTime: 1642665600, type: 'app_name', name: 'tiktok', from: 'tiktok', to: 'cmpassport.com' }, { lastTime: 1642665600, type: 'app_name', name: 'baidu', from: 'baidu', to: 'cmpassport.com' }, { lastTime: 1636347600, type: 'ip', leaf: [{ lastTime: 1635609600, type: 'ip', name: '39.144.31.105', from: '39.144.31.105', to: '120.232.169.172' }, { lastTime: 1635930000, type: 'ip', name: '223.104.30.236', from: '223.104.30.236', to: '120.232.169.172' }, { lastTime: 1635883200, type: 'ip', name: '117.136.26.134', from: '117.136.26.134', to: '120.232.169.172' }, { lastTime: 1635868800, type: 'ip', name: '117.136.26.18', from: '117.136.26.18', to: '120.232.169.172' }, { lastTime: 1635865200, type: 'ip', name: '223.104.30.64', from: '223.104.30.64', to: '120.232.169.172' }], name: '120.232.169.172', from: 'cmpassport.com', to: '120.232.169.172' }, { lastTime: 1636527600, type: 'ip', leaf: [{ lastTime: 1635246000, type: 'ip', name: '39.144.202.15', from: '39.144.202.15', to: '211.136.10.131' }, { lastTime: 1635055200, type: 'ip', name: '117.190.174.200', from: '117.190.174.200', to: '211.136.10.131' }, { lastTime: 1635073200, type: 'ip', name: '223.104.30.88', from: '223.104.30.88', to: '211.136.10.131' }, { lastTime: 1635087600, type: 'ip', name: '39.144.201.183', from: '39.144.201.183', to: '211.136.10.131' }, { lastTime: 1635098400, type: 'ip', name: '39.144.196.105', from: '39.144.196.105', to: '211.136.10.131' }], name: '211.136.10.131', from: 'cmpassport.com', to: '211.136.10.131' }, { lastTime: 1636527600, type: 'ip', leaf: [{ lastTime: 1635573600, type: 'ip', name: '223.104.30.205', from: '223.104.30.205', to: '120.196.213.2' }, { lastTime: 1634760000, type: 'ip', name: '117.136.26.67', from: '117.136.26.67', to: '120.196.213.2' }, { lastTime: 1634763600, type: 'ip', name: '223.104.30.124', from: '223.104.30.124', to: '120.196.213.2' }, { lastTime: 1634850000, type: 'ip', name: '117.136.26.151', from: '117.136.26.151', to: '120.196.213.2' }, { lastTime: 1634853600, type: 'ip', name: '39.144.201.52', from: '39.144.201.52', to: '120.196.213.2' }], name: '120.196.213.2', from: 'cmpassport.com', to: '120.196.213.2' }, { lastTime: 1636538400, type: 'ip', leaf: [{ lastTime: 1635289200, type: 'ip', name: '39.144.202.190', from: '39.144.202.190', to: '120.232.169.169' }, { lastTime: 1635213600, type: 'ip', name: '223.116.79.122', from: '223.116.79.122', to: '120.232.169.169' }, { lastTime: 1635217200, type: 'ip', name: '36.184.9.130', from: '36.184.9.130', to: '120.232.169.169' }, { lastTime: 1635220800, type: 'ip', name: '112.43.130.178', from: '112.43.130.178', to: '120.232.169.169' }, { lastTime: 1635231600, type: 'ip', name: '117.191.193.141', from: '117.191.193.141', to: '120.232.169.169' }], name: '120.232.169.169', from: 'cmpassport.com', to: '120.232.169.169' }, { lastTime: 1636606800, type: 'ip', leaf: [{ lastTime: 1635382800, type: 'ip', name: '223.104.30.122', from: '223.104.30.122', to: '117.161.4.167' }, { lastTime: 1635408000, type: 'ip', name: '223.117.25.236', from: '223.117.25.236', to: '117.161.4.167' }, { lastTime: 1635404400, type: 'ip', name: '223.117.0.251', from: '223.117.0.251', to: '117.161.4.167' }, { lastTime: 1635404400, type: 'ip', name: '223.116.192.44', from: '223.116.192.44', to: '117.161.4.167' }, { lastTime: 1635404400, type: 'ip', name: '112.43.45.140', from: '112.43.45.140', to: '117.161.4.167' }], name: '117.161.4.167', from: 'cmpassport.com', to: '117.161.4.167' }], name: 'cmpassport.com', from: 'youku', to: 'cmpassport.com' }], - name: 'youku' - }, - resultType: 'relationTree' - }, - originalUrl: 'http://192.168.44.55:9999/cn/v1/entityExplorer', - success: true, - status: 200 -} -export default { data, data2, data3, data4, data5 } diff --git a/src/views/charts/charts/tools.js b/src/views/charts/charts/tools.js index 7208a5b3..3897ee43 100644 --- a/src/views/charts/charts/tools.js +++ b/src/views/charts/charts/tools.js @@ -383,7 +383,6 @@ export function categoryVerticalFormatter (params) { return str } export function timeVerticalFormatter (params) { - console.log(params) let str = '
' params.forEach((item, i) => { const tData = item.data[0] @@ -406,7 +405,6 @@ export function timeVerticalFormatter (params) { return str } export function timeBarTooltipFormatter (params, type) { - console.log(params, type) let index1, index0 if (type === 'vertical') { index0 = 0 @@ -435,7 +433,6 @@ export function timeBarTooltipFormatter (params, type) { return str } export function categoryBarTooltipFormatter (params, type) { - console.log(params, type) let index1, index0 if (type === 'vertical') { index0 = 0 diff --git a/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue b/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue index 36b0ab23..85c1433b 100644 --- a/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue +++ b/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue @@ -146,7 +146,7 @@ export default { chartDom.innerHTML = '-' } }).catch(error => { - console.log(error) + console.error(error) const chartDom = document.getElementById(`detectionMetricChartApp${this.detection.appName}`) chartDom.innerHTML = '-' }).finally(() => { diff --git a/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue b/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue index 8de2dc16..8dddc86a 100644 --- a/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue +++ b/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue @@ -162,7 +162,6 @@ export default { this.metricList.sort(reverseSortBy(0))// 将返回的数据按时间降序排序，方便找到实线和虚线的交点 // let endIndex = (this.metricList). findIndex ((item) => item[0] <= 1435781434781 ); - console.log(this.detection) let endIndex = (this.metricList).findIndex((item) => item[0] <= this.detection.endTime) endIndex = this.metricList.length - endIndex