feat ： logs 复用 以及 添加表单校验

nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss

@@ -90,5 +90,12 @@
       border-bottom: none;
       margin-bottom: 10px;
     }
+    .vue-tags-input{
+      display: inline-block;
+      width: 100%;
+      .ti-input{
+        padding: 1px 3px;
+      }
+    }
   }
 }

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

@@ -15,7 +15,7 @@
     <!-- begin--表单-->
     <div class="right-box-form-box right-box__container chart-right-box">
       <el-form ref="chartForm" :model="editChart" :rules="rules" label-position= "top" label-width="120px">
-        <el-form-item :label='$t("dashboard.panel.chartForm.name")' prop="title">
+        <el-form-item :label='$t("dashboard.panel.chartForm.name")' prop="name">
           <el-input maxlength="64" show-word-limit size="small" v-model="editChart.name" id="chart-box-title"></el-input>
         </el-form-item>
 
@@ -59,16 +59,16 @@
         </div>
         <el-tabs v-model="editChart.datasource" @tab-click="datasourceChange">
           <el-tab-pane label="Metrics" name="1">
-            <metrics-chart-config v-if="editChart.datasource == 1" :params.sync="editChart" @change="editChartChange"/>
+            <metrics-chart-config ref="childrenFrom1" v-if="editChart.datasource == 1" :params.sync="editChart" @change="editChartChange"/>
           </el-tab-pane>
           <el-tab-pane label="Logs" name="2">
-            <logs-chart-config  v-if="editChart.datasource == 2" :params.sync="editChart"/>
+            <logs-chart-config ref="childrenFrom2" v-if="editChart.datasource == 2" :params.sync="editChart"/>
           </el-tab-pane>
           <el-tab-pane label="System" name="3">
-            <system-chart-config  v-if="editChart.datasource == 3" :params.sync="editChart"/>
+            <system-chart-config ref="childrenFrom3" v-if="editChart.datasource == 3" :params.sync="editChart"/>
           </el-tab-pane>
           <el-tab-pane label="Other" name="4">
-            <other-chart-config  v-if="editChart.datasource == 4" :params.sync="editChart"/>
+            <other-chart-config ref="childrenFrom4" v-if="editChart.datasource == 4" :params.sync="editChart"/>
           </el-tab-pane>
         </el-tabs>
       </el-form>
@@ -84,7 +84,7 @@
       <button v-else-if="from!=='chartTemp'" id="chart-box-preview" class="footer__btn">
         <span>{{$t('overall.preview')}}</span>
       </button>
-      <button id="chart-box-save" v-has="'panel_chart_add'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn">
+      <button id="chart-box-save" v-has="'panel_chart_add'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
@@ -156,6 +156,8 @@ export default {
       groupArr: [],
       panelName: '',
       rules: {
+        name: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }],
+        panelName: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
       }
     }
   },
