Merge branch 'dev' of github.com:dataease/dataease into dev

2022-06-20 15:00:12 +08:00 · 2022-06-20 15:00:12 +08:00 · 179776fa4b
commit 179776fa4b
parent f29aa2ca95 b53392762b
6 changed files with 97 additions and 19 deletions
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/frontend/src/views/chart/chart/common/common.js
@ -216,12 +216,13 @@ export function seniorCfg(chart_option, chart) {
        }
      }
    }
+    // begin mark line settings
+    chart_option.series[0].markLine = {
+      symbol: 'none',
+      data: []
+    }
    if (senior.assistLine && senior.assistLine.length > 0) {
      if (chart_option.series && chart_option.series.length > 0) {
-        chart_option.series[0].markLine = {
-          symbol: 'none',
-          data: []
-        }
        const customStyle = JSON.parse(chart.customStyle)
        let xAxis, yAxis
        if (customStyle.xAxis) {
--- a/frontend/src/views/chart/chart/gauge/gauge_antv.js
+++ b/frontend/src/views/chart/chart/gauge/gauge_antv.js
@ -1,10 +1,13 @@
 import { getPadding, getTheme } from '@/views/chart/chart/common/common_antv'
 import { Gauge } from '@antv/g2plot'
-import { DEFAULT_SIZE, DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
+import { DEFAULT_LABEL, DEFAULT_SIZE, DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
 import { getScaleValue } from '@/components/canvas/utils/style'
+import { valueFormatter } from '@/views/chart/chart/formatter'
+
+let labelFormatter = null

 export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
-  let max, labelContent, startAngel, endAngel
+  let min, max, labelContent, startAngel, endAngel, tickCount
  // theme
  const theme = getTheme(chart)
  // data
@ -15,7 +18,9 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
    customAttr = JSON.parse(chart.customAttr)
    if (customAttr.size) {
      const size = JSON.parse(JSON.stringify(customAttr.size))
+      min = size.gaugeMin ? size.gaugeMin : DEFAULT_SIZE.gaugeMin
      max = size.gaugeMax ? size.gaugeMax : DEFAULT_SIZE.gaugeMax
+      tickCount = size.gaugeTickCount ? size.gaugeTickCount : DEFAULT_SIZE.gaugeTickCount
      startAngel = parseInt(size.gaugeStartAngle) * Math.PI / 180
      endAngel = parseInt(size.gaugeEndAngle) * Math.PI / 180
    }
@ -28,13 +33,23 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
        style: ({ percent }) => ({
          fontSize: parseInt(label.fontSize),
          color: label.color
-        })
+        }),
+        formatter: function(v) {
+          let value
+          if (labelFormatter.type === 'percent') {
+            value = per
+          } else {
+            value = data
+          }
+          return valueFormatter(value, labelFormatter)
+        }
      }
    } else {
      labelContent = false
    }
+    labelFormatter = label.gaugeLabelFormatter ? label.gaugeLabelFormatter : DEFAULT_LABEL.gaugeLabelFormatter
  }
-  const per = (parseFloat(data) / parseFloat(max))
+  const per = (parseFloat(data) - parseFloat(min)) / (parseFloat(max) - parseFloat(min))

  const range = [0]
  let index = 0
