diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 6ea3c0064..5361c2ff9 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -2169,13 +2169,13 @@ li{
   height: 70px;
   justify-content: space-around;
 }
-.right-box-form>.el-form-item.half-form-item-other{
+.right-box-form .half-form-item-other{
   display: inline-block;
-  width: calc(50% - 15px);
+  width: calc(50% - 30px);
 }
-.right-box-form>.el-form-item.half-form-item-other-two{
+.right-box-form .half-form-item-other-two{
   display: inline-block;
-  width: calc(50% - 15px);
+  width: calc(50% - 30px);
   margin-left: 0;
 }
 .right-box .right-box-form-add,.right-box  .right-box-form-minus-box{
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 7d0be3dfa..0e320c972 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -230,6 +230,8 @@ import textChart from './text-chart'
 import chartPie from './chart-pie'
 import chartBarStatis from './chart-bar-statistics'
 import chartGroup from './chart-group'
+import { fromRoute } from '@/components/common/js/constants'
+import chartTempData from "@/components/charts/chartTempData";
 // import visNetwork from './visNetwork'
 export default {
   name: 'chartList',
@@ -240,7 +242,8 @@ export default {
     detail: Object,
     from: { type: String },
     panelLock: { type: Boolean, default: false },
-    hasGroup: { type: Boolean, default: true }
+    hasGroup: { type: Boolean, default: true },
+    panelDataList: Array
   },
 
   components: {
@@ -283,6 +286,12 @@ export default {
       // showShadow:false,
     }
   },
+  watch: {
+    panelDataList (n) {
+      console.log(n)
+      this.getData(this.filter)
+    }
+  },
   methods: {
     dropmenuChange (id, show) {
       if (show) {
@@ -662,9 +671,25 @@ export default {
         })
         return
       }
+      if (param.from == this.$CONSTANTS.fromRoute.chartTemp) {
+        console.log(this.panelDataList)
+        this.dataList = this.panelDataList
+        this.$nextTick(() => {
+          this.dataList.forEach((item, index) => {
+            this.$set(item, 'from', params.from)
+            this.setChartSize(item, index)// 设置该图表宽度
+            const chartBox = document.getElementById('chart-' + item.id)
+            this.handleElementInViewport(chartBox, 0, item, index)
+            if (item.type === 'group') {
+              this.$refs['editChart' + item.id][0].$refs.listGroup.getData(params)
+            }
+          })
+        })
+        return
+      }
       if (!param.query) delete param.query
       // 根据panelId获得panel下的所有图表
-      this.$get('visual/panel/chart?panelId=' + params.panelId).then(response => {
+      this.$get('visual/panel/chart?panelId=' + params.panelId + '&pageSize=-1').then(response => {
         if (response.code === 200) {
           response.data.list.forEach((item, index) => {
             item.isLoaded = false
@@ -918,6 +943,9 @@ export default {
               // if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
               //   return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
               // }
+              if (this.from === fromRoute.chartTemp) {
+                return chartTempData
+              }
               return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
             })
             // 一个图表的所有element单独获取数据
diff --git a/nezha-fronted/src/components/charts/chartTempData.js b/nezha-fronted/src/components/charts/chartTempData.js
new file mode 100644
index 000000000..cec3ca506
--- /dev/null
+++ b/nezha-fronted/src/components/charts/chartTempData.js
@@ -0,0 +1,980 @@
+const chartTempData = {
+  data: {
+    result: [
+      {
+        metric: {
+
+        },
+        values: [
+          [
+            1619326641,
+            '67234.52306889734'
+          ],
+          [
+            1619326656,
+            '84768.45245026101'
+          ],
+          [
+            1619326671,
+            '129634.01007646995'
+          ],
+          [
+            1619326686,
+            '156542.62882642742'
+          ],
+          [
+            1619326701,
+            '135705.9448148899'
+          ],
+          [
+            1619326716,
+            '115572.40233875904'
+          ],
+          [
+            1619326731,
+            '97737.31879742522'
+          ],
+          [
+            1619326746,
+            '83827.90092416394'
+          ],
+          [
+            1619326761,
+            '99792.76711425022'
+          ],
+          [
+            1619326776,
+            '141957.65742923907'
+          ],
+          [
+            1619326791,
+            '169193.0479737079'
+          ],
+          [
+            1619326806,
+            '155332.39710062867'
+          ],
+          [
+            1619326821,
+            '129349.45882305052'
+          ],
+          [
+            1619326836,
+            '108301.37872333173'
+          ],
+          [
+            1619326851,
+            '90034.99368171557'
+          ],
+          [
+            1619326866,
+            '80273.24280781174'
+          ],
+          [
+            1619326881,
+            '71427.56847681744'
+          ],
+          [
+            1619326896,
+            '65009.655216768355'
+          ],
+          [
+            1619326911,
+            '56202.051900505874'
+          ],
+          [
+            1619326926,
+            '49175.99200440523'
+          ],
+          [
+            1619326941,
+            '51675.252768933875'
+          ],
+          [
+            1619326956,
+            '60142.6817538732'
+          ],
+          [
+            1619326971,
+            '58492.28986291914'
+          ],
+          [
+            1619326986,
+            '88647.97630420537'
+          ],
+          [
+            1619327001,
+            '129227.8284375646'
+          ],
+          [
+            1619327016,
+            '119235.93213991504'
+          ],
+          [
+            1619327031,
+            '101160.05700432547'
+          ],
+          [
+            1619327046,
+            '87795.44901362302'
+          ],
+          [
+            1619327061,
+            '87315.15463300308'
+          ],
+          [
+            1619327076,
+            '92489.18937959624'
+          ],
+          [
+            1619327091,
+            '93086.80666954032'
+          ],
+          [
+            1619327106,
+            '112996.24939570608'
+          ],
+          [
+            1619327121,
+            '125622.50409516145'
+          ],
+          [
+            1619327136,
+            '124043.75671756931'
+          ],
+          [
+            1619327151,
+            '125915.23892405373'
+          ],
+          [
+            1619327166,
+            '131860.94148401526'
+          ],
+          [
+            1619327181,
+            '131323.512587253'
+          ],
+          [
+            1619327196,
+            '130202.84054319662'
+          ],
+          [
+            1619327211,
+            '131137.2998550472'
+          ],
+          [
+            1619327226,
+            '140011.84069068846'
+          ],
+          [
+            1619327241,
+            '144761.03094652962'
+          ],
+          [
+            1619327256,
+            '140896.2234628107'
+          ],
+          [
+            1619327271,
+            '144939.9521471322'
+          ],
+          [
+            1619327286,
+            '146854.00264563446'
+          ],
+          [
+            1619327301,
+            '143528.7608647803'
+          ],
+          [
+            1619327316,
+            '136391.16570184118'
+          ],
+          [
+            1619327331,
+            '134939.63766213963'
+          ],
+          [
+            1619327346,
+            '130734.90194389559'
+          ],
+          [
+            1619327361,
+            '136434.88336788653'
+          ],
+          [
+            1619327376,
+            '145092.16210718406'
+          ],
+          [
+            1619327391,
+            '152065.04153079912'
+          ],
+          [
+            1619327406,
+            '156798.09185927216'
+          ],
+          [
+            1619327421,
+            '158674.77766447523'
+          ],
+          [
+            1619327436,
+            '161096.58445758978'
+          ],
+          [
+            1619327451,
+            '158761.11021276534'
+          ],
+          [
+            1619327466,
+            '163004.29606041766'
+          ],
+          [
+            1619327481,
+            '167314.9710412085'
+          ],
+          [
+            1619327496,
+            '165583.65723135485'
+          ],
+          [
+            1619327511,
+            '150599.88881636693'
+          ],
+          [
+            1619327526,
+            '136263.16856828984'
+          ],
+          [
+            1619327541,
+            '127531.12022245591'
+          ],
+          [
+            1619327556,
+            '112626.2854714918'
+          ],
+          [
+            1619327571,
+            '109748.6926587426'
+          ],
+          [
+            1619327586,
+            '103216.89749119896'
+          ],
+          [
+            1619327601,
+            '120054.0931496599'
+          ],
+          [
+            1619327616,
+            '124397.01189137285'
+          ],
+          [
+            1619327631,
+            '121693.36886313172'
+          ],
+          [
+            1619327646,
+            '124263.5185058619'
+          ],
+          [
+            1619327661,
+            '129370.31776538865'
+          ],
+          [
+            1619327676,
+            '133191.73551700043'
+          ],
+          [
+            1619327691,
+            '144078.4064984659'
+          ],
+          [
+            1619327706,
+            '139893.47544839772'
+          ],
+          [
+            1619327721,
+            '139218.28627794381'
+          ],
+          [
+            1619327736,
+            '135077.997911198'
+          ],
+          [
+            1619327751,
+            '137188.8500959387'
+          ],
+          [
+            1619327766,
+            '136302.6625400467'
+          ],
+          [
+            1619327781,
+            '135333.82845756598'
+          ],
+          [
+            1619327796,
+            '141334.01284001715'
+          ],
+          [
+            1619327811,
+            '137118.18506250918'
+          ],
+          [
+            1619327826,
+            '131834.77580904771'
+          ],
+          [
+            1619327841,
+            '125440.56107015046'
+          ],
+          [
+            1619327856,
+            '129950.61479606191'
+          ],
+          [
+            1619327871,
+            '132228.4300026117'
+          ],
+          [
+            1619327886,
+            '126695.44097770381'
+          ],
+          [
+            1619327901,
+            '140958.99289731166'
+          ],
+          [
+            1619327916,
+            '145497.2801943425'
+          ],
+          [
+            1619327931,
+            '132973.074348475'
+          ],
+          [
+            1619327946,
+            '137179.44736553708'
+          ],
+          [
+            1619327961,
+            '143180.66659914295'
+          ],
+          [
+            1619327976,
+            '137765.40360422112'
+          ],
+          [
+            1619327991,
+            '129042.39839074464'
+          ],
+          [
+            1619328006,
+            '121699.96972642104'
+          ],
+          [
+            1619328021,
+            '126221.42670726098'
+          ],
+          [
+            1619328036,
+            '129724.29089390681'
+          ],
+          [
+            1619328051,
+            '136616.86970395234'
+          ],
+          [
+            1619328066,
+            '139008.3170592644'
+          ],
+          [
+            1619328081,
+            '147551.30851143942'
+          ],
+          [
+            1619328096,
+            '155084.9733920894'
+          ],
+          [
+            1619328111,
+            '161961.05584908125'
+          ],
+          [
+            1619328126,
+            '162768.42434900918'
+          ],
+          [
+            1619328141,
+            '156259.98260298115'
+          ],
+          [
+            1619328156,
+            '154439.53586441962'
+          ],
+          [
+            1619328171,
+            '156135.37586396653'
+          ],
+          [
+            1619328186,
+            '155884.24195870038'
+          ],
+          [
+            1619328201,
+            '158386.6374126683'
+          ],
+          [
+            1619328216,
+            '153855.1064273622'
+          ],
+          [
+            1619328231,
+            '154296.20722794015'
+          ],
+          [
+            1619328246,
+            '156068.06042940164'
+          ],
+          [
+            1619328261,
+            '152266.96251924452'
+          ],
+          [
+            1619328276,
+            '158288.5803709968'
+          ],
+          [
+            1619328291,
+            '162867.9908155629'
+          ],
+          [
+            1619328306,
+            '170007.72483388087'
+          ],
+          [
+            1619328321,
+            '170739.98543400207'
+          ],
+          [
+            1619328336,
+            '165015.94268824425'
+          ],
+          [
+            1619328351,
+            '164295.23424811324'
+          ],
+          [
+            1619328366,
+            '167809.8241459832'
+          ],
+          [
+            1619328381,
+            '163713.7187657755'
+          ],
+          [
+            1619328396,
+            '170231.75566899288'
+          ],
+          [
+            1619328411,
+            '169801.47429921135'
+          ],
+          [
+            1619328426,
+            '168025.86124235595'
+          ],
+          [
+            1619328441,
+            '173188.72482130752'
+          ],
+          [
+            1619328456,
+            '174727.4231324348'
+          ],
+          [
+            1619328471,
+            '175981.6730451862'
+          ],
+          [
+            1619328486,
+            '159560.41549215658'
+          ],
+          [
+            1619328501,
+            '147907.8587575518'
+          ],
+          [
+            1619328516,
+            '135063.16044782364'
+          ],
+          [
+            1619328531,
+            '125265.4855367947'
+          ],
+          [
+            1619328546,
+            '131484.32374593205'
+          ],
+          [
+            1619328561,
+            '128506.35314877935'
+          ],
+          [
+            1619328576,
+            '135645.2532736919'
+          ],
+          [
+            1619328591,
+            '144056.59948014285'
+          ],
+          [
+            1619328606,
+            '154336.59859408153'
+          ],
+          [
+            1619328621,
+            '166894.53898574616'
+          ],
+          [
+            1619328636,
+            '169942.55611799294'
+          ],
+          [
+            1619328651,
+            '162718.33839203947'
+          ],
+          [
+            1619328666,
+            '166353.4185642925'
+          ],
+          [
+            1619328681,
+            '154666.30677592353'
+          ],
+          [
+            1619328696,
+            '151539.86711566127'
+          ],
+          [
+            1619328711,
+            '147111.77171292162'
+          ],
+          [
+            1619328726,
+            '145664.07148119409'
+          ],
+          [
+            1619328741,
+            '148277.06701275433'
+          ],
+          [
+            1619328756,
+            '148253.63143962697'
+          ],
+          [
+            1619328771,
+            '152678.93662904084'
+          ],
+          [
+            1619328786,
+            '149142.12352995639'
+          ],
+          [
+            1619328801,
+            '146774.93188005552'
+          ],
+          [
+            1619328816,
+            '150737.78019044892'
+          ],
+          [
+            1619328831,
+            '151467.35529243143'
+          ],
+          [
+            1619328846,
+            '186328.82006624647'
+          ],
+          [
+            1619328861,
+            '222879.0034326688'
+          ],
+          [
+            1619328876,
+            '211274.86995717912'
+          ],
+          [
+            1619328891,
+            '195136.61403361673'
+          ],
+          [
+            1619328906,
+            '192917.71153120717'
+          ],
+          [
+            1619328921,
+            '200290.90163374666'
+          ],
+          [
+            1619328936,
+            '246708.293331658'
+          ],
+          [
+            1619328951,
+            '263882.25419267954'
+          ],
+          [
+            1619328966,
+            '245958.13180563593'
+          ],
+          [
+            1619328981,
+            '233169.2019982923'
+          ],
+          [
+            1619328996,
+            '223366.11067840818'
+          ],
+          [
+            1619329011,
+            '215535.62372111296'
+          ],
+          [
+            1619329026,
+            '211956.30837713985'
+          ],
+          [
+            1619329041,
+            '206075.45873981708'
+          ],
+          [
+            1619329056,
+            '194453.3574888578'
+          ],
+          [
+            1619329071,
+            '190628.31905188566'
+          ],
+          [
+            1619329086,
+            '176952.97563925944'
+          ],
+          [
+            1619329101,
+            '161969.5509223355'
+          ],
+          [
+            1619329116,
+            '163276.4684482879'
+          ],
+          [
+            1619329131,
+            '157353.2552160069'
+          ],
+          [
+            1619329146,
+            '146882.99531941232'
+          ],
+          [
+            1619329161,
+            '152258.4560985092'
+          ],
+          [
+            1619329176,
+            '156959.18525475552'
+          ],
+          [
+            1619329191,
+            '159649.51546564006'
+          ],
+          [
+            1619329206,
+            '167908.55714451114'
+          ],
+          [
+            1619329221,
+            '172948.33807402014'
+          ],
+          [
+            1619329236,
+            '182685.45218821947'
+          ],
+          [
+            1619329251,
+            '187030.35202671902'
+          ],
+          [
+            1619329266,
+            '190079.30323855148'
+          ],
+          [
+            1619329281,
+            '192971.9526461216'
+          ],
+          [
+            1619329296,
+            '196336.89160028717'
+          ],
+          [
+            1619329311,
+            '198904.32225845434'
+          ],
+          [
+            1619329326,
+            '217357.3580010716'
+          ],
+          [
+            1619329341,
+            '234419.8015930916'
+          ],
+          [
+            1619329356,
+            '211699.108503841'
+          ],
+          [
+            1619329371,
+            '194296.97437986446'
+          ],
+          [
+            1619329386,
+            '177526.51953365305'
+          ],
+          [
+            1619329401,
+            '174123.3153590256'
+          ],
+          [
+            1619329416,
+            '174236.0884374152'
+          ],
+          [
+            1619329431,
+            '175881.42654414504'
+          ],
+          [
+            1619329446,
+            '181180.89650041307'
+          ],
+          [
+            1619329461,
+            '179659.1297273033'
+          ],
+          [
+            1619329476,
+            '166824.4538851082'
+          ],
+          [
+            1619329491,
+            '167211.34500916823'
+          ],
+          [
+            1619329506,
+            '157478.16192696424'
+          ],
+          [
+            1619329521,
+            '166798.5784502148'
+          ],
+          [
+            1619329536,
+            '158308.49615751408'
+          ],
+          [
+            1619329551,
+            '157600.86333199075'
+          ],
+          [
+            1619329566,
+            '143876.78396160837'
+          ],
+          [
+            1619329581,
+            '142125.21240294934'
+          ],
+          [
+            1619329596,
+            '134845.72705098847'
+          ],
+          [
+            1619329611,
+            '136348.216869971'
+          ],
+          [
+            1619329626,
+            '128227.58563619448'
+          ],
+          [
+            1619329641,
+            '127366.85129458207'
+          ],
+          [
+            1619329656,
+            '144952.86329025935'
+          ],
+          [
+            1619329671,
+            '146120.8645811903'
+          ],
+          [
+            1619329686,
+            '138372.3693190331'
+          ],
+          [
+            1619329701,
+            '137356.03166965354'
+          ],
+          [
+            1619329716,
+            '135886.32810594278'
+          ],
+          [
+            1619329731,
+            '137777.51698661354'
+          ],
+          [
+            1619329746,
+            '139546.60952125024'
+          ],
+          [
+            1619329761,
+            '143152.12746029842'
+          ],
+          [
+            1619329776,
+            '132632.79505347987'
+          ],
+          [
+            1619329791,
+            '132902.87719231608'
+          ],
+          [
+            1619329806,
+            '121644.84048351011'
+          ],
+          [
+            1619329821,
+            '127381.36242802144'
+          ],
+          [
+            1619329836,
+            '133454.34768905598'
+          ],
+          [
+            1619329851,
+            '118548.5648224194'
+          ],
+          [
+            1619329866,
+            '103759.37104672648'
+          ],
+          [
+            1619329881,
+            '92858.28975097225'
+          ],
+          [
+            1619329896,
+            '79393.33731962508'
+          ],
+          [
+            1619329911,
+            '68176.01390834473'
+          ],
+          [
+            1619329926,
+            '83274.89339599916'
+          ],
+          [
+            1619329941,
+            '105078.4121009993'
+          ],
+          [
+            1619329956,
+            '121687.38734146685'
+          ],
+          [
+            1619329971,
+            '173787.31134659174'
+          ],
+          [
+            1619329986,
+            '218940.57387272274'
+          ],
+          [
+            1619330001,
+            '252832.37563365034'
+          ],
+          [
+            1619330016,
+            '250250.00475681957'
+          ],
+          [
+            1619330031,
+            '222391.40952185704'
+          ],
+          [
+            1619330046,
+            '201470.72138033944'
+          ],
+          [
+            1619330061,
+            '188387.77045423904'
+          ],
+          [
+            1619330076,
+            '173486.26445006474'
+          ],
+          [
+            1619330091,
+            '176695.15924696584'
+          ],
+          [
+            1619330106,
+            '161362.67228012058'
+          ],
+          [
+            1619330121,
+            '156280.2942065875'
+          ],
+          [
+            1619330136,
+            '147856.53518165532'
+          ],
+          [
+            1619330151,
+            '142447.18670247635'
+          ],
+          [
+            1619330166,
+            '147411.2790305058'
+          ],
+          [
+            1619330181,
+            '154897.85213886894'
+          ],
+          [
+            1619330196,
+            '165502.40762979828'
+          ],
+          [
+            1619330211,
+            '186345.75300514325'
+          ],
+          [
+            1619330226,
+            '225214.8040061793'
+          ],
+          [
+            1619330241,
+            '212569.63634406356'
+          ]
+        ]
+      }
+    ],
+    resultType: 'matrix'
+  },
+  status: 'success'
+}
+export default chartTempData
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index b87481e18..06109cc53 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -49,6 +49,8 @@
         <endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'endpointQuery'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></endpointQuery>
         <alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
         <panel-tab-new v-if="from === fromRoute.endpoint && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :tabs="tabs.endpoint.endpointTabTitle" :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
+        <!--chartTemp的Tab-->
+        <panel-tab-new v-if="from === fromRoute.chartTemp && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :tabs="tabs.chartTemp.chartTempTabTitle" :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
       </div>
     </div>
   </div>
@@ -127,6 +129,11 @@ export default {
             { prop: 'endpointQuery', name: 'Query' },
             { prop: 'endpointAlertMessage', name: 'Alerts' }
           ]
+        },
+        chartTemp: {
+          chartTempTabTitle: [
+            { prop: 'panel', name: 'Template preview' }
+          ]
         }
       }
     }
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/chartTempPreview.vue b/nezha-fronted/src/components/common/bottomBox/tabs/chartTempPreview.vue
new file mode 100644
index 000000000..89550a9c8
--- /dev/null
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/chartTempPreview.vue
@@ -0,0 +1,622 @@
+<template>
+  <div class="full-width-height">
+    <nz-bottom-data-list
+      :layout="[]"
+      :tabs="tabs"
+      :targetTab="targetTab"
+      @changeTab="changeTab"
+      class="full-width-height"
+    >
+      <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
+      <template v-slot>
+        <div class="panel">
+          <!--图表-->
+          <div class="table-list" id="tableList">
+            <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
+              <div class="box-content">
+                <chart-list :additional-info="obj" :detail="detail" :draggable="draggable" :from="from" :is-model="from == $CONSTANTS.fromRoute.model" @on-edit-chart="editChart"
+                            @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock"></chart-list>
+              </div>
+            </div>
+          </div>
+          <button :class="{'to-top-is-hover': tableHover}" @click="toTop(scrollbarWrap)" class="to-top" style="bottom: 0;" v-show="showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
+          <transition name="right-box">
+            <chart-box :chart="chart" :from="from" :panel-data="panelData" :panel-data-list="panelDataList" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" ref="addChartModal" v-if="rightBox.show"></chart-box>
+          </transition>
+        </div>
+      </template>
+    </nz-bottom-data-list>
+  </div>
+</template>
+
+<script>
+import ChartBox from '../../../page/dashboard/chartBox'
+import ChartList from '../../../charts/chart-list'
+import bus from '../../../../libs/bus'
+import subDataListMixin from '@/components/common/mixin/subDataList'
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+
+export default {
+  name: 'chartTempPreview',
+  mixins: [subDataListMixin],
+  props: {
+    from: String,
+    obj: Object,
+    draggable: { type: Boolean, default: true },
+    detail: Object
+  },
+  data () {
+    return {
+      panelLock: true,
+      showTopBtn: false, // top按钮
+      visible: false,
+      rightBox: { // 面板弹出框相关
+        show: false
+      },
+      tableHover: false,
+      searchTime: bus.getTimezontDateRange(),
+      intervalTimer: null,
+      interval: 0,
+      panel: { // 新增panel
+        id: '',
+        name: ''
+      },
+      chart: {},
+      blankChart: {
+        id: '',
+        title: '',
+        type: 'line',
+        span: 12,
+        height: '400',
+        unit: 2,
+        param: {
+          url: '',
+          threshold: ''
+        },
+        elements: [{ expression: '', legend: '', type: 'expert', id: '' }],
+        panel: '',
+        sync: 0
+      },
+      pageObj: {
+        pageNo: 1,
+        pageSize: -1, // 此处获取所有数据，所以设置一个较大的值
+        total: 0
+      },
+      chartsData: [], // 中间部分图表相关数据
+      panelData: [],
+      panelDataList: [], // chartTemp列表
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [
+        ]
+      },
+      searchLabel: {}, // 搜索参数
+      // ---图表相关参数--start
+      dataList: [], // 数据列表
+      // searchName: '', //  搜索名称
+      filter: { // 过滤条件
+        // productId: 0,
+        panelId: 0,
+        start_time: '',
+        end_time: '',
+        searchName: ''
+      },
+      showPanel: {
+        name: '',
+        type: this.from,
+        id: ''
+      },
+      // removeModal: false, // 删除弹出
+      // deleteObj: {}, // 删除对象
+      // ---图表相关参数--end
+      scrollbarWrap: null
+    }
+  },
+  components: {
+    'chart-box': ChartBox,
+    'chart-list': ChartList,
+    nzBottomDataList
+  },
+  methods: {
+    // 刷新
+    refresh () {
+      this.getTableData(this.obj.id)
+    },
+    refreshTime (st, et) {
+      const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm')
+      const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm')
+      this.searchTime = [startTime, endTime]
+    },
+    panelReloadForDel () {
+      this.getTableData(this.obj.id)
+    },
+    /* 图表相关操作--start */
+    addChart () {
+      this.chart = this.newChart()
+      this.rightBox.show = true
+    },
+    newChart () {
+      return JSON.parse(JSON.stringify(this.blankChart))
+    },
+    // 切换tab
+    changeTab (tab) {
+      this.$emit('changeTab', tab)
+    },
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.refresh()
+      }
+    },
+    // 编辑图表信息,打开编辑弹窗
+    editChart (data) {
+      if (!data.param) {
+        data.param = { url: '', threshold: '' }
+      }
+      this.chart = JSON.parse(JSON.stringify(data))
+      this.rightBox.show = true
+    },
+    // 移除图表:弹出确认框询问
+    delChart (data, from) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {})
+    },
+    delChartOk () {
+      this.getData(this.filter)
+    },
+    // 图表创建成功，回调panel页面，进行图表的刷新
+    createSuccess (msg, data, params) {
+      this.getData(this.filter)
+    },
+    // 获取数据,用在子页面
+    getData (params) {
+      if (params.start_time === '' || params.end_time === '') {
+        const now = bus.getTimezontDateRange()
+        const endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss')
+        const startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss')
+        params.start_time = startTimeTmp
+        params.end_time = endTimeTmp
+        params.from = this.from
+      }
+      if (this.$refs.chartList) {
+        this.$refs.chartList.initData(params)
+      }
+    },
+
+    /* 图表相关操作--end */
+    /* 时间条件查询--start */
+    // 选择日期变化
+    dateChange (val) {
+      // this.searchTime = [...val];
+      const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
+      this.setSearchTime(nowTimeType.type, nowTimeType.value)
+      this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.panelId = this.showPanel.id
+      this.getData(this.filter)
+    },
+    /* 时间条件查询--end */
+    setSearchTime (type, val) { // 设置searchTime
+      if (type === 'minute') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'm')
+      } else if (type === 'hour') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'h')
+      } else if (type === 'date') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'd')
+      }
+      this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
+    },
+    // 公用操作
+    getTableData (linkId) {
+      if (this.from == this.$CONSTANTS.fromRoute.rule || this.from == this.$CONSTANTS.fromRoute.endpoint) {
+        this.getData(this.filter)
+      } else {
+        this.panelData = [this.obj]
+        if (this.panelData.length > 0) {
+          this.showPanel.id = this.filter.panelId = this.panelData[0].id
+          this.getData(this.filter)
+        }
+      }
+    },
+    // 定期刷新
+    selectInterval (val) {
+      this.visible = false
+      clearInterval(this.intervalTimer)
+      if (val) {
+        this.interval = val
+        const start = new Date(this.searchTime[1])
+        const now = new Date()
+        const interval = Math.floor((now.getTime() - start.getTime()) / 1000) // 计算当前结束时间到现在的间隔（秒）
+        if (interval >= 60) { // 如果结束时间到现在超过1分钟，则
+          this.getIntervalData(interval)
+        }
+        this.intervalTimer = setInterval(() => {
+          this.getIntervalData(this.interval)
+        }, val * 1000)
+      }
+    },
+    getIntervalData (interval) { // interval:结束时间到现在的秒数
+      const start = new Date(this.searchTime[0])
+      const end = new Date(this.searchTime[1])
+      start.setSeconds(start.getSeconds() + interval)
+      end.setSeconds(end.getSeconds() + interval)
+      const startTime = bus.timeFormate(start, 'yyyy-MM-dd hh:mm')
+      const endTime = bus.timeFormate(end, 'yyyy-MM-dd hh:mm')
+      this.searchTime = [startTime, endTime]
+      // 刷新数据
+      this.dateChange()
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData(this.obj.id)
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      this.getTableData(this.obj.id)
+    },
+    search: function () {
+      if (this.$refs.chartList) {
+        this.$refs.chartList.searchCharts(this.filter.searchName)
+      }
+    },
+    // 滚动事件触发下拉加载
+    onScroll () {
+      const _self = this
+      this.scrollbarWrap.addEventListener('scroll', bus.debounce(function () {
+        _self.showTopBtn = _self.scrollbarWrap.scrollTop > 50
+        _self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop)
+      }, 300))
+    },
+    focusInput: function () {
+      let classVal = document.getElementById('queryPanel').parentElement.getAttribute('class')
+      classVal = classVal.replace('query-input-inactive', 'query-input-active')
+      document.getElementById('queryPanel').parentElement.setAttribute('class', classVal)
+      this.$refs.queryPanel.focus()
+    },
+    blurInput: function () {
+      if (!this.filter.searchName || this.filter.searchName == '') {
+        setTimeout(function () {
+          let classVal = document.getElementById('queryPanel').parentElement.getAttribute('class')
+          classVal = classVal.replace('query-input-active', 'query-input-inactive')
+          document.getElementById('queryPanel').parentElement.setAttribute('class', classVal)
+        }, 100)
+      }
+    },
+    clearInput: function () {
+      this.$refs.queryPanel.focus()
+    },
+    syncChart: function () {
+      if (this.from == this.$CONSTANTS.fromRoute.asset || this.from == this.$CONSTANTS.fromRoute.model) {
+        this.$confirm(this.$t('tip.syncTip'), {
+          confirmButtonText: this.$t('tip.yes'),
+          cancelButtonText: this.$t('tip.no'),
+          type: 'warning'
+        }).then(() => {
+          const param = {
+            modelId: this.from == this.$CONSTANTS.fromRoute.model ? this.obj.id : null,
+            assetId: this.from == this.$CONSTANTS.fromRoute.asset ? this.obj.id : null
+          }
+          this.$put('/model/syncChart', param).then(response => {
+            if (response.code == 200) {
+              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.syncSuccess') })
+              if (this.from == this.$CONSTANTS.fromRoute.asset) {
+                this.refresh()
+              }
+            } else {
+              console.error(response.msg)
+              this.$message.error(response.msg)
+            }
+          })
+        })
+      }
+    },
+    toTop (wrap) {
+      let currentTop = wrap.scrollTop
+      const interval = currentTop / 10
+      const intervalFunc = setInterval(function () { // 花200ms分10次回到顶部，模拟动画效果
+        if (currentTop === 0) {
+          clearInterval(intervalFunc)
+        } else {
+          currentTop = (currentTop - interval) < interval * 0.5 ? 0 : currentTop - interval
+          wrap.scrollTop = currentTop
+        }
+      }, 20)
+    },
+    tableListEnter () {
+      this.tableHover = true
+    },
+    tableListLeave () {
+      this.tableHover = false
+    }
+  },
+  mounted: function () {
+    this.scrollbarWrap = this.$refs.dashboardScrollbar
+    this.onScroll()
+    document.querySelector('#tableList').addEventListener('mouseenter', this.tableListEnter)
+    document.querySelector('#tableList').addEventListener('mouseleave', this.tableListLeave)
+  },
+  watch: {
+    'filter.searchName': function (n, o) {
+      const temp = this
+      setTimeout(function () {
+        temp.search()
+      }, 1000)
+    },
+    obj: {
+      immediate: true,
+      handler (n, o) {
+        setTimeout(() => {
+          if (n && n.id) {
+            this.getTableData(n.id)
+          }
+        }, 500)
+      }
+    }
+  },
+  beforeDestroy () {
+    document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter)
+    document.querySelector('#tableList').removeEventListener('mouseleave', this.tableListLeave)
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    };
+  }
+}
+</script>
+<style scoped lang="scss">
+  .panel {
+    height: 100%;
+  }
+
+  .panel .el-table {
+    border-radius: 5px;
+  }
+
+  .panel-list-width {
+    width:240px;
+  }
+
+  .panel-dropdown-title {
+    line-height:24px;
+    padding-left:5px;
+    margin-left:10px;
+    margin-top: 3px;
+    text-align:left;
+    border-radius:4px;
+    width:120px;
+    height:24px;
+    border:solid 1px  #d8dce1;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+  .panel-list-title {
+    min-height:24px;
+    width:100px;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .panel-list-item {
+    width:190px;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .content-right-option {
+    cursor: pointer;
+    display: inline-block;
+    margin-right: 6px;
+  }
+
+  .content-right-option .nz-icon-delete {
+    color: #F98D9A;
+  }
+
+  .content-right-option .nz-icon-delete:hover {
+    color: #D96D7A;
+  }
+
+  .content-right-option .nz-icon-view {
+    color: #60BEFF;
+  }
+
+  .content-right-option .nz-icon-view:hover {
+    color: #409EFF;
+  }
+
+  /* begin-chart list*/
+  .table-list {
+    margin-top: 6px;
+    overflow-y: auto;
+    height: calc(100% - 56px);
+  }
+
+  .box-content {
+    position: relative;
+  }
+
+  /* end-chart list*/
+  /* begin--Panel-自定义可编辑的el-select下拉框样式*/
+  .panel-dropdown-btn {
+    display: inline-block;
+    margin-left: 7px;
+    float: right;
+    color: #60BEFF;
+    font-size: 13px
+  }
+
+  .panel-dropdown-btn:hover {
+    color: #409EFF;
+  }
+
+  .panel-dropdown-btn-create {
+    display: inline-block;
+    float: left;
+    font-size: 13px;
+    color: #F98D9A;
+    width: 100%;
+  }
+
+  .panel-dropdown-btn-create:hover {
+    color: #D96D7A;
+  }
+
+  .panel-dropdown-btn-delete {
+    color: #F98D9A;
+    font-size: 13px
+  }
+
+  .panel-dropdown-btn-delete:hover {
+    color: #D96D7A;
+  }
+
+  .panel-dropdown-error-message {
+    color: #F98D9A;
+  }
+
+  /* end--Panel-自定义可编辑的el-select下拉框样式*/
+  .panel-select-width {
+    width: 150px;
+  }
+
+  .panel-refresh-interval {
+    margin-right: 5px;
+    float: right;
+  }
+
+  .panel-refresh-interval-select {
+    width: 95px;
+  }
+
+  .panel-calendar {
+    float: right;
+    margin-right: 1px;
+  }
+
+  .top-tools {
+    button {
+      background: $btn-light-background-color;
+      outline: none;
+      border: 1px solid #ccc;
+    }
+
+    button:hover {
+      background: $btn-light-background-color-hover;
+    }
+  }
+
+  .nz-dashboard-dropdown {
+    height: 300px;
+    overflow-y: auto;
+    li {
+      /*padding: 0 20px !important;*/
+      padding-left:20px !important;
+      padding-right:0px !important;
+      width:240px;
+      white-space:nowrap;
+      overflow-x:hidden;
+      text-overflow:ellipsis;
+    }
+  }
+
+  .nz-dashboard-dropdown-bg {
+    background: $global-text-color-active;
+    color: #fff;
+  }
+
+  .el-dropdown-link {
+    cursor: pointer;
+    font-weight: bold;
+  }
+
+  .refresh {
+    display: flex;
+    background: #fff;
+    border-radius: 4px;
+    align-items: center;
+    justify-content: center;
+    margin: 0 10px;
+    border: 1px solid #ccc;
+    background: $btn-light-background-color;
+
+    span {
+      display: inline-block;
+      padding: 1px 8px;
+    }
+  }
+
+  .popover_ul li {
+    padding: 10px 3px;
+    cursor: pointer;
+  }
+
+  .popover_ul li:hover {
+    background: $dropdown-hover-background-color !important;
+    color: $global-text-color-active !important;
+  }
+
+  .nz-dashboard-refresh {
+    border-right: 1px solid #ccc;
+    color: #F0BF84;
+  }
+
+  .nz-dashboard-picker {
+  }
+  .full-width-height{
+    width: 100%;
+    height: 100%;
+  }
+</style>
+<style lang="scss">
+  .nz-dashboard-dropdown {
+    z-index: 3001 !important;
+  }
+  .panel .top-tools input {
+    background-color: $content-right-background-color;
+  }
+  .panel .top-tools  .el-input__inner {
+    background-color: $content-right-background-color;
+  }
+  .panel-calendar .el-range-editor--mini.el-input__inner {
+    height: 25px !important;
+    border-color: #d8d8d8;
+  }
+
+  .panel-calendar .el-range-editor--mini .el-range__close-icon {
+    line-height: 18px;
+  }
+
+  .panel-calendar .el-range-editor--mini .el-range__icon {
+    display: none;
+  }
+
+  .panel-calendar .el-range-editor--mini .el-range-separator {
+    line-height: 17px;
+  }
+
+  .panel-calendar .el-date-editor--datetimerange.el-input, .panel-calendar .el-date-editor--datetimerange.el-input__inner {
+    padding-right: 0;
+    vertical-align: top;
+  }
+
+  .nz-dashboard-dropdown .nz-icon-edit {
+    font-size: 12px;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
index f647f9b9f..c5d8a11c8 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -15,7 +15,7 @@
             <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
               <div class="box-content">
                 <chart-list :additional-info="obj" :detail="detail" :draggable="draggable" :from="from" :is-model="from == $CONSTANTS.fromRoute.model" @on-edit-chart="editChart"
-                            @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock"></chart-list>
+                            @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock" :panel-data-list="panelData"></chart-list>
               </div>
             </div>
           </div>
@@ -161,47 +161,7 @@ export default {
         confirmButtonText: this.$t('tip.yes'),
         cancelButtonText: this.$t('tip.no'),
         type: 'warning'
-      }).then(() => {
-        this.$delete('panel/' + this.showPanel.id + '/charts?ids=' + data.id).then(response => {
-          if (response.code === 200) {
-            this.$message({
-              duration: 2000,
-              type: 'success',
-              message: this.$t('tip.deleteSuccess')
-            })
-            this.rightBox.show = false
-            const chartList = this.$refs.chartList.dataList
-            let nextChart = null; let prevChart = null
-            for (let i = 0; i < chartList.length; i++) {
-              if (chartList[i].id === data.id) {
-                chartList.splice(i, 1)
-              }
-              if (data.next != -1) {
-                if (chartList[i].id === data.next) {
-                  nextChart = chartList[i]
-                }
-              }
-              if (data.prev != 0) {
-                if (chartList[i].id === data.prev) {
-                  prevChart = chartList[i]
-                }
-              }
-            }
-            this.$refs.chartList.loadChartData(this.scrollbarWrap.scrollTop)
-            if (nextChart && prevChart) { // 删除图表为中间位置
-              prevChart.next = nextChart.id
-              nextChart.prev = prevChart.id
-            } else {
-              if (!nextChart) prevChart.next = -1
-              if (!prevChart) nextChart.prev = 0
-            }
-            // this.getTableData(this.obj.id); //删除相关图表后，刷新面板数据
-          } else {
-            console.error(response.msg)
-            this.$message.error(response.msg)
-          }
-        })
-      })
+      }).then(() => {})
     },
     delChartOk () {
       this.getData(this.filter)
@@ -265,31 +225,41 @@ export default {
       if (this.from == this.$CONSTANTS.fromRoute.rule || this.from == this.$CONSTANTS.fromRoute.endpoint) {
         this.getData(this.filter)
       } else {
-        this.$get('panel', { type: this.from, link: linkId }).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.getData(this.filter)
-            }
-          } else {
-            if (response.msg) {
-              console.error(response.msg)
-              this.$message.error(response.msg)
-            } else if (response.error) {
-              console.error(response.error)
-              this.$message.error(response.error)
+        if (this.from == this.$CONSTANTS.fromRoute.chartTemp) {
+          console.log(this.obj)
+          this.panelData = [this.obj]
+          console.log(this.panelData)
+          if (this.panelData.length > 0) {
+            this.showPanel.id = this.filter.panelId = this.panelData[0].id
+            this.getData(this.filter)
+          }
+        } else {
+          this.$get('panel', { type: this.from, link: linkId }).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.getData(this.filter)
+              }
             } else {
-              console.error(response)
-              this.$message.error(response)
+              if (response.msg) {
+                console.error(response.msg)
+                this.$message.error(response.msg)
+              } else if (response.error) {
+                console.error(response.error)
+                this.$message.error(response.error)
+              } else {
+                console.error(response)
+                this.$message.error(response)
+              }
             }
-          }
-        }).catch((error) => {
-          if (error) {
-            console.error(error)
-            this.$message.error(error.toString())
-          }
-        })
+          }).catch((error) => {
+            if (error) {
+              console.error(error)
+              this.$message.error(error.toString())
+            }
+          })
+        }
       }
     },
     // 定期刷新
