diff --git a/src/views/abnormalAlarm/serverMonitor/instances/details.vue b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
index f452626..db1a9dc 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/details.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
@@ -1,18 +1,23 @@
 <template>
-  <div style="height: 100%;">
+  <div style="height: 100%">
     <div class="content-top">
-      <div style="width: calc( 100% - 562px);">
+      <div style="width: calc(100% - 562px)">
         <BoxTitle title="Basic lnformation"></BoxTitle>
         <div class="basic-info">
-          <div 
+          <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
+                :class="{ 'ant-list-item-active': index === currIndex }"
+                slot="renderItem"
+                slot-scope="item, index"
+                @click="handleBasicItem(index)"
+              >
+                <div>{{ item.sourceName }}</div>
               </a-list-item>
               <div v-if="loading && !busy" class="demo-loading-container">
                 <a-spin />
@@ -20,220 +25,236 @@
             </a-list>
           </div>
           <div class="basic-info-detail">
-            <a-row :gutter="10" style="height: 40px;">
-              <a-col :span="6"  style="height: 100%;">
+            <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="">
+                    <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 class="basic-info-detail-col-msg-num state">
+                      {{ `${detailInfo.runningState ? 'NORMAL' : 'ERROR'}` }}
+                    </div>
                   </div>
                 </div>
               </a-col>
-              <a-col :span="5"  style="height: 100%;">
+              <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="">
+                    <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 class="basic-info-detail-col-msg-num">{{ detailInfo.alarmSms }}</div>
                   </div>
                 </div>
               </a-col>
-              <a-col :span="6"  style="height: 100%;padding-left:12px">
+              <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="">
+                    <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 class="basic-info-detail-col-msg-num">{{ detailInfo.alarmEmail }}</div>
                   </div>
                 </div>
               </a-col>
-              <a-col :span="7"  style="height: 100%;">
+              <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="">
+                    <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 class="basic-info-detail-col-msg-num">{{ detailInfo.alarms }}</div>
                   </div>
                 </div>
               </a-col>
             </a-row>
-            <a-row :gutter="10" style="height: 40px;margin-top: 10px;">
-              <a-col :span="6"  style="height: 100%;">
+            <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="">
+                    <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 class="basic-info-detail-col-msg-num">{{ detailInfo.runTime }}</div>
                   </div>
                 </div>
               </a-col>
-              <a-col :span="5"  style="height: 100%;">
+              <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="">
+                    <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 class="basic-info-detail-col-msg-num">{{ detailInfo.ramSize }}</div>
                   </div>
                 </div>
               </a-col>
-              <a-col :span="6"  style="height: 100%;padding-left:12px">
+              <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="">
+                    <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 class="basic-info-detail-col-msg-num">{{ detailInfo.cpuCores }}</div>
                   </div>
                 </div>
               </a-col>
-              <a-col :span="7"  style="height: 100%;">
+              <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="">
+                    <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 class="basic-info-detail-col-msg-num">{{ detailInfo.totalDiskPar }}</div>
                   </div>
                 </div>
               </a-col>
             </a-row>
             <div class="basic-info-detail-content">
-              <a-row style="height: 100%;">
+              <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-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-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.hostName }}</a-col>
                       </a-row>
-                    </a-col> 
-                    <a-col :span="12" style="height: 26px;">
-                      <a-row style="height: 100%;">
+                    </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-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.osVersion }}</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-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-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.ip }}</a-col>
                       </a-row>
                     </a-col>
-                    <a-col :span="12" style="height: 26px;">
-                      <a-row style="height: 100%;">
+                    <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-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-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.osName }}</a-col>
                       </a-row>
                     </a-col>
-                    <a-col :span="12" style="height: 26px;">
-                      <a-row style="height: 100%;">
+                    <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 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">
+                      {{ detailInfo.cpuType }}
+                    </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 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 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-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-col :span="6" class="basic-info-detail-content-val">{{ detailInfo.network }}</a-col>
                       </a-row>
                     </a-col>
-                    <a-col :span="13" style="height: 26px;">
-                      <a-row style="height: 100%;">
+                    <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-col :span="9" class="basic-info-detail-content-val">{{ detailInfo.location }}</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-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-col :span="6" class="basic-info-detail-content-val">{{ detailInfo.zone }}</a-col>
                       </a-row>
                     </a-col>
