dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #7904 from dataease/pr@dev@refactor_watermark

Browse Source 
refactor(仪表板): 视图放大导出支持显示水印
This commit is contained in:
王嘉豪 2024-01-30 14:32:11 +08:00 committed by GitHub
commit 15ea94fd12
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 63 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
View File

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

1
core/frontend/src/components/canvas/components/editor/Preview.vue
View File

@ -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"

7
core/frontend/src/components/canvas/customComponent/UserView.vue
View File

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

33
core/frontend/src/components/canvas/customComponent/UserViewDialog.vue
View File

@ -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()

20
core/frontend/src/components/canvas/customComponent/UserViewMobileDialog.vue
View File

@ -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

10
core/frontend/src/components/canvas/tools/watermark.js
View File

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