feat： system-char-config 添加

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

@@ -104,7 +104,7 @@
     .element-item {
       padding: 0;
       border-bottom: none;
-      margin-bottom: 10px;
+      margin-bottom: 20px !important;
     }
     .vue-tags-input{
       display: inline-block;
@@ -121,8 +121,15 @@
     }
     .system-chart-config-left{
       width: 40%;
+      height: 100%;
+      border: 1px solid $--border-color-light;
+      border-radius: 2px;
+      padding: 10px;
+      box-sizing: border-box;
+     ul{
        height: 100%;
        overflow-y: auto;
+     }
       .system-chart-item {
         font-size: 14px;
         padding: 3px 5px;
@@ -140,5 +147,10 @@
       margin-left: 10px;
       height: 100%;
     }
+    //.el-select__tags > span {
+    //  display: flex;
+    //  width: 100%;
+    //  overflow-x: auto;
+    //}
   }
 }

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

@@ -95,13 +95,7 @@
 import { fromRoute } from '@/components/common/js/constants'
 import editRigthBox from '@/components/common/mixin/editRigthBox'
 import { resetZIndex } from '@/components/common/js/common'
-import chartPreview from '@/components/charts/chartPreview'
-import alertChartParam from '@/components/page/dashboard/alertChartParam'
-import promqlInput from '@/components/page/dashboard/explore/promqlInput'
-import richTextEditor from '@/components/charts/richTextEditor'
 import selectPanel from '@/components/common/popBox/selectPanel'
-import nezhaColor from '@/components/common/nezhaColor'
-import diagram from '@/components/common/ChartDiagram/diagram'
 import chartConfig from '@/components/common/rightBox/chart/chartConfig'
 import otherChartConfig from '@/components/common/rightBox/chart/otherChartConfig'
 import systemChartConfig from '@/components/common/rightBox/chart/systemChartConfig'
