fix: Server Monitor -> Instances -> Details 问题修改

src/views/abnormalAlarm/serverMonitor/instances/details.vue

@@ -19,10 +19,11 @@
               >
                 <div>{{ item.sourceName }}</div>
               </a-list-item>
-              <div v-if="loading && !busy" class="demo-loading-container">
-                <a-spin />
-              </div>
             </a-list>
+
+            <div v-if="loading && !busy" class="demo-loading-container">
+              <a-spin />
+            </div>
           </div>
           <div class="basic-info-detail">
             <a-row :gutter="10" style="height: 40px">
@@ -274,7 +275,7 @@
           </div>
         </div>
       </div>
-      <div style="width: 542px">
+      <div class="alarm-info" style="width: 542px">
         <BoxTitle title="Alarm information"></BoxTitle>
         <div
           class="alarm-info-list"
@@ -285,14 +286,14 @@
           <a-list :dataSource="dataSource_alarm_info">
             <a-list-item slot="renderItem" slot-scope="item">
               <img class="alarm-info-list-img" src="@/assets/images/abnormalAlarm/icon-r.png" alt="" />
-              <div class="alarm-info-list-info">{{ JSON.parse(item.alarmInfo).value }}</div>
+              <div class="alarm-info-list-info" :title="item.alarmInfo">{{ item.alarmInfo }}</div>
               <div class="alarm-info-list-date">{{ item.alarmStartDate }}</div>
               <!-- <a slot="actions" class="alarm-info-list-actions">Detail</a> -->
             </a-list-item>
-            <div v-if="loading_alarm_info && !busy" class="demo-loading-container">
-              <a-spin />
-            </div>
           </a-list>
+          <div v-if="loading_alarm_info && !busy" class="demo-loading-container">
+            <a-spin />
+          </div>
         </div>
       </div>
     </div>
@@ -742,6 +743,17 @@ export default {
       this.getBasiclnfo(item.hostId)
       this.getCpuUtilizationData()
       this.getTimeLineData()
+
+      this.ipagination_alarm_info.current = 1
+      this.getDetailsAlarmInfo((res) => {
+        this.loading_alarm_info = false
+        if (res.success) {
+          this.ipagination_alarm_info.total = res.result.total
+          this.dataSource_alarm_info = res.result.records
+        } else {
+          this.$message.warning('This operation fails. Contact your system administrator')
+        }
+      })
     },
     getDetailsAlarmInfo(callBack) {
       this.loading_alarm_info = true
@@ -1432,6 +1444,8 @@ export default {
       width: 170px;
       overflow: auto;
       border: solid 1px rgba(65, 111, 127, 0.5);
+      position: relative;
+
       .ant-list-item {
         border: none;
         height: 32px;
@@ -1449,12 +1463,6 @@ export default {
         background-color: rgb(15, 158, 171, 0.5) !important;
         color: #ffffff;
       }
-      .demo-loading-container {
-        position: absolute;
-        bottom: 40px;
-        width: 100%;
-        text-align: center;
-      }
     }
     &-detail {
       height: 100%;
@@ -1541,38 +1549,41 @@ export default {
       }
     }
   }
+
+  .alarm-info {
+    display: flex;
+    flex-direction: column;
+  }
   .alarm-info-list {
-    height: 100%;
+    flex: 1;
     overflow: auto;
     font-family: ArialMT;
     font-size: 16px;
+    position: relative;
     .ant-list-item {
       border: none;
       height: 52px;
       letter-spacing: 1px;
       color: #ade6ee;
-      justify-content: flex-start;
     }
     .ant-list-item:nth-child(odd) {
       background-color: rgba(13, 109, 118, 0.2);
     }
     &-img {
-      display: inline-block;
       width: 24px;
       height: 24px;
       margin-left: 12px;
     }
     &-info {
-      width: 188px;
+      flex: 1;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
       margin-left: 15px;
-      display: inline-block;
       color: #ffffff;
     }
     &-date {
-      display: inline-block;
+      flex-shrink: 0;
       color: #90b4c5;
       margin-left: 35px;
     }
@@ -1682,4 +1693,11 @@ export default {
     border-radius: 4px;
   }
 }
+
+.demo-loading-container {
+  position: absolute;
+  top: 40px;
+  width: 100%;
+  text-align: center;
+}
 </style>