refactor: 画布样式逻辑调整

core/core-backend/src/main/java/io/dataease/visualization/server/DataVisualizationServer.java

@@ -117,6 +117,11 @@ public class DataVisualizationServer implements DataVisualizationApi {
         DataVisualizationInfo visualizationInfo = new DataVisualizationInfo();
         BeanUtils.copyBean(visualizationInfo, request);
         visualizationInfo.setNodeType(request.getNodeType() == null ? DataVisualizationConstants.NODE_TYPE.LEAF : request.getNodeType());
+        if(request.getSelfWatermarkStatus() != null && request.getSelfWatermarkStatus()){
+            visualizationInfo.setSelfWatermarkStatus(1);
+        }else{
+            visualizationInfo.setSelfWatermarkStatus(0);
+        }
         Long newDvId = coreVisualizationManage.innerSave(visualizationInfo);
         //保存视图信
         chartDataManage.saveChartViewFromVisualization(request.getComponentData(), newDvId, request.getCanvasViewInfo());
@@ -132,6 +137,11 @@ public class DataVisualizationServer implements DataVisualizationApi {
         }
         DataVisualizationInfo visualizationInfo = new DataVisualizationInfo();
         BeanUtils.copyBean(visualizationInfo, request);
+        if(request.getSelfWatermarkStatus() != null && request.getSelfWatermarkStatus()){
+            visualizationInfo.setSelfWatermarkStatus(1);
+        }else{
+            visualizationInfo.setSelfWatermarkStatus(0);
+        }
         if(DataVisualizationConstants.RESOURCE_OPT_TYPE.COPY.equals(request.getOptType())){
             // 复制更新 新建权限插入
             visualizationInfoMapper.deleteById(dvId);

core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue

@@ -15,7 +15,7 @@ import MarkLine from './MarkLine.vue'
 import Area from './Area.vue'
 import eventBus from '@/utils/eventBus'
 import { changeStyleWithScale } from '@/utils/translate'
-import { ref, onMounted, computed, toRefs, nextTick, onBeforeUnmount } from 'vue'
+import { ref, onMounted, computed, toRefs, nextTick, onBeforeUnmount, watch } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
 import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/contextmenu'
@@ -39,6 +39,8 @@ import { adaptCurThemeCommonStyle } from '@/utils/canvasStyle'
 import LinkageSet from '@/components/visualization/LinkageSet.vue'
 import PointShadow from '@/components/data-visualization/canvas/PointShadow.vue'
 import DragInfo from '@/components/visualization/common/DragInfo.vue'
+import { activeWatermark } from '@/components/watermark/watermark'
+import { personInfoApi } from '@/api/user'
 const snapshotStore = snapshotStoreWithOut()
 const dvMainStore = dvMainStoreWithOut()
 const composeStore = composeStoreWithOut()
@@ -155,6 +157,7 @@ const props = defineProps({
     default: true
   }
 })
+const userInfo = ref(null)
 
 const {
   baseWidth,
@@ -192,6 +195,51 @@ const linkJumpRef = ref(null)
 const linkageRef = ref(null)
 const mainDomId = ref('editor-' + canvasId.value)
 
+watch(
+  () => dvInfo.value,
+  () => {
+    initWatermark()
+  },
+  { deep: true }
+)
+
+watch(
+  () => canvasStyleData.value,
+  () => {
+    initWatermark()
+  },
+  { deep: true }
+)
+
+const initWatermark = (waterDomId = 'editor-canvas-main') => {
+  if (dvInfo.value.watermarkInfo && isMainCanvas(canvasId.value)) {
+    const scale = dashboardActive.value ? 1 : curScale.value
+    if (userInfo.value) {
+      activeWatermark(
+        dvInfo.value.watermarkInfo.settingContent,
+        userInfo.value,
+        waterDomId,
+        canvasId.value,
+        dvInfo.value.selfWatermarkStatus,
+        scale
+      )
+    } else {
+      const method = personInfoApi
+      method().then(res => {
+        userInfo.value = res.data
+        activeWatermark(
+          dvInfo.value.watermarkInfo.settingContent,
+          userInfo.value,
+          waterDomId,
+          canvasId.value,
+          dvInfo.value.selfWatermarkStatus,
+          scale
+        )
+      })
+    }
+  }
+}
+
 const dragInfoShow = computed(() => {
   return (
     dvInfo.value.type === 'dashboard' &&
@@ -942,6 +990,9 @@ const cellInit = () => {
 }
 
 const canvasSizeInit = () => {
+  if (isMainCanvas(canvasId.value)) {
+    initWatermark()
+  }
   cellInit()
   reCalcCellWidth()
 }
@@ -1233,6 +1284,7 @@ const markLineShow = computed(() => isMainCanvas(canvasId.value))
 onMounted(() => {
   if (isMainCanvas(canvasId.value)) {
     initSnapshotTimer()
+    initWatermark()
   }
   // 获取编辑器元素
   composeStore.getEditor(canvasId.value)

core/core-frontend/src/components/data-visualization/canvas/DePreview.vue

@@ -188,7 +188,8 @@ const initWatermark = (waterDomId = 'preview-canvas-main') => {
         userInfo.value,
         waterDomId,
         canvasId.value,
-        dvInfo.value.watermarkOpen
+        dvInfo.value.selfWatermarkStatus,
+        scaleWidth.value / 100
       )
     } else {
       const method = personInfoApi
@@ -199,7 +200,8 @@ const initWatermark = (waterDomId = 'preview-canvas-main') => {
           userInfo.value,
           waterDomId,
           canvasId.value,
-          dvInfo.value.watermarkOpen
+          dvInfo.value.selfWatermarkStatus,
+          scaleWidth.value / 100
         )
       })
     }
@@ -213,8 +215,8 @@ onMounted(() => {
   const erd = elementResizeDetectorMaker()
   erd.listenTo(document.getElementById(domId), () => {
     restore()
+    initWatermark()
   })
-  initWatermark()
 })
 
 onBeforeUnmount(() => {

core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue

@@ -14,6 +14,16 @@
       @change="reUpload"
     />
     <el-form label-position="top" style="width: 100%; margin-bottom: 16px">
+      <el-form-item class="form-item" :class="'form-item-' + themes" v-if="showWatermarkSetting">
+        <el-checkbox
+          size="small"
+          :effect="themes"
+          v-model="dvInfo.selfWatermarkStatus"
+          @change="onBackgroundChange"
+        >
+          水印
+        </el-checkbox>
+      </el-form-item>
       <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
         <el-checkbox
           size="small"
@@ -108,7 +118,7 @@
 
 <script setup lang="ts">
 import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
-import { onMounted, reactive, ref, watch } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { beforeUploadCheck, uploadFileResult } from '@/api/staticResource'
@@ -123,7 +133,7 @@ const files = ref(null)
 const maxImageSize = 15000000
 
 const dvMainStore = dvMainStoreWithOut()
-const { canvasStyleData } = storeToRefs(dvMainStore)
+const { canvasStyleData, dvInfo } = storeToRefs(dvMainStore)
 
 withDefaults(
   defineProps<{
@@ -145,6 +155,14 @@ const state = reactive({
   predefineColors: COLOR_PANEL
 })
 
+const showWatermarkSetting = computed(() => {
+  return (
+    dvInfo.value.watermarkInfo &&
+    dvInfo.value.watermarkInfo?.settingContent?.enable &&
+    dvInfo.value.watermarkInfo?.settingContent?.enablePanelCustom
+  )
+})
+
 const goFile = () => {
   files.value.click()
 }

core/core-frontend/src/components/watermark/watermark.ts

@@ -145,7 +145,14 @@ export function getNow() {
   return time
 }
 
-export function activeWatermark(watermarkForm, userLoginInfo, domId, canvasId, watermarkOpen) {
+export function activeWatermark(
+  watermarkForm,
+  userLoginInfo,
+  domId,
+  canvasId,
+  selfWatermarkStatus,
+  scale = 1
+) {
   // 清理历史水印
   const historyWatermarkDom = document.getElementById('de-watermark-server')
   if (historyWatermarkDom) {
@@ -155,7 +162,7 @@ export function activeWatermark(watermarkForm, userLoginInfo, domId, canvasId, w
     !(
       canvasId === 'canvas-main' &&
       ((watermarkForm.enable && !watermarkForm.enablePanelCustom) ||
-        (watermarkForm.enable && watermarkOpen))
+        (watermarkForm.enable && selfWatermarkStatus))
     )
   ) {
     return
@@ -183,11 +190,11 @@ export function activeWatermark(watermarkForm, userLoginInfo, domId, canvasId, w
   }
   const settings = {
     watermark_txt: watermark_txt,
-    watermark_width: watermark_width,
+    watermark_width: watermark_width * scale,
     watermark_color: watermarkForm.watermark_color,
-    watermark_x_space: watermarkForm.watermark_x_space,
+    watermark_x_space: watermarkForm.watermark_x_space * scale,
-    watermark_y_space: watermarkForm.watermark_y_space,
+    watermark_y_space: watermarkForm.watermark_y_space * scale,
-    watermark_fontsize: watermarkForm.watermark_fontsize + 'px'
+    watermark_fontsize: watermarkForm.watermark_fontsize * scale + 'px'
   }
   watermark(settings, domId)
 }

core/core-frontend/src/store/modules/data-visualization/dvMain.ts

@@ -58,6 +58,7 @@ export const dvMainStore = defineStore('dataVisualization', {
         pid: null,
         status: null,
         selfWatermarkStatus: null,
+        watermarkInfo: {},
         type: null
       },
       // 图表信息
@@ -861,8 +862,8 @@ export const dvMainStore = defineStore('dataVisualization', {
         pid: null,
         status: null,
         selfWatermarkStatus: null,
-        type: null,
+        watermarkInfo: {},
-        watermarkInfo: null
+        type: null
       }
     },
     setViewDataDetails(viewId, dataInfo) {
@@ -899,7 +900,8 @@ export const dvMainStore = defineStore('dataVisualization', {
         pid: pid,
         type: dvType,
         status: 1,
-        selfWatermarkStatus: 0
+        selfWatermarkStatus: true,
+        watermarkInfo: {}
       }
       const canvasStyleDataNew =
         dvType === 'dashboard'
@@ -921,6 +923,7 @@ export const dvMainStore = defineStore('dataVisualization', {
         pid: null,
         status: null,
         selfWatermarkStatus: null,
+        watermarkInfo: {},
         type: null
       }
       this.canvasStyleData = { ...deepCopy(DEFAULT_CANVAS_STYLE_DATA_DARK), backgroundColor: null }

core/core-frontend/src/utils/canvasUtils.ts

@@ -90,7 +90,7 @@ export function initCanvasDataPrepare(dvId, busiFlag, callBack) {
       name: canvasInfo.name,
       pid: canvasInfo.pid,
       status: canvasInfo.status,
-      watermarkOpen: canvasInfo.selfWatermarkStatus,
+      selfWatermarkStatus: canvasInfo.selfWatermarkStatus,
       type: canvasInfo.type,
       creatorName: canvasInfo.creatorName,
       updateName: canvasInfo.updateName,

core/core-frontend/src/views/canvas/DeCanvas.vue

@@ -11,6 +11,8 @@ import { getCanvasStyle, syncShapeItemStyle } from '@/utils/style'
 import { adaptCurThemeCommonStyle } from '@/utils/canvasStyle'
 import CanvasCore from '@/components/data-visualization/canvas/CanvasCore.vue'
 import { isMainCanvas } from '@/utils/canvasUtils'
+import { activeWatermark } from '@/components/watermark/watermark'
+import { personInfoApi } from '@/api/user'
 
 // change-begin
 const props = defineProps({
@@ -42,10 +44,11 @@ const domId = ref('de-canvas-' + canvasId.value)
 
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
-const { pcMatrixCount, curOriginThemes } = storeToRefs(dvMainStore)
+const { pcMatrixCount, curOriginThemes, dvInfo } = storeToRefs(dvMainStore)
 const canvasOut = ref(null)
 const canvasInner = ref(null)
 const canvasInitStatus = ref(false)
+const userInfo = ref(null)
 
 const state = reactive({
   screenWidth: 1920,
@@ -59,6 +62,7 @@ const renderState = ref(false) // 仪表板默认
 const baseMarginLeft = ref(0)
 const baseMarginTop = ref(0)
 const cyGridster = ref(null)
+const editDomId = ref('edit-' + canvasId.value)
 
 const editStyle = computed(() => {
   if (canvasStyleData.value && isMainCanvas(canvasId.value)) {
@@ -187,6 +191,32 @@ const moveOutFromTab = component => {
   }, 500)
 }
 
+const initWatermark = (waterDomId = 'edit-canvas-main') => {
+  // if (dvInfo.value.watermarkInfo && isMainCanvas(canvasId.value)) {
+  //   if (userInfo.value) {
+  //     activeWatermark(
+  //       dvInfo.value.watermarkInfo.settingContent,
+  //       userInfo.value,
+  //       waterDomId,
+  //       canvasId.value,
+  //       dvInfo.value.selfWatermarkStatus
+  //     )
+  //   } else {
+  //     const method = personInfoApi
+  //     method().then(res => {
+  //       userInfo.value = res.data
+  //       activeWatermark(
+  //         dvInfo.value.watermarkInfo.settingContent,
+  //         userInfo.value,
+  //         waterDomId,
+  //         canvasId.value,
+  //         dvInfo.value.selfWatermarkStatus
+  //       )
+  //     })
+  //   }
+  // }
+}
+
 // 全局监听按键事件
 onMounted(() => {
   window.addEventListener('resize', canvasSizeInit)
@@ -242,7 +272,7 @@ defineExpose({
 </script>
 
 <template>
-  <div ref="canvasOut" class="content" :class="{ 'render-active': renderState }">
+  <div ref="canvasOut" :id="editDomId" class="content" :class="{ 'render-active': renderState }">
     <canvas-opt-bar
       :canvas-style-data="canvasStyleData"
       :component-data="componentData"

core/core-frontend/src/views/visualized/data/dataset/index.vue

@@ -86,7 +86,7 @@ const resourceCreate = (pid, name) => {
     pid: pid,
     type: curCanvasType.value,
     status: 1,
-    selfWatermarkStatus: 0
+    selfWatermarkStatus: true
   }
   const canvasStyleDataNew =
     curCanvasType.value === 'dashboard'

core/core-frontend/src/views/watermark/ParamsTips.vue

@@ -14,7 +14,9 @@
           <span>${ip}-IP</span><br />
         </div>
       </template>
-      <span><i class="el-icon-warning" /></span>
+      <span
+        ><el-icon><InfoFilled /></el-icon
+      ></span>
     </el-tooltip>
   </div>
 </template>
@@ -29,5 +31,6 @@ const { t } = useI18n()
   position: absolute;
   right: 10px;
   z-index: 10;
+  top: 5px;
 }
 </style>

core/core-frontend/src/views/watermark/index.vue

@@ -113,6 +113,7 @@ import { ElMessage } from 'element-plus-secondary/es'
 import { personInfoApi } from '@/api/user'
 import { getNow, watermark } from '@/components/watermark/watermark'
 import { useI18n } from '@/hooks/web/useI18n'
+import ParamsTips from '@/views/watermark/ParamsTips.vue'
 const { t } = useI18n()
 
 const state = reactive({

sdk/api/api-base/src/main/java/io/dataease/api/visualization/vo/DataVisualizationVO.java

@@ -74,7 +74,7 @@ public class DataVisualizationVO implements Serializable {
     /**
      * 是否单独打开水印 0-关闭 1-开启
      */
-    private Integer selfWatermarkStatus;
+    private Boolean selfWatermarkStatus;
 
     /**
      * 排序