@@ -127,14 +121,7 @@ export default {
   },
   mixins: [rz, editRigthBox],
   components: {
-    System,
-    'chart-preview': chartPreview,
-    'alert-chart-param': alertChartParam,
-    'promql-input': promqlInput,
-    'rich-text-editor': richTextEditor,
     selectPanel,
-    nezhaColor,
-    diagram,
     chartConfig,
     systemChartConfig,
     otherChartConfig
@@ -267,14 +254,20 @@ export default {
           span: 4,
           height: 4,
           unit: 2,
-          type: 'stat',
+          type: 'singleStat',
           param: {
             refer: 1,
             system: '',
             systemGroup: '',
             systemSelect: '',
             sort: 'desc',
-            limit: 100
+            limit: undefined,
+            nullType: 'null',
+            statistics: 'last',
+            valueMapping: {
+              show: true,
+              mapping: []
+            }
           }
         }
         delete this.editChart.elements

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

@@ -10,6 +10,7 @@ export default {
         case 'singleStat':
         case 'bar':
         case 'treemap':
+        case 'guage':
         case 'pie':
           return false
         default: return false
@@ -25,6 +26,7 @@ export default {
         case 'singleStat':
         case 'bar':
         case 'treemap':
+        case 'guage':
         case 'pie':
           return true
         default: return false
@@ -39,6 +41,7 @@ export default {
         case 'table':
         case 'singleStat':
         case 'bar':
+        case 'guage':
         case 'treemap':
         case 'pie':
           return false
@@ -54,6 +57,7 @@ export default {
           return false
         case 'singleStat':
         case 'bar':
+        case 'guage':
         case 'treemap':
         case 'pie':
           return true
@@ -69,6 +73,7 @@ export default {
         case 'point':
         case 'singleStat':
         case 'bar':
+        case 'guage':
         case 'treemap':
         case 'pie':
           return false

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

@@ -25,19 +25,20 @@
               :label="$t('dashboard.panel.chartForm.group')"
               class="form-item--half-width"
               prop="param.systemGroup"
-              :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
             >
-              <el-select size="small">
+              <el-select size="small" v-model="chartConfig.param.systemGroup" multiple collapse-tags>
-
+                  <el-option v-for="item in groupList" :value="item.name" :key="item.name" :label="item.name"/>
               </el-select>
             </el-form-item>
             <el-form-item
+              v-if="selectList.length"
               :label="$t('dashboard.panel.chartForm.select')"
               class="form-item--half-width"
-              prop="param.stack"
+              prop="param.systemSelect"
-              :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
             >
-              <el-input  size="small"/>
+              <el-select size="small" v-model="chartConfig.param.systemSelect">
+                <el-option v-for="item in selectList" :value="item.name" :key="item.name" :label="item.name"/>
+              </el-select>
             </el-form-item>
           </div>
           <div class="form-items--half-width-group">
@@ -62,10 +63,9 @@
               </el-select>
             </el-form-item>
             <el-form-item
-              :label="$t('dashboard.panel.chartForm.limit')"
+              :label="$t('dashboard.panel.chartForm.result')"
               class="form-item--half-width"
               prop="param.limit"
-              :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
             >
               <el-input-number :controls="false" v-model="chartConfig.param.limit"  size="small"/>
             </el-form-item>
@@ -177,6 +177,206 @@
           </el-select>
         </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: 'change'}"
+                    class="thresholds-from-item"
+                  >
+                    <el-input-number
+                      :controls="false"
+                      size="small"
+                      v-model="item.value"
+                      placeholder="value"
+                    ></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: 'change'}"
+                    class="thresholds-from-item"
+                  >
+                    <el-input-number
+                      :controls="false"
+                      size="small"
+                      v-model="item.from"
+                      placeholder="from"
+                    ></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: 'change'}"
+                    class="thresholds-from-item"
+                  >
+                    <el-input-number
+                      :controls="false"
+                      size="small"
+                      v-model="item.to"
+                      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: 'change'}"
+                    class="thresholds-from-item"
+                  >
+                    <el-input
+                      size="small"
+                      v-model="item.regx"
+                      placeholder="regx"
+                    ></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: 'change'}" class="thresholds-from-item">
+                    <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+                  </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">
+          <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-form-item :prop="'param.columns.' + index + 'title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+                <el-input size="small" v-model="item.title" placeholder="regx"></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="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-form-item :prop="'param.columns.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+                <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+              </el-form-item>
+            </el-row>
+          </transition-group>
+        </div>
+        <div @click="addColumns" class="thresholds-add">
+          Add Colums
+        </div>
+      </div>
     </el-form>
   </div>
 </template>
@@ -184,14 +384,20 @@
 <script>
 import publicConfig from '@/components/common/rightBox/chart/publicConfig'
 import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
+import nezhaColor from '@/components/common/nezhaColor'
 export default {
   name: 'systemChartConfig',
   mixins: [publicConfig, chartTypeShow],
+  components: {
+    nezhaColor
+  },
   data () {
     return {
       systemData: [],
       loading: false,
       rules: {},
+      groupList: [],
+      selectList: [],
       chartTypeList: [
         {
           id: 'singleStat',
@@ -204,6 +410,18 @@ export default {
         {
           id: 'pie',
           name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
+        },
+        {
+          id: 'guage',
+          name: this.$t('dashboard.panel.chartForm.typeVal.guage.label')
+        },
+        {
+          id: 'treemap',
+          name: this.$t('dashboard.panel.chartForm.typeVal.treemap.label')
+        },
+        {
+          id: 'table',
+          name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
         }
       ]
     }
@@ -220,6 +438,9 @@ export default {
           this.systemData = res.data.list
           if (res.data.list.length) {
             this.chartConfig.param.system = res.data.list[0].name
+            this.groupList = res.data.list[0].group
+            this.selectList = res.data.list[0].select
+            this.$refs.chartForm.clearValidate()
           }
         } else {
           this.$message.error(res.msg)
@@ -228,33 +449,32 @@ export default {
     },
     chartTypeChange (type) {
       switch (type) {
-        case 'group':
+        case 'singleStat':
-          this.chartConfig.height = ''
+        case 'bar':
-          this.chartConfig.span = 12
+        case 'pie':
-          this.chartConfig.param = {
+        case 'guage':
-            collapse: false
+        case 'treemap':
+          this.chartConfig.param.valueMapping = {
+            show: true,
+            mapping: []
           }
+          this.chartConfig.param.refer = 1
+          delete this.chartConfig.param.columns
           break
-        case 'text':
+        case 'table':
-          this.chartConfig.param = {
+          this.chartConfig.param.columns = []
-            text: ''
+          this.chartConfig.param.refer = 1
-          }
+          delete this.chartConfig.param.valueMapping
-          break
-        case 'diagram':
-          this.chartConfig.param = {
-            topo: ''
-          }
-          break
-        case 'url':
-          this.chartConfig.param = {
-            url: ''
-          }
           break
       }
       this.change()
     },
     changeSystem (item) {
       this.chartConfig.param.system = item.name
+      this.chartConfig.param.systemGroup = ''
+      this.chartConfig.param.systemSelect = ''
+      this.groupList = item.group
+      this.selectList = item.select
     }
   },
   created () {