feat：新增切换 datasource 以及 type 清空部分不需要的参数

2021-12-01 17:12:02 +08:00
parent cc6bfbbdc2
commit 9aa66facc6
4 changed files with 163 additions and 100 deletions
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -237,9 +237,25 @@ export default {
    },
    datasourceChange (val, e) {
      console.log(val, e, this.editChart.datasource)
+      if (this.editChart.datasource == 1) {
+        this.editChart = {
+          ...this.editChart,
+          span: 4,
+          height: 4,
+          unit: 2,
+          type: 'line',
+          elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
+          param: {
+            stack: 0,
+            nullType: 'null',
+            legend: { placement: 'bottom', values: [], show: true },
+            thresholdShow: true,
+            thresholds: [{ value: '', color: '#eeeeeeff' }]
+          }
+        }
+      }
    },
    editChartChange (newEditChart) {
-      console.log(newEditChart)
      this.editChart = JSON.parse(JSON.stringify(newEditChart))
    }
  },
--- a/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
@@ -172,7 +172,7 @@
            <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"/>
+              <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>
@@ -183,6 +183,7 @@
          </el-row>
        </transition>
      </div>
+<!--      valueMapping  -->
      <div v-if="isShowValueMapping(chartConfig.type)">
        <div class="form__sub-title">
          <span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
@@ -231,6 +232,11 @@
          </el-row>
        </transition>
      </div>
+
+<!--      table column-->
+      <div v-if="isTable(chartConfig.type)">
+
+      </div>
    </el-form>
  </div>
 </template>
@@ -314,8 +320,47 @@ export default {
        })
      }
    },
+    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',
+            column: []
+          }
+          break
+      }
+      this.change()
+    },
    sortThresholds () {
-      if (this.param.thresholds.length > 1) {
+      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
@@ -323,6 +368,103 @@ export default {
        })
      }
      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()
+    },
+    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 () {
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -66,66 +66,6 @@ export default {
  },
  mixins: [rz],
  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
-      }
-    },
    expressionChange: function () {
      if (this.expressions.length) {
        this.chartConfig.elements = []
@@ -148,7 +88,6 @@ export default {
      return letter
    },
    addExpression (item) {
-      console.log(item, 213213123)
      if (!item) {
        this.expressions.push('')
        const expressionName = this.getExpressionName()
@@ -216,38 +155,12 @@ export default {
      this.expressionChange()
    },
    showExpression (index) {
-      console.log(index, this.expressionsShow[index - 1])
      this.$set(this.expressionsShow, index - 1, !this.expressionsShow[index - 1])
    },
-    chartTypeChange () {
-      this.change()
-    },
    unitSelected: function (value) {
      // this.chartConfig.unit=value[value.length-1];
      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()
-    },
    addMapping () {
      this.chartConfig.param.valueMapping.mapping.push({
        type: 'value',
@@ -273,7 +186,6 @@ export default {
      this.chartConfig.param.valueMapping.mapping[index].show = !this.chartConfig.param.valueMapping.mapping[index].show
    },
    mappingItemChange (index, type) {
-      console.log(index, type)
      const mapping = this.chartConfig.param.valueMapping.mapping[index]
      if (mapping.type === 'value') {
        this.chartConfig.param.valueMapping.mapping[index] = {
@@ -298,7 +210,6 @@ export default {
      this.change()
    },
    colorChange (val, key, index) {
-      console.log(val, key, index)
      if (key === 'thresholds') {
        this.chartConfig.param.thresholds[index].color = val
      }
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -191,22 +191,16 @@ export default {
        id: '',
        name: '',
        type: 'line',
-        span: 12,
+        span: 4,
        datasource: '1',
        height: 4,
        unit: 2,
        param: {
-          url: '',
-          threshold: '',
          stack: 0,
          nullType: 'null',
          legend: { placement: 'bottom', values: [], show: true },
          thresholdShow: true,
-          thresholds: [{ value: '', color: '#eeeeeeff' }],
-          valueMapping: {
-            show: true,
-            mapping: []
-          }
+          thresholds: [{ value: '', color: '#eeeeeeff' }]
        },
        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
        panel: '',