refactor(仪表板): 仪表板编辑时支持不同的缩放模式

core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue

@@ -55,7 +55,7 @@
       :class="'form-item-' + themes"
       :label="t('visualization.dashboard_adaptor')"
     >
-      <el-radio-group v-model="canvasStyleData.dashboardAdaptor" @change="themeChange">
+      <el-radio-group v-model="canvasStyleData.dashboardAdaptor" @change="onKeepSizeChange">
         <el-radio :effect="themes" label="keepHeightAndWidth">{{
           t('visualization.scale_keep_height_and_width')
         }}</el-radio>
@@ -289,6 +289,7 @@ import { ElFormItem, ElIcon, ElSpace } from 'element-plus-secondary'
 import Icon from '@/components/icon-custom/src/Icon.vue'
 import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
 import { isDesktop } from '@/utils/ModelUtil'
+import eventBus from '@/utils/eventBus'
 const appearanceStore = useAppearanceStoreWithOut()
 const isDesktopFlag = isDesktop()
 const snapshotStore = snapshotStoreWithOut()
@@ -332,6 +333,11 @@ const fontFamilyChange = () => {
   snapshotStore.recordSnapshotCache('renderChart')
 }
 
+const onKeepSizeChange = () => {
+  eventBus.emit('event-canvas-size-init')
+  snapshotStore.recordSnapshotCache('renderChart')
+}
+
 const themeChange = (modifyName?) => {
   if (modifyName === 'themeColor') {
     // 主题变更

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

@@ -342,7 +342,7 @@ const curGap = computed(() => {
 const baseCellInfo = computed(() => {
   return {
     baseWidth: baseWidth.value,
-    baseHeight: baseHeight.value,
+    baseHeight: dashboardScaleWithWidth.value ? baseWidth.value * 1.6 : baseHeight.value,
     curGap: curGap.value
   }
 })
@@ -1113,11 +1113,18 @@ const clearInfoBox = e => {
   infoBox.value = {}
 }
 
+const dashboardScaleWithWidth = computed(() => {
+  return isDashboard() && canvasStyleData.value?.dashboardAdaptor === 'withWidth'
+})
 const cellInit = () => {
   // 此处向下取整 保留1位小数,why: 矩阵模式计算 x,y时 会使用 style.left/cellWidth style.top/cellWidth
   // 当初始状态细微的差距(主要是减少)都会导致 x，y 减少一个矩阵大小造成偏移,
   cellWidth.value = Math.floor((baseWidth.value + baseMarginLeft.value) * 1000) / 1000
-  cellHeight.value = Math.floor((baseHeight.value + baseMarginTop.value) * 1000) / 1000
+  if (dashboardScaleWithWidth.value) {
+    cellHeight.value = cellWidth.value * 1.6
+  } else {
+    cellHeight.value = Math.floor((baseHeight.value + baseMarginTop.value) * 1000) / 1000
+  }
 }
 
 const canvasSizeInit = () => {
@@ -1583,7 +1590,7 @@ defineExpose({
     ></de-grid-screen>
     <drag-shadow
       v-if="infoBox && infoBox.moveItem && editMode !== 'preview'"
-      :base-height="baseHeight"
+      :base-height="dashboardScaleWithWidth ? baseWidth * 1.6 : baseHeight"
       :base-width="baseWidth"
       :cur-gap="curGap"
       :element="infoBox.moveItem"

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

@@ -245,13 +245,15 @@ const resetLayout = () => {
       } else {
         scaleHeightPoint.value = (canvasHeight * 100) / canvasStyleData.value.height
       }
-      scaleMin.value = isDashboard()
-        ? Math.floor(Math.min(scaleWidthPoint.value, scaleHeightPoint.value))
-        : scaleWidthPoint.value
+      scaleMin.value =
+        isDashboard() && !dashboardScaleWithWidth.value
+          ? Math.floor(Math.min(scaleWidthPoint.value, scaleHeightPoint.value))
+          : scaleWidthPoint.value
       if (dashboardActive.value) {
         cellWidth.value = canvasWidth / pcMatrixCount.value.x
+        // 如果是保持比例 则宽高相同
         if (dashboardScaleWithWidth.value) {
-          cellHeight.value = (canvasHeight * 0.7) / cellWidth.value
+          cellHeight.value = cellWidth.value * 1.6
         } else {
           cellHeight.value = canvasHeight / pcMatrixCount.value.y
         }

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

@@ -258,6 +258,7 @@ onMounted(() => {
   canvasInit()
   if (isMainCanvas(canvasId.value)) {
     eventBus.on('handleNew', handleNewFromCanvasMain)
+    eventBus.on('event-canvas-size-init', canvasSizeInit)
   }
   eventBus.on('moveOutFromTab-' + canvasId.value, moveOutFromTab)
   eventBus.on('matrix-canvasInit', canvasInit)
@@ -266,6 +267,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   if (isMainCanvas(canvasId.value)) {
     eventBus.off('handleNew', handleNewFromCanvasMain)
+    eventBus.off('event-canvas-size-init', canvasSizeInit)
   }
   eventBus.off('moveOutFromTab-' + canvasId.value, moveOutFromTab)
   eventBus.off('matrix-canvasInit', canvasInit)