Merge pull request #4044 from dataease/pr@dev@feat_text_threshold

feat(视图): 文本卡支持阈值
2022-12-08 10:18:23 +08:00 · 2022-12-08 10:18:23 +08:00 · acd771cfd0
commit acd771cfd0
parent e175e0bfa0 904c55570c
6 changed files with 413 additions and 8 deletions
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@ -449,7 +449,8 @@ export const DEFAULT_FUNCTION_CFG = {
 export const DEFAULT_THRESHOLD = {
  gaugeThreshold: '',
  labelThreshold: [],
-  tableThreshold: []
+  tableThreshold: [],
+  textLabelThreshold: []
 }
 export const DEFAULT_SCROLL = {
  open: false,
--- a/frontend/src/views/chart/components/dragItem/utils.js
+++ b/frontend/src/views/chart/components/dragItem/utils.js
@ -69,3 +69,15 @@ export function getOriginFieldName(dimensionList, quotaList, field) {
  }
  return originName
 }
+
+export function resetValueFormatter(item) {
+  if (item) {
+    item.formatterCfg = {
+      type: 'auto', // auto,value,percent
+      unit: 1, // 换算单位
+      suffix: '', // 单位后缀
+      decimalCount: 2, // 小数位数
+      thousandSeparator: true// 千分符
+    }
+  }
+}
--- a/frontend/src/views/chart/components/normal/LabelNormalText.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormalText.vue
@ -184,7 +184,7 @@ export default {
      this.$nextTick(function() {
        if (that.$refs.tableContainer) {
          const currentHeight = that.$refs.tableContainer.offsetHeight
-          const contentHeight = currentHeight - that.$refs.title.offsetHeight - 16
+          const contentHeight = currentHeight - that.$refs.title.offsetHeight - 8
          that.height = contentHeight + 'px'
          that.content_class.height = that.height
        }
@ -195,7 +195,8 @@ export default {
        const customAttr = JSON.parse(this.chart.customAttr)
        if (customAttr.color) {
          this.label_class.color = customAttr.color.dimensionColor
-          this.label_content_class.color = customAttr.color.quotaColor
+          // color threshold
+          this.colorThreshold(customAttr.color.quotaColor)
        }
        if (customAttr.size) {
          this.dimensionShow = customAttr.size.dimensionShow
@ -303,6 +304,57 @@ export default {
    },
    initRemark() {
      this.remarkCfg = getRemark(this.chart)
+    },
+    colorThreshold(valueColor) {
+      if (this.chart.senior) {
+        const senior = JSON.parse(this.chart.senior)
+        if (senior.threshold && senior.threshold.textLabelThreshold && senior.threshold.textLabelThreshold.length > 0) {
+          const value = this.chart.data.series[0].data[0]
+          for (let i = 0; i < senior.threshold.textLabelThreshold.length; i++) {
+            let flag = false
+            const t = senior.threshold.textLabelThreshold[i]
+            const tv = t.value
+            if (t.term === 'eq') {
+              if (value === tv) {
+                this.label_content_class.color = t.color
+                flag = true
+              }
+            } else if (t.term === 'not_eq') {
+              if (value !== tv) {
+                this.label_content_class.color = t.color
+                flag = true
+              }
+            } else if (t.term === 'like') {
+              if (value.includes(tv)) {
+                this.label_content_class.color = t.color
+                flag = true
+              }
+            } else if (t.term === 'not like') {
+              if (!value.includes(tv)) {
+                this.label_content_class.color = t.color
+                flag = true
+              }
+            } else if (t.term === 'null') {
+              if (value === null || value === undefined || value === '') {
+                this.label_content_class.color = t.color
+                flag = true
+              }
+            } else if (t.term === 'not_null') {
+              if (value !== null && value !== undefined && value !== '') {
+                this.label_content_class.color = t.color
+                flag = true
+              }
+            }
+            if (flag) {
+              break
+            } else if (i === senior.threshold.textLabelThreshold.length - 1) {
+              this.label_content_class.color = valueColor
+            }
+          }
+        } else {
+          this.label_content_class.color = valueColor
+        }
+      }
    }
  }
 }
--- a/frontend/src/views/chart/components/senior/Threshold.vue
+++ b/frontend/src/views/chart/components/senior/Threshold.vue
@ -41,6 +41,64 @@
      </el-form>
    </el-col>

+    <!--文本卡-->
+    <el-col v-if="chart.type && chart.type === 'label'">
+      <el-col>
+        <el-button
+          :title="$t('chart.edit')"
+          icon="el-icon-edit"
+          type="text"
+          size="small"
+          style="width: 24px;margin-left: 4px;"
+          @click="editTextLabelThreshold"
+        />
+        <el-col style="padding: 0 18px;">
+          <el-row
+            v-for="(item,index) in thresholdForm.textLabelThreshold"
+            :key="index"
+            class="line-style"
+          >
+            <el-col :span="6">
+              <span
+                v-if="item.term === 'eq'"
+                :title="$t('chart.filter_eq')"
+              >{{ $t('chart.filter_eq') }}</span>
+              <span
+                v-else-if="item.term === 'not_eq'"
+                :title="$t('chart.filter_not_eq')"
+              >{{ $t('chart.filter_not_eq') }}</span>
+              <span
+                v-else-if="item.term === 'like'"
+                :title="$t('chart.filter_like')"
+              >{{ $t('chart.filter_like') }}</span>
+              <span
+                v-else-if="item.term === 'not like'"
+                :title="$t('chart.filter_not_like')"
+              >{{ $t('chart.filter_not_like') }}</span>
+              <span
+                v-else-if="item.term === 'null'"
+                :title="$t('chart.filter_null')"
+              >{{ $t('chart.filter_null') }}</span>
+              <span
+                v-else-if="item.term === 'not_null'"
+                :title="$t('chart.filter_not_null')"
+              >{{ $t('chart.filter_not_null') }}</span>
+            </el-col>
+            <el-col :span="12">
+              <span
+                v-if="!item.term.includes('null')"
+                :title="item.value"
+              >{{ item.value }}</span>
+              <span v-else>&nbsp;</span>
+            </el-col>
+            <el-col :span="6">
+              <span :style="{width:'14px', height:'14px', backgroundColor: item.color, border: 'solid 1px #e1e4e8'}" />
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-col>
+    </el-col>
+
    <!--指标卡-->
    <el-col v-if="chart.type && chart.type === 'text'">
      <el-col>
@ -236,6 +294,37 @@
      </el-col>
    </el-col>

+    <!--编辑文本卡阈值-->
+    <el-dialog
+      v-if="editTextLabelThresholdDialog"
+      v-dialogDrag
+      :title="$t('chart.threshold')"
+      :visible="editTextLabelThresholdDialog"
+      :show-close="false"
+      width="800px"
+      class="dialog-css"
+      append-to-body
+    >
+      <text-label-threshold-edit
+        :threshold="thresholdForm.textLabelThreshold"
+        @onTextLabelThresholdChange="thresholdTextChange"
+      />
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="closeTextLabelThreshold"
+        >{{ $t('chart.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="changeTextLabelThreshold"
+        >{{ $t('chart.confirm') }}</el-button>
+      </div>
+    </el-dialog>
+
    <!--编辑指标卡阈值-->
    <el-dialog
      v-if="editLabelThresholdDialog"
@ -306,10 +395,11 @@
 import { DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
 import TextThresholdEdit from '@/views/chart/components/senior/dialog/TextThresholdEdit'
 import TableThresholdEdit from '@/views/chart/components/senior/dialog/TableThresholdEdit'
+import TextLabelThresholdEdit from '@/views/chart/components/senior/dialog/TextLabelThresholdEdit'

 export default {
  name: 'Threshold',
-  components: { TableThresholdEdit, TextThresholdEdit },
+  components: { TextLabelThresholdEdit, TableThresholdEdit, TextThresholdEdit },
  props: {
    chart: {
      type: Object,
@ -319,6 +409,8 @@ export default {
  data() {
    return {
      thresholdForm: JSON.parse(JSON.stringify(DEFAULT_THRESHOLD)),
+      editTextLabelThresholdDialog: false,
+      textThresholdArr: [],
      editLabelThresholdDialog: false,
      thresholdArr: [],
      editTableThresholdDialog: false,
@ -347,6 +439,9 @@ export default {
        }
        if (senior.threshold) {
          this.thresholdForm = senior.threshold
+          if (!this.thresholdForm.textLabelThreshold) {
+            this.thresholdForm.textLabelThreshold = []
+          }
          if (!this.thresholdForm.labelThreshold) {
            this.thresholdForm.labelThreshold = []
          }
@ -356,6 +451,7 @@ export default {
        } else {
          this.thresholdForm = JSON.parse(JSON.stringify(DEFAULT_THRESHOLD))
        }
+        this.textThresholdArr = JSON.parse(JSON.stringify(this.thresholdForm.textLabelThreshold))
        this.thresholdArr = JSON.parse(JSON.stringify(this.thresholdForm.labelThreshold))
        this.tableThresholdArr = JSON.parse(JSON.stringify(this.thresholdForm.tableThreshold))
      }
@ -452,10 +548,45 @@ export default {
    thresholdChange(val) {
      this.thresholdArr = val
    },
+
+    editTextLabelThreshold() {
+      this.editTextLabelThresholdDialog = true
+    },
+    closeTextLabelThreshold() {
+      this.editTextLabelThresholdDialog = false
+    },
+    changeTextLabelThreshold() {
+      // check line config
+      for (let i = 0; i < this.textThresholdArr.length; i++) {
+        const ele = this.textThresholdArr[i]
+        if (!ele.term || ele.term === '') {
+          this.$message({
+            message: this.$t('chart.exp_can_not_empty'),
+            type: 'error',
+            showClose: true
+          })
+          return
+        }
+        if (!ele.value) {
+          this.$message({
+            message: this.$t('chart.value_can_not_empty'),
+            type: 'error',
+            showClose: true
+          })
+          return
+        }
+      }
+      this.thresholdForm.textLabelThreshold = JSON.parse(JSON.stringify(this.textThresholdArr))
+      this.changeThreshold()
+      this.closeTextLabelThreshold()
+    },
+    thresholdTextChange(val) {
+      this.textThresholdArr = val
+    },
+
    tableThresholdChange(val) {
      this.tableThresholdArr = val
    },
-
    editTableThreshold() {
      this.editTableThresholdDialog = true
    },
--- a/frontend/src/views/chart/components/senior/dialog/TextLabelThresholdEdit.vue
+++ b/frontend/src/views/chart/components/senior/dialog/TextLabelThresholdEdit.vue
@ -0,0 +1,209 @@
+<template>
+  <el-col>
+    <el-button
+      icon="el-icon-plus"
+      circle
+      size="mini"
+      style="margin-bottom: 10px;"
+      @click="addThreshold"
+    />
+    <div style="max-height: 50vh;overflow-y: auto;">
+      <el-row
+        v-for="(item,index) in thresholdArr"
+        :key="index"
+        class="line-item"
+      >
+        <el-col :span="6">
+          <el-select
+            v-model="item.term"
+            size="mini"
+            @change="changeThreshold"
+          >
+            <el-option-group
+              v-for="(group,idx) in textOptions"
+              :key="idx"
+              :label="group.label"
+            >
+              <el-option
+                v-for="opt in group.options"
+                :key="opt.value"
+                :label="opt.label"
+                :value="opt.value"
+              />
+            </el-option-group>
+          </el-select>
+        </el-col>
+        <el-col
+          :span="14"
+          style="text-align: center;"
+        >
+          <el-input
+            v-if="!item.term.includes('null')"
+            v-model="item.value"
+            class="value-item"
+            :placeholder="$t('chart.drag_block_label_value')"
+            size="mini"
+            clearable
+            @change="changeThreshold"
+          />
+        </el-col>
+        <el-col
+          :span="2"
+          style="text-align: center;"
+        >
+          <el-color-picker
+            v-model="item.color"
+            show-alpha
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeThreshold"
+          />
+        </el-col>
+        <el-col :span="2">
+          <el-button
+            type="text"
+            icon="el-icon-delete"
+            circle
+            style="float: right"
+            @click="removeThreshold(index)"
+          />
+        </el-col>
+      </el-row>
+    </div>
+  </el-col>
+</template>
+
+<script>
+import { COLOR_PANEL } from '@/views/chart/chart/chart'
+
+export default {
+  name: 'TextLabelThresholdEdit',
+  props: {
+    threshold: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      thresholdArr: [],
+      thresholdObj: {
+        term: 'eq',
+        field: '0',
+        value: '',
+        color: '#ff0000ff'
+      },
+      textOptions: [
+        {
+          label: '',
+          options: [{
+            value: 'eq',
+            label: this.$t('chart.filter_eq')
+          }, {
+            value: 'not_eq',
+            label: this.$t('chart.filter_not_eq')
+          }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'like',
+            label: this.$t('chart.filter_like')
+          }, {
+            value: 'not like',
+            label: this.$t('chart.filter_not_like')
+          }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'null',
+            label: this.$t('chart.filter_null')
+          }, {
+            value: 'not_null',
+            label: this.$t('chart.filter_not_null')
+          }]
+        }
+      ],
+      predefineColors: COLOR_PANEL
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.thresholdArr = JSON.parse(JSON.stringify(this.threshold))
+    },
+    addThreshold() {
+      this.thresholdArr.push(JSON.parse(JSON.stringify(this.thresholdObj)))
+      this.changeThreshold()
+    },
+    removeThreshold(index) {
+      this.thresholdArr.splice(index, 1)
+      this.changeThreshold()
+    },
+
+    changeThreshold() {
+      this.$emit('onTextLabelThresholdChange', this.thresholdArr)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.line-item {
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  padding: 4px 14px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+}
+
+.form-item ::v-deep .el-form-item__label {
+  font-size: 12px;
+}
+
+span {
+  font-size: 12px;
+}
+
+.value-item {
+  position: relative;
+  display: inline-block;
+  width: 200px !important;
+}
+
+.between-item {
+  position: relative;
+  display: inline-block;
+  width: 100px !important;
+}
+
+.select-item {
+  position: relative;
+  display: inline-block;
+  width: 100px !important;
+}
+
+.el-select-dropdown__item {
+  padding: 0 20px;
+  font-size: 12px;
+}
+
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+  width: 28px;
+  height: 28px;
+  margin-top: 6px;
+}
+
+.color-picker-style ::v-deep .el-color-picker__trigger{
+  width: 28px;
+  height: 28px;
+}
+</style>
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@ -998,7 +998,7 @@
        >
          <el-row class="view-panel">
            <div
-              v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text' || view.type.includes('table') || view.type === 'map' || view.type === 'buddle-map')"
+              v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text' || view.type === 'label' || view.type.includes('table') || view.type === 'map' || view.type === 'buddle-map')"
              style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
              class="attr-style theme-border-class"
            >
@ -1037,7 +1037,7 @@
                </el-collapse>
              </el-row>
              <el-row
-                v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text' || (view.render === 'antv' && view.type.includes('table')))"
+                v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text' || view.type === 'label' || (view.render === 'antv' && view.type.includes('table')))"
              >
                <span class="padding-lr">{{ $t('chart.analyse_cfg') }}</span>
                <el-collapse
@ -1058,7 +1058,7 @@
                    />
                  </el-collapse-item>
                  <el-collapse-item
-                    v-if="view.type && (view.type.includes('gauge') || view.type === 'text' || (view.render === 'antv' && view.type.includes('table')))"
+                    v-if="view.type && (view.type.includes('gauge') || view.type === 'text' || view.type === 'label' || (view.render === 'antv' && view.type.includes('table')))"
                    name="threshold"
                    :title="$t('chart.threshold')"
                  >