From 1c2fc831aab6ea069ab382a87524cf7f7a0ce484 Mon Sep 17 00:00:00 2001
From: 18317449825 <18317449825@163.com>
Date: Tue, 22 Nov 2022 19:16:59 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-2391=20feat=EF=BC=9Adashboard=20template?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/bottomBox/bottomBox.vue |  11 +-
 .../common/bottomBox/tabs/panelTabNew.vue     |  87 ++++-
 .../src/components/common/js/constants.js     |   3 +-
 .../common/popBox/topToolMoreOptions.vue      |  19 +-
 .../common/rightBox/chart/chartRightBox.vue   |   2 +-
 .../components/common/rightBox/panelBox.vue   |  35 +-
 .../src/components/common/searchInput.vue     |   2 +
 .../src/components/common/searchSelectInfo.js |   5 +
 .../table/settings/dashboardTmplTable.vue     | 146 ++++++++
 .../page/config/template/chartTemp.vue        |   9 +-
 .../page/config/template/dashboardTemp.vue    | 321 ++++++++++++++++++
 .../src/components/page/dashboard/panel.vue   |   3 +-
 nezha-fronted/src/router/index.js             |   4 +
 13 files changed, 606 insertions(+), 41 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/table/settings/dashboardTmplTable.vue
 create mode 100644 nezha-fronted/src/components/page/config/template/dashboardTemp.vue

diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index d0c772817..edb36f9cc 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -57,7 +57,9 @@
         <log-bottom-tab v-if="from === fromRoute.endpoint && targetTab === 'log' && hasLogConfig" :sign="sign+'log'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
         <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>
+        <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') },
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
index 963dbfc03..8428aaa90 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -13,13 +13,13 @@
     >
       <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
+          <top-tool-more-options
             ref="topTool"
             :delete-objs="batchDeleteObjs"
             id="asset-list"
@@ -50,12 +50,13 @@
             </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">
             <i class="nz-icon nz-icon-create-square"></i>
           </button>
-         <top-tool-more-options
+          <top-tool-more-options
             ref="topTool"
             :delete-objs="batchDeleteObjs"
             id="asset-list"
@@ -86,12 +87,24 @@
             </template>
           </top-tool-more-options>
         </div>
-        <div  v-else-if="from === fromRoute.chartTemp">
+        <!-- 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">
+            <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>
+        <!-- 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>
diff --git a/nezha-fronted/src/components/common/js/constants.js b/nezha-fronted/src/components/common/js/constants.js
index 0214f28cc..078fd7656 100644
--- 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'
diff --git a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
index 84ccfe596..ff2a6e2b7 100644
--- 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
@@ -77,11 +77,11 @@
                   :key="item.value"
                   :label="item.name"
                   :value="item.value">
-                </el-option>
+                </el-option>  
               </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]) {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index caf60e9dd..d1674a492 100644
--- 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"
         >
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index 5f4071a91..fd054c50e 100644
--- 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,15 +42,15 @@
 
           <!-- 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>
+                <span class="panel-dropdown-label-txt" >{{$t('config.assetLabel.default')}}</span>
               </el-option>
-            <el-option value="crosshair" label="Share crosshair">
-              <span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.crosshair')}}</span>
+              <el-option value="crosshair" label="Share crosshair">
+                <span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.crosshair')}}</span>
               </el-option>
               <el-option value="tooltip" label="Share tooltip">
-              <span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.shareTooltip')}}</span>
+                <span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.shareTooltip')}}</span>
               </el-option>
             </el-select>
             <div class="item-receivers-text">{{$t('dashboard.panel.chartTooltipText')}}</div>
@@ -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 }
       ]
     }
   },
diff --git a/nezha-fronted/src/components/common/searchInput.vue b/nezha-fronted/src/components/common/searchInput.vue
index 68284d328..14942905a 100644
--- 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) {
diff --git a/nezha-fronted/src/components/common/searchSelectInfo.js b/nezha-fronted/src/components/common/searchSelectInfo.js
index eee6b22ef..8898e49b1 100644
--- 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',
diff --git a/nezha-fronted/src/components/common/table/settings/dashboardTmplTable.vue b/nezha-fronted/src/components/common/table/settings/dashboardTmplTable.vue
new file mode 100644
index 000000000..7594be7b3
--- /dev/null
+++ 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>
diff --git a/nezha-fronted/src/components/page/config/template/chartTemp.vue b/nezha-fronted/src/components/page/config/template/chartTemp.vue
index dd3d5e95e..8f1a4dee1 100644
--- 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)
diff --git a/nezha-fronted/src/components/page/config/template/dashboardTemp.vue b/nezha-fronted/src/components/page/config/template/dashboardTemp.vue
new file mode 100644
index 000000000..bd8645fbf
--- /dev/null
+++ 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>
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index ec68664a9..416f5c6cf 100644
--- 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设置显示
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index 72d8cff34..99231f431 100644
--- 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)