diff --git a/package.json b/package.json
index bbea7cf..b1b053f 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "vue-area-linkage": "^5.1.0",
     "vue-cropper": "^0.5.4",
     "vue-i18n": "^8.7.0",
+    "vue-infinite-scroll": "^2.0.2",
     "vue-loader": "^15.7.0",
     "vue-ls": "^3.2.0",
     "vue-photo-preview": "^1.1.3",
diff --git a/src/assets/images/abnormalAlarm/alarm.png b/src/assets/images/abnormalAlarm/alarm.png
new file mode 100644
index 0000000..6b7c929
Binary files /dev/null and b/src/assets/images/abnormalAlarm/alarm.png differ
diff --git a/src/assets/images/abnormalAlarm/cpu.png b/src/assets/images/abnormalAlarm/cpu.png
new file mode 100644
index 0000000..e21eb78
Binary files /dev/null and b/src/assets/images/abnormalAlarm/cpu.png differ
diff --git a/src/assets/images/abnormalAlarm/email.png b/src/assets/images/abnormalAlarm/email.png
new file mode 100644
index 0000000..3c40f8e
Binary files /dev/null and b/src/assets/images/abnormalAlarm/email.png differ
diff --git a/src/assets/images/abnormalAlarm/icon-r.png b/src/assets/images/abnormalAlarm/icon-r.png
new file mode 100644
index 0000000..fb64be2
Binary files /dev/null and b/src/assets/images/abnormalAlarm/icon-r.png differ
diff --git a/src/assets/images/abnormalAlarm/icon-y.png b/src/assets/images/abnormalAlarm/icon-y.png
new file mode 100644
index 0000000..16e6883
Binary files /dev/null and b/src/assets/images/abnormalAlarm/icon-y.png differ
diff --git a/src/assets/images/abnormalAlarm/partition.png b/src/assets/images/abnormalAlarm/partition.png
new file mode 100644
index 0000000..a2418d8
Binary files /dev/null and b/src/assets/images/abnormalAlarm/partition.png differ
diff --git a/src/assets/images/abnormalAlarm/ram.png b/src/assets/images/abnormalAlarm/ram.png
new file mode 100644
index 0000000..dfc754f
Binary files /dev/null and b/src/assets/images/abnormalAlarm/ram.png differ
diff --git a/src/assets/images/abnormalAlarm/running.png b/src/assets/images/abnormalAlarm/running.png
new file mode 100644
index 0000000..b19f792
Binary files /dev/null and b/src/assets/images/abnormalAlarm/running.png differ
diff --git a/src/assets/images/abnormalAlarm/times.png b/src/assets/images/abnormalAlarm/times.png
new file mode 100644
index 0000000..3144cb4
Binary files /dev/null and b/src/assets/images/abnormalAlarm/times.png differ
diff --git a/src/assets/images/abnormalAlarm/warning.png b/src/assets/images/abnormalAlarm/warning.png
new file mode 100644
index 0000000..ef0982e
Binary files /dev/null and b/src/assets/images/abnormalAlarm/warning.png differ
diff --git a/src/assets/less/TabMenu.less b/src/assets/less/TabMenu.less
new file mode 100644
index 0000000..2d14e70
--- /dev/null
+++ b/src/assets/less/TabMenu.less
@@ -0,0 +1,80 @@
+::v-deep {
+  .ant-tabs{
+    height: 100%;
+    .ant-tabs-top-content{
+      height: calc(100% - 50px);
+      .ant-tabs-tabpane{
+        height: 100%;
+        overflow: auto;
+        overflow: hidden;
+      }
+    }
+  }
+  .ant-tabs-bar{
+    width: 100%;
+    height: 40px;
+    margin: 0 0 10px 0;
+    background-color: rgba(12, 235, 201, 0.05);
+    border-top: 1px solid rgba(12, 235, 201, 0.3);
+    border-bottom: 1px solid rgba(12, 235, 201, 0.3);
+  }
+  .ant-tabs-nav .ant-tabs-tab{
+    height: 30px;
+    line-height: 30px;
+    background-color: rgba(58, 236, 240, 0.22);
+    font-family: BookmanOldStyle;
+    font-size: 16px;
+    font-weight: bold;
+    font-stretch: normal;
+    letter-spacing: 2px;
+    color: #c9f6f6;
+    margin: 0 0 0 10px;
+    padding: 0 23px;
+    position: relative;
+    &::before{
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 7px;
+      height: 29px;
+      color: rgba(58, 236, 240, 0.22);
+      border: 1px solid #569e9e;
+      border-right: none;
+      border-radius: 0;
+    }
+    &::after{
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 7px;
+      height: 29px;
+      color: rgba(58, 236, 240, 0.22);
+      border: 1px solid #569e9e;
+      border-left: none;
+    }
+    &-active{
+      &::before,
+          &::after {
+            border-color: #0cecca !important;
+          }
+    }
+  }
+  .ant-tabs-ink-bar{
+    display: none !important
+  }
+  .ant-tabs-nav .ant-tabs-tab-active{
+    color: #2affdf;
+  }
+  .ant-row{
+    height: 36px;
+    line-height: 36px;
+  }
+  .ant-tabs-tab-prev, .ant-tabs-tab-next{
+    color: #c9f6f6;
+  }
+  .ant-tabs-tab-prev:hover, .ant-tabs-tab-next:hover{
+    color: #2affdf;
+  }
+}
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue b/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
index 31d31f6..7571454 100644
--- a/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
+++ b/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
@@ -442,90 +442,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
+  @import "~@/assets/less/TabMenu.less";
 .chart-layout{
   height: 230px;
   margin-left: 20px;
 }
