Merge pull request #11509 from dataease/pr@dev-v2@refactor_watermark

refactor(仪表板、数据大屏): 视图水印导出等水印优化

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 }
   )
 }
 

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)"
   >
     <component-edit-bar
       v-if="!showPosition.includes('canvas') && dvInfo.type === 'dashboard' && !props.isSelector"
@@ -264,7 +276,12 @@ const deepScale = computed(() => scale.value / 100)
       "
       :resource-id="config.id"
     />
-    <div class="wrapper-inner" ref="componentWrapperInnerRef" :style="componentBackgroundStyle">
+    <div
+      class="wrapper-inner"
+      ref="componentWrapperInnerRef"
+      :id="viewDemoInnerId"
+      :style="componentBackgroundStyle"
+    >
       <!--边框背景-->
       <Board
         v-if="svgInnerEnable"

core/core-frontend/src/components/data-visualization/canvas/DePreview.vue

@@ -10,8 +10,7 @@ import elementResizeDetectorMaker from 'element-resize-detector'
 import UserViewEnlarge from '@/components/visualization/UserViewEnlarge.vue'
 import CanvasOptBar from '@/components/visualization/CanvasOptBar.vue'
 import { isDashboard, isMainCanvas, refreshOtherComponent } from '@/utils/canvasUtils'
-import { activeWatermark } from '@/components/watermark/watermark'
-import { personInfoApi } from '@/api/user'
+import { activeWatermarkCheckUser } from '@/components/watermark/watermark'
 import router from '@/router'
 import { XpackComponent } from '@/components/plugin'
 import PopArea from '@/custom-component/pop-area/Component.vue'
@@ -267,31 +266,7 @@ const refreshDataV = () => {
 
 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 = () => {

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"
   >
     <div v-if="showCheck" class="del-from-mobile" @click="delFromMobile">
@@ -38,6 +41,7 @@
       <div
         class="shape-inner"
         ref="componentInnerRef"
+        :id="viewDemoInnerId"
         :style="componentBackgroundStyle"
         @click="selectCurComponent"
         @mousedown="handleInnerMouseDownOnShape"
@@ -101,7 +105,7 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho
 import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/contextmenu'
 import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
 import { storeToRefs } from 'pinia'
-import { downloadCanvas, imgUrlTrans } from '@/utils/imgUtils'
+import { downloadCanvas2, imgUrlTrans } from '@/utils/imgUtils'
 import Icon from '@/components/icon-custom/src/Icon.vue'
 import ComponentEditBar from '@/components/visualization/ComponentEditBar.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
@@ -109,6 +113,7 @@ import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
 import { groupSizeStyleAdaptor, groupStyleRevert } from '@/utils/style'
 import { isGroupCanvas, isMainCanvas } from '@/utils/canvasUtils'
 import Board from '@/components/de-board/Board.vue'
+import { activeWatermarkCheckUser, removeActiveWatermark } from '@/components/watermark/watermark'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const contextmenuStore = contextmenuStoreWithOut()
@@ -117,6 +122,8 @@ const parentNode = ref(null)
 const shapeInnerRef = ref(null)
 const componentInnerRef = ref(null)
 const componentEditBarRef = ref(null)
+const downLoading = ref(false)
+const viewDemoInnerId = computed(() => '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)
 }
 

core/core-frontend/src/components/visualization/UserViewEnlarge.vue

@@ -130,7 +130,7 @@
 
 <script setup lang="ts">
 import ComponentWrapper from '@/components/data-visualization/canvas/ComponentWrapper.vue'
-import { computed, h, nextTick, ref } from 'vue'
+import { computed, h, nextTick, reactive, ref } from 'vue'
 import { toPng } from 'html-to-image'
 import { useI18n } from '@/hooks/web/useI18n'
 import { deepCopy } from '@/utils/utils'
@@ -145,8 +145,7 @@ import { ElMessage, ElButton } from 'element-plus-secondary'
 import { exportPivotExcel } from '@/views/chart/components/js/panel/common/common_table'
 import { useRequestStoreWithOut } from '@/store/modules/request'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
-import { activeWatermark } from '@/components/watermark/watermark'
-import { personInfoApi } from '@/api/user'
+import { activeWatermarkCheckUser } from '@/components/watermark/watermark'
 const downLoading = ref(false)
 const dvMainStore = dvMainStoreWithOut()
 const dialogShow = ref(false)
@@ -192,6 +191,10 @@ const DETAIL_CHART_ATTR: DeepPartial<ChartObj> = {
     }
   }
 }
