feat: 支持水印设置

2026-05-20 02:58:10 +08:00 · 2022-11-15 11:58:14 +08:00
parent 7cf2f9da02
commit aa4e5689b9
15 changed files with 143 additions and 110 deletions
--- a/frontend/src/api/panel/panel.js
+++ b/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 => {
--- a/frontend/src/api/panel/shareProxy.js
+++ b/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 => {
--- a/frontend/src/assets/watermark-demo.png
+++ b/frontend/src/assets/watermark-demo.png
--- a/frontend/src/components/canvas/DeCanvas.vue
+++ b/frontend/src/components/canvas/DeCanvas.vue
@@ -8,7 +8,7 @@
    @mouseup="deselectCurComponent"
    @scroll="canvasScroll"
  >
-    <slot name="optBar"/>
+    <slot name="optBar" />
    <de-editor
      :ref="editorRefName"
      :canvas-style-data="canvasStyleData"
@@ -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)
        })
      }
    },
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -7,10 +7,10 @@
        @change="openMobileLayout"
      >
        <el-radio-button :label="false">
-          <span class="icon iconfont icon-icon_pc_outlined icon16_only"/>
+          <span class="icon iconfont icon-icon_pc_outlined icon16_only" />
        </el-radio-button>
        <el-radio-button :label="true">
-          <span class="icon iconfont icon-icon_phone_outlined icon16_only"/>
+          <span class="icon iconfont icon-icon_phone_outlined icon16_only" />
        </el-radio-button>
      </el-radio-group>
    </div>
@@ -95,7 +95,7 @@
            <el-dropdown-item>
              <el-dropdown placement="right-start">
                <span>
-                  <span class="icon iconfont icon-icon_moments-categories_outlined icon16"/>
+                  <span class="icon iconfont icon-icon_moments-categories_outlined icon16" />
                  <span class="text14 margin-left8">{{ $t('panel.new_element_distribution') }}</span>
                  <svg-icon
                    icon-class="icon_right_outlined"
@@ -121,7 +121,7 @@
              </el-dropdown>
            </el-dropdown-item>
            <el-dropdown-item>
-              <span class="icon iconfont icon-icon_dialpad_outlined icon16"/>
+              <span class="icon iconfont icon-icon_dialpad_outlined icon16" />
              <span class="text14 margin-left8">{{ $t('panel.aided_grid') }}</span>
              <el-switch
                v-model="showGridSwitch"
@@ -131,20 +131,23 @@
              />
            </el-dropdown-item>
            <el-dropdown-item @click.native="openOuterParamsSet">
-              <span class="icon iconfont icon-icon-quicksetting icon16"/>
+              <span class="icon iconfont icon-icon-quicksetting icon16" />
              <span class="text14 margin-left8">{{ $t('panel.params_setting') }}</span>
            </el-dropdown-item>
            <el-dropdown-item @click.native="clearCanvas">
-              <span class="icon iconfont icon-icon_clear_outlined icon16"/>
+              <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>
-              <span class="icon iconfont icon-WATERMARK icon16"/>
+            <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>
@@ -191,8 +194,8 @@
        </el-col>
        <el-col :span="20">
          <span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px">{{
-              $t('panel.panel_save_warn_tips')
-            }}</span>
+            $t('panel.panel_save_warn_tips')
+          }}</span>
        </el-col>
      </el-row>
      <div
@@ -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')
    }
  }
 }
--- a/frontend/src/components/canvas/components/editor/DeEditor.vue
+++ b/frontend/src/components/canvas/components/editor/DeEditor.vue
@@ -121,7 +121,7 @@
      :canvas-id="canvasId"
    />
    <!-- 右击菜单 -->
-    <ContextMenu/>
+    <ContextMenu />

    <!-- 对齐标线 -->
    <span
--- a/frontend/src/components/canvas/components/editor/Preview.vue
+++ b/frontend/src/components/canvas/components/editor/Preview.vue
@@ -1,11 +1,11 @@
 <template>
  <div
-    class="bg"
    :id="previewMainDomId"
+    class="bg"
    :style="customStyle"
    @scroll="canvasScroll"
  >
-    <canvas-opt-bar/>
+    <canvas-opt-bar />
    <div
      :id="previewDomId"
      :ref="previewRefId"
