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

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',

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',

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) {
+        if (ele.field === '0') {
-          this.$message({
+          if (!ele.value) {
-            message: this.$t('chart.value_can_not_empty'),
+            this.$message({
-            type: 'error',
+              message: this.$t('chart.value_can_not_empty'),
-            showClose: true
+              type: 'error',
-          })
+              showClose: true
-          return
+            })
-        }
+            return
-        if (parseFloat(ele.value).toString() === 'NaN') {
+          }
-          this.$message({
+          if (parseFloat(ele.value).toString() === 'NaN') {
-            message: this.$t('chart.value_error'),
+            this.$message({
-            type: 'error',
+              message: this.$t('chart.value_error'),
-            showClose: true
+              type: 'error',
-          })
+              showClose: true
-          return
+            })
+            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))

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 {

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'), {