Merge pull request #3751 from dataease/feat_watermark-support

feat: 支持水印设置

backend/src/main/java/io/dataease/plugins/server/PluginCommonServer.java

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

backend/src/main/java/io/dataease/plugins/server/XWatermarkServer.java

@@ -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.*;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
 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);
     }

backend/src/main/resources/db/migration/V44__1.17.sql

@@ -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`
-UPDATE `sys_menu` SET `component` = 'msg/Setting' WHERE (`component` = 'msg/setting');
+SET `component` = 'msg/All'
+WHERE (`component` = 'msg/all');
+UPDATE `sys_menu`
+SET `component` = 'msg/Setting'
+WHERE (`component` = 'msg/setting');

frontend/src/api/panel/panel.js

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

frontend/src/api/panel/shareProxy.js

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

frontend/src/components/canvas/DeCanvas.vue

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

frontend/src/components/canvas/components/Toolbar.vue

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

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

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

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

@@ -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()
+  const d = new Date()
-  let year = d.getFullYear()
+  const year = d.getFullYear()
-  let month = change(d.getMonth() + 1)
+  const month = change(d.getMonth() + 1)
-  let day = change(d.getDate())
+  const day = change(d.getDate())
-  let hour = change(d.getHours())
+  const hour = change(d.getHours())
-  let minute = change(d.getMinutes())
+  const minute = change(d.getMinutes())
-  let second = change(d.getSeconds())
 
   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)
+  if (!(canvasId === 'canvas-main' && ((watermarkForm.enable && !watermarkForm.enablePanelCustom) ||
-    || (watermarkForm.enable && watermarkOpen)))) {
+    (watermarkForm.enable && watermarkOpen)))) {
     return
   }
   let watermark_txt

frontend/src/components/deViewSelect/index.vue

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

frontend/src/views/link/view/index.vue

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

frontend/src/views/panel/list/PanelList.vue

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