fix: 修复Entity Explorer 图表组件引入错误问题

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 {

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)
     }
   }
 }

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'

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),

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)
       }
     }
   },

src/views/entityExplorer/entityList/detailOverview/Ip.vue

@@ -96,12 +96,14 @@
     </div>
   </div>
   <div class="overview-map">
-    <chart
+    <chart2
-        :chart="chart"
+        :chart-info="chart"
+        :chart-data="chartData"
         :entity="entityCopy"
+        :query-params="getQueryParams"
         :hide-header="true"
         @getCurrentTimeRange="getCurrentTimeRange"
-    ></chart>
+    ></chart2>
   </div>
 </template>
 
@@ -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 = {