From 1e87c63fe427254ecb6555be5c26739f83b64eab Mon Sep 17 00:00:00 2001
From: renpy <peiyu_ren@163.com>
Date: Fri, 28 Jul 2023 18:00:06 +0800
Subject: [PATCH] =?UTF-8?q?alarm=20=E6=A8=A1=E5=9D=97=E5=A2=9E=E5=8A=A0loa?=
 =?UTF-8?q?ding=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../alarmCenter/alarmContactGroup/index.vue   | 93 +++++++++++--------
 .../alarmCenter/alarmHistory/index.vue        |  2 +
 .../alarmCenter/alarmRules/index.vue          | 77 ++++++++-------
 .../databaseMonitor/overview/index.vue        |  4 +
 .../emailMonitor/overview/index.vue           |  4 +
 .../serverMonitor/overview/index.vue          |  4 +
 6 files changed, 110 insertions(+), 74 deletions(-)

diff --git a/src/views/abnormalAlarm/alarmCenter/alarmContactGroup/index.vue b/src/views/abnormalAlarm/alarmCenter/alarmContactGroup/index.vue
index 237f7c2..a03f34d 100644
--- a/src/views/abnormalAlarm/alarmCenter/alarmContactGroup/index.vue
+++ b/src/views/abnormalAlarm/alarmCenter/alarmContactGroup/index.vue
@@ -9,44 +9,46 @@
       </a-button>
     </div>
     <div class="group-content">
-      <a-collapse :default-active-key="contactGroups[0].id" :bordered="false">
-        <a-collapse-panel :key="item.id" :style="customStyle" v-for="item in contactGroups" >
-          <template slot="header">
-            {{ item.name }}
-            <span class="header-sub">Create Date: {{ item.updateTime }} , Number of people: {{ item.personNumber }}</span>
-          </template>
-          <template slot="extra">
-            <a-button class="actions" shape="circle" @click.stop="editGroup(item.id)">
-              <img class="icon-edit" src="@/assets/images/abnormalAlarm/edit.png" alt="" />
-            </a-button>
-            <a-button class="actions" style="margin-right: 15px;" shape="circle" @click.stop="deleteGroup(item.id)">
-              <img class="icon-delete" src="@/assets/images/abnormalAlarm/delete.png" alt="" />
-            </a-button>
-          </template>
-          <custom-table
-            size="middle"
-            rowKey="id"
-            :columns="columns"
-            :list="item.users"
-            :pagination="false"
-            :canSelect="false"
-            :scroll="{ y: 200 }"
-          >
-            <template slot="name" slot-scope="{text}">
-              <img src="@/assets/images/abnormalAlarm/user.png" alt=""><span style="margin-left: 8px;padding-top: 2px;">{{ text }}</span>
+      <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 }}
+              <span class="header-sub">Create Date: {{ item.updateTime }} , Number of people: {{ item.personNumber }}</span>
             </template>
-            <template slot="role" slot-scope="{record}">
-              <span v-for="(role,index) in record.roles" :key="role.id">{{ role.roleName }}<i v-if="index!=record.roles.length-1">,</i></span>
-            </template>
-            
-            <template slot="action" slot-scope="{record}">
-              <a-button class="actions" style="margin-right: 15px;" shape="circle" @click="deleteUser(item.id,record.id)">
+            <template slot="extra">
+              <a-button class="actions" shape="circle" @click.stop="editGroup(item.id)">
+                <img class="icon-edit" src="@/assets/images/abnormalAlarm/edit.png" alt="" />
+              </a-button>
+              <a-button class="actions" style="margin-right: 15px;" shape="circle" @click.stop="deleteGroup(item.id)">
                 <img class="icon-delete" src="@/assets/images/abnormalAlarm/delete.png" alt="" />
               </a-button>
             </template>
-          </custom-table>
-        </a-collapse-panel>
-      </a-collapse>
+            <custom-table
+              size="middle"
+              rowKey="id"
+              :columns="columns"
+              :list="item.users"
+              :pagination="false"
+              :canSelect="false"
+              :scroll="{ y: 200 }"
+            >
+              <template slot="name" slot-scope="{text}">
+                <img src="@/assets/images/abnormalAlarm/user.png" alt=""><span style="margin-left: 8px;padding-top: 2px;">{{ text }}</span>
+              </template>
+              <template slot="role" slot-scope="{record}">
+                <span v-for="(role,index) in record.roles" :key="role.id">{{ role.roleName }}<i v-if="index!=record.roles.length-1">,</i></span>
+              </template>
+              
+              <template slot="action" slot-scope="{record}">
+                <a-button class="actions" style="margin-right: 15px;" shape="circle" @click="deleteUser(item.id, record.id)">
+                  <img class="icon-delete" src="@/assets/images/abnormalAlarm/delete.png" alt="" />
+                </a-button>
+              </template>
+            </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;
diff --git a/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue b/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
index 16c7cba..20507e2 100644
--- a/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
+++ b/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
diff --git a/src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue b/src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue
index c9e1263..de36378 100644
--- a/src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue
+++ b/src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue
@@ -71,44 +71,46 @@
       </a-button> -->
     </div>
     <div class="rules-content">