-::v-deep {
-  .ant-tabs{
-    height: 100%;
-    .ant-tabs-top-content{
-      height: calc(100% - 50px);
-      .ant-tabs-tabpane{
-        height: 100%;
-        overflow: auto;
-        overflow: hidden;
-      }
-    }
-  }
-  .ant-tabs-bar{
-    width: 100%;
-    height: 40px;
-    margin: 0 0 10px 0;
-    background-color: rgba(12, 235, 201, 0.05);
-    border-top: 1px solid rgba(12, 235, 201, 0.3);
-    border-bottom: 1px solid rgba(12, 235, 201, 0.3);
-  }
-  .ant-tabs-nav .ant-tabs-tab{
-    height: 30px;
-    line-height: 30px;
-    background-color: rgba(58, 236, 240, 0.22);
-    font-family: BookmanOldStyle;
-    font-size: 16px;
-    font-weight: bold;
-    font-stretch: normal;
-    letter-spacing: 2px;
-    color: #c9f6f6;
-    margin: 0 0 0 10px;
-    padding: 0 23px;
-    position: relative;
-    &::before{
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 7px;
-      height: 29px;
-      color: rgba(58, 236, 240, 0.22);
-      border: 1px solid #569e9e;
-      border-right: none;
-      border-radius: 0;
-    }
-    &::after{
-      content: "";
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 7px;
-      height: 29px;
-      color: rgba(58, 236, 240, 0.22);
-      border: 1px solid #569e9e;
-      border-left: none;
-    }
-    &-active{
-      &::before,
-          &::after {
-            border-color: #0cecca !important;
-          }
-    }
-  }
-  .ant-tabs-ink-bar{
-    display: none !important
-  }
-  .ant-tabs-nav .ant-tabs-tab-active{
-    color: #2affdf;
-  }
-  .ant-row{
-    height: 36px;
-    line-height: 36px;
-  }
-  .ant-tabs-tab-prev, .ant-tabs-tab-next{
-    color: #c9f6f6;
-  }
-  .ant-tabs-tab-prev:hover, .ant-tabs-tab-next:hover{
-    color: #2affdf;
-  }
-}
 .analysis-chart{
   width: 100%;
   height: 100%;
diff --git a/src/views/abnormalAlarm/components/boxTitle.vue b/src/views/abnormalAlarm/components/boxTitle.vue
index c2499f3..1c42c97 100644
--- a/src/views/abnormalAlarm/components/boxTitle.vue
+++ b/src/views/abnormalAlarm/components/boxTitle.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="chart-title">
     <span>{{ title }}</span>
-    <img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
+    <div class="right">
+      <slot name="right">
+        <img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
+      </slot>
+    </div>
   </div>
 </template>
 
@@ -35,7 +39,7 @@
     padding: 0 15px;
     background-color: rgba(12, 235, 201, 0.05);
   }
