alarm 模块增加loading效果

2023-07-28 18:00:06 +08:00 · 2023-07-28 18:00:06 +08:00 · 1e87c63fe4
commit 1e87c63fe4
parent d8cf8b6eb7
6 changed files with 110 additions and 74 deletions
--- 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;
--- 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
--- 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;
--- 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
--- 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
--- 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