feat: 运维管理 仪表盘 新增empty状态

src/components/AIcon/index.tsx

@@ -60,6 +60,7 @@ const iconKeys = [
     'RedoOutlined',
     'VideoCameraOutlined',
     'HistoryOutlined',
+    'CalendarOutlined',
 ]
 
 const Icon = (props: {type: string}) => {

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>

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>

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 empty = ref(false);
-const flag = ref(true);
 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>