feat: 数据大屏增加不缩放的预览模式

This commit is contained in:
wangjiahao 2024-11-22 14:51:31 +08:00
parent aed5f4ae78
commit a81cdbb074
6 changed files with 41 additions and 11 deletions

View File

@ -24,7 +24,8 @@ const canvasAttrActiveNames = ref(['size', 'baseSetting', 'background', 'color']
const screenAdaptorList = [
{ label: '宽度优先', value: 'widthFirst' },
{ label: '高度优先', value: 'heightFirst' },
{ label: '铺满全屏', value: 'full' }
{ label: '铺满全屏', value: 'full' },
{ label: '不缩放', value: 'keep' }
]
const init = () => {
nextTick(() => {

View File

@ -141,9 +141,12 @@ const canvasStyle = computed(() => {
style['overflowY'] = 'hidden !important'
}
if (canvasStyleData.value && canvasStyleData.value.width && isMainCanvas(canvasId.value)) {
style = {
...getCanvasStyle(canvasStyleData.value),
height: dashboardActive.value
style = getCanvasStyle(canvasStyleData.value)
if (canvasStyleData.value?.screenAdaptor === 'keep') {
style['height'] = canvasStyleData.value?.height + 'px'
style['width'] = canvasStyleData.value?.width + 'px'
} else {
style['height'] = dashboardActive.value
? downloadStatus.value
? getDownloadStatusMainHeight()
: '100%'
@ -151,12 +154,12 @@ const canvasStyle = computed(() => {
canvasStyleData.value?.screenAdaptor === 'widthFirst'
? changeStyleWithScale(canvasStyleData.value?.height, scaleMin.value) + 'px'
: '100%'
}
style['width'] =
!dashboardActive.value && canvasStyleData.value?.screenAdaptor === 'heightFirst'
? changeStyleWithScale(canvasStyleData.value?.width, scaleHeightPoint.value) + 'px'
: '100%'
}
}
return style
})

View File

@ -590,6 +590,13 @@ strong {
overflow-y: auto;
}
.preview-content-inner-size-keep {
width: 100%;
height: auto;
overflow-x: auto;
overflow-y: auto;
}
.preview-content-inner-height-first {
width: auto;
height: 100%;
@ -607,3 +614,7 @@ strong {
.ed-message .ed-message__closeBtn:hover {
background: #ebebebe6 !important;
}
.canvas_keep-size {
overflow-x: auto!important;
}

View File

@ -52,6 +52,8 @@ const contentInnerClass = computed(() => {
return 'preview-content-inner-height-first'
} else if (props.canvasStylePreview.screenAdaptor === 'full') {
return 'preview-content-inner-full'
} else if (props.canvasStylePreview.screenAdaptor === 'keep') {
return 'preview-content-inner-size-keep'
} else {
return 'preview-content-inner-width-first'
}

View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { nextTick, onMounted, reactive, ref, watch } from 'vue'
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
import router from '@/router'
import { useEmitt } from '@/hooks/web/useEmitt'
@ -188,13 +188,17 @@ onMounted(async () => {
dvMainStore.setPublicLinkStatus(props.publicLinkStatus)
})
const dataVKeepSize = computed(() => {
return state.canvasStylePreview?.screenAdaptor === 'keep'
})
defineExpose({
loadCanvasDataAsync
})
</script>
<template>
<div class="content" ref="previewCanvasContainer">
<div class="content" :class="{ 'canvas_keep-size': dataVKeepSize }" ref="previewCanvasContainer">
<de-preview
ref="dvPreview"
v-if="state.canvasStylePreview && state.initState"

View File

@ -170,6 +170,10 @@ const resourceNodeClick = data => {
loadCanvasData(data.id, data.weight, data.ext)
}
const dataVKeepSize = computed(() => {
return state.canvasStylePreview?.screenAdaptor === 'keep'
})
const state = reactive({
canvasDataPreview: null,
canvasStylePreview: null,
@ -276,7 +280,12 @@ onBeforeMount(() => {
:dv-info="state.dvInfo"
></multiplex-preview-show>
</div>
<div v-if="showPosition === 'preview'" ref="previewCanvasContainer" class="content">
<div
v-if="showPosition === 'preview'"
:class="{ 'canvas_keep-size': dataVKeepSize }"
ref="previewCanvasContainer"
class="content"
>
<dv-preview
ref="dvPreviewRef"
v-if="state.canvasStylePreview && dataInitState"