diff --git a/nezha-fronted/src/components/common/js/constants.js b/nezha-fronted/src/components/common/js/constants.js
index 7aea1d0d9..c6fab7242 100644
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -232,5 +232,6 @@ export const fromRoute = {
   menus: 'menus',
   notify: 'notify',
   link: 'link',
-  apiKey: 'apiKey'
+  apiKey: 'apiKey',
+  chartTemp: 'chartTemp'
 }
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index fd974ef6c..15b469efa 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -4,9 +4,9 @@
       <!-- begin--标题-->
       <div class="right-box-title">{{$t("overall.createEndpoint")}}</div>
       <!-- end--标题-->
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns"></div>
-      <!-- end--顶部按钮-->
+      <div class="header__operation">
+        <span v-cancel="{obj: object, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
     </div>
 
     <!-- begin--表单-->
diff --git a/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue b/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
index 9940f4a29..e038c9157 100644
--- a/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
+++ b/nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
@@ -4,9 +4,9 @@
       <!-- begin--标题-->
       <div class="right-box-title">{{$t("overall.batchEndpoint")}}</div>
       <!-- end--标题-->
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns"></div>
-      <!-- end--顶部按钮-->
+      <div class="header__operation">
+        <span v-cancel="{obj: endpoint, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
     </div>
 
     <!-- begin--表单-->
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
index 9b54e8d24..66627e049 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -14,14 +14,9 @@
       </span>
       </div>
       <!-- end--标题-->
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns right-box-form-delete" v-if="optionType === 'edit'">
-        <button v-if="editEndpoint.id" id="module-del" v-has="'monitor_endpoint_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien" type="button" @click="del">
-          <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 class="header__operation">
+        <span v-cancel="{obj: editEndpoint, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
       </div>
