From f0a2532b515c5fa017774d243c2dd10f206650ce Mon Sep 17 00:00:00 2001 From: fit2cloud-chenyw Date: Wed, 21 Jul 2021 17:12:40 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=86=E5=9B=BE=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=A2=9E=E5=8A=A0=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dataease/map/dto/entity/AreaEntity.java | 2 + .../io/dataease/map/server/MapServer.java | 5 +- frontend/src/api/map/map.js | 17 ++++ frontend/src/icons/svg/chart-map.svg | 1 + frontend/src/lang/en.js | 6 +- frontend/src/lang/tw.js | 6 +- frontend/src/lang/zh.js | 6 +- frontend/src/views/chart/chart/chart.js | 34 +++++++ .../src/views/chart/chart/common/common.js | 2 +- frontend/src/views/chart/chart/map/map.js | 59 +++++++++++ .../views/chart/components/ChartComponent.vue | 29 +++++- frontend/src/views/chart/view/ChartEdit.vue | 99 +++++++++++++++---- 12 files changed, 239 insertions(+), 27 deletions(-) create mode 100644 frontend/src/api/map/map.js create mode 100644 frontend/src/icons/svg/chart-map.svg create mode 100644 frontend/src/views/chart/chart/map/map.js diff --git a/backend/src/main/java/io/dataease/map/dto/entity/AreaEntity.java b/backend/src/main/java/io/dataease/map/dto/entity/AreaEntity.java index 3b5acae163..c40d7063be 100644 --- a/backend/src/main/java/io/dataease/map/dto/entity/AreaEntity.java +++ b/backend/src/main/java/io/dataease/map/dto/entity/AreaEntity.java @@ -1,5 +1,6 @@ package io.dataease.map.dto.entity; +import com.fasterxml.jackson.annotation.JsonInclude; import lombok.Builder; import lombok.Data; @@ -10,6 +11,7 @@ import java.util.Optional; @Data @Builder +@JsonInclude(JsonInclude.Include.NON_NULL) public class AreaEntity implements Serializable { private static final long serialVersionUID = -1326667005437020282L; diff --git a/backend/src/main/java/io/dataease/map/server/MapServer.java b/backend/src/main/java/io/dataease/map/server/MapServer.java index 10dab5d7c8..ca88e64f55 100644 --- a/backend/src/main/java/io/dataease/map/server/MapServer.java +++ b/backend/src/main/java/io/dataease/map/server/MapServer.java @@ -5,6 +5,7 @@ import io.dataease.map.api.MapApi; import io.dataease.map.dto.entity.AreaEntity; import io.dataease.map.service.MapService; import io.dataease.map.utils.MapUtils; +import org.apache.commons.lang3.StringUtils; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RestController; import javax.annotation.Resource; @@ -40,7 +41,9 @@ public class MapServer implements MapApi { @Override public List areaEntitys(@PathVariable String pcode) { List areaEntities = mapService.areaEntities(); - + if (StringUtils.equals(pcode, "0")) { + return areaEntities; + } return mapService.entitysByPid(areaEntities, pcode); } diff --git a/frontend/src/api/map/map.js b/frontend/src/api/map/map.js new file mode 100644 index 0000000000..73463c11b9 --- /dev/null +++ b/frontend/src/api/map/map.js @@ -0,0 +1,17 @@ +import request from '@/utils/request' + +export const areaMapping = () => { + return request({ + url: '/api/map/areaEntitys/0', + method: 'get', + loading: true + }) +} + +export function geoJson(areaCode) { + return request({ + url: '/api/map/resourceFull/' + areaCode, + method: 'get', + loading: true + }) +} diff --git a/frontend/src/icons/svg/chart-map.svg b/frontend/src/icons/svg/chart-map.svg new file mode 100644 index 0000000000..677cd07630 --- /dev/null +++ b/frontend/src/icons/svg/chart-map.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 48f7ba3b24..75483877d3 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -750,6 +750,7 @@ export default { chart_funnel: 'Funnel', chart_radar: 'Radar', chart_gauge: 'Gauge', + chart_map: 'Map', dateStyle: 'Date Style', datePattern: 'Date Format', y: 'Year', @@ -817,7 +818,10 @@ export default { drag_block_funnel_width: 'Funnel Width', drag_block_funnel_split: 'Funnel Split', drag_block_radar_length: 'Branch Length', - drag_block_radar_label: 'Branch Label' + drag_block_radar_label: 'Branch Label', + map_range: 'Map range', + select_map_range: 'Please select map range', + area: 'Area' }, dataset: { sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 10415d2bf6..2f333dde3a 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -750,6 +750,7 @@ export default { chart_funnel: '漏鬥圖', chart_radar: '雷達圖', chart_gauge: '儀表盤', + chart_map: '地圖', dateStyle: '日期顯示', datePattern: '日期格式', y: '年', @@ -817,7 +818,10 @@ export default { drag_block_funnel_width: '漏鬥層寬', drag_block_funnel_split: '漏鬥分層', drag_block_radar_length: '分支長度', - drag_block_radar_label: '分支標簽' + drag_block_radar_label: '分支標簽', + map_range: '地圖範圍', + select_map_range: '請選擇地圖範圍', + area: '地區' }, dataset: { sheet_warn: '有多個sheet頁面，默認抽取第一個', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 3c8da35366..b54dd28e7b 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -750,6 +750,7 @@ export default { chart_funnel: '漏斗图', chart_radar: '雷达图', chart_gauge: '仪表盘', + chart_map: '地图', dateStyle: '日期显示', datePattern: '日期格式', y: '年', @@ -817,7 +818,10 @@ export default { drag_block_funnel_width: '漏斗层宽', drag_block_funnel_split: '漏斗分层', drag_block_radar_length: '分支长度', - drag_block_radar_label: '分支标签' + drag_block_radar_label: '分支标签', + map_range: '地图范围', + select_map_range: '请选择地图范围', + area: '地区' }, dataset: { sheet_warn: '有多个 Sheet 页，默认抽取第一个', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index 88dd327a47..0ee2ce820c 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -528,3 +528,37 @@ export const BASE_CHART = { }, customFilter: [] } + +export const BASE_MAP = { + title: { + text: '', + textStyle: { + fontWeight: 'normal' + } + }, + + tooltip: {}, + visualMap: { + min: 50, + max: 52, + text: ['High', 'Low'], + realtime: false, + calculable: true, + inRange: { + color: ['lightskyblue', 'yellow', 'orangered'] + } + }, + // legend: {}, + series: [ + { + name: '', + type: 'map', + map: 'HK', + roam: true, + // label: { + // show: true + // }, + data: [] + } + ] +} diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js index e4135b6c12..a1ce01bbe2 100644 --- a/frontend/src/views/chart/chart/common/common.js +++ b/frontend/src/views/chart/chart/common/common.js @@ -29,7 +29,7 @@ export function componentStyle(chart_option, chart) { customStyle.text.isBolder ? style.fontWeight = 'bold' : style.fontWeight = 'normal' chart_option.title.textStyle = style } - if (customStyle.legend) { + if (customStyle.legend && chart_option.legend) { chart_option.legend.show = customStyle.legend.show // 水平方向 if (customStyle.legend.hPosition === 'left') { diff --git a/frontend/src/views/chart/chart/map/map.js b/frontend/src/views/chart/chart/map/map.js new file mode 100644 index 0000000000..b95d9ae338 --- /dev/null +++ b/frontend/src/views/chart/chart/map/map.js @@ -0,0 +1,59 @@ +import { hexColorToRGBA } from '@/views/chart/chart/util' +import { componentStyle } from '../common/common' + +export function baseMapOption(chart_option, chart) { + // 处理shape attr + let customAttr = {} + if (chart.customAttr) { + customAttr = JSON.parse(chart.customAttr) + if (customAttr.color) { + chart_option.color = customAttr.color.colors + } + // tooltip + if (customAttr.tooltip) { + const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip)) + const reg = new RegExp('\n', 'g') + tooltip.formatter = tooltip.formatter.replace(reg, '
') + chart_option.tooltip = tooltip + } + } + // 处理data + if (chart.data) { + chart_option.title.text = chart.title + if (chart.data.series.length > 0) { + chart_option.series[0].name = chart.data.series[0].name + // size + if (customAttr.size) { + chart_option.series[0].radius = [customAttr.size.pieInnerRadius + '%', customAttr.size.pieOuterRadius + '%'] + } + // label + if (customAttr.label) { + chart_option.series[0].label = customAttr.label + chart_option.series[0].labelLine = customAttr.label.labelLine + } + // visualMap + const valueArr = chart.data.series[0].data + chart_option.visualMap.min = Math.min(...valueArr) + chart_option.visualMap.max = Math.max(...valueArr) + if (customAttr.color && customAttr.color.colors) { + chart_option.visualMap.inRange.color = customAttr.color.colors + } + for (let i = 0; i < valueArr.length; i++) { + const y = { + name: chart.data.x[i], + value: valueArr[i] + } + // color + y.itemStyle = { + color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha), + borderRadius: 0 + } + chart_option.series[0].data.push(y) + } + } + } + // console.log(chart_option); + componentStyle(chart_option, chart) + return chart_option +} + diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue index 963fc6f111..66f232ae31 100644 --- a/frontend/src/views/chart/components/ChartComponent.vue +++ b/frontend/src/views/chart/components/ChartComponent.vue @@ -5,15 +5,17 @@ -