feat(仪表板): 明细和图表放大支持水印覆盖，放大导出图片支持连同水印一起导出

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

@@ -80,6 +80,7 @@
       v-if="dialogShow"
     >
       <div
+        id="enlarge-inner-content"
         class="enlarge-inner"
         :class="{
           'enlarge-inner-with-header': optType === 'details' && sourceViewType.includes('chart-mix')
@@ -144,6 +145,8 @@ 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'
 const downLoading = ref(false)
 const dvMainStore = dvMainStoreWithOut()
 const dialogShow = ref(false)
@@ -161,6 +164,7 @@ const { dvInfo, editMode } = storeToRefs(dvMainStore)
 const exportLoading = ref(false)
 const sourceViewType = ref()
 const activeName = ref('left')
+const userInfo = ref(null)
 const DETAIL_CHART_ATTR: DeepPartial<ChartObj> = {
   render: 'antv',
   type: 'table-info',
@@ -264,6 +268,9 @@ const dialogInit = (canvasStyle, view, item, opt) => {
     }
     dataDetailsOpt()
   }
+  nextTick(() => {
+    initWatermark()
+  })
 }
 
 const dataDetailsOpt = () => {
@@ -357,6 +364,7 @@ const htmlToImage = () => {
   downLoading.value = true
   useEmitt().emitter.emit('renderChart-' + viewInfo.value.id)
   setTimeout(() => {
+    initWatermark()
     toPng(viewContainer.value)
       .then(dataUrl => {
         downLoading.value = false
@@ -365,15 +373,46 @@ const htmlToImage = () => {
         a.href = dataUrl
         a.click()
         useEmitt().emitter.emit('renderChart-' + viewInfo.value.id)
+        initWatermark()
       })
       .catch(error => {
         downLoading.value = false
+        initWatermark()
         useEmitt().emitter.emit('renderChart-' + viewInfo.value.id)
         console.error('oops, something went wrong!', error)
       })
   }, 500)
 }
 
+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
+          )
+        }
+      })
+    }
+  }
+}
+
 defineExpose({
   dialogInit
 })

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

@@ -121,7 +121,7 @@ export function watermark(settings, domId) {
       oTemp.appendChild(mask_div)
     }
   }
-  oTemp.setAttribute('id', 'de-watermark-server')
+  oTemp.setAttribute('id', domId + '-de-watermark-server')
   watermarkDom.appendChild(oTemp)
 }
 
@@ -154,7 +154,7 @@ export function activeWatermark(
   scale = 1
 ) {
   // 清理历史水印
-  const historyWatermarkDom = document.getElementById('de-watermark-server')
+  const historyWatermarkDom = document.getElementById(domId + '-de-watermark-server')
   if (historyWatermarkDom) {
     historyWatermarkDom.remove()
   }