feat: 数据大屏增加不缩放的预览模式
This commit is contained in:
parent
aed5f4ae78
commit
a81cdbb074
@ -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(() => {
|
||||||
|
|||||||
@ -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
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -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;
|
||||||
|
}
|
||||||
|
|||||||
@ -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'
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user