From 40f1daf8a2ea538bd13400ce16abef820170514d Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Wed, 9 Apr 2025 17:56:11 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E8=BD=AE=E6=92=AD?= =?UTF-8?q?=E6=8F=90=E7=A4=BA=EF=BC=8C=E4=BF=AE=E5=A4=8D=E7=A7=BB=E5=8A=A8?= =?UTF-8?q?=E7=AB=AF=E6=97=A0=E6=B3=95=E8=BD=AE=E6=92=AD=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98=EF=BC=8C=E4=BB=A5=E5=8F=8A=E4=BC=98=E5=8C=96=E6=89=93?= =?UTF-8?q?=E5=BC=80=E5=A4=8D=E7=94=A8=E9=A1=B5=E9=9D=A2=E5=81=9C=E6=AD=A2?= =?UTF-8?q?=E8=BD=AE=E6=92=AD=EF=BC=8C=E5=85=B3=E9=97=AD=E5=90=8E=E6=81=A2?= =?UTF-8?q?=E5=A4=8D=E8=BD=AE=E6=92=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/js/g2plot_tooltip_carousel.ts | 25 ++++++++++++------- .../components/js/panel/common/common_antv.ts | 22 +++++++++------- .../src/views/common/MultiplexingCanvas.vue | 9 ++++++- 3 files changed, 37 insertions(+), 19 deletions(-) diff --git a/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts b/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts index 3f96c6b925..def2cd3d67 100644 --- a/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts +++ b/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts @@ -46,7 +46,7 @@ export function isMix(chartType: string) { return CHART_CATEGORY.MIX.includes(chartType) } -const isSupport = (chartType: string) => { +export function isSupport(chartType: string) { return Object.values(CHART_CATEGORY).some(category => category.includes(chartType)) } @@ -142,7 +142,7 @@ class ChartCarouselTooltip { * 关闭放大图表弹窗，销毁对应实例 * 重启图表自身轮播 * */ - static closeEnlargeDialogDestroy(id: string) { + static closeEnlargeDialogDestroy(id?: string) { // 首先，暂停并删除包含 'viewDialog' 的实例 CAROUSEL_MANAGER_INSTANCES?.forEach((instance, key) => { if (instance.chart.id === id && instance.chart.container.includes('viewDialog')) { @@ -172,7 +172,7 @@ class ChartCarouselTooltip { setTimeout(() => instance.paused(), 200) } if (!id) { - instance.paused() + setTimeout(() => instance.paused(), 200) } }) } @@ -180,12 +180,15 @@ class ChartCarouselTooltip { /** * @param id */ - static resume(id: string) { + static resume(id?: string) { CAROUSEL_MANAGER_INSTANCES?.forEach(instance => { if (instance.chart.id === id) { instance.paused() setTimeout(() => instance.resume(), 500) } + if (!id) { + setTimeout(() => instance.resume(), 200) + } }) } @@ -219,10 +222,7 @@ class ChartCarouselTooltip { * */ private startCarousel() { if (!this.shouldStart()) { - // 如果未启用轮播功能，则停止当前轮播，并解绑相关鼠标事件 this.stop() - this.plot.chart.off('plot:mouseenter') - this.plot.chart.off('plot:mouseleave') return } // 定义启动嵌套定时器的函数 @@ -463,6 +463,10 @@ class ChartCarouselTooltip { instance.resume() }) }, 50) + // 定义 touchmove 事件处理函数（移动端） + const handleTouchMove = (event: TouchEvent) => { + handleMouseWheel(event) + } // 获取目标元素，优先全屏预览 const targetDiv = document.getElementById('de-preview-content') || @@ -475,6 +479,9 @@ class ChartCarouselTooltip { if (targetDiv) { targetDiv.removeEventListener('wheel', handleMouseWheel) targetDiv.addEventListener('wheel', handleMouseWheel) + //移除和添加 touchmove 事件监听器（移动端） + targetDiv.removeEventListener('touchmove', handleTouchMove) + targetDiv.addEventListener('touchmove', handleTouchMove) } // 页面可见性控制 document.addEventListener('visibilitychange', () => { @@ -513,7 +520,7 @@ class ChartCarouselTooltip { new IntersectionObserver( entries => { entries.forEach(entry => { - if (entry.intersectionRatio < 1) { + if (entry.intersectionRatio < 0.7) { this.paused() this.chartIsVisible = false } else { @@ -523,7 +530,7 @@ class ChartCarouselTooltip { } }) }, - { threshold: [1] } + { threshold: [0.7] } ) ) this.observers.get(this.plot.chart.ele.id).observe(this.plot.chart.ele) diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts index f2d093ee07..266cdd260a 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts @@ -46,7 +46,8 @@ import ChartCarouselTooltip, { isPie, isLine, isColumn, - isMix + isMix, + isSupport } from '@/views/chart/components/js/g2plot_tooltip_carousel' const { t: tI18n } = useI18n() @@ -1699,15 +1700,18 @@ export function getTooltipContainer(id) { * @param chart */ function configCarouselTooltip(plot, chart) { - // 启用轮播 - plot.once('afterrender', () => { - const carousel = chart.customAttr?.tooltip?.carousel - ChartCarouselTooltip.manage(plot, chart, { - xField: 'field', - duration: carousel.enable ? carousel?.stayTime * 1000 : 2000, - interval: carousel.enable ? carousel?.intervalTime * 1000 : 2000 + const start = isSupport(chart.type) && !document.getElementById('multiplexingDrawer') + if (start) { + // 启用轮播 + plot.once('afterrender', () => { + const carousel = chart.customAttr?.tooltip?.carousel + ChartCarouselTooltip.manage(plot, chart, { + xField: 'field', + duration: carousel.enable ? carousel?.stayTime * 1000 : 2000, + interval: carousel.enable ? carousel?.intervalTime * 1000 : 2000 + }) }) - }) + } } /** * 计算 Tooltip 的位置 diff --git a/core/core-frontend/src/views/common/MultiplexingCanvas.vue b/core/core-frontend/src/views/common/MultiplexingCanvas.vue index 24e3585253..de46f9a3f1 100644 --- a/core/core-frontend/src/views/common/MultiplexingCanvas.vue +++ b/core/core-frontend/src/views/common/MultiplexingCanvas.vue @@ -6,7 +6,10 @@ trigger="click" :title="t('visualization.multiplexing')" custom-class="custom-drawer" + @closed="handleClose()" > + +
{ + ChartCarouselTooltip.paused() curDvType.value = dvType dialogShow.value = true dvMainStore.initCurMultiplexingComponents() @@ -104,7 +109,9 @@ const saveMultiplexing = () => { snapshotStore.recordSnapshotCache('saveMultiplexing') }) } - +const handleClose = () => { + ChartCarouselTooltip.closeEnlargeDialogDestroy() +} defineExpose({ dialogInit })