center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

refactor(仪表板): 移动端组件支持独立事件设置

Browse Source
This commit is contained in:
wangjiahao 2024-10-30 18:27:18 +08:00
parent d0d1e2386a
commit c514752730
9 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/core-frontend/src/custom-component/common/CommonAttr.vue
View File

@ -135,7 +135,7 @@ onMounted(() => {
></common-style-set>
</el-collapse-item>
<el-collapse-item
v-if="element && element.events && eventsShow && !mobileInPc"
v-if="element && element.events && eventsShow"
:effect="themes"
title="事件"
name="events"

4
core/core-frontend/src/custom-component/common/CommonEvent.vue
View File

@ -29,11 +29,11 @@ const curSupportEvents = computed(() => {
}
})
const onEventChange = () => {
snapshotStore.recordSnapshotCache('renderChart')
snapshotStore.recordSnapshotCacheToMobile('events')
}
const onJumpValueChange = () => {
snapshotStore.recordSnapshotCache('renderChart')
snapshotStore.recordSnapshotCacheToMobile('events')
}
</script>

4
core/core-frontend/src/custom-component/de-frame/Attr.vue
View File

@ -5,7 +5,7 @@
:effect="themes"
title="链接信息"
name="frameLinks"
v-if="curComponent && curComponent.frameLinks"
v-if="curComponent && curComponent.frameLinks && !mobileInPc"
>
<frame-links :frame-links="curComponent.frameLinks" :themes="themes"></frame-links>
</el-collapse-item>
@ -19,7 +19,7 @@ import CommonAttr from '@/custom-component/common/CommonAttr.vue'
import { storeToRefs } from 'pinia'
import FrameLinks from '@/custom-component/de-frame/FrameLinks.vue'
const dvMainStore = dvMainStoreWithOut()
const { curComponent } = storeToRefs(dvMainStore)
const { curComponent, mobileInPc } = storeToRefs(dvMainStore)
const props = withDefaults(
defineProps<{
themes?: EditorTheme

3
core/core-frontend/src/custom-component/de-stream-media/Attr.vue
View File

@ -5,10 +5,9 @@
:effect="themes"
title="流媒体信息"
name="streamLinks"
v-if="curComponent && curComponent.streamMediaLinks"
v-if="curComponent && curComponent.streamMediaLinks && !mobileInPc"
>
<stream-media-links
v-show="!mobileInPc"
:link-info="curComponent.streamMediaLinks"
:themes="themes"
></stream-media-links>

8
core/core-frontend/src/custom-component/de-video/Attr.vue
View File

@ -5,13 +5,9 @@
:effect="themes"
title="链接信息"
name="videoLinks"
v-if="curComponent && curComponent.videoLinks"
v-if="curComponent && curComponent.videoLinks && !mobileInPc"
>
<video-links
v-show="!mobileInPc"
:link-info="curComponent.videoLinks"
:themes="themes"
></video-links>
<video-links :link-info="curComponent.videoLinks" :themes="themes"></video-links>
</el-collapse-item>
</CommonAttr>
</div>

3
core/core-frontend/src/utils/canvasUtils.ts
View File

@ -402,13 +402,14 @@ 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, mPropValue, mCommonBackground } = ele
const { mx, my, mSizeX, mSizeY, mStyle, mPropValue, mEvents, 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.mEvents = mEvents || ele.events
ele.mCommonBackground = mCommonBackground || ele.commonBackground
if (ele.component === 'DeTabs') {
ele.propValue.forEach(tabItem => {

6
core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
View File

@ -28,7 +28,6 @@ import FlowMapLineSelector from '@/views/chart/components/editor/editor-style/co
import FlowMapPointSelector from '@/views/chart/components/editor/editor-style/components/FlowMapPointSelector.vue'
import CommonEvent from '@/custom-component/common/CommonEvent.vue'
import CommonBorderSetting from '@/custom-component/common/CommonBorderSetting.vue'
import PictureGroupUploadAttr from '@/custom-component/picture-group/PictureGroupUploadAttr.vue'
const dvMainStore = dvMainStoreWithOut()
const { dvInfo, batchOptStatus, curComponent } = storeToRefs(dvMainStore)
@ -612,11 +611,6 @@ watch(
@onChangeYAxisExtForm="onChangeYAxisExtForm"
/>
</collapse-switch-item>
<PictureGroupUploadAttr
v-if="pictureGroupShow"
:themes="themes"
:element="curComponent"
></PictureGroupUploadAttr>
</el-collapse>
</el-row>
</div>

5
core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
View File

@ -131,13 +131,14 @@ const hanedleMessage = event => {
componentData.value.forEach(ele => {
const com = event.data.value[ele.id]
if (!!com) {
const { x, y, sizeX, sizeY, style, propValue, commonBackground } = com
const { x, y, sizeX, sizeY, style, propValue, events, commonBackground } = com
ele.mx = x
ele.my = y
ele.mSizeX = sizeX
ele.mSizeY = sizeY
ele.mStyle = style
ele.mPropValue = propValue
ele.mEvents = events
ele.mCommonBackground = commonBackground
if (ele.component === 'DeTabs') {
ele.propValue.forEach(tabItem => {
@ -149,6 +150,7 @@ const hanedleMessage = event => {
sizeY: tSizeY,
style: tStyle,
propValue: tPropValue,
events: tEvents,
commonBackground: tCommonBackground
} = com.tab[tabComponent.id]
tabComponent.mx = tx
@ -157,6 +159,7 @@ const hanedleMessage = event => {
tabComponent.mSizeY = tSizeY
tabComponent.mStyle = tStyle
tabComponent.mPropValue = tPropValue
tabComponent.mEvents = tEvents
tabComponent.mCommonBackground = tCommonBackground
})
})

17
core/core-frontend/src/views/mobile/panel/index.vue
View File

@ -23,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, mPropValue } = ele
const { mx, my, mSizeX, mSizeY, mStyle, mCommonBackground, mEvents, mPropValue } = ele
ele.x = mx
ele.y = my
ele.sizeX = mSizeX
ele.sizeY = mSizeY
ele.style = mStyle || ele.style
ele.commonBackground = deepCopy(mCommonBackground || ele.commonBackground)
ele.events = deepCopy(mEvents || ele.events)
ele.propValue = deepCopy(mPropValue || ele.propValue)
if (ele.component === 'DeTabs') {
@ -42,6 +43,7 @@ const hanedleMessage = event => {
mSizeY: tSizeY,
mStyle: tStyle,
mCommonBackground: tCommonBackground,
mEvents: tEvents,
mPropValue: tPropValue
} = tabComponent
if (tSizeX && tSizeY) {
@ -53,6 +55,7 @@ const hanedleMessage = event => {
tabComponent.commonBackground = deepCopy(
tCommonBackground || tabComponent.commonBackground
)
tabComponent.events = deepCopy(tEvents || tabComponent.events)
tabComponent.propValue = deepCopy(tPropValue || tabComponent.propValue)
}
})
@ -80,7 +83,7 @@ const hanedleMessage = event => {
} else if (type === 'updateTitle') {
mobileViewStyleSwitch(component)
useEmitt().emitter.emit('updateTitle-' + component.id)
} else if (['style', 'commonBackground'].includes(type)) {
} else if (['style', 'commonBackground', 'events'].includes(type)) {
const mobileComponent = findComponentById(component.id)
mobileComponent[type] = component[type]
}
@ -102,14 +105,16 @@ const hanedleMessage = event => {
{
type: `${event.data.type}FromMobile`,
value: dvMainStore.componentData.reduce((pre, next) => {
const { x, y, sizeX, sizeY, id, component, propValue, style, commonBackground } = next
const { x, y, sizeX, sizeY, id, component, propValue, style, events, commonBackground } =
next
pre[id] = {
x,
y,
sizeX,
sizeY,
component,
propValue: JSON.parse(JSON.stringify(propValue)),
events: deepCopy(events),
propValue: deepCopy(propValue),
style: JSON.parse(JSON.stringify(style)),
commonBackground: JSON.parse(JSON.stringify(commonBackground))
}
@ -124,6 +129,8 @@ const hanedleMessage = event => {
sizeY: tSizeY,
id: tId,
style: tStyle,
events: tEvents,
propValue: tPropValue,
commonBackground: tCommonBackground
} = tabComponent
pre[id].tab[tId] = {
@ -132,6 +139,8 @@ const hanedleMessage = event => {
sizeX: tSizeX,
sizeY: tSizeY,
style: JSON.parse(JSON.stringify(tStyle)),
events: deepCopy(tEvents),
propValue: deepCopy(tPropValue),
commonBackground: JSON.parse(JSON.stringify(tCommonBackground))
}
})