Merge pull request #10706 from dataease/pr@dev-v2@refactor_scale

refactor(仪表板): 优化仪表板缩放模式,修改为宽度和高度缩放的较小值,解决仪表板屏幕浏览器高度尺寸变小时,视图高度自适应导致视图…
This commit is contained in:
王嘉豪 2024-07-02 14:54:56 +08:00 committed by GitHub
commit def454be25
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -80,6 +80,8 @@ const {
} = toRefs(props) } = toRefs(props)
const domId = 'preview-' + canvasId.value const domId = 'preview-' + canvasId.value
const scaleWidth = ref(100) const scaleWidth = ref(100)
const scaleHeight = ref(100)
const scaleMin = ref(100)
const previewCanvas = ref(null) const previewCanvas = ref(null)
const cellWidth = ref(10) const cellWidth = ref(10)
const cellHeight = ref(10) const cellHeight = ref(10)
@ -103,7 +105,7 @@ const canvasStyle = computed(() => {
? downloadStatus.value ? downloadStatus.value
? getDownloadStatusMainHeight() ? getDownloadStatusMainHeight()
: '100%' : '100%'
: changeStyleWithScale(canvasStyleData.value?.height, scaleWidth.value) + 'px' : changeStyleWithScale(canvasStyleData.value?.height, scaleMin.value) + 'px'
} }
} }
if (!dashboardActive.value) { if (!dashboardActive.value) {
@ -150,18 +152,16 @@ const resetLayout = () => {
let canvasWidth = previewCanvas.value.clientWidth let canvasWidth = previewCanvas.value.clientWidth
let canvasHeight = previewCanvas.value.clientHeight let canvasHeight = previewCanvas.value.clientHeight
scaleWidth.value = Math.floor((canvasWidth * 100) / canvasStyleData.value.width) 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 (dashboardActive.value) { if (dashboardActive.value) {
cellWidth.value = canvasWidth / pcMatrixCount.value.x cellWidth.value = canvasWidth / pcMatrixCount.value.x
cellHeight.value = canvasHeight / pcMatrixCount.value.y cellHeight.value = canvasHeight / pcMatrixCount.value.y
scaleWidth.value = isMainCanvas(canvasId.value) scaleMin.value = isMainCanvas(canvasId.value)
? scaleWidth.value * 1.2 ? scaleMin.value * 1.2
: outerScale.value * 100 : outerScale.value * 100
} else { } else {
changeRefComponentsSizeWithScale( changeRefComponentsSizeWithScale(componentData.value, canvasStyleData.value, scaleMin.value)
componentData.value,
canvasStyleData.value,
scaleWidth.value
)
} }
} }
}) })
@ -216,7 +216,7 @@ const initWatermark = (waterDomId = 'preview-canvas-main') => {
waterDomId, waterDomId,
canvasId.value, canvasId.value,
dvInfo.value.selfWatermarkStatus, dvInfo.value.selfWatermarkStatus,
scaleWidth.value / 100 scaleMin.value / 100
) )
} else { } else {
const method = personInfoApi const method = personInfoApi
@ -229,7 +229,7 @@ const initWatermark = (waterDomId = 'preview-canvas-main') => {
waterDomId, waterDomId,
canvasId.value, canvasId.value,
dvInfo.value.selfWatermarkStatus, dvInfo.value.selfWatermarkStatus,
scaleWidth.value / 100 scaleMin.value / 100
) )
} }
}) })
@ -339,7 +339,7 @@ defineExpose({
:style="getShapeItemShowStyle(item)" :style="getShapeItemShowStyle(item)"
:show-position="showPosition" :show-position="showPosition"
:search-count="searchCount" :search-count="searchCount"
:scale="mobileInPc ? 100 : scaleWidth" :scale="mobileInPc ? 100 : scaleMin"
:is-selector="props.isSelector" :is-selector="props.isSelector"
@userViewEnlargeOpen="userViewEnlargeOpen($event, item)" @userViewEnlargeOpen="userViewEnlargeOpen($event, item)"
@onPointClick="onPointClick" @onPointClick="onPointClick"