-                    <a-col :span="13" style="height: 26px;">
-                      <a-row style="height: 100%;">
+                    <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 style="height: 26px">
+                    <a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Start Time:</a-col>
+                    <a-col :span="17" 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 style="height: 26px">
+                    <a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Model Number:</a-col>
+                    <a-col :span="17" 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 style="height: 26px">
+                    <a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Bios Supplier:</a-col>
+                    <a-col :span="17" style="height: 26px" class="basic-info-detail-content-val"
+                      >American Megatrends lnc.</a-col
+                    >
                   </a-row>
                 </a-col>
               </a-row>
@@ -241,7 +262,7 @@
           </div>
         </div>
       </div>
-      <div style="width:542px">
+      <div style="width: 542px">
         <BoxTitle title="Alarm information"></BoxTitle>
         <div
           class="alarm-info-list"
@@ -251,7 +272,7 @@
         >
           <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="">
+              <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>
@@ -267,7 +288,7 @@
       <BoxTitle title="Event Timelinen">
         <template slot="right">
           <ul class="legend-list">
-            <li v-for="(item,index) in types" :key="index">
+            <li v-for="(item, index) in types" :key="index">
               <div :style="`background:${item.color}`" class="li-icon"></div>
               {{ item.name }}
             </li>
@@ -299,22 +320,16 @@
           <BoxTitle title="CPU utilization">
             <template slot="right">
               <div class="right-title">
-                <div class="right-title-item">
-                  average value:<i>32%</i>
-                </div>
-                <div class="right-title-item">
-                  minimum value:<i>32%</i>
-                </div>
-                <div class="right-title-item">
-                  Maximum value:<i>32%</i>
-                </div>
+                <div class="right-title-item">average value:<i>32%</i></div>
+                <div class="right-title-item">minimum value:<i>32%</i></div>
+                <div class="right-title-item">Maximum value:<i>32%</i></div>
               </div>
             </template>
           </BoxTitle>
           <div class="area-cpu" id="areaCpu"></div>
         </div>
       </div>
-      <div style="width:542px">
+      <div style="width: 542px">
         <BoxTitle title="DISK"></BoxTitle>
         <div class="bar-disk" id="disk"></div>
       </div>
@@ -323,80 +338,80 @@
 </template>
 
 <script>
-var base = +new Date(1968, 9, 3);
-var oneDay = 24 * 3600 * 1000;
-var date = [];
+var base = +new Date(1968, 9, 3)
+var oneDay = 24 * 3600 * 1000
+var date = []
 
-var data = [Math.random() * 300];
+var data = [Math.random() * 300]
 
 for (var i = 1; i < 200; i++) {
-    var now = new Date(base += oneDay);
-    date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
-    data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
+  var now = new Date((base += oneDay))
+  date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'))
+  data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
 }
-var data1 = [];
-var dataCount = 6;
-var startTime = +new Date();
-var categories = ['cpu'];
+var data1 = []
+var dataCount = 6
+var startTime = +new Date()
+var categories = ['cpu']
 var types = [
   { name: 'Halt', color: '#ec3e0d' },
   { name: 'Critical', color: '#ff683e' },
   { name: 'Problematic', color: '#ffbf2e' },
   { name: 'Maintained', color: '#a2681e' },
   { name: 'Anomalous', color: '#8dac39' },
-  { name: 'Suspension', color: '#6c6c6c' }
-];
-var legendData = types.map(item=>{
+  { name: 'Suspension', color: '#6c6c6c' },
+]
+var legendData = types.map((item) => {
   return item.name
 })
 // Generate mock data
 categories.forEach((category, index) => {
-  var baseTime = startTime;
+  var baseTime = startTime
   for (var i = 0; i < dataCount; i++) {
-    var typeItem = types[i];
-    var duration = Math.round(Math.random() * 10000);
+    var typeItem = types[i]
+    var duration = Math.round(Math.random() * 10000)
     data1.push({
       name: typeItem.name,
       value: [index, baseTime, (baseTime += duration), duration],
       itemStyle: {
         normal: {
-          color: typeItem.color
-        }
-      }
-    });
-    baseTime += Math.round(Math.random() * 2000);
+          color: typeItem.color,
+        },
+      },
+    })
+    baseTime += Math.round(Math.random() * 2000)
   }
-});
+})
 function renderItem1(params, api) {
-  var categoryIndex = api.value(0);
-  var start = api.coord([api.value(1), categoryIndex]);
-  var end = api.coord([api.value(2), categoryIndex]);
-  var height = api.size([0, 1])[1] * 1;
+  var categoryIndex = api.value(0)
+  var start = api.coord([api.value(1), categoryIndex])
+  var end = api.coord([api.value(2), categoryIndex])
+  var height = api.size([0, 1])[1] * 1
   var rectShape = echarts.graphic.clipRectByRect(
     {
       x: start[0],
       y: start[1] - height / 2,
       width: end[0] - start[0],
-      height: height
+      height: height,
     },
     {
       x: params.coordSys.x,
       y: params.coordSys.y,
       width: params.coordSys.width,
-      height: params.coordSys.height
+      height: params.coordSys.height,
     }
-  );
+  )
   return (
     rectShape && {
       type: 'rect',
       transition: ['shape'],
       shape: rectShape,
-      style: api.style()
+      style: api.style(),
     }
-  );
+  )
 }
