From c95cce51b677f2b042ca594dc08ade824ca08e86 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Mon, 10 Oct 2022 17:18:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20npm=20=E6=A6=82=E5=86=B5=E5=88=86?=
 =?UTF-8?q?=E6=95=B0=E5=9B=BE=20No=20data=20=E5=8D=A0=E4=BD=8D=20,npm=20?=
 =?UTF-8?q?=E4=B8=8B=E9=92=BB=E5=9C=B0=E5=9B=BE=E6=A0=87=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/charts2/npmAppCategoryScore.scss          |  3 +++
 src/assets/css/components/views/charts2/npmMap.scss |  9 +++++++++
 .../charts2/charts/npm/NpmAppCategoryScore.vue      |  2 +-
 src/views/charts2/charts/npm/NpmIpMap.vue           | 13 +++++++++++--
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
index 79132709..55c57468 100644
--- a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
+++ b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
@@ -8,6 +8,9 @@
     height: 100%;
     display: flex;
     flex: 1;
+    .npm-app-letter-no-data.npm-app-letter {
+      min-width: 500px;
+    }
     .npm-app-letter {
       display: flex;
       flex-direction: column-reverse;
diff --git a/src/assets/css/components/views/charts2/npmMap.scss b/src/assets/css/components/views/charts2/npmMap.scss
index 5be956db..9ca70b81 100644
--- a/src/assets/css/components/views/charts2/npmMap.scss
+++ b/src/assets/css/components/views/charts2/npmMap.scss
@@ -1,3 +1,12 @@
+.cn-chart__map-title {
+  font-size: 14px;
+  color: #353636;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+.cn-chart__map-drilldown.cn-chart__map {
+  height: calc(100% - 30px);
+}
 .cn-chart__map {
   height: 100%;
   width: 100%;
diff --git a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
index daaf99c3..3744f997 100644
--- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="npm-app">
     <div class="npm-app-left">
-      <div class="npm-app-letter">
+      <div class="npm-app-letter" :class="{'npm-app-letter-no-data': isNoData}">
         <div v-for="(letter, index) in colorPatchData" :key="index">
           {{letter.letter}}
         </div>
diff --git a/src/views/charts2/charts/npm/NpmIpMap.vue b/src/views/charts2/charts/npm/NpmIpMap.vue
index 56f942cb..c92bcbf4 100644
--- a/src/views/charts2/charts/npm/NpmIpMap.vue
+++ b/src/views/charts2/charts/npm/NpmIpMap.vue
@@ -1,11 +1,12 @@
 <template>
-  <div class="cn-chart__map">
+  <div class="cn-chart__map-title" v-if="tabIndex == 1">{{$t('npm.clientLocation')}}</div>
+  <div class="cn-chart__map" :class="{'cn-chart__map-drilldown': tabIndex == 1}">
     <div class="map-canvas" id="npmDrillDownMap"></div>
   </div>
 </template>
 
 <script>
-import { shallowRef } from 'vue'
+import { ref, shallowRef } from 'vue'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
 import { computeScore, getGeoData } from '@/utils/tools'
@@ -15,8 +16,16 @@ 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 { useRoute } from 'vue-router'
 export default {
   name: 'NpmIpMap',
+  setup () {
+    const { query } = useRoute()
+    const tabIndex = ref(query.tabIndex || '')
+    return {
+      tabIndex
+    }
+  },
   data () {
     return {
       myChart: null,