-  img{
+  .right{
     position: absolute;
     right: 15px;
     top: 50%;
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/details.vue b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
new file mode 100644
index 0000000..5b183af
--- /dev/null
+++ b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
@@ -0,0 +1,603 @@
+<template>
+  <div style="height: 100%;">
+    <div class="content-top">
+      <div style="width: calc( 100% - 562px);">
+        <BoxTitle title="Basic lnformation"></BoxTitle>
+        <div class="basic-info">
+          <div 
+            class="basic-info-list"
+            v-infinite-scroll="handleInfiniteOnLoad"
+            :infinite-scroll-disabled="busy"
+            :infinite-scroll-distance="5"
+          >
+            <a-list :dataSource="dataSource">
+              <a-list-item :class="{ 'ant-list-item-active': index===currIndex}" slot="renderItem" slot-scope="item, index" @click="handleBasicItem(index)">
+                <div>{{ item.name }}</div>
+              </a-list-item>
+              <div v-if="loading && !busy" class="demo-loading-container">
+                <a-spin />
+              </div>
+            </a-list>
+          </div>
+          <div class="basic-info-detail">
+            <a-row :gutter="10" style="height: 40px;">
+              <a-col :span="6"  style="height: 100%;">
+                <div class="basic-info-detail-col">
+                  <div class="basic-info-detail-col-img">
+                    <img src="~@/assets/images/abnormalAlarm/running.png" alt="">
+                  </div>
+                  <div class="basic-info-detail-col-msg">
+                    <div class="basic-info-detail-col-msg-title">
+                      <div class="circle"></div>
+                      <div class="title">running state</div>
+                    </div>
+                    <div class="basic-info-detail-col-msg-num state">NORMAL</div>
+                  </div>
+                </div>
+              </a-col>
+              <a-col :span="5"  style="height: 100%;">
+                <div class="basic-info-detail-col">
+                  <div class="basic-info-detail-col-img">
+                    <img src="~@/assets/images/abnormalAlarm/alarm.png" alt="">
+                  </div>
+                  <div class="basic-info-detail-col-msg">
+                    <div class="basic-info-detail-col-msg-title">
+                      <div class="circle"></div>
+                      <div class="title">Alarm SMS</div>
+                    </div>
+                    <div class="basic-info-detail-col-msg-num">16</div>
+                  </div>
+                </div>
+              </a-col>
+              <a-col :span="6"  style="height: 100%;padding-left:12px">
+                <div class="basic-info-detail-col">
+                  <div class="basic-info-detail-col-img">
+                    <img src="~@/assets/images/abnormalAlarm/email.png" alt="">
+                  </div>
+                  <div class="basic-info-detail-col-msg">
+                    <div class="basic-info-detail-col-msg-title">
+                      <div class="circle"></div>
+                      <div class="title">Alarm email</div>
+                    </div>
+                    <div class="basic-info-detail-col-msg-num">16</div>
+                  </div>
+                </div>
+              </a-col>
+              <a-col :span="7"  style="height: 100%;">
+                <div class="basic-info-detail-col">
+                  <div class="basic-info-detail-col-img">
+                    <img src="~@/assets/images/abnormalAlarm/warning.png" alt="">
+                  </div>
+                  <div class="basic-info-detail-col-msg">
+                    <div class="basic-info-detail-col-msg-title">
+                      <div class="circle"></div>
+                      <div class="title">Number of alarms</div>
+                    </div>
+                    <div class="basic-info-detail-col-msg-num">16</div>
+                  </div>
+                </div>
+              </a-col>
+            </a-row>
+            <a-row :gutter="10" style="height: 40px;margin-top: 10px;">
+              <a-col :span="6"  style="height: 100%;">
+                <div class="basic-info-detail-col">
+                  <div class="basic-info-detail-col-img">
+                    <img src="~@/assets/images/abnormalAlarm/times.png" alt="">
+                  </div>
+                  <div class="basic-info-detail-col-msg">
+                    <div class="basic-info-detail-col-msg-title">
+                      <div class="circle"></div>
+                      <div class="title">Run time</div>
+                    </div>
+                    <div class="basic-info-detail-col-msg-num">126.5h</div>
+                  </div>
+                </div>
+              </a-col>
+              <a-col :span="5"  style="height: 100%;">
+                <div class="basic-info-detail-col">
+                  <div class="basic-info-detail-col-img">
+                    <img src="~@/assets/images/abnormalAlarm/ram.png" alt="">
+                  </div>
+                  <div class="basic-info-detail-col-msg">
+                    <div class="basic-info-detail-col-msg-title">
+                      <div class="circle"></div>
+                      <div class="title">RAM Size</div>
+                    </div>
+                    <div class="basic-info-detail-col-msg-num">28.9GB</div>
+                  </div>
+                </div>
+              </a-col>
+              <a-col :span="6"  style="height: 100%;padding-left:12px">
+                <div class="basic-info-detail-col">
+                  <div class="basic-info-detail-col-img">
+                    <img src="~@/assets/images/abnormalAlarm/cpu.png" alt="">
+                  </div>
+                  <div class="basic-info-detail-col-msg">
+                    <div class="basic-info-detail-col-msg-title">
+                      <div class="circle"></div>
+                      <div class="title">CPU Cores</div>
+                    </div>
+                    <div class="basic-info-detail-col-msg-num">16</div>
+                  </div>
+                </div>
+              </a-col>
+              <a-col :span="7"  style="height: 100%;">
+                <div class="basic-info-detail-col">
+                  <div class="basic-info-detail-col-img">
+                    <img src="~@/assets/images/abnormalAlarm/partition.png" alt="">
+                  </div>
+                  <div class="basic-info-detail-col-msg">
+                    <div class="basic-info-detail-col-msg-title">
+                      <div class="circle"></div>
+                      <div class="title">Total Disk Partition</div>
+                    </div>
+                    <div class="basic-info-detail-col-msg-num">16</div>
+                  </div>
+                </div>
+              </a-col>
+            </a-row>
+            <div class="basic-info-detail-content">
+              <a-row style="height: 100%;">
+                <a-col :span="12">
+                  <a-row style="height: 26px;">
+                    <a-col :span="12" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="12" class="basic-info-detail-content-key">Host Name:</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">PC-01</a-col>
+                      </a-row>
+                    </a-col> 
+                    <a-col :span="12" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="12" class="basic-info-detail-content-key">OS Version:</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">7.8 64-bit</a-col>
+                      </a-row>
+                    </a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="12" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="12" class="basic-info-detail-content-key">IP Address:</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">192.168.1.1</a-col>
+                      </a-row>
+                    </a-col>
+                    <a-col :span="12" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="12" class="basic-info-detail-content-key">Kernel version:</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">2000</a-col>
+                      </a-row>
+                    </a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="12" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="12" class="basic-info-detail-content-key">OS Name:</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">Centos</a-col>
+                      </a-row>
+                    </a-col>
+                    <a-col :span="12" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="12" class="basic-info-detail-content-key">Bios Version:</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">FX705GM.307</a-col>
+                      </a-row>
+                    </a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="4" style="height: 26px;" class="basic-info-detail-content-key">CPU:</a-col>
+                    <a-col :span="20" style="height: 26px;" class="basic-info-detail-content-val">Inte(R)Core(TM)i7-8750H CPU@2.2GHz</a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="6" style="height: 26px;" class="basic-info-detail-content-key">Manufacturer:</a-col>
+                    <a-col :span="18" style="height: 26px;" class="basic-info-detail-content-val">ASUSTeK COMPUTER INC.</a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="8" style="height: 26px;" class="basic-info-detail-content-key">Server Agent Path:</a-col>
+                    <a-col :span="16" style="height: 26px;" class="basic-info-detail-content-val">C:\Agent\Default\Desktop</a-col>
+                  </a-row>
+                </a-col>
+                <a-col :span="12">
+                  <a-row style="height: 26px;">
+                    <a-col :span="11" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="18" class="basic-info-detail-content-key">Network Lnterface:</a-col>
+                        <a-col :span="6" class="basic-info-detail-content-val">11</a-col>
+                      </a-row>
+                    </a-col>
+                    <a-col :span="13" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="15" class="basic-info-detail-content-key">Location:</a-col>
+                        <a-col :span="9" class="basic-info-detail-content-val">China</a-col>
+                      </a-row>
+                    </a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="11" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="18" class="basic-info-detail-content-key">Time Zone:</a-col>
+                        <a-col :span="6" class="basic-info-detail-content-val">CST</a-col>
+                      </a-row>
+                    </a-col>
+                    <a-col :span="13" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="15" class="basic-info-detail-content-key">Server Agent User:</a-col>
+                        <a-col :span="9" class="basic-info-detail-content-val">LocalSystem</a-col>
+                      </a-row>
+                    </a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="6" style="height: 26px;" class="basic-info-detail-content-key">Start Time:</a-col>
+                    <a-col :span="18" style="height: 26px;" class="basic-info-detail-content-val">2023-03-01 14:00:01</a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="6" style="height: 26px;" class="basic-info-detail-content-key">Model Number:</a-col>
+                    <a-col :span="18" style="height: 26px;" class="basic-info-detail-content-val">TUF GamingFX705GM_FX86SM</a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="6" style="height: 26px;" class="basic-info-detail-content-key">Bios Supplier:</a-col>
+                    <a-col :span="18" style="height: 26px;" class="basic-info-detail-content-val">American Megatrends lnc.</a-col>
+                  </a-row>
+                </a-col>
+              </a-row>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div style="width:542px">
+        <BoxTitle title="Alarm information"></BoxTitle>
+        <div
+          class="alarm-info-list"
+          v-infinite-scroll="handleInfiniteAlarmInfo"
+          :infinite-scroll-disabled="busy_alarm_info"
+          :infinite-scroll-distance="10"
+        >
+          <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).info }}</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>
+      </div>
+    </div>
+    <div class="content-center">
+      <BoxTitle title="Event Timelinen">
+        <template slot="right">asdfadf</template>
+      </BoxTitle>
+    </div>
+    <div class="content-bottom">
+      <div class="content-bottom-left">
+        <div class="content-bottom-left-top">
+          <a-row :gutter="20">
+            <a-col class="gutter-row" :span="8">
+              <BoxTitle title="CPU"></BoxTitle>
+            </a-col>
+            <a-col class="gutter-row" :span="8">
+              <BoxTitle title="MEMORY"></BoxTitle>
+            </a-col>
+            <a-col class="gutter-row" :span="8">
+              <BoxTitle title="LOADS"></BoxTitle>
+            </a-col>
+          </a-row>
+        </div>
+        <div class="content-bottom-left-bottom">
+          <BoxTitle title="CPU utilization">
+            <template slot="right">asdfadf</template>
+          </BoxTitle>
+        </div>
+      </div>
+      <div style="width:542px">
+        <BoxTitle title="DISK"></BoxTitle>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BoxTitle from '../../components/boxTitle.vue';
+import infiniteScroll from 'vue-infinite-scroll';
+import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
+export default {
+  directives: { infiniteScroll },
+  components: {
+    BoxTitle,
+  },
+  data() {
+    return {
+      dataSource: [],
+      loading: false,
+      busy: false,
+      ipagination:{
+        current: 1,
+        pageSize: 10,
+        total: 0
+      },
+      dataSource_alarm_info: [],
+      loading_alarm_info: false,
+      busy_alarm_info: false,
+      ipagination_alarm_info:{
+        current: 1,
+        pageSize: 10,
+        total: 0
+      },
+      currIndex:null,
+    }
+  },
+  mounted () {
+    this.getSysServer(res => {
+      this.loading = false
+      if (res.success) {
+        this.ipagination.total = res.result.total
+        this.dataSource = res.result.records
+      } else {
+        this.$message.warning("This operation fails. Contact your system administrator")
+      }
+    });
+    this.getServerAlarmHistory(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")
+      }
+    });
+  },
+  methods: {
+    getSysServer(callBack) {
+      this.loading = true
+      let params = {
+        pageNo: this.ipagination.current,
+        pageSize: this.ipagination.pageSize
+      }
+      getAction("/sysServer/findPage", params).then(res => {
+        callBack(res)
+      })
+    },
+    handleInfiniteOnLoad() {
+      if (this.dataSource.length>0) {
+        const dataSource = this.dataSource;
+        this.loading = true;
+        if (dataSource.length == this.ipagination.total) {
+          this.$message.warning('Infinite List loaded all');
+          this.busy = true;
+          this.loading = false;
+          return;
+        } else {
+          this.ipagination.current += 1
+          this.getSysServer(res => {
+            this.ipagination.total = res.result.total
+            this.dataSource = dataSource.concat(res.result.records);
+            this.loading = false;
+          });
+        }
+      }
+    },
+    handleBasicItem(i) {
+      this.currIndex = i
+    },
+    getServerAlarmHistory(callBack) {
+      this.loading = true
+      let params = {
+        startDate: "2022-08-01",
+        endDate: "2023-08-07",
+        pageNo: this.ipagination_alarm_info.current,
+        pageSize: this.ipagination_alarm_info.pageSize,
+      }
+      getAction("/sysServer/findAlarmHistory", params).then(res => {
+        callBack(res)
+      })
+    },
+    handleInfiniteAlarmInfo() {
+      if (this.dataSource_alarm_info.length>0) {
+        const dataSource_alarm_info = this.dataSource_alarm_info;
+        this.loading_alarm_info = true;
+        if (dataSource_alarm_info.length == this.ipagination_alarm_info.total) {
+          this.$message.warning('Infinite List loaded all');
+          this.busy_alarm_info = true;
+          this.loading_alarm_info = false;
+          return;
+        } else {
+          this.ipagination_alarm_info.current += 1
+          this.getServerAlarmHistory(res => {
+            this.ipagination_alarm_info.total = res.result.total
+            this.dataSource_alarm_info = dataSource_alarm_info.concat(res.result.records);
+            this.loading_alarm_info = false;
+          });
+        }
+      }
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.content-top{
+  width: 100%;
+  height: 331px;
+  // height: 43.5%;
+  display: flex;
+  justify-content: space-between;
+  .basic-info{
+    width: 100%;
+    height:291px;
+    padding: 15px 0;
+    display: flex;
+    justify-content: space-between;
+    &-list{
+      height: 100%;
+      width: 170px;
+      overflow: auto;
+      border: solid 1px rgba(65, 111, 127, 0.5);
+      .ant-list-item{
+        border: none;
+        height: 32px;
+        justify-content: center;
+        font-family: ArialMT;
+        font-size: 14px;
+        letter-spacing: 1px;
+        color: #ade6ee;
+        cursor: pointer;
+      }
+      .ant-list-item:nth-child(even){
+        background-color: rgba(13, 109, 118, 0.2);
+      }
+      .ant-list-item-active{
+        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%;
+      width: calc(100% - 185px);
+      &-col{
+        height: 100%;
+        position: relative;
+        &-img{
+          width: 40px;
+          height: 40px;
+          float: left;
+          img{
+            width: 100%;
+            height: 100%;
+          }
+        }
+        &-msg{
+          float: left;
+          height: 100%;
+          margin-left: 15px;
+          &-title{
+            height: 14px;
+            position: absolute;
+            left: 47px;
+            top: 2px;
+            .circle{
+              position: absolute;
+              left: 0;
+              top: 0;
+              width: 12px;
+              height: 12px;
+              border-radius: 50%;
+              background-image: linear-gradient(90deg, #0e98a8 0%, #00fffc 100%), 
+              linear-gradient( #0cecca, #0cecca);
+              background-blend-mode: normal, normal;
+            }
+            .title{
+              position: absolute;
+              left: 20px;
+              top: 0;
+              font-family: ArialMT;
+              font-size: 14px;
+              line-height: 14px;
+              letter-spacing: 1px;
+              color: #ade6ee;
+              white-space: nowrap;
+            }
+          }
+          &-num{
+            height: 20px;
+            position: absolute;
+            left: 47px;
+            bottom: 0px;
+            line-height: 20px;
+            font-family: MicrogrammaD-MediExte;
+            font-size: 20px;
+            letter-spacing: 1px;
+            color: #ffffff;
+          }
+          .state{
+            font-size: 16px;
+            letter-spacing: 1px;
+            color: #06cdd3;
+          }
+        }
+      }
+      &-content{
+        height: 161px;
+        border: solid 1px rgba(65, 111, 127, 0.5);
+        background-color: rgba(2, 40, 43, 0.5);
+        margin-top: 10px;
+        padding: 0 10px;
+        &-key{
+          font-family: ArialMT;
+          font-size: 12px;
+          line-height: 26px;
+          color: #6ebad0;
+        }
+        &-val{
+          font-family: ArialMT;
+          font-size: 12px;
+          line-height: 26px;
+          color: #ade6ee;
+        }
+      }
+    }
+  }
+  .alarm-info-list{
+    height: 100%;
+    overflow: auto;
+    font-family: ArialMT;
+    font-size: 16px;
+    .ant-list-item{
+      border: none;
+      height: 52px;
+      letter-spacing: 1px;
+      color: #ade6ee;
+    }
+    .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{
+      display: inline-block;
+      color: #ffffff;
+    }
+    &-date{
+      display: inline-block;
+      color: #90b4c5;
+    }
+    &-actions{
+      
+      color: #17c6f2;
+    }
+  }
+}
+.content-center{
+  width: 100%;
+  height: 130px;
+  // height: 14.9%;
+}
+.content-bottom{
+  width: 100%;
+  height: calc(100% - 461px);
+  // height: 41.6%;
+  display: flex;
+  justify-content: space-between;
+  &-left{
+    width: calc( 100% - 562px);
+    height: 100%;
+    &-top{
+      width: 100%;
+      height: 160px;
+    }
+    &-bottom{
+      width: 100%;
+      height: calc(100% - 160px);
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/index.vue b/src/views/abnormalAlarm/serverMonitor/instances/index.vue
index c628d7c..a378ca7 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/index.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/index.vue
@@ -1,15 +1,45 @@
 <template>
-  <div>
-    instances
+  <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>
+        </a-tab-pane>
+        <a-tab-pane key="service-process" tab="SERVICE AND PROCESS">
+          SERVICE AND PROCESS
+        </a-tab-pane>
+        <a-tab-pane key="monitor" tab="MONITOR">
+          MONITOR
+        </a-tab-pane>
+        <a-tab-pane key="cpu" tab="CPU">
+          CPU
+        </a-tab-pane>
+        <a-tab-pane key="memory" tab="MEMORY">
+          MEMORY
+        </a-tab-pane>
+        <a-tab-pane key="disk" tab="DISK">
+          DISK
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
   </div>
 </template>
 
 <script>
-  export default {
-    
-  }
+import Details from './details.vue';
+export default {
+  components: {
+    Details,
+  },
+  methods: {
+    handleTabChange(key) {
+      console.log(key);
+    },
+  },
+}
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
+  @import "~@/assets/less/TabMenu.less";
 
 </style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 523b949..9995050 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11622,6 +11622,11 @@ vue-i18n@^8.7.0:
   resolved "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.18.2.tgz#cd7c12f2e178e6faa23b0e3cfd2f7bac9305f8fc"
   integrity sha512-0X5nBTCZAVjlwcrPaYJwNs3iipBBTv0AUHwQUOa8yP3XbQGWKbRHqBb3OhCYtum/IHDD21d/df5Xd2VgyxbxfA==
 
+vue-infinite-scroll@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmmirror.com/vue-infinite-scroll/-/vue-infinite-scroll-2.0.2.tgz#ca37a91fe92ee0ad3b74acf8682c00917144b711"
+  integrity sha512-n+YghR059YmciANGJh9SsNWRi1YZEBVlODtmnb/12zI+4R72QZSWd+EuZ5mW6auEo/yaJXgxzwsuhvALVnm73A==
+
 vue-loader@^13.0.5:
   version "13.7.3"
   resolved "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz#e07440f78230a639d00ada4da7b96d0e9d62037f"