-import BoxTitle from '../../components/boxTitle.vue';
-import infiniteScroll from 'vue-infinite-scroll';
+import BoxTitle from '../../components/boxTitle.vue'
+import infiniteScroll from 'vue-infinite-scroll'
 import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
 import * as echarts from 'echarts'
 export default {
@@ -410,18 +425,18 @@ export default {
       dataSource: [],
       loading: false,
       busy: false,
-      ipagination:{
+      ipagination: {
         current: 1,
         pageSize: 10,
-        total: 0
+        total: 0,
       },
       dataSource_alarm_info: [],
       loading_alarm_info: false,
       busy_alarm_info: false,
-      ipagination_alarm_info:{
+      ipagination_alarm_info: {
         current: 1,
         pageSize: 10,
-        total: 0
+        total: 0,
       },
       currIndex: null,
       timeLine: null,
@@ -429,75 +444,87 @@ export default {
       guageMemory: null,
       guageLoads: null,
       areaCpu: null,
-      currId: ""
-      
+      currId: '',
+      detailInfo: {},
     }
   },
   mounted() {
     // this.currId = this.$route.query.serverId||""
-    this.getSysServer(res => {
+    this.getSysServer((res) => {
       this.loading = false
       if (res.success) {
         this.ipagination.total = res.result.total
         this.dataSource = res.result.records
         if (this.$route.query.serverId) {
           this.currId = this.$route.query.serverId
-          this.currIndex = this.dataSource.findIndex(item=>item.id === this.currId)
+          this.currIndex = this.dataSource.findIndex((item) => item.hostId === this.currId)
         } else {
-          this.currId = this.dataSource[0].id
+          this.currId = this.dataSource[0].hostId
           this.currIndex = 0
         }
+        this.getBasiclnfo(this.currId)
       } else {
-        this.$message.warning("This operation fails. Contact your system administrator")
+        this.$message.warning('This operation fails. Contact your system administrator')
       }
-    });
-    this.getServerAlarmHistory(res => {
+    })
+    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")
+        this.$message.warning('This operation fails. Contact your system administrator')
       }
-    });
+    })
     this.$nextTick(() => {
       setTimeout(() => {
         this.drawTimeline()
-        this.drawGuageCpu()
-        this.drawGuageMemory()
         this.drawGuageLoads()
         this.drawAreaCpu()
-        this.drawDisk()
-      },0)
+      }, 0)
     })
   },
   methods: {
+    // Basic lnformation
+    getBasiclnfo(sourceId) {
+      let params = { hostId: sourceId }
+      getAction('/sysServer/detailsBasicInfo', params).then((res) => {
+        if (res.success) {
+          this.detailInfo = res.result
+          this.drawGuageCpu()
+          this.drawGuageMemory()
+          this.drawDisk()
+        } else {
+          this.$message.warning('This operation fails. Contact your system administrator')
+        }
+      })
+    },
     getSysServer(callBack) {
       this.loading = true
       let params = {
         pageNo: this.ipagination.current,
-        pageSize: this.ipagination.pageSize
+        pageSize: this.ipagination.pageSize,
       }
-      getAction("/sysServer/findPage", params).then(res => {
+      getAction('/sysServer/sourcePage', params).then((res) => {
         callBack(res)
       })
     },
     handleInfiniteOnLoad() {
-      if (this.dataSource.length>0) {
-        const dataSource = this.dataSource;
-        this.loading = true;
+      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;
+          this.$message.warning('Infinite List loaded all')
+          this.busy = true
+          this.loading = false
+          return
         } else {
           this.ipagination.current += 1
-          this.getSysServer(res => {
+          this.getSysServer((res) => {
             this.ipagination.total = res.result.total
-            this.dataSource = dataSource.concat(res.result.records);
-            this.loading = false;
-          });
+            this.dataSource = dataSource.concat(res.result.records)
+            this.loading = false
+          })
         }
       }
     },
@@ -507,69 +534,69 @@ export default {
     getServerAlarmHistory(callBack) {
       this.loading = true
       let params = {
-        startDate: "2022-08-01",
-        endDate: "2023-08-07",
+        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 => {
+      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 (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;
+          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.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;
-          });
+            this.dataSource_alarm_info = dataSource_alarm_info.concat(res.result.records)
+            this.loading_alarm_info = false
+          })
         }
       }
     },
