Merge pull request #13078 from dataease/pr@dev-v2@refactor_mobile-refresh

fix(图表): 修复部分图片刷新无效问题
This commit is contained in:
王嘉豪 2024-11-03 15:18:35 +08:00 committed by GitHub
commit 6f94128c51
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 57 additions and 19 deletions

View File

@ -29,8 +29,15 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho
import { deepCopy } from '@/utils/utils'
import { ElMessage } from 'element-plus-secondary'
const dvMainStore = dvMainStoreWithOut()
const { curBatchOptComponents, dvInfo, canvasStyleData, componentData, canvasViewInfo, appData } =
storeToRefs(dvMainStore)
const {
inMobile,
curBatchOptComponents,
dvInfo,
canvasStyleData,
componentData,
canvasViewInfo,
appData
} = storeToRefs(dvMainStore)
const snapshotStore = snapshotStoreWithOut()
export function chartTransStr2Object(targetIn, copy) {
@ -262,15 +269,19 @@ export function refreshOtherComponent(dvId, busiFlag) {
for (let i = 0; i < componentData.value.length; i++) {
const component = componentData.value[i]
if (refreshIdList.includes(component.id) && canvasDataResultMap[component.id]) {
const { top, left, height, width, fontSize } = componentData.value[i].style
canvasDataResultMap[component.id].style.top = top
canvasDataResultMap[component.id].style.left = left
canvasDataResultMap[component.id].style.height = height
canvasDataResultMap[component.id].style.width = width
if (fontSize) {
canvasDataResultMap[component.id].style.fontSize = fontSize
if (inMobile.value) {
componentData.value[i].propValue = canvasDataResultMap[component.id].mPropValue
} else {
const { top, left, height, width, fontSize } = componentData.value[i].style
canvasDataResultMap[component.id].style.top = top
canvasDataResultMap[component.id].style.left = left
canvasDataResultMap[component.id].style.height = height
canvasDataResultMap[component.id].style.width = width
if (fontSize) {
canvasDataResultMap[component.id].style.fontSize = fontSize
}
componentData.value[i] = canvasDataResultMap[component.id]
}
componentData.value[i] = canvasDataResultMap[component.id]
}
}
})

View File

@ -29,8 +29,8 @@ const getComponentStyleDefault = () => {
return {
top: 0,
left: 0,
width: '190px',
height: '190px'
width: 'calc(100% -8px)',
height: 'calc(100% -8px)'
}
}
const mobileStatusChange = (type, value) => {
@ -247,11 +247,11 @@ const addToMobile = com => {
const changeTimes = ref(0)
const activeCollapse = ref('com')
const handleBack = () => {
dvMainStore.setCurComponent({ component: null, index: null })
if (!changeTimes.value) {
mobileStatusChange('mobilePatch', undefined)
return
}
dvMainStore.setCurComponent({ component: null, index: null })
ElMessageBox.confirm('当前的更改尚未保存,确定退出吗?', {
confirmButtonType: 'primary',
type: 'warning',
@ -327,7 +327,7 @@ const save = () => {
</div>
<div class="config-mobile-tab" v-show="activeCollapse === 'com'">
<div
:style="{ height: '198px', width: '198px' }"
:style="{ height: '196px', width: '196px' }"
class="mobile-wrapper-inner-adaptor"
v-for="item in componentDataNotInMobile"
:key="item.id"
@ -341,7 +341,7 @@ const save = () => {
:canvas-view-info="canvasViewInfoMobile"
:view-info="canvasViewInfoMobile[item.id]"
:config="item"
:style="getComponentStyleDefault()"
class="wrapper-design"
show-position="preview"
:search-count="0"
:scale="80"
@ -549,7 +549,7 @@ const save = () => {
}
.config-mobile-tab {
padding: 16px 8px;
padding: 16px 0;
}
.config-mobile-tab-style {
padding: 0;
@ -561,7 +561,7 @@ const save = () => {
}
.mobile-wrapper-inner-adaptor {
position: relative;
margin-right: 8px;
margin-left: 8px;
margin-bottom: 8px;
float: left;
background: #fff;
@ -612,6 +612,13 @@ const save = () => {
}
}
}
.wrapper-design {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<style lang="less">

View File

@ -9,6 +9,8 @@ import VanSticky from 'vant/es/sticky'
import VanNavBar from 'vant/es/nav-bar'
import 'vant/es/nav-bar/style'
import 'vant/es/sticky/style'
import { downloadCanvas2 } from '@/utils/imgUtils'
import { useEmitt } from '@/hooks/web/useEmitt'
const dvMainStore = dvMainStoreWithOut()
const state = reactive({
canvasDataPreview: null,
@ -21,6 +23,8 @@ const state = reactive({
})
const dataInitState = ref(true)
const dashboardPreview = ref(null)
const previewCanvasContainer = ref(null)
const downloadStatus = ref(false)
const loadCanvasData = (dvId, weight?) => {
dataInitState.value = false
@ -58,8 +62,24 @@ onBeforeMount(() => {
fromPage = route.query.from as unknown as string
cache = route.query.cache as unknown as string
loadCanvasData(dvId)
useEmitt({
name: 'canvasDownload',
callback: function () {
downloadH2('img')
}
})
})
const downloadH2 = type => {
downloadStatus.value = true
nextTick(() => {
const vueDom = previewCanvasContainer.value.querySelector('.canvas-container')
downloadCanvas2(type, vueDom, state.dvInfo.name, () => {
downloadStatus.value = false
})
})
}
const onClickLeft = () => {
router.replace({
path: '/index',
@ -72,7 +92,7 @@ const onClickLeft = () => {
</script>
<template>
<div class="dv-common-layout-mobile">
<div class="dv-common-layout-mobile" ref="previewCanvasContainer">
<van-sticky>
<van-nav-bar :title="state.dvInfo.name" left-arrow @click-left="onClickLeft" />
</van-sticky>
@ -84,7 +104,7 @@ const onClickLeft = () => {
:component-data="state.canvasDataPreview"
:canvas-style-data="state.canvasStylePreview"
:canvas-view-info="state.canvasViewInfoPreview"
:download-status="false"
:download-status="downloadStatus"
></de-preview>
</div>
</template>