From 7a5a61faaf454285c9beca2b4df3202bf5eaf3b2 Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Wed, 24 Jul 2024 10:06:04 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8-=E6=B0=94=E6=B3=A1?= =?UTF-8?q?=E5=9C=B0=E5=9B=BE):=20=E6=B0=94=E6=B3=A1=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E6=B0=B4=E6=B3=A2=E7=BA=B9=E5=8A=A8=E7=94=BB=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/models/chart/chart-senior.d.ts | 26 ++ .../src/models/chart/editor.d.ts | 1 + .../editor/editor-senior/Senior.vue | 25 +- .../components/BubbleAnimateCfg.vue | 222 ++++++++++++++++++ .../views/chart/components/editor/index.vue | 6 + .../chart/components/editor/util/chart.ts | 10 +- .../js/panel/charts/map/bubble-map.ts | 17 +- 7 files changed, 304 insertions(+), 3 deletions(-) create mode 100644 core/core-frontend/src/views/chart/components/editor/editor-senior/components/BubbleAnimateCfg.vue diff --git a/core/core-frontend/src/models/chart/chart-senior.d.ts b/core/core-frontend/src/models/chart/chart-senior.d.ts index 9a5c384c7f..d8f1cdf73c 100644 --- a/core/core-frontend/src/models/chart/chart-senior.d.ts +++ b/core/core-frontend/src/models/chart/chart-senior.d.ts @@ -22,6 +22,10 @@ declare interface ChartSenior { * 区域称映射，{区域id: {原始名称: 映射名称}} */ areaMapping: Record> + /** + * 气泡动效 + */ + bubbleCfg: BubbleCfg } /** @@ -209,3 +213,25 @@ declare interface ScrollCfg { */ step: number } + +/** + * 气泡动效设置 + */ +declare interface BubbleCfg { + /** + * 开启动效 + */ + enable: boolean + /** + * 动效类型 + */ + type: 'wave' + /** + * 水波速度 + */ + speed: number + /** + * 水波环数 + */ + rings: number +} diff --git a/core/core-frontend/src/models/chart/editor.d.ts b/core/core-frontend/src/models/chart/editor.d.ts index a2adf7a08c..7196366466 100644 --- a/core/core-frontend/src/models/chart/editor.d.ts +++ b/core/core-frontend/src/models/chart/editor.d.ts @@ -27,6 +27,7 @@ declare type EditorProperty = | 'map-symbolic-selector' | 'flow-map-line-selector' | 'flow-map-point-selector' + | 'bubble-animate' declare type EditorPropertyInner = { [key in EditorProperty]?: string[] } diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue index bc6b3fa1c2..94b2d3a3ee 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue @@ -19,6 +19,7 @@ import { ElIcon, ElMessage } from 'element-plus-secondary' import { storeToRefs } from 'pinia' import { BASE_VIEW_CONFIG } from '../util/chart' import { cloneDeep, defaultsDeep } from 'lodash-es' +import BubbleAnimateCfg from '@/views/chart/components/editor/editor-senior/components/BubbleAnimateCfg.vue' const dvMainStore = dvMainStoreWithOut() const { nowPanelTrackInfo, nowPanelJumpInfo, dvInfo, componentData } = storeToRefs(dvMainStore) @@ -37,7 +38,8 @@ const emit = defineEmits([ 'onAssistLineChange', 'onScrollCfgChange', 'onThresholdChange', - 'onMapMappingChange' + 'onMapMappingChange', + 'onBubbleAnimateChange' ]) const props = defineProps({ @@ -123,6 +125,11 @@ const onMapMappingChange = val => { emit('onMapMappingChange', val) } +const onBubbleAnimateChange = val => { + console.log(val) + emit('onBubbleAnimateChange', val) +} + const showProperties = (prop: EditorProperty) => { return properties?.value?.includes(prop) } @@ -359,6 +366,22 @@ const isDataEaseBi = computed(() => appStore.getIsDataEaseBi) + + + diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/BubbleAnimateCfg.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/BubbleAnimateCfg.vue new file mode 100644 index 0000000000..4e0bc16bbc --- /dev/null +++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/BubbleAnimateCfg.vue @@ -0,0 +1,222 @@ + + + + + diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue index 8849d0e0a0..2b38f116ce 100644 --- a/core/core-frontend/src/views/chart/components/editor/index.vue +++ b/core/core-frontend/src/views/chart/components/editor/index.vue @@ -1056,6 +1056,11 @@ const onScrollCfgChange = val => { renderChart(view.value) } +const onBubbleAnimateChange = val => { + view.value.senior.bubbleCfg = val + renderChart(view.value) +} + const onTableColumnWidthChange = val => { if (editMode.value !== 'edit') { return @@ -2806,6 +2811,7 @@ const deleteChartFieldItem = id => { @onScrollCfgChange="onScrollCfgChange" @onThresholdChange="onThresholdChange" @onMapMappingChange="onMapMappingChange" + @onBubbleAnimateChange="onBubbleAnimateChange" /> diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts index 31c1dd113b..081b2ae436 100644 --- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts +++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts @@ -725,6 +725,13 @@ export const DEFAULT_SCROLL: ScrollCfg = { step: 50 } +export const DEFAULT_BUBBLE_ANIMATE: BubbleCfg = { + enable: false, + speed: 1, + rings: 1, + type: 'wave' +} + export const DEFAULT_QUADRANT_STYLE: QuadrantAttr = { lineStyle: { stroke: '#aaa', @@ -1572,7 +1579,8 @@ export const BASE_VIEW_CONFIG = { assistLineCfg: DEFAULT_ASSIST_LINE_CFG, threshold: DEFAULT_THRESHOLD, scrollCfg: DEFAULT_SCROLL, - areaMapping: {} + areaMapping: {}, + bubbleCfg: DEFAULT_BUBBLE_ANIMATE }, flowMapStartName: [], flowMapEndName: [] diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts index d6d56d75c1..4e572803b5 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts @@ -28,7 +28,7 @@ const { t } = useI18n() * 气泡地图 */ export class BubbleMap extends L7PlotChartView { - properties = MAP_EDITOR_PROPERTY + properties: EditorProperty[] = [...MAP_EDITOR_PROPERTY, 'bubble-animate'] propertyInner = MAP_EDITOR_PROPERTY_INNER axis = MAP_AXIS_TYPE axisConfig: AxisConfig = { @@ -147,6 +147,7 @@ export class BubbleMap extends L7PlotChartView { } }) const { basicStyle } = parseJson(chart.customAttr) + const { bubbleCfg } = parseJson(chart.senior) const { offsetHeight, offsetWidth } = document.getElementById(drawOption.container) const options: DotLayerOptions = { source: { @@ -173,6 +174,20 @@ export class BubbleMap extends L7PlotChartView { active: true } } + if (bubbleCfg && bubbleCfg.enable) { + return new DotLayer({ + ...options, + size: { + field: 'size', + value: [10, Math.min(offsetHeight, offsetWidth) / 10] + }, + animate: { + enable: true, + speed: bubbleCfg.speed, + rings: bubbleCfg.rings + } + }) + } return new DotLayer(options) }