NEZ-2391 feat：dashboard template页面开发

2022-11-22 19:16:59 +08:00
parent 654a0d75a5
commit 1c2fc831aa
13 changed files with 606 additions and 41 deletions
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -58,6 +58,8 @@
        <alertMessageTabNew  v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" :sign="sign+'alert'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></alertMessageTabNew>
        <!--chartTemp的Tab-->
        <panel-tab-new @exit="closeSubList" @getTableData="getTableData" :paramsType="'template'" v-if="from === fromRoute.chartTemp && targetTab === 'panel'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.chartTemp.chartTempTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
+        <!--dashboardTemp的Tab-->
+        <panel-tab-new @exit="closeSubList" @getTableData="getTableData" :paramsType="'template'" v-if="from === fromRoute.dashboardTemp && targetTab === 'panel'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.dashboardTemp.dashboardTempTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
        <!--alertRule Tab-->
        <alertMessageTabNew v-if="from === fromRoute.alertRule && targetTab === 'alertRuleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertRule.alertRule" @changeTab="changeTab" :targetTab.sync="targetTab"></alertMessageTabNew>
        <alertRuleEvalLog v-if="from === fromRoute.alertRule && targetTab === 'evalLog'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertRule.alertRule" @changeTab="changeTab" :targetTab.sync="targetTab"></alertRuleEvalLog>
@@ -73,7 +75,7 @@
        <!--alertRule Tab-->
        <alertMessageTabNew v-if="from === fromRoute.alertSilence && targetTab === 'alertMessageTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertSilence" @changeTab="changeTab" :targetTab.sync="targetTab"></alertMessageTabNew>
        <!--issue Tab-->
-<!--        <issueTab v-if="from === fromRoute.issue && targetTab === 'issue'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertSilence" @changeTab="changeTab" :targetTab.sync="targetTab"></issueTab>-->
+        <!-- <issueTab v-if="from === fromRoute.issue && targetTab === 'issue'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertSilence" @changeTab="changeTab" :targetTab.sync="targetTab"></issueTab> -->
      </div>
    </div>
  </div>
@@ -212,6 +214,11 @@ export default {
            { prop: 'panel', name: this.$t('overall.tempPrev') }
          ]
        },
