forked from github/dataease
Merge pull request #13078 from dataease/pr@dev-v2@refactor_mobile-refresh
fix(图表): 修复部分图片刷新无效问题
This commit is contained in:
commit
6f94128c51
@ -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]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user