@@ -171,36 +173,42 @@ export default {
     },
     // 保存endpoint
     save () {
-      if (this.prevent_opt.save) { return } ;
+      console.log(123132213)
-      this.prevent_opt.save = true
+      const arr = [this.$refs.chartForm.validate()]
-      // 对endpointList进行处理，避免携带过多无用数据
+      arr.push(this.$refs['childrenFrom' + this.editChart.datasource].$refs.chartForm.validate())
-      const endpointList = []
+      Promise.all(arr).then(res => {
-      this.endpointTableData.forEach((item, index) => {
+        console.log(res)
-        const endpoint = {
+      }).catch(res => {
-          moduleId: item.moduleId,
+        console.log(res)
-          assetId: item.assetId,
-          name: item.name,
-          configs: JSON.stringify(item.configs),
-          id: item.id
-        }
-        endpointList.push(endpoint)
-      })
-      this.$refs.addEndpoint.validate((valid) => {
-        if (valid) {
-          this.$put('monitor/endpoint', endpointList).then(response => {
-            this.prevent_opt.save = false
-            if (response.code === 200) {
-              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-              this.esc(true)
-            } else {
-              this.$message.error(response.msg)
-            }
-          })
-        } else {
-          this.prevent_opt.save = false
-          return false
-        }
       })
+
+      // this.$refs.chartForm.validate((valid) => {
+      //   if (valid) {
+      //     if (this.editChart.id) { // 修改
+      //       this.editChart.param.collapse = this.chartSwitch
+      //       this.$put('visual/panel/chart', this.editChart).then(response => {
+      //         if (response.code === 200) {
+      //           this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+      //           this.esc(true)
+      //         } else {
+      //           this.$message.error(response.msg)
+      //         }
+      //       })
+      //     } else { // 新增
+      //       this.$post('visual/panel/chart', this.editChart).then(response => {
+      //         if (response.code === 200) {
+      //           this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+      //           this.esc(true)
+      //         } else {
+      //           this.$message.error(response.msg)
+      //         }
+      //       })
+      //     }
+      //   } else {
+      //     console.error('error submit!!')
+      //     return false
+      //   }
+      // })
     },
     selectPanel (panel) {
       this.panelName = panel.name

nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js

@@ -0,0 +1,95 @@
+export default {
+  methods: {
+    isStackShow (type) {
+      switch (type) {
+        case 'line':
+        case 'stackArea':
+        case 'point':
+          return true
+        case 'table':
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return false
+        default: return false
+      }
+    },
+    isStatisticsShow (type) {
+      switch (type) {
+        case 'line':
+        case 'stackArea':
+        case 'point':
+          return false
+        case 'table':
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return true
+        default: return false
+      }
+    },
+    isShowLegend (type) {
+      switch (type) {
+        case 'line':
+        case 'stackArea':
+        case 'point':
+          return true
+        case 'table':
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return false
+        default: return false
+      }
+    },
+    isShowValueMapping (type) {
+      switch (type) {
+        case 'line':
+        case 'stackArea':
+        case 'point':
+        case 'table':
+          return false
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return true
+        default: return false
+      }
+    },
+    isTable (type) {
+      switch (type) {
+        case 'table':
+          return true
+        case 'line':
+        case 'stackArea':
+        case 'point':
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return false
+        default: return false
+      }
+    },
+    isLog (type) {
+      switch (type) {
+        case 'log':
+          return true
+        case 'table':
+        case 'line':
+        case 'stackArea':
+        case 'point':
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return false
+        default: return false
+      }
+    }
+  }
+}

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

@@ -1,12 +1,499 @@
 <template>
-  <div>
+  <div class="chart-config">
-    logs
+    <el-form ref="chartForm" :model="chartConfig" :rules="rules" label-position= "top" label-width="120px">
+      <div v-if="chartConfig.elements">
+        <el-form-item
+          :key="index" class="element-item form-row-item" style="" v-for="index of chartConfig.elements.length"
+          :prop="'elements.' + (index -1) + '.expression'"
+          :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+        >
+          <div class="chart-title chart-title-config">
+            <span class="endpoint-title-content">
+              <i class="nz-icon nz-icon-arrow-down" :class="expressionsShow[index-1]?'':'is-active'" @click="showExpression(index)"></i>
+              <span>
+                {{expressionName[index-1]}}
+                <!--                名称修改 暂未实现-->
+              </span>
+            </span>
+            <span>
+              <span @click="addExpression('')">
+                  <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
+              </span>
+              <span class="nz-icon-copy">
+                  <i @click="copyExpression(index - 1)" class="nz-icon nz-icon-override"></i>
+              </span>
+              <span class="nz-icon-minus-medium">
+                  <i @click="removeExpression(index - 1)" class="nz-icon nz-icon-minus"></i>
+              </span>
+            </span>
+          </div>
+          <transition name="el-zoom-in-top">
+            <el-row v-show="expressionsShow[index-1]">
+              <promql-input
+                :from-father-data="true"
+                :metricOptionsParent="metricOptions"
+                :expression-list="expressions"
+                :id="promqlKeys[index-1]"
+                :index="index-1"
+                :required = 'true'
+                :type="promqlType"
+                :key="promqlKeys[index-1]"
+                :plugins="['metric-selector', 'metric-input', 'remove']"
+                :ref="'promql-'+(index-1)"
+                :showRemove="false"
+                :styleType="2"
+                @change="expressionChange"
+                @removeExpression="removeExpression"
+              ></promql-input>
+              <el-row style="margin-top: 18px">
+                <el-col class="legend-title">
+                  <span class="legend-title__span">{{$t('dashboard.panel.chartForm.legend')}}&nbsp;</span>
+                  <el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
+                    <div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
+                    <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                  </el-popover>
+                </el-col>
+                <el-col style="width: calc(100% - 160px);">
+                  <el-input maxlength="512" show-word-limit size="small" type="text" v-model="legends[index-1]" ></el-input>
+                </el-col>
+              </el-row>
+            </el-row>
+          </transition>
+        </el-form-item>
+      </div>
+
+      <!--title-->
+      <div class="form__sub-title">
+        <span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>
+      </div>
+      <div class="form-items--half-width-group">
+        <!-- type -->
+        <el-form-item :label="$t('dashboard.panel.chartForm.type')" class="form-item--half-width" prop="type">
+          <el-select
+            id="chart-box-type"
+            v-model="chartConfig.type"
+            :disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartType"
+            @change="chartTypeChange">
+            <el-option v-for="item in chartTypeList" :key="item.id" :disabled=" item.id==='group' && chartConfig.isGroup" :label="item.name" :value="item.id">
+              <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!-- unit -->
+        <el-form-item v-show="!isTable(chartConfig.type)&&!isLog(chartConfig.type)" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
+          <el-cascader id="chart-box-unit" v-model="chartConfig.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
+                       placeholder=""
+                       popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
+                       size="small"
+                       style="width: 100%"
+                       @change="unitSelected"
+          >
+          </el-cascader>
+        </el-form-item>
+
+        <!-- index -->
+        <el-form-item v-show="isTable(chartConfig.type)" :label="$t('dashboard.panel.chartForm.tableIndex')" class="form-item--half-width" prop="param.index">
+          <vue-tags-input
+            v-model="chartConfig.param.indexs"
+            :maxlength="32"
+            :placeholder="$t('overall.addParameter')"
+            :tags="chartConfig.param.tags"
+            @tags-changed="(newTags)=>{tagsChange(newTags)}"
+          />
+        </el-form-item>
+
+        <!-- limit -->
+        <el-form-item v-show="isTable(chartConfig.type)" :label="$t('dashboard.panel.chartForm.tableIndex')" class="form-item--half-width" prop="param.limit">
+          <el-input-number size="small" placeholder="" v-model="chartConfig.param.limit" :controls="false" @change="change"/>
+        </el-form-item>
+
+        <!--width-->
+        <el-form-item :label="$t('dashboard.panel.chartForm.width')" class="form-item--half-width" prop="span">
+          <el-select id="chart-box-span"  v-model="chartConfig.span" :disabled="chartConfig.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
+            <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
+              <span class="panel-dropdown-label-txt" > span-{{item}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!--height-->
+        <el-form-item :label="$t('dashboard.panel.chartForm.high')" class="form-item--half-width"  prop="height">
+          <!-- 由px改为span -->
+          <el-select id="chart-box-height"  v-model="chartConfig.height" :disabled="chartConfig.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
+            <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
+              <span class="panel-dropdown-label-txt" > span-{{item}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!--stack-->
+        <el-form-item :label="$t('dashboard.panel.chartForm.stack')" class="form-item--half-width"  prop="param.stack" v-if="isStackShow(chartConfig.type)">
+          <el-select id="chart-box-height" v-model="chartConfig.param.stack" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
+            <el-option :value="1" label="true">
+            </el-option>
+            <el-option :value="0" label="false">
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!--statistics-->
+        <el-form-item v-if="isStatisticsShow(chartConfig.type)" :label="$t('dashboard.panel.chartForm.statistics')" class="form-item--half-width" prop="param.statistics">
+          <el-select id="chart-box-statistics" v-model="chartConfig.param.statistics" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
+            <el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
+              <span class="panel-dropdown-label-txt" >{{$t(item.label)}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!--   nullType     -->
+        <el-form-item  :label='"Null value"' class="form-item--half-width"  prop="param.nullType" v-if="!isLog(chartConfig.type)">
+          <el-select id="chart-box-nullType" v-model="chartConfig.param.nullType" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()" >
+            <el-option v-for="item in nullTypeList" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+
+      <div v-if="isShowLegend(chartConfig.type)">
+        <!--legendConfig-->
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.chartForm.legendConfig')}}</span>
+          <el-switch v-model="chartConfig.param.legend.show" size="small" @change="change"></el-switch>
+        </div>
+        <transition name="el-zoom-in-top">
+          <div v-if="chartConfig.param.legend.show" class="form-items--half-width-group">
+            <el-form-item :label="$t('dashboard.panel.chartForm.legendPosition')" class="form-item--half-width"  prop="param.legend.placement">
+              <el-select id="chart-box-legend-show" v-model="chartConfig.param.legend.placement" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
+                <el-option v-for="item in legendPositionList" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('dashboard.panel.chartForm.legendValues')" class="form-item--half-width"  prop="param.legend.values">
+              <el-select id="chart-box-legend-value" v-model="chartConfig.param.legend.values" multiple collapse-tags placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
+                <el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+        </transition>
+
+        <!--thresholdConfig-->
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.chartForm.threshold')}}</span>
+          <el-switch v-model="chartConfig.param.thresholdShow" size="small" @change="thresholdShowChange"></el-switch>
+        </div>
+        <transition name="el-zoom-in-top">
+          <el-row v-if="chartConfig.param.thresholdShow">
+            <div v-for="(item,index) in chartConfig.param.thresholds" :key="index" class="thresholds-item">
+              <nezhaColor :value-arr="[{name:'thresholds',value:item.color}]" :show-text="false" :color-val="item.color"
+                          @colorChange="(color,key)=>{colorChange(color,key,index)}"/>
+              <el-input-number size="small" placeholder="" v-model="item.value" :controls="false" @blur="sortThresholds" @change="change"/>
+              <span @click="delThresholds(index)" class="del-thresholds-icon">
+              <i class="nz-icon nz-icon-delete" />
+            </span>
+            </div>
+            <div @click="addThresholds" class="thresholds-add">
+              Add thresholds
+            </div>
+          </el-row>
+        </transition>
+      </div>
+      <!--      valueMapping  -->
+      <div v-if="isShowValueMapping(chartConfig.type)">
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
+          <el-switch v-model="chartConfig.param.valueMapping.show" size="small" @change="change"></el-switch>
+        </div>
+        <transition name="el-zoom-in-top">
+          <el-row v-if="chartConfig.param.valueMapping.show">
+            <div v-for="(item,index) in chartConfig.param.valueMapping.mapping" :key="index">
+              <div class="chart-title chart-title-config">
+                <span class="endpoint-title-content">
+                  <i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showMapping(index)"></i>
+                  <span v-show="!item.show" class="title-content-left">
+                    <span v-if="item.type === 'value'">
+                      {{item.value}}
+                    </span>
+                    <span v-if="item.type === 'range'">
+                      {{item.from}} -> {{item.to}}
+                    </span>
+                    <span v-if="item.type === 'regx'">
+                      {{item.regx}}
+                    </span>
+                     <div :style="{background:item.color.bac}" class="prev-mapping-box">
+                        <span :style="{color:item.color.text}">
+                          {{item.display || "T"}}
+                        </span>
+                      </div>
+                  </span>
+                </span>
+                <span>
+                  <span @click="addMapping('')">
+                      <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
+                  </span>
+                  <span class="nz-icon-copy">
+                      <i @click="copyMapping(index)" class="nz-icon nz-icon-override"></i>
+                  </span>
+                  <span class="nz-icon-minus-medium">
+                      <i @click="removeMapping(index)" class="nz-icon nz-icon-minus"></i>
+                  </span>
+                </span>
+              </div>
+              <transition-group appear tag="div" name="el-zoom-in-top">
+                <el-row v-show="item.show" :key="1" class="thresholds-item">
+                  <div>
+                    <el-select v-model="item.type" size="small" style="width: 100px" @change="(val)=>{mappingItemChange(index,val)}">
+                      <el-option v-for="item in mappingTypeList" :value="item.value" :label="item.label" :key="item.value"/>
+                    </el-select>
+                  </div>
+                  <el-input-number :controls="false" v-if="item.type === 'value'" size="small" v-model="item.value" placeholder="value"></el-input-number>
+                  <el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.from" placeholder="from"></el-input-number>
+                  <el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.to" placeholder="to" style="margin-left: 10px"></el-input-number>
+                  <el-input v-if="item.type === 'regx'" size="small" v-model="item.regx" placeholder="regx"></el-input>
+                </el-row>
+                <el-row v-show="item.show" :key="2" class="thresholds-item">
+                  <div>
+                    <div class='mapping-display'>Display</div>
+                  </div>
+                  <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+                  <nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
+                </el-row>
+              </transition-group>
+            </div>
+            <div @click="addMapping" class="thresholds-add">
+              Add valueMapping
+            </div>
+          </el-row>
+        </transition>
+      </div>
+
+      <!--      table column-->
+      <div v-if="isTable(chartConfig.type)">
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
+        </div>
+        <div v-for="(item,index) in chartConfig.param.columns" :key="index">
+          <div class="chart-title chart-title-config">
+                <span class="endpoint-title-content">
+                  <i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showColumns(index)"></i>
+                  <span v-show="!item.show" class="title-content-left">
+                    <span>
+                      {{item.value}}
+                    </span>
+                  </span>
+                </span>
+            <span>
+                  <span @click="addColumns('')">
+                      <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
+                  </span>
+                  <span class="nz-icon-copy">
+                      <i @click="copyColumns(index)" class="nz-icon nz-icon-override"></i>
+                  </span>
+                  <span class="nz-icon-minus-medium">
+                      <i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i>
+                  </span>
+                </span>
+          </div>
+          <transition-group appear tag="div" name="el-zoom-in-top">
+            <el-row class="thresholds-item" v-show="item.show" :key="1">
+              <div>
+                <div class='mapping-display'>Title</div>
+              </div>
+              <el-input size="small" v-model="item.title" placeholder="regx"></el-input>
+              <div>
+                <div class='mapping-display'>Unit</div>
+              </div>
+              <el-cascader :id="'columns-unit' + index" v-model="item.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
+                           placeholder=""
+                           popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
+                           size="small"
+                           style="width: 100%"
+                           @change="unitSelected"
+              >
+              </el-cascader>
+            </el-row>
+            <el-row class="thresholds-item" v-show="item.show" :key="2">
+              <div>
+                <div class='mapping-display'>Display</div>
+              </div>
+              <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+            </el-row>
+          </transition-group>
+        </div>
+        <div @click="addColumns" class="thresholds-add">
+          Add Colums
+        </div>
+      </div>
+    </el-form>
   </div>
 </template>
 
 <script>
+import promqlInput from '@/components/page/dashboard/explore/promqlInput'
+import nezhaColor from '@/components/common/nezhaColor'
+import promqlInputMixin from '@/components/common/mixin/promqlInput'
+import publicConfig from '@/components/common/rightBox/chart/publicConfig'
+import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
+import VueTagsInput from '@johmun/vue-tags-input'
 export default {
-  name: 'metricsChartConfig'
+  name: 'metricsChartConfig',
+  props: {
+    params: {}
+  },
+  components: {
+    promqlInput,
+    nezhaColor,
+    VueTagsInput
+  },
+  mixins: [promqlInputMixin, publicConfig, chartTypeShow],
+  computed: {},
+  data () {
+    return {
+      rules: {},
+      promqlType: 'log',
+      chartTypeList: [
+        {
+          id: 'line',
+          name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
+        },
+        {
+          id: 'stackArea',
+          name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
+        },
+        {
+          id: 'point',
+          name: this.$t('dashboard.panel.chartForm.typeVal.point.label')
+        },
+        {
+          id: 'singleStat',
+          name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
+        },
+        {
+          id: 'bar',
+          name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
+        },
+        {
+          id: 'guage',
+          name: this.$t('dashboard.panel.chartForm.typeVal.guage.label')
+        },
+        {
+          id: 'treemap',
+          name: this.$t('dashboard.panel.chartForm.typeVal.treemap.label')
+        },
+        {
+          id: 'pie',
+          name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
+        },
+        {
+          id: 'log',
+          name: this.$t('dashboard.panel.chartForm.typeVal.log.label')
+        },
+        {
+          id: 'table',
+          name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
+        }
+
+      ]
+    }
+  },
+  methods: {
+    init () {
+      this.chartConfig = JSON.parse(JSON.stringify(this.params))
+      // 重置相关属性
+      this.promqlCount = 0
+      this.promqlKeys = []
+      this.elementIds = []
+      this.expressions = []
+      this.expressionsShow = []
+      this.legends = []
+      if (!this.chartConfig.elements.length) {
+        this.addExpression()
+      } else {
+        this.chartConfig.elements.forEach(item => {
+          this.addExpression(item)
+        })
+      }
+    },
+    chartTypeChange (type) {
+      switch (type) {
+        case 'line':
+        case 'stackArea':
+        case 'point':
+          this.chartConfig.param = {
+            stack: 0,
+            nullType: this.chartConfig.param.nullType,
+            legend: { placement: 'bottom', values: [], show: true },
+            thresholdShow: true,
+            thresholds: []
+          }
+          this.$nextTick(() => {
+            this.chartConfig.param.thresholds.push({ value: '', color: '#eeeeeeff' })
+          })
+          break
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          this.chartConfig.param = {
+            nullType: this.chartConfig.param.nullType,
+            statistics: 'last',
+            valueMapping: {
+              show: true,
+              mapping: []
+            }
+          }
+          break
+        case 'table':
+          this.chartConfig.param = {
+            nullType: this.chartConfig.param.nullType,
+            statistics: 'last',
+            columns: [],
+            tags: [],
+            indexs: ''
+          }
+          break
+      }
+      this.change()
+    },
+    sortThresholds () {
+      if (this.param && this.param.thresholds.length > 1) {
+        this.param.thresholds = this.chartConfig.param.thresholds.sort((a, b) => {
+          const value1 = a.value
+          const value2 = b.value
+          return value1 - value2
+        })
+      }
+      this.change()
+    },
+    thresholdShowChange () {
+      // if (this.chartConfig.param.thresholdShow) {
+      //
+      // } else {
+      //
+      // }
+      this.change()
+    },
+    addThresholds () {
+      this.chartConfig.param.thresholds.push({
+        value: '',
+        color: '#eeeeeeff'
+      })
+      this.change()
+    },
+    delThresholds (index) {
+      if (this.chartConfig.param.thresholds.length === 1) {
+        return
+      }
+      this.chartConfig.param.thresholds.splice(index, 1)
+      this.change()
+    }
+  },
+  created () {
+    this.init()
+  }
 }
 </script>
 

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

@@ -1,9 +1,11 @@
 <template>
   <div class="chart-config">
-    <el-form ref="metricschartForm" :model="chartConfig" :rules="rules" label-position= "top" label-width="120px">
+    <el-form ref="chartForm" :model="chartConfig" :rules="rules" label-position= "top" label-width="120px">
       <div v-if="chartConfig.elements">
-          <el-row
+        <el-form-item
-          :key="'ele' + index" class="element-item form-row-item" style="" v-for="index of chartConfig.elements.length"
+          :key="index" class="element-item form-row-item" style="" v-for="index of chartConfig.elements.length"
+          :prop="'elements.' + (index -1) + '.expression'"
+          :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
         >
           <div class="chart-title chart-title-config">
             <span class="endpoint-title-content">
@@ -57,7 +59,7 @@
               </el-row>
             </el-row>
           </transition>
-        </el-row>
+        </el-form-item>
       </div>
 
 <!--title-->
@@ -83,7 +85,7 @@
         </el-form-item>
 
         <!-- unit -->
-        <el-form-item v-show="chartConfig.type !='text' && chartConfig.type !=='url'&& chartConfig.type !=='group'&& chartConfig.type !=='diagram'" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
+        <el-form-item v-show="!isTable(chartConfig.type)" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
           <el-cascader id="chart-box-unit" v-model="chartConfig.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
                        placeholder=""
                        popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
@@ -94,6 +96,17 @@
           </el-cascader>
         </el-form-item>
 
+        <!-- index -->
+        <el-form-item v-show="isTable(chartConfig.type)" :label="$t('dashboard.panel.chartForm.tableIndex')" class="form-item--half-width" prop="unit">
+          <vue-tags-input
+            v-model="chartConfig.param.indexs"
+            :maxlength="32"
+            :placeholder="$t('overall.addParameter')"
+            :tags="chartConfig.param.tags"
+            @tags-changed="(newTags)=>{tagsChange(newTags)}"
+          />
+        </el-form-item>
+
         <!--width-->
         <el-form-item :label="$t('dashboard.panel.chartForm.width')" class="form-item--half-width" prop="span">
           <el-select id="chart-box-span"  v-model="chartConfig.span" :disabled="chartConfig.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
@@ -236,7 +249,7 @@
                   <el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.to" placeholder="to" style="margin-left: 10px"></el-input-number>
                   <el-input v-if="item.type === 'regx'" size="small" v-model="item.regx" placeholder="regx"></el-input>
                 </el-row>
-                <el-row v-show="item.show" :key="2" class="thresholds-item" style="position: relative">
+                <el-row v-show="item.show" :key="2" class="thresholds-item">
                   <div>
                     <div class='mapping-display'>Display</div>
                   </div>
@@ -254,7 +267,60 @@
 
 <!--      table column-->
       <div v-if="isTable(chartConfig.type)">
-
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
+        </div>
+        <div v-for="(item,index) in chartConfig.param.columns" :key="index">
+          <div class="chart-title chart-title-config">
+                <span class="endpoint-title-content">
+                  <i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showColumns(index)"></i>
+                  <span v-show="!item.show" class="title-content-left">
+                    <span>
+                      {{item.value}}
+                    </span>
+                  </span>
+                </span>
+            <span>
+                  <span @click="addColumns('')">
+                      <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
+                  </span>
+                  <span class="nz-icon-copy">
+                      <i @click="copyColumns(index)" class="nz-icon nz-icon-override"></i>
+                  </span>
+                  <span class="nz-icon-minus-medium">
+                      <i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i>
+                  </span>
+                </span>
+          </div>
+          <transition-group appear tag="div" name="el-zoom-in-top">
+            <el-row class="thresholds-item" v-show="item.show" :key="1">
+              <div>
+                <div class='mapping-display'>Title</div>
+              </div>
+              <el-input size="small" v-model="item.title" placeholder="regx"></el-input>
+              <div>
+                <div class='mapping-display'>Unit</div>
+              </div>
+              <el-cascader :id="'columns-unit' + index" v-model="item.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
+                           placeholder=""
+                           popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
+                           size="small"
+                           style="width: 100%"
+                           @change="unitSelected"
+              >
+              </el-cascader>
+            </el-row>
+            <el-row class="thresholds-item" v-show="item.show" :key="2">
+              <div>
+                <div class='mapping-display'>Display</div>
+              </div>
+              <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+            </el-row>
+          </transition-group>
+        </div>
+        <div @click="addColumns" class="thresholds-add">
+          Add Colums
+        </div>
       </div>
     </el-form>
   </div>
@@ -265,6 +331,8 @@ import promqlInput from '@/components/page/dashboard/explore/promqlInput'
 import nezhaColor from '@/components/common/nezhaColor'
 import promqlInputMixin from '@/components/common/mixin/promqlInput'
 import publicConfig from '@/components/common/rightBox/chart/publicConfig'
+import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
+import VueTagsInput from '@johmun/vue-tags-input'
 export default {
   name: 'metricsChartConfig',
   props: {
@@ -272,9 +340,10 @@ export default {
   },
   components: {
     promqlInput,
-    nezhaColor
+    nezhaColor,
+    VueTagsInput
   },
-  mixins: [promqlInputMixin, publicConfig],
+  mixins: [promqlInputMixin, publicConfig, chartTypeShow],
   computed: {},
   data () {
     return {
@@ -372,7 +441,9 @@ export default {
           this.chartConfig.param = {
             nullType: this.chartConfig.param.nullType,
             statistics: 'last',
-            column: []
+            columns: [],
+            tags: [],
+            indexs: ''
           }
           break
       }
@@ -410,81 +481,6 @@ export default {
       this.chartConfig.param.thresholds.splice(index, 1)
       this.change()
     },
-    isStackShow (type) {
-      switch (type) {
-        case 'line':
-        case 'stackArea':
-        case 'point':
-          return true
-        case 'table':
-        case 'singleStat':
-        case 'bar':
-        case 'treemap':
-        case 'pie':
-          return false
-        default: return false
-      }
-    },
-    isStatisticsShow (type) {
-      switch (type) {
-        case 'line':
-        case 'stackArea':
-        case 'point':
-          return false
-        case 'table':
-        case 'singleStat':
-        case 'bar':
-        case 'treemap':
-        case 'pie':
-          return true
-        default: return false
-      }
-    },
-    isShowLegend (type) {
-      switch (type) {
-        case 'line':
-        case 'stackArea':
-        case 'point':
-          return true
-        case 'table':
-        case 'singleStat':
-        case 'bar':
-        case 'treemap':
-        case 'pie':
-          return false
-        default: return false
-      }
-    },
-    isShowValueMapping (type) {
-      switch (type) {
-        case 'line':
-        case 'stackArea':
-        case 'point':
-        case 'table':
-          return false
-        case 'singleStat':
-        case 'bar':
-        case 'treemap':
-        case 'pie':
-          return true
-        default: return false
-      }
-    },
-    isTable (type) {
-      switch (type) {
-        case 'table':
-          return true
-        case 'line':
-        case 'stackArea':
-        case 'point':
-        case 'singleStat':
-        case 'bar':
-        case 'treemap':
-        case 'pie':
-          return false
-        default: return false
-      }
-    }
   },
   created () {
     this.init()

nezha-fronted/src/components/common/rightBox/chart/publicConfig.js

@@ -141,7 +141,8 @@ export default {
       this.expressions.push(this.expressions[index])
       this.legends.push(this.legends[index])
       this.promqlKeys.push(getUUID())
-      this.expressionName(this.transformNumToLetter(0))
+      const expressionName = this.getExpressionName()
+      this.expressionName.push(expressionName)
       this.elementIds.push('')
       this.expressionsShow.push(true)
       this.promqlCount++
@@ -210,6 +211,7 @@ export default {
       this.change()
     },
     colorChange (val, key, index) {
+      console.log(val, key, index)
       if (key === 'thresholds') {
         this.chartConfig.param.thresholds[index].color = val
       }
@@ -228,6 +230,29 @@ export default {
       this.$nextTick(() => {
         this.$emit('change', this.chartConfig)
       })
-    }
+    },
+    addColumns () {
+      this.chartConfig.param.columns.push({
+        title: '',
+        show: true,
+        unit: 2,
+        display: ''
+      })
+      this.change()
+    },
+    copyColumns (index) {
+      this.chartConfig.param.columns.push({ ...this.chartConfig.param.columns[index] })
+      this.change()
+    },
+    removeColumns (index) {
+      this.chartConfig.param.columns.splice(index, 1)
+      this.change()
+    },
+    showColumns (index) {
+      this.chartConfig.param.columns[index].show = !this.chartConfig.param.columns[index].show
+    },
+    tagsChange (newTags) {
+      // this.chartConfig.param.indexs = newTags.map(item => item.text)
+    },
   }
 }