From 5d2fa26ab6ab5af287b9e96801f7c295b508fd07 Mon Sep 17 00:00:00 2001
From: changcode <changcode@163.com>
Date: Tue, 6 Sep 2022 14:20:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20npm=20=3D>=20overview=20=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E8=AF=84=E5=88=86=E5=9B=BE=20=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20no=20data=20=E5=8D=A0=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/views/charts2/npmAppCategoryScore.scss  | 6 ++----
 src/views/charts2/charts/npm/NpmAppCategoryScore.vue       | 7 ++++++-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
index 3a095c79..a2dfa819 100644
--- a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
+++ b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
@@ -2,10 +2,11 @@
   $grey:#353636;
   height: 100%;
   width: 100%;
-  position: relative;
+  display: flex;
   .npm-app-left {
     height: 100%;
     display: flex;
+    flex: 1;
     .npm-app-letter {
       display: flex;
       flex-direction: column-reverse;
@@ -62,10 +63,7 @@
     }
   }
   .npm-app-right {
-    position: absolute;
     width: calc(100% - 500px);
-    right: 0;
-    top: 0;
     height: 100%;
     border: 1px solid #E2E5EC;
     border-radius: 4px;
diff --git a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
index 0d935735..4a139505 100644
--- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
@@ -6,7 +6,8 @@
           {{letter.letter}}
         </div>
       </div>
-      <div class="npm-app-body">
+      <chart-no-data v-if="isNoData"></chart-no-data>
+      <div class="npm-app-body" v-else>
         <div class="npm-app-body-patch" v-for="(data, index) in tableData" :key="index">
           <div class="npm-app-body-icon"><span><i :class="data.icon"></i></span></div>
           <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': data.score >= index + 1}"></div>
@@ -113,6 +114,7 @@ import { getSecond } from '@/utils/date-util'
 import { get } from '@/utils/http'
 import { getChainRatio, computeScore } from '@/utils/tools'
 import chartMixin from '@/views/charts2/chart-mixin'
+import ChartNoData from "@/views/charts/charts/ChartNoData";
 export default {
   name: 'NpmAppCategoryScore',
   data () {
@@ -139,6 +141,9 @@ export default {
       isNoData: false
     }
   },
+  components: {
+    ChartNoData
+  },
   mixins: [chartMixin],
   watch: {
     timeFilter: {