Merge pull request #3751 from dataease/feat_watermark-support

feat: 支持水印设置
This commit is contained in:
Junjun 2022-11-15 12:06:06 +08:00 committed by GitHub
commit a4e5e08998
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 143 additions and 110 deletions

View File

@ -11,6 +11,7 @@ import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import springfox.documentation.annotations.ApiIgnore;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedInputStream;
import java.io.IOException;
@ -127,6 +128,8 @@ public class PluginCommonServer {
}
if (suffix.indexOf("svg") != -1)
response.setContentType("image/svg+xml");
if (suffix.indexOf("png") != -1)
response.setContentType("image/png");
os.flush();
} catch (Exception e) {
e.printStackTrace();

View File

@ -4,10 +4,7 @@ import io.dataease.plugins.config.SpringContextUtil;
import io.dataease.plugins.xpack.watermark.WatermarkService;
import io.dataease.plugins.xpack.watermark.dto.PanelWatermarkDTO;
import io.swagger.annotations.ApiOperation;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.*;
import springfox.documentation.annotations.ApiIgnore;
/**
@ -29,7 +26,7 @@ public class XWatermarkServer {
@ApiOperation("保存水印配置")
@PostMapping("/save")
public void save(PanelWatermarkDTO panelWatermark) {
public void save(@RequestBody PanelWatermarkDTO panelWatermark) {
WatermarkService userXpackService = SpringContextUtil.getBean(WatermarkService.class);
userXpackService.saveWatermarkInfo(panelWatermark);
}

View File

@ -6,26 +6,33 @@ ALTER TABLE `sys_log`
ALTER TABLE `panel_group`
ADD COLUMN `watermark_open` tinyint(1) NULL DEFAULT 1 COMMENT '是否单独打开水印' AFTER `update_time`;
DROP TABLE IF EXISTS `panel_watermark`;
CREATE TABLE `panel_watermark`
(
`id` varchar(50) NOT NULL,
`version` varchar(255) DEFAULT NULL COMMENT '版本号',
`setting_content` longtext COMMENT '设置内容',
`create_by` varchar(255) DEFAULT NULL,
`create_time` bigint(13) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE utf8mb4_general_ci;
INSERT INTO `panel_watermark` (`id`, `version`, `setting_content`, `create_by`, `create_time`)
VALUES ('system_default', '1.0',
'{\"enable\":false,\"enablePanelCustom\":true,\"type\":\"custom\",\"content\":\"${time}-${nickName}\",\"watermark_color\":\"#999999\",\"watermark_x_space\":20,\"watermark_y_space\":100,\"watermark_fontsize\":20}',
'admin', NULL);
CREATE TABLE `panel_watermark`
(
`id` varchar(50) NOT NULL,
`name` varchar(255) DEFAULT NULL,
`version` varchar(255) DEFAULT NULL COMMENT '版本',
`type` varchar(255) DEFAULT NULL COMMENT '类型',
`content` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE utf8mb4_general_ci;
SET
FOREIGN_KEY_CHECKS = 1;
UPDATE `sys_menu` SET `component` = 'dataset/Form' WHERE (`menu_id` = '800');
UPDATE `sys_menu`
SET `component` = 'dataset/Form'
WHERE (`menu_id` = '800');
UPDATE `sys_menu` SET `component` = 'msg/All' WHERE (`component` = 'msg/all');
UPDATE `sys_menu` SET `component` = 'msg/Setting' WHERE (`component` = 'msg/setting');
UPDATE `sys_menu`
SET `component` = 'msg/All'
WHERE (`component` = 'msg/all');
UPDATE `sys_menu`
SET `component` = 'msg/Setting'
WHERE (`component` = 'msg/setting');

View File

@ -163,6 +163,10 @@ export function initPanelData(panelId, useCache = false, callback) {
if (response.data) {
// 初始化视图data和style 数据
panelInit(JSON.parse(response.data.panelData), JSON.parse(response.data.panelStyle))
const watermarkInfo = {
...response.data.watermarkInfo,
settingContent: JSON.parse(response.data.watermarkInfo.settingContent)
}
// 设置当前仪表板全局信息
store.dispatch('panel/setPanelInfo', {
id: response.data.id,
@ -177,7 +181,7 @@ export function initPanelData(panelId, useCache = false, callback) {
updateName: response.data.updateName,
updateTime: response.data.updateTime,
watermarkOpen: response.data.watermarkOpen,
watermarkInfo: response.data.watermarkInfo
watermarkInfo: watermarkInfo
})
// 刷新联动信息
getPanelAllLinkageInfo(panelId).then(rsp => {

View File

@ -10,6 +10,10 @@ export function proxyInitPanelData(panelId, proxy, callback) {
if (response.data) {
// 初始化视图data和style 数据
panelInit(JSON.parse(response.data.panelData), JSON.parse(response.data.panelStyle))
const watermarkInfo = {
...response.data.watermarkInfo,
settingContent: JSON.parse(response.data.watermarkInfo.settingContent)
}
// 设置当前仪表板全局信息
store.dispatch('panel/setPanelInfo', {
id: response.data.id,
@ -25,7 +29,7 @@ export function proxyInitPanelData(panelId, proxy, callback) {
updateName: response.data.updateName,
updateTime: response.data.updateTime,
watermarkOpen: response.data.watermarkOpen,
watermarkInfo: response.data.watermarkInfo
watermarkInfo: watermarkInfo
})
// 刷新联动信息
getPanelAllLinkageInfo(panelId, proxy).then(rsp => {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 509 KiB

View File

@ -265,7 +265,7 @@ export default {
if (this.panelInfo.watermarkInfo) {
userLoginInfo().then(res => {
const userInfo = res.data
activeWatermark(JSON.parse(this.panelInfo.watermarkInfo.settingContent), userInfo, this.canvasDomId, this.canvasId, this.panelInfo.watermarkOpen)
activeWatermark(this.panelInfo.watermarkInfo.settingContent, userInfo, this.canvasDomId, this.canvasId, this.panelInfo.watermarkOpen)
})
}
},

View File

@ -138,13 +138,16 @@
<span class="icon iconfont icon-icon_clear_outlined icon16" />
<span class="text14 margin-left8">{{ $t('panel.clean_canvas') }}</span>
</el-dropdown-item>
<el-dropdown-item>
<el-dropdown-item
v-if="showWatermarkSetting"
>
<span class="icon iconfont icon-WATERMARK icon16" />
<span class="text14 margin-left8">{{ $t('panel.watermark') }}</span>
<el-switch
v-model="panelInfo.watermarkOpen"
:class="[{['grid-active']: panelInfo.watermarkOpen},'margin-left8']"
size="mini"
@change="styleChange"
/>
</el-dropdown-item>
</el-dropdown-menu>
@ -259,6 +262,9 @@ export default {
}
},
computed: {
showWatermarkSetting() {
return this.panelInfo.watermarkInfo && this.panelInfo.watermarkInfo.settingContent.enable && this.panelInfo.watermarkInfo.settingContent.enablePanelCustom
},
panelInfo() {
return this.$store.state.panel.panelInfo
},
@ -437,9 +443,10 @@ export default {
if (_this.$store.state.cacheStyleChangeTimes > 0) {
const requestInfo = _this.savePrepare()
const cacheRequest = {
...this.panelInfo,
...deepCopy(this.panelInfo),
...requestInfo
}
cacheRequest.watermarkInfo.settingContent = JSON.stringify(this.panelInfo.watermarkInfo.settingContent)
saveCache(cacheRequest)
_this.$store.state.cacheStyleChangeTimes = 0
}
@ -449,6 +456,7 @@ export default {
//
const requestInfo = {
id: this.panelInfo.id,
watermarkOpen: this.panelInfo.watermarkOpen,
panelStyle: JSON.stringify(this.canvasStyleData),
panelData: JSON.stringify(this.componentData)
}
@ -619,6 +627,9 @@ export default {
}
})
this.cancelMobileLayoutStatue(sourceComponentData)
},
styleChange() {
this.$store.commit('canvasChange')
}
}
}

View File

@ -1,7 +1,7 @@
<template>
<div
class="bg"
:id="previewMainDomId"
class="bg"
:style="customStyle"
@scroll="canvasScroll"
>
@ -315,10 +315,12 @@ export default {
},
methods: {
initWatermark() {
if (this.panelInfo.watermarkInfo) {
userLoginInfo().then(res => {
const userInfo = res.data
activeWatermark(JSON.parse(this.panelInfo.watermarkInfo.settingContent), userInfo, 'preview-main-canvas-main', this.canvasId, this.panelInfo.watermarkOpen)
activeWatermark(this.panelInfo.watermarkInfo.settingContent, userInfo, 'preview-main-canvas-main', this.canvasId, this.panelInfo.watermarkOpen)
})
}
},
isMainCanvas() {
return this.canvasId === 'canvas-main'

View File

@ -3,7 +3,7 @@
export function watermark(settings, domId) {
const watermarkDom = document.getElementById(domId)
// 默认设置
let defaultSettings = {
const defaultSettings = {
watermark_txt: '',
watermark_x: 20, // 水印起始位置x轴坐标
watermark_y: 20, // 水印起始位置Y轴坐标
@ -21,7 +21,7 @@ export function watermark(settings, domId) {
}
// 根据函数的入参调整设置
if (settings && typeof settings === 'object') {
let src = settings || {}
const src = settings || {}
for (const key in src) {
if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) {
continue
@ -29,22 +29,22 @@ export function watermark(settings, domId) {
}
}
// 创建虚拟节点对象,在该节点对象中可以放元素,最后只需在页面中添加该节点对象即可。可提高性能
let oTemp = document.createElement('p')
const oTemp = document.createElement('p')
// 获取页面最大宽度
let page_width = watermarkDom.clientWidth
let cutWidth = page_width * 0.0150
const cutWidth = page_width * 0.0150
page_width = page_width - cutWidth
// 获取页面最大高度
let page_height = watermarkDom.clientHeight - 56
page_height = page_height < 400 ? 400 : page_height
// page_height = Math.max(page_height, window.innerHeight - 30)
// 如果将水印列数设置为0或水印列数设置过大超过页面最大宽度则重新计算水印列数和水印x轴间隔
if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
if (defaultSettings.watermark_cols === 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space))
defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1))
}
// 如果将水印行数设置为0或水印行数设置过大超过页面最大长度则重新计算水印行数和水印y轴间隔
if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {
if (defaultSettings.watermark_rows === 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {
defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space))
defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1))
}
@ -56,7 +56,7 @@ export function watermark(settings, domId) {
y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i
for (let j = 0; j < defaultSettings.watermark_cols; j++) {
x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j
let mask_div = document.createElement('div')
const mask_div = document.createElement('div')
mask_div.id = 'mask_div' + i + j
mask_div.className = 'mask_div'
mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt))
@ -87,17 +87,15 @@ export function watermark(settings, domId) {
}
oTemp.setAttribute('id', 'de-watermark-server')
watermarkDom.appendChild(oTemp)
}
export function getNow() {
let d = new Date()
let year = d.getFullYear()
let month = change(d.getMonth() + 1)
let day = change(d.getDate())
let hour = change(d.getHours())
let minute = change(d.getMinutes())
let second = change(d.getSeconds())
const d = new Date()
const year = d.getFullYear()
const month = change(d.getMonth() + 1)
const day = change(d.getDate())
const hour = change(d.getHours())
const minute = change(d.getMinutes())
function change(t) {
if (t < 10) {
@ -107,7 +105,7 @@ export function getNow() {
}
}
let time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute
const time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute
return time
}
@ -117,8 +115,8 @@ export function activeWatermark(watermarkForm, userLoginInfo, domId, canvasId, w
if (historyWatermarkDom) {
historyWatermarkDom.remove()
}
if (!(canvasId === 'canvas-main' && ((watermarkForm.enable && !watermarkForm.enablePanelCustom)
|| (watermarkForm.enable && watermarkOpen)))) {
if (!(canvasId === 'canvas-main' && ((watermarkForm.enable && !watermarkForm.enablePanelCustom) ||
(watermarkForm.enable && watermarkOpen)))) {
return
}
let watermark_txt

View File

@ -139,6 +139,10 @@ export default {
this.innerValues = this.value
this.viewLoaded = false
this.panelId && findOne(this.panelId).then(response => {
const watermarkInfo = {
...response.data.watermarkInfo,
settingContent: JSON.parse(response.data.watermarkInfo.settingContent)
}
this.panelInfo = {
id: response.data.id,
name: response.data.name,
@ -150,7 +154,7 @@ export default {
updateBy: response.data.updateBy,
updateTime: response.data.updateTime,
watermarkOpen: response.data.watermarkOpen,
watermarkInfo: response.data.watermarkInfo
watermarkInfo: watermarkInfo
}
this.$store.dispatch('panel/setPanelInfo', this.panelInfo)
panelDataPrepare(JSON.parse(response.data.panelData), JSON.parse(response.data.panelStyle), rsp => {

View File

@ -68,6 +68,10 @@ export default {
loadResource(this.resourceId).then(res => {
this.show = false
let loadingCount = 0
const watermarkInfo = {
...res.data.watermarkInfo,
settingContent: JSON.parse(res.data.watermarkInfo.settingContent)
}
this.panelInfo = {
id: res.data.id,
name: res.data.name,
@ -78,7 +82,7 @@ export default {
updateBy: res.data.updateBy,
updateTime: res.data.updateTime,
watermarkOpen: res.data.watermarkOpen,
watermarkInfo: res.data.watermarkInfo
watermarkInfo: watermarkInfo
}
this.$store.dispatch('panel/setPanelInfo', this.panelInfo)

View File

@ -970,8 +970,7 @@ export default {
createTime: data.createTime,
updateBy: data.updateBy,
updateTime: data.updateTime,
watermarkOpen: data.watermarkOpen,
watermarkInfo: data.watermarkInfo
watermarkOpen: data.watermarkOpen
})
bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
},