-    
+
     drawTimeline() {
-      this.timeLine = echarts.init(document.getElementById("timeLine"))
+      this.timeLine = echarts.init(document.getElementById('timeLine'))
       let option = {
-        color:['#7b9ce1','#bd6d6c','#75d874','#e0bc78','#dc77dc','#72b362'],
+        color: ['#7b9ce1', '#bd6d6c', '#75d874', '#e0bc78', '#dc77dc', '#72b362'],
         tooltip: {
           formatter: function (params) {
-            return params.marker + params.name + ': ' + params.value[3] + ' ms';
-          }
+            return params.marker + params.name + ': ' + params.value[3] + ' ms'
+          },
         },
         grid: {
           left: '0%',
           right: '0%',
           bottom: '0',
-          top:15,
+          top: 15,
           height: 32,
           containLabel: false,
-          show: true
+          show: true,
         },
         xAxis: {
           min: startTime,
           axisLabel: {
-            color: "#ade6ee",
+            color: '#ade6ee',
             fontSize: 14,
             formatter: function (val) {
-              return Math.max(0, val - startTime) + ' ms';
-            }
+              return Math.max(0, val - startTime) + ' ms'
+            },
           },
           splitLine: {
-            show: false
-          }
+            show: false,
+          },
         },
         yAxis: {
-          show:false,
-          data: categories
+          show: false,
+          data: categories,
         },
         series: [
           { name: legendData[0], type: 'bar', data: [] },
@@ -583,19 +610,19 @@ export default {
             renderItem: renderItem1,
             encode: {
               x: [1, 2],
-              y: 0
+              y: 0,
             },
-            data: data1
-          }
-        ]
+            data: data1,
+          },
+        ],
       }
       this.timeLine.setOption(option)
-      window.addEventListener("resize", function () {
-        this.timeLine.resize();
-      });
+      window.addEventListener('resize', function () {
+        this.timeLine.resize()
+      })
     },
     drawGuageCpu() {
-      this.guageCpu = echarts.init(document.getElementById("cpu"))
+      this.guageCpu = echarts.init(document.getElementById('cpu'))
       let option = {
         series: [
           {
@@ -606,51 +633,51 @@ export default {
             endAngle: 0,
             min: 0,
             max: 100,
-            itemStyle:{
-              color: "#8531f6"
+            itemStyle: {
+              color: '#8531f6',
             },
             progress: {
               show: true,
-              width: 20
+              width: 20,
             },
             pointer: {
-              show: false
+              show: false,
             },
             axisLine: {
               lineStyle: {
-                color:[[1, '#162b39']],
-                width: 20
-              }
+                color: [[1, '#162b39']],
+                width: 20,
+              },
             },
             axisTick: {
-              show:false,
+              show: false,
             },
             splitLine: {
-              show:false,
+              show: false,
             },
             axisLabel: {
-              show:false,
+              show: false,
             },
             anchor: {
-              show: false
+              show: false,
             },
             title: {
-              show: false
+              show: false,
             },
             detail: {
               valueAnimation: true,
-              fontFamily: "MicrogrammaD-MediExte",
+              fontFamily: 'MicrogrammaD-MediExte',
               fontSize: 24,
               lineHeight: 28,
               offsetCenter: [0, '-10%'],
               formatter: '{value} %',
-              color: 'white'
+              color: 'white',
             },
             data: [
               {
-                value: 20
-              }
-            ]
+                value: this.detailInfo.cpuUsed || 0,
+              },
+            ],
           },
           {
             type: 'gauge',
@@ -667,51 +694,56 @@ export default {
                 y: 1,
                 x2: 0,
                 y2: 0,
-                colorStops: [{
-                    offset: 0, color: '#7776ff' // 0% 处的颜色
-                }, {
-                    offset: 1, color: '#ae2cf1' // 100% 处的颜色
-                }],
-                global: false // 缺省为 false
-              }
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#7776ff', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#ae2cf1', // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
             },
             progress: {
               show: true,
-              width: 2
+              width: 2,
             },
             pointer: {
-              show: false
+              show: false,
             },
             axisLine: {
-              show: false
+              show: false,
             },
             axisTick: {
-              show: false
+              show: false,
             },
             splitLine: {
-              show: false
+              show: false,
             },
             axisLabel: {
-              show: false
+              show: false,
             },
             detail: {
-              show: false
+              show: false,
             },
             data: [
               {
-                value: 100
-              }
-            ]
-          }
-        ]
+                value: 100,
+              },
+            ],
+          },
+        ],
       }
       this.guageCpu.setOption(option)
