diff --git a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss index 2fe2eff8..ff603544 100644 --- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss +++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss @@ -11,7 +11,7 @@ width: 550px; height: 350px; - .cn-chart__map { + .cn-chart { height: 100%; width: 100%; .chart-drawing { diff --git a/src/mixins/common.js b/src/mixins/common.js index 5abb4131..c30ab9fa 100644 --- a/src/mixins/common.js +++ b/src/mixins/common.js @@ -53,7 +53,7 @@ export default { return str }, parseMsDate (time, format = 'YYYY-MM-DD HH:mm:ss') { - return this.dayJs.tz(getMillisecond(time)).format(format) + return this.dayJs.tz(parseFloat(time)).format(format) } } } diff --git a/src/utils/api.js b/src/utils/api.js index 5ccd7217..bd22518f 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -55,6 +55,7 @@ export const api = { entityDomainDetailSecurity: '/interface/entity/detail/overview/domain/security', // ip detail entityIpDetailTraffic: '/interface/entity/detail/overview/ip/traffic', + entityIpDetailTrafficMap: '/interface/entity/detail/ip/trafficMap', entityIpDetailRelation: '/interface/entity/detail/overview/ip/relation', entityIpDetailAlert: '/interface/entity/detail/overview/ip/alert', entityIpDetailSecurity: '/interface/entity/detail/overview/ip/security' diff --git a/src/views/charts/Chart2.vue b/src/views/charts/Chart2.vue index 68b665a8..6b5b3a22 100644 --- a/src/views/charts/Chart2.vue +++ b/src/views/charts/Chart2.vue @@ -253,7 +253,7 @@ export default { }, computed: { isNoData () { - return !this.loading && (_.isEmpty(this.chartData) || this.isError) && !this.isSingleValue && !this.isTabs && !this.isDomainDnsRecord && !this.isCryptocurrencyEventList && !this.isActiveIpTable + return !this.loading && (_.isEmpty(this.chartData) || this.isError) && !this.isSingleValue && !this.isTabs && !this.isDomainDnsRecord && !this.isCryptocurrencyEventList && !this.isActiveIpTable && !this.isMap }, chartOption () { if (this.customChartOption) { @@ -271,6 +271,13 @@ export default { this.$emit('showLoading', show) } }, + watch: { + chartData: { + deep: true, + handler (n) { + } + } + }, setup (props) { return { isEcharts: isEcharts(props.chartInfo.type), diff --git a/src/views/charts/charts/ChartMap.vue b/src/views/charts/charts/ChartMap.vue index 755232e0..76b81f58 100644 --- a/src/views/charts/charts/ChartMap.vue +++ b/src/views/charts/charts/ChartMap.vue @@ -202,6 +202,7 @@ export default { deep: true, handler (n) { this.initMap(`chart${this.chartInfo.id}`) + console.log(n) } } }, diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue index 16d0faca..a307ce53 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue @@ -96,12 +96,14 @@
- + >
@@ -110,24 +112,27 @@ import entityDetailMixin from './entityDetailMixin' import { api } from '@/utils/api' import { unitTypes } from '@/utils/constants' import unitConvert from '@/utils/unit-convert' -import Chart from '@/views/charts/Chart' +import Chart2 from '@/views/charts/Chart2' import _ from 'lodash' +import {get} from "@/utils/http"; export default { name: 'Ip', mixins: [entityDetailMixin], components: { - Chart + Chart2 }, data () { return { // entityData: {} entityType: 'ip', trafficUrl: api.entityIpDetailTraffic, + trafficUrlMap: api.entityIpDetailTrafficMap, relationUrl: api.entityIpDetailRelation, alertUrl: api.entityIpDetailAlert, securityUrl: api.entityIpDetailSecurity, - listMode: 'list' + listMode: 'list', + chartData: null } }, methods: { @@ -135,14 +140,26 @@ export default { const queryParams = { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000), - ip: this.entityData.ipAddr + ip: this.entityData.ipAddr, + country: this.entityData.ipLocationCountry } return queryParams }, handleRelationData (result) { this.entityData.appCount = result.appCount this.entityData.domainCount = result.domainCount - } + }, + chartGetMap () { + get((this.trafficUrlMap), this.getQueryParams()).then(response => { + if (response.code === 200) { + this.chartData = response.data.result + console.log(this.chartData) + } + }) + }, + }, + mounted() { + this.$nextTick(() => { setTimeout(() => { this.chartGetMap()}, 200)}) }, setup (props) { const entityCopy = {