center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

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

Browse Source
This commit is contained in:
wisonic-s 2024-01-25 17:43:27 +08:00
parent 331212f640
commit 113c5f6352
11 changed files with 115 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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);

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

@ -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)) {

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

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

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

@ -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,40 +69,31 @@ 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());
SymbolMapResultDTO axisChartDataDTO = new SymbolMapResultDTO();
axisChartDataDTO.setField(a.toString());
axisChartDataDTO.setName(a.toString());
List<ChartDimensionDTO> dimensionList = new ArrayList<>();
List<ChartQuotaDTO> quotaList = new ArrayList<>();
List<ChartDimensionDTO> dimensionList = new ArrayList<>();
for (int j = 0; j < xAxis.size(); j++) {
ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
chartDimensionDTO.setId(xAxis.get(j).getId());
chartDimensionDTO.setValue(row[j]);
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);
for (int j = 0; j < xAxis.size(); j++) {
ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
chartDimensionDTO.setId(xAxis.get(j).getId());
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);
axisChartDataDTO.setLongitude(dimensionList.get(0).getValue());
axisChartDataDTO.setLatitude(dimensionList.get(1).getValue());
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);

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

@ -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;
}

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

@ -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">

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

@ -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'
}
}

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

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

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

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

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

@ -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;">
@ -137,7 +167,7 @@
</el-row>
<FilterTree
ref="filterTree"
@filter-data="changeFilterData" @execute-axios="executeAxios"
@filter-data="changeFilterData" @execute-axios="executeAxios"
/>
</div>
@ -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: {

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

@ -453,7 +453,12 @@ export default {
c.colors.forEach(ele => {
colors.push(hexColorToRGBA(ele, c.alpha))
})
this.pointLayer.color(colors[0])
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