-      window.addEventListener("resize", function () {
-        this.guageCpu.resize();
-      });
+      window.addEventListener('resize', function () {
+        this.guageCpu.resize()
+      })
     },
     drawGuageMemory() {
-      this.guageMemory = echarts.init(document.getElementById("memory"))
+      this.guageMemory = echarts.init(document.getElementById('memory'))
       let option = {
         series: [
           {
@@ -722,51 +754,51 @@ export default {
             endAngle: 0,
             min: 0,
             max: 100,
-            itemStyle:{
-              color: "#1aad32"
+            itemStyle: {
+              color: '#1aad32',
             },
             progress: {
               show: true,
-              width: 20
+              width: 20,
             },
             pointer: {
-              show: false
+              show: false,
             },
             axisLine: {
               lineStyle: {
-                color:[[1, '#162b39']],
-                width: 20
-              }
+                color: [[1, '#162b39']],
+                width: 20,
+              },
             },
             axisTick: {
-              show:false,
+              show: false,
             },
             splitLine: {
-              show:false,
+              show: false,
             },
             axisLabel: {
-              show:false,
+              show: false,
             },
             anchor: {
-              show: false
+              show: false,
             },
             title: {
-              show: false
+              show: false,
             },
             detail: {
               valueAnimation: true,
-              fontFamily: "MicrogrammaD-MediExte",
+              fontFamily: 'MicrogrammaD-MediExte',
               fontSize: 24,
               lineHeight: 28,
               offsetCenter: [0, '-10%'],
               formatter: '{value} %',
-              color: 'white'
+              color: 'white',
             },
             data: [
               {
-                value: 20
-              }
-            ]
+                value: this.detailInfo.memoryUsed || 0,
+              },
+            ],
           },
           {
             type: 'gauge',
@@ -783,51 +815,56 @@ export default {
                 y: 1,
                 x2: 0,
                 y2: 0,
-                colorStops: [{
-                    offset: 0, color: '#1bad33' // 0% 处的颜色
-                }, {
-                    offset: 1, color: '#14ea38' // 100% 处的颜色
-                }],
-                global: false // 缺省为 false
-              }
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#1bad33', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#14ea38', // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
             },
             progress: {
               show: true,
-              width: 2
+              width: 2,
             },
             pointer: {
-              show: false
+              show: false,
             },
             axisLine: {
-              show: false
+              show: false,
             },
             axisTick: {
-              show: false
+              show: false,
             },
             splitLine: {
-              show: false
+              show: false,
             },
             axisLabel: {
-              show: false
+              show: false,
             },
             detail: {
-              show: false
+              show: false,
             },
             data: [
               {
-                value: 100
-              }
-            ]
-          }
-        ]
+                value: 100,
+              },
+            ],
+          },
+        ],
       }
       this.guageMemory.setOption(option)
-      window.addEventListener("resize", function () {
-        this.guageMemory.resize();
-      });
+      window.addEventListener('resize', function () {
+        this.guageMemory.resize()
+      })
     },
     drawGuageLoads() {
-      this.guageLoads = echarts.init(document.getElementById("loads"))
+      this.guageLoads = echarts.init(document.getElementById('loads'))
       let option = {
         series: [
           {
@@ -838,51 +875,51 @@ export default {
             endAngle: 0,
             min: 0,
             max: 100,
-            itemStyle:{
-              color: "#61bbfa"
+            itemStyle: {
+              color: '#61bbfa',
             },
             progress: {
               show: true,
-              width: 20
+              width: 20,
             },
             pointer: {
-              show: false
+              show: false,
             },
             axisLine: {
               lineStyle: {
-                color:[[1, '#162b39']],
-                width: 20
-              }
+                color: [[1, '#162b39']],
+                width: 20,
+              },
             },
             axisTick: {
-              show:false,
+              show: false,
             },
             splitLine: {
-              show:false,
+              show: false,
             },
             axisLabel: {
-              show:false,
+              show: false,
             },
             anchor: {
-              show: false
+              show: false,
             },
             title: {
-              show: false
+              show: false,
             },
             detail: {
               valueAnimation: true,
-              fontFamily: "MicrogrammaD-MediExte",
+              fontFamily: 'MicrogrammaD-MediExte',
               fontSize: 24,
               lineHeight: 28,
               offsetCenter: [0, '-10%'],
               formatter: '{value} %',
-              color: 'white'
+              color: 'white',
             },
             data: [
               {
-                value: 20
-              }
-            ]
+                value: 20,
+              },
+            ],
           },
           {
             type: 'gauge',
@@ -899,173 +936,178 @@ export default {
                 y: 1,
                 x2: 0,
                 y2: 0,
-                colorStops: [{
-                    offset: 0, color: '#4facfe' // 0% 处的颜色
-                }, {
-                    offset: 1, color: '#00f2fe' // 100% 处的颜色
-                }],
-                global: false // 缺省为 false
-              }
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#4facfe', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#00f2fe', // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
             },
             progress: {
               show: true,
-              width: 2
+              width: 2,
             },
             pointer: {
-              show: false
+              show: false,
             },
             axisLine: {
-              show: false
+              show: false,
             },
             axisTick: {
-              show: false
+              show: false,
             },
             splitLine: {
-              show: false
+              show: false,
             },
             axisLabel: {
-              show: false
+              show: false,
             },
             detail: {
-              show: false
+              show: false,
             },
             data: [
               {
-                value: 100
-              }
-            ]
-          }
-        ]
+                value: 100,
+              },
+            ],
+          },
+        ],
       }
       this.guageLoads.setOption(option)