@ -75,9 +90,13 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
      content: labelContent
    },
    axis: {
+      tickInterval: 1 / tickCount,
      label: {
        style: {
          fontSize: getScaleValue(14, scale) // 刻度值字体大小
+        },
+        formatter: function(v) {
+          return Number(v) * (max - min) + min
        }
      },
      tickLine: {
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@ -237,14 +237,13 @@ export const TYPE_CONFIGS = [
        'alpha'
      ],
      'size-selector-ant-v': [
+        'gaugeMin',
        'gaugeMax',
        'gaugeStartAngle',
        'gaugeEndAngle'
      ],
      'label-selector-ant-v': [
-        'show',
-        'fontSize',
-        'color'
+        'labelGauge'
      ],
      'title-selector-ant-v': [
        'show',
--- a/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
@ -31,12 +31,48 @@
          </el-form-item>
        </div>
      </el-form>
+
+      <el-form v-show="showProperty('labelGauge') && chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="labelForm.show">
+          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
+              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_color')" class="form-item">
+            <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.value_formatter_type')" class="form-item">
+            <el-select v-model="labelForm.gaugeLabelFormatter.type" @change="changeLabelAttr">
+              <el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-show="labelForm.gaugeLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
+            <el-input-number v-model="labelForm.gaugeLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeLabelAttr" />
+          </el-form-item>
+          <el-form-item v-show="labelForm.gaugeLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
+            <el-select v-model="labelForm.gaugeLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeLabelAttr">
+              <el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
+            <el-input v-model="labelForm.gaugeLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeLabelAttr" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
+            <el-checkbox v-model="labelForm.gaugeLabelFormatter.thousandSeparator" @change="changeLabelAttr" />
+          </el-form-item>
+        </div>
+      </el-form>
    </el-col>
  </div>
 </template>

 <script>
 import { COLOR_PANEL, DEFAULT_LABEL } from '../../chart/chart'
+import { formatterType, unitList } from '@/views/chart/chart/formatter'

 export default {
  name: 'LabelSelectorAntV',
@ -77,7 +113,9 @@ export default {
        { name: this.$t('chart.center'), value: 'middle' },
        { name: this.$t('chart.text_pos_bottom'), value: 'bottom' }
      ],
-      predefineColors: COLOR_PANEL
+      predefineColors: COLOR_PANEL,
+      typeList: formatterType,
+      unitList: unitList
    }
  },
  watch: {
@ -108,6 +146,9 @@ export default {
          if (!this.labelForm.labelLine) {
            this.labelForm.labelLine = JSON.parse(JSON.stringify(DEFAULT_LABEL.labelLine))
          }
+          if (!this.labelForm.gaugeLabelFormatter) {
+            this.labelForm.gaugeLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_LABEL.gaugeLabelFormatter))
+          }
        }
      }
    },
--- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
@ -273,10 +273,16 @@
            @change="changeBarSizeCase('tableColumnMode')"
          />
        </el-form-item>
-        <!--table-end-->
-        <!--gauge-begin-->
+      </el-form>
+      <!--table-end-->
+
+      <!--gauge-begin-->
+      <el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
+        <el-form-item v-show="showProperty('gaugeMin')" :label="$t('chart.min')" class="form-item form-item-slider">
+          <el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />
+        </el-form-item>
        <el-form-item v-show="showProperty('gaugeMax')" :label="$t('chart.max')" class="form-item form-item-slider">
-          <el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase('gaugeMax')" />
+          <el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />
        </el-form-item>
        <el-form-item
          v-show="showProperty('gaugeStartAngle')"
@ -308,14 +314,22 @@
            @change="changeBarSizeCase('gaugeEndAngle')"
          />
        </el-form-item>
-        <!--gauge-end-->
-        <!--text&label-end-->
        <el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
          <el-select
            v-model="sizeForm.quotaFontSize"
            :placeholder="$t('chart.quota_font_size')"
            @change="changeBarSizeCase('quotaFontSize')"
-          >
+          />
+        </el-form-item>
+        <el-form-item :label="$t('chart.tick_count')" class="form-item form-item-slider">
+          <el-input-number v-model="sizeForm.gaugeTickCount" :min="1" :step="1" :precision="0" size="mini" @change="changeBarSizeCase" />
+        </el-form-item>
+      </el-form>
+      <!--gauge-end-->
+
+      <el-form v-show="chart.type && (chart.type.includes('text') || chart.type === 'label')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
+        <el-form-item :label="$t('chart.quota_font_size')" class="form-item">
+          <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
          </el-select>
        </el-form-item>
@ -521,6 +535,8 @@ export default {

          this.sizeForm.tableHeaderAlign = this.sizeForm.tableHeaderAlign ? this.sizeForm.tableHeaderAlign : DEFAULT_SIZE.tableHeaderAlign
          this.sizeForm.tableItemAlign = this.sizeForm.tableItemAlign ? this.sizeForm.tableItemAlign : DEFAULT_SIZE.tableItemAlign
+
+          this.sizeForm.gaugeTickCount = this.sizeForm.gaugeTickCount ? this.sizeForm.gaugeTickCount : DEFAULT_SIZE.gaugeTickCount
        }
      }
    },
--- a/frontend/src/views/system/log/index.vue
+++ b/frontend/src/views/system/log/index.vue
@ -54,7 +54,9 @@ export default {
            options: [],
            multiple: true,
            class: 'de-log-filter',
-            defaultOperator: 'in'
+            defaultOperator: 'in',
+            filterable: true,
+            'reserve-keyword': true
          },
          { field: 'nick_name', label: this.$t('log.user'), component: 'DeComplexInput', class: 'de-log-filter' },