-      <!-- end--顶部按钮-->
     </div>
 
     <!-- begin--表单-->
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 7d7c267b5..50396bf50 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -4,14 +4,9 @@
       <!-- begin--标题-->
       <div class="right-box-title">{{editModule.id ? $t("project.module.editModule") + "  ID：" + editModule.id : $t("project.module.createModule")}}</div>
       <!-- end--标题-->
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns right-box-form-delete">
-        <button v-if="editModule.id" id="module-del" v-has="'monitor_module_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien" type="button" @click="del">
-          <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 class="header__operation">
+        <span v-cancel="{obj: editModule, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
       </div>
-      <!-- end--顶部按钮-->
     </div>
 
     <!-- begin--表单-->
diff --git a/nezha-fronted/src/components/common/rightBox/projectBox.vue b/nezha-fronted/src/components/common/rightBox/projectBox.vue
index 52af4aa2c..db1fd9839 100644
--- a/nezha-fronted/src/components/common/rightBox/projectBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/projectBox.vue
@@ -5,14 +5,9 @@
       <div class="right-box-title">{{editProject.id ? $t("project.project.editProject") + "  ID：" + editProject.id : $t("overall.createProject")}}</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" id="project-del" type="button" v-has="'project_delete'" v-if="project.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 class="header__operation">