+        dashboardTemp: {
+          dashboardTempTabTitle: [
+            { prop: 'panel', name: this.$t('overall.dashboardTemp') }
+          ]
+        },
        alertRule: {
          alertRule: [
            { prop: 'alertRuleAlertMessage', name: this.$t('overall.alert') },
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -13,10 +13,10 @@
    >
      <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
      <template v-slot:top-tool-right>
+        <!-- asset -->
        <div v-if="from === fromRoute.asset" style="display: flex">
          <pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" :sign="'panel' + obj.id"></pick-time>
-          <button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10"
-                  type="button" @click="addChart">
+          <button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" type="button" @click="addChart">
            <i class="nz-icon-create-square nz-icon"></i>
          </button>
          <top-tool-more-options
@@ -50,6 +50,7 @@
            </template>
          </top-tool-more-options>
        </div>
+        <!-- endpoint -->
        <div v-else-if="from === fromRoute.endpoint" style="display: flex">
          <pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" :sign="'panel' + obj.id"></pick-time>
          <button id="endpoint-create-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" @click.stop="addChart">
@@ -86,12 +87,24 @@
            </template>
          </top-tool-more-options>
        </div>
+        <!-- chartTemp -->
        <div v-else-if="from === fromRoute.chartTemp">
          <button id="panel-lock" :title='panelLock ? $t("overall.unlocked") : $t("overall.locked")'  class="top-tool-btn margin-r-10" @click="panelLockChange(!panelLock)" type="button">
            <i :class="{'nz-icon nz-icon-lock':!panelLock,'nz-icon nz-icon-unlock':panelLock}"></i>
          </button>
-          <button  @click="chartBySync" id="chart-sync"  :title="$t('overall.syncChart')" class="top-tool-btn margin-r-10"
-                   type="button">
+          <button @click="chartBySync" id="chart-sync"  :title="$t('overall.syncChart')" class="top-tool-btn margin-r-10" type="button">
+            <i class="nz-icon nz-icon-sync"></i>
+          </button>
+        </div>
+        <!-- dashboardTemp -->
+        <div v-else-if="from === fromRoute.dashboardTemp">
+          <button id="endpoint-create-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" @click.stop="addChart">
+            <i class="nz-icon nz-icon-create-square"></i>
+          </button>
+          <button id="panel-lock" :title='panelLock ? $t("overall.unlocked") : $t("overall.locked")'  class="top-tool-btn margin-r-10" @click="panelLockChange(!panelLock)" type="button">
+            <i :class="{'nz-icon nz-icon-lock':!panelLock,'nz-icon nz-icon-unlock':panelLock}"></i>
+          </button>
+          <button @click="chartBySync" id="chart-sync"  :title="$t('overall.syncChart')" class="top-tool-btn margin-r-10" type="button">
            <i class="nz-icon nz-icon-sync"></i>
          </button>
        </div>
@@ -123,8 +136,9 @@
        </div>
      </div>
    </nz-bottom-data-list>
+
    <transition name="right-box">
-<!--      <chart-box v-if="rightBox.chart.show" ref="addChartModal" :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>-->
+     <!-- <chart-box v-if="rightBox.chart.show" ref="addChartModal" :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box> -->
      <chart-right-box
        v-if="chartRightBoxShow"
        v-my-loading="rightBox.loading"
@@ -149,6 +163,8 @@

 <script>
 // import chartBox from '../../../page/dashboard/chartBox'
+import * as echarts from 'echarts'
+import { chartCache } from '@/components/common/js/common'
 import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
 import chartList from '@/components/chart/chartList'
 import bus from '../../../../libs/bus'
@@ -574,12 +590,31 @@ export default {
            this.showPanel.id = this.filter.panelId = 0
            this.getData(this.filter)
          }
+        } else if (this.from === this.fromRoute.dashboardTemp) {
+          this.$get('visual/panel', { type: 'template', ids: this.obj.id }).then(response => {
+            if (response.code === 200) {
+              this.panelData = response.data.list
+              if (this.panelData.length > 0) {
+                this.filter.panelId = this.panelData[0].id
+                this.showPanel = this.$loadsh.cloneDeep(this.panelData[0])
+                this.variables = this.$loadsh.get(this.panelData, '[0].param.variables')
+                this.getData(this.filter)
+              }
+            }
+          }).catch((error) => {
+            if (error) {
+              console.error(error)
+              this.$message.error(error.toString())
+            }
+          })
        } else {
          this.$get('visual/panel', { type: this.from, link: linkId || this.obj.id }).then(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.showPanel.id = this.filter.panelId = this.panelData[0].id
+                this.filter.panelId = this.panelData[0].id
+                this.showPanel = this.$loadsh.cloneDeep(this.panelData[0])
                this.variables = this.$loadsh.get(this.panelData, '[0].param.variables')
                this.getData(this.filter)
              }
@@ -855,6 +890,31 @@ export default {
          this.disposeChart()
        }
      }
+    },
+    // 监听图表联动配置panelId
+    'showPanel.param.chartShare': {
+      handler (value) {
+        // 每次切换联动模式 tooltip设置显示
+        const option = {
+          tooltip: {
+            className: 'chart-time-series'
+          }
+        }
+        for (const key in chartCache) {
+          if (!chartCache[key] || chartCache[key].group !== 'timeSeriesGroup') {
+            continue
+          }
+          chartCache[key].setOption(option)
+        }
+        this.$store.commit('setCurrentMousemove', 0)
+        if (value && value !== 'none') {
+          this.$store.commit('setConnect', value)
+          echarts.connect('timeSeriesGroup')
+        } else {
+          this.$store.commit('setConnect', value)
+          echarts.disconnect('timeSeriesGroup')
+        }
+      }
    }
  },
  beforeDestroy () {
@@ -862,6 +922,11 @@ export default {
    document.querySelector('#tableList') && document.querySelector('#tableList').removeEventListener('mouseleave', this.tableListLeave)
    this.scrollbarWrap && this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
    this.$store.dispatch('dispatchPanelLock', { flag: true })
+
+    // 页面销毁 清除图表联动
+    this.$store.commit('setCurrentMousemove', 0)
+    this.$store.commit('setConnect', 'none')
+    echarts.disconnect('timeSeriesGroup')
  }
 }
 </script>
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -418,7 +418,6 @@ export const fromRoute = {
  assetType: 'assetType',
  assetState: 'assetState',
  assetLabel: 'assetLabel',
-  expressionTemplate: 'expressionTemplate',
  user: 'user',
  agent: 'agent',
  recordRule: 'recordRule',
@@ -438,6 +437,8 @@ export const fromRoute = {
  ipam: 'ipam',
  apiKey: 'apiKey',
  chartTemp: 'chartTemp',
+  dashboardTemp: 'dashboardTemp',
+  expressionTemplate: 'expressionTemplate',
  backups: 'backups',
  ping: 'ping',
  trace: 'trace'
--- a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
+++ b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
@@ -69,7 +69,7 @@
            </el-upload>
          </div>
          <div class="import-select">
-            <div v-if="showEexisted" class="exists">
+            <div v-if="importNew" class="exists">
              <span>{{$t('overall.existed')}}</span>
              <el-select v-model="importBox.existed" style="flex:1" size="medium" popper-class="exists-select">
                <el-option
@@ -81,7 +81,7 @@
              </el-select>
            </div>
            <ul class="import-select-list">
-              <li v-if="showIgnoreError" class="import-select-item">
+              <li v-if="importNew" class="import-select-item">
                <el-checkbox v-model="importBox.ignoreError">{{$t('overall.ignoreError')}}</el-checkbox>
              </li>
              <li v-if="showSyncDashboard" class="import-select-item">
@@ -348,14 +348,6 @@ export default {
    deleteObjs: Array,
    exportBoxShow: {
      type: Boolean, default: false
-    },
-    // 已存在的内容处理方式
-    showEexisted: {
-      type: Boolean, default: true
-    },
-    // 遇到错误是否继续导入
-    showIgnoreError: {
-      type: Boolean, default: true
    }
  },
  computed: {
@@ -492,10 +484,8 @@ export default {
        this.prevent_opt.import = true
        const form = new FormData()
        form.append('file', this.importFile.raw)
-        if (this.showEexisted) {
+        if (this.importNew) {
          form.append('existed', this.importBox.existed)
-        }
-        if (this.showIgnoreError) {
          form.append('ignoreError', Number(this.importBox.ignoreError))
        }
        if (this.showSyncDashboard) {
@@ -611,6 +601,7 @@ export default {
    },
    exportCur () {
      const params = JSON.parse(JSON.stringify(this.params))
+      console.log(params)
      if (this.params2) {
        Object.keys(this.params2).forEach(key => {
          if (params[key]) {
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -33,7 +33,7 @@
        <!--panel-->
        <el-form-item
          class="form-item--half-width"
-          v-if="showPanel.type !== fromRoute.project && showPanel.type !== fromRoute.asset && showPanel.type !== fromRoute.endpoint && showPanel.type !== fromRoute.model && from!=='chartTemp'"
+          v-if="showPanel.type !== fromRoute.project && showPanel.type !== fromRoute.asset && showPanel.type !== fromRoute.endpoint && showPanel.type !== fromRoute.model && from!=='chartTemp' && from!=='dashboardTemp'"
          :label="$t('overall.dashboard')"
          prop="panelName"
        >
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -2,7 +2,10 @@
  <div v-clickoutside="{obj:editPanel,func:clickOutside}" class="right-box right-box-panel">
    <!-- begin--标题-->
    <div class="right-box__header">
-      <div class="header__title">{{editPanel.id ? ($t("dashboard.panel.editPanelTitle")) : $t("dashboard.panel.createPanelTitle")}}</div>
+
+      <div class="header__title" v-if="from !== 'dashboardTemp'">{{editPanel.id ? $t("dashboard.panel.editPanelTitle") : $t("dashboard.panel.createPanelTitle")}}</div>
+      <div class="header__title" v-if="from === 'dashboardTemp'">{{editPanel.id ? $t("dashboard.panel.editPanelTempTitle") : $t("dashboard.panel.createPanelTempTitle")}}</div>
+
      <div class="header__operation">
        <span v-cancel="{obj: editPanel, func: esc}"><i class="nz-icon nz-icon-close" :title="$t('overall.close')"></i></span>
      </div>
@@ -11,9 +14,21 @@
    <div class="right-box__container">
      <div class="container__form">
        <el-form ref="form" :model="editPanel" :rules="rules" label-position = "top" label-width="120px" size="small">
+
+          <!-- name -->
          <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" :disabled="isBottom"></el-input>
          </el-form-item>
+
+          <!--varType-->
+          <el-form-item v-if="from==='dashboardTemp'" :label="$t('dashboard.panel.chartForm.varType')" clearable class="item-receivers" prop="varType">
+            <el-select  v-model="editPanel.varType" :disabled="!!editPanel.id" clearable popper-class="right-box-select-top prevent-clickoutside" placeholder="" size="small">
+              <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("overall.remark")' class="range-time" prop="remark">
            <el-input
@@ -27,7 +42,7 @@

          <!-- chartShare -->
          <el-form-item :label="$t('dashboard.panel.chartTooltip')" class="item-receivers" prop="chartShare">
-            <el-select v-model="editPanel.param.chartShare" clearable  placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
+            <el-select v-model="editPanel.param.chartShare" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
              <el-option value="none" label="Default">
                <span class="panel-dropdown-label-txt" >{{$t('config.assetLabel.default')}}</span>
              </el-option>
@@ -360,7 +375,8 @@ export default {
    panelType: {
      type: String,
      default: 'dashboard'
-    }
+    },
+    from: { type: String }
  },
  mixins: [editRigthBox],
  data () {
@@ -447,6 +463,11 @@ export default {
        { name: 'label_values(metric, label)', description: this.$t('dashboard.panel.label_values(metric, label)') },
        { name: 'metrics(metric)', description: this.$t('dashboard.panel.metrics(metric)') },
        { name: 'query_result(query)', description: this.$t('dashboard.panel.query_result(query)') }
+      ],
+      varTypeArr: [
+        { name: this.$t('project.topology.none'), id: 0 },
+        { name: this.$t('asset.asset'), id: 1 },
+        { name: this.$t('asset.endpoint'), id: 2 }
      ]
    }
  },
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -977,6 +977,8 @@ export default {
              objectInfo.state = val.valnum
            } else if (val.label === 'priority') {
              objectInfo.priority = val.valnum
+            } else if (val.label === 'dashboardVarType') {
+              objectInfo.varType = val.valnum
            } else if (typeof (val.valnum) === 'undefined' || val.valnum == '') {
              this.selectInfoList[val.label].forEach(item => {
                if (item.label === val.val) {
--- a/nezha-fronted/src/components/common/searchSelectInfo.js
+++ b/nezha-fronted/src/components/common/searchSelectInfo.js
@@ -242,6 +242,11 @@ export default {
          { value: '1', label: i18n.t('asset.asset') },
          { value: '2', label: i18n.t('asset.endpoint') }
        ],
+        dashboardVarType: [
+          { value: '0', label: i18n.t('project.topology.none') },
+          { value: '1', label: i18n.t('asset.asset') },
+          { value: '2', label: i18n.t('asset.endpoint') }
+        ],
        chartType: [
          {
            value: 'line',
--- a/nezha-fronted/src/components/common/table/settings/dashboardTmplTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/dashboardTmplTable.vue
@@ -0,0 +1,146 @@
+<template>
+  <el-table
+    id="roleTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    :default-sort="orderBy"
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+    @row-dblclick="(row)=>{showBottomBox('panel', row)}"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      v-if="item.show"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
+      :width="`${item.width}`"
+      class="data-column"
+    >
+      <template slot="header">
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <span v-if="item.prop==='varType'">
+          <template v-if="scope.row[item.prop] == 0 ">None</template>
+          <template v-if="scope.row[item.prop] == 1 ">Asset</template>
+          <template v-if="scope.row[item.prop] == 2 ">Endpoint</template>
+        </span>
+        <template v-else-if="item.prop === 'name'">
+          <copy :copyData='scope.row[item.prop]' :showInfo='scope.row[item.prop]'>
+            <template slot="copy-text">
+                {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+            </template>
+          </copy>
+        </template>
+        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
+        <template v-else>-</template>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :resizable="false"
+      :width="operationWidth"
+      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"  @click="showBottomBox('panel', scope.row)" :title="$t('overall.view')"><i class="nz-icon nz-icon-view1"></i></button>
+        <el-dropdown size="medium" v-has="['chartTemplate_edit','chartTemplate_delete']" trigger="click" @command="tableOperation">
+          <div class="table-operation-item table-operation-item--more" :title="$t('overall.moreOperations')">
+            <i class="nz-icon nz-icon-more3"></i>
+          </div>
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
+            <el-dropdown-item v-has="'chartTemplate_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
+            <el-dropdown-item v-has="'chartTemplate_delete'" :command="['delete', scope.row]">
+              <delete-button
+                ref="deleteButton"
+                :from="'dashboardTemp'"
+                :forceDeleteShow="false"
+                :type="'link'"
+                :title="$t('overall.delete')"
+                id="alert-msg-delete"
+                v-has="'expressionTemplate_delete'"
+                :api="api"
+                :single="true"
+                :delete-objs="singleDelete"
+                @before="delFlag=true"
+                >
+              </delete-button>
+              </el-dropdown-item>
+            <el-dropdown-item v-has="'chartTemplate_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
+            <el-dropdown-item v-has="'chartTemplate_edit'" :command="['sync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.syncChart')}}</span></el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </el-table-column>
+    <template  slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
+import copy from '@/components/common/copy'
+export default {
+  name: 'dashboardTmplTable',
+  mixins: [table],
+  components: { deleteButton, copy },
+  props: {
+    loading: Boolean
+  },
+  data () {
+    return {
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80,
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true,
+          minWidth: 200,
+          sortable: 'custom'
+        }, {
+          label: this.$t('dashboard.panel.chartForm.varType'),
+          prop: 'varType',
+          show: true,
+          minWidth: 200,
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          show: true,
+          minWidth: 200
+        }
+      ]
+    }
+  },
+  methods: {
+  }
+}
+</script>
--- a/nezha-fronted/src/components/page/config/template/chartTemp.vue
+++ b/nezha-fronted/src/components/page/config/template/chartTemp.vue
@@ -398,10 +398,10 @@ export default {
        },
        jsonKey: 'val'
      },
-      state: {
+      varType: {
        target: this.searchLabel,
        isSearchInput: true,
-        propertyName: 'state',
+        propertyName: 'varType',
        type: 'string',
        defaultJson: {
          disabled: false,
@@ -409,9 +409,10 @@ export default {
          name: 'Variable type',
          readonly: true,
          type: 'select',
-          val: ''
+          val: '',
+          listStr: 'varType'
        },
-        jsonKey: 'val'
+        jsonKey: 'valnum'
      }
    }
    this.initQueryFromPath(searchKeys)
--- a/nezha-fronted/src/components/page/config/template/dashboardTemp.vue
+++ b/nezha-fronted/src/components/page/config/template/dashboardTemp.vue
@@ -0,0 +1,321 @@
+<template>
+  <div>
+    <nzDataList
+      ref="dataList"
+      :api="url"
+      :layout="['searchInput', 'elementSet', 'pagination']"
+      :custom-table-title.sync="tools.customTableTitle"
+      :from="fromRoute.dashboardTemp"
+      :search-msg="searchMsg"
+      @search="search"
+      @getTableData="getTableData"
+    >
+      <template v-slot:top-tool-right>
+        <button id="expr-tmpl-list-export" v-has="'expressionTemplate_add'" :title="$t('overall.createTemplate')" class="top-tool-btn margin-r-10" type="button" @click="add">
+          <i class="nz-icon nz-icon-create-square"></i>
+        </button>
+       <top-tool-more-options
+          :delete-objs="batchDeleteObjs"
+          ref="export"
+          id="dashboard-template-list"
+          export-url="/visual/panel/export"
+          import-url="/visual/panel/import"
+          export-file-name="dashboard-temp"
+          :params="searchLabel"
+          :paramsType="'template'"
+          :permissions="{import: 'expressionTemplate_add', export: 'expressionTemplate_edit'}"
+          class="top-tool-export margin-r-10"
+          @afterImport="getTableData"
+        >
+          <template v-slot:before>
+            <div>
+              <el-dropdown-item :disabled="batchDeleteObjs.length==0">
+                <delete-button
+                  ref="deleteButton"
+                  :single="false"
+                  :from="'dashboardTemp'"
+                  :forceDeleteShow="false"
+                  :type="'link'"
+                  :title="$t('overall.batchDel')"
+                  :delete-objs="batchDeleteObjs"
+                  @after="getTableData"
+                  id="alert-msg-batch-delete"
+                  v-has="'expressionTemplate_delete'"
+                  :api="url">
+                </delete-button>
+              </el-dropdown-item>
+            </div>
+          </template>
+        </top-tool-more-options>
+      </template>
+      <template  v-slot="slotProps">
+        <dashboardTmplTable
+          ref="dataTable"
+          :orderByFa="orderBy"
+          v-my-loading="tools.loading"
+          :loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @copy="copy"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @sync="chartBySync"
+          @selectionChange="selectionChange"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></dashboardTmplTable>
+      </template>
+      <!-- 分页组件 -->
+      <template v-slot:pagination>
+        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+      </template>
+    </nzDataList>
+
+    <transition name="right-box">
+      <panel-box v-if="rightBox.show" ref="panelBox" :obj="object" from="dashboardTemp" @close="closePanelBox" panelType="template"></panel-box>
+    </transition>
+  </div>
+</template>
+
+<script>
+import deleteButton from '@/components/common/deleteButton'
+import dataListMixin from '@/components/common/mixin/dataList'
+import dashboardTmplTable from '@/components/common/table/settings/dashboardTmplTable'
+import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
+import routerPathParams from '@/components/common/mixin/routerPathParams'
+import panelBox from '@/components/common/rightBox/panelBox'
+
+export default {
+  name: 'dashboardTemp',
+  components: {
+    deleteButton,
+    dashboardTmplTable,
+    topToolMoreOptions,
+    panelBox
+  },
+  mixins: [dataListMixin, routerPathParams],
+  data () {
+    return {
+      url: 'visual/panel',
+      tableId: 'dashboardTemp',
+      orderBy: 'id',
+      /* 搜素相关 */
+      searchMsg: { // 给搜索框子组件传递的信息
+        searchLabelList: [
+          {
+            name: 'ID',
+            type: 'input',
+            label: 'ids',
+            disabled: false
+          },
+          {
+            name: this.$t('overall.name'),
+            type: 'input',
+            label: 'name',
+            disabled: false
+          },
+          {
+            name: this.$t('dashboard.panel.chartForm.varType'),
+            type: 'select',
+            label: 'dashboardVarType',
+            readonly: true,
+            disabled: false
+          }
+        ]
+      }
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    add () {
+      if (!this.hasButton('panel_view')) {
+        return
+      }
+      this.rightBox.show = true
+      // 关闭selectDashboard弹框
+      this.object = {
+        id: '',
+        name: '',
+        varType: 1,
+        remark: '',
+        param: {
+          report: {
+            enable: false,
+            receivers: [],
+            range: {
+              unit: 'day'
+            },
+            schedule: {
+              stime: '',
+              etime: '',
+              nums: [],
+              type: 2 + '',
+              repeat: 1
+            }
+          },
+          chartShare: 'none'
+        }
+      }
+    },
+    edit (u) {
+      this.$get('visual/panel/' + u.id).then(res => {
+        if (res.code === 200) {
+          this.object = res.data
+          if (!this.$loadsh.get(this.object, 'param.report', '')) {
+            this.object = {
+              ...this.object,
+              param: {
+                report: {
+                  enable: false,
+                  range: {
+                    unit: 'day'
+                  },
+                  schedule: {
+                    type: '2',
+                    repeat: 1,
+                    nums: [],
+                    stime: '',
+                    etime: ''
+                  },
+                  receivers: []
+                },
+                chartShare: 'none'
+              }
+            }
+          }
+          this.object.param.report.schedule.type = this.object.param.report.schedule.type + ''
+          const startTime = this.$loadsh.get(this.object, 'param.report.schedule.stime', '')
+          if (startTime !== '') {
+            this.object.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.object.param.report.schedule.stime, 'YYYY-MM-DD HH:mm:ss')
+          } else {
+            this.object.param.report.schedule.stime = ''
+          }
+          const endTime = this.$loadsh.get(this.object, 'param.report.schedule.etime', '')
+          if (endTime !== '') {
+            this.object.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.object.param.report.schedule.etime, 'YYYY-MM-DD HH:mm:ss')
+          } else {
+            this.object.param.report.schedule.etime = ''
+          }
+          this.rightBox.show = true
+        }
+      })
+    },
+    copy (u, copyParams) {
+      this.$post('/visual/panel/duplicate/' + u.id).then(res => {
+        if (res.code === 200) {
+          this.getTableData()
+          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    chartBySync (row) {
+      this.$store.dispatch('dispatchHomeLoading', true)
+      this.$post('visual/panel/chart/syncTmpl', { pid: row.id }).then(res => {
+        this.$store.dispatch('dispatchHomeLoading', false)
+        if (res.code === 200) {
+          this.getTableData()
+          this.$message.success(this.$t('tip.syncSuccess'))
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    getTableData (params) {
+      if (params && Object.keys(params).length > 0) {
+        for (const key in params) {
+          this.$set(this.searchLabel, key, params[key])
+        }
+      }
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      } else {
+        delete this.searchLabel.orderBy
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
+      this.updatePath({ ...this.searchLabel, ...this.searchCheckBox })
+      this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox, type: 'template' }).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.list.length
+          if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    },
+    closePanelBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.getTableData()
+      }
+    }
+  },
+  created () {
+    const searchKeys = {
+      // key: path 键
+      // value: vue set 参数
+      pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' },
+      pageSize: { target: this.pageObj, propertyName: 'pageSize', type: 'number' },
+      orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' },
+      ids: {
+        target: this.searchLabel,
+        isSearchInput: true,
+        propertyName: 'ids',
+        type: 'string',
+        defaultJson: {
+          disabled: false,
+          id: 'ids',
+          label: 'ids',
+          name: 'ID',
+          type: 'input',
+          val: ''
+        },
+        jsonKey: 'val'
+      },
+      name: {
+        target: this.searchLabel,
+        isSearchInput: true,
+        propertyName: 'name',
+        type: 'string',
+        defaultJson: {
+          disabled: false,
+          id: 'name',
+          label: 'name',
+          name: 'Name',
+          type: 'input',
+          val: ''
+        },
+        jsonKey: 'val'
+      },
+      varType: {
+        target: this.searchLabel,
+        isSearchInput: true,
+        propertyName: 'varType',
+        type: 'string',
+        defaultJson: {
+          disabled: false,
+          label: 'varType',
+          name: 'Variable type',
+          readonly: true,
+          type: 'select',
+          val: '',
+          listStr: 'dashboardVarType'
+        },
+        jsonKey: 'valnum'
+      }
+    }
+    this.initQueryFromPath(searchKeys)
+  }
+}
+</script>
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -147,6 +147,7 @@
 </template>

 <script>
+import * as echarts from 'echarts'
 import { chartCache } from '@/components/common/js/common'
 import { data as le5leData, observers as le5leObservers } from 'le5le-store/store/data.js'
 import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
@@ -161,7 +162,6 @@ import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import routerPathParams from '@/components/common/mixin/routerPathParams'
 import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
 import exportHtmlMixin from '@/components/common/mixin/exportHtml'
-import * as echarts from 'echarts'
 import panelVariables from '@/components/common/panel/panelVariables'
 import snapshotProgress from '@/components/common/snapshotProgress/snapshotProgress.vue'
 // import FileSaver from 'file-saver'
@@ -1110,6 +1110,7 @@ export default {
    }
  },
  watch: {
+    // 监听图表联动配置
    'showPanel.param.chartShare': {
      handler (value) {
        // 每次切换联动模式 tooltip设置显示
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -204,6 +204,10 @@ export default new Router({
          path: '/chartTemp',
          component: resolve => require(['@/components/page/config/template/chartTemp'], resolve)
        },
+        {
+          path: '/dashboardTemp',
+          component: resolve => require(['@/components/page/config/template/dashboardTemp'], resolve)
+        },
        {
          path: '/backup',
          component: resolve => require(['@/components/page/config/backups'], resolve)