-      window.addEventListener("resize", function () {
-        this.guageLoads.resize();
-      });
+      window.addEventListener('resize', function () {
+        this.guageLoads.resize()
+      })
     },
     drawAreaCpu() {
-      this.areaCpu = echarts.init(document.getElementById("areaCpu"))
+      this.areaCpu = echarts.init(document.getElementById('areaCpu'))
       let option = {
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
         },
         grid: {
           left: '0%',
           right: '0%',
           bottom: '0',
-          top:15,
-          containLabel: true
+          top: 15,
+          containLabel: true,
         },
         xAxis: {
           type: 'category',
           axisTick: {
-            show:false
+            show: false,
           },
           axisLine: {
             lineStyle: {
-              color: "rgba(119, 181, 213, 0.5)"
-            }
+              color: 'rgba(119, 181, 213, 0.5)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)"
+            color: 'rgba(173, 230, 238, 1)',
           },
-          data: date
+          data: date,
         },
         yAxis: {
           type: 'value',
           axisLine: {
-            show:true,
+            show: true,
             lineStyle: {
-              color: "rgba(119, 181, 213, 0.5)"
-            }
+              color: 'rgba(119, 181, 213, 0.5)',
+            },
           },
           splitLine: {
             show: true,
             lineStyle: {
-              color: "rgba(119, 181, 213, 0.2)"
-            }
+              color: 'rgba(119, 181, 213, 0.2)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)"
+            color: 'rgba(173, 230, 238, 1)',
           },
         },
         series: [
           {
-            type:'line',
-            smooth:true,
+            type: 'line',
+            smooth: true,
             symbol: 'none',
             sampling: 'average',
-            itemStyle:{ normal:{color:"#10b3d6"}},
+            itemStyle: { normal: { color: '#10b3d6' } },
             areaStyle: {
-                normal: {
-                color: "#10b3d6",
+              normal: {
+                color: '#10b3d6',
               },
             },
-            data: data
-          }
-        ]
+            data: data,
+          },
+        ],
       }
       this.areaCpu.setOption(option)
