feat： 新增 table类型

nezha-fronted/src/components/chart/chart/chartTable.vue

@@ -19,7 +19,15 @@
           <span class="data-column__span">{{col.title}}</span>
         </template>
         <template slot-scope="scope" :column="col">
-          {{scope.row.values}}
+          <div v-if="scope.row.valueMapping && scope.row.valueMapping[col.title + 'mapping']" :style="{
+            background: scope.row.valueMapping[col.title + 'mapping'].color.bac,
+            color: scope.row.valueMapping[col.title + 'mapping'].color.text,
+          }">
+            {{handleDisplay(col.display,{...scope.row.$labels, value: scope.row.showValue,legend:scope.row.legend})}}
+          </div>
+          <div v-else>
+            {{scope.row.showValue}}
+          </div>
         </template>
       </el-table-column>
     </el-table>
@@ -38,13 +46,22 @@ export default {
   data () {
     return {
       tableData: [],
-      columns: []
+      columns: [],
+      valueMapping: {}
     }
   },
   methods: {
     initChart () {
       console.log(this.chartInfo, this.chartData)
       this.columns = this.chartInfo.param.columns
+      this.chartInfo.param.valueMapping.mapping.forEach((item) => {
+        if (this.valueMapping[item.column]) {
+          this.valueMapping[item.column].push(item)
+        } else {
+          this.valueMapping[item.column] = [item]
+        }
+      })
+      console.log(this.valueMapping)
       const data = this.initTableData(this.chartInfo, this.chartData)
       const arr = []
       console.log(data)
@@ -54,6 +71,9 @@ export default {
           arr.push(data[key][keys])
         })
       })
+      arr.forEach(item => {
+        item.valueMapping = this.selectTableMapping(item, this.valueMapping)
+      })
       this.tableData = arr
       this.$refs.dataTable.doLayout()
       console.log(data)
