From a00d8465c065c9ade0d1a1f4dcf03d935fea6d0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=BB=E7=8F=AE=E5=AE=87?= <peiyu_ren@163.com>
Date: Tue, 30 Jan 2024 15:50:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B2=E7=BA=BF=E5=9B=BE=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E4=B8=AD=EF=BC=8C=E8=AF=B7=E6=B1=82=E6=8E=A5=E5=8F=A3=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=20loading=EF=BC=8C=E5=8F=8A=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=B8=80=E4=BA=9B=E9=97=AE=E9=A2=98=20=E5=88=A0=E9=99=A4memory?=
 =?UTF-8?q?=E3=80=81disk=0B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../analysisMonitor/alarmAnalysis/index.vue   | 93 +++++++++++--------
 .../databaseMonitor/instances/monitor.vue     | 48 ++++++----
 .../emailMonitor/instances/index.vue          |  8 +-
 .../serverMonitor/instances/index.vue         | 21 ++---
 4 files changed, 101 insertions(+), 69 deletions(-)

diff --git a/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue b/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue
index 1659ec2..ba9886e 100644
--- a/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue
+++ b/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue
@@ -1,17 +1,19 @@
 <template>
   <div style="height: 100%">
     <SearchBar type="alarmAnalysis" @search="handleSearch"></SearchBar>
-    <div class="chart-layout" id="analysisChartBar"></div>
-    <div class="chart-box">
-      <div class="chart-box-left">
-        <BoxTitle title="Station Alarm number"></BoxTitle>
-        <div class="chart-box-left-bar" id="chartLeft"></div>
+    <a-spin :spinning="spinning">
+      <div class="chart-layout" id="analysisChartBar"></div>
+      <div class="chart-box">
+        <div class="chart-box-left">
+          <BoxTitle title="Station Alarm number"></BoxTitle>
+          <div class="chart-box-left-bar" id="chartLeft"></div>
+        </div>
+        <div class="chart-box-right">
+          <BoxTitle title="Anaysis Sources Alarms"></BoxTitle>
+          <div class="chart-box-right-pie" id="chartRight"></div>
+        </div>
       </div>
-      <div class="chart-box-right">
-        <BoxTitle title="Anaysis Sources Alarms"></BoxTitle>
-        <div class="chart-box-right-pie" id="chartRight"></div>
-      </div>
-    </div>
+    </a-spin>
   </div>
 </template>
 
