diff --git a/nezha-fronted/src/components/chart/chart/options/chartClock.js b/nezha-fronted/src/components/chart/chart/options/chartClock.js
index 9d68d58a5..063971dc9 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartClock.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartClock.js
@@ -9,39 +9,27 @@ const chartClockOption = {
       max: 12,
       splitNumber: 12,
       clockwise: true,
+      radius: '88%',
+      center: ['50%', '50%'],
       axisLine: {
-        lineStyle: {
-          width: 15,
-          color: [[1, 'rgba(0,0,0,0.7)']],
-          shadowColor: 'rgba(0, 0, 0, 0.5)',
-          shadowBlur: 15
-        }
+        show: false
+      },
+      axisLabel: {
+        show: false
       },
       splitLine: {
         lineStyle: {
           shadowColor: 'rgba(0, 0, 0, 0.3)',
-          shadowBlur: 3,
-          shadowOffsetX: 1,
-          shadowOffsetY: 2
-        }
-      },
-      axisLabel: {
-        fontSize: 14,
-        distance: 25,
-        formatter: function (value) {
-          if (value === 0) {
-            return ''
-          }
-          return value + ''
+          width: 5
         }
       },
       pointer: {
         icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
-        width: 12,
+        width: 9,
         length: '55%',
         offsetCenter: [0, '8%'],
         itemStyle: {
-          color: '#C0911F',
+          color: '#202f3f',
           shadowColor: 'rgba(0, 0, 0, 0.3)',
           shadowBlur: 8,
           shadowOffsetX: 2,
@@ -51,9 +39,6 @@ const chartClockOption = {
       detail: {
         show: false
       },
-      title: {
-        offsetCenter: [0, '30%']
-      },
       data: [
         {
           value: 0
@@ -82,24 +67,11 @@ const chartClockOption = {
       },
       pointer: {
         icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
-        width: 8,
+        width: 6,
         length: '70%',
         offsetCenter: [0, '8%'],
         itemStyle: {
-          color: '#C0911F',
-          shadowColor: 'rgba(0, 0, 0, 0.3)',
-          shadowBlur: 8,
-          shadowOffsetX: 2,
-          shadowOffsetY: 4
-        }
-      },
-      anchor: {
-        show: true,
-        size: 20,
-        showAbove: false,
-        itemStyle: {
-          borderWidth: 15,
-          borderColor: '#C0911F',
+          color: '#202f3f',
           shadowColor: 'rgba(0, 0, 0, 0.3)',
           shadowBlur: 8,
           shadowOffsetX: 2,
@@ -109,9 +81,6 @@ const chartClockOption = {
       detail: {
         show: false
       },
-      title: {
-        offsetCenter: ['0%', '-40%']
-      },
       data: [
         {
           value: 0
@@ -125,7 +94,6 @@ const chartClockOption = {
       endAngle: -270,
       min: 0,
       max: 60,
-      animationEasingUpdate: 'bounceOut',
       clockwise: true,
       axisLine: {
         show: false
@@ -141,11 +109,11 @@ const chartClockOption = {
       },
       pointer: {
         icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
-        width: 4,
+        width: 3,
         length: '85%',
         offsetCenter: [0, '8%'],
         itemStyle: {
-          color: '#C0911F',
+          color: '#fa901c',
           shadowColor: 'rgba(0, 0, 0, 0.3)',
           shadowBlur: 8,
           shadowOffsetX: 2,
@@ -157,7 +125,7 @@ const chartClockOption = {
         size: 15,
         showAbove: true,
         itemStyle: {
-          color: '#C0911F',
+          color: '#fa901c',
           shadowColor: 'rgba(0, 0, 0, 0.3)',
           shadowBlur: 8,
           shadowOffsetX: 2,
@@ -167,9 +135,6 @@ const chartClockOption = {
       detail: {
         show: false
       },
-      title: {
-        offsetCenter: ['0%', '-40%']
-      },
       data: [
         {
           value: 0
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
index 1737c0b24..f3eebc55f 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
@@ -30,7 +30,8 @@
             clearable
             :time-arrow-control="true"
             placeholder="Moment"
-            value-format="yyyy-MM-dd HH:mm:ss"
+            :value-format="endpointQueryTime"
+            :format="endpointQueryTime"
           >
           </my-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
           </div>
@@ -125,7 +126,8 @@ export default {
       dropdownShow: false,
       timeout: null,
       formatTime: '',
-      hideSameLabels: true
+      hideSameLabels: true,
+      endpointQueryTime: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss'
     }
   },
   methods: {
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
index 9935046ba..2ba910315 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -40,7 +40,8 @@
           clearable
           :time-arrow-control="true"
           placeholder="Moment"
-          value-format="yyyy-MM-dd HH:mm:ss"
+          :value-format="endpointQueryTabTime"
+          :format="endpointQueryTabTime"
           @change="pickTime"
         >
           </my-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
@@ -173,7 +174,8 @@ export default {
       plTableSHow: true,
       scrollTop: 0,
       scrollbarWrap: null,
-      minusTime: 0
+      minusTime: 0,
+      endpointQueryTabTime: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss'
     }
   },
   methods: {
diff --git a/nezha-fronted/src/components/common/multipleTime.vue b/nezha-fronted/src/components/common/multipleTime.vue
index e44a367d7..f4a66bba6 100644
--- a/nezha-fronted/src/components/common/multipleTime.vue
+++ b/nezha-fronted/src/components/common/multipleTime.vue
@@ -4,7 +4,7 @@
     <transition>
       <div v-show="showDropdown" id="panel-calender" class="calendar">
         <my-date-picker prefix-icon=" " size="mini" ref="calendar"
-                        format="yyyy/MM/dd HH:mm:ss" class="panel-time-picker-hidden" @change="dateChange" v-model="startTime" type="datetime"
+                        :format="multipleTime" class="panel-time-picker-hidden" @change="dateChange" v-model="startTime" type="datetime"
                         popper-class="panel-time-picker-popper"
                         align="right">
         </my-date-picker>
@@ -159,7 +159,8 @@ export default {
       },
       isPopoverDisabled: false,
       isCustom: false,
-      valueArr: []
+      valueArr: [],
+      multipleTime: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss'
     }
   },
   watch: {
@@ -170,8 +171,8 @@ export default {
           if (this.showTime.value) {
             this.setSearchTime(this.showTime.type, this.showTime.value)
           } else {
-            const startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
-            const endTime = bus.timeFormate(new Date(this.searchTime[0]).getTime() + new Date(this.stepSearchTime[1]).getTime() - new Date(this.stepSearchTime[0]).getTime(), 'yyyy-MM-dd hh:mm:ss')
+            const startTime = bus.timeFormate(this.searchTime[0], this.multipleTime)
+            const endTime = bus.timeFormate(new Date(this.searchTime[0]).getTime() + new Date(this.stepSearchTime[1]).getTime() - new Date(this.stepSearchTime[0]).getTime(), this.multipleTime)
             this.$set(this.searchTime, 0, startTime)
             this.$set(this.searchTime, 1, endTime)
           }
@@ -197,8 +198,8 @@ export default {
   },
   methods: {
     dateChange (val) {
-      const startTime = bus.timeFormate(val, 'yyyy-MM-dd hh:mm:ss')
-      const endTime = bus.timeFormate(new Date(val).getTime() + new Date(this.stepSearchTime[1]).getTime() - new Date(this.stepSearchTime[0]).getTime(), 'yyyy-MM-dd hh:mm:ss')
+      const startTime = bus.timeFormate(val, this.multipleTime)
+      const endTime = bus.timeFormate(new Date(val).getTime() + new Date(this.stepSearchTime[1]).getTime() - new Date(this.stepSearchTime[0]).getTime(), this.multipleTime)
       this.$set(this.searchTime, 0, startTime)
       this.$set(this.searchTime, 1, endTime)
 
@@ -268,20 +269,20 @@ export default {
     },
     setSearchTime (type, val) {
       if (type === 'minute') {
-        const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
-        const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
+        const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 60 * 1000, this.multipleTime)
+        const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 60 * 1000, this.multipleTime)
         this.$set(this.searchTime, 0, startTime)
         this.$set(this.searchTime, 1, endTime)
         this.$set(this.searchTime, 2, val + 'm')
       } else if (type === 'hour') {
-        const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
-        const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
+        const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 60 * 60 * 1000, this.multipleTime)
+        const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 60 * 60 * 1000, this.multipleTime)
         this.$set(this.searchTime, 0, startTime)
         this.$set(this.searchTime, 1, endTime)
         this.$set(this.searchTime, 2, val + 'h')
       } else if (type === 'date') {
-        const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 24 * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
-        const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 24 * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
+        const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 24 * 60 * 60 * 1000, this.multipleTime)
+        const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 24 * 60 * 60 * 1000, this.multipleTime)
         this.$set(this.searchTime, 0, startTime)
         this.$set(this.searchTime, 1, endTime)
         this.$set(this.searchTime, 2, val + 'd')
diff --git a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
index 1ee6a1472..666a7dcba 100644
--- a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
@@ -38,7 +38,7 @@
               <div class="datepicker-box">
                 <span class="datepicker-title">{{ $t("overall.startTime") }}</span>
                 <my-date-picker ref="calendar" v-model="editAlertSilence.startAt" :clearable="false" :placeholder="$t('dashboard.panel.startTime')"
-                                align="right" class=" " format="yyyy/MM/dd HH:mm:ss"
+                                align="right" class=" " :format="alertSilenceTime"
                                 popper-class="panel-time-picker-popper right-box-select-top"
                                 prefix-icon=" "
                                 size="mini"
@@ -50,7 +50,7 @@
               <div class="datepicker-box">
                 <span class="datepicker-title">{{ $t("overall.endTime") }}</span>
                 <my-date-picker ref="calendar" v-model="editAlertSilence.endAt" :clearable="false" :placeholder="$t('dashboard.panel.startTime')"
-                                align="right" class=" " format="yyyy/MM/dd HH:mm:ss"
+                                align="right" class=" " :format="alertSilenceTime"
                                 popper-class="panel-time-picker-popper right-box-select-top"
                                 prefix-icon=" "
                                 size="mini"
@@ -209,7 +209,8 @@ export default {
       moduleData: null,
       endpointData: null,
       startAtTamp: '',
-      endAtTamp: ''
+      endAtTamp: '',
+      alertSilenceTime: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss'
     }
   },
   mounted () {
@@ -294,10 +295,10 @@ export default {
     },
     dateChange (val, type) {
       if (type === 'startAt') {
-        this.editAlertSilence.startAt = bus.timeFormate(new Date(val), 'yyyy-MM-dd hh:mm:ss')
+        this.editAlertSilence.startAt = bus.timeFormate(new Date(val), localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss')
         this.startAtTamp = new Date(val).getTime()
       } else if (type === 'endAt') {
-        this.editAlertSilence.endAt = bus.timeFormate(new Date(val), 'yyyy-MM-dd hh:mm:ss')
+        this.editAlertSilence.endAt = bus.timeFormate(new Date(val), localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss')
         this.endAtTamp = new Date(val).getTime()
       }
       this.$forceUpdate()
@@ -312,7 +313,7 @@ export default {
       }
     },
     rangeTimeChange (val) {
-      const arr = [bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss'), bus.timeFormate(bus.getOffsetTimezoneData(val * 1), 'yyyy-MM-dd hh:mm:ss')]
+      const arr = [bus.timeFormate(bus.getOffsetTimezoneData(), localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss'), bus.timeFormate(bus.getOffsetTimezoneData(val * 1), localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss')]
       this.$set(this.editAlertSilence, 'startAt', arr[0])
       this.$set(this.editAlertSilence, 'endAt', arr[1])
       this.startAtTamp = new Date(this.editAlertSilence.startAt).getTime()
diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index da0f22412..30c34fe90 100644
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="panel-calender" :class="{'calendar--small': size === 'small'}" class="calendar">
     <my-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
-                    format="yyyy/MM/dd HH:mm:ss" @change="dateChange" v-model="searchTime" type="datetimerange"
+                    :format="timePicker" @change="dateChange" v-model="searchTime" type="datetimerange"
                     popper-class="panel-time-picker-popper time-picker-popover__select-top"
                     :default-time="['00:00:00', '23:59:59']"
                     :range-separator="$t('dashboard.panel.to')"
@@ -67,10 +67,8 @@ export default {
     return {
       isPopoverDisabled: false,
       isCustom: false,
-      searchTime: [
-        bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'),
-        bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
-      ],
+      timePicker: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss',
+      searchTime: [],
       showTime: {
         id: 4,
         text: this.$t('dashboard.panel.lastOneHour')
@@ -163,8 +161,8 @@ export default {
   },
   methods: {
     dateChange (val) {
-      const startTime = bus.timeFormate(val[0], 'yyyy-MM-dd hh:mm:ss')
-      const endTime = bus.timeFormate(val[1], 'yyyy-MM-dd hh:mm:ss')
+      const startTime = bus.timeFormate(val[0], this.timePicker)
+      const endTime = bus.timeFormate(val[1], this.timePicker)
       this.$set(this.searchTime, 0, startTime)
       this.$set(this.searchTime, 1, endTime)
 
@@ -188,11 +186,11 @@ export default {
           }
           const time = bus.getTimezontDateRange()
           if (timeGroup.start_time) {
-            this.$set(this.searchTime, 0, bus.timeFormate(timeGroup.start_time, 'yyyy-MM-dd hh:mm:ss'))
-            this.$set(this.searchTime, 1, bus.timeFormate(timeGroup.end_time, 'yyyy-MM-dd hh:mm:ss'))
+            this.$set(this.searchTime, 0, bus.timeFormate(timeGroup.start_time, this.timePicker))
+            this.$set(this.searchTime, 1, bus.timeFormate(timeGroup.end_time, this.timePicker))
           } else {
-            this.$set(this.searchTime, 0, bus.timeFormate(time[0], 'yyyy-MM-dd hh:mm:ss'))
-            this.$set(this.searchTime, 1, bus.timeFormate(time[1], 'yyyy-MM-dd hh:mm:ss'))
+            this.$set(this.searchTime, 0, bus.timeFormate(time[0], this.timePicker))
+            this.$set(this.searchTime, 1, bus.timeFormate(time[1], this.timePicker))
           }
         }
       } else {
@@ -261,20 +259,20 @@ export default {
     },
     setSearchTime (type, val) {
       if (type === 'minute') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), this.timePicker)
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.timePicker)
         this.$set(this.searchTime, 0, startTime)
         this.$set(this.searchTime, 1, endTime)
         this.$set(this.searchTime, 2, val + 'm')
       } else if (type === 'hour') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), this.timePicker)
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.timePicker)
         this.$set(this.searchTime, 0, startTime)
         this.$set(this.searchTime, 1, endTime)
         this.$set(this.searchTime, 2, val + 'h')
       } else if (type === 'date') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), this.timePicker)
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.timePicker)
         this.$set(this.searchTime, 0, startTime)
         this.$set(this.searchTime, 1, endTime)
         this.$set(this.searchTime, 2, val + 'd')
@@ -310,7 +308,22 @@ export default {
           }
         }
       }
-    }
+    },
+    stepSearchTime: {
+      immediate: true,
+      handler (n, o) {
+        if (n && this.searchTime[0]) {
+          if (this.showTime.value) {
+            this.setSearchTime(this.showTime.type, this.showTime.value)
+          } else {
+            const startTime = bus.timeFormate(this.searchTime[0], this.timePicker)
+            const endTime = bus.timeFormate(new Date(this.searchTime[0]).getTime() + new Date(this.stepSearchTime[1]).getTime() - new Date(this.stepSearchTime[0]).getTime(), this.timePicker)
+            this.$set(this.searchTime, 0, startTime)
+            this.$set(this.searchTime, 1, endTime)
+          }
+        }
+      }
+    },
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/page/config/system/apiKeyTable.vue b/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
index b58845642..8487ef11a 100644
--- a/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
+++ b/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
@@ -55,8 +55,8 @@
                   style="width: 100%;"
                   v-model="scope.row[item.prop]"
                   prefix-icon=" " size="small" ref="calendar"
-                  format="yyyy-MM-dd HH:mm:ss"
-                  value-format="yyyy-MM-dd HH:mm:ss"
+                  :format="apiKeyTableTime"
+                  :value-format="apiKeyTableTime"
                   type="datetime"
                   popper-class="item-system-table right-public-box-dropdown-top right-box-select-top"
                   :picker-options="pickerOptions"
@@ -165,7 +165,8 @@ export default {
         disabledDate (time) {
           return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
         }
-      }
+      },
+      apiKeyTableTime: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss'
     }
   },
   methods: {
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
index 45ab3dd01..357cb64c7 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -131,7 +131,13 @@
                       :resizable="false"
                       min-width="110px"
                       show-overflow-tooltip
-                    ></el-table-column>
+                    >
+                      <template slot-scope="scope" :column="item">
+                        <template v-if="item.prop === 'time'">{{utcTimeToTimezoneStr(scope.row.time)}}</template>
+                        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+                        <template v-else>-</template>
+                      </template>
+                    </el-table-column>
                     <template slot="empty">
                       <div v-if="!tools.loading" class="table-no-data">
                         <svg class="icon" aria-hidden="true">
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index fec84a467..1a94bae8b 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -276,7 +276,8 @@ export default {
       // ---图表相关参数--end
       scrollbarWrap: null,
       batchDeleteObjs: [],
-      nowTimeType: {}
+      nowTimeType: {},
+      panelDateFormatTime: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss'
     }
   },
   components: {
@@ -300,8 +301,8 @@ export default {
     // 刷新
     Refresh () {
       const curTime = this.$refs.calendarPanel.getCurrentTime()
-      this.filter.start_time = bus.timeFormate(curTime[0], 'yyyy-MM-dd hh:mm:ss')
-      this.filter.end_time = bus.timeFormate(curTime[1], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.start_time = bus.timeFormate(curTime[0], this.panelDateFormatTime)
+      this.filter.end_time = bus.timeFormate(curTime[1], this.panelDateFormatTime)
       this.getTableData()
     },
     // 面板相关操作
@@ -532,8 +533,8 @@ export default {
       this.chartListLoading = true
       if (params.start_time === '' || params.end_time === '') {
         const now = bus.getTimezontDateRange()
-        const endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss')
-        const startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss')
+        const endTimeTmp = bus.timeFormate(now[1].getTime(), this.panelDateFormatTime)
+        const startTimeTmp = bus.timeFormate(now[0].getTime(), this.panelDateFormatTime)
         params.start_time = startTimeTmp
         params.end_time = endTimeTmp
       }
@@ -559,9 +560,9 @@ export default {
       const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
       this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
       this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
-      this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
-      this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
-      this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.start_time = bus.timeFormate(this.searchTime[0], this.panelDateFormatTime)
+      this.filter.end_time = bus.timeFormate(this.searchTime[1], this.panelDateFormatTime)
+      this.filter.end_time = bus.timeFormate(this.searchTime[1], this.panelDateFormatTime)
       this.filter.value = this.searchTime[2]
       this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id
       // this.getTableData()
@@ -580,20 +581,20 @@ export default {
     },
     setSearchTime (type, val, nowTimeType) { // 设置searchTime
       if (type === 'minute') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), this.panelDateFormatTime)
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.panelDateFormatTime)
         this.$set(this.searchTime, 0, startTime)
         this.$set(this.searchTime, 1, endTime)
         this.$set(this.searchTime, 2, val + 'm')
       } else if (type === 'hour') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), this.panelDateFormatTime)
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.panelDateFormatTime)
         this.$set(this.searchTime, 0, startTime)
         this.$set(this.searchTime, 1, endTime)
         this.$set(this.searchTime, 2, val + 'h')
       } else if (type === 'date') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), this.panelDateFormatTime)
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), this.panelDateFormatTime)
         this.$set(this.searchTime, 0, startTime)
         this.$set(this.searchTime, 1, endTime)
         this.$set(this.searchTime, 2, val + 'd')
@@ -828,9 +829,9 @@ export default {
     })
     if (this.nowTimeType.type) {
       this.setSearchTime(this.nowTimeType.type, this.nowTimeType.value, this.nowTimeType)
-      this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
-      this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
-      this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.start_time = bus.timeFormate(this.searchTime[0], this.panelDateFormatTime)
+      this.filter.end_time = bus.timeFormate(this.searchTime[1], this.panelDateFormatTime)
+      this.filter.end_time = bus.timeFormate(this.searchTime[1], this.panelDateFormatTime)
       this.filter.value = this.searchTime[2]
     }
     this.getTableData()
diff --git a/nezha-fronted/src/libs/bus.js b/nezha-fronted/src/libs/bus.js
index ce3dc0ae4..807be1cfb 100644
--- a/nezha-fronted/src/libs/bus.js
+++ b/nezha-fronted/src/libs/bus.js
@@ -39,8 +39,8 @@ export default new Vue({
       end.setEnd()
       // let start = this.getHoursTime(-1);
       // let end = this.getHoursTime(0);
-      start = this.timeFormate(start, 'yyyy-MM-dd hh:mm:ss')
-      end = this.timeFormate(end, 'yyyy-MM-dd hh:mm:ss')
+      start = this.timeFormate(start, localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss')
+      end = this.timeFormate(end, localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss')
       this.selectDate = [start, end]
     },
     getHoursTime (hours) {
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 94f0c4b9d..553aba23a 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -102,9 +102,9 @@ Vue.mixin({
         return bus.UTCTimeToConfigTimezone(time)
       }
     },
-    utcTimeToTimezoneStr: function (time, format = localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss') {
+    utcTimeToTimezoneStr: function (time) {
       if (time) {
-        return bus.timeFormate(bus.UTCTimeToConfigTimezone(time), format)
+        return bus.timeFormate(bus.UTCTimeToConfigTimezone(time), localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss')
       } else {
         return '-'
       }
@@ -114,18 +114,17 @@ Vue.mixin({
         return bus.configTimezoneToUTCTime(time)
       }
     },
-    timezoneToUtcTimeStr: function (time, format = localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss') {
+    timezoneToUtcTimeStr: function (time) {
       if (time) {
-        return bus.timeFormate(this.timezoneToUtcTime(time), format)
+        return bus.timeFormate(this.timezoneToUtcTime(time), localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss')
       }
     },
-    timestampStr: function (time, format = localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss') {
+    timestampStr: function (time) {
       const date = new Date(time)
       const localOffset = date.getTimezoneOffset() * 60 * 1000 // 默认 一分钟显示时区偏移的结果
-      let dateStr = new Date(time).getTime() + localOffset
-      dateStr = bus.timeFormate(dateStr, format)
+      const dateStr = new Date(time).getTime() + localOffset
       if (time) {
-        return bus.timeFormate(bus.UTCTimeToConfigTimezone(dateStr), format)
+        return bus.timeFormate(bus.UTCTimeToConfigTimezone(dateStr), localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'yyyy-MM-dd hh:mm:ss')
       } else {
         return '-'
       }