refactor(仪表板): 编辑界面组件改为跟随窗口大小缩放的模式 #10397

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

@@ -279,7 +279,7 @@ const { emitter } = useEmitt()
 
 const curScale = computed(() => {
   if (dashboardActive.value) {
-    return (canvasStyleData.value.scale * 1.5) / 100
+    return (canvasStyleData.value.scale * 1.2) / 100
   } else {
     return canvasStyleData.value.scale / 100
   }
@@ -287,7 +287,7 @@ const curScale = computed(() => {
 
 const curBaseScale = computed(() => {
   if (dashboardActive.value) {
-    return (dvMainStore.canvasStyleData.scale * 1.5) / 100
+    return (dvMainStore.canvasStyleData.scale * 1.2) / 100
   } else {
     return dvMainStore.canvasStyleData.scale / 100
   }

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

@@ -234,6 +234,9 @@ export const dvMainStore = defineStore('dataVisualization', {
         style.component['seniorStyleSetting'] || deepCopy(SENIOR_STYLE_SETTING_LIGHT)
       this.canvasStyleData = style
     },
+    setCanvasStyleScale(value) {
+      this.canvasStyleData.scale = value
+    },
     setCanvasViewInfo(canvasViewInfo) {
       this.canvasViewInfo = canvasViewInfo
     },

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

@@ -520,6 +520,10 @@ export async function decompressionPre(params, callBack) {
   callBack(deTemplateData)
 }
 
+export function isDashboard() {
+  return dvInfo.value.type === 'dashboard'
+}
+
 export function trackBarStyleCheck(element, trackbarStyle, _scale, trackMenuNumber) {
   const { width, height } = element.style
   const widthReal = width

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

@@ -10,7 +10,7 @@ import elementResizeDetectorMaker from 'element-resize-detector'
 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 { isMainCanvas, isDashboard } from '@/utils/canvasUtils'
 
 // change-begin
 const props = defineProps({
@@ -34,9 +34,15 @@ const props = defineProps({
   canvasActive: {
     type: Boolean,
     default: true
+  },
+  outerScale: {
+    type: Number,
+    required: false,
+    default: 1
   }
 })
-const { canvasStyleData, componentData, canvasViewInfo, canvasId, canvasActive } = toRefs(props)
+const { canvasStyleData, componentData, canvasViewInfo, canvasId, canvasActive, outerScale } =
+  toRefs(props)
 const domId = ref('de-canvas-' + canvasId.value)
 // change-end
 
@@ -46,6 +52,9 @@ const { pcMatrixCount, curOriginThemes } = storeToRefs(dvMainStore)
 const canvasOut = ref(null)
 const canvasInner = ref(null)
 const canvasInitStatus = ref(false)
+const scaleWidth = ref(100)
+const scaleHeight = ref(100)
+const scaleMin = ref(100)
 
 const state = reactive({
   screenWidth: 1920,
@@ -151,11 +160,29 @@ const canvasSizeInit = () => {
       dashboardCanvasSizeInit()
       nextTick(() => {
         cyGridster.value.canvasSizeInit() //在适当的时候初始化布局组件
+        // 缩放比例变化
+        scaleInit()
       })
     }
   })
 }
 
+const scaleInit = () => {
+  nextTick(() => {
+    if (canvasOut.value) {
+      //div容器获取tableBox.value.clientWidth
+      let canvasWidth = canvasOut.value.clientWidth
+      let canvasHeight = canvasOut.value.clientHeight
+      scaleWidth.value = Math.floor((canvasWidth * 100) / canvasStyleData.value.width)
+      scaleHeight.value = Math.floor((canvasHeight * 100) / canvasStyleData.value.height)
+      scaleMin.value = Math.min(scaleWidth.value, scaleHeight.value)
+      if (isDashboard() && isMainCanvas(canvasId.value)) {
+        dvMainStore.setCanvasStyleScale(scaleMin.value)
+      }
+    }
+  })
+}
+
 const dashboardCanvasSizeInit = () => {
   //div容器获取tableBox.value.clientWidth
   state.screenWidth = canvasOut.value.clientWidth - 4