From 18847b1df6b1e57e78e269bc23fc7ce09df48d71 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Mon, 12 Aug 2024 19:02:35 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF=E3=80=81?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20=E8=A7=86=E5=9B=BE?= =?UTF-8?q?=E6=B0=B4=E5=8D=B0=E5=AF=BC=E5=87=BA=E7=AD=89=E6=B0=B4=E5=8D=B0?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-visualization/canvas/CanvasCore.vue | 33 ++----------- .../canvas/ComponentWrapper.vue | 23 +++++++-- .../data-visualization/canvas/DePreview.vue | 32 ++----------- .../data-visualization/canvas/Shape.vue | 17 ++++++- .../visualization/UserViewEnlarge.vue | 39 ++++----------- .../src/components/watermark/watermark.ts | 47 +++++++++++++++++-- 6 files changed, 95 insertions(+), 96 deletions(-) diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue index eb7e036a7b..e7f242a9eb 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue @@ -42,8 +42,7 @@ import { adaptCurThemeCommonStyle } from '@/utils/canvasStyle' import LinkageSet from '@/components/visualization/LinkageSet.vue' import PointShadow from '@/components/data-visualization/canvas/PointShadow.vue' import DragInfo from '@/components/visualization/common/DragInfo.vue' -import { activeWatermark } from '@/components/watermark/watermark' -import { personInfoApi } from '@/api/user' +import { activeWatermarkCheckUser } from '@/components/watermark/watermark' import PopArea from '@/custom-component/pop-area/Component.vue' import DatasetParamsComponent from '@/components/visualization/DatasetParamsComponent.vue' @@ -241,32 +240,7 @@ const initWatermark = (waterDomId = 'editor-canvas-main') => { dvInfo.value.watermarkInfo.settingContent && isMainCanvas(canvasId.value) ) { - const scale = dashboardActive.value ? 1 : curScale.value - if (userInfo.value && userInfo.value.model !== 'lose') { - activeWatermark( - dvInfo.value.watermarkInfo.settingContent, - userInfo.value, - waterDomId, - canvasId.value, - dvInfo.value.selfWatermarkStatus, - scale - ) - } else { - const method = personInfoApi - method().then(res => { - userInfo.value = res.data - if (userInfo.value && userInfo.value.model !== 'lose') { - activeWatermark( - dvInfo.value.watermarkInfo.settingContent, - userInfo.value, - waterDomId, - canvasId.value, - dvInfo.value.selfWatermarkStatus, - scale - ) - } - }) - } + activeWatermarkCheckUser(waterDomId, canvasId.value, curScale.value) } } catch (e) { console.warn('Watermarks are not supported!') @@ -1344,7 +1318,8 @@ const userViewEnlargeOpen = (opt, item) => { canvasStyleData.value, canvasViewInfo.value[item.id], item, - opt + opt, + { scale: curBaseScale.value } ) } diff --git a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue index f903fcfc67..6aa71fcec4 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue @@ -3,16 +3,18 @@ import { getStyle } from '@/utils/style' import eventBus from '@/utils/eventBus' import { ref, onMounted, toRefs, getCurrentInstance, computed, nextTick } from 'vue' import findComponent from '@/utils/components' -import { downloadCanvas, imgUrlTrans } from '@/utils/imgUtils' +import { downloadCanvas2, imgUrlTrans } from '@/utils/imgUtils' import ComponentEditBar from '@/components/visualization/ComponentEditBar.vue' import ComponentSelector from '@/components/visualization/ComponentSelector.vue' import { useEmitt } from '@/hooks/web/useEmitt' import Board from '@/components/de-board/Board.vue' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' +import { activeWatermarkCheckUser, removeActiveWatermark } from '@/components/watermark/watermark' const componentWrapperInnerRef = ref(null) const componentEditBarRef = ref(null) const dvMainStore = dvMainStoreWithOut() +const downLoading = ref(false) const props = defineProps({ active: { @@ -92,10 +94,17 @@ let currentInstance const component = ref(null) const emits = defineEmits(['userViewEnlargeOpen', 'datasetParamsInit', 'onPointClick']) +const viewDemoInnerId = computed(() => 'enlarge-inner-content-' + config.value.id) const htmlToImage = () => { + downLoading.value = true setTimeout(() => { const vueDom = componentWrapperInnerRef.value - downloadCanvas('img', vueDom, '图表') + activeWatermarkCheckUser(viewDemoInnerId.value, 'canvas-main', scale.value / 100) + downloadCanvas2('img', vueDom, '图表', () => { + // do callback + removeActiveWatermark(viewDemoInnerId.value) + downLoading.value = false + }) }, 200) } @@ -243,6 +252,9 @@ const deepScale = computed(() => scale.value / 100) :class="showPosition + '-' + config.component" @mousedown="handleInnerMouseDown" @mouseenter="onMouseEnter" + v-loading="downLoading" + element-loading-text="导出中..." + element-loading-background="rgba(255, 255, 255, 1)" > scale.value / 100) " :resource-id="config.id" /> -
+
{ const initWatermark = (waterDomId = 'preview-canvas-main') => { if (dvInfo.value.watermarkInfo && isMainCanvas(canvasId.value)) { - if (userInfo.value && userInfo.value.model !== 'lose') { - activeWatermark( - dvInfo.value.watermarkInfo.settingContent, - userInfo.value, - waterDomId, - canvasId.value, - dvInfo.value.selfWatermarkStatus, - scaleMin.value / 100 - ) - } else { - const method = personInfoApi - method().then(res => { - userInfo.value = res.data - if (userInfo.value && userInfo.value.model !== 'lose') { - activeWatermark( - dvInfo.value.watermarkInfo.settingContent, - userInfo.value, - waterDomId, - canvasId.value, - dvInfo.value.selfWatermarkStatus, - scaleMin.value / 100 - ) - } - }) - } + activeWatermarkCheckUser(waterDomId, canvasId.value, scaleMin.value / 100) } } @@ -335,7 +310,8 @@ const userViewEnlargeOpen = (opt, item) => { canvasStyleData.value, canvasViewInfo.value[item.id], item, - opt + opt, + { scale: scaleMin.value / 100 } ) } const handleMouseDown = () => { diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue index 5045976ceb..821b73581c 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue @@ -4,6 +4,9 @@ :class="{ 'shape-group-area': isGroupArea }" ref="shapeInnerRef" :id="domId" + v-loading="downLoading" + element-loading-text="导出中..." + element-loading-background="rgba(255, 255, 255, 1)" @dblclick="handleDbClick" >
@@ -38,6 +41,7 @@
'enlarge-inner-shape-' + element.value.id) const { curComponent, @@ -953,8 +960,14 @@ const dragCollision = computed(() => { }) const htmlToImage = () => { + downLoading.value = true setTimeout(() => { - downloadCanvas('img', componentInnerRef.value, '图表') + activeWatermarkCheckUser(viewDemoInnerId.value, 'canvas-main', scale.value) + downloadCanvas2('img', componentInnerRef.value, '图表', () => { + // do callback + removeActiveWatermark(viewDemoInnerId.value) + downLoading.value = false + }) }, 200) } diff --git a/core/core-frontend/src/components/visualization/UserViewEnlarge.vue b/core/core-frontend/src/components/visualization/UserViewEnlarge.vue index 53eb5f8fe7..163e43d87c 100644 --- a/core/core-frontend/src/components/visualization/UserViewEnlarge.vue +++ b/core/core-frontend/src/components/visualization/UserViewEnlarge.vue @@ -130,7 +130,7 @@