alarm 模块增加loading效果

src/views/abnormalAlarm/alarmCenter/alarmContactGroup/index.vue

@@ -9,7 +9,8 @@
       </a-button>
     </div>
     <div class="group-content">
-      <a-collapse :default-active-key="contactGroups[0].id" :bordered="false">
+      <a-spin :spinning="spinning">
+        <a-collapse :activeKey="activeKey" :bordered="false">
           <a-collapse-panel :key="item.id" :style="customStyle" v-for="item in contactGroups" >
             <template slot="header">
               {{ item.name }}
@@ -47,6 +48,7 @@
             </custom-table>
           </a-collapse-panel>
         </a-collapse>
+      </a-spin>
       <a-pagination 
         size="small"
         v-model="page.currentPage" 
@@ -149,9 +151,11 @@ const columns = [
 export default {
   data() {
     return {
+      activeKey:"",
+      spinning:false,
       page: {
         currentPage:1,
-        pageSize: 10,
+        pageSize: 3,
         pageSizeOptions: ['10', '20', '30'],
         total:0
       },
@@ -185,13 +189,17 @@ export default {
       this.getAlarmGroup()
     },
     getAlarmGroup() {
+      this.spinning = true
       let params = {
         pageNo: this.page.currentPage,
-        pageSize:this.page.pageSize
+        // pageSize:this.page.pageSize
+        pageSize:3
       }
       getAction("/alarmContactGroup/findPage", params).then(res => {
+        this.spinning = false
         if (res.success) {
           this.contactGroups = res.result.records
+          this.activeKey = this.contactGroups[0].id
           this.page.total = res.result.total
         } else {
           this.$message.warning("This operation fails. Contact your system administrator")
@@ -371,16 +379,21 @@ export default {
   height: calc(100% - 65px);
   margin-left: 20px;
   position: relative;
+  .ant-spin-nested-loading{
+    width: 100%;
+    height: calc(100% - 30px);
+    overflow: auto;
+  }
   .header-sub{
     margin-left: 20px;
     font-family: MicrosoftYaHei;
     font-size: 16px;
     color: #ade6ee;
   }
-  .ant-collapse{
-    height: calc(100% - 30px);
-    overflow: auto;
-  }
+  // .ant-collapse{
+  //   height: calc(100% - 30px);
+  //   overflow: auto;
+  // }
   .actions{
     background: none;
     border: none;

src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue

@@ -160,6 +160,7 @@ export default {
       })
     },
     getAlarmLogTable(obj) {
+      this.loading = true
       let params = {
         pageNo: this.ipagination.current,
         pageSize: this.ipagination.pageSize,
@@ -168,6 +169,7 @@ export default {
         endDate:obj.endDate
       }
       postAction("/alarmLog/findPage", params).then(res => {
+        this.loading = false
         if (res.success) {
           this.ipagination.total = res.result.total
           this.dataSource = res.result.records

src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue

@@ -71,6 +71,7 @@
       </a-button> -->
     </div>
     <div class="rules-content">
+      <a-spin :spinning="spinning">
         <div class="monitor-list">
           <div class="monitor-list-item" v-for="item in monitorList" :key="item.id">
             <div class="monitor-list-item-title">
@@ -109,6 +110,7 @@
             </div>
           </div>
         </div>
+      </a-spin>
       <a-pagination 
         size="small"
         v-model="ipagination.current" 
@@ -260,6 +262,7 @@ export default {
   },
   data() {
     return {
+      spinning: false,
       isAdd:true,
       ipagination:{
         current: 1,
@@ -439,6 +442,7 @@ export default {
       })
     },
     getAlarmRulesPage() {
+      this.spinning = true
       let params = {
         pageNo: this.ipagination.current,
         pageSize: this.ipagination.pageSize,
@@ -447,6 +451,7 @@ export default {
         sourceId: this.queryParams.name
       }
       getAction("/alarmRule/findPage", params).then(res => {
+        this.spinning = false
         if (res.success) {
           this.monitorList = res.result.records
           this.ipagination.total = res.result.total
@@ -761,8 +766,12 @@ export default {
   margin-left: 20px;
   position: relative;
   overflow: hidden;
-  .monitor-list{
+  .ant-spin-nested-loading{
+    width: 100%;
     height: calc(100% - 40px);
+  }
+  .monitor-list{
+    height: 100%;
     overflow: auto;
     display: flex;
     flex-wrap:wrap;

src/views/abnormalAlarm/databaseMonitor/overview/index.vue

@@ -36,6 +36,7 @@
           rowKey="id"
           :columns="columns"
           :list="dataSource"
+          :loading="loading"
           :pagination="false"
           @rowClick="onRowClick"
           @rowDbclick="onRowDbclick"
@@ -223,6 +224,7 @@ export default {
   },
   data() {
     return {
+      loading:false,
       isAdd: true,
       visible: false,
       form: this.$form.createForm(this),
@@ -265,11 +267,13 @@ export default {
   },
   methods: {
     getSysDatabase() {
+      this.loading = true
       let params = {
         pageNo: this.ipagination.current,
         pageSize: this.ipagination.pageSize
       }
       getAction("/sysDatabase/findPage", params).then(res => {
+        this.loading = false
         if (res.success) {
           this.ipagination.total = res.result.total
           this.dataSource = res.result.records

src/views/abnormalAlarm/emailMonitor/overview/index.vue

@@ -36,6 +36,7 @@
           rowKey="id"
           :columns="columns"
           :list="dataSource"
+          :loading="loading"
           :pagination="false"
           @rowClick="onRowClick"
           @rowDbclick="onRowDbclick"
@@ -243,6 +244,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       isAdd: true,
       visible: false,
       form: this.$form.createForm(this),
@@ -286,11 +288,13 @@ export default {
   },
   methods: {
     getSysEmail() {
+      this.loading = true
       let params = {
         pageNo: this.ipagination.current,
         pageSize: this.ipagination.pageSize
       }
       getAction("/sysEmail/findPage", params).then(res => {
+        this.loading=false
         if (res.success) {
           this.ipagination.total = res.result.total
           this.dataSource = res.result.records

src/views/abnormalAlarm/serverMonitor/overview/index.vue

@@ -37,6 +37,7 @@
           :columns="columns"
           :list="dataSource"
           :pagination="false"
+          :loading="loading"
           @rowClick="onRowClick"
           @rowDbclick="onRowDbclick"
         >
@@ -169,6 +170,7 @@ export default {
   },
   data() {
     return {
+      loading:false,
       isAdd: true,
       visible: false,
       form: this.$form.createForm(this),
@@ -207,11 +209,13 @@ export default {
   },
   methods: {
     getSysServer() {
+      this.loading = true
       let params = {
         pageNo: this.ipagination.current,
         pageSize: this.ipagination.pageSize
       }
       getAction("/sysServer/findPage", params).then(res => {
+        this.loading = false
         if (res.success) {
           this.ipagination.total = res.result.total
           this.dataSource = res.result.records