@@ -29,6 +31,7 @@ export default {
   },
   data() {
     return {
+      spinning: false,
       xData: [],
       yData: [],
       xData_left: [],
@@ -50,6 +53,7 @@ export default {
         endDate,
         types,
       }
+      this.spinning = true
       this.getAnalysisLogBar({ startDate, endDate })
       this.getStationNum({ startDate, endDate })
       this.getAnalysisSource({ startDate, endDate })
@@ -59,45 +63,60 @@ export default {
         startDate: obj.startDate,
         endDate: obj.endDate,
       }
-      getAction('/alarmAnalysisLog/byTime', params).then((res) => {
-        if (res.success) {
-          this.xData = res.result.xData
-          this.yData = res.result.yData
-          this.drawAnalysis_bar()
-        } else {
-          this.$message.warning('This operation fails. Contact your system administrator')
-        }
-      })
+      getAction('/alarmAnalysisLog/byTime', params)
+        .then((res) => {
+          this.spinning = false
+          if (res.success) {
+            this.xData = res.result.xData
+            this.yData = res.result.yData
+            this.drawAnalysis_bar()
+          } else {
+            this.$message.warning('This operation fails. Contact your system administrator')
+          }
+        })
+        .finally(() => {
+          this.spinning = false
+        })
     },
     getStationNum(obj) {
       let params = {
         startDate: obj.startDate,
         endDate: obj.endDate,
       }
-      getAction('/alarmAnalysisLog/byStatoin', params).then((res) => {
-        if (res.success) {
-          this.xData_left = res.result.xData
-          this.yData_left = res.result.yData
-          this.drawLeftChart()
-        } else {
-          this.$message.warning('This operation fails. Contact your system administrator')
-        }
-      })
+      getAction('/alarmAnalysisLog/byStatoin', params)
+        .then((res) => {
+          this.spinning = false
+          if (res.success) {
+            this.xData_left = res.result.xData
+            this.yData_left = res.result.yData
+            this.drawLeftChart()
+          } else {
+            this.$message.warning('This operation fails. Contact your system administrator')
+          }
+        })
+        .finally(() => {
+          this.spinning = false
+        })
     },
     getAnalysisSource(obj) {
       let params = {
         startDate: obj.startDate,
         endDate: obj.endDate,
       }
-      getAction('/alarmAnalysisLog/bySource', params).then((res) => {
-        if (res.success) {
-          this.pieData = res.result.pieData
-          this.pieTotal = res.result.pieTotal
-          this.drawRightChart()
-        } else {
-          this.$message.warning('This operation fails. Contact your system administrator')
-        }
-      })
+      getAction('/alarmAnalysisLog/bySource', params)
+        .then((res) => {
+          this.spinning = false
+          if (res.success) {
+            this.pieData = res.result.pieData
+            this.pieTotal = res.result.pieTotal
+            this.drawRightChart()
+          } else {
+            this.$message.warning('This operation fails. Contact your system administrator')
+          }
+        })
+        .finally(() => {
+          this.spinning = false
+        })
     },
     drawAnalysis_bar() {
       let myChart = echarts.init(document.getElementById('analysisChartBar'))
diff --git a/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue b/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
index 2695d99..a6c7c9d 100644
--- a/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
+++ b/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
@@ -2,21 +2,23 @@
   <div style="height: 100%">
     <ConditionBox :value="queryParams" @change="getData" @refresh="getData"></ConditionBox>
     <div class="monitor-content">
-      <a-row :gutter="10" style="height: 100%">
-        <a-col :span="12" style="height: 33.3333%" v-for="(el, i) in chartData" :key="i">
-          <div class="monitor-content-item">
-            <AreaChart
-              :title="el.title"
-              :layout="`area${i}`"
-              :color="el.color"
-              :dataSource="el.list"
-              :newUnits="el.newUnits"
-              :units="el.units"
-            >
-            </AreaChart>
-          </div>
-        </a-col>
-      </a-row>
+      <a-spin :spinning="spinning">
+        <a-row :gutter="10" style="height: 100%">
+          <a-col :span="12" style="height: 33.3333%" v-for="(el, i) in chartData" :key="i">
+            <div class="monitor-content-item">
+              <AreaChart
+                :title="el.title"
+                :layout="`area${i}`"
+                :color="el.color"
+                :dataSource="el.list"
+                :newUnits="el.newUnits"
+                :units="el.units"
+              >
+              </AreaChart>
+            </div>
+          </a-col>
+        </a-row>
+      </a-spin>
       <!-- <div style="height: auto; margin-top: 15px; padding-right: 10px">
         <BoxTitle title="Connect List"></BoxTitle>
         <a-row :gutter="20" style="height: auto; margin-top: 15px">
@@ -60,6 +62,7 @@ export default {
   },
   data() {
     return {
+      spinning: false,
       queryParams: {
         hostId: '',
         start: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
@@ -360,7 +363,8 @@ export default {
   methods: {
     // 获取数据
     async getData() {
-      const hide = this.$message.loading('loading...', 0)
+      // const hide = this.$message.loading('loading...', 0)
+      this.spinning = true
       try {
         const { success, result, message } = await getAction('/systemMonitor/dbDetail', this.queryParams)
         if (success) {
@@ -383,8 +387,10 @@ export default {
         }
       } catch (error) {
         console.error(error)
+        this.spinning = false
       } finally {
-        hide()
+        // hide()
+        this.spinning = false
       }
     },
     //生成图表（运管系统代码）
@@ -455,6 +461,14 @@ export default {
   margin-top: 10px;
   overflow-y: auto;
   overflow-x: hidden;
+  /deep/.ant-spin-nested-loading {
+    width: 100%;
+    height: 100%;
+  }
+  /deep/.ant-spin-container {
+    width: 100%;
+    height: 100%;
+  }
   &-item {
     width: 100%;
     height: 100%;
diff --git a/src/views/abnormalAlarm/emailMonitor/instances/index.vue b/src/views/abnormalAlarm/emailMonitor/instances/index.vue
index ae16b65..9f5010b 100644
--- a/src/views/abnormalAlarm/emailMonitor/instances/index.vue
+++ b/src/views/abnormalAlarm/emailMonitor/instances/index.vue
@@ -271,18 +271,18 @@ export default {
     },
     onEmailChange(val) {
       this.spinning = true
-      this.guageStore.clear()
+      if (this.guageStore) this.guageStore.clear()
       this.emailId = val
     },
     onDateChange(val) {
       this.spinning = true
-      this.areaMailLine.clear()
+      if (this.areaMailLine) this.areaMailLine.clear()
       this.startDate = this.getBeforeDate(val - 1)
       this.getEmailStatistics()
     },
     onRangeDateChange(date, dateString) {
       this.spinning = true
-      this.areaMailLine.clear()
+      if (this.areaMailLine) this.areaMailLine.clear()
       this.startDate = dateString[0]
       this.endDate = dateString[1]
       this.getEmailStatistics()
@@ -315,7 +315,7 @@ export default {
           s = s.substring(0, s.length - 1)
           res.result.usage = s
           this.emailSpace = res.result
-          this.drawGuageStore()
+          // this.drawGuageStore()
         } else {
           this.$message.warning('This operation fails. Contact your system administrator')
         }
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/index.vue b/src/views/abnormalAlarm/serverMonitor/instances/index.vue
index 95c87be..829086b 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/index.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="height: 100%;">
-    <a-card :bordered="false" style="height:100%;margin-left: 20px;">
+  <div style="height: 100%">
+    <a-card :bordered="false" style="height: 100%; margin-left: 20px">
       <a-tabs default-active-key="detais" @change="handleTabChange">
         <a-tab-pane key="detais" tab="DETAILS">
           <Details></Details>
@@ -14,22 +14,22 @@
         <a-tab-pane key="cpu" tab="CPU">
           <Cpu></Cpu>
         </a-tab-pane>
-        <a-tab-pane key="memory" tab="MEMORY">
+        <!-- <a-tab-pane key="memory" tab="MEMORY">
           MEMORY
         </a-tab-pane>
         <a-tab-pane key="disk" tab="DISK">
           DISK
-        </a-tab-pane>
+        </a-tab-pane> -->
       </a-tabs>
     </a-card>
   </div>
 </template>
 
 <script>
-import Details from './details.vue';
-import ServiceProcess from './serviceProcess.vue';
-import Monitor from './monitor.vue';
-import Cpu from './cpu.vue';
+import Details from './details.vue'
+import ServiceProcess from './serviceProcess.vue'
+import Monitor from './monitor.vue'
+import Cpu from './cpu.vue'
 export default {
   components: {
     Details,
@@ -39,13 +39,12 @@ export default {
   },
   methods: {
     handleTabChange(key) {
-      console.log(key);
+      console.log(key)
     },
   },
 }
 </script>
 
 <style lang="less" scoped>
-  @import "~@/assets/less/TabMenu.less";
-
+@import '~@/assets/less/TabMenu.less';
 </style>
\ No newline at end of file