Merge branch 'dev-2.0' of https://git.mesalab.cn/nezha/nezha-fronted into dev-2.0

nezha-fronted/src/assets/stylus/main.scss

@@ -1290,11 +1290,11 @@ li{
 }
 .right-box-form .one-third-form-item-left{
   display: inline-block;
-  width: 170px;
+  width: calc(50% - 5px);
 }
 .right-box-form .one-third-form-item-right{
   display: inline-block;
-  width: 170px;
+  width: calc(50% - 5px);
   .el-form-item__label{
     width: 20px !important;
   }
@@ -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{

nezha-fronted/src/components/charts/chart-alert-list.vue

@@ -24,7 +24,7 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>

nezha-fronted/src/components/charts/chart-bar-statistics.vue

@@ -24,7 +24,7 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>

nezha-fronted/src/components/charts/chart-detail.vue

@@ -319,23 +319,23 @@ export default {
       oldSearchTime: [],
 
       assetKey: {
-        host: this.$t('asset.tableTitle.host'),
+        host: this.$t('asset.host'),
         id: 'Id',
-        assetType: this.$t('asset.tableTitle.assetType'),
+        assetType: this.$t('asset.assetType'),
-        sn: this.$t('asset.tableTitle.device'),
+        sn: this.$t('asset.device'),
-        state: this.$t('asset.tableTitle.assetState'),
+        state: this.$t('asset.assetState'),
-        pingRtt: this.$t('asset.tableTitle.assetPing'),
+        pingRtt: this.$t('asset.assetPing'),
-        dataCenter: this.$t('asset.tableTitle.dataCenter'),
+        dataCenter: this.$t('asset.dataCenter'),
-        cabinet: this.$t('asset.tableTitle.cabinet'),
+        cabinet: this.$t('asset.cabinet'),
-        model: this.$t('asset.tableTitle.model'),
+        model: this.$t('asset.model'),
-        vendor: this.$t('asset.tableTitle.vendor'),
+        vendor: this.$t('asset.vendor'),
-        purchaseDate: this.$t('asset.tableTitle.procurementDate'),
+        purchaseDate: this.$t('asset.procurementDate'),
-        principal: this.$t('asset.tableTitle.principal'),
+        principal: this.$t('asset.principal'),
-        tel: this.$t('asset.tableTitle.principalTel'),
+        tel: this.$t('asset.principalTel'),
-        pingStatus: this.$t('asset.tableTitle.assetPing'),
+        pingStatus: this.$t('asset.assetPing'),
-        pingLastReply: this.$t('asset.tableTitle.lastReply'),
+        pingLastReply: this.$t('asset.lastReply'),
-        endpoint: this.$t('asset.tableTitle.modules'),
+        endpoint: this.$t('asset.modules'),
-        alert: this.$t('asset.tableTitle.alerts'),
+        alert: this.$t('asset.alerts'),
         tags: this.$t('overall.tag')
       },
       projectKey: {

nezha-fronted/src/components/charts/chart-group.vue

@@ -18,7 +18,7 @@
                 {{chartData.name}}
                 <span v-show="!showList" class="collapse-content">({{chartData.children.length}} charts)</span>
               </span>
-              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>

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,11 @@ export default {
       // showShadow:false,
     }
   },
+  watch: {
+    panelDataList (n) {
+      this.getData(this.filter)
+    }
+  },
   methods: {
     dropmenuChange (id, show) {
       if (show) {
@@ -662,9 +670,24 @@ export default {
         })
         return
       }
+      if (param.from == this.$CONSTANTS.fromRoute.chartTemp) {
+        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
@@ -737,7 +760,6 @@ export default {
       })
     },
     loadChartData (scrollTop) {
-      console.log(scrollTop)
       if (this.dataList.length > 0) {
         this.dataList.forEach((item, index) => {
           if (!item.isLoaded) {
@@ -918,6 +940,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单独获取数据
@@ -1723,7 +1748,6 @@ export default {
     },
     // 懒加载，判断网页区域，加载可见区的prom数据
     handleElementInViewport (ele, scrollTop, item, index, isSearch) {
-      console.log(ele, scrollTop, item, index)
       /*
         网页被卷去的高：document.body.scrollTop
         网页正文全文高：document.body.scrollHeight

nezha-fronted/src/components/charts/chart-pie.vue

@@ -24,7 +24,7 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>

nezha-fronted/src/components/charts/chart-single-stat.vue

@@ -24,7 +24,7 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>

nezha-fronted/src/components/charts/chart-table.vue

@@ -25,7 +25,7 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>

nezha-fronted/src/components/charts/chart-url.vue

@@ -12,7 +12,7 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>

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

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -38,7 +38,7 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>

nezha-fronted/src/components/charts/text-chart.vue

@@ -12,7 +12,7 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"   :class="{'visible':caretShow,'hidden':!caretShow}">
+              <span class="chart-title-icon"  v-if="from !== 'chartTemp'"  :class="{'visible':caretShow,'hidden':!caretShow}">
                 <span v-if="chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>

nezha-fronted/src/components/common/bottomBox/bottomBox.vue

@@ -51,6 +51,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>
@@ -70,7 +72,7 @@ import terminalLogMonitorTab from './tabs/terminalLogMonitorTab'
 import terminalLogCMDTab from './tabs/terminalLogCMDTab'
 import operationLogTab from './tabs/operationLogTab'
 import terminalLogTab from './tabs/terminalLogTab'
-import assetTab from "@/components/common/bottomBox/tabs/assetTab";
+import assetTab from '@/components/common/bottomBox/tabs/assetTab'
 import { fromRoute } from '@/components/common/js/constants'
 
 export default {
@@ -120,7 +122,7 @@ export default {
         },
         module: {
           moduleTabTitle: [
-            { prop: 'endpoint', name: this.$t('asset.tableTitle.endpoint') },
+            { prop: 'endpoint', name: this.$t('asset.endpoint') },
             { prop: 'moduleAlertMessage', name: 'Alerts' },
             { prop: 'panel', name: 'Detail' }
           ]
@@ -132,12 +134,17 @@ export default {
             { prop: 'endpointAlertMessage', name: 'Alerts' }
           ]
         },
+        chartTemp: {
+          chartTempTabTitle: [
+            { prop: 'panel', name: 'Template preview' }
+          ]
+        },
         dc: {
           cabinet: [
             { prop: 'asset', name: this.$t('asset.assets'), active: false },
             { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: true }
           ],
-          asset:[
+          asset: [
             { prop: 'asset', name: this.$t('asset.assets'), active: true },
             { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false }
           ]

nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue

@@ -3,8 +3,8 @@
     <div class="sub-top-tools">
       <div class="sub-list-tabs" v-if="from===fromRoute.module">
         <div class="sub-list-tab-title">{{obj.name}}</div>
-        <div @click="changeTab('endpoint')" class="sub-list-tab" id="endpoint-tab-change-endpoint">{{$t("asset.tableTitle.modules")}}</div>
+        <div @click="changeTab('endpoint')" class="sub-list-tab" id="endpoint-tab-change-endpoint">{{$t("asset.modules")}}</div>
-        <div class="sub-list-tab sub-list-tab-active" >{{$t("asset.tableTitle.alerts")}}</div>
+        <div class="sub-list-tab sub-list-tab-active" >{{$t("asset.alerts")}}</div>
       </div>
       <div class="sub-list-tabs" v-else>
         <div class="sub-list-tab-title">
@@ -13,8 +13,8 @@
           <template v-if="from == $CONSTANTS.fromRoute.endpoint"><div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{obj ? obj.id : ''}}</div></template>
         </div><div :id="from+'-change-panelordetail'"
         @click="changeTab(from == $CONSTANTS.fromRoute.asset || from == $CONSTANTS.fromRoute.rule || from == $CONSTANTS.fromRoute.endpoint? 'panel' : 'detail')" class="sub-list-tab">{{$t("overall.detail")}}</div><div
-        class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.alerts")}}</div><div v-if="from == $CONSTANTS.fromRoute.asset" :id="from+'-change-modules'"
+        class="sub-list-tab sub-list-tab-active">{{$t("asset.alerts")}}</div><div v-if="from == $CONSTANTS.fromRoute.asset" :id="from+'-change-modules'"
-        @click="changeTab('endpoint')" class="sub-list-tab" v-has="'asset_endpoint_view'">{{$t("asset.tableTitle.modules")}}</div>
+        @click="changeTab('endpoint')" class="sub-list-tab" v-has="'asset_endpoint_view'">{{$t("asset.modules")}}</div>
         <div @click="changeTab('endpointQuery')" class="sub-list-tab" v-has="'project_endpoint_query_chart_view'" v-if="from == $CONSTANTS.fromRoute.endpoint" :id="from+'-change-endpoint'">{{$t("overall.query")}}</div>
       </div>
       <div class="top-tool-right">

nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue

@@ -98,7 +98,7 @@ export default {
           disabled: false
         }, {
           id: 23,
-          name: this.$t('asset.tableTitle.cabinet'),
+          name: this.$t('asset.cabinet'),
           type: 'input',
           label: 'cabinetName',
           disabled: false

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>

nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue

@@ -22,7 +22,7 @@
       <div class="sub-list-tabs">
         <div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{currentEndpoint ? currentEndpoint.id : ''}}</div><div
         class="sub-list-tab" @click="changeTab('panel')" id="endpoint-query-changepanel">{{$t("overall.detail")}}</div>
-        <div class="sub-list-tab" @click="changeTab('alertMessage')" id="endpoint-query-alertMessage">{{$t("asset.tableTitle.alerts")}}</div>
+        <div class="sub-list-tab" @click="changeTab('alertMessage')" id="endpoint-query-alertMessage">{{$t("asset.alerts")}}</div>
         <div class="sub-list-tab sub-list-tab-active">{{$t("overall.query")}}</div>
       </div>
       <div class="top-tool-right">

nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue

@@ -4,13 +4,13 @@
       <div class="sub-list-tabs" v-if="from===fromRoute.asset">
         <div class="sub-list-tab-title">{{obj.host}}</div>
         <div class="sub-list-tab" @click="changeTab('panel')" id="endpoint-tab-change-panel">{{$t("overall.detail")}}</div>
-        <div @click="changeTab('alertMessage')" class="sub-list-tab" v-has="'asset_alerts_view'" id="endpoint-tab-change-alertmsg">{{$t("asset.tableTitle.alerts")}}</div>
+        <div @click="changeTab('alertMessage')" class="sub-list-tab" v-has="'asset_alerts_view'" id="endpoint-tab-change-alertmsg">{{$t("asset.alerts")}}</div>
-        <div class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.modules")}}</div>
+        <div class="sub-list-tab sub-list-tab-active">{{$t("asset.modules")}}</div>
       </div>
       <div class="sub-list-tabs" v-if="from===fromRoute.module">
         <div class="sub-list-tab-title">{{obj.name}}</div>
-        <div class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.modules")}}</div>
+        <div class="sub-list-tab sub-list-tab-active">{{$t("asset.modules")}}</div>
-        <div @click="changeTab('alertMessage')" class="sub-list-tab" id="endpoint-tab-change-alertmsg">{{$t("asset.tableTitle.alerts")}}</div>
+        <div @click="changeTab('alertMessage')" class="sub-list-tab" id="endpoint-tab-change-alertmsg">{{$t("asset.alerts")}}</div>
       </div>
       <div class="top-tool-right">
         <div class="top-tool-search">

nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue

@@ -10,14 +10,14 @@
           <template v-else-if="from == $CONSTANTS.fromRoute.endpoint">{{$t("project.endpoint.endpointId")}}: {{obj.id}}</template>
         </div><div class="sub-list-tab sub-list-tab-active" v-if="from == $CONSTANTS.fromRoute.model">{{$t("dashboard.panel.title")}}</div><template v-if="from == $CONSTANTS.fromRoute.asset"><div
           class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
-          @click="changeTab('alertMessage')" class="sub-list-tab" v-has="'asset_alerts_view'" id="panel-tab-change-asset-alertmsg">{{$t("asset.tableTitle.alerts")}}</div><div
+          @click="changeTab('alertMessage')" class="sub-list-tab" v-has="'asset_alerts_view'" id="panel-tab-change-asset-alertmsg">{{$t("asset.alerts")}}</div><div
-          @click="changeTab('endpoint')" class="sub-list-tab" v-has="'asset_endpoint_view'" id="panel-tab-change-endpoint">{{$t("asset.tableTitle.modules")}}</div>
+          @click="changeTab('endpoint')" class="sub-list-tab" v-has="'asset_endpoint_view'" id="panel-tab-change-endpoint">{{$t("asset.modules")}}</div>
         </template><template v-if="from == $CONSTANTS.fromRoute.rule"><div
           class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
-          @click="changeTab('alertMessage')" class="sub-list-tab" v-has="'rule_alerts_view'" id="panel-tab-change-rule-alertmsg">{{$t("asset.tableTitle.alerts")}}</div>
+          @click="changeTab('alertMessage')" class="sub-list-tab" v-has="'rule_alerts_view'" id="panel-tab-change-rule-alertmsg">{{$t("asset.alerts")}}</div>
         </template><template v-if="from == $CONSTANTS.fromRoute.endpoint"><div
           class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
-          @click="changeTab('alertMessage')" class="sub-list-tab " v-has="'project_endpoint_alerts_view'">{{$t("asset.tableTitle.alerts")}}</div><div
+          @click="changeTab('alertMessage')" class="sub-list-tab " v-has="'project_endpoint_alerts_view'">{{$t("asset.alerts")}}</div><div
           @click="changeTab('endpointQuery')" class="sub-list-tab" v-has="'project_endpoint_query_chart_view'">{{$t("overall.query")}}</div>
         </template>
       </div>

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(() => {
+      }).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)
-          }
-        })
-      })
     },
     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 (this.from == this.$CONSTANTS.fromRoute.chartTemp) {
-          if (response.code === 200) {
+          console.log(this.obj)
-            this.panelData = response.data.list
+          this.panelData = [this.obj]
-            if (this.panelData.length > 0) {
+          console.log(this.panelData)
-              this.showPanel.id = this.filter.panelId = this.panelData[0].id
+          if (this.panelData.length > 0) {
-              this.getData(this.filter)
+            this.showPanel.id = this.filter.panelId = this.panelData[0].id
-            }
+            this.getData(this.filter)
-          } else {
+          }
-            if (response.msg) {
+        } else {
-              console.error(response.msg)
+          this.$get('panel', { type: this.from, link: linkId }).then(response => {
-              this.$message.error(response.msg)
+            if (response.code === 200) {
-            } else if (response.error) {
+              this.panelData = response.data.list
-              console.error(response.error)
+              if (this.panelData.length > 0) {
-              this.$message.error(response.error)
+                this.showPanel.id = this.filter.panelId = this.panelData[0].id
+                this.getData(this.filter)
+              }
             } else {
-              console.error(response)
+              if (response.msg) {
-              this.$message.error(response)
+                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) => {
-        }).catch((error) => {
+            if (error) {
-          if (error) {
+              console.error(error)
-            console.error(error)
+              this.$message.error(error.toString())
-            this.$message.error(error.toString())
+            }
-          }
+          })
-        })
+        }
       }
     },
     // 定期刷新

nezha-fronted/src/components/common/js/constants.js

@@ -230,5 +230,6 @@ export const fromRoute = {
   menus: 'menus',
   notify: 'notify',
   link: 'link',
-  apiKey: 'apiKey'
+  apiKey: 'apiKey',
+  chartTemp: 'chartTemp'
 }

nezha-fronted/src/components/common/language/cn.js

@@ -278,7 +278,11 @@ const cn = {
         content: '内容',
         tooltip: 'Tooltip',
         displayChart: '图表',
-        aggregation: 'Aggregation'
+        aggregation: 'Aggregation',
+        varType: 'Vartype',
+        pid: 'Chart 模板',
+        selectAsset: '请选择Asset',
+        selectEndpoint: '请选择Endpoint'
       },
       chartTableColumn: {
         metric: '指标',
@@ -336,7 +340,8 @@ const cn = {
       moreTitle: '仅显示 20 个时间序列。',
       moreTitleOther: '仅显示 10 条数据。',
       showAll: '全部显示 ',
-      showAllOther: '全部数据 '
+      showAllOther: '全部数据 ',
+      addChartTemp: 'addChartTemp'
     },
     metric: {
       name: '指标名称',
@@ -545,6 +550,7 @@ const cn = {
     principal: '负责人',
     tel: '电话',
     featureTitle: '属性',
+    endpoint: 'Endpoint',
     endpointUpNum: '代表正常的数量',
     endpointNum: '代表总的数量',
     active: '存活', // "存活",
@@ -562,7 +568,23 @@ const cn = {
     usernamePrompt: '用户名提示',
     passwordPrompt: '密码提示',
     snmpCredential: 'SNMP凭证',
-    authProtocol: '认证协议'
+    authProtocol: '认证协议',
+    id: 'ID',
+    device: 'SN',
+    assetState: '状态',
+    modules: 'Endpoint',
+    alerts: '告警信息',
+    dataCenter: '数据中心',
+    manufacturer: '厂商',
+    procurementDate: '购买日期',
+    principalTel: '电话',
+    option: '操作',
+    assetPing: 'Ping',
+    lastReply: 'Ping最后应答',
+    vendor: '厂商',
+    name: 'Name',
+    dc: '数据中心',
+    type: '主机地址'
   },
   config: {
     config: '设置',

nezha-fronted/src/components/common/language/en.js

@@ -250,7 +250,7 @@ const en = {
             label: 'Text'
           },
           group: {
-            label: 'group'
+            label: 'Group'
           }
         },
         statisticsVal: {
@@ -288,7 +288,11 @@ const en = {
         content: 'Content',
         tooltip: 'Tooltip',
         displayChart: 'Display chart',
-        aggregation: 'Aggregation'
+        aggregation: 'Aggregation',
+        varType: 'Vartype',
+        pid: 'Chart template',
+        selectAsset: 'Please select the Asset',
+        selectEndpoint: 'Please select the Endpoint'
       },
       chartTableColumn: {
         metric: 'Metric', // '指标'
@@ -345,7 +349,8 @@ const en = {
       moreTitle: 'Showing only 20 time series. ',
       moreTitleOther: 'Showing only 10 the data. ',
       showAll: 'Show all ',
-      showAllOther: 'All Data'
+      showAllOther: 'All Data',
+      addChartTemp: 'addChartTemp'
     },
     metric: {
       name: 'Metric name', // "指标名称"
@@ -552,6 +557,7 @@ const en = {
     principal: 'Administrator', // '负责人'
     tel: 'Telephone', // '电话'
     featureTitle: 'Attribute',
+    endpoint: 'Endpoint',
     endpointUpNum: 'It\'s a normal number',
     endpointNum: 'Represents the total quantity',
     active: 'Alive', // "存活",
@@ -570,7 +576,22 @@ const en = {
     usernamePrompt: 'Username prompt',
     passwordPrompt: 'Password prompt',
     snmpCredential: 'SNMP credential',
-    authProtocol: 'Auth protocol'
+    authProtocol: 'Auth protocol',
+    id: 'ID', // ID
+    device: 'SN', // SN
+    assetState: 'State', // '状态'
+    assetPing: 'Ping',
+    lastReply: 'Ping last reply',
+    modules: 'Endpoint', // '组件'
+    alerts: 'Alerts', // '告警信息'
+    dataCenter: 'Data center', // DC
+    vendor: 'Vendor', // '厂商'
+    procurementDate: 'Purchase date', // '购买日期'
+    principalTel: 'Telephone', // '电话'
+    option: 'Operation', // "操作"
+    name: 'Name',
+    dc: 'DataCenter',
+    type: 'Types',
   },
   config: {
     config: 'Settings', // "设置"
@@ -681,9 +702,9 @@ const en = {
       latitude: 'Latitude',
       lnglat: 'Coordinate'
     },
-    cabinet:{
+    cabinet: {
-      editCabinet:'Edit Cabinet',
+      editCabinet: 'Edit Cabinet',
-      createCabinet:'Create Cabinet',
+      createCabinet: 'Create Cabinet'
     },
     model: {
       model: 'Asset model',
@@ -753,11 +774,11 @@ const en = {
         replay: 'Replay',
         skipTip: 'Skip no operation time'
       },
-      loginHost:'Login host',
+      loginHost: 'Login host',
-      loginUser:'Login user',
+      loginUser: 'Login user',
-      sourceIp:'Source IP',
+      sourceIp: 'Source IP',
-      sourceUser:'Source user',
+      sourceUser: 'Source user',
-      SessionId:'Session ID',
+      SessionId: 'Session ID'
     },
     operationlog: {
       operationlog: 'Operation log',
@@ -832,8 +853,8 @@ const en = {
         defaultCabinetUsize: 'Cabinet U size',
         second: 'second',
         day: 'day',
-        sessionTimeout:'Session timeout',
+        sessionTimeout: 'Session timeout',
-        minute:'minute',
+        minute: 'minute',
         maxSeries: 'Query max series',
         unsaved: 'Unsaved prompt',
         mapConfig: 'Map center',
@@ -1017,7 +1038,7 @@ const en = {
       expressionError: 'Please fill in the "expression" value'
     },
     chartTemp: {
-      chartTemp: 'Chart template',
+      chartTemp: 'Chart template'
     }
   },
   alert: {

nezha-fronted/src/components/common/mixin/dataList.js

@@ -20,6 +20,7 @@ export default {
         customTableTitle: [] // 自定义列工具的数据
       },
       mainTableHeight: this.$tableHeight.normal, // 主列表table高度
+      searchTableHeight: this.$tableHeight.search, // 主列表table高度
       batchDeleteObjs: [],
       object: {},
 

nezha-fronted/src/components/common/nzTransfer.vue

@@ -28,14 +28,12 @@
             width="36">
           </el-table-column>
           <el-table-column
-            :label="$t('overall.name')"
+            :label="item.label"
+            v-for="(item,index) in tableTitle"
+            :key="index"
           >
-           <template slot-scope="scope">{{scope.row.name}}</template>
+            <template slot-scope="scope" v-if="!item.slot">{{scope.row[item.prop]}}</template>
-          </el-table-column>
+            <slot :name="item.prop" v-else></slot>
-          <el-table-column
-            :label="$t('asset.host')"
-          >
-            <template slot-scope="scope">{{scope.row.manageIp}}</template>
           </el-table-column>
         </el-table>
       </div>
@@ -79,14 +77,12 @@
             width="36">
           </el-table-column>
           <el-table-column
-            :label="$t('overall.name')"
+            :label="item.label"
+            v-for="(item,index) in tableTitle"
+            :key="index"
           >
-            <template slot-scope="scope">{{scope.row.name}}</template>
+            <template slot-scope="scope" v-if="!item.slot">{{scope.row[item.prop]}}</template>
-          </el-table-column>
+            <slot :name="item.prop" v-else></slot>
-          <el-table-column
-            :label="$t('asset.host')"
-          >
-            <template slot-scope="scope">{{scope.row.host}}</template>
           </el-table-column>
         </el-table>
       </div>
@@ -131,6 +127,9 @@ export default {
     },
     pageObj: {
       type: Object
+    },
+    tableTitle: {
+      type: Array,
     }
   },
   data () {

nezha-fronted/src/components/common/pickTime.vue

@@ -9,6 +9,7 @@
         <span class="nz-btn nz-btn-text" ><slot name="added-text"></slot></span>
       </button>
       <button id="browser-go" class="top-tool-btn top-tool-btn--dropdown" @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)">
+        <span class="select-refresh-time" v-if="interval !== -1">{{interLabel}}</span>
         <i class="nz-icon nz-icon-arrow-down" style="font-size: 12px;"></i>
         <transition name="el-zoom-in-top">
           <ul v-show="dropdownShow" class="el-dropdown-menu el-popper el-dropdown-menu--mini nz-dropdown">
@@ -85,7 +86,8 @@ export default {
       intervalTimer: null,
       interval: -1,
       unit: 2,
-      dropdownShow: false
+      dropdownShow: false,
+      interLabel: ''
     }
   },
   created () {
@@ -96,6 +98,7 @@ export default {
     selectInterval (val) {
       this.visible = false
       this.interval = val.value
+      this.interLabel = val.value
       console.info(this.interval, val)
       if (!this.showTimePicker && val && val.value != -1) {
         this.intervalTimer = setInterval(() => {

nezha-fronted/src/components/common/project/popData/assetTable.vue

@@ -151,32 +151,32 @@ export default {
       mainTableHeight: '100%',
       tableTitle: [
         {
-          label: this.$t('asset.tableTitle.host'),
+          label: this.$t('asset.host'),
           prop: 'HOST',
           show: true,
           width: 130,
           fixed: 'left'
         },
         {
-          label: this.$t('asset.tableTitle.device'),
+          label: this.$t('asset.device'),
           prop: 'SN',
           show: true,
           width: 130
         },
         {
-          label: this.$t('asset.tableTitle.assetType'),
+          label: this.$t('asset.assetType'),
           prop: 'assetType',
           show: true
         }, {
-          label: this.$t('asset.tableTitle.assetState'),
+          label: this.$t('asset.assetState'),
           prop: 'state',
           show: true
         }, {
-          label: this.$t('asset.tableTitle.assetPing'),
+          label: this.$t('asset.assetPing'),
           prop: 'pingStatus',
           show: true
         }, {
-          label: this.$t('asset.tableTitle.alerts'),
+          label: this.$t('asset.alerts'),
           prop: 'Alert',
           show: true,
           width: 100
@@ -287,7 +287,7 @@ export default {
       this.esc(false)
     },
     messageStyle (e) {
-      if (e.column.label == 'Alerts' || e.column.label == this.$t('asset.tableTitle.alerts')) {
+      if (e.column.label == 'Alerts' || e.column.label == this.$t('asset.alerts')) {
         if (e.row.alertNum > 0) {
           return 'danger'
         } else {

nezha-fronted/src/components/common/project/popData/endpointTable.vue

@@ -261,7 +261,7 @@ export default {
       this.esc(false)
     },
     messageStyle (e) {
-      if (e.column.label == 'Alerts' || e.column.label == this.$t('asset.tableTitle.alerts')) {
+      if (e.column.label == 'Alerts' || e.column.label == this.$t('asset.alerts')) {
         if (e.row.alertNum > 0) {
           return 'danger'
         } else {

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -313,7 +313,7 @@
            </button>
 
               <button @click="imgUpload" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
-                      v-has="'project_topo_save'" :disabled="prevent_opt.save"
+                      v-has="'topo_icon_save'" :disabled="prevent_opt.save"
                       :class="{'nz-btn-disabled':prevent_opt.save}"
                       style="margin-right: 20px">
              {{$t('project.topology.save')}}
@@ -477,6 +477,8 @@ export default {
       penToolTipScale: 1,
       oldScale: 1,
       uploadPicShow: false,
+      imgWidth: 0,
+      imgHeight: 0,
       uploadPic: {
         name: '',
         unit: ''
@@ -529,7 +531,7 @@ export default {
       deep: true,
       immediate: true,
       handler (n) {
-        if (n.id) {
+        if (n && n.id) {
           if (getTopology(this.topologyIndex)) {
             getTopology(this.topologyIndex).destroy()
             setTopology(this.topologyIndex, null)
@@ -1484,22 +1486,24 @@ export default {
     beforeAvatarUpload (file, fileList) {
       const this_ = this
       const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
-
+      const isLt2M = file.size / 1024 / 1024 < 2
       if (!isJPG) {
         this.$message.error(this_.$t('project.topology.imgFormat'))
         return false
       }
-      // if (!isLt2M) {
+      if (!isLt2M) {
-      //   this.$message.error( this_.$t('project.topology.imgSize'));
+        this.$message.error(this_.$t('project.topology.imgSize'))
-      //   return false;
+        return false
-      // }
+      }
       const isSize = new Promise(function (resolve, reject) {
-        const width = 100
+        const width = 0
-        const height = 100
+        const height = 0
         const _URL = window.URL || window.webkitURL
         const img = new Image()
         img.onload = function () {
           const valid = img.width > width && img.height > height
+          this_.imgWidth = img.width
+          this_.imgHeight = img.height
           valid ? resolve() : reject()
         }
         img.src = _URL.createObjectURL(file.raw)
@@ -1545,12 +1549,15 @@ export default {
     upload () {
       const form = new FormData()
       form.append('file', this.file)
+      console.log(this.file)
       if (this.uploadPic.name) {
         form.append('name', this.uploadPic.name)
       } else {
         form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
       }
       form.append('unit', this.uploadPic.unit)
+      form.append('width', this.imgWidth)
+      form.append('height', this.imgHeight)
       this.$post('monitor/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
         if (res.code == 200) {
           this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -1685,6 +1692,7 @@ export default {
               responseType: 'arraybuffer'
             })
             .then(res => {
+              console.log(res.data)
               return ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
             })
             .then(data => {

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="header__operation">
-      <div class="right-box-top-btns"></div>
+        <span v-cancel="{obj: object, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
-      <!-- end--顶部按钮-->
+      </div>
     </div>
 
     <!-- begin--表单-->
@@ -310,50 +310,50 @@ export default {
       assetListHalf: false,
       assetTableTitle: [
         {
-          label: this.$t('asset.tableTitle.name'),
+          label: this.$t('asset.name'),
           prop: 'name',
           show: false,
           allowed: true,
           minWidth: '200'
         },
         {
-          label: this.$t('asset.tableTitle.sn'),
+          label: this.$t('asset.sn'),
           prop: 'sn',
           show: true,
           minWidth: '200'
         },
         {
-          label: this.$t('asset.tableTitle.manageIp'),
+          label: this.$t('asset.manageIp'),
           prop: 'manageIp',
           show: true,
           minWidth: '200'
         }, {
-          label: this.$t('asset.tableTitle.brand'),
+          label: this.$t('asset.brand'),
           prop: 'brand',
           show: true,
           minWidth: '100'
         }, {
-          label: this.$t('asset.tableTitle.model'),
+          label: this.$t('asset.model'),
           prop: 'model',
           show: true,
           minWidth: '100'
         }, {
-          label: this.$t('asset.tableTitle.dc'),
+          label: this.$t('asset.dc'),
           prop: 'dc',
           show: true,
           minWidth: '100'
         }, {
-          label: this.$t('asset.tableTitle.cabinet'),
+          label: this.$t('asset.cabinet'),
           prop: 'cabinet',
           show: true,
           minWidth: '100'
         }, {
-          label: this.$t('asset.tableTitle.type'),
+          label: this.$t('asset.type'),
           prop: 'type',
           show: true,
           minWidth: '100'
         }, {
-          label: this.$t('asset.tableTitle.state'),
+          label: this.$t('asset.state'),
           prop: 'state',
           show: true,
           minWidth: '100'
@@ -371,63 +371,63 @@ export default {
         zheze_none: true,
         searchLabelList: [{
           id: 10,
-          name: this.$t('asset.tableTitle.sn'),
+          name: this.$t('asset.sn'),
           type: 'input',
           label: 'sn',
           disabled: false
         },
         {
           id: 11,
-          name: this.$t('asset.tableTitle.name'),
+          name: this.$t('asset.name'),
           type: 'input',
           label: 'name',
           disabled: false
         },
         {
           id: 11,
-          name: this.$t('asset.tableTitle.manageIp'),
+          name: this.$t('asset.manageIp'),
           type: 'input',
           label: 'manageIp',
           disabled: false
         },
         {
           id: 11,
-          name: this.$t('asset.tableTitle.brand'),
+          name: this.$t('asset.brand'),
           type: 'input',
           label: 'brand',
           disabled: false
         },
         {
           id: 11,
-          name: this.$t('asset.tableTitle.model'),
+          name: this.$t('asset.model'),
           type: 'input',
           label: 'model',
           disabled: false
         },
         {
           id: 11,
-          name: this.$t('asset.tableTitle.dc'),
+          name: this.$t('asset.dc'),
           type: 'input',
           label: 'dc',
           disabled: false
         },
         {
           id: 11,
-          name: this.$t('asset.tableTitle.cabinet'),
+          name: this.$t('asset.cabinet'),
           type: 'input',
           label: 'cabinet',
           disabled: false
         },
         {
           id: 11,
-          name: this.$t('asset.tableTitle.type'),
+          name: this.$t('asset.type'),
           type: 'input',
           label: 'type',
           disabled: false
         },
         {
           id: 11,
-          name: this.$t('asset.tableTitle.state'),
+          name: this.$t('asset.state'),
           type: 'input',
           label: 'state',
           disabled: false

nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue

@@ -193,6 +193,7 @@
                        :search-msg="transfer.searchMsg"
                        :table-data="transfer.tableData"
                        style="margin-bottom: 20px;"
+                       :tableTitle="transfer.tableTitle"
                        @leftToRight="addAsset"
                        @rightToLeft="removeAsset">
             <template v-slot:title>Selected</template>
@@ -302,13 +303,25 @@ export default {
               disabled: false
             }, {
               id: 23,
-              name: this.$t('asset.tableTitle.cabinet'),
+              name: this.$t('asset.cabinet'),
               type: 'input',
               label: 'cabinetName',
               disabled: false
             }
           ]
         },
+        tableTitle: [
+          {
+            label: this.$t('overall.name'),
+            prop: 'name',
+            show: true
+          },
+          {
+            label: this.$t('asset.host'),
+            prop: 'host',
+            show: true
+          }
+        ],
         pageObj: {
           pageNo: 1,
           pageSize: 10,

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="header__operation">
-      <div class="right-box-top-btns"></div>
+        <span v-cancel="{obj: endpoint, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
-      <!-- end--顶部按钮-->
+      </div>
     </div>
 
     <!-- begin--表单-->

nezha-fronted/src/components/common/rightBox/chartTempBox.vue

@@ -0,0 +1,317 @@
+<template>
+  <div v-clickoutside="{obj: editChartTemp, func: esc}" class="right-box right-box-asset">
+    <div class="right-box__header">
+      <div class="header__title">{{editChartTemp.id ? $t('config.user.editChartTemp') : $t('config.user.createUser')}}</div>
+      <div class="header__operation">
+        <span v-cancel="{obj: editChartTemp, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
+    </div>
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form ref="userForm" :model="editChartTemp" :rules="rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px">
+          <!--type-->
+          <el-form-item :label="$t('dashboard.panel.chartForm.varType')" prop="varType">
+            <el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.varType" value-key="chartType" id="chart-box-group" @change="varTypeChange">
+              <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>
+          <!--chartTemp list-->
+          <el-form-item :label="$t('dashboard.panel.chartForm.pid')" prop="pid">
+            <el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.pid" value-key="chartType" id="chart-box-group" >
+              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTempArr">
+                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <!-- 选择资产，穿梭框 -->
+          <div class="form__sub-title">{{editChartTemp.varType === 1 ? 'Asset' : 'Endpoint'}}</div>
+          <nz-transfer ref="transfer"
+                       :page-obj="transfer.pageObj"
+                       :search-msg="transfer.searchMsg"
+                       :table-data="transfer.tableData"
+                       style="margin-bottom: 20px;"
+                       :tableTitle="transferTableTitle"
+                       @leftToRight="addAsset"
+                       @search="search"
+                       @rightToLeft="removeAsset">
+            <template v-slot:title>Selected</template>
+          </nz-transfer>
+        </el-form>
+      </div>
+    </div>
+    <div class="right-box__footer">
+      <button id="asset-edit-cancel" v-cancel="{obj: editChartTemp, func: esc}" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import nzTransfer from '@/components/common/nzTransfer'
+export default {
+  name: 'chartTemp',
+  components: {
+    nzTransfer
+  },
+  props: {
+    obj: {
+      type: Object
+    }
+  },
+  computed: {
+    isCurrentUser () {
+      return function (username) {
+        return localStorage.getItem('nz-username') == username
+      }
+    }
+  },
+  data () {
+    return {
+      editChartTemp: {},
+      url: 'visual/panel/chart/fromTmpl',
+      rightBox: { model: { show: false } },
+      rules: { // 表单校验规则
+        varType: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        pid: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      },
+      varTypeArr: [
+        { name: 'Asset', id: 1 },
+        { name: 'Endpoint', id: 2 }
+      ],
+      chartTempArr: [],
+      tableData: [],
+      transfer: {
+        tableData: [],
+        selectedData: [],
+        searchLabel: {},
+        searchMsg: { // 给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [
+            {
+              id: 1,
+              name: 'ID',
+              type: 'input',
+              label: 'id',
+              disabled: false
+            }, {
+              id: 20,
+              name: 'SN',
+              type: 'input',
+              label: 'sn',
+              disabled: false
+            }, {
+              id: 21,
+              name: 'Host',
+              type: 'input',
+              label: 'host',
+              disabled: false
+            }, {
+              id: 22,
+              name: this.$t('asset.state'),
+              type: 'select',
+              label: 'assetState',
+              disabled: false
+            }, {
+              id: 23,
+              name: 'pingStatus',
+              type: 'select',
+              label: 'pingStatus',
+              disabled: false
+            }, {
+              id: 23,
+              name: this.$t('asset.cabinet'),
+              type: 'input',
+              label: 'cabinetName',
+              disabled: false
+            }
+          ]
+        },
+        pageObj: {
+          pageNo: 1,
+          pageSize: 10,
+          pages: 1,
+          total: 0
+        }
+      },
+      transferTableTitle: [
+        {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true
+        },
+        {
+          label: this.$t('asset.host'),
+          prop: 'manageIp',
+          show: true
+        }
+      ]
+    }
+  },
+  watch: {
+    obj: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.editChartTemp = JSON.parse(JSON.stringify(n))
+      }
+    }
+  },
+  mounted () {
+    this.getChartTempData()
+    this.getTableData()
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    save () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      if (!this.transfer.selectedData.length) {
+        this.prevent_opt.save = false
+        if (this.editChartTemp.varType === 1) {
+          this.$message.error(this.$t('dashboard.panel.chartForm.selectAsset'))
+        } else {
+          this.$message.error(this.$t('dashboard.panel.chartForm.selectEndpoint'))
+        }
+        return
+      }
+      this.editChartTemp.varIds = this.transfer.selectedData.map(item => item.id)
+      this.$refs.userForm.validate((valid) => {
+        if (valid) {
+          if (this.editChartTemp.id) {
+            this.$put(this.url, this.editChartTemp).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.$emit('on-create-success')
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          } else {
+            this.$post(this.url, this.editChartTemp).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          }
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    search (searchLabel, page) {
+      this.transfer.searchLabel = JSON.parse(JSON.stringify(searchLabel))
+      this.transfer.pageObj = JSON.parse(JSON.stringify(page))
+      this.getTableData()
+    },
+    addAsset (toAdd) {
+      this.transfer.selectedData = toAdd
+      this.transfer.tableData.forEach(d => {
+        this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
+      })
+    },
+    removeAsset (toRemove) {
+      this.transfer.selectedData = this.transfer.selectedData.filter(d => !toRemove.find(s => d.id === s.id))
+      this.transfer.tableData.forEach(d => {
+        this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
+      })
+      // dc, brand, model, type
+    },
+    getChartTempData () {
+      this.$get('visual/panel/chart', { pageSize: -1, panelId: 0, returnChildren: 0, varType: this.editChartTemp.varType }).then(response => {
+        if (response.code === 200) {
+          this.chartTempArr = response.data.list
+        }
+      })
+    },
+    getTableData () {
+      if (this.editChartTemp.varType === 1) {
+        this.getAssetData()
+      } else {
+        this.getEndpointData()
+      }
+    },
+    getAssetData () {
+      this.$refs.transfer.startLoading()
+      this.$get('asset/asset', { ...this.transfer.searchLabel, ...this.transfer.pageObj }).then(response => {
+        this.$refs.transfer.endLoading()
+        if (response.code === 200) {
+          this.transfer.tableData = response.data.list
+          this.transfer.pageObj.total = response.data.total
+        }
+      })
+    },
+    getEndpointData () {
+      this.$refs.transfer.startLoading()
+      this.$get('monitor/endpoint', { ...this.transfer.searchLabel, ...this.transfer.pageObj }).then(response => {
+        this.$refs.transfer.endLoading()
+        if (response.code === 200) {
+          this.transfer.tableData = response.data.list
+          this.transfer.pageObj.total = response.data.total
+        }
+      })
+    },
+    varTypeChange () {
+      this.getChartTempData()
+      this.editChartTemp.pid = ''
+      this.transfer.selectedData = []
+      this.$refs.transfer.selectedData = []
+      if (this.editChartTemp.varType === 1) {
+        this.transferTableTitle = [
+          {
+            label: this.$t('overall.name'),
+            prop: 'name',
+            show: true
+          },
+          {
+            label: this.$t('asset.host'),
+            prop: 'manageIp',
+            show: true
+          }
+        ]
+      } else {
+        this.transferTableTitle = [
+          {
+            label: 'ID',
+            prop: 'id',
+            show: true
+          },
+          {
+            label: this.$t('project.endpoint.name'),
+            prop: 'name',
+            show: true
+          }
+        ]
+      }
+      this.getTableData()
+    }
+  }
+}
+</script>
+<style lang="scss">
+  @import '@/assets/css/common/rightBoxCommon.scss';
+</style>

nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue

@@ -14,14 +14,9 @@
       </span>
       </div>
       <!-- end--标题-->
-      <!-- begin--顶部按钮-->
+      <div class="header__operation">
-      <div class="right-box-top-btns right-box-form-delete" v-if="optionType === 'edit'">
+        <span v-cancel="{obj: editEndpoint, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
-        <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>
-      <!-- end--顶部按钮-->
     </div>
 
     <!-- begin--表单-->

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="header__operation">
-      <div class="right-box-top-btns right-box-form-delete">
+        <span v-cancel="{obj: editModule, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
-        <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>
-      <!-- end--顶部按钮-->
     </div>
 
     <!-- begin--表单-->

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="header__operation">
-      <div class="right-box-top-btns right-box-form-delete">
+        <span v-cancel="{obj: editProject, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
-        <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>
-      <!-- end--顶部按钮-->
 
     </div>
     <div class="right-box-form-box right-box__container">

nezha-fronted/src/components/common/table/nzDataList.vue

@@ -6,7 +6,7 @@
       <div class="main-modal"></div>
       <div class="main-container">
         <div v-show="bottomBox.mainResizeShow" class="top-tools">
-          <div class="top-tool-left" style="width: 300px">
+          <div class="top-tool-left" style="min-width: 300px">
             <slot name="top-tool-left"></slot>
           </div>
           <div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-right">

nezha-fronted/src/components/common/table/settings/chartTmplTable.vue

@@ -34,6 +34,9 @@
       </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="typeIcon(scope.row)">
+        {{chartTypeList.find(title=>title.id == scope.row[item.prop]).name}}
+        </span>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
         <template v-else>-</template>
       </template>
@@ -76,6 +79,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',
@@ -85,7 +92,64 @@ export default {
           prop: 'remark',
           show: true
         }
-      ]
+      ],
+      chartTypeList: [
+        {
+          id: 'line',
+          name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
+        },
+        {
+          id: 'stackArea',
+          name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
+        },
+        {
+          id: 'bar',
+          name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
+        },
+        {
+          id: 'singleStat',
+          name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
+        },
+        {
+          id: 'pie',
+          name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
+        },
+        {
+          id: 'table',
+          name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
+        },
+        {
+          id: 'alertList',
+          name: this.$t('dashboard.panel.chartForm.typeVal.alertList.label')
+        },
+        {
+          id: 'text',
+          name: this.$t('dashboard.panel.chartForm.typeVal.text.label')
+        },
+        {
+          id: 'url',
+          name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
+        },
+        {
+          id: 'group',
+          name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
+        }
+
+      ],
+    }
+  },
+  methods: {
+    typeIcon (row) {
+      let str = 'nz-icon'
+      switch (row.type) {
+        case 'line':
+          str += 'nz-icon-multitext'
+          break
+        default :
+          str += 'nz-icon-multitext'
+          break
+      }
+      return str
     }
   }
 }

nezha-fronted/src/components/common/table/settings/endpointTable.vue

@@ -66,7 +66,22 @@
           </el-tooltip>
         </template>
         <template v-else-if="item.prop === 'state'">
-          {{scope.row[item.prop]}}
+          <el-popover placement="right" trigger="hover" width="200" :popper-class="''" :disabled="scope.row[item.prop]<2">
+            <div>
+              <div v-html="suspendedStr(scope.row[item.prop])"></div>
+            </div>
+            <div slot="reference" style="width: 100px">
+              <div v-if="scope.row[item.prop]===0">
+                <div class="active-icon red inline-block"></div> down
+              </div>
+              <div v-else-if="scope.row[item.prop]===1">
+                <div class="active-icon green inline-block"></div> up
+              </div>
+              <div v-else>
+                <div class="active-icon gray inline-block"></div> suspended
+              </div>
+            </div>
+          </el-popover>
         </template>
         <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
       </template>
@@ -157,6 +172,29 @@ export default {
       const creatDom = document.getElementById('creatDom')
       creatDom.parentNode.removeChild(creatDom)
       this.$message.success(this.$t('overall.copySuccess'))
+    },
+    suspendedStr (status) { // 10进制转为2进制 分别给对应的状态
+      const arr = status.toString(2).split('')
+      while (arr.length < 5) {
+        arr.unshift('0')
+      }
+      arr.pop()
+      let str = ''
+      arr.forEach((item, index) => {
+        if (index === 0) {
+          str += `<div>DC <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
+        }
+        if (index === 1) {
+          str += `<div>ASSET <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
+        }
+        if (index === 2) {
+          str += `<div>ENDPOINT <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
+        }
+        if (index === 3) {
+          str += `<div>PROMETHEUS <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
+        }
+      })
+      return str
     }
   },
   computed: {}
@@ -190,6 +228,9 @@ export default {
   .endpoint-num, .alert-num{
     cursor: pointer;
   }
+  .inline-block{
+    display: inline-block;
+  }
 </style>
 <style>
   .endpointConfigsTips{

nezha-fronted/src/components/common/table/settings/moduleTable.vue

@@ -44,7 +44,7 @@
         </template>
         <template v-else-if="item.prop === 'endpointNum'">
           <span class="endpoint-num"  @click="showBottomBox('endpoint', scope.row)">
-             <i class="nz-icon nz-icon-endpoint" :class="scope.row[item.prop]>0?'colorEF7458':'colorEF7458'"/>
+             <i class="nz-icon nz-icon-overview-endpoint color969dea"/>
           {{scope.row[item.prop]}}
           </span>
         </template>
@@ -146,6 +146,9 @@ export default {
   .color23BF9A{
     color: #23BF9A;
   }
+  .color969dea{
+    color: #969dea;
+  }
   .endpoint-num, .alert-num{
     cursor: pointer;
   }

nezha-fronted/src/components/common/table/special/endpointQueryTab.vue

@@ -169,10 +169,13 @@ export default {
       }
     },
     getPanelData () { // 获取panel数据
-      this.$get('visual/panel?pageNo=1&pageSize=-1').then(response => {
+      return new Promise((resolve, reject) => {
-        if (response.code === 200) {
+        this.$get('visual/panel?pageNo=1&pageSize=-1').then(response => {
-          this.panelData = response.data.list
+          if (response.code === 200) {
-        }
+            this.panelData = response.data.list
+            resolve()
+          }
+        })
       })
     },
     handlerTableData (results) {
@@ -462,27 +465,29 @@ export default {
       this.graphShow = false
     },
     saveChart () { // 新增chart
-      const chart = {
+      this.getPanelData().then(()=>{
-        title: '',
+        const chart = {
-        type: 'line',
+          title: '',
-        span: 12,
+          type: 'line',
-        height: '400',
+          span: 12,
-        unit: this.chartUnit,
+          height: '400',
-        param: {
+          unit: this.chartUnit,
-          url: '',
+          param: {
-          threshold: ''
+            url: '',
-        },
+            threshold: ''
-        elements: [],
+          },
-        panel: '',
+          elements: [],
-        sync: 0
+          panel: '',
-      }
+          sync: 0
-      for (let i = 0; i < this.batchDeleteObjs.length; i++) {
-        if (this.batchDeleteObjs[i] && this.batchDeleteObjs[i].element !== '') {
-          chart.elements.push({ chartId: '', expression: this.batchDeleteObjs[i].element, type: 'expert' })
         }
-      }
+        for (let i = 0; i < this.batchDeleteObjs.length; i++) {
-      this.chart = chart
+          if (this.batchDeleteObjs[i] && this.batchDeleteObjs[i].element !== '') {
-      this.rightBox.show = true
+            chart.elements.push({ chartId: '', expression: this.batchDeleteObjs[i].element, type: 'expert' })
+          }
+        }
+        this.chart = chart
+        this.rightBox.show = true
+      })
     },
     createSuccess (type, response, param, panel) {
       this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
@@ -505,7 +510,7 @@ export default {
   computed: {
   },
   created () {
-    this.getPanelData()
+    // this.getPanelData()
   }
 }
 </script>

nezha-fronted/src/components/page/asset/asset.vue

@@ -170,7 +170,7 @@ export default {
           disabled: false
         }, {
           id: 23,
-          name: this.$t('asset.tableTitle.cabinet'),
+          name: this.$t('asset.cabinet'),
           type: 'input',
           label: 'cabinetName',
           disabled: false

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'"-->
@@ -142,6 +142,15 @@ export default {
       this.object.panelName = 'template'
       this.rightBox.show = true
     },
+    edit (u) {
+      if (!u.param) {
+        u.param = { url: '', threshold: '' }
+      }
+      this.object = JSON.parse(JSON.stringify(u))
+      this.object.panelId = this.showPanel.id
+      this.object.panelName = this.showPanel.name
+      this.rightBox.show = true
+    },
     getTableData (params) {
       if (params && Object.keys(params).length > 0) {
         for (const key in params) {
@@ -156,6 +165,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

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) => {

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -91,6 +91,7 @@
               </button>
             </template>
           </export-excel>
+          <button id="chart-temp-add" class="top-tool-btn margin-l-10" type="button" @click="addChartByTemp"><i class='nz-icon nz-icon-lock'></i></button>
           <button id="panel-lock" class="top-tool-btn margin-l-10" type="button" @click="panelLock=!panelLock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i></button>
         </div>
       </template>
@@ -107,6 +108,9 @@
     <transition name="right-box">
       <chart-box :chart="chart" :from="$CONSTANTS.fromRoute.panel" :panel-data="panelData" :show-panel="showPanel" @close="closeChartBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reload="panelReload" @reloadOnlyPanel="panelReloadOnlyPanel" ref="addChartModal" v-if="rightBox.chart.show"></chart-box>
     </transition>
+    <transition name="right-box">
+      <chart-temp-box :obj="chart" :from="$CONSTANTS.fromRoute.panel" :panel-data="panelData" :show-panel="showPanel" @close="closeChartTempBox" @on-create-success="createSuccess" v-if="rightBox.chartTemp.show"></chart-temp-box>
+    </transition>
     <transition name="right-box">
       <panel-box v-if="closePanelBox" :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
     </transition>
@@ -121,6 +125,7 @@ import pickTime from '../../common/pickTime'
 import exportXLSX from '../../common/exportXLSX'
 import selectPanel from '../../common/popBox/selectPanel'
 import panelBox from '@/components/common/rightBox/panelBox'
+import chartTempBox from '@/components/common/rightBox/chartTempBox'
 
 export default {
   name: 'panel',
@@ -131,6 +136,7 @@ export default {
       visible: false,
       rightBox: { // 面板弹出框相关
         chart: { show: false },
+        chartTemp: { show: false },
         panel: { show: false }
       },
       tableHover: false,
@@ -166,6 +172,12 @@ export default {
         pageSize: -1, // 此处获取所有数据，所以设置一个较大的值
         total: 0
       },
+      blankChartTemp: {
+        varType: 1,
+        pid: '',
+        panelId: '',
+        varIds: []
+      },
       chartsData: [], // 中间部分图表相关数据
       panelData: [],
       panelDataDragTmp: [],
@@ -204,7 +216,8 @@ export default {
     'pick-time': pickTime,
     'export-excel': exportXLSX,
     selectPanel,
-    'panel-box': panelBox
+    'panel-box': panelBox,
+    chartTempBox
   },
   methods: {
     // 刷新
@@ -290,6 +303,11 @@ export default {
       this.chart.panelName = this.showPanel.name
       this.rightBox.chart.show = true
     },
+    addChartByTemp () {
+      this.chart = Object.assign({},this.blankChartTemp)
+      this.chart.panelId = this.showPanel.id
+      this.rightBox.chartTemp.show = true
+    },
     addGroupItem (groupId) {
       this.chart = this.newChart()
       this.chart.groupId = groupId
@@ -317,6 +335,12 @@ export default {
 
       } */
     },
+    closeChartTempBox () {
+      this.rightBox.chartTemp.show = false
+      /* if (refresh) {
+
+      } */
+    },
     closePanelBox (refresh) {
       this.rightBox.panel.show = false
       /* if (refresh) {

nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue

@@ -9,6 +9,7 @@
       :from="fromRoute.endpoint"
       :layout="['searchInput', 'elementSet']"
       :hasSearch="true"
+      @search="search"
       :search-msg="searchMsg">
       <template v-slot:top-tool-right>
         <export-excel
@@ -44,7 +45,7 @@
           v-loading="slotProps.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
+          :height="searchTableHeight"
           :table-data="tableData"
           :tableId="tableId"
           @del="del"
@@ -126,6 +127,26 @@ export default {
           type: 'input',
           label: 'id',
           disabled: false
+        }, {
+          id: 14,
+          name: this.$t('asset.asset'),
+          type: 'query',
+          label: 'query',
+          disabled: false
+        },{
+          id: 34,
+          name: this.$t('project.project.project'),
+          // name: this.$t('asset.asset'),
+          type: 'input',
+          label: 'projectName',
+          disabled: false
+        }, {
+          id: 35,
+          name: this.$t('project.module.module'),
+          // name: this.$t('asset.asset'),
+          type: 'input',
+          label: 'moduleName',
+          disabled: false
         }]
       },
       roles: [],
@@ -222,17 +243,23 @@ export default {
     getTableData () {
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
       this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      const params = {
+        ...this.searchLabel,
+        ...this.searchCheckBox
+      }
       if (this.searchLabel.projectIds) {
         localStorage.setItem('endpointProjectId', this.searchLabel.projectIds)
+        if (params.projectIds) {
+          params.projectIds += ',' + this.searchLabel.projectIds
+        } else {
+          params.projectIds = this.searchLabel.projectIds
+        }
       } else {
         localStorage.removeItem('endpointProjectId')
       }
-      const params = {
+      console.log()
-        ...this.searchLabel,
-        ...this.titleSearch
-      }
       this.tools.loading = true
-      this.$get(this.url, { ...params, ...this.searchCheckBox }).then(response => {
+      this.$get(this.url, params).then(response => {
         this.tools.loading = false
         if (response.code === 200) {
           for (let i = 0; i < response.data.list.length; i++) {

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 () {
     // 初始化表头

nezha-fronted/src/components/page/monitor/project/projectList.vue

@@ -89,10 +89,49 @@ export default {
     }
   },
   methods: {
+    getTableData (params) {
+      if (params && Object.keys(params).length > 0) {
+        for (const key in params) {
+          this.$set(this.searchLabel, key, params[key])
+        }
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
+      this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).then(response => {
+        this.tools.loading = false
+        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 (!this.$store.state.currentProject.id) {
+            this.$store.commit('currentProjectChange', response.data.list[0])
+          }
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    }
   },
   computed: {
   },
+  created () {
+    console.log(this.$store.state.currentProject)
+  },
   mounted () {
+  },
+  destroyed () {
+    this.$store.commit('currentProjectChange', {
+      id: '',
+      name: '',
+      remark: ''
+    })
   }
 }
 </script>

nezha-fronted/src/http.js

@@ -28,7 +28,7 @@ export function get (url, params) {
     axios.get(url, {
       params: params
     }).then(response => {
-      resolve(response.data)
+      resolve(response.data, response)
     }).catch(err => {
       if (err.response) {
         resolve(err.response.data)
@@ -42,7 +42,7 @@ export function get (url, params) {
 export function post (url, params, headers) {
   return new Promise(resolve => {
     axios.post(url, params, { headers: headers }).then(response => {
-      resolve(response.data)
+      resolve(response.data, response)
     }).catch(err => {
       if (err.response) {
         resolve(err.response.data)
@@ -56,7 +56,7 @@ export function post (url, params, headers) {
 export function put (url, params, headers) {
   return new Promise((resolve) => {
     axios.put(url, params, { headers: headers }).then(response => {
-      resolve(response.data)
+      resolve(response.data, response)
     }).catch(err => {
       if (err.response) {
         resolve(err.response.data)
@@ -70,7 +70,7 @@ export function put (url, params, headers) {
 export function del (url, params) {
   return new Promise((resolve) => {
     axios.delete(url, params).then(response => {
-      resolve(response.data)
+      resolve(response.data, response)
     }).catch(err => {
       if (err.response) {
         resolve(err.response.data)

nezha-fronted/src/main.js

@@ -55,6 +55,7 @@ Vue.prototype.$chartResizeTool = chartResizeTool
 Vue.prototype.$tableSet = tableSet
 Vue.prototype.$tableHeight = { // 列表页表格的高度
   normal: 'calc(100% - 48px)', // 常规高度，特例在下方定义
+  search: 'calc(100% - 240px)', // 常规高度，特例在下方定义
   openSubList: { // 打开二级列表后的高度
     mainList: 'calc(100% - 60px)',
     subList: 'calc(100% - 38px)',