+        <span v-cancel="{obj: editProject, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
       </div>
-      <!-- end--顶部按钮-->
 
     </div>
     <div class="right-box-form-box right-box__container">
diff --git a/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue b/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
index a090996d9..e4543a11c 100644
--- a/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
@@ -34,6 +34,7 @@
       </template>
       <template slot-scope="scope" :column="item">
         <span v-if="item.prop==='varType'">{{scope.row[item.prop]===1?'Asset':'endpoint'}}</span>
+        <span v-else-if="item.prop==='type'" :class="'asd'">{{scope.row[item.prop]}}</span>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
         <template v-else>-</template>
       </template>
@@ -76,6 +77,10 @@ export default {
           label: this.$t('config.exprTemp.name'),
           prop: 'name',
           show: true
+        }, {
+          label: this.$t('config.exprTemp.type'),
+          prop: 'type',
+          show: true
         }, {
           label: this.$t('config.exprTemp.varType'),
           prop: 'varType',
diff --git a/nezha-fronted/src/components/page/config/template/chartTemp.vue b/nezha-fronted/src/components/page/config/template/chartTemp.vue
index ab3085349..4c8856235 100644
--- a/nezha-fronted/src/components/page/config/template/chartTemp.vue
+++ b/nezha-fronted/src/components/page/config/template/chartTemp.vue
@@ -5,7 +5,7 @@
       :api="url"
       :layout="['searchInput', 'elementSet']"
       :custom-table-title.sync="tools.customTableTitle"
-      :from="fromRoute.expressionTemplate"
+      :from="fromRoute.chartTemp"
       :search-msg="searchMsg">
       <template v-slot:top-tool-left>
         <div id="module-type-1"  class="nz-tab-item-box" @click="clickTab([],'exprTemp')"><!--v-has="'snmp_browser_view'"-->
@@ -156,6 +156,9 @@ export default {
         if (response.code === 200) {
           for (let i = 0; i < response.data.list.length; i++) {
             response.data.list[i].status = response.data.list[i].status + ''
+            if (response.data.list[i].type === 'group') {
+              response.data.list[i].children = []
+            }
           }
           this.tableData = response.data.list
           this.pageObj.total = response.data.total
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 71f0e4445..ee584312f 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -642,7 +642,7 @@ export default {
       this.panelName = panel.name
       this.panelId = panel.id
       this.editChart.groupId = ''
-      this.$get('visual/panel/chart?panelId=' + this.panelId).then(response => {
+      this.$get('visual/panel/chart?panelId=' + this.panelId + '&pageSize=-1').then(response => {
         if (response.code === 200) {
           this.groupArr = []
           response.data.list.forEach((item, index) => {
@@ -1784,7 +1784,7 @@ export default {
         if (this.showPanel.id || this.from === 'temp') {
           this.panelId = this.showPanel.id
         }
-        this.$get('visual/panel/chart?panelId=' + this.panelId).then(response => {
+        this.$get('visual/panel/chart?panelId=' + this.panelId + '&pageSize=-1').then(response => {
           if (response.code === 200) {
             this.groupArr = []
             response.data.list.forEach((item, index) => {
diff --git a/nezha-fronted/src/components/page/monitor/project/project.vue b/nezha-fronted/src/components/page/monitor/project/project.vue
index 489840e78..8e2dbbd65 100644
--- a/nezha-fronted/src/components/page/monitor/project/project.vue
+++ b/nezha-fronted/src/components/page/monitor/project/project.vue
@@ -58,17 +58,13 @@
 </template>
 
 <script>
-import exportXLSX from '@/components/common/exportXLSX'
 import bus from '@/libs/bus'
 import topologyL5 from '@/components/common/project/topologyL5'
-import deleteButton from '@/components/common/deleteButton'
 
 export default {
   name: 'project2',
   components: {
     topologyL5,
-    'export-excel': exportXLSX,
-    'delete-button': deleteButton
   },
   data () {
     return {
@@ -624,7 +620,6 @@ export default {
       this.endpointPageObj.pageSize = pageSize
     }
     this.getUserData()
-    this.getProjectList()
   },
   mounted () {
     // 初始化表头