fix：修改 chartTemp 新增组件使用错误的问题

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

@@ -338,10 +338,11 @@ export default {
       this.$emit('changeTab', tab)
     },
     closeRightBox (refresh) {
+      console.log('close')
       this.rightBox.chart.show = false
       this.rightBox.chartTemp.show = false
-      this.chart = {}
       this.$store.dispatch('clearPanel')
+      this.chart = {}
       if (refresh) {
         this.refresh()
         if (this.from === fromRoute.chartTemp) {

nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue

@@ -38,7 +38,14 @@
             </template>
           </select-panel>
         </el-form-item>
-
+          <!--   varType   -->
+          <el-form-item :label="$t('dashboard.panel.chartForm.varType')" class="form-item--half-width" v-if="from === 'chartTemp'">
+            <el-select id="chart-box-varType" v-model="editChart.varType" :disabled="!!editChart.id" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" clearable placeholder="" size="small" value-key="chartType">
+              <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>
         <!--group-->
         <el-form-item :label="$t('dashboard.panel.chartForm.group')" class="form-item--half-width" prop="group">
           <el-select id="chart-box-group" v-model="editChart.groupId" :disabled="editChart.type==='group'" clearable placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
@@ -176,6 +183,10 @@ export default {
       prevChart: {},
       filterPanel: '',
       groupArr: [],
+      varTypeArr: [
+        { name: 'Asset', id: 1 },
+        { name: 'Endpoint', id: 2 }
+      ],
       panelName: '',
       rules: {
         name: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }],
@@ -191,6 +202,7 @@ export default {
     /* 关闭弹框 */
     esc (refresh) {
       this.prevent_opt.save = false
+      console.log(12313)
       this.$emit('close', refresh)
     },
     // 保存endpoint
@@ -437,6 +449,13 @@ export default {
           if (!this.editChart.param.link) {
             this.$set(this.editChart.param, 'link', '')
           }
+          if (!this.editChart.param.enable) {
+            this.editChart.param.enable = {
+              thresholds: false,
+              legend: false,
+              valueMapping: false
+            }
+          }
           if (this.editChart.param.enable.legend && !this.editChart.param.legend) {
             this.editChart.param.legend = { placement: 'bottom', values: [], show: true }
           }

nezha-fronted/src/components/page/config/template/chartTemp.vue

@@ -89,7 +89,32 @@
       </template>
     </nzDataList>
     <transition name="right-box">
-      <chart-box :chart="object" :show-panel="showPanel" :from="'chartTemp'"  @close="closeChartBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reload="panelReload" @reloadOnlyPanel="panelReloadOnlyPanel" ref="addChartModal" v-if="rightBox.show"></chart-box>
+<!--      <chart-box-->
+<!--        :chart="object"-->
+<!--        :show-panel="showPanel"-->
+<!--        :from="'chartTemp'"-->
+<!--        @close="closeChartBox"-->
+<!--        @delete-chart="delChart"-->
+<!--        @on-create-success="createSuccess"-->
+<!--        @on-delete-success="delChartOk"-->
+<!--        @reload="panelReload"-->
+<!--        @reloadOnlyPanel="panelReloadOnlyPanel"-->
+<!--        ref="addChartModal"-->
+<!--        v-if="rightBox.show"></chart-box>-->
+      <chart-right-box
+        v-if="rightBox.show"
+        v-loading="rightBox.loading"
+        ref="addChartModal"
+        :chart="object"
+        :from="'chartTemp'"
+        :show-panel="showPanel"
+        @close="closeChartBox"
+        @reload="panelReload"
+        @reloadOnlyPanel="panelReloadOnlyPanel"
+        @delete-chart="delChart"
+        @on-create-success="createSuccess"
+        @on-delete-success="delChartOk"
+      ></chart-right-box>
     </transition>
   </div>
 </template>
@@ -102,6 +127,8 @@ import dataListMixin from '@/components/common/mixin/dataList'
 import chartTmplTable from '@/components/common/table/settings/chartTmplTable'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 import routerPathParams from '@/components/common/mixin/routerPathParams'
+import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
+import {randomcolor} from "@/components/common/js/radomcolor/randomcolor";
 
 export default {
   name: 'chartTemp',
@@ -110,7 +137,8 @@ export default {
     deleteButton,
     chartTmplTable,
     'export-excel': exportXLSX,
-    topToolMoreOptions
+    topToolMoreOptions,
+    chartRightBox
   },
   mixins: [dataListMixin, routerPathParams],
   data () {
@@ -157,17 +185,28 @@ export default {
         id: '',
         name: '',
         type: 'line',
-        span: 12,
+        span: 4,
-        height: '400',
+        datasource: 'metrics',
+        varType: 1,
+        height: 4,
         unit: 2,
-        param: { url: '', threshold: '' },
+        param: {
-        elements: [{ expression: '', legend: '', type: 'expert', id: '' }],
+          stack: 0,
+          nullType: 'null',
+          legend: { placement: 'bottom', values: [], show: true },
+          enable: {
+            legend: true,
+            valueMapping: false,
+            thresholds: false
+          },
+          thresholdShow: true,
+          thresholds: [{ value: undefined, color: randomcolor() }]
+        },
+        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
         panel: '',
-        sync: '',
+        sync: 0,
         remark: '',
-        groupId: -1,
+        groupId: ''
-        panelId: 0,
-        varType: 1
       },
       showPanel: {
         name: 'template',
@@ -184,16 +223,57 @@ export default {
       this.object = this.newObject()
       this.object.panelId = 0
       this.object.panelName = 'template'
+      this.object.param.thresholds = [{ value: undefined, color: randomcolor() }]
       this.rightBox.show = true
     },
-    edit (u) {
+    edit (data, copy) {
-      if (!u.param) {
+      if (copy) {
-        u.param = { url: '', threshold: '' }
+        this.object = JSON.parse(JSON.stringify(data))
+        this.object.x = 0
+        this.object.y = 0
+        this.object.panelId = this.showPanel.id
+        this.object.panelName = this.showPanel.name
+        this.object.id = ''
+        this.object.elements.forEach((item) => {
+          item.id = ''
+          item.chartId = ''
+          delete item.seq
+        })
+        if (this.object.datasource !== 'metrics' && this.object.datasource !== 'log') {
+          delete this.object.elements
+        }
+        if (!this.object.groupId || this.object.groupId == -1) {
+          this.object.groupId = ''
+        }
+        this.rightBox.show = true
+      } else {
+        this.rightBox.show = true
+        this.rightBox.loading = true
+        this.$get('visual/panel/chart/' + data.id).then(res => {
+          this.rightBox.loading = false
+          if (res.code === 200) {
+            const chartData = res.data.data
+            this.object = JSON.parse(JSON.stringify(chartData))
+            this.object.panelId = this.showPanel.id
+            this.object.panelName = this.showPanel.name
+            this.object.param = JSON.parse(this.object.param)
+            if (!this.object.groupId || this.object.groupId == -1) {
+              this.object.groupId = ''
+            }
+            if (this.object.type == 'table') {
+              const arr = this.object.param.indexs ? this.object.param.indexs.split(',') : []
+              this.object.param.tags = arr.map((item) => {
+                return {
+                  text: item,
+                  tiClasses: ['ti-valid']
+                }
+              })
+            }
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
       }
-      this.object = JSON.parse(JSON.stringify(u))
-      this.object.panelId = this.showPanel.id
-      this.object.panelName = this.showPanel.name
-      this.rightBox.show = true
     },
     chartBySync (row) {
       this.$post('visual/panel/chart/syncTmpl', { pid: row.id }).then(res => {
@@ -240,6 +320,7 @@ export default {
     },
     closeChartBox (refresh) {
       this.rightBox.show = false
+      this.chart = {}
       if (refresh) {
         this.getTableData()
       }