From 4b4393474307a5a755ce98b062b691484a03f917 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Wed, 28 Apr 2021 15:18:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=9C=AC=E5=9C=B0=E9=87=8D=E6=9E=84elemen?=
 =?UTF-8?q?t-ui=E7=9A=84=E6=97=B6=E9=97=B4=E9=80=89=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/.babelrc                        | 29 ++++++++++++++++++-
 nezha-fronted/build/webpack.base.conf.js      | 23 +++++++++++----
 nezha-fronted/package.json                    |  2 +-
 nezha-fronted/src/assets/css/common.scss      | 23 +++++++++++++++
 .../src/components/charts/chart-list.vue      |  2 +-
 .../src/components/charts/chartPreview.vue    |  4 +--
 .../common/bottomBox/tabs/endpointQuery.vue   |  4 +--
 .../bottomBox/tabs/endpointQueryTab.vue       |  4 +--
 nezha-fronted/src/components/common/login.vue |  1 +
 .../src/components/common/multipleTime.vue    |  5 ++--
 .../components/common/myDatePicker/index.js   |  9 +++++-
 .../myDatePicker/src/basic/date-table.vue     |  8 +++--
 .../myDatePicker/src/panel/date-range.vue     | 18 +++++++-----
 .../common/myDatePicker/src/panel/date.vue    |  3 ++
 .../myDatePicker/src/panel/month-range.vue    |  4 +++
 .../myDatePicker/src/panel/time-range.vue     |  2 ++
 .../common/myDatePicker/src/panel/time.vue    |  2 ++
 .../common/myDatePicker/src/picker.vue        | 12 +++++++-
 .../myDatePicker/src/picker/date-picker.js    |  2 +-
 .../components/common/project/topologyL5.vue  |  1 -
 .../common/rightBox/alertSilenceBox.vue       |  8 ++---
 .../rightBox/asset/assetBatchEditBox.vue      |  8 ++---
 .../common/rightBox/asset/assetBox.vue        | 12 ++++----
 .../components/common/rightBox/assetBox.vue   |  4 +--
 .../src/components/common/searchInput.vue     |  4 +--
 .../src/components/common/timePicker.vue      |  6 ++--
 .../page/asset/components/assetTagEx.vue      |  8 ++---
 .../page/config/system/apiKeyTable.vue        |  4 +--
 .../page/dashboard/metricPreview.vue          |  8 ++---
 .../src/components/page/dashboard/panel.vue   |  2 +-
 nezha-fronted/src/main.js                     |  5 ++--
 nezha-fronted/src/store/user.js               |  2 ++
 32 files changed, 166 insertions(+), 63 deletions(-)

diff --git a/nezha-fronted/.babelrc b/nezha-fronted/.babelrc
index 3a280ba34..01be98850 100644
--- a/nezha-fronted/.babelrc
+++ b/nezha-fronted/.babelrc
@@ -8,5 +8,32 @@
     }],
     "stage-2"
   ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"]
+  "plugins": ["transform-vue-jsx", "transform-runtime"],
+  "env": {
+    "utils": {
+      "presets": [
+        [
+          "env",
+          {
+            "loose": true,
+            "modules": "commonjs",
+            "targets": {
+              "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+            }
+          }
+        ],
+      ],
+      "plugins": [
+        ["module-resolver", {
+          "root": ["element-ui"],
+          "alias": {
+            "element-ui/src": "element-ui/lib"
+          }
+        }]
+      ]
+    },
+    "test": {
+      "plugins": ["istanbul"]
+    }
+  }
 }
diff --git a/nezha-fronted/build/webpack.base.conf.js b/nezha-fronted/build/webpack.base.conf.js
index a07e68360..88adc5d03 100644
--- a/nezha-fronted/build/webpack.base.conf.js
+++ b/nezha-fronted/build/webpack.base.conf.js
@@ -8,8 +8,6 @@ function resolve (dir) {
   return path.join(__dirname, '..', dir)
 }
 
