feat(视图): 辅助线支持动态值

2022-09-14 13:59:56 +08:00 · 2022-09-14 13:59:56 +08:00 · f03eaffa9e
commit f03eaffa9e
parent 2b2385602d
5 changed files with 133 additions and 27 deletions
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/frontend/src/views/chart/chart/common/common.js
@ -231,7 +231,12 @@ export function seniorCfg(chart_option, chart) {
        if (customStyle.yAxis) {
          yAxis = JSON.parse(JSON.stringify(customStyle.yAxis))
        }
-        senior.assistLine.forEach(ele => {
+
+        const fixedLines = senior.assistLine.filter(ele => ele.field === '0')
+        const dynamicLines = chart.data.dynamicAssistLines
+        const lines = fixedLines.concat(dynamicLines)
+
+        lines.forEach(ele => {
          if (chart.type.includes('horizontal')) {
            chart_option.series[0].markLine.data.push({
              symbol: 'none',
--- a/frontend/src/views/chart/chart/common/common_antv.js
+++ b/frontend/src/views/chart/chart/common/common_antv.js
@ -658,7 +658,12 @@ export function getAnalyse(chart) {
        const a = JSON.parse(JSON.stringify(customStyle.yAxis))
        yAxisPosition = transAxisPosition(chart, a)
      }
-      senior.assistLine.forEach(ele => {
+
+      const fixedLines = senior.assistLine.filter(ele => ele.field === '0')
+      const dynamicLines = chart.data.dynamicAssistLines
+      const lines = fixedLines.concat(dynamicLines)
+
+      lines.forEach(ele => {
        const content = ele.name + ' : ' + parseFloat(ele.value)
        assistLine.push({
          type: 'line',
--- a/frontend/src/views/chart/components/senior/AssistLine.vue
+++ b/frontend/src/views/chart/components/senior/AssistLine.vue
@ -16,10 +16,14 @@
          </el-col>
          <el-col :span="8">
            <span v-if="item.field === '0'" :title="$t('chart.field_fixed')">{{ $t('chart.field_fixed') }}</span>
+            <span v-if="item.field === '1'" :title="$t('chart.field_dynamic')">{{ $t('chart.field_dynamic') }}</span>
          </el-col>
-          <el-col :span="8">
+          <el-col v-if="item.field === '0'" :span="8">
            <span :title="item.value">{{ item.value }}</span>
          </el-col>
+          <el-col v-if="item.field === '1'" :span="8">
+            <span :title="item.curField.name + '(' + $t('chart.' + item.summary) + ')'">{{ item.curField.name + '(' + $t('chart.' + item.summary) + ')' }}</span>
+          </el-col>
        </el-row>
      </el-col>
    </el-col>
@ -34,7 +38,7 @@
      width="70%"
      class="dialog-css"
    >
-      <assist-line-edit :line="assistLine" @onAssistLineChange="lineChange" />
+      <assist-line-edit :line="assistLine" :quota-fields="quotaData" @onAssistLineChange="lineChange" />
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeEditLine">{{ $t('chart.cancel') }}</el-button>
        <el-button type="primary" size="mini" @click="changeLine">{{ $t('chart.confirm') }}</el-button>
@ -52,13 +56,18 @@ export default {
    chart: {
      type: Object,
      required: true
+    },
+    quotaData: {
+      type: Array,
+      required: true
    }
  },
  data() {
    return {
      assistLine: [],
      editLineDialog: false,
-      lineArr: []
+      lineArr: [],
+      quotaFields: []
    }
  },
  watch: {
@ -114,21 +123,40 @@ export default {
          })
          return
        }
-        if (!ele.value) {
-          this.$message({
-            message: this.$t('chart.value_can_not_empty'),
-            type: 'error',
-            showClose: true
-          })
-          return
-        }
-        if (parseFloat(ele.value).toString() === 'NaN') {
-          this.$message({
-            message: this.$t('chart.value_error'),
-            type: 'error',
-            showClose: true
-          })
-          return
+        if (ele.field === '0') {
+          if (!ele.value) {
+            this.$message({
+              message: this.$t('chart.value_can_not_empty'),
+              type: 'error',
+              showClose: true
+            })
+            return
+          }
+          if (parseFloat(ele.value).toString() === 'NaN') {
+            this.$message({
+              message: this.$t('chart.value_error'),
+              type: 'error',
+              showClose: true
+            })
+            return
+          }
+        } else {
+          if (!ele.fieldId || ele.fieldId === '') {
+            this.$message({
+              message: this.$t('chart.field_not_empty'),
+              type: 'error',
+              showClose: true
+            })
+            return
+          }
+          if (!ele.summary || ele.summary === '') {
+            this.$message({
+              message: this.$t('chart.summary_not_empty'),
+              type: 'error',
+              showClose: true
+            })
+            return
+          }
        }
      }
      this.assistLine = JSON.parse(JSON.stringify(this.lineArr))
--- a/frontend/src/views/chart/components/senior/dialog/AssistLineEdit.vue
+++ b/frontend/src/views/chart/components/senior/dialog/AssistLineEdit.vue
@ -3,7 +3,7 @@
    <el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addLine" />
    <div style="max-height: 50vh;overflow-y: auto;">
      <el-row v-for="(item,index) in lineArr" :key="index" class="line-item">
-        <el-col :span="6">
+        <el-col :span="4">
          <el-input v-model="item.name" class="value-item" :placeholder="$t('chart.name')" size="mini" clearable @change="changeAssistLine" />
        </el-col>
        <el-col :span="4">
@ -16,9 +16,37 @@
            />
          </el-select>
        </el-col>
-        <el-col :span="6">
+        <el-col v-if="item.field === '0'" :span="8">
          <el-input v-model="item.value" class="value-item" :placeholder="$t('chart.drag_block_label_value')" size="mini" clearable @change="changeAssistLine" />
        </el-col>
+        <el-col v-if="item.field === '1'" :span="8">
+          <el-select v-model="item.fieldId" size="mini" class="select-item" :placeholder="$t('chart.field')" @change="changeAssistLineField(item)">
+            <el-option
+              v-for="quota in quotaData"
+              :key="quota.id"
+              :label="quota.name"
+              :value="quota.id"
+            >
+              <span style="float: left">
+                <svg-icon v-if="quota.deType === 0" icon-class="field_text" class="field-icon-text" />
+                <svg-icon v-if="quota.deType === 1" icon-class="field_time" class="field-icon-time" />
+                <svg-icon v-if="quota.deType === 2 || quota.deType === 3" icon-class="field_value" class="field-icon-value" />
+                <svg-icon v-if="quota.deType === 5" icon-class="field_location" class="field-icon-location" />
+              </span>
+              <span style="float: left; color: #8492a6; font-size: 12px">{{ quota.name }}</span>
+            </el-option>
+          </el-select>
+          <el-select v-model="item.summary" size="mini" class="select-item" :placeholder="$t('chart.summary')" @change="changeAssistLine">
+            <el-option v-if="item.curField && item.curField.id && item.curField.deType !== 0 && item.curField.deType !== 1 && item.curField.deType !== 5" key="sum" value="sum" :label="$t('chart.sum')" />
+            <el-option v-if="item.curField && item.curField.id && item.curField.deType !== 0 && item.curField.deType !== 1 && item.curField.deType !== 5" key="avg" value="avg" :label="$t('chart.avg')" />
+            <el-option v-if="item.curField && item.curField.id && item.curField.deType !== 0 && item.curField.deType !== 1 && item.curField.deType !== 5" key="max" value="max" :label="$t('chart.max')" />
+            <el-option v-if="item.curField && item.curField.id && item.curField.deType !== 0 && item.curField.deType !== 1 && item.curField.deType !== 5" key="min" value="min" :label="$t('chart.min')" />
+            <el-option v-if="item.curField && item.curField.id && item.curField.deType !== 0 && item.curField.deType !== 1 && item.curField.deType !== 5" key="stddev_pop" value="stddev_pop" :label="$t('chart.stddev_pop')" />
+            <el-option v-if="item.curField && item.curField.id && item.curField.deType !== 0 && item.curField.deType !== 1 && item.curField.deType !== 5" key="var_pop" value="var_pop" :label="$t('chart.var_pop')" />
+            <el-option key="count" value="count" :label="$t('chart.count')" />
+            <el-option v-if="item.curField && item.curField.id" key="count_distinct" value="count_distinct" :label="$t('chart.count_distinct')" />
+          </el-select>
+        </el-col>
        <el-col :span="4">
          <el-select v-model="item.lineType" size="mini" class="select-item" @change="changeAssistLine">
            <el-option
@ -49,6 +77,10 @@ export default {
    line: {
      type: Array,
      required: true
+    },
+    quotaFields: {
+      type: Array,
+      required: true
    }
  },
  data() {
@ -57,26 +89,40 @@ export default {
      lineObj: {
        name: '辅助线',
        field: '0', // 固定值
+        fieldId: '',
+        summary: 'count',
        axis: 'y', // 主轴
        value: '0',
        lineType: 'solid',
-        color: '#ff0000'
+        color: '#ff0000',
+        curField: {}
      },
      fieldOptions: [
-        { label: this.$t('chart.field_fixed'), value: '0' }
+        { label: this.$t('chart.field_fixed'), value: '0' },
+        { label: this.$t('chart.field_dynamic'), value: '1' }
      ],
      lineOptions: [
        { label: this.$t('chart.line_type_solid'), value: 'solid' },
        { label: this.$t('chart.line_type_dashed'), value: 'dashed' },
        { label: this.$t('chart.line_type_dotted'), value: 'dotted' }
      ],
-      predefineColors: COLOR_PANEL
+      predefineColors: COLOR_PANEL,
+      quotaData: []
+    }
+  },
+  watch: {
+    'quotaFields': function() {
+      this.initField()
    }
  },
  mounted() {
+    this.initField()
    this.init()
  },
  methods: {
+    initField() {
+      this.quotaData = this.quotaFields.filter(ele => !ele.chartId && ele.id !== 'count')
+    },
    init() {
      this.lineArr = JSON.parse(JSON.stringify(this.line))
    },
@ -91,6 +137,23 @@ export default {

    changeAssistLine() {
      this.$emit('onAssistLineChange', this.lineArr)
+    },
+    changeAssistLineField(item) {
+      item.curField = this.getQuotaField(item.fieldId)
+      this.changeAssistLine()
+    },
+    getQuotaField(id) {
+      if (!id) {
+        return {}
+      }
+      const fields = this.quotaData.filter(ele => {
+        return ele.id === id
+      })
+      if (fields.length === 0) {
+        return {}
+      } else {
+        return fields[0]
+      }
    }
  }
 }
@ -119,7 +182,7 @@ span {
 .value-item {
  position: relative;
  display: inline-block;
-  width: 120px !important;
+  width: 100px !important;
 }

 .select-item {
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@ -803,6 +803,7 @@
                      :param="param"
                      class="attr-selector"
                      :chart="chart"
+                      :quota-data="quotaData"
                      @onAssistLineChange="onAssistLineChange"
                    />
                  </el-collapse-item>
@ -2029,7 +2030,7 @@ export default {

    onAssistLineChange(val) {
      this.view.senior.assistLine = val
-      this.calcStyle()
+      this.calcData()
    },

    onThresholdChange(val) {
@ -2294,6 +2295,8 @@ export default {
    closeEditDsField() {
      this.editDsField = false
      this.initTableField(this.table.id)
+      // 因动态计算较多，更新字段后重新计算视图数据
+      this.calcData()
    },

    editChartField() {
@ -2751,6 +2754,8 @@ export default {
      this.editChartCalcField = false
      this.currEditField = {}
      this.initTableField(this.table.id)
+      // 因动态计算较多，更新字段后重新计算视图数据
+      this.calcData()
    },
    deleteChartCalcField(item) {
      this.$confirm(this.$t('dataset.confirm_delete'), this.$t('chart.tips'), {