diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index a3de12421..6ea3c0064 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1281,11 +1281,11 @@ li{
 }
 .right-box-form>.el-form-item.half-form-item{
   display: inline-block;
-  width: 395px;
+  width: calc(50% - 15px);
 }
 .right-box-form>.el-form-item.half-form-item:nth-child(odd){
   display: inline-block;
-  width: 395px;
+  width: calc(50% - 15px);
   margin-left: 10px;
 }
 .right-box-form .one-third-form-item-left{
@@ -2171,11 +2171,11 @@ li{
 }
 .right-box-form>.el-form-item.half-form-item-other{
   display: inline-block;
-  width: 345px;
+  width: calc(50% - 15px);
 }
 .right-box-form>.el-form-item.half-form-item-other-two{
   display: inline-block;
-  width: 455px;
+  width: calc(50% - 15px);
   margin-left: 0;
 }
 .right-box .right-box-form-add,.right-box  .right-box-form-minus-box{
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index ae29f4986..bb54084f0 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -589,7 +589,7 @@ const cn = {
       sn: 'SN',
       name: 'Name',
       manageIp: 'manageIp',
-      brand: '品牌ID',
+      brand: '品牌',
       dc: '数据中心',
       type: '主机地址',
       state: '主机状态',
@@ -1088,6 +1088,9 @@ const cn = {
       edit: '修改表达式模板',
       create: '创建表达式模板',
       expressionError: '请填写表达式'
+    },
+    chartTemp: {
+      chartTemp: 'Chart 模板',
     }
   },
   alert: {
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 866396825..84461dc10 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -644,10 +644,10 @@ const en = {
       sn: 'SN',
       name: 'Name',
       manageIp: 'manageIp',
-      brand: 'BrandID',
+      brand: 'Brand',
       dc: 'DataCenter',
-      type: 'typeIds',
-      state: 'state',
+      type: 'Types',
+      state: 'State',
       endpoint: 'Endpoint'
     },
     tagTableTitle: {
@@ -1103,6 +1103,9 @@ const en = {
       edit: 'Edit expression template',
       create: 'New expression template',
       expressionError: 'Please fill in the "expression" value'
+    },
+    chartTemp: {
+      chartTemp: 'Chart template',
     }
   },
   alert: {
diff --git a/nezha-fronted/src/components/common/mixin/dataList.js b/nezha-fronted/src/components/common/mixin/dataList.js
index 473469052..87fa92029 100644
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/nezha-fronted/src/components/common/mixin/dataList.js
@@ -212,6 +212,7 @@ export default {
     if (pageSize && pageSize !== 'undefined') {
       this.pageObj.pageSize = pageSize
     }
+    console.log(this.$refs.dataTable)
     this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId)
       ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId))
       : this.$refs.dataTable.tableTitle
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index a8dc7491f..fd974ef6c 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -143,58 +143,26 @@
                 label-class-name="endpoints-box-endpoints-title"
                 v-for="(title, index) in endpointTableTitle"
                 v-if="title.show"
-                :width="title.width"
+                :min-width="title.width"
                 :key="index"
                 :label="title.label"
+                :resizable="true"
               >
                 <template slot-scope="scope" :column="title">
                   <span v-if="title.prop == 'asset'">{{scope.row.assetName}}</span>
-                  <span v-else-if="title.prop == 'params'">
-                      <el-popover
-                        placement="bottom"
-                        width="200"
-                        trigger="hover"
-                      >
-                        <div class="endpoint-param-pop">
-                          <div v-for="p in scope.row.paramObj" :key="p">{{p.key}}={{p.value}}</div>
-                        </div>
-                        <span slot="reference">
-                          <span @mousedown.stop>{{scope.row.configs.params.length > 8 ? scope.row.configs.params.substring(0, 8) + '...' : scope.row.configs.params}}</span>
-                        </span>
-                      </el-popover>
+                  <span v-else-if="title.prop == 'name'">
+                      {{scope.row.name}}
                     </span>
-                  <span v-else-if="title.prop == 'labels'">
-                      <el-popover
-                        placement="bottom"
-                        width="200"
-                        trigger="hover"
-                      >
-                        <div class="endpoint-param-pop">
-                          <div v-for="p in scope.row.labelModule" :key="p">{{p.key}}={{p.value}}</div>
-                        </div>
-                        <span slot="reference">
-                          <span @mousedown.stop>{{scope.row.configs.labels.length > 8 ? scope.row.configs.labels.substring(0, 8) + '...' : scope.row.configs.labels}}</span>
-                        </span>
-                      </el-popover>
-                    </span>
-                  <span v-else-if="title.prop == 'path'">
-                      <el-popover
-                        placement="bottom"
-                        width="100"
-                        trigger="hover"
-                        :content="scope.row.configs[title.prop]"
-                      >
-                        <span slot="reference" >
-                          <span>{{scope.row.configs.metrics_path.length > 5 ? scope.row.configs.metrics_path.substring(0, 5) + '...' : scope.row.configs.metrics_path}}</span>
-                        </span>
-                      </el-popover>
-                    </span>
-                  <span v-else-if="title.prop == 'port'">
-                      <span >{{scope.row.configs.port}}</span>
-                  </span>
-                  <span v-else-if="title.prop == 'host'">
-                      <span>{{scope.row.configs.host}}</span>
-                  </span>
+                  <template v-else-if="title.prop === 'configs'">
+                    <el-tooltip placement="right" effect="light" :popper-class="'endpointConfigsTips'">
+                      <span class="configs-endpoint">{ ... }</span>
+                      <div class="endpointConfigsTips" slot="content">
+<!--                        <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row[title.prop])"></i></span>-->
+                        <pre >{{JSON.stringify(scope.row[title.prop],null,2)}}</pre>
+<!--                        <pre>{{}}</pre>-->
+                      </div>
+                    </el-tooltip>
+                  </template>
                 </template>
               </el-table-column>
               <el-table-column label="" width="56"  fixed="right">
@@ -321,40 +289,33 @@ export default {
       endpointList: [],
       endpointTableTitle: [
         {
-          label: this.$t('project.endpoint.asset'),
-          prop: 'asset',
+          label: this.$t('project.endpoint.name'),
+          prop: 'name',
           width: 150,
           show: true
         }, {
-          label: this.$t('project.endpoint.host'),
-          prop: 'host',
+          label: this.$t('project.endpoint.asset'),
+          prop: 'asset',
           width: 80,
           show: true
         }, {
-          label: this.$t('project.endpoint.port'),
-          prop: 'port',
-          width: 54,
-          show: true
-        }, {
-          label: this.$t('project.endpoint.labels'),
-          prop: 'labels',
-          width: 90,
-          show: true
-        }, {
-          label: this.$t('project.endpoint.param'),
-          prop: 'params',
-          width: 100,
-          show: true
-        }, {
-          label: this.$t('project.endpoint.path'),
-          prop: 'path',
-          width: 66,
+          label: this.$t('project.endpoint.configs'),
+          prop: 'configs',
+          width: 80,
           show: true
         }
+
       ],
       assetListAll: false,
       assetListHalf: false,
       assetTableTitle: [
+        {
+          label: this.$t('asset.tableTitle.name'),
+          prop: 'name',
+          show: false,
+          allowed: true,
+          minWidth: '200'
+        },
         {
           label: this.$t('asset.tableTitle.sn'),
           prop: 'sn',
@@ -362,12 +323,6 @@ export default {
           minWidth: '200'
         },
         {
-          label: this.$t('asset.tableTitle.name'),
-          prop: 'name',
-          show: false,
-          allowed: true,
-          minWidth: '200'
-        }, {
           label: this.$t('asset.tableTitle.manageIp'),
           prop: 'manageIp',
           show: true,
@@ -667,31 +622,40 @@ export default {
         }
         obj.name = this.currentModuleCopy.endpointNameTmpl
         obj.configs = JSON.stringify(obj.configs)
-        obj.labelModule = []
-        if (obj.configs.labels !== '{}' && obj.configs.labels) {
-          Object.keys(obj.configs.labels).forEach(key => {
-            obj.labelModule.push({ key, value: obj.configs.labels[key] })
-          })
-        } else {
-          obj.labelModule.push({ key: '', value: '' })
-        }
-        obj.paramObj = []
-        if (obj.configs.params !== '{}' && obj.configs.params) {
-          Object.keys(obj.configs.params).forEach(key => {
-            obj.paramObj.push({ key, value: obj.configs.params[key] })
-          })
-        } else {
-          obj.paramObj.push({ key: '', value: [] })
-        }
-        // this.endpointTableData.push({ ...obj })
-        obj.configs = JSON.stringify(obj.configs)
         arr.push(obj)
       })
       this.$put('monitor/endpoint/render', arr).then(res => {
         console.log(res)
+        if (res.code === 200) {
+          res.data.list.forEach((item, index) => {
+            const obj = item
+            obj.configs = JSON.parse(obj.configs)
+            obj.labelModule = []
+            if (obj.configs.labels !== '{}' && obj.configs.labels) {
+              Object.keys(obj.configs.labels).forEach(key => {
+                obj.labelModule.push({ key, value: obj.configs.labels[key] })
+              })
+            } else {
+              obj.labelModule.push({ key: '', value: '' })
+            }
+            obj.paramObj = []
+            if (obj.configs.params !== '{}' && obj.configs.params) {
+              Object.keys(obj.configs.params).forEach(key => {
+                obj.paramObj.push({ key, value: obj.configs.params[key] })
+              })
+            } else {
+              obj.paramObj.push({ key: '', value: [] })
+            }
+            this.endpointTableData.push({
+              ...arr[index],
+              ...obj
+            })
+          })
+          console.log(this.endpointTableData)
+        }
       })
-      // this.assetTableData = [...this.assetTableData]
-      // this.$refs.multipleTable.clearSelection()
+      this.assetTableData = [...this.assetTableData]
+      this.$refs.multipleTable.clearSelection()
     },
     removeEndpoint () {
       if (this.endpointSelection.length === 0) {
diff --git a/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue b/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
index c085b8751..a090996d9 100644
--- a/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
@@ -33,7 +33,8 @@
         <div class="col-resize-area"></div>
       </template>
       <template slot-scope="scope" :column="item">
-        <span v-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
+        <span v-if="item.prop==='varType'">{{scope.row[item.prop]===1?'Asset':'endpoint'}}</span>
+        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
         <template v-else>-</template>
       </template>
     </el-table-column>
@@ -43,7 +44,7 @@
       fixed="right">
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
-        <button class="table-operation-item" title="Copy" @click="tableOperation('copy', scope.row)"><i class="nz-icon nz-icon-override"></i></button>
+        <button class="table-operation-item" title="Copy" @click="showBottomBox('panel', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
         <el-dropdown size="medium" trigger="hover" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
@@ -75,6 +76,10 @@ export default {
           label: this.$t('config.exprTemp.name'),
           prop: 'name',
           show: true
+        }, {
+          label: this.$t('config.exprTemp.varType'),
+          prop: 'varType',
+          show: true
         }, {
           label: this.$t('config.exprTemp.remark'),
           prop: 'remark',
diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
index f3b354585..3db1251e5 100644
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -53,7 +53,6 @@
         </template>
         <template v-else-if="item.prop === 'asset'">
           <span >
-            <i class="nz-icon nz-icon-asset" :class="scope.row[item.prop]>0?'colorEF7458':'colorEF7458'"/>
             {{scope.row.asset.name}}
           </span>
         </template>
diff --git a/nezha-fronted/src/components/page/config/template/chartTemp.vue b/nezha-fronted/src/components/page/config/template/chartTemp.vue
index a7c8566fb..ab3085349 100644
--- a/nezha-fronted/src/components/page/config/template/chartTemp.vue
+++ b/nezha-fronted/src/components/page/config/template/chartTemp.vue
@@ -36,8 +36,8 @@
 
         <delete-button :delete-objs="batchDeleteObjs" @after="getTableData"
                        id="alert-msg-batch-delete" v-has="'expressionTemplate_delete'" :api="url"></delete-button></template>
-      <template v-slot:default="slotProps">
-        <chart-tmpl-table
+      <template  v-slot="slotProps">
+        <chartTmplTable
           ref="dataTable"
           v-loading="slotProps.loading"
           :api="url"
@@ -50,7 +50,7 @@
           @orderBy="tableDataSort"
           @reload="getTableData"
           @selectionChange="selectionChange"
-          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></chart-tmpl-table>
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></chartTmplTable>
       </template>
       <!-- 分页组件 -->
       <template v-slot:pagination>
@@ -58,7 +58,7 @@
       </template>
     </nz-data-list>
     <transition name="right-box">
-<!--      <chart-box :chart="chart" :from="'temp'"  @close="closeChartBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reload="panelReload" @reloadOnlyPanel="panelReloadOnlyPanel" ref="addChartModal" v-if="rightBox.chart.show"></chart-box>-->
+      <chart-box :chart="object" :show-panel="showPanel" :from="'temp'"  @close="closeChartBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reload="panelReload" @reloadOnlyPanel="panelReloadOnlyPanel" ref="addChartModal" v-if="rightBox.show"></chart-box>
     </transition>
   </div>
 </template>
@@ -66,7 +66,7 @@
 <script>
 import bus from '@/libs/bus'
 import exportXLSX from '@/components/common/exportXLSX'
-import chartBox from "@/components/page/dashboard/chartBox";
+import chartBox from '@/components/page/dashboard/chartBox'
 import deleteButton from '@/components/common/deleteButton'
 import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
@@ -85,7 +85,7 @@ export default {
   data () {
     return {
       url: 'visual/panel/chart',
-      tableId: 'exprTemp',
+      tableId: 'chartTemp',
       /* 搜素相关 */
       searchMsg: { // 给搜索框子组件传递的信息
         zheze_none: true,
@@ -112,9 +112,22 @@ export default {
       blankObject: {
         id: '',
         name: '',
-        gname: '',
-        expression: '',
-        remark: ''
+        type: 'line',
+        span: 12,
+        height: '400',
+        unit: 2,
+        param: { url: '', threshold: '' },
+        elements: [{ expression: '', legend: '', type: 'expert', id: '' }],
+        panel: '',
+        sync: '',
+        remark: '',
+        groupId: -1,
+        panelId: 0,
+        varType: 1
+      },
+      showPanel: {
+        name: 'template',
+        id: 0
       },
       nowTime: ''
     }
@@ -123,6 +136,12 @@ export default {
 
   },
   methods: {
+    add () {
+      this.object = this.newObject()
+      this.object.panelId = 0
+      this.object.panelName = 'template'
+      this.rightBox.show = true
+    },
     getTableData (params) {
       if (params && Object.keys(params).length > 0) {
         for (const key in params) {
@@ -148,7 +167,25 @@ export default {
           }
         }
       })
-    }
+    },
+    closeChartBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.getTableData()
+      }
+    },
+    delChart () {
+
+    },
+    createSuccess () {
+      this.rightBox.show = false
+      this.getTableData()
+    },
+    delChartOk () {
+      this.rightBox.show = false
+    },
+    panelReload () {},
+    panelReloadOnlyPanel () {}
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index f5e98013a..71f0e4445 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -136,30 +136,32 @@
 <template>
   <div  class="mc">
     <div :class="boxClass" class="right-box right-box-add-chart z-top right-box-chart" v-clickoutside="{obj:editChart,func:clickOutside}">
-      <transition name="right-box">
+      <transition name="right-box" v-if="from!=='temp'">
         <panel-box :panel="panel" @reload="panelReload" ref="panelBox2" v-if="!showPanel.type"></panel-box>
       </transition>
 
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns right-box-form-delete">
-        <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82" id="chart-box-delete" type="button" v-if="editChart.id">
-          <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-        </button>
-      </div>
-      <!-- end--顶部按钮-->
+      <div class="right-box__header">
+        <!-- begin--标题-->
+        <div class="right-box-title">{{editChart.id ? $t("dashboard.panel.editChartTitle") : $t("dashboard.panel.createChartTitle")}}</div>
+        <!-- end--标题-->
 
-      <!-- begin--标题-->
-      <div class="right-box-title">{{editChart.id ? $t("dashboard.panel.editChartTitle") : $t("dashboard.panel.createChartTitle")}}</div>
-      <!-- end--标题-->
+        <!-- begin--顶部按钮-->
+        <div class="right-box-top-btns right-box-form-delete">
+          <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82" id="chart-box-delete" type="button" v-if="editChart.id">
+            <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
+            <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+          </button>
+        </div>
+        <!-- end--顶部按钮-->
+      </div>
 
       <!-- begin--表单-->
-      <div class="right-box-form-box" ref="scrollbar">
+      <div class="right-box-form-box right-box__container" ref="scrollbar">
         <el-form :model="editChart" :rules="rules" class="right-box-form  right-box-form-left" label-position = "top" label-width="120px" ref="chartForm">
           <el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
             <el-input maxlength="64" show-word-limit size="small" v-model="editChart.name" id="chart-box-title"></el-input>
           </el-form-item>
-          <el-form-item :label="$t('dashboard.panel.title')" prop="panelName" v-if="showPanel.type != 'project' && showPanel.type != 'asset' && showPanel.type != 'model'">
+          <el-form-item :label="$t('dashboard.panel.title')" prop="panelName" v-if="showPanel.type != 'project' && showPanel.type != 'asset' && showPanel.type != 'model' && from!=='temp'">
             <!--<el-autocomplete
               :fetch-suggestions="panelSuggestion"
               @input="inputPanel"
@@ -200,6 +202,14 @@
               </el-option>
             </el-select>
           </el-form-item>
+          <!--   varType   -->
+          <el-form-item :label="$t('dashboard.panel.chartForm.varType')" v-if="from === 'temp'">
+            <el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChart.varType" value-key="chartType" id="chart-box-group" :disabled="!!editChart.id">
+              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
+                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
           <!--   remark   -->
           <el-form-item :label="$t('dashboard.panel.chartForm.remark')">
             <el-input type="textarea" v-model="editChart.remark" :autosize="{ minRows: 1, maxRows: 6}" class="not-fixed-height no-resize"/>
@@ -429,14 +439,14 @@
         </el-form>
       </div>
     <!--底部按钮-->
-    <div class="right-box-bottom-btns">
+    <div class="right-box-bottom-btns right-box__footer">
       <button v-cancel="{obj:editChart,func:esc}" id="chart-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button v-if="showPanel.type && showPanel.type == 'model'" id="chart-box-Sync" v-has="'panel_chart_edit'" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" @click="SyncSave">
         <span>{{$t('overall.SyncSave')}}</span>
       </button>
-      <button @click="preview" id="chart-box-preview" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" v-else>
+      <button @click="preview" id="chart-box-preview" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" v-else-if="from!=='temp'" >
         <span>{{$t('overall.preview')}}</span>
       </button>
       <button id="chart-box-save" v-has="'panel_chart_add'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" @click="confirmAdd" >
@@ -599,7 +609,11 @@ export default {
       sortedOptionKeys: [{ key: 'min', label: 'Min' }, { key: 'max', label: 'Max' }, { key: 'avg', label: 'Avg' }, { key: 'last', label: 'Last' }, { key: 'total', label: 'Total' }],
       textShow: false,
       metricOptions: [],
-      showPicker: []
+      showPicker: [],
+      varTypeArr: [
+        { name: 'Asset', id: 1 },
+        { name: 'Endpoint', id: 2 }
+      ]
       // metricStore: []
     }
   },
@@ -874,7 +888,10 @@ export default {
         }); */
 
       // panelPromise.then(()=>{
-      if (this.panelId) {
+      if (this.panelId || this.from === 'temp') {
+        if (this.from === 'temp') {
+          this.panelId = 0
+        }
         const chartParams = params || this.editChart
         chartParams.panelId = this.panelId
         if (!chartParams.groupId) {
@@ -907,7 +924,10 @@ export default {
     },
     // 更新图表
     updateCharts (params) {
-      const panelId = this.panelId ? this.panelId : this.chart.panelId
+      let panelId = this.panelId ? this.panelId : this.chart.panelId
+      if (this.from === 'temp') {
+        panelId = 0
+      }
       const chartParams = params || this.editChart
       chartParams.panelId = panelId
       if (!chartParams.groupId) {
@@ -948,7 +968,8 @@ export default {
 
             },
             sync: this.editChart.sync,
-            groupId: this.editChart.groupId
+            groupId: this.editChart.groupId,
+            varType: this.editChart.varType
           }
           if (this.editChart.type === 'singleStat' || this.editChart.type === 'pie' || this.editChart.type === 'bar') {
             // params.param.statistics=this.statistics;
@@ -1013,7 +1034,8 @@ export default {
           param: param,
           sync: this.editChart.sync,
           remark: this.editChart.remark,
-          groupId: this.editChart.groupId
+          groupId: this.editChart.groupId,
+          varType: this.editChart.varType
         }
         if (valid) {
           if (opType === 'preview') {
@@ -1082,7 +1104,8 @@ export default {
               },
               sync: this.editChart.sync,
               remark: this.editChart.remark,
-              groupId: this.editChart.groupId
+              groupId: this.editChart.groupId,
+              varType: this.editChart.varType
             }
 
             if (valid) {
@@ -1111,7 +1134,8 @@ export default {
               },
               sync: this.editChart.sync,
               remark: this.editChart.remark,
-              groupId: this.editChart.groupId
+              groupId: this.editChart.groupId,
+              varType: this.editChart.varType
             }
 
             if (valid) {
@@ -1477,7 +1501,8 @@ export default {
               param: this.editChart.param,
               sync: this.editChart.sync,
               remark: this.editChart.remark,
-              groupId: this.editChart.groupId
+              groupId: this.editChart.groupId,
+              varType: this.editChart.varType
             }
             params = JSON.parse(JSON.stringify(params))
             if (this.editChart.type === 'singleStat' || this.editChart.type === 'table') {
@@ -1529,7 +1554,8 @@ export default {
               url: this.editChart.param.url
             },
             remark: this.editChart.remark,
-            groupId: this.editChart.groupId
+            groupId: this.editChart.groupId,
+            varType: this.editChart.varType
           }
 
           if (valid) {
@@ -1555,7 +1581,8 @@ export default {
               text: text
             },
             remark: this.editChart.remark,
-            groupId: this.editChart.groupId
+            groupId: this.editChart.groupId,
+            varType: this.editChart.varType
           }
 
           if (valid) {
@@ -1710,12 +1737,15 @@ export default {
             }
           })
         }
-
         if (n.name) {
           this.isEdit = true
         }
 
         this.editChart = JSON.parse(JSON.stringify(n))
+        if (this.editChart.panelId === 0 && !this.editChart.varType) {
+          this.editChart.varType = 1
+        }
+
         this.panelName = this.editChart.panelName
         this.panelId = this.editChart.panelId
         this.editChart.name = this.editChart.name || ''
@@ -1751,7 +1781,7 @@ export default {
           n.param && !n.param.legendValue && this.$set(this.editChart.param, 'legendValue', { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' })
         }
         this.$set(this.editChart, 'panelName', this.showPanel.name)
-        if (this.showPanel.id) {
+        if (this.showPanel.id || this.from === 'temp') {
           this.panelId = this.showPanel.id
         }
         this.$get('visual/panel/chart?panelId=' + this.panelId).then(response => {
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 9d93010d3..d182c6e0e 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -11,7 +11,7 @@
             <template v-slot:header>
               <div class="panel-select-header">
                 <el-input id="panel-list-search" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="mini" style="width: 340px;"></el-input>
-                <span :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd" class="panel-select-add" v-has="'panel_toAdd'" id="panel-list-toadd"><i class="nz-icon nz-icon-plus"></i></span>
+                <span :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd" class="panel-select-add" v-has="'panel_add'" id="panel-list-toadd"><i class="nz-icon nz-icon-plus"></i></span>
               </div>
             </template>
             <template v-slot:trigger>