-
-
 module.exports = {
   context: path.resolve(__dirname, '../'),
   entry: {
@@ -25,8 +23,8 @@ module.exports = {
   resolve: {
     extensions: ['.js', '.vue', '.json'],
     alias: {
-      'vue$': 'vue/dist/vue.esm.js',
-      '@': resolve('src'),
+      vue$: 'vue/dist/vue.esm.js',
+      '@': resolve('src')
     }
   },
   module: {
@@ -37,9 +35,22 @@ module.exports = {
         options: vueLoaderConfig
       },
       {
-        test: /\.js$/,
+        test: /\.(js)$/,
         loader: 'babel-loader',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'), resolve('node_modules/element-ui/packages/scrollbar')],
+        exclude: '/node_modules/',
+        options: {
+          presets: [
+            ['env', {
+              modules: false,
+              targets: {
+                browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
+              }
+            }],
+            'stage-2'
+          ],
+          plugins: ['transform-vue-jsx', 'transform-runtime']
+        }
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json
index 562ee896a..9073baa7a 100644
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
-    "babel-core": "^6.22.1",
+    "babel-core": "^6.26.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^7.1.1",
     "babel-plugin-syntax-jsx": "^6.18.0",
diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 52ad24118..b68261d09 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -85,3 +85,26 @@
 .orange-bg {
   background-color: var(--theme-color) !important;
 }
+.timezone-area{
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+  font-size: 14px;
+  float: left;
+  margin-left: 10px;
+  font-family: PingFangSC-Regular;
+  color: #333333;
+  line-height: 20px;
+  font-weight: 400;
+}
+.timezone-offset{
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+  font-size: 14px;
+  margin-right: 10px;
+  font-family: PingFangSC-Regular;
+  color: #333333;
+  line-height: 20px;
+  font-weight: 400;
+}
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 4f9c26796..86aa83298 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -674,7 +674,7 @@ export default {
       }
       if (!param.query) delete param.query
       // 根据panelId获得panel下的所有图表
-      this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0').then(response => {
+      this.$get('visual/panel/chart?panelId=' + params.panelId + '&pageSize=-1').then(response => {
         if (response.code === 200) {
           response.data.list.forEach((item, index) => {
             item.isLoaded = false
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index f656ecdca..16367c439 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -60,7 +60,7 @@
 <!--          <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange" v-if="chart.type !='text'"></time-picker>-->
           <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="chart-preview"></pick-time>
           <!--
-          <el-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-preview-picker"
+          <my-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-preview-picker"
                           format="yyyy/MM/dd HH:mm"
                           @change="dateChange"
                           v-model="searchTime"
@@ -70,7 +70,7 @@
                           :start-placeholder="$t('dashboard.panel.startTime')"
                           :end-placeholder="$t('dashboard.panel.endTime')"
                           align="right">
-          </el-date-picker>-->
+          </my-date-picker>-->
         </div>
       </div>
 
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
index 376c3a1df..edd8814be 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
@@ -19,7 +19,7 @@
             </el-input>
           </div>
           <div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
-            <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button><el-date-picker
+            <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button><my-date-picker
             v-model="formatTime"
             type="datetime"
             size="mini"
@@ -29,7 +29,7 @@
             placeholder="Moment"
             value-format="yyyy-MM-dd HH:mm:ss"
           >
-          </el-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>
+          </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>
           <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 24px;">
             <button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="viewGraph">
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
index 891063900..409482a05 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -32,7 +32,7 @@
           </el-input>
         </div>
         <div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
-          <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button><el-date-picker
+          <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button><my-date-picker
           v-model="formatTime"
           type="datetime"
           size="mini"
@@ -43,7 +43,7 @@
           value-format="yyyy-MM-dd HH:mm:ss"
           @change="pickTime"
         >
-          </el-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>
+          </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>
         <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 24px;">
           <button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="viewGraph">
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index 17c5ad550..ced938448 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -50,6 +50,7 @@
 
 <script>
 import { mapActions } from 'vuex'
+import moment from 'moment-timezone'
 export default {
   name: 'login',
   data () {
diff --git a/nezha-fronted/src/components/common/multipleTime.vue b/nezha-fronted/src/components/common/multipleTime.vue
index eb18c71e5..60e6be6e2 100644
--- a/nezha-fronted/src/components/common/multipleTime.vue
+++ b/nezha-fronted/src/components/common/multipleTime.vue
@@ -116,11 +116,11 @@
 <!--    name="multiple-time-datepicker"-->
     <transition>
       <div v-show="showDropdown" id="panel-calender" class="calendar">
-        <el-date-picker prefix-icon=" " size="mini" ref="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"
                         popper-class="panel-time-picker-popper"
                         align="right">
-        </el-date-picker>
+        </my-date-picker>
         <!--
         <button type="button" style="border-radius: 1px 1px 1px 1px" @click="right()" v-show="isCustom"
                 class="nz-btn nz-btn-size-normal nz-btn-style-light time-picker-button time-picker-right-button" >
@@ -373,6 +373,7 @@ export default {
           } else {
             this.isCustom = true
             this.$refs.calendar.focus()
+            this.$refs.calendar.pickerVisible = true
           }
         } else {
           this.isCustom = false
diff --git a/nezha-fronted/src/components/common/myDatePicker/index.js b/nezha-fronted/src/components/common/myDatePicker/index.js
index 4615b9d73..db27250cf 100644
--- a/nezha-fronted/src/components/common/myDatePicker/index.js
+++ b/nezha-fronted/src/components/common/myDatePicker/index.js
@@ -1,7 +1,14 @@
 import DatePicker from './src/picker/date-picker'
-
+import localeEn from 'element-ui/lib/locale/lang/en'
+import localeCn from 'element-ui/lib/locale/lang/zh-CN'
+import { use } from 'element-ui/src/locale/'
 /* istanbul ignore next */
 DatePicker.install = function install (Vue) {
+  if (localStorage.getItem('nz-language') === 'cn') {
+    use(localeCn)
+  } else {
+    use(localeEn)
+  }
   Vue.component(DatePicker.name, DatePicker)
 }
 
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/basic/date-table.vue b/nezha-fronted/src/components/common/myDatePicker/src/basic/date-table.vue
index c2447a01c..6c874a3d6 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/basic/date-table.vue
+++ b/nezha-fronted/src/components/common/myDatePicker/src/basic/date-table.vue
@@ -54,11 +54,15 @@ const removeFromArray = function (arr, pred) {
   const idx = typeof pred === 'function' ? arrayFindIndex(arr, pred) : arr.indexOf(pred)
   return idx >= 0 ? [...arr.slice(0, idx), ...arr.slice(idx + 1)] : arr
 }
-
+import moment from 'moment-timezone'
 export default {
   mixins: [Locale],
 
   props: {
+    timezone: {
+      type: String,
+      default: moment.tz.guess() // 没有传则使用本地的时区
+    },
     firstDayOfWeek: {
       default: 7,
       type: Number,
@@ -144,7 +148,7 @@ export default {
       const disabledDate = this.disabledDate
       const cellClassName = this.cellClassName
       const selectedDate = this.selectionMode === 'dates' ? coerceTruthyValueToArray(this.value) : []
-      const now = getDateTimestamp(new Date())
+      const now = getDateTimestamp(new Date( moment().tz(this.timezone).format('YYYY/MM/DD HH:mm:ss')))
 
       for (let i = 0; i < 6; i++) {
         const row = rows[i]
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue b/nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue
index 3a07320da..7a72e17a8 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue
+++ b/nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue
@@ -111,6 +111,7 @@
               <div>{{ leftLabel }}</div>
             </div>
             <date-table
+              :timezone="timezone"
               selection-mode="range"
               :date="leftDate"
               :default-value="defaultValue"
@@ -151,6 +152,7 @@
               <div>{{ rightLabel }}</div>
             </div>
             <date-table
+              :timezone="timezone"
               selection-mode="range"
               :date="rightDate"
               :default-value="defaultValue"
@@ -167,13 +169,15 @@
         </div>
       </div>
       <div class="el-picker-panel__footer" v-if="showTime">
-        <el-button
-          size="mini"
-          type="text"
-          class="el-picker-panel__link-btn"
-          @click="handleClear">
-          {{ t('el.datepicker.clear') }}
-        </el-button>
+        <span class="timezone-area">{{timezone}}</span>
+        <span class="timezone-offset">{{timezoneOffset}}</span>
+<!--        <el-button-->
+<!--          size="mini"-->
+<!--          type="text"-->
+<!--          class="el-picker-panel__link-btn"-->
+<!--          @click="handleClear">-->
+<!--          {{ t('el.datepicker.clear') }}-->
+<!--        </el-button>-->
         <el-button
           plain
           size="mini"
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/panel/date.vue b/nezha-fronted/src/components/common/myDatePicker/src/panel/date.vue
index 10b75b170..9c47db359 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/panel/date.vue
+++ b/nezha-fronted/src/components/common/myDatePicker/src/panel/date.vue
@@ -89,6 +89,7 @@
 
           <div class="el-picker-panel__content">
             <date-table
+              :timezone="timezone"
               v-show="currentView === 'date'"
               @pick="handleDatePick"
               :selection-mode="selectionMode"
@@ -122,6 +123,8 @@
       <div
         class="el-picker-panel__footer"
         v-show="footerVisible && currentView === 'date'">
+        <span class="timezone-area">{{timezone}}</span>
+        <span class="timezone-offset">{{timezoneOffset}}</span>
         <el-button
           size="mini"
           type="text"
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/panel/month-range.vue b/nezha-fronted/src/components/common/myDatePicker/src/panel/month-range.vue
index d6d334124..4cbeeca60 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/panel/month-range.vue
+++ b/nezha-fronted/src/components/common/myDatePicker/src/panel/month-range.vue
@@ -72,6 +72,10 @@
             </month-table>
           </div>
         </div>
+        <div class="el-picker-panel__footer" v-if="showTime">
+          <span class="timezone-area">{{timezone}}</span>
+          <span class="timezone-offset">{{timezoneOffset}}</span>
+        </div>
       </div>
     </div>
   </transition>
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/panel/time-range.vue b/nezha-fronted/src/components/common/myDatePicker/src/panel/time-range.vue
index 7272937b1..8208a781a 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/panel/time-range.vue
+++ b/nezha-fronted/src/components/common/myDatePicker/src/panel/time-range.vue
@@ -41,6 +41,8 @@
         </div>
       </div>
       <div class="el-time-panel__footer">
+        <span class="timezone-area">{{timezone}}</span>
+        <span class="timezone-offset">{{timezoneOffset}}</span>
         <button
           type="button"
           class="el-time-panel__btn cancel"
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/panel/time.vue b/nezha-fronted/src/components/common/myDatePicker/src/panel/time.vue
index cbff80b50..ae68ebcc0 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/panel/time.vue
+++ b/nezha-fronted/src/components/common/myDatePicker/src/panel/time.vue
@@ -16,6 +16,8 @@
         </time-spinner>
       </div>
       <div class="el-time-panel__footer">
+<!--        <span class="timezone-area">{{timezone}}</span>-->
+<!--        <span class="timezone-offset">{{timezoneOffset}}</span>-->
         <button
           type="button"
           class="el-time-panel__btn cancel"
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/picker.vue b/nezha-fronted/src/components/common/myDatePicker/src/picker.vue
index 56fc84eb9..fc1b1f3d9 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/picker.vue
+++ b/nezha-fronted/src/components/common/myDatePicker/src/picker.vue
@@ -91,7 +91,7 @@ import Popper from 'element-ui/src/utils/vue-popper'
 import Emitter from 'element-ui/src/mixins/emitter'
 import ElInput from 'element-ui/packages/input'
 import merge from 'element-ui/src/utils/merge'
-
+import moment from 'moment-timezone'
 const NewPopper = {
   props: {
     appendToBody: Popper.props.appendToBody,
@@ -343,6 +343,10 @@ export default {
   },
 
   props: {
+    timezone: {
+      type: String,
+      default: localStorage.getItem('nz-sys-timezone') // 没有传则使用本地的时区
+    },
     size: String,
     format: String,
     valueFormat: String,
@@ -821,6 +825,12 @@ export default {
     },
 
     mountPicker () {
+      let tempFun = this.panel.data
+      this.panel.data = () => {return {
+        timezone: this.timezone, // add timezone to panel component
+        timezoneOffset: moment.tz(this.timezone).format('Z'),
+        ...tempFun()
+      }}
       this.picker = new Vue(this.panel).$mount()
       this.picker.defaultValue = this.defaultValue
       this.picker.defaultTime = this.defaultTime
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/picker/date-picker.js b/nezha-fronted/src/components/common/myDatePicker/src/picker/date-picker.js
index cf6ad5004..17d40763d 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/picker/date-picker.js
+++ b/nezha-fronted/src/components/common/myDatePicker/src/picker/date-picker.js
@@ -15,7 +15,7 @@ const getPanel = function (type) {
 export default {
   mixins: [Picker],
 
-  name: 'ElDatePicker',
+  name: 'myDatePicker',
 
   props: {
     type: {
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 8a67e37ca..7bfbfafc4 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -1692,7 +1692,6 @@ export default {
               responseType: 'arraybuffer'
             })
             .then(res => {
-              console.log(res.data)
               return ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
             })
             .then(data => {
diff --git a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
index 6b8c4ea7e..f76b95c23 100644
--- a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
@@ -35,7 +35,7 @@
           <div class="datepicker">
             <div class="datepicker-box">
               <span class="datepicker-title">start time</span>
-              <el-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
+              <my-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
                               format="yyyy/MM/dd HH:mm:ss" @change="(val)=>{dateChange(val,'startAt')}" v-model="editAlertSilence.startAt"
                               :picker-options="optionsStartAt"
                               type="datetime"
@@ -44,11 +44,11 @@
                               :placeholder="$t('dashboard.panel.startTime')"
                               align="right"
               >
-              </el-date-picker>
+              </my-date-picker>
             </div>
             <div class="datepicker-box">
               <span class="datepicker-title">end time</span>
-              <el-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
+              <my-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
                               format="yyyy/MM/dd HH:mm:ss" @change="(val)=>{dateChange(val,'endAt')}" v-model="editAlertSilence.endAt"
                               :picker-options="optionsEndAt"
                               type="datetime"
@@ -57,7 +57,7 @@
                               :placeholder="$t('dashboard.panel.startTime')"
                               align="right"
               >
-              </el-date-picker>
+              </my-date-picker>
             </div>
             <!--( :range-separator="")-->
           </div>
diff --git a/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue b/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
index 9715fe2e6..59a2cc0f7 100644
--- a/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
@@ -125,17 +125,17 @@
                     </template>
                     <template v-else>
                       <template v-if="label.interval">
-                        <el-date-picker
+                        <my-date-picker
                           id="asset-box-input-purchase-date"
                           v-model="label.value[0]"
                           :type="JSON.parse(label.param).subType === assetConstants.labelSubTypeData.date ? 'dateRange' : 'datetimerange'"
                           placeholder=""
                           size="small"
                           style="width: 100%">
-                        </el-date-picker>
+                        </my-date-picker>
                       </template>
                       <template v-else>
-                        <el-date-picker
+                        <my-date-picker
                           id="asset-box-input-parchase-date"
                           v-model="label.value[0]"
                           :type="JSON.parse(label.param).subType"
@@ -143,7 +143,7 @@
                           size="small"
                           style="width: 100%"
                           value-format="yyyy-MM-dd">
-                        </el-date-picker>
+                        </my-date-picker>
                       </template>
                     </template>
                   </template>
diff --git a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
index e0c083a0c..6eae779cd 100644
--- a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
@@ -62,7 +62,7 @@
             <el-input v-else v-model="lockLocationInputValue" disabled size="small"></el-input>
           </el-form-item>
           <el-form-item :label="$t('asset.purchaseDate')" prop="purchaseDate">
-            <el-date-picker
+            <my-date-picker
               id="asset-box-input-parchase-date"
               v-model="editAsset.purchaseDate"
               placeholder=""
@@ -70,7 +70,7 @@
               style="width: 100%"
               type="date"
               value-format="yyyy-MM-dd">
-            </el-date-picker>
+            </my-date-picker>
           </el-form-item>
           <!-- labels -->
           <div class="form__sub-title">{{$t('overall.labels')}}</div>
@@ -128,17 +128,17 @@
                   </template>
                   <template v-else>
                     <template v-if="label.interval">
-                      <el-date-picker
+                      <my-date-picker
                         id="asset-box-input-purchase-date"
                         v-model="label.value[0]"
                         :type="JSON.parse(label.param).subType === assetConstants.labelSubTypeData.date ? 'dateRange' : 'datetimerange'"
                         placeholder=""
                         size="small"
                         style="width: 100%">
-                      </el-date-picker>
+                      </my-date-picker>
                     </template>
                     <template v-else>
-                      <el-date-picker
+                      <my-date-picker
                         id="asset-box-input-parchase-date"
                         v-model="label.value[0]"
                         :type="JSON.parse(label.param).subType"
@@ -146,7 +146,7 @@
                         size="small"
                         style="width: 100%"
                         value-format="yyyy-MM-dd">
-                      </el-date-picker>
+                      </my-date-picker>
                     </template>
                   </template>
                 </template>
diff --git a/nezha-fronted/src/components/common/rightBox/assetBox.vue b/nezha-fronted/src/components/common/rightBox/assetBox.vue
index 9696a9f79..8c4a9b348 100644
--- a/nezha-fronted/src/components/common/rightBox/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue
@@ -66,7 +66,7 @@
         </el-form-item>
         <el-form-item :label="$t('asset.purchaseDate')">
           <div class="select-style">
-            <el-date-picker
+            <my-date-picker
               id="asset-box-input-parchase-date"
               size="small"
               v-model="editAsset.purchaseDate"
@@ -74,7 +74,7 @@
               type="date"
               style="width: 100%"
               placeholder="">
-            </el-date-picker>
+            </my-date-picker>
           </div>
         </el-form-item>
         <el-form-item :label="$t('asset.location')" class="required-marker" prop="locationInfo" :rules="[{validator:locationValidator, trigger:'blur'}]">
diff --git a/nezha-fronted/src/components/common/searchInput.vue b/nezha-fronted/src/components/common/searchInput.vue
index 07d584fbf..7c53b8f8c 100644
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -162,7 +162,7 @@
                             </ul>
                           </div>
                         </div>
-                        <el-date-picker
+                        <my-date-picker
                                 v-model="timeFrame"
                                 type="datetimerange"
                                 range-separator="To"
@@ -172,7 +172,7 @@
                                 :class="dataBackG?'':'dataBackG'"
                                 v-if="ind==sreach_num&&val.id==7"
                         >
-                        </el-date-picker>
+                        </my-date-picker>
                     </li>
 <!-- 最开始的input框-->
                     <li class="select_input" v-if="change_sreach_show">
diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index ded9bfd79..28347788e 100644
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -88,13 +88,13 @@
 </style>
 <template>
   <div id="panel-calender" :class="{'calendar--small': size === 'small'}" class="calendar">
-    <el-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="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"
                     popper-class="panel-time-picker-popper"
                     :range-separator="$t('dashboard.panel.to')"
                     :start-placeholder="$t('dashboard.panel.startTime')"
                     :end-placeholder="$t('dashboard.panel.endTime')" align="right">
-    </el-date-picker>
+    </my-date-picker>
     <!--
     <button type="button" style="border-radius: 1px 1px 1px 1px" @click="right()" v-show="isCustom"
             class="nz-btn nz-btn-size-normal nz-btn-style-light time-picker-button time-picker-right-button" >
@@ -335,6 +335,8 @@ export default {
           } else {
             this.isCustom = true
             this.$refs.calendar.focus()
+            this.$refs.calendar.pickerVisible = true
+            console.log(this.$refs.calendar)
           }
         } else {
           this.isCustom = false
diff --git a/nezha-fronted/src/components/page/asset/components/assetTagEx.vue b/nezha-fronted/src/components/page/asset/components/assetTagEx.vue
index a9fef8da8..879a7969a 100644
--- a/nezha-fronted/src/components/page/asset/components/assetTagEx.vue
+++ b/nezha-fronted/src/components/page/asset/components/assetTagEx.vue
@@ -46,7 +46,7 @@
     </div>
     <div v-else-if="type==='datetime'">
       <div v-if="param.subType==='date'">
-        <el-date-picker
+        <my-date-picker
           size="small"
           :type="param.interval?'daterange':'date'"
           :range-separator="$t('dashboard.panel.to')"
@@ -54,7 +54,7 @@
           :start-placeholder="$t('dashboard.panel.startTime')"
           :end-placeholder="$t('dashboard.panel.endTime')"
         >
-        </el-date-picker>
+        </my-date-picker>
       </div>
       <div v-if="param.subType==='time'">
         <el-time-picker
@@ -68,14 +68,14 @@
         </el-time-picker>
       </div>
       <div v-if="param.subType==='datetime'">
-        <el-date-picker
+        <my-date-picker
           size="small"
           :type="param.interval?'datetimerange':'datetime'"
           :range-separator="$t('dashboard.panel.to')"
           :placeholder="$t('alert.silence.selectTime')"
           :start-placeholder="$t('dashboard.panel.startTime')"
           :end-placeholder="$t('dashboard.panel.endTime')">
-        </el-date-picker>
+        </my-date-picker>
       </div>
     </div>
     <div v-else-if="type==='email'" :class="emailError?'emailError':''">
diff --git a/nezha-fronted/src/components/page/config/system/apiKeyTable.vue b/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
index d33dad418..872ec2ebc 100644
--- a/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
+++ b/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
@@ -50,7 +50,7 @@
             </template>
             <template v-if="item.prop == 'expireAt'">
 <!--              <el-popover :content="rules.expireAt.message" placement="top" trigger="manual" v-model="rules.expireAt.switch" popper-class="small-pop warn-pop" @after-enter="popShow(rules.expireAt)">-->
-                <el-date-picker
+                <my-date-picker
                   slot="reference"
                   style="width: 100%;"
                   v-model="scope.row[item.prop]"
@@ -60,7 +60,7 @@
                   type="datetime"
                   :picker-options="pickerOptions"
                   :placeholder="$t('el.datepicker.selectTime')">
-                </el-date-picker>
+                </my-date-picker>
 <!--              </el-popover>-->
             </template>
           </template>
diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.vue b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
index 358e978a6..4f4b8e175 100644
--- a/nezha-fronted/src/components/page/dashboard/metricPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
@@ -17,7 +17,7 @@
 
           <!--<div class="top-tools">
               <div class="float-right mr-10">
-                <el-date-picker size="mini" ref="calendar"
+                <my-date-picker size="mini" ref="calendar"
                                 format="yyyy/MM/dd HH:mm"
                                 @change="dateChange"
                                 v-model="searchTime"
@@ -27,7 +27,7 @@
                                 :start-placeholder="$t('dashboard.panel.startTime')"
                                 :end-placeholder="$t('dashboard.panel.endTime')"
                                 align="right">
-                </el-date-picker>
+                </my-date-picker>
               </div>
             </div>-->
             <div class="table-list" >
@@ -38,7 +38,7 @@
                   </el-col>
                   <el-col :span="0.5" ><div>&nbsp;</div></el-col>
                   <el-col :span="13" class="chart-preview-area" >
-                    <el-date-picker size="mini" ref="calendar"
+                    <my-date-picker size="mini" ref="calendar"
                                     format="yyyy/MM/dd HH:mm"
                                     @change="dateChange"
                                     v-model="searchTime"
@@ -49,7 +49,7 @@
                                     :end-placeholder="$t('dashboard.panel.endTime')"
                                     style="position:absolute; right: 10px"
                                     align="right">
-                    </el-date-picker>
+                    </my-date-picker>
                     <el-row class="border-area" v-show="chartCount === 'single'" style="margin-top: 40px;">
                       <div class="chartBox">
                         <line-chart-block
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 2865f053b..3c4b281e9 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -57,7 +57,7 @@
                 </template>
                 <template v-slot:after>
                   <el-dropdown-item v-has="'panel_chart_add'">
-                    <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-download1"></i>Add template</div>
+                    <div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-download1"></i>Add by template</div>
                   </el-dropdown-item>
                 </template>
               </top-tool-more-options>
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index b331092d9..59a157162 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -31,15 +31,16 @@ import loading from '@/components/common/loading'
 import pickTime from '@/components/common/pickTime'
 import bus from '@/libs/bus'
 import theme from '@/assets/css/theme.scss'
-
+import myDatePicker from '@/components/common/myDatePicker'
 import vSelectPage from 'v-selectpage'
 Vue.use(vSelectPage)
-
+Vue.use(myDatePicker)
 Vue.component('Pagination', Pagination)
 Vue.component('searchInput', searchInput)
 Vue.component('element-set', elementSet)
 Vue.component('loading', loading)
 Vue.component('pick-time', pickTime)
+Vue.component('myDatePicker', myDatePicker)
 
 Vue.prototype.$axios = axios
 Vue.prototype.$post = post
diff --git a/nezha-fronted/src/store/user.js b/nezha-fronted/src/store/user.js
index 3e03307d9..36ad10d7d 100644
--- a/nezha-fronted/src/store/user.js
+++ b/nezha-fronted/src/store/user.js
@@ -2,6 +2,7 @@ import { post } from '../http'
 import router from '../router'
 import bus from '../libs/bus'
 import { sortByOrderNum } from '../permission'
+import moment from 'moment-timezone'
 
 const user = {
   state: {
@@ -44,6 +45,7 @@ const user = {
         localStorage.setItem('nz-sys-logo', res.data.systemLogo)
       }
       localStorage.setItem('nz-sys-timezone', res.data.timezone)
+      localStorage.setItem('timezoneOffset', moment.tz(res.data.timezone).format('Z'))
       localStorage.setItem('nz-sys-default-cabinet-usize', res.data.defaultCabinetUsize)
       localStorage.setItem('nz-sys-max-terminal-num', res.data.maxTerminalNum)
       localStorage.setItem('nz-sys-asset-ping-switch', res.data.assetPingSwitch)