feat：添加chart模板列表页面

2021-04-23 18:10:25 +08:00
parent d4374d89ed
commit 73f34335a2
10 changed files with 186 additions and 144 deletions
--- 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{
--- 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: {
--- 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: {
--- 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
--- 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) {
--- 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',
--- 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>
--- 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>
--- 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 => {
--- 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>