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 = [ const screenAdaptorList = [
{ label: '宽度优先', value: 'widthFirst' }, { label: '宽度优先', value: 'widthFirst' },
{ label: '高度优先', value: 'heightFirst' }, { label: '高度优先', value: 'heightFirst' },
{ label: '铺满全屏', value: 'full' } { label: '铺满全屏', value: 'full' },
{ label: '不缩放', value: 'keep' }
] ]
const init = () => { const init = () => {
nextTick(() => { nextTick(() => {

View File

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

View File

@ -590,6 +590,13 @@ strong {
overflow-y: auto; overflow-y: auto;
} }
.preview-content-inner-size-keep {
width: 100%;
height: auto;
overflow-x: auto;
overflow-y: auto;
}
.preview-content-inner-height-first { .preview-content-inner-height-first {
width: auto; width: auto;
height: 100%; height: 100%;
@ -607,3 +614,7 @@ strong {
.ed-message .ed-message__closeBtn:hover { .ed-message .ed-message__closeBtn:hover {
background: #ebebebe6 !important; 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' return 'preview-content-inner-height-first'
} else if (props.canvasStylePreview.screenAdaptor === 'full') { } else if (props.canvasStylePreview.screenAdaptor === 'full') {
return 'preview-content-inner-full' return 'preview-content-inner-full'
} else if (props.canvasStylePreview.screenAdaptor === 'keep') {
return 'preview-content-inner-size-keep'
} else { } else {
return 'preview-content-inner-width-first' return 'preview-content-inner-width-first'
} }

View File

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

View File

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