-      <div class="monitor-list">
-        <div class="monitor-list-item" v-for="item in monitorList" :key="item.id">
-          <div class="monitor-list-item-title">
-            <div class="monitor-list-item-title-name">{{ item.name }}</div>
-            <div class="monitor-list-item-title-server">
-              <span style="color: #5b9cba;">{{ item.sourceType }}：</span>
-              <a-tooltip>
-                <template slot="title">
-                  {{ item.sourceName }}
-                </template>
-                <span style="color: #ade6ee;">{{ item.sourceName }}</span>
-              </a-tooltip>
+      <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">
+              <div class="monitor-list-item-title-name">{{ item.name }}</div>
+              <div class="monitor-list-item-title-server">
+                <span style="color: #5b9cba;">{{ item.sourceType }}：</span>
+                <a-tooltip>
+                  <template slot="title">
+                    {{ item.sourceName }}
+                  </template>
+                  <span style="color: #ade6ee;">{{ item.sourceName }}</span>
+                </a-tooltip>
+              </div>
             </div>
-          </div>
-          <div class="monitor-list-item-content">
-            <div class="monitor-list-item-content-info">
-              {{ JSON.parse(item.operator).name }} {{ JSON.parse(item.operator).operator }} {{ JSON.parse(item.operator).threshold }}{{ JSON.parse(item.operator).units }}
+            <div class="monitor-list-item-content">
+              <div class="monitor-list-item-content-info">
+                {{ JSON.parse(item.operator).name }} {{ JSON.parse(item.operator).operator }} {{ JSON.parse(item.operator).threshold }}{{ JSON.parse(item.operator).units }}
+              </div>
+              <div :class="[item.enabled==1?'monitor-list-item-content-enable':'monitor-list-item-content-disable', 'monitor-list-item-content-btn']">
+                {{ item.enabled==1?"Enable":"Disabled" }}
+              </div>
             </div>
-            <div :class="[item.enabled==1?'monitor-list-item-content-enable':'monitor-list-item-content-disable', 'monitor-list-item-content-btn']">
-              {{ item.enabled==1?"Enable":"Disabled" }}
-            </div>
-          </div>
-          <div class="monitor-list-item-footer">
-            <div class="monitor-list-item-footer-group">
-              <span style="color: #5b9cba;">Alarm Contact Group：</span>
-              <span style="color: #ade6ee;">{{ item.groupName }}</span>
-            </div>
-            <div class="monitor-list-item-footer-actions">
-              <span class="actions-edit" @click="editItem(item.id)"></span>
-              <span class="actions-delete" @click="deleteItem(item.id)"></span>
-              <span v-if="item.enabled==1" class="actions-enable">
-              </span>
-              <span v-if="item.enabled==0" class="actions-disable">
-              </span>
+            <div class="monitor-list-item-footer">
+              <div class="monitor-list-item-footer-group">
+                <span style="color: #5b9cba;">Alarm Contact Group：</span>
+                <span style="color: #ade6ee;">{{ item.groupName }}</span>
+              </div>
+              <div class="monitor-list-item-footer-actions">
+                <span class="actions-edit" @click="editItem(item.id)"></span>
+                <span class="actions-delete" @click="deleteItem(item.id)"></span>
+                <span v-if="item.enabled==1" class="actions-enable">
+                </span>
+                <span v-if="item.enabled==0" class="actions-disable">
+                </span>
+              </div>
             </div>
           </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;
diff --git a/src/views/abnormalAlarm/databaseMonitor/overview/index.vue b/src/views/abnormalAlarm/databaseMonitor/overview/index.vue
index 8ed53c0..6cb948e 100644
--- a/src/views/abnormalAlarm/databaseMonitor/overview/index.vue
+++ b/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
diff --git a/src/views/abnormalAlarm/emailMonitor/overview/index.vue b/src/views/abnormalAlarm/emailMonitor/overview/index.vue
index 9c12f06..4d6fda4 100644
--- a/src/views/abnormalAlarm/emailMonitor/overview/index.vue
+++ b/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
diff --git a/src/views/abnormalAlarm/serverMonitor/overview/index.vue b/src/views/abnormalAlarm/serverMonitor/overview/index.vue
index 55b011b..7902cce 100644
--- a/src/views/abnormalAlarm/serverMonitor/overview/index.vue
+++ b/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