feat(视图-符号地图): 符号地图可以配置字段来区分颜色#5735

core/backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -1058,9 +1058,10 @@ public class ChartViewService {
                 });
                 xAxis.addAll(xAxisExtList);
             }
+            fieldMap.put("xAxis", xAxis);
+            fieldMap.put("xAxisExt", xAxisExt);
             fieldMap.put("extStack", extStack);
             fieldMap.put("extBubble", extBubble);
-            fieldMap.put("xAxis", xAxis);
             fieldMap.put("yAxis", yAxis);
             PluginViewParam pluginViewParam = buildPluginParam(fieldMap, fieldCustomFilter, extFilterList, ds, table, view, rowPermissionsTree, chartExtRequest);
             String sql = pluginViewSql(pluginViewParam, view);

core/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java

@@ -1087,6 +1087,7 @@ public class ChartDataBuild {
         List<ChartViewFieldDTO> fields = new ArrayList<>();
         List<ChartViewFieldDTO> yfields = new ArrayList<>();
         if (CollectionUtils.isNotEmpty(fieldMap.get("xAxis"))) fields.addAll(fieldMap.get("xAxis"));
+        if (CollectionUtils.isNotEmpty(fieldMap.get("xAxisExt"))) fields.addAll(fieldMap.get("xAxisExt"));
 
         for (Map.Entry<String, List<ChartViewFieldDTO>> entry : fieldMap.entrySet()) {
             if (StringUtils.equalsAny(entry.getKey(), keys)) {

extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-backend/src/main/java/io/dataease/plugins/view/official/dto/SymbolMapResultDTO.java

@@ -12,6 +12,8 @@ public class SymbolMapResultDTO extends AxisChartDataAntVDTO {
 
     private String latitude;
 
+    private String color;
+
     private Object busiValue;
 
     private Map<String, Object> properties;

extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-backend/src/main/java/io/dataease/plugins/view/official/handler/SymbolMapRSHandler.java

@@ -35,11 +35,15 @@ public class SymbolMapRSHandler implements PluginViewRSHandler<Map> {
     public Map format(PluginViewParam pluginViewParam, List<String[]> data, boolean isDrill) {
         List<PluginViewField> xAxis = new ArrayList<>();
         List<PluginViewField> yAxis = new ArrayList<>();
+        List<PluginViewField> xAxisExt = new ArrayList<>();
 
         pluginViewParam.getPluginViewFields().forEach(pluginViewField -> {
             if (StringUtils.equals(pluginViewField.getTypeField(), "xAxis")) {
                 xAxis.add(pluginViewField);
             }
+            if (StringUtils.equals(pluginViewField.getTypeField(), "xAxisExt")) {
+                xAxisExt.add(pluginViewField);
+            }
             if (StringUtils.equals(pluginViewField.getTypeField(), "yAxis")
                     || trans2Ykeys.contains(pluginViewField.getTypeField())) {
                 yAxis.add(pluginViewField);
@@ -65,13 +69,11 @@ public class SymbolMapRSHandler implements PluginViewRSHandler<Map> {
             }
 
             if (CollectionUtils.isEmpty(yAxis)) {
-                for (int i = 0; i < xAxis.size() + yAxis.size(); i++) {
                 SymbolMapResultDTO axisChartDataDTO = new SymbolMapResultDTO();
                 axisChartDataDTO.setField(a.toString());
                 axisChartDataDTO.setName(a.toString());
 
                 List<ChartDimensionDTO> dimensionList = new ArrayList<>();
-                    List<ChartQuotaDTO> quotaList = new ArrayList<>();
 
                 for (int j = 0; j < xAxis.size(); j++) {
                     ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
@@ -79,26 +81,19 @@ public class SymbolMapRSHandler implements PluginViewRSHandler<Map> {
                     chartDimensionDTO.setValue(row[j]);
                     dimensionList.add(chartDimensionDTO);
                 }
+                for (int j = 0; j < xAxisExt.size(); j++) {
+                    ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                    chartDimensionDTO.setId(xAxisExt.get(j).getId());
+                    chartDimensionDTO.setValue(row[j + xAxis.size()]);
+                    dimensionList.add(chartDimensionDTO);
+                }
                 axisChartDataDTO.setDimensionList(dimensionList);
-
-                    int j = i - xAxis.size();
-                    if (j > -1) {
-                        ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
-                        chartQuotaDTO.setId(yAxis.get(j).getId());
-                        quotaList.add(chartQuotaDTO);
-                        axisChartDataDTO.setQuotaList(quotaList);
-                        try {
-                            axisChartDataDTO.setBusiValue(row[i]);
-                            axisChartDataDTO.setValue(StringUtils.isEmpty(row[i]) ? null : new BigDecimal(row[i]));
-                        } catch (Exception e) {
-                            axisChartDataDTO.setValue(new BigDecimal(0));
-                        }
-                        axisChartDataDTO.setCategory(yAxis.get(j).getName());
-                    }
                 axisChartDataDTO.setLongitude(dimensionList.get(0).getValue());
                 axisChartDataDTO.setLatitude(dimensionList.get(1).getValue());
-                    datalist.add(axisChartDataDTO);
+                if (!xAxisExt.isEmpty()) {
+                    axisChartDataDTO.setColor(dimensionList.get(2).getValue());
                 }
+                datalist.add(axisChartDataDTO);
             } else {
                 SymbolMapResultDTO axisChartDataDTO = new SymbolMapResultDTO();
                 axisChartDataDTO.setField(a.toString());
@@ -112,10 +107,19 @@ public class SymbolMapRSHandler implements PluginViewRSHandler<Map> {
                     chartDimensionDTO.setValue(row[j]);
                     dimensionList.add(chartDimensionDTO);
                 }
+                for (int j = 0; j < xAxisExt.size(); j++) {
+                    ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                    chartDimensionDTO.setId(xAxisExt.get(j).getId());
+                    chartDimensionDTO.setValue(row[j + xAxis.size()]);
+                    dimensionList.add(chartDimensionDTO);
+                }
+                if (!xAxisExt.isEmpty()) {
+                    axisChartDataDTO.setColor(dimensionList.get(2).getValue());
+                }
                 axisChartDataDTO.setDimensionList(dimensionList);
                 axisChartDataDTO.setQuotaList(new ArrayList<>());
                 axisChartDataDTO.setProperties(new HashMap<>());
-                int step = xAxis.size();
+                int step = xAxis.size() + xAxisExt.size();
                 Boolean valueFilled = false;
                 for (int i = 0; i < yAxis.size(); i++) {
                     PluginViewField curY = yAxis.get(i);

extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-backend/src/main/java/io/dataease/plugins/view/official/impl/SymbolMapService.java

@@ -140,7 +140,10 @@ public class SymbolMapService extends ViewPluginService {
         if (CollectionUtils.isEmpty(xAxis) || xAxis.size() < 2) {
             return null;
         }
-
+        List<PluginViewField> xAxisExt = pluginViewParam.getFieldsByType("xAxisExt");
+        if (CollectionUtils.isNotEmpty(xAxisExt)) {
+            xAxisExt.forEach(i -> i.setTypeField("xAxis"));
+        }
         if (CollectionUtils.isNotEmpty(yAxis)) {
             String generateSQL = super.generateSQL(pluginViewParam);
             pluginViewParam.setPluginViewFields(pluginViewFields);
@@ -149,7 +152,7 @@ public class SymbolMapService extends ViewPluginService {
 
         // 下面考虑符号大小为空的情况
         String result = symbolMapStatHandler.build(pluginViewParam, this);
-        // pluginViewParam.setPluginViewFields(pluginViewFields);
+        pluginViewParam.setPluginViewFields(pluginViewFields);
         return result;
 
     }

extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/views/DimensionExtItem.vue

@@ -1,6 +1,6 @@
 <template>
-  <span>
+  <span style="position: relative;display: inline-block;">
-
+    <i class="el-icon-arrow-down el-icon-delete" style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;" @click="removeItem" />
     <el-dropdown trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
         <el-tag size="small" class="item-axis" :type="tagType">
@@ -20,24 +20,6 @@
           <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item>
-            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
-              <span class="el-dropdown-link inner-dropdown-menu">
-                <span>
-                  <i class="el-icon-sort" />
-                  <span>{{ $t('chart.sort') }}</span>
-                  <span class="summary-span-item">({{ $t('chart.'+item.sort) }})</span>
-                </span>
-                <i class="el-icon-arrow-right el-icon--right" />
-              </span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item :command="beforeSort('none')">{{ $t('chart.none') }}</el-dropdown-item>
-                <el-dropdown-item :command="beforeSort('asc')">{{ $t('chart.asc') }}</el-dropdown-item>
-                <el-dropdown-item :command="beforeSort('desc')">{{ $t('chart.desc') }}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </el-dropdown-item>
-
           <el-dropdown-item v-show="item.deType === 1" divided>
             <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="dateStyle">
               <span class="el-dropdown-link inner-dropdown-menu">

extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/de-base/lang/en.js

@@ -18,6 +18,7 @@ export default {
     dark: 'Dark',
     label_format_tip: 'The field value can be read in the form of {field Name}, the fields in the label and the tips are interchangeable, and the built-in latitude and longitude related fields',
     tooltip_format_tip: 'The field value can be read in the form of {field Name}, the fields in the label and the tips are interchangeable, and the built-in latitude and longitude related fields.(the label does not support line breaks)',
-    mark_size_tip: 'When this quota is in effect, the bubble size attribute in the style size will be invalid'
+    mark_size_tip: 'When this quota is in effect, the bubble size attribute in the style size will be invalid',
+    color: 'Color'
   }
 }

extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/de-base/lang/tw.js

@@ -19,6 +19,7 @@ export default {
       dark: '暗色',
       label_format_tip: '可以${fieldName}的形式讀取字段值，標籤和提示中的字段互相通用，內置經緯度相關字段',
       tooltip_format_tip: '可以${fieldName}的形式讀取字段值，標籤和提示中的字段互相通用，內置經緯度相關字段（標籤不支持換行）',
-      mark_size_tip: '該指標生效時，樣式大小中的氣泡大小屬性將失效'
+      mark_size_tip: '該指標生效時，樣式大小中的氣泡大小屬性將失效',
+      color: '顏色'
     }
 }

extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/de-base/lang/zh.js

@@ -17,6 +17,7 @@ export default {
     dark: '暗色',
     label_format_tip: '可以${fieldName}的形式读取字段值，标签和提示中的字段互相通用，内置经纬度相关字段',
     tooltip_format_tip: '可以${fieldName}的形式读取字段值，标签和提示中的字段互相通用，内置经纬度相关字段（标签不支持换行）',
-    mark_size_tip: '该指标生效时，样式大小中的气泡大小属性将失效'
+    mark_size_tip: '该指标生效时，样式大小中的气泡大小属性将失效',
+    color: '颜色'
   }
 }

extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/data.vue

@@ -66,7 +66,37 @@
         <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
       </div>
     </el-row>
-
+    <!--颜色-->
+    <el-row class="padding-lr" style="margin-top: 6px;">
+      <span style="width: 80px;text-align: right;">
+        <span>{{ $t('plugin_view_symbol_map.color') }}</span>/<span>{{ $t('chart.dimension') }}</span>
+      </span>
+      <draggable
+        v-model="colors"
+        :move="onMove"
+        animation="300"
+        class="drag-block-style" group="drag"
+        @add="addColor"
+        @update="calcData(true)"
+      >
+        <transition-group class="draggable-group">
+          <dimension-ext-item
+            v-for="(item,index) in colors"
+            :key="item.id" :chart="chart"
+            :dimension-data="dimensionData"
+            :index="index"
+            :item="item"
+            :param="param"
+            :quota-data="quotaData"
+            @onDimensionItemRemove="colorItemRemove"
+            @onNameEdit="showRename"
+          />
+        </transition-group>
+      </draggable>
+      <div v-if="!colors || colors.length === 0" class="drag-placeholder-style">
+        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+      </div>
+    </el-row>
     <!-- 符号大小 -->
     <el-row class="padding-lr" style="margin-top: 6px;">
       <span style="width: 80px;text-align: right;">
@@ -147,6 +177,7 @@
 import LocationXItem from '@/components/views/LocationXItem'
 import LocationYItem from '@/components/views/LocationYItem'
 import QuotaItem from '@/components/views/QuotaItem'
+import DimensionExtItem from '@/components/views/DimensionExtItem'
 import FilterItem from '@/components/views/FilterItem'
 import messages from '@/de-base/lang/messages'
 import FilterTree from '@/components/views/filter/FilterTree.vue'
@@ -170,7 +201,8 @@ export default {
     LocationYItem,
     QuotaItem,
     FilterItem,
-    FilterTree
+    FilterTree,
+    DimensionExtItem
   },
   data() {
     return {
@@ -188,7 +220,8 @@ export default {
         }
       ],
       longitudes: [],
-      latitudes: []
+      latitudes: [],
+      colors: []
     }
   },
   computed: {
@@ -220,6 +253,7 @@ export default {
   created() {
     this.longitudes = this.view.xaxis && this.view.xaxis.length && [this.view.xaxis[0]] || []
     this.latitudes = this.view.xaxis && this.view.xaxis.length > 1 && [this.view.xaxis[1]] || []
+    this.colors = this.view.xaxisExt && this.view.xaxisExt.length && [this.view.xaxisExt[0]] || []
     this.$emit('on-add-languages', messages)
   },
   watch: {
@@ -228,6 +262,9 @@ export default {
     },
     latitudes(val) {
       this.view.xaxis = [...this.longitudes, ...this.latitudes]
+    },
+    colors(val) {
+      this.view.xaxisExt = this.colors
     }
   },
   methods: {
@@ -294,8 +331,22 @@ export default {
       }
       this.calcData(true)
     },
+    addColor(e) {
+      this.multiAdd(e, this.colors)
+      this.dragMoveDuplicate(this.colors, e)
+      this.dragCheckType(this.colors, 'd')
+      if (this.colors.length > 1) {
+        this.colors = [this.colors[0]]
+      }
+      this.calcData(true)
+    },
+    colorItemRemove(item) {
+      this.colors.splice(item.index, 1)
+      this.calcData(true)
+    },
     calcData(cache) {
       this.view.xaxis = [...this.longitudes, ...this.latitudes]
+      this.view.xaxisExt = this.colors
       this.$emit('plugin-call-back', {
         eventName: 'calc-data',
         eventParam: {

extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/index.vue

@@ -453,8 +453,13 @@ export default {
               c.colors.forEach(ele => {
                 colors.push(hexColorToRGBA(ele, c.alpha))
               })
+              const colorAxis = JSON.parse(chart.xaxisExt)
+              if (colorAxis && colorAxis.length) {
+                this.pointLayer.color('color', colors)
+              } else {
                 this.pointLayer.color(colors[0])
               }
+            }
             const yaxis = JSON.parse(chart.yaxis)
             const hasYaxis =  yaxis && yaxis.length