diff --git a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
index f43de96..24196e7 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
@@ -41,6 +41,10 @@
         </a-col>
       </a-row>
       <div class="cpu-search-btns">
+        <a-button class="view-btn" @click="handleRefresh">
+          <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
+          <span style="margin-left: 10px"> Refresh </span>
+        </a-button>
         <a-button class="cpu-search-btns-ant" @click="createAlertRules">Create Alert Rules</a-button>
       </div>
     </div>
@@ -196,6 +200,7 @@ export default {
         { label: '3Hours', value: 3 },
         { label: 'user-defined', value: 0 },
       ],
+      userDefined: false,
       option1: {},
       option2: {},
       option3: {},
@@ -230,6 +235,11 @@ export default {
     this.getServerList()
   },
   methods: {
+    handleRefresh() {
+      if (!this.userDefined) {
+        this.getBeforeHours(this.queryParams.timer)
+      }
+    },
     getTheData() {
       let hostId = this.serverOptions.find((item) => {
         return item.value == this.currId
@@ -358,6 +368,12 @@ export default {
       this.getTheData()
     },
     onTimeChange(val) {
+      if (val !== 0) {
+        this.userDefined = false
+      } else {
+        this.userDefined = true
+      }
+      this.queryParams.timer = val
       this.getBeforeHours(val)
       this.getTheData()
     },
@@ -803,6 +819,7 @@ export default {
     &-ant {
       background: #1397a3;
       border: none;
+      margin-left: 10px;
     }
   }
 }
@@ -888,4 +905,12 @@ export default {
   width: 100%;
   height: 600px;
 }
+.view-btn {
+  background-color: #1397a3;
+  font-family: ArialMT;
+  color: #ffffff;
+  border: none;
+  margin-left: 20px;
+  box-shadow: 0px 1px 1px 0px #000000;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/details.vue b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
index 9481b0d..394f948 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/details.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
@@ -475,15 +475,15 @@ export default {
         this.getCpuUtilizationData()
         this.getTimeLineData()
         // this.EchartsTimeline()
-      } else {
-        this.$message.warning('This operation fails. Contact your system administrator')
-      }
-    })
-    this.getDetailsAlarmInfo((res) => {
-      this.loading_alarm_info = false
-      if (res.success) {
-        this.ipagination_alarm_info.total = res.result.total
-        this.dataSource_alarm_info = res.result.records
+        this.getDetailsAlarmInfo((res) => {
+          this.loading_alarm_info = false
+          if (res.success) {
+            this.ipagination_alarm_info.total = res.result.total
+            this.dataSource_alarm_info = res.result.records
+          } else {
+            this.$message.warning('This operation fails. Contact your system administrator')
+          }
+        })
       } else {
         this.$message.warning('This operation fails. Contact your system administrator')
       }
@@ -496,114 +496,114 @@ 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)
+    // 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()
-      })
-    },
+    //             return timeDateHours(data[index].date)
+    //           },
+    //         },
+    //       },
+    //       legend: {
+    //         position: "top-left'",
+    //       },
+    //       tooltip: false,
+    //     })
+    //     this.barPlot.render()
+    //   })
+    // },
     moment,
     // Basic lnformation
     getBasiclnfo(sourceId) {
@@ -648,7 +648,8 @@ export default {
         itemId: this.currItemId,
         itemType: 0,
         start: `${dateFormat(new Date(), 'yyyy-MM-dd')} 00:00:00`,
-        end: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
+        // end: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
+        end: `${dateFormat(new Date(), 'yyyy-MM-dd')} 23:59:59`,
       }
       getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
         let data = res.result
@@ -742,7 +743,7 @@ export default {
       this.getTimeLineData()
     },
     getDetailsAlarmInfo(callBack) {
-      this.loading = true
+      this.loading_alarm_info = true
       let params = {
         sourceId: this.currSourceId,
         pageNo: this.ipagination_alarm_info.current,
@@ -1204,7 +1205,7 @@ export default {
         },
         grid: {
           left: '0%',
-          right: '0%',
+          right: '1%',
           bottom: '0',
           top: 15,
           containLabel: true,
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue b/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue
index 6b7e9f4..25e058d 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue
@@ -41,6 +41,10 @@
         </a-col>
       </a-row>
       <div class="monitor-search-btns">
+        <a-button class="view-btn" @click="handleRefresh">
+          <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
+          <span style="margin-left: 10px"> Refresh </span>
+        </a-button>
         <a-button class="monitor-search-btns-ant" @click="createAlertRules">Create Alert Rules</a-button>
       </div>
     </div>
@@ -202,6 +206,7 @@ export default {
         { label: '3Hours', value: 3 },
         { label: 'user-defined', value: 0 },
       ],
+      userDefined: false,
       data1: {
         xData: [],
         data: [],
@@ -301,6 +306,11 @@ export default {
     this.getServerList()
   },
   methods: {
+    handleRefresh() {
+      if (!this.userDefined) {
+        this.getBeforeHours(this.queryParams.timer)
+      }
+    },
     // 获取所有监控项的itemId
     getMonitorItemId() {
       let params = {
@@ -441,6 +451,12 @@ export default {
       this.getMonitorItemId()
     },
     onTimeChange(val) {
+      if (val !== 0) {
+        this.userDefined = false
+      } else {
+        this.userDefined = true
+      }
+      this.queryParams.timer = val
       this.getBeforeHours(val)
       this.getMonitorData()
     },
@@ -501,6 +517,7 @@ export default {
     &-ant {
       background: #1397a3;
       border: none;
+      margin-left: 10px;
     }
   }
 }
@@ -527,4 +544,12 @@ export default {
   width: 100%;
   height: 600px;
 }
+.view-btn {
+  background-color: #1397a3;
+  font-family: ArialMT;
+  color: #ffffff;
+  border: none;
+  margin-left: 20px;
+  box-shadow: 0px 1px 1px 0px #000000;
+}
 </style>
\ No newline at end of file