refactor: 画布样式逻辑调整

2024-01-11 15:09:17 +08:00 · 2024-01-11 15:09:17 +08:00 · 1a0083d285
commit 1a0083d285
parent 4953bb5d3c
12 changed files with 147 additions and 21 deletions
--- a/core/core-backend/src/main/java/io/dataease/visualization/server/DataVisualizationServer.java
+++ b/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);
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/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)
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/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(() => {
--- a/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
+++ b/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()
 }
--- a/core/core-frontend/src/components/watermark/watermark.ts
+++ b/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_y_space: watermarkForm.watermark_y_space,
-    watermark_fontsize: watermarkForm.watermark_fontsize + 'px'
+    watermark_x_space: watermarkForm.watermark_x_space * scale,
+    watermark_y_space: watermarkForm.watermark_y_space * scale,
+    watermark_fontsize: watermarkForm.watermark_fontsize * scale + 'px'
  }
  watermark(settings, domId)
 }
--- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
+++ b/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: null
+        watermarkInfo: {},
+        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 }
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/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,
--- a/core/core-frontend/src/views/canvas/DeCanvas.vue
+++ b/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"
--- a/core/core-frontend/src/views/visualized/data/dataset/index.vue
+++ b/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'
--- a/core/core-frontend/src/views/watermark/ParamsTips.vue
+++ b/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>
--- a/core/core-frontend/src/views/watermark/index.vue
+++ b/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({
--- a/sdk/api/api-base/src/main/java/io/dataease/api/visualization/vo/DataVisualizationVO.java
+++ b/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;

    /**
     * 排序