曲线图界面中，请求接口增加 loading，及修复一些问题

删除memory、disk
2024-01-30 15:50:19 +08:00 · 2024-01-30 15:50:19 +08:00 · a00d8465c0
commit a00d8465c0
parent 2f00795b75
4 changed files with 101 additions and 69 deletions
--- a/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue
+++ b/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue
@ -1,6 +1,7 @@
 <template>
  <div style="height: 100%">
    <SearchBar type="alarmAnalysis" @search="handleSearch"></SearchBar>
+    <a-spin :spinning="spinning">
      <div class="chart-layout" id="analysisChartBar"></div>
      <div class="chart-box">
        <div class="chart-box-left">
@ -12,6 +13,7 @@
          <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,7 +63,9 @@ export default {
        startDate: obj.startDate,
        endDate: obj.endDate,
      }
-      getAction('/alarmAnalysisLog/byTime', params).then((res) => {
+      getAction('/alarmAnalysisLog/byTime', params)
+        .then((res) => {
+          this.spinning = false
          if (res.success) {
            this.xData = res.result.xData
            this.yData = res.result.yData
@ -68,13 +74,18 @@ export default {
            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) => {
+      getAction('/alarmAnalysisLog/byStatoin', params)
+        .then((res) => {
+          this.spinning = false
          if (res.success) {
            this.xData_left = res.result.xData
            this.yData_left = res.result.yData
@ -83,13 +94,18 @@ export default {
            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) => {
+      getAction('/alarmAnalysisLog/bySource', params)
+        .then((res) => {
+          this.spinning = false
          if (res.success) {
            this.pieData = res.result.pieData
            this.pieTotal = res.result.pieTotal
@ -98,6 +114,9 @@ export default {
            this.$message.warning('This operation fails. Contact your system administrator')
          }
        })
+        .finally(() => {
+          this.spinning = false
+        })
    },
    drawAnalysis_bar() {
      let myChart = echarts.init(document.getElementById('analysisChartBar'))
--- a/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
+++ b/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
@ -2,6 +2,7 @@
  <div style="height: 100%">
    <ConditionBox :value="queryParams" @change="getData" @refresh="getData"></ConditionBox>
    <div class="monitor-content">
+      <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">
@ -17,6 +18,7 @@
            </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%;
--- 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')
        }
--- 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>