+
+const state = reactive({
+  scale: 0.5
+})
 const DETAIL_TABLE_ATTR: DeepPartial<ChartObj> = {
   senior: {
     scrollCfg: {
@@ -252,7 +255,8 @@ const pixelOptions = [
     ]
   }
 ]
-const dialogInit = (canvasStyle, view, item, opt) => {
+const dialogInit = (canvasStyle, view, item, opt, params = { scale: 0.5 }) => {
+  state.scale = params.scale
   sourceViewType.value = view.type
   optType.value = opt
   dialogShow.value = true
@@ -385,32 +389,7 @@ const htmlToImage = () => {
 }
 
 const initWatermark = () => {
-  if (dvInfo.value.watermarkInfo) {
-    if (userInfo.value && userInfo.value.model !== 'lose') {
-      activeWatermark(
-        dvInfo.value.watermarkInfo.settingContent,
-        userInfo.value,
-        'enlarge-inner-content',
-        'canvas-main',
-        dvInfo.value.selfWatermarkStatus,
-        0.5
-      )
-    } else {
-      personInfoApi().then(res => {
-        userInfo.value = res.data
-        if (userInfo.value && userInfo.value.model !== 'lose') {
-          activeWatermark(
-            dvInfo.value.watermarkInfo.settingContent,
-            userInfo.value,
-            'enlarge-inner-content',
-            'canvas-main',
-            dvInfo.value.selfWatermarkStatus,
-            0.5
-          )
-        }
-      })
-    }
-  }
+  activeWatermarkCheckUser('enlarge-inner-content', 'canvas-main', state.scale)
 }
 
 defineExpose({

core/core-frontend/src/components/watermark/watermark.ts

@@ -1,5 +1,12 @@
 // 动态创建水印元素的封装函数
+import { storeToRefs } from 'pinia'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { ref } from 'vue'
+import { personInfoApi } from '@/api/user'
+const dvMainStore = dvMainStoreWithOut()
 
+const { dvInfo } = storeToRefs(dvMainStore)
+const userInfo = ref(null)
 export function watermark(settings, domId) {
   const watermarkDom = document.getElementById(domId)
   // 默认设置
@@ -144,6 +151,41 @@ export function getNow() {
   const time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute
   return time
 }
+export function activeWatermarkCheckUser(domId, canvasId, scale = 1) {
+  if (dvInfo.value.watermarkInfo) {
+    if (userInfo.value && userInfo.value.model !== 'lose') {
+      activeWatermark(
+        dvInfo.value.watermarkInfo.settingContent,
+        userInfo.value,
+        domId,
+        canvasId,
+        dvInfo.value.selfWatermarkStatus,
+        scale
+      )
+    } else {
+      personInfoApi().then(res => {
+        userInfo.value = res.data
+        if (userInfo.value && userInfo.value.model !== 'lose') {
+          activeWatermark(
+            dvInfo.value.watermarkInfo.settingContent,
+            userInfo.value,
+            domId,
+            canvasId,
+            dvInfo.value.selfWatermarkStatus,
+            scale
+          )
+        }
+      })
+    }
+  }
+}
+
+export function removeActiveWatermark(domId) {
+  const historyWatermarkDom = document.getElementById(domId + '-de-watermark-server')
+  if (historyWatermarkDom) {
+    historyWatermarkDom.remove()
+  }
+}
 
 export function activeWatermark(
   watermarkForm,
@@ -154,10 +196,7 @@ export function activeWatermark(
   scale = 1
 ) {
   // 清理历史水印
-  const historyWatermarkDom = document.getElementById(domId + '-de-watermark-server')
-  if (historyWatermarkDom) {
-    historyWatermarkDom.remove()
-  }
+  removeActiveWatermark(domId)
   if (
     !(
       canvasId === 'canvas-main' &&