-      window.addEventListener("resize", function () {
-        this.areaCpu.resize();
-      });
+      window.addEventListener('resize', function () {
+        this.areaCpu.resize()
+      })
     },
     drawDisk() {
-      this.barDisk = echarts.init(document.getElementById("disk"))
+      this.barDisk = echarts.init(document.getElementById('disk'))
       let option = {
         tooltip: {
-          trigger: 'item'
+          trigger: 'item',
         },
         grid: {
           left: '0%',
           right: '0%',
           bottom: '0',
-          top:15,
-          containLabel: true
+          top: 15,
+          containLabel: true,
         },
         xAxis: {
           type: 'category',
           axisTick: {
-            show:false
+            show: false,
           },
           axisLine: {
             lineStyle: {
-              color: "rgba(119, 181, 213, 0.5)"
-            }
+              color: 'rgba(119, 181, 213, 0.5)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)"
+            color: 'rgba(173, 230, 238, 1)',
           },
-          data: ['C', 'D', 'E']
+          data: this.detailInfo.diskUsed.xData,
         },
         yAxis: {
           type: 'value',
           min: 0,
           max: 100,
-          
+
           axisLine: {
-            show:true,
+            show: true,
             lineStyle: {
-              color: "rgba(119, 181, 213, 0.5)"
-            }
+              color: 'rgba(119, 181, 213, 0.5)',
+            },
           },
           splitLine: {
             show: true,
             lineStyle: {
-              color: "rgba(119, 181, 213, 0.2)"
-            }
+              color: 'rgba(119, 181, 213, 0.2)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)",
-            formatter: "{value}%"
+            color: 'rgba(173, 230, 238, 1)',
+            formatter: '{value}%',
           },
         },
         series: [
           {
-            type: "bar",
+            type: 'bar',
             barWidth: 50,
             itemStyle: {
               normal: {
-                color: function(params) {
+                color: function (params) {
                   //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                   var colorList = [
                     {
@@ -1074,58 +1116,75 @@ export default {
                       y: 1,
                       x2: 0,
                       y2: 0,
-                      colorStops: [{
-                          offset: 0, color: '#b43c2b' // 0% 处的颜色
-                      }, {
-                          offset: 1, color: '#d3a721' // 100% 处的颜色
-                      }],
-                    }, {
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: '#b43c2b', // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: '#d3a721', // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    {
                       type: 'linear',
                       x: 0,
                       y: 1,
                       x2: 0,
                       y2: 0,
-                      colorStops: [{
-                          offset: 0, color: '#0c5fa6' // 0% 处的颜色
-                      }, {
-                          offset: 1, color: '#0af0f8' // 100% 处的颜色
-                      }],
-                    }, {
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: '#0c5fa6', // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: '#0af0f8', // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    {
                       type: 'linear',
                       x: 0,
                       y: 1,
                       x2: 0,
                       y2: 0,
-                      colorStops: [{
-                          offset: 0, color: '#0a6f0a' // 0% 处的颜色
-                      }, {
-                          offset: 1, color: '#90d40c' // 100% 处的颜色
-                      }],
-                    }
-                  ];
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: '#0a6f0a', // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: '#90d40c', // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  ]
                   return colorList[params.dataIndex]
-                }
+                },
               },
             },
-            data: [60, 80, 30],
+            data: this.detailInfo.diskUsed.yData,
             z: 10,
             zlevel: 0,
           },
           {
             // 分隔
-            type: "pictorialBar",
+            type: 'pictorialBar',
             itemStyle: {
               normal: {
-                color: "#0F375F",
+                color: '#0F375F',
               },
             },
-            symbolRepeat: "fixed",
+            symbolRepeat: 'fixed',
             symbolMargin: 2,
-            symbol: "rect",
+            symbol: 'rect',
             symbolClip: true,
             symbolSize: [50, 4],
-            symbolPosition: "start",
-            data: [60, 80, 30],
+            symbolPosition: 'start',
+            data: this.detailInfo.diskUsed.yData,
             width: 5,
             z: 0,
             zlevel: 1,
@@ -1133,33 +1192,33 @@ export default {
         ],
       }
       this.barDisk.setOption(option)
-      window.addEventListener("resize", function () {
-        this.barDisk.resize();
-      });
+      window.addEventListener('resize', function () {
+        this.barDisk.resize()
+      })
     },
   },
 }
 </script>
 
 <style lang="less" scoped>
