diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue index 2217027e66..c5fa8c2241 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue +++ b/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 } diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts index e2c48289c9..7817b07be1 100644 --- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts +++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts @@ -236,6 +236,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 }, diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index 1b163807b7..3fb905ba3a 100644 --- a/core/core-frontend/src/utils/canvasUtils.ts +++ b/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 diff --git a/core/core-frontend/src/views/canvas/DeCanvas.vue b/core/core-frontend/src/views/canvas/DeCanvas.vue index 385571f060..9d476d0ba9 100644 --- a/core/core-frontend/src/views/canvas/DeCanvas.vue +++ b/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