From 1230ea3d90f22fac11adbf09d2aca08398f638ab Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Wed, 1 Mar 2023 17:08:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BF=90=E7=BB=B4=E7=AE=A1=E7=90=86=20?=
 =?UTF-8?q?=E4=BB=AA=E8=A1=A8=E7=9B=98=20=E6=96=B0=E5=A2=9Eempty=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AIcon/index.tsx                  |  1 +
 src/views/link/DashBoard/components/Cpu.vue     | 13 ++++++++++---
 src/views/link/DashBoard/components/Jvm.vue     | 13 ++++++++++---
 src/views/link/DashBoard/components/Network.vue | 12 +++++++-----
 4 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/components/AIcon/index.tsx b/src/components/AIcon/index.tsx
index 6e1682a0..17c9c963 100644
--- a/src/components/AIcon/index.tsx
+++ b/src/components/AIcon/index.tsx
@@ -60,6 +60,7 @@ const iconKeys = [
     'RedoOutlined',
     'VideoCameraOutlined',
     'HistoryOutlined',
+    'CalendarOutlined',
 ]
 
 const Icon = (props: {type: string}) => {
diff --git a/src/views/link/DashBoard/components/Cpu.vue b/src/views/link/DashBoard/components/Cpu.vue
index 0dd9da8f..6f62f3e5 100644
--- a/src/views/link/DashBoard/components/Cpu.vue
+++ b/src/views/link/DashBoard/components/Cpu.vue
@@ -10,7 +10,9 @@
                     format="YYYY-MM-DD HH:mm:ss"
                     v-model="data.time"
                 >
-                    <template #suffixIcon><a-icon type="calendar" /></template>
+                    <template #suffixIcon
+                        ><AIcon type="CalendarOutlined"
+                    /></template>
                     <template #renderExtraFooter>
                         <a-radio-group
                             default-value="a"
@@ -31,7 +33,8 @@
                     >
                 </a-range-picker>
             </div>
-            <div ref="chartRef" style="width: 100%; height: 300px"></div>
+            <a-empty v-if="empty" class="empty" />
+            <div v-else ref="chartRef" style="width: 100%; height: 300px"></div>
         </div>
     </a-spin>
 </template>
@@ -50,8 +53,8 @@ import {
 } from './tool.ts';
 
 const chartRef = ref<Record<string, any>>({});
-
 const loading = ref(false);
+const empty = ref(false);
 const data = ref({
     type: 'hour',
     time: [null, null],
@@ -140,6 +143,7 @@ const handleCpuOptions = (optionsData, xAxis) => {
                 : typeDataLine,
         };
         myChart.setOption(options);
+        xAxis.length === 0 && (empty.value = true);
         window.addEventListener('resize', function () {
             myChart.resize();
         });
@@ -186,4 +190,7 @@ watch(
         margin-top: 8px;
     }
 }
+.empty {
+    height: 300px;
+}
 </style>
diff --git a/src/views/link/DashBoard/components/Jvm.vue b/src/views/link/DashBoard/components/Jvm.vue
index f876e0ae..44671b76 100644
--- a/src/views/link/DashBoard/components/Jvm.vue
+++ b/src/views/link/DashBoard/components/Jvm.vue
@@ -10,7 +10,9 @@
                     format="YYYY-MM-DD HH:mm:ss"
                     v-model="data.time"
                 >
-                    <template #suffixIcon><a-icon type="calendar" /></template>
+                    <template #suffixIcon
+                        ><AIcon type="CalendarOutlined"
+                    /></template>
                     <template #renderExtraFooter>
                         <a-radio-group
                             default-value="a"
@@ -31,7 +33,8 @@
                     >
                 </a-range-picker>
             </div>
-            <div ref="chartRef" style="width: 100%; height: 300px"></div>
+            <a-empty v-if="empty" class="empty" />
+            <div v-else ref="chartRef" style="width: 100%; height: 300px"></div>
         </div>
     </a-spin>
 </template>
@@ -50,7 +53,7 @@ import {
 } from './tool.ts';
 
 const chartRef = ref<Record<string, any>>({});
-
+const empty = ref(false);
 const loading = ref(false);
 const data = ref({
     type: 'hour',
@@ -144,6 +147,7 @@ const handleJVMOptions = (optionsData, xAxis) => {
                 : typeDataLine,
         };
         myChart.setOption(options);
+        xAxis.length === 0 && (empty.value = true);
         window.addEventListener('resize', function () {
             myChart.resize();
         });
@@ -190,4 +194,7 @@ watch(
         margin-top: 8px;
     }
 }
+.empty {
+    height: 300px;
+}
 </style>
diff --git a/src/views/link/DashBoard/components/Network.vue b/src/views/link/DashBoard/components/Network.vue
index 2db01cc6..46188f4f 100644
--- a/src/views/link/DashBoard/components/Network.vue
+++ b/src/views/link/DashBoard/components/Network.vue
@@ -43,12 +43,12 @@
                 </div>
             </div>
             <div>
+                <a-empty v-if="empty" class="empty" />
                 <div
+                    v-else
                     ref="chartRef"
-                    v-if="flag"
                     style="width: 100%; height: 350px"
                 ></div>
-                <a-empty v-else style="height: 300px; margin-top: 120px" />
             </div>
         </div>
     </a-spin>
@@ -67,10 +67,8 @@ import moment from 'moment';
 import * as echarts from 'echarts';
 
 const chartRef = ref<Record<string, any>>({});
-
-const flag = ref(true);
+const empty = ref(false);
 const loading = ref(false);
-const myChart = ref(null);
 const data = ref({
     type: 'bytesRead',
     time: {
@@ -163,6 +161,7 @@ const handleNetworkOptions = (optionsData, xAxis) => {
                 : typeDataLine,
         };
         myChart.setOption(options);
+        // xAxis.length === 0 && (empty.value = true);
         window.addEventListener('resize', function () {
             myChart.resize();
         });
@@ -216,4 +215,7 @@ watch(
     display: flex;
     align-items: center;
 }
+.empty {
+    height: 300px;
+}
 </style>