diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
index 9bf0923ee..3bd9b005d 100644
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
@@ -46,7 +46,7 @@
     }
   }
   &>.bottom-panel{
-    padding: 15px 10px 10px 10px !important;
+    padding: 15px 10px 0px 10px !important;
   }
 }
 .sub-top-tools .top-tool-btn-txt .nz-icon{
diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss
index 6931f0ade..f2cb1c743 100644
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss
+++ b/nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss
@@ -92,7 +92,7 @@
     color: #60BEFF;
     font-size: 13px
   }
-  
+
   .panel-dropdown-btn:hover {
     color: #409EFF;
   }
@@ -150,6 +150,15 @@
     button:hover {
       background: $--background-color-empty;
     }
+    .footer__btn {
+      background-color: $--color-primary;
+      border: none;
+    }
+    .footer__btn.footer__btn--light {
+      background-color: $--button-light-hover-background-color;
+      border: 1px solid $--button-light-border-color;
+      color: $--button-light-color;
+    }
   }
   .date-range-panel{
     .el-button--primary{
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index 65356f65d..e73d1c9c9 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -174,31 +174,31 @@ export default {
         },
         asset: {
           panel: [
-            { prop: 'panelTab', name: this.$t('overall.detail'), active: true },
+            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: true },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
             { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
             { prop: 'log', name: this.$t('overall.logs'), active: false }
           ],
           alertMessage: [
-            { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
+            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true },
             { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
             { prop: 'log', name: this.$t('overall.logs'), active: false }
           ],
           endpoint: [
-            { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
+            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
             { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: true },
             { prop: 'log', name: this.$t('overall.logs'), active: false }
           ],
           log: [
-            { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
+            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
             { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
             { prop: 'log', name: this.$t('overall.logs'), active: true }
           ],
           alertMessageSub: [
-            { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
+            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
             { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
             { prop: 'log', name: this.$t('overall.logs'), active: false },
@@ -214,7 +214,7 @@ export default {
         },
         endpoint: {
           endpointTabTitle: [
-            { prop: 'panelTab', name: this.$t('overall.detail') },
+            { prop: 'panelTab', name: this.$t('overall.dashboard') },
             { prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
             { prop: 'Metrics', name: this.$t('overall.metric') },
             { prop: 'log', name: this.$t('overall.logs') }
@@ -272,7 +272,7 @@ export default {
       const config = this.obj.configs.find(c => c.type === 'logs')
       const hasLog = config && config.enable === 1
       const tabs = [
-        { prop: 'panelTab', name: this.$t('overall.detail') },
+        { prop: 'panelTab', name: this.$t('overall.dashboard') },
         { prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
         { prop: 'Metrics', name: this.$t('overall.metric') }
       ]
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
index fed317e37..0640c1d27 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -99,6 +99,7 @@
       <div id="tableList" class="table-list" style="padding-top: 0;overflow: hidden">
         <div id="dashboardScrollbar" class="table-list-box">
           <div class="box-content"  ref="dashboardScrollbar" v-my-loading="chartListLoading" style="overflow-y: auto;display: flex;flex-direction: column">
+            <panel-variables :labelArrs="variables" :time-range="searchTime" @getPanelData="getPanelData"></panel-variables>
             <chart-list
               ref="chartList"
               name="panel"
@@ -113,6 +114,7 @@
               @on-remove-chart="delChart"
               @on-add-group-item-chart="addGroupItem"
               @refreshPanel="refreshPanel"
+              :variablesInit="variablesInit"
               :loading="chartListLoading"
               :chart-detail-info="chartDetailInfo"
             ></chart-list>
@@ -158,6 +160,7 @@ import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
 import exportHtmlMixin from '@/components/common/mixin/exportHtml'
+import panelVariables from "@/components/common/panel/panelVariables";
 export default {
   name: 'panelTabNew',
   mixins: [subDataListMixin, detailViewRightMixin, htmlToPdfMixin, exportHtmlMixin],
@@ -275,7 +278,9 @@ export default {
       panelDataList: [],
       batchDeleteObjs: [],
       nowTimeType: {},
-      chartDetailInfo: {}
+      chartDetailInfo: {},
+      variables: [],
+      variablesInit: false
     }
   },
   components: {
@@ -283,7 +288,8 @@ export default {
     chartList,
     nzBottomDataList,
     topToolMoreOptions,
-    chartTempBox
+    chartTempBox,
+    panelVariables // 处理panel变量的组件
   },
   methods: {
     // 刷新
@@ -544,10 +550,13 @@ export default {
     },
     // 公用操作
     getTableData (linkId) {
+      this.variablesInit = false
       if (this.from === this.fromRoute.alertRule) {
+        this.variablesInit = true
         this.getData(this.filter)
       } else {
         if (this.from === this.fromRoute.chartTemp) {
+          this.variablesInit = true
           if (this.obj.type === 'group') {
             this.$get('/visual/panel/chart', { ids: this.obj.id }).then(res => {
               this.panelDataList = res.data.list
@@ -564,11 +573,13 @@ export default {
             this.getData(this.filter)
           }
         } else {
-          this.$get('visual/panel', { type: this.from, link: linkId }).then(response => {
+          this.$get('visual/panel', { type: this.from, link: linkId || this.obj.id }).then(response => {
+            console.log(response)
             if (response.code === 200) {
               this.panelData = response.data.list
               if (this.panelData.length > 0) {
                 this.showPanel.id = this.filter.panelId = this.panelData[0].id
+                this.variables = this.$loadsh.get(this.panelData, '[0].param.variables')
                 this.getData(this.filter)
               }
             } else {
@@ -787,6 +798,10 @@ export default {
       } else {
         this.exportToHtml(this.obj.name)
       }
+    },
+    getPanelData () {
+      this.variablesInit = true
+      this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
     }
   },
   mounted () {
diff --git a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
index 9f2819844..da3478d44 100644
--- a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
+++ b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
@@ -1,133 +1,145 @@
 <template>
-  <el-dropdown trigger="click" :size="size">
-    <button id="more" :class="triggerButtonClass" :title="$t('overall.more')">
-      <i class="nz-icon nz-icon-more2"></i>
-    </button>
-    <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
-      <el-dropdown-item  v-if="showLock">
-        <div @click="panelLock=!panelLock" id="panel-lock"><i :class="{'nz-icon nz-icon-lock':!panelLock,'nz-icon nz-icon-unlock':panelLock}"></i>{{!panelLock ? $t("overall.locked") : $t("overall.unlocked")}}</div>
-      </el-dropdown-item>
-      <!-- import、export之前的内容 -->
-      <slot name="before"></slot>
-      <el-dropdown-item v-has="permissions.import" v-if="importUrl">
-        <div id="chart-import" @click="showImportBox(1)"><i class="nz-icon nz-icon-upload"></i>{{$t('overall.importExcel')}}</div>
-      </el-dropdown-item>
-      <el-dropdown-item v-has="permissions.export" v-if="exportUrl">
-        <div id="chart-export" @click="showImportBox(2)"><i class="nz-icon nz-icon-download1"></i>{{$t('overall.exportExcel')}}</div>
-      </el-dropdown-item>
-      <!-- import、export之后的内容 -->
-      <slot name="after"></slot>
-    </el-dropdown-menu>
+  <div>
+    <el-dropdown trigger="click" :size="size">
+      <button id="more" :class="triggerButtonClass" :title="$t('overall.more')">
+        <i class="nz-icon nz-icon-more2"></i>
+      </button>
+      <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
+        <el-dropdown-item  v-if="showLock">
+          <div @click="editPanel" id="edit-bottom-panel"><i class="nz-icon nz-icon-edit"></i>{{$t('overall.edit')}}</div>
+        </el-dropdown-item>
+        <el-dropdown-item  v-if="showLock">
+          <div @click="panelLock=!panelLock" id="panel-lock"><i :class="{'nz-icon nz-icon-lock':!panelLock,'nz-icon nz-icon-unlock':panelLock}"></i>{{!panelLock ? $t("overall.locked") : $t("overall.unlocked")}}</div>
+        </el-dropdown-item>
+        <!-- import、export之前的内容 -->
+        <slot name="before"></slot>
+        <el-dropdown-item v-has="permissions.import" v-if="importUrl">
+          <div id="chart-import" @click="showImportBox(1)"><i class="nz-icon nz-icon-upload"></i>{{$t('overall.importExcel')}}</div>
+        </el-dropdown-item>
+        <el-dropdown-item v-has="permissions.export" v-if="exportUrl">
+          <div id="chart-export" @click="showImportBox(2)"><i class="nz-icon nz-icon-download1"></i>{{$t('overall.exportExcel')}}</div>
+        </el-dropdown-item>
+        <!-- import、export之后的内容 -->
+        <slot name="after"></slot>
+      </el-dropdown-menu>
 
-    <el-dialog :close-on-click-modal="importBox.type!=3" destroy-on-close :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
-      <div v-if="importBox.type == 1">
-        <div class="upload-body">
-          <el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false"  :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls"  action="" class="upload-demo" drag>
-            <div slot="tip" class="el-upload__tip" >{{$t('overall.importTip')}}</div>
-            <i class="nz-icon nz-icon-upload"></i>
-            <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
-          </el-upload>
-        </div>
-        <div slot="footer" class="footer">
-          <div class="el-message-box__btns" style="text-align: right;">
-            <button :id="id+'-xlsx-import-template'" class="el-button el-button--default el-button--small" @click="downloadTemplate">
-              <span>{{$t('overall.template')}}</span>
-            </button>
-            <button  :id="id+'-xlsx-import-add'" :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button el-button--default el-button--small" @click="importExcel">
-              <span>{{$t('overall.importExcel')}}</span>
-            </button>
-            <button :id="id+'-xlsx-import-esc'" class="el-button el-button--default el-button--small" @click="closeDialog">
-              <span>{{$t('overall.cancel')}}</span>
-            </button>
+      <el-dialog :close-on-click-modal="importBox.type!=3" destroy-on-close :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
+        <div v-if="importBox.type == 1">
+          <div class="upload-body">
+            <el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false"  :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls"  action="" class="upload-demo" drag>
+              <div slot="tip" class="el-upload__tip" >{{$t('overall.importTip')}}</div>
+              <i class="nz-icon nz-icon-upload"></i>
+              <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
+            </el-upload>
           </div>
-        </div>
-      </div>
-      <div v-if="importBox.type == 2">
-        <div class="upload-body" style="height: 200px">
-          <div class="export-box">
-            <span class="export-title">Records</span>
-            <el-radio-group v-model="importBox.record"  size="small">
-              <el-radio-button :label="item.value" v-for="(item,index) in recordArr" :key="index" :disabled="item.value==='records'&&!deleteObjs.length">{{item.name}}</el-radio-button>
-            </el-radio-group>
-          </div>
-          <div class="export-box">
-            <span class="export-title">File format</span>
-            <el-radio-group v-model="importBox.format"  size="small">
-              <el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index">{{item.name}}</el-radio-button>
-            </el-radio-group>
-          </div>
-        </div>
-        <div slot="footer" class="footer">
-          <div class="el-message-box__btns">
-            <button :id="id+'-xlsx-import-export'"  class="nz-btn nz-btn-size-normal nz-btn-style-normal-new" @click="exportData">
-              <span style="text-transform:Capitalize">{{$t('overall.exportExcel')}}</span>
-            </button>
-            <button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
-              <span>{{$t('overall.close')}}</span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div v-if="importBox.type==3">
-        <div class="upload-body result-body">
-          <div v-if="importResult&&importResult.failNum">
-            <div class="result-title-top">
-              <div class="">
-                <i class="nz-icon nz-icon-import-success"/>
-                 <span>{{$t('overall.result.successNum',{successNum:importResult.successNum})}}</span><br/>
-              </div>
-              <div class="">
-                 <i class="nz-icon nz-icon-import-failed"/>
-                 <span>{{$t('overall.result.failedNum',{failedNum:importResult.failNum,total:importResult.totalNum})}}</span>
-              </div>
+          <div slot="footer" class="footer">
+            <div class="el-message-box__btns" style="text-align: right;">
+              <button :id="id+'-xlsx-import-template'" class="el-button el-button--default el-button--small" @click="downloadTemplate">
+                <span>{{$t('overall.template')}}</span>
+              </button>
+              <button  :id="id+'-xlsx-import-add'" :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button el-button--default el-button--small" @click="importExcel">
+                <span>{{$t('overall.importExcel')}}</span>
+              </button>
+              <button :id="id+'-xlsx-import-esc'" class="el-button el-button--default el-button--small" @click="closeDialog">
+                <span>{{$t('overall.cancel')}}</span>
+              </button>
             </div>
-            <div>
-              <div v-if="importResult&&importResult.failDetail" class="result-detail">
-                <div style="height: 100%; overflow: auto">
-                  <template v-for="(item, index) in importResult.failDetail">
-                    <div :key="index" class="import-result-block">
-                      <div class="import-result-item">
-                        <div class="line-num">{{$t('overall.result.line',[item.lineNo])}}</div>
-                        <div class="line-content" :title="item.errorMsg">{{item.errorMsg}}</div>
+          </div>
+        </div>
+        <div v-if="importBox.type == 2">
+          <div class="upload-body" style="height: 200px">
+            <div class="export-box">
+              <span class="export-title">Records</span>
+              <el-radio-group v-model="importBox.record"  size="small">
+                <el-radio-button :label="item.value" v-for="(item,index) in recordArr" :key="index" :disabled="item.value==='records'&&!deleteObjs.length">{{item.name}}</el-radio-button>
+              </el-radio-group>
+            </div>
+            <div class="export-box">
+              <span class="export-title">File format</span>
+              <el-radio-group v-model="importBox.format"  size="small">
+                <el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index">{{item.name}}</el-radio-button>
+              </el-radio-group>
+            </div>
+          </div>
+          <div slot="footer" class="footer">
+            <div class="el-message-box__btns">
+              <button :id="id+'-xlsx-import-export'"  class="nz-btn nz-btn-size-normal nz-btn-style-normal-new" @click="exportData">
+                <span style="text-transform:Capitalize">{{$t('overall.exportExcel')}}</span>
+              </button>
+              <button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
+                <span>{{$t('overall.close')}}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div v-if="importBox.type==3">
+          <div class="upload-body result-body">
+            <div v-if="importResult&&importResult.failNum">
+              <div class="result-title-top">
+                <div class="">
+                  <i class="nz-icon nz-icon-import-success"/>
+                  <span>{{$t('overall.result.successNum',{successNum:importResult.successNum})}}</span><br/>
+                </div>
+                <div class="">
+                  <i class="nz-icon nz-icon-import-failed"/>
+                  <span>{{$t('overall.result.failedNum',{failedNum:importResult.failNum,total:importResult.totalNum})}}</span>
+                </div>
+              </div>
+              <div>
+                <div v-if="importResult&&importResult.failDetail" class="result-detail">
+                  <div style="height: 100%; overflow: auto">
+                    <template v-for="(item, index) in importResult.failDetail">
+                      <div :key="index" class="import-result-block">
+                        <div class="import-result-item">
+                          <div class="line-num">{{$t('overall.result.line',[item.lineNo])}}</div>
+                          <div class="line-content" :title="item.errorMsg">{{item.errorMsg}}</div>
+                        </div>
                       </div>
-                    </div>
-                  </template>
+                    </template>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div v-else class="result-success-box">
-            <div>
-              <i class="nz-icon nz-icon-import-success"/>
+            <div v-else class="result-success-box">
+              <div>
+                <i class="nz-icon nz-icon-import-success"/>
+              </div>
+              <div class="result-success-txt">{{$t('overall.result.successfully')}}</div>
+              <div class="result-success-txt">
+                {{$t('overall.result.imported')}}
+                <span style="color: #333333" v-if="importResult">{{importResult.successNum}}</span>
+                {{$t('overall.result.records')}}
+              </div>
             </div>
-            <div class="result-success-txt">{{$t('overall.result.successfully')}}</div>
-            <div class="result-success-txt">
-              {{$t('overall.result.imported')}}
-              <span style="color: #333333" v-if="importResult">{{importResult.successNum}}</span>
-              {{$t('overall.result.records')}}
+          </div>
+          <div slot="footer" class="footer">
+            <div class="el-message-box__btns">
+              <button :id="id+'-xlsx-import-rollback'"  class="nz-btn nz-btn-size-normal nz-btn-style-error" @click="rollbackImport">
+                <span>{{$t('overall.rollbackImport')}}</span>
+              </button>
+              <button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
+                <span>{{$t('overall.close')}}</span>
+              </button>
             </div>
           </div>
         </div>
-        <div slot="footer" class="footer">
-          <div class="el-message-box__btns">
-            <button :id="id+'-xlsx-import-rollback'"  class="nz-btn nz-btn-size-normal nz-btn-style-error" @click="rollbackImport">
-              <span>{{$t('overall.rollbackImport')}}</span>
-            </button>
-            <button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
-              <span>{{$t('overall.close')}}</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </el-dialog>
-  </el-dropdown>
+      </el-dialog>
+    </el-dropdown>
+    <transition name="right-box">
+      <panel-box v-if="rightBox.panel.show" ref="panelBox" :obj="panel" @close="closePanelBox" :isBottom="true" :panelType="params.from"></panel-box>
+    </transition>
+  </div>
 </template>
 
 <script>
 import axios from 'axios'
+import panelBox from '@/components/common/rightBox/panelBox'
 let timeout
 export default {
   name: 'topToolMoreOptions',
+  components: {
+    panelBox
+  },
   props: {
     size: {
       type: String,
@@ -179,7 +191,12 @@ export default {
         { name: 'CSV', value: 2 },
         { name: 'JSON', value: 3 }
       ],
-      suffix: '.xlsx'
+      suffix: '.xlsx',
+      panel: {},
+      rightBox: { // 面板弹出框相关
+        panel: { show: false },
+        loading: false
+      }
     }
   },
   mounted () {
@@ -528,7 +545,57 @@ export default {
     },
     formatNum (num) {
       return num > 9 ? num : '0' + num
-    }
+    },
+    editPanel () {
+      this.$get('visual/panel/' + this.params.panelId).then(res => {
+        if (res.code === 200) {
+          this.panel = res.data
+          if (!this.$loadsh.get(this.panel, 'param.report', '')) {
+            this.panel = {
+              ...this.panel,
+              param: {
+                report: {
+                  enable: false,
+                  range: {
+                    unit: 'day'
+                  },
+                  schedule: {
+                    type: '2',
+                    repeat: 1,
+                    nums: [],
+                    stime: '',
+                    etime: ''
+                  },
+                  receivers: []
+                },
+                chartShare: 'none'
+              }
+            }
+          }
+          this.panel.param.report.schedule.type = this.panel.param.report.schedule.type + ''
+          const startTime = this.$loadsh.get(this.panel, 'param.report.schedule.stime', '')
+          if (startTime !== '') {
+            this.panel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.stime, 'YYYY-MM-DD HH:mm:ss')
+          } else {
+            this.panel.param.report.schedule.stime = ''
+          }
+          const endTime = this.$loadsh.get(this.panel, 'param.report.schedule.etime', '')
+          if (endTime !== '') {
+            this.panel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.etime, 'YYYY-MM-DD HH:mm:ss')
+          } else {
+            this.panel.param.report.schedule.etime = ''
+          }
+          this.rightBox.panel.show = true
+        }
+      })
+      // this.panel = Object.assign({}, u)panelType
+    },
+    closePanelBox (refresh) {
+      this.rightBox.panel.show = false
+      if (refresh) {
+        this.$emit('afterImport')
+      }
+    },
   },
   watch: {
     panelLock: {
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index 4b1f19acd..218dcc1e7 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -12,7 +12,7 @@
       <div class="container__form">
         <el-form ref="form" :model="editPanel" :rules="rules" label-position = "top" label-width="120px" size="small">
           <el-form-item :label='$t("overall.name")' prop="name">
-            <el-input id="dc-box-input-name" v-model="editPanel.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
+            <el-input id="dc-box-input-name" v-model="editPanel.name" maxlength="64" placeholder="" show-word-limit size="small" :disabled="isBottom"></el-input>
           </el-form-item>
           <!--remark-->
            <el-form-item :label='$t("overall.remark")' class="range-time" prop="remark">
@@ -317,6 +317,14 @@ export default {
   props: {
     obj: {
       type: Object
+    },
+    isBottom: {
+      type: Boolean,
+      default: false
+    },
+    panelType: {
+      type: String,
+      default: 'dashboard'
     }
   },
   mixins: [editRigthBox],
@@ -506,7 +514,7 @@ export default {
         ...this.editPanel,
         id: this.editPanel.id ? this.editPanel.id : '',
         name: this.editPanel.name,
-        type: 'dashboard',
+        type: this.panelType,
         remark: this.editPanel.remark,
         param: {
           report: {
@@ -612,12 +620,7 @@ export default {
         this.editPanel = JSON.parse(JSON.stringify(n))
         // 如果是空数组 则添加一条变量数据
         if (!this.editPanel.param.variables || !this.editPanel.param.variables.length) {
-          const temp = [{
-            show: true,
-            type: 'query',
-            multi: false,
-            allOption: false
-          }]
+          const temp = []
           this.$set(this.editPanel.param, 'variables', temp)
         }
       }