refactor(仪表板): 视图放大导出支持显示水印

core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue

@@ -149,6 +149,10 @@ export default {
     isRelation: {
       type: Boolean,
       default: false
+    },
+    userId: {
+      type: String,
+      require: false
     }
   },
   data() {

core/frontend/src/components/canvas/components/editor/Preview.vue

@@ -164,6 +164,7 @@
       <user-view-dialog
         v-if="chartDetailsVisible"
         ref="userViewDialog-canvas-main"
+        :user-id="userId"
         :chart="showChartInfo"
         :chart-table="showChartTableInfo"
         :canvas-style-data="canvasStyleData"

core/frontend/src/components/canvas/customComponent/UserView.vue

@@ -206,6 +206,7 @@
         :chart-table="showChartTableInfo"
         :canvas-style-data="canvasStyleData"
         :open-type="showChartInfoType"
+        :user-id="userId"
       />
     </el-dialog>
 
@@ -342,6 +343,10 @@ export default {
       type: String,
       require: false,
       default: 'preview'
+    },
+    userId: {
+      type: String,
+      require: false
     }
   },
   data() {
@@ -746,7 +751,7 @@ export default {
     },
     exportViewImg() {
       this.imageDownloading = true
-      this.$refs['userViewDialog'].exportViewImg(this.pixel,() => {
+      this.$refs['userViewDialog'].exportViewImg(this.pixel, () => {
         this.imageDownloading = false
       })
     },

core/frontend/src/components/canvas/customComponent/UserViewDialog.vue

@@ -31,39 +31,39 @@
             class="chart-class"
           />
           <chart-component
-            :ref="element.propValue.id"
             v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'"
+            :ref="element.propValue.id"
             :theme-style="element.commonBackground"
             class="chart-class"
             :chart="mapChart || chart"
           />
           <chart-component-g2
-            :ref="element.propValue.id"
             v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'"
+            :ref="element.propValue.id"
             class="chart-class show-in-dialog"
             :chart="chart"
           />
           <chart-component-s2
-            :ref="element.propValue.id"
             v-else-if="chart.type.includes('table') && renderComponent() === 'antv'"
+            :ref="element.propValue.id"
             class="chart-class"
             :chart="chart"
           />
           <label-normal
-            :ref="element.propValue.id"
             v-else-if="chart.type.includes('text')"
+            :ref="element.propValue.id"
             :chart="chart"
             class="table-class"
           />
           <label-normal-text
-            :ref="element.propValue.id"
             v-else-if="chart.type === 'label'"
+            :ref="element.propValue.id"
             :chart="chart"
             class="table-class"
           />
           <table-normal
-            :ref="element.propValue.id"
             v-else-if="chart.type.includes('table') && renderComponent() === 'echarts'"
+            :ref="element.propValue.id"
             :chart="chart"
             class="table-class"
           />
@@ -96,6 +96,8 @@ import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
 import html2canvas from 'html2canvasde'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { deepCopy, exportExcelDownload, exportImg, imgUrlTrans } from '@/components/canvas/utils/utils'
+import { activeWatermark } from '@/components/canvas/tools/watermark'
+import { proxyUserLoginInfo, userLoginInfo } from '@/api/systemInfo/userLogin'
 
 export default {
   name: 'UserViewDialog',
@@ -122,6 +124,10 @@ export default {
     openType: {
       type: String,
       default: 'details'
+    },
+    userId: {
+      type: String,
+      require: false
     }
 
   },
@@ -258,8 +264,22 @@ export default {
     this.element = deepCopy(this.curComponent)
   },
   mounted() {
+    this.initWatermark()
   },
   methods: {
+    initWatermark(waterDomId = 'chartCanvas') {
+      if (this.panelInfo.watermarkInfo) {
+        if (this.userInfo) {
+          activeWatermark(this.panelInfo.watermarkInfo.settingContent, this.userInfo, waterDomId, 'canvas-main', this.panelInfo.watermarkOpen, 'de-watermark-view')
+        } else {
+          const method = this.userId ? proxyUserLoginInfo : userLoginInfo
+          method().then(res => {
+            this.userInfo = res.data
+            activeWatermark(this.panelInfo.watermarkInfo.settingContent, this.userInfo, waterDomId, 'canvas-main', this.panelInfo.watermarkOpen, 'de-watermark-view')
+          })
+        }
+      }
+    },
     exportExcel(callBack) {
       const _this = this
       if (this.isOnlyDetails) {
@@ -282,6 +302,7 @@ export default {
         this.exporting = true
         this.resizeChart()
         setTimeout(() => {
+          this.initWatermark()
           exportImg(this.chart.name, (params) => {
             this.exporting = false
             this.resizeChart()

core/frontend/src/components/canvas/customComponent/UserViewMobileDialog.vue

@@ -6,6 +6,7 @@
       class="full-div"
     >
       <div
+        id="chartCanvas"
         class="canvas-class"
         :style="commonStyle"
       >
@@ -70,6 +71,8 @@ import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import PluginCom from '@/views/system/plugin/PluginCom'
 import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
+import {activeWatermark} from "@/components/canvas/tools/watermark";
+import {proxyUserLoginInfo, userLoginInfo} from "@/api/systemInfo/userLogin";
 export default {
   name: 'UserViewMobileDialog',
   components: { ChartComponentS2, LabelNormalText, DeContainer, DeMainContainer, ChartComponentG2, ChartComponent, TableNormal, LabelNormal, PluginCom },
@@ -81,6 +84,10 @@ export default {
     chartTable: {
       type: Object,
       default: null
+    },
+    userId: {
+      type: String,
+      require: false
     }
 
   },
@@ -180,6 +187,19 @@ export default {
     this.element = deepCopy(this.curComponent)
   },
   methods: {
+    initWatermark(waterDomId = 'chartCanvas') {
+      if (this.panelInfo.watermarkInfo) {
+        if (this.userInfo) {
+          activeWatermark(this.panelInfo.watermarkInfo.settingContent, this.userInfo, waterDomId, 'canvas-main', this.panelInfo.watermarkOpen, 'de-watermark-view')
+        } else {
+          const method = this.userId ? proxyUserLoginInfo : userLoginInfo
+          method().then(res => {
+            this.userInfo = res.data
+            activeWatermark(this.panelInfo.watermarkInfo.settingContent, this.userInfo, waterDomId, 'canvas-main', this.panelInfo.watermarkOpen, 'de-watermark-view')
+          })
+        }
+      }
+    },
 
     renderComponent() {
       return this.chart.render

core/frontend/src/components/canvas/tools/watermark.js

@@ -1,6 +1,6 @@
 // 动态创建水印元素的封装函数
 
-export function watermark(settings, domId) {
+export function watermark(settings, domId, watermarkDomId = 'de-watermark-server') {
   const watermarkDom = document.getElementById(domId)
   // 默认设置
   const defaultSettings = {
@@ -85,7 +85,7 @@ export function watermark(settings, domId) {
       oTemp.appendChild(mask_div)
     }
   }
-  oTemp.setAttribute('id', 'de-watermark-server')
+  oTemp.setAttribute('id', watermarkDomId)
   watermarkDom.appendChild(oTemp)
 }
 
@@ -109,9 +109,9 @@ export function getNow() {
   return time
 }
 
-export function activeWatermark(watermarkForm, userLoginInfo, domId, canvasId, watermarkOpen) {
+export function activeWatermark(watermarkForm, userLoginInfo, domId, canvasId, watermarkOpen, watermarkDomId = 'de-watermark-server') {
   // 清理历史水印
-  const historyWatermarkDom = document.getElementById('de-watermark-server')
+  const historyWatermarkDom = document.getElementById(watermarkDomId)
   if (historyWatermarkDom) {
     historyWatermarkDom.remove()
   }
@@ -148,7 +148,7 @@ export function activeWatermark(watermarkForm, userLoginInfo, domId, canvasId, w
     watermark_y_space: watermarkForm.watermark_y_space,
     watermark_fontsize: watermarkForm.watermark_fontsize + 'px'
   }
-  watermark(settings, domId)
+  watermark(settings, domId, watermarkDomId)
 }
 
 export default { watermark, getNow, activeWatermark }