@@ -69,10 +89,11 @@ export default {
           data.$labels = data.metric
           const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
           const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
-          const mapping = this.selectTableMapping(value, chartInfo.param.valueMapping)
+          // const mapping = this.selectTableMapping(value, chartInfo.param.valueMapping)
           data.values = value
           data.showValue = showValue
-          data.mapping = mapping
+          data.legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
+          // data.mapping = mapping
           data.keys = ''
           // eslint-disable-next-line vue/no-mutating-props
           arr.forEach((item) => {
@@ -97,12 +118,38 @@ export default {
       })
       return returnData
     },
-    selectTableMapping () {
+    selectTableMapping (row, valueMapping) {
-
+      const obj = {}
+      this.columns.forEach((column) => {
+        if (valueMapping[column.title]) {
+          obj[column.title + 'mapping'] = ''
+          if (this.chartInfo.param.valueMapping.show) {
+            valueMapping[column.title].forEach(item => {
+              if (item.type === 'value') {
+                if (row.values == item.value) {
+                  obj[column.title + 'mapping'] = item
+                }
+              }
+              if (item.type === 'range') {
+                if (row.values >= item.from && row.values <= item.to) {
+                  obj[column.title + 'mapping'] = item
+                }
+              }
+              if (item.type === 'regx') {
+                const reg = new RegExp(item.regx)
+                if (reg.test(row.values)) {
+                  obj[column.title + 'mapping'] = item
+                }
+              }
+            })
+          }
+        }
+      })
+      return obj
     },
     tableDataSort (orderBy) {
 
-    },
+    }
   },
   mounted () {
     this.initChart()

nezha-fronted/src/components/chart/panelChart.vue

@@ -141,6 +141,16 @@ export default {
             break
           }
           case 'system': {
+            console.log(this.chartInfo)
+            const params = {
+              q: '',
+              stat: startTime,
+              end: endTime,
+              resultType: 'matrix'
+            }
+            this.$get('/stat', params).then(res => {
+              console.log(res)
+            })
             this.loading = false
             break
           }

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

@@ -153,9 +153,9 @@ export default {
   methods: {
     ...mapActions(['loginSuccess']),
     login () {
-      // if (this.loading || !this.license.valid || !this.license.token) {
+      if (this.loading || !this.license.valid || !this.license.token) {
-      //   return
+        return
-      // }
+      }
       if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
         this.loading = true
         this.$post('/sys/login', this.loginData).then(res => {

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

@@ -434,8 +434,71 @@
           </el-row>
         </transition>
       </div>
+
+      <!--      table column-->
+      <div v-if="isTable(chartConfig.type)">
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.chartForm.columns')}}</span>
+        </div>
+        <div v-for="(item,index) in chartConfig.param.columns" :key="index">
+          <div class="chart-title chart-title-config">
+                <span class="chart-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-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item" style="flex: 1">
+                <el-input size="small" v-model="item.title" placeholder="regx" @change="change"></el-input>
+              </el-form-item>
+              <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="flex: 1"
+                           @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-form-item :prop="'param.columns.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
+                <el-input v-model="item.display"  style="margin-right: 10px" size="small"  @change="change"/>
+              </el-form-item>
+            </el-row>
+          </transition-group>
+        </div>
+        <div @click="addColumns" class="thresholds-add">
+          Add Colums
+        </div>
+      </div>
+
       <!--      valueMapping  -->
-      <div v-if="isShowValueMapping(chartConfig.type)">
+      <div v-if="isShowValueMapping(chartConfig.type) || isTable(chartConfig.type)">
         <div class="form__sub-title">
           <span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
           <el-switch
@@ -559,6 +622,12 @@
                   </el-form-item>
                 </el-row>
                 <el-row v-show="item.show" :key="2" class="thresholds-item">
+                  <div v-if="isTable(chartConfig.type)">
+                    <div class='mapping-display'>Columns</div>
+                  </div>
+                  <el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.mapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
+                    <el-input v-model="item.column"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change"/>
+                  </el-form-item>
                   <div>
                     <div class='mapping-display'>Display</div>
                   </div>
@@ -575,68 +644,6 @@
           </el-row>
         </transition>
       </div>
-
-      <!--      table column-->
-      <div v-if="isTable(chartConfig.type)">
-        <div class="form__sub-title">
-          <span>{{$t('dashboard.panel.chartForm.columns')}}</span>
-        </div>
-        <div v-for="(item,index) in chartConfig.param.columns" :key="index">
-          <div class="chart-title chart-title-config">
-                <span class="chart-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-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item" style="flex: 1">
-                <el-input size="small" v-model="item.title" placeholder="regx" @change="change"></el-input>
-              </el-form-item>
-              <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="flex: 1"
-                           @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-form-item :prop="'param.columns.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
-                <el-input v-model="item.display"  style="margin-right: 10px" size="small"  @change="change"/>
-              </el-form-item>
-            </el-row>
-          </transition-group>
-        </div>
-        <div @click="addColumns" class="thresholds-add">
-          Add Colums
-        </div>
-      </div>
     </el-form>
   </div>
 </template>
@@ -793,7 +800,11 @@ export default {
             statistics: 'last',
             columns: [],
             tags: [],
-            indexs: ''
+            indexs: '',
+            valueMapping: {
+              show: true,
+              mapping: []
+            }
           }
           break
         case 'log':

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

@@ -301,7 +301,7 @@ export default {
     },
     addMapping () {
       const bacColor = randomcolor()
-      this.chartConfig.param.valueMapping.mapping.push({
+      const obj = {
         type: 'value',
         show: true,
         value: undefined,
@@ -310,7 +310,11 @@ export default {
           bac: bacColor + 'FF',
           text: ColorReverse(bacColor) + 'FF'
         }
-      })
+      }
+      if (this.chartConfig.type === 'table') {
+        obj.column = ''
+      }
+      this.chartConfig.param.valueMapping.mapping.push(obj)
       this.change()
     },
     copyMapping (index) {

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

@@ -26,7 +26,7 @@
               class="form-item--half-width"
               prop="param.systemGroup"
             >
-              <el-select size="small" v-model="chartConfig.param.systemGroup" multiple collapse-tags :placeholder="$t('el.select.placeholder')">
+              <el-select size="small" v-model="chartConfig.param.systemGroup" multiple collapse-tags :placeholder="$t('el.select.placeholder')" @change="systemGroupChange">
                   <el-option v-for="item in groupList" :value="item.name" :key="item.name" :label="item.name"/>
               </el-select>
             </el-form-item>
@@ -36,7 +36,7 @@
               class="form-item--half-width"
               prop="param.systemSelect"
             >
-              <el-select size="small" v-model="chartConfig.param.systemSelect" :placeholder="$t('el.select.placeholder')">
+              <el-select size="small" v-model="chartConfig.param.systemSelect" :placeholder="$t('el.select.placeholder')" @change="systemSelectChange">
                 <el-option v-for="item in selectList" :value="item.name" :key="item.name" :label="item.name"/>
               </el-select>
             </el-form-item>
@@ -194,148 +194,6 @@
         </el-form-item>
       </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-form-item
-                    v-if="item.type === 'value'"
-                    :prop="'param.valueMapping.mapping.' + index + '.value'"
-                    :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
-                    class="thresholds-from-item"
-                  >
-                    <el-input-number
-                      :controls="false"
-                      size="small"
-                      v-model.number="item.value"
-                      placeholder="value"
-                      @change="change"
-                    ></el-input-number>
-                  </el-form-item>
-                  <el-form-item
-                    v-if="item.type === 'range'"
-                    :prop="'param.valueMapping.mapping.' + index + '.from'"
-                    :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
-                    class="thresholds-from-item"
-                  >
-                    <el-input-number
-                      :controls="false"
-                      size="small"
-                      v-model.number="item.from"
-                      placeholder="from"
-                      @change="change"
-                    ></el-input-number>
-                  </el-form-item>
-                  <el-form-item
-                    v-if="item.type === 'range'"
-                    :prop="'param.valueMapping.mapping.' + index + '.to'"
-                    :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
-                    class="thresholds-from-item"
-                  >
-                    <el-input-number
-                      :controls="false"
-                      size="small"
-                      v-model.number="item.to"
-                      placeholder="to"
-                      @change="change"
-                    ></el-input-number>
-                  </el-form-item>
-                  <el-form-item
-                    v-if="item.type === 'regx'"
-                    :prop="'param.valueMapping.mapping.' + index + '.regx'"
-                    :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
-                    class="thresholds-from-item"
-                  >
-                    <el-input
-                      size="small"
-                      v-model="item.regx"
-                      placeholder="regx"
-                      @change="change"
-                    ></el-input>
-                  </el-form-item>
-                </el-row>
-                <el-row v-show="item.show" :key="2" class="thresholds-item">
-                  <div>
-                    <div class='mapping-display'>Display</div>
-                  </div>
-                  <el-form-item :prop="'param.valueMapping.mapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
-                    <el-input v-model="item.display"  style="margin-right: 10px" size="small"  @change="change"/>
-                  </el-form-item>
-                  <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">
@@ -397,6 +255,154 @@
           Add Colums
         </div>
       </div>
+
+      <!--      valueMapping  -->
+      <div v-if="isShowValueMapping(chartConfig.type) || isTable(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="chart-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('')" style="margin-right: 5px">
+                      <i class="nz-icon nz-icon-create-square"></i>
+                  </span>
+                  <span @click="copyMapping(index)" style="margin-right: 5px">
+                      <i  class="nz-icon nz-icon-override"></i>
+                  </span>
+                  <span @click="removeMapping(index)" style="margin-right: 5px">
+                      <i  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-form-item
+                    v-if="item.type === 'value'"
+                    :prop="'param.valueMapping.mapping.' + index + '.value'"
+                    :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+                    class="thresholds-from-item"
+                  >
+                    <el-input-number
+                      :controls="false"
+                      size="small"
+                      v-model.number="item.value"
+                      placeholder="value"
+                      @change="change"
+                    ></el-input-number>
+                  </el-form-item>
+                  <el-form-item
+                    v-if="item.type === 'range'"
+                    :prop="'param.valueMapping.mapping.' + index + '.from'"
+                    :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+                    class="thresholds-from-item"
+                  >
+                    <el-input-number
+                      :controls="false"
+                      size="small"
+                      v-model.number="item.from"
+                      placeholder="from"
+                      @change="change"
+                    ></el-input-number>
+                  </el-form-item>
+                  <el-form-item
+                    v-if="item.type === 'range'"
+                    :prop="'param.valueMapping.mapping.' + index + '.to'"
+                    :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+                    class="thresholds-from-item"
+                  >
+                    <el-input-number
+                      :controls="false"
+                      size="small"
+                      v-model.number="item.to"
+                      @change="change"
+                      placeholder="to"
+                    ></el-input-number>
+                  </el-form-item>
+                  <el-form-item
+                    v-if="item.type === 'regx'"
+                    :prop="'param.valueMapping.mapping.' + index + '.regx'"
+                    :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
+                    class="thresholds-from-item"
+                  >
+                    <el-input
+                      size="small"
+                      v-model="item.regx"
+                      placeholder="regx"
+                      @change="change"
+                    ></el-input>
+                  </el-form-item>
+                </el-row>
+                <el-row v-show="item.show" :key="2" class="thresholds-item">
+                  <div v-if="isTable(chartConfig.type)">
+                    <div class='mapping-display'>Columns</div>
+                  </div>
+                  <el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.mapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
+                    <el-input v-model="item.column"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change"/>
+                  </el-form-item>
+                  <div>
+                    <div class='mapping-display'>Display</div>
+                  </div>
+                  <el-form-item :prop="'param.valueMapping.mapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
+                    <el-input v-model="item.display"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change"/>
+                  </el-form-item>
+                  <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>
     </el-form>
   </div>
 </template>
@@ -405,11 +411,13 @@
 import publicConfig from '@/components/common/rightBox/chart/publicConfig'
 import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
 import nezhaColor from '@/components/common/nezhaColor'
+import VueTagsInput from '@johmun/vue-tags-input'
 export default {
   name: 'systemChartConfig',
   mixins: [publicConfig, chartTypeShow],
   components: {
-    nezhaColor
+    nezhaColor,
+    VueTagsInput
   },
   data () {
     return {
@@ -516,11 +524,16 @@ export default {
             systemGroup: '',
             systemSelect: '',
             indexs: '',
+            tags: [],
             sort: 'desc',
             limit: 100,
             nullType: 'null',
             statistics: 'last',
-            columns: []
+            columns: [],
+            valueMapping: {
+              show: true,
+              mapping: []
+            }
           }
           break
       }
@@ -533,6 +546,17 @@ export default {
       this.chartConfig.param.systemSelect = ''
       this.groupList = item.group
       this.selectList = JSON.parse(JSON.stringify(item.select))
+    },
+    systemGroupChange () {
+      this.chartConfig.param.group = this.chartConfig.param.systemGroup.map(item => {
+        const obj = this.groupList.find(group => group.name === item)
+        return obj
+      })
+      this.change()
+    },
+    systemSelectChange () {
+      this.chartConfig.param.select = this.selectList.find(item => item.name === this.chartConfig.param.systemSelect)
+      this.change()
     }
   },
   created () {