@@ -315,10 +315,12 @@ export default {
  },
  methods: {
    initWatermark() {
-      userLoginInfo().then(res => {
-        const userInfo = res.data
-        activeWatermark(JSON.parse(this.panelInfo.watermarkInfo.settingContent), userInfo, 'preview-main-canvas-main', this.canvasId, this.panelInfo.watermarkOpen)
-      })
+      if (this.panelInfo.watermarkInfo) {
+        userLoginInfo().then(res => {
+          const userInfo = res.data
+          activeWatermark(this.panelInfo.watermarkInfo.settingContent, userInfo, 'preview-main-canvas-main', this.canvasId, this.panelInfo.watermarkOpen)
+        })
+      }
    },
    isMainCanvas() {
      return this.canvasId === 'canvas-main'
--- a/frontend/src/components/canvas/tools/watermark.js
+++ b/frontend/src/components/canvas/tools/watermark.js
@@ -1,50 +1,50 @@
-//动态创建水印元素的封装函数
+// 动态创建水印元素的封装函数

 export function watermark(settings, domId) {
  const watermarkDom = document.getElementById(domId)
-  //默认设置
-  let defaultSettings = {
+  // 默认设置
+  const defaultSettings = {
    watermark_txt: '',
-    watermark_x: 20, //水印起始位置x轴坐标
-    watermark_y: 20, //水印起始位置Y轴坐标
-    watermark_rows: 20, //水印行数
-    watermark_cols: 20, //水印列数
-    watermark_x_space: 100, //水印x轴间隔
-    watermark_y_space: 50, //水印y轴间隔
-    watermark_color: '#aaa', //水印字体颜色
-    watermark_alpha: 0.4, //水印透明度
-    watermark_fontsize: '15px', //水印字体大小
-    watermark_font: '微软雅黑', //水印字体
-    watermark_width: 210, //水印宽度
-    watermark_height: 80, //水印长度
-    watermark_angle: 20 //水印倾斜度数
+    watermark_x: 20, // 水印起始位置x轴坐标
+    watermark_y: 20, // 水印起始位置Y轴坐标
+    watermark_rows: 20, // 水印行数
+    watermark_cols: 20, // 水印列数
+    watermark_x_space: 100, // 水印x轴间隔
+    watermark_y_space: 50, // 水印y轴间隔
+    watermark_color: '#aaa', // 水印字体颜色
+    watermark_alpha: 0.4, // 水印透明度
+    watermark_fontsize: '15px', // 水印字体大小
+    watermark_font: '微软雅黑', // 水印字体
+    watermark_width: 210, // 水印宽度
+    watermark_height: 80, // 水印长度
+    watermark_angle: 20 // 水印倾斜度数
  }
-  //根据函数的入参调整设置
+  // 根据函数的入参调整设置
  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
      } else if (src[key]) defaultSettings[key] = src[key]
    }
  }
-  //创建虚拟节点对象，在该节点对象中可以放元素，最后只需在页面中添加该节点对象即可。可提高性能
-  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)) {
+  // 如果将水印列数设置为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)) {
    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)) {
+  // 如果将水印行数设置为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)) {
    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,11 +56,11 @@ 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))
-      //设置水印div倾斜显示
+      // 设置水印div倾斜显示
      mask_div.style.webkitTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
      mask_div.style.MozTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
      mask_div.style.msTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
@@ -72,7 +72,7 @@ export function watermark(settings, domId) {
      mask_div.style.top = y + 'px'
      mask_div.style.overflow = 'hidden'
      mask_div.style.zIndex = '9999'
-      //让水印不遮挡页面的点击事件
+      // 让水印不遮挡页面的点击事件
      mask_div.style.pointerEvents = 'none'
      mask_div.style.opacity = defaultSettings.watermark_alpha
      mask_div.style.fontSize = defaultSettings.watermark_fontsize
@@ -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,18 +105,18 @@ export function getNow() {
    }
  }

-  let time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute
+  const time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute
  return time
 }

 export function activeWatermark(watermarkForm, userLoginInfo, domId, canvasId, watermarkOpen) {
-  //清理历史水印
+  // 清理历史水印
  const historyWatermarkDom = document.getElementById('de-watermark-server')
  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
--- a/frontend/src/components/deDrag/index.vue
+++ b/frontend/src/components/deDrag/index.vue
@@ -65,7 +65,7 @@
        @mousedown.stop.prevent="handleDown(handlei, $event)"
        @touchstart.stop.prevent="handleTouchDown(handlei, $event)"
      >
-        <slot :name="handlei"/>
+        <slot :name="handlei" />
      </div>
      <div
        :id="componentCanvasId"
@@ -78,7 +78,7 @@
          class="svg-background"
          :icon-class="mainSlotSvgInner"
        />
-        <slot/>
+        <slot />
      </div>
    </div>
  </div>
--- a/frontend/src/components/deViewSelect/index.vue
+++ b/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 => {
--- a/frontend/src/views/link/view/index.vue
+++ b/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)

--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -161,7 +161,7 @@
                  />
                </span>
                <span v-if="data.nodeType === 'folder'">
-                  <svg-icon icon-class="scene"/>
+                  <svg-icon icon-class="scene" />
                </span>
                <span
                  :class="data.status"
@@ -198,7 +198,7 @@
                      <el-dropdown-item
                        :command="beforeClickEdit('folder', 'new', data, node)"
                      >
-                        <svg-icon icon-class="scene"/>
+                        <svg-icon icon-class="scene" />
                        <span style="margin-left: 5px">{{ $t('panel.groupAdd') }}</span>
                      </el-dropdown-item>
                      <el-dropdown-item
@@ -321,7 +321,7 @@
            :label="$t('commons.name')"
            prop="name"
          >
-            <el-input v-model="groupForm.name"/>
+            <el-input v-model="groupForm.name" />
          </el-form-item>
        </el-form>
        <div
@@ -332,8 +332,8 @@
            size="mini"
            @click="close()"
          >{{
-              $t('panel.cancel')
-            }}
+            $t('panel.cancel')
+          }}
          </el-button>
          <el-button
            type="primary"
@@ -409,8 +409,8 @@
            size="mini"
            @click="closeMoveGroup()"
          >{{
-              $t('dataset.cancel')
-            }}
+            $t('dataset.cancel')
+          }}
          </el-button>
          <el-button
            :disabled="groupMoveConfirmDisabled"
@@ -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' })
    },