refactor(仪表板): 移动端富文本保留独立内容
This commit is contained in:
wangjiahao
parent
1a020d4e89
commit
7721e1ddef
@ -260,6 +260,9 @@ export const dvMainStore = defineStore('dataVisualization', {
|
||||
setAppDataInfo(appDataInfo) {
|
||||
this.appData = appDataInfo
|
||||
},
|
||||
setCurComponentMobileConfig(component) {
|
||||
this.curComponent = component
|
||||
},
|
||||
setCurComponent({ component, index }) {
|
||||
if (!component && this.curComponent) {
|
||||
this.curComponent['editing'] = false
|
||||
|
||||
@ -349,45 +349,50 @@ export async function initCanvasData(dvId, busiFlag, callBack) {
|
||||
}
|
||||
|
||||
export async function backCanvasData(dvId, busiFlag, callBack) {
|
||||
initCanvasDataPrepare(dvId, busiFlag, function ({ canvasDataResult, canvasStyleResult }) {
|
||||
const componentDataCopy = canvasDataResult.filter(ele => !!ele.inMobile)
|
||||
const componentDataId = componentDataCopy.map(ele => ele.id)
|
||||
componentData.value.forEach(ele => {
|
||||
ele.inMobile = componentDataId.includes(ele.id)
|
||||
if (ele.inMobile) {
|
||||
const { mx, my, mSizeX, mSizeY } = componentDataCopy.find(itx => itx.id === ele.id)
|
||||
ele.mx = mx
|
||||
ele.my = my
|
||||
ele.mSizeX = mSizeX
|
||||
ele.mSizeY = mSizeY
|
||||
if (ele.component === 'DeTabs') {
|
||||
ele.propValue.forEach(tabItem => {
|
||||
tabItem.componentData.forEach(tabComponent => {
|
||||
tabComponent.mx = tabComponent.mx
|
||||
tabComponent.my = tabComponent.my
|
||||
tabComponent.mSizeX = tabComponent.mSizeX
|
||||
tabComponent.mSizeY = tabComponent.mSizeY
|
||||
initCanvasDataPrepare(
|
||||
dvId,
|
||||
busiFlag,
|
||||
function ({ canvasDataResult, canvasStyleResult, canvasViewInfoPreview }) {
|
||||
const componentDataCopy = canvasDataResult.filter(ele => !!ele.inMobile)
|
||||
const componentDataId = componentDataCopy.map(ele => ele.id)
|
||||
componentData.value.forEach(ele => {
|
||||
ele.inMobile = componentDataId.includes(ele.id)
|
||||
if (ele.inMobile) {
|
||||
const { mx, my, mSizeX, mSizeY } = componentDataCopy.find(itx => itx.id === ele.id)
|
||||
ele.mx = mx
|
||||
ele.my = my
|
||||
ele.mSizeX = mSizeX
|
||||
ele.mSizeY = mSizeY
|
||||
if (ele.component === 'DeTabs') {
|
||||
ele.propValue.forEach(tabItem => {
|
||||
tabItem.componentData.forEach(tabComponent => {
|
||||
tabComponent.mx = tabComponent.mx
|
||||
tabComponent.my = tabComponent.my
|
||||
tabComponent.mSizeX = tabComponent.mSizeX
|
||||
tabComponent.mSizeY = tabComponent.mSizeY
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
dvMainStore.setComponentData(componentData.value)
|
||||
dvMainStore.setCanvasViewInfo(canvasViewInfoPreview)
|
||||
const canvasStyleDataCopy = cloneDeep(canvasStyleData.value)
|
||||
if (!canvasStyleDataCopy.mobileSetting) {
|
||||
canvasStyleDataCopy.mobileSetting = {
|
||||
backgroundColorSelect: false,
|
||||
background: '',
|
||||
color: '#ffffff',
|
||||
backgroundImageEnable: false,
|
||||
customSetting: false
|
||||
}
|
||||
} else {
|
||||
canvasStyleDataCopy.mobileSetting = canvasStyleResult.mobileSetting
|
||||
}
|
||||
})
|
||||
dvMainStore.setComponentData(componentData.value)
|
||||
const canvasStyleDataCopy = cloneDeep(canvasStyleData.value)
|
||||
if (!canvasStyleDataCopy.mobileSetting) {
|
||||
canvasStyleDataCopy.mobileSetting = {
|
||||
backgroundColorSelect: false,
|
||||
background: '',
|
||||
color: '#ffffff',
|
||||
backgroundImageEnable: false,
|
||||
customSetting: false
|
||||
}
|
||||
} else {
|
||||
canvasStyleDataCopy.mobileSetting = canvasStyleResult.mobileSetting
|
||||
dvMainStore.setCanvasStyle(canvasStyleDataCopy)
|
||||
callBack()
|
||||
}
|
||||
dvMainStore.setCanvasStyle(canvasStyleDataCopy)
|
||||
callBack()
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
export function initCanvasDataMobile(dvId, busiFlag, callBack) {
|
||||
@ -397,12 +402,13 @@ export function initCanvasDataMobile(dvId, busiFlag, callBack) {
|
||||
function ({ canvasDataResult, canvasStyleResult, dvInfo, canvasViewInfoPreview }) {
|
||||
const componentData = canvasDataResult.filter(ele => !!ele.inMobile)
|
||||
canvasDataResult.forEach(ele => {
|
||||
const { mx, my, mSizeX, mSizeY, mStyle, mCommonBackground } = ele
|
||||
const { mx, my, mSizeX, mSizeY, mStyle, mPropValue, mCommonBackground } = ele
|
||||
ele.x = mx
|
||||
ele.y = my
|
||||
ele.sizeX = mSizeX
|
||||
ele.sizeY = mSizeY
|
||||
ele.mStyle = mStyle || ele.Style
|
||||
ele.mPropValue = mPropValue || ele.propValue
|
||||
ele.mCommonBackground = mCommonBackground || ele.commonBackground
|
||||
if (ele.component === 'DeTabs') {
|
||||
ele.propValue.forEach(tabItem => {
|
||||
|
||||
@ -108,8 +108,8 @@ const hanedleMessage = event => {
|
||||
}
|
||||
|
||||
if (event.data.type === 'curComponentChange') {
|
||||
// 移动端CurComponent引用不在主dvMain中 1111
|
||||
dvMainStore.setCurComponent({ component: event.data.value, index: 0 })
|
||||
// 移动端CurComponent引用不在主dvMain中
|
||||
dvMainStore.setCurComponentMobileConfig(event.data.value)
|
||||
if (!!event.data.value) {
|
||||
activeCollapse.value = 'componentStyle'
|
||||
} else {
|
||||
@ -132,12 +132,13 @@ const hanedleMessage = event => {
|
||||
componentData.value.forEach(ele => {
|
||||
const com = event.data.value[ele.id]
|
||||
if (!!com) {
|
||||
const { x, y, sizeX, sizeY, style, commonBackground } = com
|
||||
const { x, y, sizeX, sizeY, style, propValue, commonBackground } = com
|
||||
ele.mx = x
|
||||
ele.my = y
|
||||
ele.mSizeX = sizeX
|
||||
ele.mSizeY = sizeY
|
||||
ele.mStyle = style
|
||||
ele.mPropValue = propValue
|
||||
ele.mCommonBackground = commonBackground
|
||||
if (ele.component === 'DeTabs') {
|
||||
ele.propValue.forEach(tabItem => {
|
||||
@ -148,6 +149,7 @@ const hanedleMessage = event => {
|
||||
sizeX: tSizeX,
|
||||
sizeY: tSizeY,
|
||||
style: tStyle,
|
||||
propValue: tPropValue,
|
||||
commonBackground: tCommonBackground
|
||||
} = com.tab[tabComponent.id]
|
||||
tabComponent.mx = tx
|
||||
@ -155,6 +157,7 @@ const hanedleMessage = event => {
|
||||
tabComponent.mSizeX = tSizeX
|
||||
tabComponent.mSizeY = tSizeY
|
||||
tabComponent.mStyle = tStyle
|
||||
tabComponent.mPropValue = tPropValue
|
||||
tabComponent.mCommonBackground = tCommonBackground
|
||||
})
|
||||
})
|
||||
@ -331,8 +334,8 @@ const save = () => {
|
||||
canvas-id="canvas-main"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:dv-info="dvInfo"
|
||||
:canvas-view-info="canvasViewInfo"
|
||||
:view-info="canvasViewInfo[item.id]"
|
||||
:canvas-view-info="canvasViewInfoMobile"
|
||||
:view-info="canvasViewInfoMobile[item.id]"
|
||||
:config="item"
|
||||
:style="getComponentStyleDefault()"
|
||||
show-position="preview"
|
||||
|
||||
@ -6,6 +6,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||
import { XpackComponent } from '@/components/plugin'
|
||||
import DePreviewMobile from './MobileInPc.vue'
|
||||
import { findComponentById, mobileViewStyleSwitch } from '@/utils/canvasUtils'
|
||||
import { deepCopy } from '@/utils/utils'
|
||||
const panelInit = ref(false)
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
|
||||
@ -22,13 +23,14 @@ const hanedleMessage = event => {
|
||||
if (event.data.type === 'panelInit') {
|
||||
const { componentData, canvasStyleData, dvInfo, canvasViewInfo, isEmbedded } = event.data.value
|
||||
componentData.forEach(ele => {
|
||||
const { mx, my, mSizeX, mSizeY, mStyle, mCommonBackground } = ele
|
||||
const { mx, my, mSizeX, mSizeY, mStyle, mCommonBackground, mPropValue } = ele
|
||||
ele.x = mx
|
||||
ele.y = my
|
||||
ele.sizeX = mSizeX
|
||||
ele.sizeY = mSizeY
|
||||
ele.style = mStyle || ele.style
|
||||
ele.commonBackground = mCommonBackground || ele.commonBackground
|
||||
ele.commonBackground = deepCopy(mCommonBackground || ele.commonBackground)
|
||||
ele.propValue = deepCopy(mPropValue || ele.propValue)
|
||||
|
||||
if (ele.component === 'DeTabs') {
|
||||
ele.propValue.forEach(tabItem => {
|
||||
@ -39,15 +41,19 @@ const hanedleMessage = event => {
|
||||
mSizeX: tSizeX,
|
||||
mSizeY: tSizeY,
|
||||
mStyle: tStyle,
|
||||
mCommonBackground: tCommonBackground
|
||||
mCommonBackground: tCommonBackground,
|
||||
mPropValue: tPropValue
|
||||
} = tabComponent
|
||||
if (tSizeX && tSizeY) {
|
||||
tabComponent.x = tx
|
||||
tabComponent.y = ty
|
||||
tabComponent.sizeX = tSizeX
|
||||
tabComponent.sizeY = tSizeY
|
||||
tabComponent.style = tStyle || tabComponent.style
|
||||
tabComponent.commonBackground = tCommonBackground || tabComponent.commonBackground
|
||||
tabComponent.style = deepCopy(tStyle || tabComponent.style)
|
||||
tabComponent.commonBackground = deepCopy(
|
||||
tCommonBackground || tabComponent.commonBackground
|
||||
)
|
||||
tabComponent.propValue = deepCopy(tPropValue || tabComponent.propValue)
|
||||
}
|
||||
})
|
||||
})
|
||||
@ -96,13 +102,14 @@ const hanedleMessage = event => {
|
||||
{
|
||||
type: `${event.data.type}FromMobile`,
|
||||
value: dvMainStore.componentData.reduce((pre, next) => {
|
||||
const { x, y, sizeX, sizeY, id, component, style, commonBackground } = next
|
||||
const { x, y, sizeX, sizeY, id, component, propValue, style, commonBackground } = next
|
||||
pre[id] = {
|
||||
x,
|
||||
y,
|
||||
sizeX,
|
||||
sizeY,
|
||||
component,
|
||||
propValue: JSON.parse(JSON.stringify(propValue)),
|
||||
style: JSON.parse(JSON.stringify(style)),
|
||||
commonBackground: JSON.parse(JSON.stringify(commonBackground))
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user