diff --git a/src/api/manage.js b/src/api/manage.js
index 124e071..f88f6d8 100644
--- a/src/api/manage.js
+++ b/src/api/manage.js
@@ -28,6 +28,23 @@ export function postAction(url, parameter) {
     headers: signHeader
   })
 }
+
+//post
+export function postActionWithTimeOut(url, parameter, timeout) {
+  let sign = signMd5Utils.getSign(url, parameter);
+  //将签名和时间戳，添加在请求接口 Header
+  // update-begin--author:taoyan---date:20220421--for: VUEN-410【签名改造】 X-TIMESTAMP牵扯
+  let signHeader = { "X-Sign": sign, "X-TIMESTAMP": signMd5Utils.getTimestamp() };
+  // update-end--author:taoyan---date:20220421--for: VUEN-410【签名改造】 X-TIMESTAMP牵扯
+
+  return axios({
+    url: url,
+    method: 'post',
+    data: parameter,
+    headers: signHeader,
+    timeout
+  })
+}
 export function postFileAction(url, parameter) {
   let sign = signMd5Utils.getSign(url, parameter);
   //将签名和时间戳，添加在请求接口 Header
diff --git a/src/utils/file.js b/src/utils/file.js
index 08cf671..09ef907 100644
--- a/src/utils/file.js
+++ b/src/utils/file.js
@@ -87,7 +87,7 @@ export const zipFile = async (fileList, zipName) => {
   result.forEach(res => {
     zip.file(res.fileName, res.data)
   })
-  const content = await zip.generateAsync({ type: 'blob' })
+  const content = await zip.generateAsync({ type: 'blob', compression: 'DEFLATE' })
   return new File([content], zipName, { type: content.type })
 }
 
diff --git a/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue b/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue
index 1659ec2..ba9886e 100644
--- a/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue
+++ b/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue
@@ -1,17 +1,19 @@
 <template>
   <div style="height: 100%">
     <SearchBar type="alarmAnalysis" @search="handleSearch"></SearchBar>
-    <div class="chart-layout" id="analysisChartBar"></div>
-    <div class="chart-box">
-      <div class="chart-box-left">
-        <BoxTitle title="Station Alarm number"></BoxTitle>
-        <div class="chart-box-left-bar" id="chartLeft"></div>
+    <a-spin :spinning="spinning">
+      <div class="chart-layout" id="analysisChartBar"></div>
+      <div class="chart-box">
+        <div class="chart-box-left">
+          <BoxTitle title="Station Alarm number"></BoxTitle>
+          <div class="chart-box-left-bar" id="chartLeft"></div>
+        </div>
+        <div class="chart-box-right">
+          <BoxTitle title="Anaysis Sources Alarms"></BoxTitle>
+          <div class="chart-box-right-pie" id="chartRight"></div>
+        </div>
       </div>
-      <div class="chart-box-right">
-        <BoxTitle title="Anaysis Sources Alarms"></BoxTitle>
-        <div class="chart-box-right-pie" id="chartRight"></div>
-      </div>
-    </div>
+    </a-spin>
   </div>
 </template>
 
@@ -29,6 +31,7 @@ export default {
   },
   data() {
     return {
+      spinning: false,
       xData: [],
       yData: [],
       xData_left: [],
@@ -50,6 +53,7 @@ export default {
         endDate,
         types,
       }
+      this.spinning = true
       this.getAnalysisLogBar({ startDate, endDate })
       this.getStationNum({ startDate, endDate })
       this.getAnalysisSource({ startDate, endDate })
@@ -59,45 +63,60 @@ export default {
         startDate: obj.startDate,
         endDate: obj.endDate,
       }
-      getAction('/alarmAnalysisLog/byTime', params).then((res) => {
-        if (res.success) {
-          this.xData = res.result.xData
-          this.yData = res.result.yData
-          this.drawAnalysis_bar()
-        } else {
-          this.$message.warning('This operation fails. Contact your system administrator')
-        }
-      })
+      getAction('/alarmAnalysisLog/byTime', params)
+        .then((res) => {
+          this.spinning = false
+          if (res.success) {
+            this.xData = res.result.xData
+            this.yData = res.result.yData
+            this.drawAnalysis_bar()
+          } else {
+            this.$message.warning('This operation fails. Contact your system administrator')
+          }
+        })
+        .finally(() => {
+          this.spinning = false
+        })
     },
     getStationNum(obj) {
       let params = {
         startDate: obj.startDate,
         endDate: obj.endDate,
       }
-      getAction('/alarmAnalysisLog/byStatoin', params).then((res) => {
-        if (res.success) {
-          this.xData_left = res.result.xData
-          this.yData_left = res.result.yData
-          this.drawLeftChart()
-        } else {
-          this.$message.warning('This operation fails. Contact your system administrator')
-        }
-      })
+      getAction('/alarmAnalysisLog/byStatoin', params)
+        .then((res) => {
+          this.spinning = false
+          if (res.success) {
+            this.xData_left = res.result.xData
+            this.yData_left = res.result.yData
+            this.drawLeftChart()
+          } else {
+            this.$message.warning('This operation fails. Contact your system administrator')
+          }
+        })
+        .finally(() => {
+          this.spinning = false
+        })
     },
     getAnalysisSource(obj) {
       let params = {
         startDate: obj.startDate,
         endDate: obj.endDate,
       }
-      getAction('/alarmAnalysisLog/bySource', params).then((res) => {
-        if (res.success) {
-          this.pieData = res.result.pieData
-          this.pieTotal = res.result.pieTotal
-          this.drawRightChart()
-        } else {
-          this.$message.warning('This operation fails. Contact your system administrator')
-        }
-      })
+      getAction('/alarmAnalysisLog/bySource', params)
+        .then((res) => {
+          this.spinning = false
+          if (res.success) {
+            this.pieData = res.result.pieData
+            this.pieTotal = res.result.pieTotal
+            this.drawRightChart()
+          } else {
+            this.$message.warning('This operation fails. Contact your system administrator')
+          }
+        })
+        .finally(() => {
+          this.spinning = false
+        })
     },
     drawAnalysis_bar() {
       let myChart = echarts.init(document.getElementById('analysisChartBar'))
diff --git a/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue b/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
index 2695d99..a6c7c9d 100644
--- a/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
+++ b/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
@@ -2,21 +2,23 @@
   <div style="height: 100%">
     <ConditionBox :value="queryParams" @change="getData" @refresh="getData"></ConditionBox>
     <div class="monitor-content">
-      <a-row :gutter="10" style="height: 100%">
-        <a-col :span="12" style="height: 33.3333%" v-for="(el, i) in chartData" :key="i">
-          <div class="monitor-content-item">
-            <AreaChart
-              :title="el.title"
-              :layout="`area${i}`"
-              :color="el.color"
-              :dataSource="el.list"
-              :newUnits="el.newUnits"
-              :units="el.units"
-            >
-            </AreaChart>
-          </div>
-        </a-col>
-      </a-row>
+      <a-spin :spinning="spinning">
+        <a-row :gutter="10" style="height: 100%">
+          <a-col :span="12" style="height: 33.3333%" v-for="(el, i) in chartData" :key="i">
+            <div class="monitor-content-item">
+              <AreaChart
+                :title="el.title"
+                :layout="`area${i}`"
+                :color="el.color"
+                :dataSource="el.list"
+                :newUnits="el.newUnits"
+                :units="el.units"
+              >
+              </AreaChart>
+            </div>
+          </a-col>
+        </a-row>
+      </a-spin>
       <!-- <div style="height: auto; margin-top: 15px; padding-right: 10px">
         <BoxTitle title="Connect List"></BoxTitle>
         <a-row :gutter="20" style="height: auto; margin-top: 15px">
@@ -60,6 +62,7 @@ export default {
   },
   data() {
     return {
+      spinning: false,
       queryParams: {
         hostId: '',
         start: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
@@ -360,7 +363,8 @@ export default {
   methods: {
     // 获取数据
     async getData() {
-      const hide = this.$message.loading('loading...', 0)
+      // const hide = this.$message.loading('loading...', 0)
+      this.spinning = true
       try {
         const { success, result, message } = await getAction('/systemMonitor/dbDetail', this.queryParams)
         if (success) {
@@ -383,8 +387,10 @@ export default {
         }
       } catch (error) {
         console.error(error)
+        this.spinning = false
       } finally {
-        hide()
+        // hide()
+        this.spinning = false
       }
     },
     //生成图表（运管系统代码）
@@ -455,6 +461,14 @@ export default {
   margin-top: 10px;
   overflow-y: auto;
   overflow-x: hidden;
+  /deep/.ant-spin-nested-loading {
+    width: 100%;
+    height: 100%;
+  }
+  /deep/.ant-spin-container {
+    width: 100%;
+    height: 100%;
+  }
   &-item {
     width: 100%;
     height: 100%;
diff --git a/src/views/abnormalAlarm/databaseMonitor/overview/index.vue b/src/views/abnormalAlarm/databaseMonitor/overview/index.vue
index fc83a48..6a8bc3c 100644
--- a/src/views/abnormalAlarm/databaseMonitor/overview/index.vue
+++ b/src/views/abnormalAlarm/databaseMonitor/overview/index.vue
@@ -193,11 +193,11 @@ const columns = [
     ellipsis: true,
     width: 300,
   },
-  {
-    title: 'SLOW QUERY',
-    align: 'center',
-    dataIndex: 'slowQuery',
-  },
+  // {
+  //   title: 'SLOW QUERY',
+  //   align: 'center',
+  //   dataIndex: 'slowQuery',
+  // },
   {
     title: 'ALARMS',
     align: 'center',
diff --git a/src/views/abnormalAlarm/emailMonitor/instances/index.vue b/src/views/abnormalAlarm/emailMonitor/instances/index.vue
index ae16b65..9f5010b 100644
--- a/src/views/abnormalAlarm/emailMonitor/instances/index.vue
+++ b/src/views/abnormalAlarm/emailMonitor/instances/index.vue
@@ -271,18 +271,18 @@ export default {
     },
     onEmailChange(val) {
       this.spinning = true
-      this.guageStore.clear()
+      if (this.guageStore) this.guageStore.clear()
       this.emailId = val
     },
     onDateChange(val) {
       this.spinning = true
-      this.areaMailLine.clear()
+      if (this.areaMailLine) this.areaMailLine.clear()
       this.startDate = this.getBeforeDate(val - 1)
       this.getEmailStatistics()
     },
     onRangeDateChange(date, dateString) {
       this.spinning = true
-      this.areaMailLine.clear()
+      if (this.areaMailLine) this.areaMailLine.clear()
       this.startDate = dateString[0]
       this.endDate = dateString[1]
       this.getEmailStatistics()
@@ -315,7 +315,7 @@ export default {
           s = s.substring(0, s.length - 1)
           res.result.usage = s
           this.emailSpace = res.result
-          this.drawGuageStore()
+          // this.drawGuageStore()
         } else {
           this.$message.warning('This operation fails. Contact your system administrator')
         }
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
index ce0f74f..3efae28 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
@@ -49,112 +49,114 @@
       </div>
     </div>
     <div class="cpu-content">
-      <a-row :gutter="[20, 15]" style="height: 100%">
-        <a-col :span="12" style="height: calc(50% + 10px)">
-          <div class="cpu-content-item">
-            <BoxTitle title="CPU utilizatior">
-              <template slot="right">
-                <ul>
-                  <li><span>Avg:</span>{{ cpuUtilization.avg + cpuUtilization.units }}</li>
-                  <li><span>Min:</span>{{ cpuUtilization.min + cpuUtilization.units }}</li>
-                  <li><span>Max:</span>{{ cpuUtilization.max + cpuUtilization.units }}</li>
-                </ul>
-              </template>
-              <template slot="other">
-                <img
-                  src="@/assets/images/abnormalAlarm/big.png"
-                  @click="handelZoom('CPU utilizatior', option1)"
-                  alt=""
-                />
-              </template>
-            </BoxTitle>
-            <div class="cpu-content-item-chart" id="chart1"></div>
-          </div>
-        </a-col>
-        <a-col :span="12" style="height: calc(50% + 10px)">
-          <div class="cpu-content-item">
-            <BoxTitle title="Percentage of free system space">
-              <template slot="right">
-                <ul>
-                  <li><span>Avg:</span>{{ cpuIdleRate.avg + cpuIdleRate.units }}</li>
-                  <li><span>Min:</span>{{ cpuIdleRate.min + cpuIdleRate.units }}</li>
-                  <li><span>Max:</span>{{ cpuIdleRate.max + cpuIdleRate.units }}</li>
-                </ul>
-              </template>
-              <template slot="other">
-                <img
-                  src="@/assets/images/abnormalAlarm/big.png"
-                  @click="handelZoom('Percentage of free system space', option2)"
-                  alt=""
-                />
-              </template>
-            </BoxTitle>
-            <div class="cpu-content-item-chart" id="chart2"></div>
-          </div>
-        </a-col>
-        <a-col :span="12" style="height: calc(50% + 10px)">
-          <div class="cpu-content-item">
-            <BoxTitle title="Interrupt and episodic switching">
-              <template slot="other">
-                <img
-                  src="@/assets/images/abnormalAlarm/big.png"
-                  @click="handelZoom('Interrupt and episodic switching', option3)"
-                  alt=""
-                />
-              </template>
-            </BoxTitle>
-            <div class="cpu-content-item-info">
-              <a-row style="height: 30px" type="flex">
-                <a-col flex="170px">Processor interrupt(s)</a-col>
-                <a-col flex="100px"
-                  >Avg:<span>{{ multiLine.cpuInterrupt.avg + multiLine.cpuInterrupt.units }}</span></a-col
-                >
-                <a-col flex="100px"
-                  >Min:<span>{{ multiLine.cpuInterrupt.min + multiLine.cpuInterrupt.units }}</span></a-col
-                >
-                <a-col flex="100px"
-                  >Max:<span>{{ multiLine.cpuInterrupt.max + multiLine.cpuInterrupt.units }}</span></a-col
-                >
-                <a-col
-                  ><div style="background: #00a8ff" class="li-icon"></div>
-                  <i>Processor interrupt</i></a-col
-                >
-              </a-row>
-              <a-row style="height: 30px" type="flex">
-                <a-col flex="170px">Situational switching(s)</a-col>
-                <a-col flex="100px"
-                  >Avg:<span>{{ multiLine.cpuSwitch.avg + multiLine.cpuSwitch.units }}</span></a-col
-                >
-                <a-col flex="100px"
-                  >Min:<span>{{ multiLine.cpuSwitch.min + multiLine.cpuSwitch.units }}</span></a-col
-                >
-                <a-col flex="100px"
-                  >Max:<span>{{ multiLine.cpuSwitch.max + multiLine.cpuSwitch.units }}</span></a-col
-                >
-                <a-col
-                  ><div style="background: #73b54b" class="li-icon"></div>
-                  <i>Situational switching(s)</i></a-col
-                >
-              </a-row>
+      <a-spin :spinning="spinning">
+        <a-row :gutter="[20, 15]" style="height: 100%">
+          <a-col :span="12" style="height: calc(50% + 10px)">
+            <div class="cpu-content-item">
+              <BoxTitle title="CPU utilizatior">
+                <template slot="right">
+                  <ul>
+                    <li><span>Avg:</span>{{ cpuUtilization.avg + cpuUtilization.units }}</li>
+                    <li><span>Min:</span>{{ cpuUtilization.min + cpuUtilization.units }}</li>
+                    <li><span>Max:</span>{{ cpuUtilization.max + cpuUtilization.units }}</li>
+                  </ul>
+                </template>
+                <template slot="other">
+                  <img
+                    src="@/assets/images/abnormalAlarm/big.png"
+                    @click="handelZoom('CPU utilizatior', option1)"
+                    alt=""
+                  />
+                </template>
+              </BoxTitle>
+              <div class="cpu-content-item-chart" id="chart1"></div>
             </div>
-            <div class="cpu-content-item-chart3" id="chart3"></div>
-          </div>
-        </a-col>
-        <a-col :span="12" style="height: calc(50% + 10px)">
-          <div class="cpu-content-item">
-            <BoxTitle title="CPU usage of diferent cores">
-              <template slot="other">
-                <img
-                  src="@/assets/images/abnormalAlarm/big.png"
-                  @click="handelZoom('CPU usage of diferent cores', option4)"
-                  alt=""
-                />
-              </template>
-            </BoxTitle>
-            <div class="cpu-content-item-chart" id="chart4"></div>
-          </div>
-        </a-col>
-      </a-row>
+          </a-col>
+          <a-col :span="12" style="height: calc(50% + 10px)">
+            <div class="cpu-content-item">
+              <BoxTitle title="Percentage of free system space">
+                <template slot="right">
+                  <ul>
+                    <li><span>Avg:</span>{{ cpuIdleRate.avg + cpuIdleRate.units }}</li>
+                    <li><span>Min:</span>{{ cpuIdleRate.min + cpuIdleRate.units }}</li>
+                    <li><span>Max:</span>{{ cpuIdleRate.max + cpuIdleRate.units }}</li>
+                  </ul>
+                </template>
+                <template slot="other">
+                  <img
+                    src="@/assets/images/abnormalAlarm/big.png"
+                    @click="handelZoom('Percentage of free system space', option2)"
+                    alt=""
+                  />
+                </template>
+              </BoxTitle>
+              <div class="cpu-content-item-chart" id="chart2"></div>
+            </div>
+          </a-col>
+          <a-col :span="12" style="height: calc(50% + 10px)">
+            <div class="cpu-content-item">
+              <BoxTitle title="Interrupt and episodic switching">
+                <template slot="other">
+                  <img
+                    src="@/assets/images/abnormalAlarm/big.png"
+                    @click="handelZoom('Interrupt and episodic switching', option3)"
+                    alt=""
+                  />
+                </template>
+              </BoxTitle>
+              <div class="cpu-content-item-info">
+                <a-row style="height: 30px" type="flex">
+                  <a-col flex="170px">Processor interrupt(s)</a-col>
+                  <a-col flex="100px"
+                    >Avg:<span>{{ multiLine.cpuInterrupt.avg + multiLine.cpuInterrupt.units }}</span></a-col
+                  >
+                  <a-col flex="100px"
+                    >Min:<span>{{ multiLine.cpuInterrupt.min + multiLine.cpuInterrupt.units }}</span></a-col
+                  >
+                  <a-col flex="100px"
+                    >Max:<span>{{ multiLine.cpuInterrupt.max + multiLine.cpuInterrupt.units }}</span></a-col
+                  >
+                  <a-col
+                    ><div style="background: #00a8ff" class="li-icon"></div>
+                    <i>Processor interrupt</i></a-col
+                  >
+                </a-row>
+                <a-row style="height: 30px" type="flex">
+                  <a-col flex="170px">Situational switching(s)</a-col>
+                  <a-col flex="100px"
+                    >Avg:<span>{{ multiLine.cpuSwitch.avg + multiLine.cpuSwitch.units }}</span></a-col
+                  >
+                  <a-col flex="100px"
+                    >Min:<span>{{ multiLine.cpuSwitch.min + multiLine.cpuSwitch.units }}</span></a-col
+                  >
+                  <a-col flex="100px"
+                    >Max:<span>{{ multiLine.cpuSwitch.max + multiLine.cpuSwitch.units }}</span></a-col
+                  >
+                  <a-col
+                    ><div style="background: #73b54b" class="li-icon"></div>
+                    <i>Situational switching(s)</i></a-col
+                  >
+                </a-row>
+              </div>
+              <div class="cpu-content-item-chart3" id="chart3"></div>
+            </div>
+          </a-col>
+          <a-col :span="12" style="height: calc(50% + 10px)">
+            <div class="cpu-content-item">
+              <BoxTitle title="CPU usage of diferent cores">
+                <template slot="other">
+                  <img
+                    src="@/assets/images/abnormalAlarm/big.png"
+                    @click="handelZoom('CPU usage of diferent cores', option4)"
+                    alt=""
+                  />
+                </template>
+              </BoxTitle>
+              <div class="cpu-content-item-chart" id="chart4"></div>
+            </div>
+          </a-col>
+        </a-row>
+      </a-spin>
     </div>
     <a-modal :title="modalTitle" :width="1200" v-model="visible" :maskClosable="false" @cancel="onCancel">
       <div class="modal-content" id="common_cpu"></div>
@@ -176,7 +178,7 @@ import * as echarts from 'echarts'
 import dateFormat from '@/components/jeecg/JEasyCron/format-date'
 import BoxTitle from '../../components/boxTitle.vue'
 import CreateRules from './createRules.vue'
-import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
+import { getAction, postAction } from '@/api/manage'
 export default {
   components: {
     BoxTitle,
@@ -184,6 +186,7 @@ export default {
   },
   data() {
     return {
+      spinning: false,
       currId: '',
       visible_rule: false,
       currLabel: '',
@@ -251,58 +254,63 @@ export default {
         start: this.queryParams.startDate,
         end: this.queryParams.endDate,
       }
-      getAction('/systemMonitor/queryHostDetails', params).then((res) => {
-        const data = res.result
-        //CPU utilizatior
-        this.cpuUtilization = data.find((item) => item.name === 'cpuUtilization')
-        this.cpuUtilization_xData = this.cpuUtilization.list.map((item) => {
-          return dateFormat(new Date(item.date * 1000), 'hh:mm')
-        })
-        this.cpuUtilization_data = this.cpuUtilization.list.map((item) => {
-          return Number(item.value.toFixed(2))
-        })
-        //Percentage of free system space
-        this.cpuIdleRate = data.find((item) => item.name === 'cpuIdleRate')
-        this.cpuIdleRate_xData = this.cpuIdleRate.list.map((item) => {
-          return dateFormat(new Date(item.date * 1000), 'hh:mm')
-        })
-        this.cpuIdleRate_data = this.cpuIdleRate.list.map((item) => {
-          return Number(item.value.toFixed(2))
-        })
-        // Interrupt and episodic switching
-        ;(this.multiLine.cpuInterrupt = data.find((item) => item.name === 'cpuInterrupt')),
-          (this.multiLine.cpuSwitch = data.find((item) => item.name === 'cpuSwitch')),
-          (this.multiLine_xData = this.multiLine.cpuInterrupt.list.map((item) => {
+      this.spinning = true
+      getAction('/systemMonitor/queryHostDetails', params)
+        .then((res) => {
+          const data = res.result
+          //CPU utilizatior
+          this.cpuUtilization = data.find((item) => item.name === 'cpuUtilization')
+          this.cpuUtilization_xData = this.cpuUtilization.list.map((item) => {
             return dateFormat(new Date(item.date * 1000), 'hh:mm')
-          }))
-        this.cpuInterrupt_data = this.multiLine.cpuInterrupt.list.map((item) => {
-          return Number(item.value.toFixed(2))
-        })
-        this.cpuSwitch_data = this.multiLine.cpuSwitch.list.map((item) => {
-          return Number(item.value.toFixed(2))
-        })
-        //总CPU使用率
-        let totalCpu = []
-        data.map((item) => {
-          if (item.name.search('cpuUtilization_') != -1) {
-            totalCpu.push(item)
-          }
-        })
-        this.cpuDiff_xData = totalCpu[0].list.map((item) => {
-          return dateFormat(new Date(item.date * 1000), 'hh:mm')
-        })
-        this.cpuDiff_data = totalCpu.map((item) => {
-          return {
-            name: item.name,
-            data: item.list.map((el) => Number(el.value.toFixed(2))),
-          }
-        })
+          })
+          this.cpuUtilization_data = this.cpuUtilization.list.map((item) => {
+            return Number(item.value.toFixed(2))
+          })
+          //Percentage of free system space
+          this.cpuIdleRate = data.find((item) => item.name === 'cpuIdleRate')
+          this.cpuIdleRate_xData = this.cpuIdleRate.list.map((item) => {
+            return dateFormat(new Date(item.date * 1000), 'hh:mm')
+          })
+          this.cpuIdleRate_data = this.cpuIdleRate.list.map((item) => {
+            return Number(item.value.toFixed(2))
+          })
+          // Interrupt and episodic switching
+          ;(this.multiLine.cpuInterrupt = data.find((item) => item.name === 'cpuInterrupt')),
+            (this.multiLine.cpuSwitch = data.find((item) => item.name === 'cpuSwitch')),
+            (this.multiLine_xData = this.multiLine.cpuInterrupt.list.map((item) => {
+              return dateFormat(new Date(item.date * 1000), 'hh:mm')
+            }))
+          this.cpuInterrupt_data = this.multiLine.cpuInterrupt.list.map((item) => {
+            return Number(item.value.toFixed(2))
+          })
+          this.cpuSwitch_data = this.multiLine.cpuSwitch.list.map((item) => {
+            return Number(item.value.toFixed(2))
+          })
+          //总CPU使用率
+          let totalCpu = []
+          data.map((item) => {
+            if (item.name.search('cpuUtilization_') != -1) {
+              totalCpu.push(item)
+            }
+          })
+          this.cpuDiff_xData = totalCpu[0].list.map((item) => {
+            return dateFormat(new Date(item.date * 1000), 'hh:mm')
+          })
+          this.cpuDiff_data = totalCpu.map((item) => {
+            return {
+              name: item.name,
+              data: item.list.map((el) => Number(el.value.toFixed(2))),
+            }
+          })
 
-        this.drawChart1()
-        this.drawChart2()
-        this.drawChart3()
-        this.drawChart4()
-      })
+          this.drawChart1()
+          this.drawChart2()
+          this.drawChart3()
+          this.drawChart4()
+        })
+        .finally(() => {
+          this.spinning = false
+        })
     },
     getBeforeHours(num) {
       let currentTime = moment()
@@ -828,6 +836,14 @@ export default {
   height: calc(100% - 60px);
   margin-top: 10px;
   overflow: hidden;
+  /deep/.ant-spin-nested-loading {
+    width: 100%;
+    height: 100%;
+  }
+  /deep/.ant-spin-container {
+    width: 100%;
+    height: 100%;
+  }
   &-item {
     width: 100%;
     height: 100%;
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/details.vue b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
index 0a631c8..53ac151 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/details.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
@@ -1,364 +1,360 @@
 <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, item)"
-              >
-                <div>{{ item.sourceName }}</div>
-              </a-list-item>
-            </a-list>
+    <a-spin :spinning="spinning">
+      <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, item)"
+                >
+                  <div>{{ item.sourceName }}</div>
+                </a-list-item>
+              </a-list>
 
-            <div v-if="loading && !busy" class="demo-loading-container">
-              <a-spin />
+              <div v-if="loading && !busy" class="demo-loading-container">
+                <a-spin />
+              </div>
             </div>
-          </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 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-num state">
-                      {{ `${detailInfo.runningState ? 'NORMAL' : 'ERROR'}` }}
+                    <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">
+                        {{ `${detailInfo.runningState ? 'NORMAL' : 'ERROR'}` }}
+                      </div>
                     </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>
+                </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-num">{{ detailInfo.alarmSms }}</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 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">{{ detailInfo.alarmSms }}</div>
                     </div>
-                    <div class="basic-info-detail-col-msg-num">{{ detailInfo.alarmEmail }}</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>
+                </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-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%">
-                <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 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">{{ detailInfo.alarmEmail }}</div>
                     </div>
-                    <div class="basic-info-detail-col-msg-num">{{ detailInfo.runTime }}</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>
+                </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-num">{{ detailInfo.ramSize }}</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 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">{{ detailInfo.alarms }}</div>
                     </div>
-                    <div class="basic-info-detail-col-msg-num">{{ detailInfo.cpuCores }}</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>
+                </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">{{ detailInfo.runTime }}</div>
                     </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-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">{{ detailInfo.hostName }}</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-col :span="12" class="basic-info-detail-content-key">OS Version:</a-col>
+                </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">{{ detailInfo.ramSize }}</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">{{ detailInfo.cpuCores }}</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">{{ detailInfo.totalDiskPar }}</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">{{ detailInfo.hostName }}</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-col :span="12" class="basic-info-detail-content-key">OS Version:</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-col :span="12" class="basic-info-detail-content-key">IP Address:</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" 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="4" style="height: 26px" class="basic-info-detail-content-key">OS Name:</a-col>
-                    <a-col :span="20" style="height: 26px" class="basic-info-detail-content-val">
-                      {{ detailInfo.osName }}
-                    </a-col>
-                    <!-- <a-col :span="12" style="height: 26px">
+                        </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">{{ detailInfo.ip }}</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="4" style="height: 26px" class="basic-info-detail-content-key">OS Name:</a-col>
+                      <a-col :span="20" style="height: 26px" class="basic-info-detail-content-val">
+                        {{ detailInfo.osName }}
+                      </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 Name:</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-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">
-                      {{ 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>
-                  <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">{{ detailInfo.network }}</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">{{ 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-col :span="18" class="basic-info-detail-content-key">Time Zone:</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="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="7" style="height: 26px" class="basic-info-detail-content-key">OS Version:</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="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">
-                      {{ detailInfo.osVersion }}
-                    </a-col>
-                  </a-row>
-                  <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="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>
+                    </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">
+                        {{ 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>
+                    <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">{{ detailInfo.network }}</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">{{ 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-col :span="18" class="basic-info-detail-content-key">Time Zone:</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="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="7" style="height: 26px" class="basic-info-detail-content-key">OS Version:</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="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">
+                        {{ detailInfo.osVersion }}
+                      </a-col>
+                    </a-row>
+                    <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="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>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="alarm-info" 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" :title="item.alarmInfo">{{ item.alarmInfo }}</div>
+                <div class="alarm-info-list-date">{{ item.alarmStartDate }}</div>
+                <!-- <a slot="actions" class="alarm-info-list-actions">Detail</a> -->
+              </a-list-item>
+            </a-list>
+            <div v-if="loading_alarm_info && !busy" class="demo-loading-container">
+              <a-spin />
             </div>
           </div>
         </div>
       </div>
-      <div class="alarm-info" 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" :title="item.alarmInfo">{{ item.alarmInfo }}</div>
-              <div class="alarm-info-list-date">{{ item.alarmStartDate }}</div>
-              <!-- <a slot="actions" class="alarm-info-list-actions">Detail</a> -->
-            </a-list-item>
-          </a-list>
-          <div v-if="loading_alarm_info && !busy" class="demo-loading-container">
-            <a-spin />
+      <div class="content-center">
+        <BoxTitle title="Event Timelinen">
+          <template slot="right">
+            <ul class="legend-list">
+              <li v-for="(item, index) in types" :key="index">
+                <div :style="`background:${item.color}`" class="li-icon"></div>
+                {{ item.name }}
+              </li>
+            </ul>
+          </template>
+        </BoxTitle>
+        <div class="line-bg"></div>
+        <div class="time-line" id="timeLine"></div>
+      </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>
+                <div class="gauge-content" id="cpu"></div>
+              </a-col>
+              <a-col class="gutter-row" :span="8">
+                <BoxTitle title="MEMORY"></BoxTitle>
+                <div class="gauge-content" id="memory"></div>
+              </a-col>
+              <a-col class="gutter-row" :span="8">
+                <BoxTitle title="RESPONSE"></BoxTitle>
+                <div class="gauge-content" id="responseSuccessRate"></div>
+              </a-col>
+            </a-row>
+          </div>
+          <div class="content-bottom-left-bottom">
+            <BoxTitle title="CPU utilization">
+              <template slot="right">
+                <div class="right-title">
+                  <div class="right-title-item">
+                    average value:<i>{{ cpuData.avg }}%</i>
+                  </div>
+                  <div class="right-title-item">
+                    minimum value:<i>{{ cpuData.min }}%</i>
+                  </div>
+                  <div class="right-title-item">
+                    Maximum value:<i>{{ cpuData.max }}%</i>
+                  </div>
+                </div>
+              </template>
+            </BoxTitle>
+            <div class="area-cpu" id="areaCpu"></div>
           </div>
         </div>
-      </div>
-    </div>
-    <!-- <div class="Timeline">
-      <p>事件时间线</p>
-      <div>
-        <div id="timeL" style="width: 100%; height: 140px"></div>
-      </div>
-    </div> -->
-    <div class="content-center">
-      <BoxTitle title="Event Timelinen">
-        <template slot="right">
-          <ul class="legend-list">
-            <li v-for="(item, index) in types" :key="index">
-              <div :style="`background:${item.color}`" class="li-icon"></div>
-              {{ item.name }}
-            </li>
-          </ul>
-        </template>
-      </BoxTitle>
-      <div class="line-bg"></div>
-      <div class="time-line" id="timeLine"></div>
-    </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>
-              <div class="gauge-content" id="cpu"></div>
-            </a-col>
-            <a-col class="gutter-row" :span="8">
-              <BoxTitle title="MEMORY"></BoxTitle>
-              <div class="gauge-content" id="memory"></div>
-            </a-col>
-            <a-col class="gutter-row" :span="8">
-              <BoxTitle title="RESPONSE"></BoxTitle>
-              <div class="gauge-content" id="responseSuccessRate"></div>
-            </a-col>
-          </a-row>
-        </div>
-        <div class="content-bottom-left-bottom">
-          <BoxTitle title="CPU utilization">
-            <template slot="right">
-              <div class="right-title">
-                <div class="right-title-item">
-                  average value:<i>{{ cpuData.avg }}%</i>
-                </div>
-                <div class="right-title-item">
-                  minimum value:<i>{{ cpuData.min }}%</i>
-                </div>
-                <div class="right-title-item">
-                  Maximum value:<i>{{ cpuData.max }}%</i>
-                </div>
-              </div>
-            </template>
-          </BoxTitle>
-          <div class="area-cpu" id="areaCpu"></div>
+        <div style="width: 542px">
+          <BoxTitle title="DISK"></BoxTitle>
+          <div class="bar-disk" id="disk"></div>
         </div>
       </div>
-      <div style="width: 542px">
-        <BoxTitle title="DISK"></BoxTitle>
-        <div class="bar-disk" id="disk"></div>
-      </div>
-    </div>
+    </a-spin>
   </div>
 </template>
 
@@ -417,6 +413,7 @@ export default {
   },
   data() {
     return {
+      spinning: false,
       types,
       dataSource: [],
       loading: false,
@@ -496,120 +493,12 @@ export default {
     // })
   },
   methods: {
-    // Echarts (时间线)
-    // EchartsTimeline() {
-    //   const params = {
-    //     itemId: '37550',
-    //     itemType: 0,
-    //     start: '2023-09-21 00:00:00',
-    //     end: '2023-09-21 18:54:00',
-    //   }
-    //   getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
-    //     let data = res.result
-    //     const percentage = 100 / data.length
-    //     let indexArr = [[0, 0]]
-    //     for (let i = 1; i < data.length; i++) {
-    //       const num = i + 1
-    //       if (i === data.length - 1) {
-    //         indexArr[0][1] = data.length
-    //       }
-    //       if (data[i - 1].value != data[i].value) {
-    //         indexArr[0][1] = i
-    //         indexArr.unshift([i, num])
-    //       }
-    //     }
-    //     let objArr = [],
-    //       echartData = []
-    //     indexArr.map((item) => {
-    //       objArr.push(data.slice(item[0], item[1]))
-    //     })
-    //     const statusConversion = (val) => {
-    //       if (val == 1) {
-    //         return '正常'
-    //       } else if (val == 2) {
-    //         return '警告'
-    //       } else {
-    //         return '离线'
-    //       }
-    //     }
-    //     objArr.map((item, index) => {
-    //       let obj = null
-    //       if (index === 0) {
-    //         const arr = objArr[index + 1]
-    //         let timeInterval
-    //         if (arr) {
-    //           timeInterval = [item[0].date, arr[arr.length - 1].date]
-    //         } else {
-    //           timeInterval = [item[0].date, item[item.length - 1].date]
-    //         }
-    //         obj = {
-    //           type: 'Cpu',
-    //           value: statusConversion(item[0].value),
-    //           valueInterval: [0, item.length * percentage],
-    //           timeInterval: timeInterval, // 时间区间
-    //         }
-    //       } else if (index === objArr.length - 1) {
-    //         const arr = echartData[echartData.length - 1]
-    //         obj = {
-    //           type: 'Cpu',
-    //           value: statusConversion(item[0].value),
-    //           valueInterval: [arr.valueInterval[1], 100],
-    //           timeInterval: [arr.timeInterval[1], item[0].date], // 时间区间
-    //         }
-    //       } else {
-    //         const arr = echartData[echartData.length - 1],
-    //           arr1 = objArr[index + 1],
-    //           num = arr.valueInterval[1],
-    //           length = item.length * percentage
-    //         obj = {
-    //           type: 'Cpu',
-    //           value: statusConversion(item[0].value),
-    //           valueInterval: [num, length + num],
-    //           timeInterval: [arr.timeInterval[1], arr1[arr1.length - 1].date], // 时间区间
-    //         }
-    //       }
-    //       echartData.push(obj)
-    //     })
-    //     if (this.barPlot) {
-    //       this.barPlot.changeData(echartData)
-    //       return
-    //     }
-    //     const timeDateHours = (val) => {
-    //       return moment(val).format('HH:mm')
-    //     }
-    //     this.barPlot = new Bar('timeL', {
-    //       data: echartData.reverse(),
-    //       xField: 'valueInterval',
-    //       yField: 'type',
-    //       isRange: true,
-    //       seriesField: 'value',
-    //       padding: 20,
-    //       yAxis: {
-    //         label: null,
-    //       },
-    //       xAxis: {
-    //         label: {
-    //           formatter: (params) => {
-    //             const percentage = params / 100,
-    //               index = parseInt((data.length - 1) * percentage)
-
-    //             return timeDateHours(data[index].date)
-    //           },
-    //         },
-    //       },
-    //       legend: {
-    //         position: "top-left'",
-    //       },
-    //       tooltip: false,
-    //     })
-    //     this.barPlot.render()
-    //   })
-    // },
     moment,
     // Basic lnformation
     getBasiclnfo(sourceId) {
       let params = { hostId: sourceId }
       getAction('/sysServer/detailsBasicInfo', params).then((res) => {
+        this.spinning = false
         if (res.success) {
           this.detailInfo = res.result
           this.drawGuageCpu()
@@ -630,6 +519,7 @@ export default {
         end: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
       }
       getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
+        this.spinning = false
         const arr = res.result.map((x) => x.value)
         this.cpuData.max = Math.max(...arr).toFixed(2)
         this.cpuData.min = Math.min(...arr).toFixed(2)
@@ -654,6 +544,7 @@ export default {
         end: `${dateFormat(new Date(), 'yyyy-MM-dd')} 23:59:59`,
       }
       getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
+        this.spinning = false
         let data = res.result
         startTime = data[0].clock * 1000
         let indexArr = [[0, 0]]
@@ -727,6 +618,7 @@ export default {
       }
     },
     handleBasicItem(i, item) {
+      this.spinning = true
       this.currIndex = i
       this.currItemId = item.cpuUsedItemId
       this.currSourceId = item.sourceId
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/index.vue b/src/views/abnormalAlarm/serverMonitor/instances/index.vue
index 95c87be..829086b 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/index.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="height: 100%;">
-    <a-card :bordered="false" style="height:100%;margin-left: 20px;">
+  <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>
@@ -14,22 +14,22 @@
         <a-tab-pane key="cpu" tab="CPU">
           <Cpu></Cpu>
         </a-tab-pane>
-        <a-tab-pane key="memory" tab="MEMORY">
+        <!-- <a-tab-pane key="memory" tab="MEMORY">
           MEMORY
         </a-tab-pane>
         <a-tab-pane key="disk" tab="DISK">
           DISK
-        </a-tab-pane>
+        </a-tab-pane> -->
       </a-tabs>
     </a-card>
   </div>
 </template>
 
 <script>
-import Details from './details.vue';
-import ServiceProcess from './serviceProcess.vue';
-import Monitor from './monitor.vue';
-import Cpu from './cpu.vue';
+import Details from './details.vue'
+import ServiceProcess from './serviceProcess.vue'
+import Monitor from './monitor.vue'
+import Cpu from './cpu.vue'
 export default {
   components: {
     Details,
@@ -39,13 +39,12 @@ export default {
   },
   methods: {
     handleTabChange(key) {
-      console.log(key);
+      console.log(key)
     },
   },
 }
 </script>
 
 <style lang="less" scoped>
-  @import "~@/assets/less/TabMenu.less";
-
+@import '~@/assets/less/TabMenu.less';
 </style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue b/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue
index f78a800..c384d95 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue
@@ -49,22 +49,24 @@
       </div>
     </div>
     <div class="monitor-content">
-      <a-row :gutter="[20, 15]" style="height: 100%">
-        <a-col v-for="(item, index) in chartDatas" :key="item.title" :span="8" style="height: 34%">
-          <div class="monitor-content-item">
-            <LineChart
-              :title="item.title"
-              :layout="'line' + index"
-              :xData="item.xData"
-              :dataSource="item.data"
-              :newUnits="item.newUnits"
-              :units="item.units"
-              @zoom="handelZoom"
-            >
-            </LineChart>
-          </div>
-        </a-col>
-      </a-row>
+      <a-spin :spinning="spinning">
+        <a-row :gutter="[20, 15]" style="height: 100%">
+          <a-col v-for="(item, index) in chartDatas" :key="item.title" :span="8" style="height: 34%">
+            <div class="monitor-content-item">
+              <LineChart
+                :title="item.title"
+                :layout="'line' + index"
+                :xData="item.xData"
+                :dataSource="item.data"
+                :newUnits="item.newUnits"
+                :units="item.units"
+                @zoom="handelZoom"
+              >
+              </LineChart>
+            </div>
+          </a-col>
+        </a-row>
+      </a-spin>
     </div>
     <a-modal :title="modalTitle" :width="1200" v-model="visible" :maskClosable="false" @cancel="onCancel">
       <div class="modal-content" id="common"></div>
@@ -85,7 +87,7 @@ import moment from 'moment'
 import * as echarts from 'echarts'
 import dateFormat from '@/components/jeecg/JEasyCron/format-date'
 import BoxTitle from '../../components/boxTitle.vue'
-import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
+import { getAction, postAction } from '@/api/manage'
 import LineChart from './lineChart.vue'
 import CreateRules from './createRules.vue'
 export default {
@@ -94,19 +96,19 @@ export default {
     LineChart,
     CreateRules,
   },
-  computed:{
-    unitConversion(){
-      return function(number,units){
-        if( units === 'Kb') {
-         number =  number *1024
+  computed: {
+    unitConversion() {
+      return function (number, units) {
+        if (units === 'Kb') {
+          number = number * 1024
         }
-        if (number < 1024 ) return "B"
+        if (number < 1024) return 'B'
         number = number / 1024
-        if (number < 1024) return "KB"
+        if (number < 1024) return 'KB'
         number = number / 1024
-        if (number < 1024) return "MB"
+        if (number < 1024) return 'MB'
         number = number / 1024
-        console.log('TB',number)
+        console.log('TB', number)
         if (number < 1024) return 'GB'
         number = number / 1024
         if (number < 1024) return 'TB'
@@ -116,23 +118,24 @@ export default {
         if (number < 1024) return 'EB'
       }
     },
-    dataConversion(){
-      return function(number,units){
+    dataConversion() {
+      return function (number, units) {
         const obj = {
           KB: 1024,
-          MB: Math.pow(1024,2),
-          GB: Math.pow(1024,3),
-          TB: Math.pow(1024,4),
-          PB: Math.pow(1024,5),
-          EB: Math.pow(1024,6),
+          MB: Math.pow(1024, 2),
+          GB: Math.pow(1024, 3),
+          TB: Math.pow(1024, 4),
+          PB: Math.pow(1024, 5),
+          EB: Math.pow(1024, 6),
         }
         // console.log(obj[units],number / obj[units])
         return (number / obj[units]).toFixed(2)
       }
-    }
+    },
   },
   data() {
     return {
+      spinning: false,
       currId: '',
       visible_rule: false,
       currLabel: '',
@@ -176,10 +179,11 @@ export default {
         sourceType: 'Server',
         sourceId: this.currId,
       }
+      this.spinning = true
       getAction('/alarmRule/getItems', params).then((res) => {
         if (res.success) {
           this.MonitorItem = res.result
-          this.chartDatas = this.MonitorItem.map(f=>({
+          this.chartDatas = this.MonitorItem.map((f) => ({
             title: f.name,
             value: f.itemId,
             type: f.valueType,
@@ -207,7 +211,8 @@ export default {
         }
         try {
           const res = await this.getMonitorItemData(params)
-          console.log("getMonitorItemData>",res);
+          this.spinning = false
+          console.log('getMonitorItemData>', res)
           item.xData = res.xData
           item.data = [
             {
@@ -219,6 +224,7 @@ export default {
           item.newUnits = res.newUnits
         } catch (error) {
           console.error(error)
+          this.spinning = false
         }
       })
     },
@@ -234,21 +240,21 @@ export default {
           return dateFormat(new Date(item.date * 1000), 'hh:mm')
         })
 
-        let item = res.result;
-        if(item.units === 'B' || item.units === 'Kb'){
-         item.newUnits = this.unitConversion(item.min,item.units)
-         newUnits = item.newUnits
-          item.list.map(val =>{
+        let item = res.result
+        if (item.units === 'B' || item.units === 'Kb') {
+          item.newUnits = this.unitConversion(item.min, item.units)
+          newUnits = item.newUnits
+          item.list.map((val) => {
             let number = val.value
-            if(item.units ==="Kb"){
-              number = val.value *1024
+            if (item.units === 'Kb') {
+              number = val.value * 1024
             }
-              val.value = Number(this.dataConversion(number,item.newUnits))
-              data.push({
-                value: Number(val.value),
-                Date: moment(val.date * 1000).format('hh:mm')
-              })
+            val.value = Number(this.dataConversion(number, item.newUnits))
+            data.push({
+              value: Number(val.value),
+              Date: moment(val.date * 1000).format('hh:mm'),
             })
+          })
           console.log(item)
         } else {
           data = res.result.list.map((item_1) => {
@@ -260,7 +266,7 @@ export default {
           xData,
           data,
           units,
-          newUnits
+          newUnits,
         }
       }
     },
@@ -402,6 +408,14 @@ export default {
   height: calc(100% - 60px);
   margin-top: 10px;
   overflow: hidden;
+  /deep/.ant-spin-nested-loading {
+    width: 100%;
+    height: 100%;
+  }
+  /deep/.ant-spin-container {
+    width: 100%;
+    height: 100%;
+  }
   &-item {
     width: 100%;
     height: 100%;
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue b/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
index dd4d9bf..4f7b47a 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
@@ -57,24 +57,25 @@
       </div>
     </div>
     <div class="service-content">
-      <div class="service-content-ranked">
-        <BoxTitle title="Top-ranked processes in the last hour">
-          <template slot="right">
-            <ul class="legend-list">
-              <li v-for="(item, index) in ranked.legend" :key="index">
-                <div :style="`background:${ranked.color[index]}`" class="li-icon"></div>
-                {{ item }}
-              </li>
-            </ul>
-          </template>
-        </BoxTitle>
-        <div class="service-content-ranked-box" id="ranked"></div>
-      </div>
-      <div class="service-content-center">
-        <a-row :gutter="20">
-          <a-col :span="12">
-            <BoxTitle title="Process CPU usage(%)">
-              <!-- <template slot="right">
+      <a-spin :spinning="spinning">
+        <div class="service-content-ranked">
+          <BoxTitle title="Top-ranked processes in the last hour">
+            <template slot="right">
+              <ul class="legend-list">
+                <li v-for="(item, index) in ranked.legend" :key="index">
+                  <div :style="`background:${ranked.color[index]}`" class="li-icon"></div>
+                  {{ item }}
+                </li>
+              </ul>
+            </template>
+          </BoxTitle>
+          <div class="service-content-ranked-box" id="ranked"></div>
+        </div>
+        <div class="service-content-center">
+          <a-row :gutter="20">
+            <a-col :span="12">
+              <BoxTitle title="Process CPU usage(%)">
+                <!-- <template slot="right">
                 <ul class="legend-list">
                   <li v-for="(item, index) in processCpu.legend" :key="index">
                     <div :style="`background:${processCpu.color[index]}`" class="li-icon"></div>
@@ -82,12 +83,12 @@
                   </li>
                 </ul>
               </template> -->
-            </BoxTitle>
-            <div class="service-content-center-item" id="processCpu"></div>
-          </a-col>
-          <a-col :span="12">
-            <BoxTitle title="Process memory usage(%)">
-              <!-- <template slot="right">
+              </BoxTitle>
+              <div class="service-content-center-item" id="processCpu"></div>
+            </a-col>
+            <a-col :span="12">
+              <BoxTitle title="Process memory usage(%)">
+                <!-- <template slot="right">
                 <ul class="legend-list">
                   <li v-for="(item, index) in processMenbry.legend" :key="index">
                     <div :style="`background:${processMenbry.color[index]}`" class="li-icon"></div>
@@ -95,25 +96,25 @@
                   </li>
                 </ul>
               </template> -->
-            </BoxTitle>
-            <div class="service-content-center-item" id="menbry"></div>
-          </a-col>
-        </a-row>
-      </div>
-      <div class="service-content-table">
-        <BoxTitle title="Service"></BoxTitle>
-        <div style="padding-top: 10px">
-          <TableList
-            size="middle"
-            rowKey="id"
-            :columns="columns"
-            :list="dataSource"
-            :loading="loading"
-            :pagination="false"
-            :canSelect="false"
-          >
-          </TableList>
-          <!-- <a-pagination
+              </BoxTitle>
+              <div class="service-content-center-item" id="menbry"></div>
+            </a-col>
+          </a-row>
+        </div>
+        <div class="service-content-table">
+          <BoxTitle title="Service"></BoxTitle>
+          <div style="padding-top: 10px">
+            <TableList
+              size="middle"
+              rowKey="id"
+              :columns="columns"
+              :list="dataSource"
+              :loading="loading"
+              :pagination="false"
+              :canSelect="false"
+            >
+            </TableList>
+            <!-- <a-pagination
             size="small"
             v-model="ipagination.current"
             :pageSize="ipagination.pageSize"
@@ -129,8 +130,9 @@
             @change="handlePageChange"
             @showSizeChange="handleSizeChange"
           /> -->
+          </div>
         </div>
-      </div>
+      </a-spin>
     </div>
   </div>
 </template>
@@ -140,7 +142,7 @@ import moment from 'moment'
 import BoxTitle from '../../components/boxTitle.vue'
 import TableList from '../../components/tableList.vue'
 import dateFormat from '@/components/jeecg/JEasyCron/format-date'
-import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
+import { getAction } from '@/api/manage'
 import * as echarts from 'echarts'
 // const columns = [
 //   {
@@ -193,27 +195,33 @@ import * as echarts from 'echarts'
 //   },
 // ]
 
-const columns = [{
-  title: 'Name',
-  dataIndex: 'name',
-  width: '20%'
-}, {
-  title: 'Min(%)',
-  dataIndex: 'min',
-  width: '20%'
-}, {
-  title: 'Max(%)',
-  dataIndex: 'max',
-  width: '20%'
-}, {
-  title: 'Avg(%)',
-  dataIndex: 'avg',
-  width: '20%'
-}, {
-  title: 'Now(%)',
-  dataIndex: 'now',
-  width: '20%'
-}]
+const columns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    width: '20%',
+  },
+  {
+    title: 'Min(%)',
+    dataIndex: 'min',
+    width: '20%',
+  },
+  {
+    title: 'Max(%)',
+    dataIndex: 'max',
+    width: '20%',
+  },
+  {
+    title: 'Avg(%)',
+    dataIndex: 'avg',
+    width: '20%',
+  },
+  {
+    title: 'Now(%)',
+    dataIndex: 'now',
+    width: '20%',
+  },
+]
 export default {
   components: {
     BoxTitle,
@@ -221,6 +229,7 @@ export default {
   },
   data() {
     return {
+      spinning: false,
       type: 'cpu',
       queryParams: {
         server: undefined,
@@ -312,71 +321,75 @@ export default {
         start: this.queryParams.startDate,
         end: this.queryParams.endDate,
       }
-      const hide = this.$message.loading('loading...', 0)
-      getAction('/systemMonitor/queryHostDetails', params).then((res) => {
-        this.list = res.result
-        this.listData = {
-          list: this.num === 0 ? this.list.cpu : this.list.memory,
-          type: this.num === 0 ? 'CPU' : '内存',
-        }
-
-        this.setTableData()
-
-        let cpu_xData = res.result.cpu[0].list.map((item) => {
-          return dateFormat(new Date(item.date * 1000), 'hh:mm')
-        })
-        let cpu_Data = res.result.cpu.map((item) => {
-          return {
-            name: item.name,
-            data: item.list.map((el) => Number((el.value * 100).toFixed(2))),
+      // const hide = this.$message.loading('loading...', 0)
+      this.spinning = true
+      getAction('/systemMonitor/queryHostDetails', params)
+        .then((res) => {
+          this.list = res.result
+          this.listData = {
+            list: this.num === 0 ? this.list.cpu : this.list.memory,
+            type: this.num === 0 ? 'CPU' : '内存',
           }
-        })
-        let cpu_legend = res.result.cpu.map((item) => {
-          return item.name
-        })
-        let memory_xData = res.result.memory[0].list.map((item) => {
-          return dateFormat(new Date(item.date * 1000), 'hh:mm')
-        })
-        let memory_Data = res.result.memory.map((item) => {
-          return {
-            name: item.name,
-            data: item.list.map((el) => Number((el.value * 100).toFixed(2))),
-          }
-        })
-        let memory_legend = res.result.memory.map((item) => {
-          return item.name
-        })
 
-        this.rankData = {
-          type: this.type === 'cpu' ? 'CPU' : 'Memory',
-          cpu_xData,
-          cpu_Data,
-          memory_xData,
-          memory_Data,
-        }
-        this.ranked.legend = this.type === 'cpu' ? cpu_legend : memory_legend
-        this.processCpu.xData = cpu_xData
-        // this.processCpu.data = res.result.cpu.map((item) => {
-        //   return {
-        //     name: item.name,
-        //     data: item.list.map((el) => el.value),
-        //   }
-        // })
-        this.processCpu.data = cpu_Data
-        this.processMenbry.xData = memory_xData
-        // this.processMenbry.data = res.result.memory.map((item) => {
-        //   return {
-        //     name: item.name,
-        //     data: item.list.map((el) => el.value),
-        //   }
-        // })
-        this.processMenbry.data = memory_Data
-        this.drawRanked()
-        this.drawProcesCpu()
-        this.drawProcesMenbry()
-      }).finally(() => {
-        hide()
-      })
+          this.setTableData()
+
+          let cpu_xData = res.result.cpu[0].list.map((item) => {
+            return dateFormat(new Date(item.date * 1000), 'hh:mm')
+          })
+          let cpu_Data = res.result.cpu.map((item) => {
+            return {
+              name: item.name,
+              data: item.list.map((el) => Number((el.value * 100).toFixed(2))),
+            }
+          })
+          let cpu_legend = res.result.cpu.map((item) => {
+            return item.name
+          })
+          let memory_xData = res.result.memory[0].list.map((item) => {
+            return dateFormat(new Date(item.date * 1000), 'hh:mm')
+          })
+          let memory_Data = res.result.memory.map((item) => {
+            return {
+              name: item.name,
+              data: item.list.map((el) => Number((el.value * 100).toFixed(2))),
+            }
+          })
+          let memory_legend = res.result.memory.map((item) => {
+            return item.name
+          })
+
+          this.rankData = {
+            type: this.type === 'cpu' ? 'CPU' : 'Memory',
+            cpu_xData,
+            cpu_Data,
+            memory_xData,
+            memory_Data,
+          }
+          this.ranked.legend = this.type === 'cpu' ? cpu_legend : memory_legend
+          this.processCpu.xData = cpu_xData
+          // this.processCpu.data = res.result.cpu.map((item) => {
+          //   return {
+          //     name: item.name,
+          //     data: item.list.map((el) => el.value),
+          //   }
+          // })
+          this.processCpu.data = cpu_Data
+          this.processMenbry.xData = memory_xData
+          // this.processMenbry.data = res.result.memory.map((item) => {
+          //   return {
+          //     name: item.name,
+          //     data: item.list.map((el) => el.value),
+          //   }
+          // })
+          this.processMenbry.data = memory_Data
+          this.drawRanked()
+          this.drawProcesCpu()
+          this.drawProcesMenbry()
+        })
+        .finally(() => {
+          // hide()
+          this.spinning = false
+        })
     },
     getBeforeHours(num) {
       let currentTime = moment()
diff --git a/src/views/spectrumAnalysis/components/Modals/ConfigUserLibraryModal.vue b/src/views/spectrumAnalysis/components/Modals/ConfigUserLibraryModal.vue
index 62c74fe..2a7ec0b 100644
--- a/src/views/spectrumAnalysis/components/Modals/ConfigUserLibraryModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/ConfigUserLibraryModal.vue
@@ -7,24 +7,28 @@
           :dataSource="list"
           :list-style="{
             width: '200px',
-            height: '400px'
+            height: '400px',
           }"
           :target-keys="targetKeys"
-          :render="item => item.title"
+          :render="(item) => item.title"
           :showSearch="true"
           :showSelectAll="false"
           @change="handleChange"
         ></a-transfer>
 
-        <div class="config-user-library-btns">
-          <div>
+        <!--<div class="config-user-library-btns">
+           <div>
             <a-button type="primary" @click="handleDefault">Default</a-button>
             <a-button type="primary">Load</a-button>
-          </div>
+          </div> 
           <div>
             <a-button type="primary" :loading="isSaving" @click="handleSave">Save</a-button>
             <a-button type="primary">Apply</a-button>
           </div>
+          <a-button type="primary" :loading="isSaving" @click="handleSave">Save</a-button>
+        </div>-->
+        <div style="margin-top: 20px; display: flex; justify-content: end">
+          <a-button type="primary" :loading="isSaving" @click="handleSave">Save</a-button>
         </div>
       </div>
     </a-spin>
@@ -43,7 +47,7 @@ export default {
     return {
       list: [],
       targetKeys: [],
-      isSaving: false
+      isSaving: false,
     }
   },
   methods: {
@@ -58,17 +62,17 @@ export default {
         const { sampleId, inputFileName: fileName } = this.sampleData
         const { success, result, message } = await getAction('/gamma/configUserLibrary', {
           sampleId,
-          fileName
+          fileName,
         })
         if (success) {
           this.isLoading = false
           const { AllNuclides, UserNuclides } = result
-          this.list = AllNuclides.map(item => ({
+          this.list = AllNuclides.map((item) => ({
             key: item,
-            title: item
+            title: item,
           }))
 
-          this.targetKeys = UserNuclides.map(item => item)
+          this.targetKeys = UserNuclides.map((item) => item)
 
           this.initialTargetKeys = cloneDeep(this.targetKeys)
         } else {
@@ -95,7 +99,7 @@ export default {
         const { inputFileName: fileName } = this.sampleData
         const { success, result, message } = await postAction('/gamma/saveUserLibrary', {
           fileName,
-          userLibraryName: this.targetKeys
+          userLibraryName: this.targetKeys,
         })
         if (success) {
           this.$message.success('Save Success')
@@ -107,8 +111,8 @@ export default {
       } finally {
         this.isSaving = false
       }
-    }
-  }
+    },
+  },
 }
 </script>
 
diff --git a/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue b/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
index e8f25a4..b356b6b 100644
--- a/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
@@ -162,6 +162,11 @@ export default {
   },
   methods: {
     loadData(arg) {
+      debugger
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
       const params = this.getQueryParams() //查询条件
       const { startDate, endDate, menuTypes } = params
       if (!menuTypes) {
@@ -179,11 +184,6 @@ export default {
         return
       }
 
-      //加载数据 若传入参数1则加载第一页的内容
-      if (arg === 1) {
-        this.ipagination.current = 1
-      }
-
       params.AllUsers = this.allUsersValue
       params.CollectStopB = this.collectStopValue
       params.AcqStartB = this.acqStartValue
diff --git a/src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue b/src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue
index 1b15adf..7c2ede9 100644
--- a/src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue
@@ -202,7 +202,7 @@
 </template>
 
 <script>
-import { getAction, postAction } from '../../../../api/manage'
+import { getAction, postActionWithTimeOut } from '../../../../api/manage'
 import { FilePicker } from '@/utils/FilePicker'
 import { readFile, zipFile } from '@/utils/file'
 import { isSample, PHDParser, PHD_DATA_TYPE } from '@/utils/phdHelper'
@@ -657,7 +657,7 @@ export default {
     async uploadZipFile(file) {
       const formData = new FormData()
       formData.append('file', file)
-      const res = await postAction('/spectrumFile/upload', formData)
+      const res = await postActionWithTimeOut('/spectrumFile/upload', formData, 0)
       return res
     },
 
diff --git a/src/views/stationOperation/components/MapMarker.vue b/src/views/stationOperation/components/MapMarker.vue
index 609d52b..b19bc74 100644
--- a/src/views/stationOperation/components/MapMarker.vue
+++ b/src/views/stationOperation/components/MapMarker.vue
@@ -217,7 +217,11 @@ export default {
     // 获取站点详情
     async _getStationInfo(stationInfo) {
       try {
+<<<<<<< HEAD
         const { success, result, message } = await getAction('/stationOperation/findInfo', {
+=======
+        const { success, result, message } = await getAction('/armd-station-operation/stationOperation/findInfo', {
+>>>>>>> master-dev
           stationId: stationInfo.stationId,
           type: stationInfo.stationType,
         })
diff --git a/src/views/stationOperation/components/MapPane.vue b/src/views/stationOperation/components/MapPane.vue
index 55a2b30..584b094 100644
--- a/src/views/stationOperation/components/MapPane.vue
+++ b/src/views/stationOperation/components/MapPane.vue
@@ -695,13 +695,10 @@ export default {
         try {
           const stationIds = this.dataStatusCheckedKeys.filter((key) => -1 == key.toString().indexOf('root_'))
           this.isSavingDataRecieveSettings = true
-          const { success, message } = await postAction(
-            '/sysUserFocusStation/saveUserFocusByUserId',
-            {
-              stationIds,
-              ...this.dataRecieveStatusModel,
-            }
-          )
+          const { success, message } = await postAction('/sysUserFocusStation/saveUserFocusByUserId', {
+            stationIds,
+            ...this.dataRecieveStatusModel,
+          })
           if (success) {
             this.$message.success('Save Success')
             await this.getDataRecieveSettings()
@@ -738,12 +735,9 @@ export default {
     // 获取数据接收状态配置
     async getDataRecieveSettings() {
       try {
-        const { success, result, message } = await getAction(
-          '/sysUserFocusStation/findUserFocusByUserId',
-          {
-            userId: this.$store.getters.userInfo.id,
-          }
-        )
+        const { success, result, message } = await getAction('/sysUserFocusStation/findUserFocusByUserId', {
+          userId: this.$store.getters.userInfo.id,
+        })
         if (success) {
           this.initialDataRecieveSettings = result
         } else {
@@ -774,13 +768,10 @@ export default {
       this.spinLoading = true
       try {
         this.isGettingStatusList = true
-        const { success, result, message } = await getAction(
-          '/stationOperation/getDataReceivingStatus',
-          {
-            userId: this.$store.getters.userInfo.id,
-            oneStationId: (this.stationInfo && this.stationInfo.stationId) || '',
-          }
-        )
+        const { success, result, message } = await getAction('/stationOperation/getDataReceivingStatus', {
+          userId: this.$store.getters.userInfo.id,
+          oneStationId: (this.stationInfo && this.stationInfo.stationId) || '',
+        })
         this.maskVisi = false
         this.spinLoading = false
         if (success) {
diff --git a/src/views/stationOperation/components/RealTimeDataChart.vue b/src/views/stationOperation/components/RealTimeDataChart.vue
index a1afd86..aa3730e 100644
--- a/src/views/stationOperation/components/RealTimeDataChart.vue
+++ b/src/views/stationOperation/components/RealTimeDataChart.vue
@@ -71,7 +71,11 @@ const legendList = [
 const initialOption = {
   tooltip: {
     formatter: (params) => {
-      return `${params.marker}${params.name}: ${(params.value[3] / 1000 / 60).toFixed()}min`
+      return `
+        <div>${params.marker}${params.name}</div>
+        <div>START：${dayjs(new Date(params.value[1])).format('YYYY-MM-DD HH:mm:ss')}</div>
+        <div>END：${dayjs(new Date(params.value[2])).format('YYYY-MM-DD HH:mm:ss')}</div>
+      `
     },
   },
   grid: [],
diff --git a/src/views/stationOperation/index.vue b/src/views/stationOperation/index.vue
index 1767edb..b50e06b 100644
--- a/src/views/stationOperation/index.vue
+++ b/src/views/stationOperation/index.vue
@@ -253,7 +253,11 @@ export default {
     async getStationList() {
       try {
         this.isGettingDataList = true
+<<<<<<< HEAD
         const res = await getAction('/stationOperation/findList')
+=======
+        const res = await getAction('/armd-station-operation/stationOperation/findList')
+>>>>>>> master-dev
         res.forEach((item) => {
           const { stationId, stationName, stationType } = item
           item._stationId = `${stationId}${stationName}${stationType}`
@@ -364,7 +368,11 @@ export default {
     async getFollowedStationList() {
       try {
         this.isGettingFollowedDataList = true
+<<<<<<< HEAD
         const res = await getAction('/sysUserFocusStation/findList')
+=======
+        const res = await getAction('/armd-station-operation/sysUserFocusStation/findList')
+>>>>>>> master-dev
         this.followedDataList = res
 
         const scrollContainer2Ref = this.$refs.scrollContainer2Ref
@@ -383,7 +391,11 @@ export default {
     // 获取站点类型
     async getStationTypeList() {
       try {
+<<<<<<< HEAD
         const res = await getAction('/stationOperation/findStationType')
+=======
+        const res = await getAction('/armd-station-operation/stationOperation/findStationType')
+>>>>>>> master-dev
         this.stationTypeList = res.filter((item) => item).map((item) => ({ label: item, value: item }))
       } catch (error) {
         console.error(error)
diff --git a/src/views/system/Scheduling.vue b/src/views/system/Scheduling.vue
index e571a17..d233dec 100644
--- a/src/views/system/Scheduling.vue
+++ b/src/views/system/Scheduling.vue
@@ -1,114 +1,116 @@
 <template>
   <div class="scheduling">
-    <!-- 左侧日程列表 -->
-    <a-card class="scheduling-list">
-      <!-- 标题 -->
-      <template slot="title">
-        <div class="card-title">Scheduling</div>
-        <div class="line"></div>
-      </template>
-      <!-- 标题结束 -->
-      <!-- 内容 -->
-      <div class="scheduling-list-content">
-        <div class="scheduling-list-item" v-for="item of schedulingInfo" :key="item.id">
-          <h4 class="title">
-            <span>
-              {{ item.username }}
-            </span>
-            <a-popconfirm title="Do You Want To Delete This Item?" placement="bottom" @confirm="onDel(item)">
-              <a class="del"></a>
-            </a-popconfirm>
-          </h4>
-          <div class="scheduling-list-item-container" @dragover.prevent @drop="onDrop(item)">
-            <!-- 左侧边框 -->
-            <div class="left-border">
-              <div class="left-top-border">
-                <div class="left-top-corner"></div>
+    <a-spin :spinning="spinningMain">
+      <!-- 左侧日程列表 -->
+      <a-card class="scheduling-list">
+        <!-- 标题 -->
+        <template slot="title">
+          <div class="card-title">Scheduling</div>
+          <div class="line"></div>
+        </template>
+        <!-- 标题结束 -->
+        <!-- 内容 -->
+        <div class="scheduling-list-content">
+          <div class="scheduling-list-item" v-for="item of schedulingInfo" :key="item.id">
+            <h4 class="title">
+              <span>
+                {{ item.username }}
+              </span>
+              <a-popconfirm title="Do You Want To Delete This Item?" placement="bottom" @confirm="onDel(item)">
+                <a class="del"></a>
+              </a-popconfirm>
+            </h4>
+            <div class="scheduling-list-item-container" @dragover.prevent @drop="onDrop(item)">
+              <!-- 左侧边框 -->
+              <div class="left-border">
+                <div class="left-top-border">
+                  <div class="left-top-corner"></div>
+                </div>
+                <div class="left-bottom-border"></div>
               </div>
-              <div class="left-bottom-border"></div>
+              <!-- 左侧边框结束 -->
+              <div class="scheduling-list-item-content">
+                <template v-for="(station, index) in item.stationList">
+                  <span
+                    :key="station.stationId"
+                    class="draggable"
+                    draggable
+                    @dragstart="onDragStart(station, item.userId)"
+                  >
+                    {{ station.stationName + (index == item.stationList.length - 1 ? '' : '、') }}
+                  </span>
+                </template>
+              </div>
+              <!-- 右侧边框 -->
+              <div class="right-border">
+                <div class="right-top-border"></div>
+                <div class="right-bottom-border"></div>
+              </div>
+              <!-- 右侧边框结束 -->
             </div>
-            <!-- 左侧边框结束 -->
-            <div class="scheduling-list-item-content">
-              <template v-for="(station, index) in item.stationList">
-                <span
-                  :key="station.stationId"
-                  class="draggable"
-                  draggable
-                  @dragstart="onDragStart(station, item.userId)"
-                >
-                  {{ station.stationName + (index == item.stationList.length - 1 ? '' : '、') }}
-                </span>
-              </template>
-            </div>
-            <!-- 右侧边框 -->
-            <div class="right-border">
-              <div class="right-top-border"></div>
-              <div class="right-bottom-border"></div>
-            </div>
-            <!-- 右侧边框结束 -->
           </div>
+          <custom-empty v-if="!schedulingInfo || !schedulingInfo.length" style="margin-top: 40px"></custom-empty>
         </div>
-        <custom-empty v-if="!schedulingInfo || !schedulingInfo.length" style="margin-top: 40px"></custom-empty>
-      </div>
-      <!-- 内容结束 -->
-    </a-card>
-    <div class="scheduling-calendar">
-      <!-- 日历 -->
-      <a-calendar v-model="currentDate" @select="onSelectDate">
-        <template slot="headerRender">
-          <!-- 搜索栏 -->
-          <div class="search-form">
-            <a-row>
-              <a-col :span="6">
-                <a-form-model class="search-form-form">
-                  <a-form-model-item label="Month" style="marign-bottom: 0">
-                    <custom-month-picker v-model="currentMonth" :allow-clear="false"></custom-month-picker>
-                  </a-form-model-item>
-                </a-form-model>
-              </a-col>
-              <a-space class="btn-group">
-                <a-button @click="onAdd" type="primary">
-                  <img src="@/assets/images/global/add.png" alt="" />
-                  Add
-                </a-button>
-                <a-button @click="onEdit" type="primary">
-                  <img src="@/assets/images/global/edit.png" alt="" />
-                  Edit
-                </a-button>
-                <a-button type="primary" @click="onDownloadTpl">
-                  <img src="@/assets/images/global/export.png" alt="" />
-                  Download Template
-                </a-button>
-                <a-upload :custom-request="onImport" accept=".xlsx, .xls" :show-upload-list="false">
-                  <a-button type="primary">
-                    <img src="@/assets/images/global/import.png" alt="" />
-                    Import
+        <!-- 内容结束 -->
+      </a-card>
+      <div class="scheduling-calendar">
+        <!-- 日历 -->
+        <a-calendar v-model="currentDate" @select="onSelectDate">
+          <template slot="headerRender">
+            <!-- 搜索栏 -->
+            <div class="search-form">
+              <a-row>
+                <a-col :span="6">
+                  <a-form-model class="search-form-form">
+                    <a-form-model-item label="Month" style="marign-bottom: 0">
+                      <custom-month-picker v-model="currentMonth" :allow-clear="false"></custom-month-picker>
+                    </a-form-model-item>
+                  </a-form-model>
+                </a-col>
+                <a-space class="btn-group">
+                  <a-button @click="onAdd" type="primary">
+                    <img src="@/assets/images/global/add.png" alt="" />
+                    Add
                   </a-button>
-                </a-upload>
-                <a-button type="primary" @click="onExport">
-                  <img src="@/assets/images/global/export.png" alt="" />
-                  Export
-                </a-button>
-              </a-space>
-            </a-row>
-          </div>
-          <!-- 搜索栏结束 -->
-        </template>
-        <!-- 日历内部内容 -->
-        <template slot="dateCellRender" slot-scope="value">
-          <div
-            class="scheduling-calendar-content"
-            v-if="scheduleList[value.format(dateFormat)] && scheduleList[value.format(dateFormat)].length"
-          >
-            <div class="item" v-for="item in scheduleList[value.format(dateFormat)]" :key="item.id">
-              {{ `${item.username}(${item.stationList.length})` }}
+                  <a-button @click="onEdit" type="primary">
+                    <img src="@/assets/images/global/edit.png" alt="" />
+                    Edit
+                  </a-button>
+                  <a-button type="primary" @click="onDownloadTpl">
+                    <img src="@/assets/images/global/export.png" alt="" />
+                    Download Template
+                  </a-button>
+                  <a-upload :custom-request="onImport" accept=".xlsx, .xls" :show-upload-list="false">
+                    <a-button :loading="isImport" type="primary">
+                      <img src="@/assets/images/global/import.png" alt="" />
+                      Import
+                    </a-button>
+                  </a-upload>
+                  <a-button type="primary" @click="onExport">
+                    <img src="@/assets/images/global/export.png" alt="" />
+                    Export
+                  </a-button>
+                </a-space>
+              </a-row>
             </div>
-          </div>
-        </template>
-        <!-- 日历内部内容 -->
-      </a-calendar>
-      <!-- 日历结束 -->
-    </div>
+            <!-- 搜索栏结束 -->
+          </template>
+          <!-- 日历内部内容 -->
+          <template slot="dateCellRender" slot-scope="value">
+            <div
+              class="scheduling-calendar-content"
+              v-if="scheduleList[value.format(dateFormat)] && scheduleList[value.format(dateFormat)].length"
+            >
+              <div class="item" v-for="item in scheduleList[value.format(dateFormat)]" :key="item.id">
+                {{ `${item.username}(${item.stationList.length})` }}
+              </div>
+            </div>
+          </template>
+          <!-- 日历内部内容 -->
+        </a-calendar>
+        <!-- 日历结束 -->
+      </div>
+    </a-spin>
 
     <!-- 增加/编辑排班弹窗 -->
     <custom-modal :title="isAdd ? 'Add' : 'Edit'" :width="845" v-model="visible" :okHandler="submit" destroy-on-close>
@@ -217,6 +219,8 @@ export default {
   data() {
     this.dateFormat = dateFormat
     return {
+      isImport: false,
+      spinningMain: false,
       currentMonth: moment(), // 当前月份
 
       currentDate: moment(), // 当前日期
@@ -255,6 +259,7 @@ export default {
   methods: {
     // 获取该月日程列表
     async getList() {
+      this.spinningMain = true
       try {
         this.isGettingList = true
         const { result } = await getAction(`/sysTask/findList?yearMonth=${this.currentMonth.format('YYYY-MM')}`)
@@ -262,8 +267,10 @@ export default {
         this.schedulingInfo = this.scheduleList[this.currentDate.format(dateFormat)]
       } catch (error) {
         console.error(error)
+        this.spinningMain = false
       } finally {
         this.isGettingList = false
+        this.spinningMain = false
       }
     },
 
@@ -407,14 +414,17 @@ export default {
     },
 
     async onImport({ file }) {
+      this.isImport = true
       try {
         const formData = new FormData()
         formData.append('file', file)
         const { success, failure } = await postAction('/sysTask/importExcel', formData)
         this.$message.success(`${success} Success, ${failure} Fail`)
+        this.isImport = false
         this.getList()
       } catch (error) {
         console.error(error)
+        this.isImport = false
       }
     },
 
@@ -645,7 +655,11 @@ export default {
 .scheduling {
   height: 100%;
   overflow: hidden;
-  display: flex;
+  //display: flex;
+  /deep/.ant-spin-container {
+    height: 100%;
+    display: flex;
+  }
   &-list {
     flex-shrink: 0;
     width: 350px;