-.content-top{
+.content-top {
   width: 100%;
   height: 331px;
   // height: 43.5%;
   display: flex;
   justify-content: space-between;
-  .basic-info{
+  .basic-info {
     width: 100%;
-    height:291px;
+    height: 291px;
     padding: 15px 0;
     display: flex;
     justify-content: space-between;
-    &-list{
+    &-list {
       height: 100%;
       width: 170px;
       overflow: auto;
       border: solid 1px rgba(65, 111, 127, 0.5);
-      .ant-list-item{
+      .ant-list-item {
         border: none;
         height: 32px;
         justify-content: center;
@@ -1169,12 +1228,12 @@ export default {
         color: #ade6ee;
         cursor: pointer;
       }
-      .ant-list-item:nth-child(even){
+      .ant-list-item:nth-child(even) {
         background-color: rgba(13, 109, 118, 0.2);
       }
-      .ant-list-item-active{
+      .ant-list-item-active {
         background-color: rgb(15, 158, 171, 0.5) !important;
-	      color: #ffffff; 
+        color: #ffffff;
       }
       .demo-loading-container {
         position: absolute;
@@ -1183,42 +1242,41 @@ export default {
         text-align: center;
       }
     }
-    &-detail{
+    &-detail {
       height: 100%;
       width: calc(100% - 185px);
-      &-col{
+      &-col {
         height: 100%;
         position: relative;
-        &-img{
+        &-img {
           width: 40px;
           height: 40px;
           float: left;
-          img{
+          img {
             width: 100%;
             height: 100%;
           }
         }
-        &-msg{
+        &-msg {
           float: left;
           height: 100%;
           margin-left: 15px;
-          &-title{
+          &-title {
             height: 14px;
             position: absolute;
             left: 47px;
             top: 2px;
-            .circle{
+            .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-image: linear-gradient(90deg, #0e98a8 0%, #00fffc 100%), linear-gradient(#0cecca, #0cecca);
               background-blend-mode: normal, normal;
             }
-            .title{
+            .title {
               position: absolute;
               left: 20px;
               top: 0;
@@ -1230,7 +1288,7 @@ export default {
               white-space: nowrap;
             }
           }
-          &-num{
+          &-num {
             height: 20px;
             position: absolute;
             left: 47px;
@@ -1241,26 +1299,26 @@ export default {
             letter-spacing: 1px;
             color: #ffffff;
           }
-          .state{
+          .state {
             font-size: 16px;
             letter-spacing: 1px;
             color: #06cdd3;
           }
         }
       }
-      &-content{
+      &-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{
+        &-key {
           font-family: ArialMT;
           font-size: 12px;
           line-height: 26px;
           color: #6ebad0;
         }
-        &-val{
+        &-val {
           font-family: ArialMT;
           font-size: 12px;
           line-height: 26px;
@@ -1269,28 +1327,28 @@ export default {
       }
     }
   }
-  .alarm-info-list{
+  .alarm-info-list {
     height: 100%;
     overflow: auto;
     font-family: ArialMT;
     font-size: 16px;
-    .ant-list-item{
+    .ant-list-item {
       border: none;
       height: 52px;
       letter-spacing: 1px;
       color: #ade6ee;
       justify-content: flex-start;
     }
-    .ant-list-item:nth-child(odd){
+    .ant-list-item:nth-child(odd) {
       background-color: rgba(13, 109, 118, 0.2);
     }
-    &-img{
+    &-img {
       display: inline-block;
       width: 24px;
-	    height: 24px;
+      height: 24px;
       margin-left: 12px;
     }
-    &-info{
+    &-info {
       width: 188px;
       overflow: hidden;
       white-space: nowrap;
@@ -1299,32 +1357,31 @@ export default {
       display: inline-block;
       color: #ffffff;
     }
-    &-date{
+    &-date {
       display: inline-block;
       color: #90b4c5;
       margin-left: 35px;
     }
-    &-actions{
-      
+    &-actions {
       color: #17c6f2;
     }
   }
 }
-.content-center{
+.content-center {
   width: 100%;
   height: 115px;
   position: relative;
   // height: 14.9%;
-  .legend-list{
-    list-style:none;
-    li{
+  .legend-list {
+    list-style: none;
+    li {
       float: left;
       font-size: 14px;
       margin-left: 20px;
       font-family: MicrosoftYaHei;
       font-weight: normal;
       color: #ade6ee;
-      .li-icon{
+      .li-icon {
         display: inline-block;
         vertical-align: middle;
         width: 12px;
@@ -1335,7 +1392,7 @@ export default {
       }
     }
   }
-  .line-bg{
+  .line-bg {
     width: 100%;
     height: 32px;
     position: absolute;
@@ -1343,56 +1400,56 @@ export default {
     top: 55px;
     background: url(~@/assets/images/abnormalAlarm/line.png) repeat;
   }
-  .time-line{
+  .time-line {
     width: 100%;
     height: 75px;
     position: relative;
   }
 }
-.content-bottom{
+.content-bottom {
   width: 100%;
   height: calc(100% - 446px);
   // height: 41.6%;
   display: flex;
   justify-content: space-between;
-  &-left{
-    width: calc( 100% - 562px);
+  &-left {
+    width: calc(100% - 562px);
     height: 100%;
-    &-top{
+    &-top {
       width: 100%;
       height: 160px;
-      .gauge-content{
+      .gauge-content {
         width: 100%;
         height: 120px;
       }
     }
-    &-bottom{
+    &-bottom {
       width: 100%;
       height: calc(100% - 160px);
-      .right-title{
+      .right-title {
         font-family: ArialMT;
         font-size: 12px;
         letter-spacing: 1px;
         color: #ade6ee;
         font-weight: normal;
-        &-item{
+        &-item {
           display: inline-block;
           margin-left: 20px;
         }
-        i{
+        i {
           font-size: 16px;
           font-style: normal;
           letter-spacing: 2px;
           color: #ade6ee;
         }
       }
-      .area-cpu{
+      .area-cpu {
         width: 100%;
         height: calc(100% - 40px);
       }
     }
   }
-  .bar-disk{
+  .bar-disk {
     width: 100%;
     height: calc(100% - 40px);
   }