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

2022-05-23 19:44:44 +08:00 · 2022-05-23 19:44:44 +08:00 · cd07cee14a
commit cd07cee14a
parent 3e9abcb9d1 7fa3c0ac53
3 changed files with 136 additions and 13 deletions
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@ -228,6 +228,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'size-selector-ant-v': [
@ -265,6 +266,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'size-selector-ant-v': [
@ -307,6 +309,8 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'colorPanel',
+        'customColor',
        'alpha'
      ],
      'size-selector-ant-v': [
@ -378,6 +382,8 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'colorPanel',
+        'customColor',
        'alpha'
      ],
      'size-selector-ant-v': [
@ -450,6 +456,8 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'colorPanel',
+        'customColor',
        'alpha'
      ],
      'size-selector-ant-v': [
@ -520,6 +528,8 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'colorPanel',
+        'customColor',
        'alpha'
      ],
      'size-selector-ant-v': [
@ -588,6 +598,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'label-selector-ant-v': [
@ -647,6 +658,8 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'colorPanel',
+        'customColor',
        'alpha'
      ],
      'size-selector-ant-v': [
@ -718,6 +731,8 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'colorPanel',
+        'customColor',
        'alpha'
      ],
      'size-selector-ant-v': [
@ -788,6 +803,8 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'colorPanel',
+        'customColor',
        'alpha'
      ],
      'size-selector-ant-v': [
@ -838,6 +855,8 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'colorPanel',
+        'customColor',
        'alpha'
      ],
      'size-selector-ant-v': [
@ -888,6 +907,8 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'colorPanel',
+        'customColor',
        'alpha'
      ],
      'size-selector-ant-v': [
@ -937,6 +958,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'label-selector-ant-v': [
@ -1015,6 +1037,8 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'colorPanel',
+        'customColor',
        'alpha'
      ],
      'size-selector-ant-v': [
@ -1081,6 +1105,8 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'colorPanel',
+        'customColor',
        'alpha'
      ],
      'label-selector-ant-v': [
@ -1269,6 +1295,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'size-selector': [
@ -1317,6 +1344,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'size-selector': [
@ -1390,6 +1418,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'size-selector': [
@ -1464,6 +1493,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'size-selector': [
@ -1552,6 +1582,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'size-selector': [
@ -1625,6 +1656,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'size-selector': [
@ -1698,6 +1730,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'size-selector': [
@ -1772,6 +1805,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'size-selector': [
@ -1846,6 +1880,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'size-selector': [
@ -1903,6 +1938,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'size-selector': [
@ -1962,6 +1998,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'size-selector': [
@ -2024,6 +2061,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'size-selector': [
@ -2074,6 +2112,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'size-selector': [
@ -2144,6 +2183,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'size-selector': [
@ -2199,6 +2239,7 @@ export const TYPE_CONFIGS = [
    propertyInner: {
      'color-selector': [
        'value',
+        'custom',
        'alpha'
      ],
      'size-selector': [
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@ -3,14 +3,14 @@
    <el-col>
      <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
        <div>
-          <el-form-item v-show="showProperty('value')" :label="$t('chart.color_case')" class="form-item">
+          <el-form-item :label="$t('chart.color_case')" class="form-item">
            <el-popover
              placement="bottom"
              width="400"
              trigger="click"
            >
              <div style="padding: 6px 10px;">
-                <div>
+                <div v-show="showProperty('value')">
                  <span class="color-label">{{ $t('chart.system_case') }}</span>
                  <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption('value')">
                    <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
@ -22,23 +22,58 @@
                  </el-select>
                  <el-button size="mini" type="text" style="margin-left: 2px;" @click="resetCustomColor">{{ $t('commons.reset') }}</el-button>
                </div>
-                <div style="display: flex;align-items: center;margin-top: 10px;">
-                  <span class="color-label">{{ $t('chart.custom_case') }}</span>
-                  <span>
-                    <el-radio-group v-model="customColor" class="color-type">
-                      <el-radio v-for="(c,index) in colorForm.colors" :key="index" :label="c" style="padding: 2px;" @change="switchColor(index)">
-                        <span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
-                      </el-radio>
-                    </el-radio-group>
-                  </span>
+                <!--自定义配色方案-->
+                <div
+                  v-show="showProperty('custom')"
+                >
+                  <div style="display: flex;align-items: center;margin-top: 10px;">
+                    <span class="color-label">{{ $t('chart.custom_case') }}</span>
+                    <span>
+                      <el-radio-group v-model="customColor" class="color-type">
+                        <el-radio v-for="(c,index) in colorForm.colors" :key="index" :label="c" style="padding: 2px;" @change="switchColor(index)">
+                          <span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
+                        </el-radio>
+                      </el-radio-group>
+                    </span>
+                  </div>
+                  <div style="display: flex;align-items: center;margin-top: 10px;">
+                    <span class="color-label" />
+                    <span>
+                      <el-color-picker v-model="customColor" class="color-picker-style" :predefine="predefineColors" @change="switchColorCase" />
+                    </span>
+                  </div>
                </div>
-                <div style="display: flex;align-items: center;margin-top: 10px;">
+                <!--自定义系列或维度枚举值颜色-->
+                <div v-show="showProperty('colorPanel')" style="display: flex;align-items: center;margin-top: 10px;">
                  <span class="color-label" />
                  <span>
-                    <el-color-picker v-model="customColor" class="color-picker-style" :predefine="predefineColors" @change="switchColorCase" />
+                    <span v-for="(c,index) in colorForm.colors" :key="index" style="padding: 2px;">
+                      <span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
+                    </span>
                  </span>
                </div>
              </div>
+
+              <div
+                v-if="!batchOptStatus"
+                v-show="showProperty('customColor')"
+                class="custom-color-style"
+              >
+                <div
+                  v-for="(item,index) in colorForm.seriesColors"
+                  :key="index"
+                  style="display: flex;align-items: center;margin: 2px 0;"
+                >
+                  <span class="span-label" :title="item.name">{{ item.name }}</span>
+                  <el-color-picker
+                    v-model="item.color"
+                    class="color-picker-style"
+                    :predefine="predefineColors"
+                    @change="switchCustomColor(index)"
+                  />
+                </div>
+              </div>
+
              <div slot="reference" style="cursor: pointer;margin-top: 2px;width: 180px;">
                <span v-for="(c,index) in colorForm.colors" :key="index" :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
              </div>
@ -81,6 +116,8 @@

 <script>
 import { COLOR_PANEL, DEFAULT_COLOR_CASE } from '../../chart/chart'
+import { getColors } from '@/views/chart/chart/util'
+import { mapState } from 'vuex'

 export default {
  name: 'ColorSelector',
@ -209,6 +246,11 @@ export default {
      }
    }
  },
+  computed: {
+    ...mapState([
+      'batchOptStatus'
+    ])
+  },
  mounted() {
    this.init()
  },
@ -227,6 +269,10 @@ export default {
      this.customColor = this.colorForm.colors[0]
      this.colorIndex = 0

+      // reset custom color
+      this.colorForm.seriesColors = []
+      this.initCustomColor(true)
+
      this.changeColorCase(modifyName)
    },
    changeColorCase(modifyName) {
@ -254,6 +300,8 @@ export default {
          }

          this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor
+
+          this.initCustomColor()
        }
      }
    },
@ -273,6 +321,24 @@ export default {
    },
    showProperty(property) {
      return this.propertyInner.includes(property)
+    },
+
+    switchCustomColor(index) {
+      this.colorForm.seriesColors[index].isCustom = true
+      this.switchColorCase()
+    },
+
+    initCustomColor(reset) {
+      if (!this.batchOptStatus && this.chart.render && this.chart.render === 'antv' &&
+        (this.chart.type.includes('bar') ||
+          this.chart.type.includes('line') ||
+          this.chart.type.includes('pie') ||
+          this.chart.type === 'funnel' ||
+          this.chart.type === 'radar' ||
+          this.chart.type === 'scatter')) {
+        const chart = JSON.parse(JSON.stringify(this.chart))
+        this.colorForm.seriesColors = getColors(chart, this.colorForm.colors, reset)
+      }
    }
  }
 }
@ -326,4 +392,19 @@ export default {
  .el-radio.is-checked{
    border: 1px solid #0a7be0;
  }
+
+.span-label {
+  width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+}
+
+.custom-color-style {
+  height: 300px;
+  overflow-y: auto;
+  padding: 4px;
+  border: 1px solid #e6e6e6;
+}
 </style>
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@ -1282,6 +1282,7 @@ export default {
      this.resetDrill()
      this.initFromPanel()
      this.getChart(this.param.id)
+      this.getData(this.param.id)
    },
    bindPluginEvent() {
      bus.$on('show-dimension-edit-filter', this.showDimensionEditFilter)