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

refactor(仪表板): 过滤组件支持移动端同步PC端样式，样式调整

Browse Source
This commit is contained in:
wangjiahao 2024-11-03 20:29:48 +08:00
parent 6f94128c51
commit b522f6ba04
7 changed files with 93 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
View File

@ -21,7 +21,7 @@ import DeFullscreen from '@/components/visualization/common/DeFullscreen.vue'
import EmptyBackground from '../../empty-background/src/EmptyBackground.vue'
import LinkOptBar from '@/components/data-visualization/canvas/LinkOptBar.vue'
const dvMainStore = dvMainStoreWithOut()
const { pcMatrixCount, curComponent, mobileInPc, canvasState } = storeToRefs(dvMainStore)
const { pcMatrixCount, curComponent, mobileInPc, canvasState, inMobile } = storeToRefs(dvMainStore)
const openHandler = ref(null)
const customDatasetParamsRef = ref(null)
const emits = defineEmits(['onResetLayout'])
@ -396,7 +396,9 @@ const dataVPreview = computed(
)
const linkOptBarShow = computed(() => {
return Boolean(canvasStyleData.value.suspensionButtonAvailable)
return Boolean(
canvasStyleData.value.suspensionButtonAvailable && !inMobile.value && !mobileInPc.value
)
})
const downloadAsPDF = () => {

39
core/core-frontend/src/components/data-visualization/canvas/Shape.vue
View File

@ -9,7 +9,21 @@
element-loading-background="rgba(255, 255, 255, 1)"
@dblclick="handleDbClick"
>
<div v-if="showCheck" class="del-from-mobile" @click="delFromMobile">
<div
title="同步PC设计"
v-if="showCheck && ['VQuery'].includes(element.component)"
class="refresh-from-pc"
@click="updateFromMobile($event, 'syncPcDesign')"
>
<el-icon>
<Icon name="icon_replace_outlined"><replaceOutlined class="svg-icon" /></Icon>
</el-icon>
</div>
<div
v-if="showCheck"
class="del-from-mobile"
@click="updateFromMobile($event, 'delFromMobile')"
>
<el-icon>
<Icon name="mobile-checkbox"><mobileCheckbox class="svg-icon" /></Icon>
</el-icon>
@ -98,6 +112,7 @@
<script setup lang="ts">
import mobileCheckbox from '@/assets/svg/mobile-checkbox.svg'
import replaceOutlined from '@/assets/svg/icon_replace_outlined.svg'
import dvLock from '@/assets/svg/dv-lock.svg'
import eventBus from '@/utils/eventBus'
import calculateComponentPositionAndSize, {
@ -282,9 +297,14 @@ const showCheck = computed(() => {
return mobileInPc.value && element.value.canvasId === 'canvas-main'
})
const delFromMobile = () => {
const updateFromMobile = (e, type) => {
console.log('====updateFromMobile===' + type)
if (type === 'syncPcDesign') {
e.preventDefault()
e.stopPropagation()
}
useEmitt().emitter.emit('onMobileStatusChange', {
type: 'delFromMobile',
type: type,
value: element.value.id
})
}
@ -865,9 +885,7 @@ const componentBackgroundStyle = computed(() => {
innerPadding,
borderRadius
} = element.value.commonBackground
const innerPaddingTarget = ['Group', 'DeTabs'].includes(element.value.component)
? 0
: innerPadding
const innerPaddingTarget = ['Group'].includes(element.value.component) ? 0 : innerPadding
const style = {
padding: innerPaddingTarget * scale.value + 'px',
borderRadius: borderRadius + 'px'
@ -1080,6 +1098,15 @@ onMounted(() => {
<style lang="less" scoped>
.shape {
position: absolute;
.refresh-from-pc {
position: absolute;
right: 38px;
top: 12px;
z-index: 2;
font-size: 16px;
cursor: pointer;
color: var(--ed-color-primary);
}
.del-from-mobile {
position: absolute;
right: 12px;

5
core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
View File

@ -67,7 +67,7 @@ import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
const snapshotStore = snapshotStoreWithOut()
const errMsg = ref('')
const dvMainStore = dvMainStoreWithOut()
const { canvasViewInfo } = storeToRefs(dvMainStore)
const { canvasViewInfo, mobileInPc } = storeToRefs(dvMainStore)
const isError = ref(false)
const appearanceStore = useAppearanceStoreWithOut()
@ -459,7 +459,8 @@ const computedCanEdit = computed<boolean>(() => {
editStatus.value &&
canEdit.value === false &&
!isError.value &&
!disabled.value
!disabled.value &&
!mobileInPc.value
)
})

10
core/core-frontend/src/store/modules/data-visualization/snapshot.ts
View File

@ -54,12 +54,16 @@ export const snapshotStore = defineStore('snapshot', {
this.recordSnapshot('snapshotCatchToStore')
}
},
recordSnapshotCacheToMobile(type) {
if (mobileInPc.value && curComponent.value) {
recordSnapshotCacheToMobile(type, component = curComponent.value, otherComponent = null) {
if (mobileInPc.value && component) {
//移动端设计
useEmitt().emitter.emit('onMobileStatusChange', {
type: 'componentStyleChange',
value: { type: type, component: JSON.parse(JSON.stringify(curComponent.value)) }
value: {
type: type,
component: JSON.parse(JSON.stringify(component)),
otherComponent: otherComponent
}
})
}
this.recordSnapshotCache(type)

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

@ -270,7 +270,7 @@ export function refreshOtherComponent(dvId, busiFlag) {
const component = componentData.value[i]
if (refreshIdList.includes(component.id) && canvasDataResultMap[component.id]) {
if (inMobile.value) {
componentData.value[i].propValue = canvasDataResultMap[component.id].mPropValue
componentData.value[i].propValue = canvasDataResultMap[component.id].propValue
} else {
const { top, left, height, width, fontSize } = componentData.value[i].style
canvasDataResultMap[component.id].style.top = top
@ -382,9 +382,11 @@ export async function backCanvasData(dvId, mobileViewInfo, busiFlag, callBack) {
ele.my = my
ele.mSizeX = mSizeX
ele.mSizeY = mSizeY
ele.mPropValue = mPropValue
ele.mEvents = mEvents
ele.mCommonBackground = mCommonBackground
if (ele.component === 'VQuery') {
ele.mPropValue = mPropValue
}
if (ele.component === 'DeTabs') {
ele.propValue.forEach(tabItem => {
tabItem.componentData.forEach(tabComponent => {
@ -392,9 +394,11 @@ export async function backCanvasData(dvId, mobileViewInfo, busiFlag, callBack) {
tabComponent.my = tabComponent.my
tabComponent.mSizeX = tabComponent.mSizeX
tabComponent.mSizeY = tabComponent.mSizeY
tabComponent.mPropValue = tPropValue
tabComponent.mEvents = tEvents
tabComponent.mCommonBackground = tCommonBackground
if (tabComponent.component === 'VQuery') {
tabComponent.mPropValue = tPropValue
}
})
})
}

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

@ -7,7 +7,7 @@ import MobileBackgroundSelector from './MobileBackgroundSelector.vue'
import ComponentWrapper from '@/components/data-visualization/canvas/ComponentWrapper.vue'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { useEmbedded } from '@/store/modules/embedded'
import { canvasSave } from '@/utils/canvasUtils'
import { canvasSave, findComponentById } from '@/utils/canvasUtils'
import { useEmitt } from '@/hooks/web/useEmitt'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { backCanvasData } from '@/utils/canvasUtils'
@ -25,14 +25,6 @@ const emits = defineEmits(['pcMode'])
const snapshotStore = snapshotStoreWithOut()
const canvasViewInfoMobile = ref({})
const getComponentStyleDefault = () => {
return {
top: 0,
left: 0,
width: 'calc(100% -8px)',
height: 'calc(100% -8px)'
}
}
const mobileStatusChange = (type, value) => {
if (type === 'componentStyleChange') {
changeTimes.value++
@ -127,6 +119,22 @@ const hanedleMessage = event => {
})
}
if (event.data.type === 'syncPcDesign') {
const targetComponent = findComponentById(event.data.value)
if (targetComponent) {
changeTimes.value++
let targetViewInfo
const sourceViewInfo = canvasViewInfo.value[targetComponent.id]
if (sourceViewInfo) {
targetViewInfo = deepCopy(sourceViewInfo)
targetViewInfo.customStyleMobile = null
targetViewInfo.customAttrMobile = null
canvasViewInfoMobile[targetComponent.id] = targetViewInfo
}
snapshotStore.recordSnapshotCacheToMobile('syncPcDesign', targetComponent, targetViewInfo)
}
}
if (['mobileSaveFromMobile', 'mobilePatchFromMobile'].includes(event.data.type)) {
componentData.value.forEach(ele => {
const com = event.data.value[ele.id]
@ -137,9 +145,11 @@ const hanedleMessage = event => {
ele.mSizeX = sizeX
ele.mSizeY = sizeY
ele.mStyle = style
ele.mPropValue = propValue
ele.mEvents = events
ele.mCommonBackground = commonBackground
if (ele.component === 'VQuery') {
ele.mPropValue = propValue
}
if (ele.component === 'DeTabs') {
ele.propValue.forEach(tabItem => {
tabItem.componentData.forEach(tabComponent => {
@ -158,9 +168,11 @@ const hanedleMessage = event => {
tabComponent.mSizeX = tSizeX
tabComponent.mSizeY = tSizeY
tabComponent.mStyle = tStyle
tabComponent.mPropValue = tPropValue
tabComponent.mEvents = tEvents
tabComponent.mCommonBackground = tCommonBackground
if (tabComponent.component === 'VQuery') {
tabComponent.mPropValue = tPropValue
}
})
})
}
@ -344,7 +356,7 @@ const save = () => {
class="wrapper-design"
show-position="preview"
:search-count="0"
:scale="80"
:scale="65"
/>
</div>
<div class="mobile-com-mask" @click="addToMobile(item)">

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

@ -31,7 +31,9 @@ const hanedleMessage = event => {
ele.style = deepCopy(mStyle || ele.style)
ele.commonBackground = deepCopy(mCommonBackground || ele.commonBackground)
ele.events = deepCopy(mEvents || ele.events)
if (ele.component === 'VQuery') {
ele.propValue = deepCopy(mPropValue || ele.propValue)
}
if (ele.component === 'DeTabs') {
ele.propValue.forEach(tabItem => {
@ -56,8 +58,10 @@ const hanedleMessage = event => {
tCommonBackground || tabComponent.commonBackground
)
tabComponent.events = deepCopy(tEvents || tabComponent.events)
if (tabComponent.component === 'VQuery') {
tabComponent.propValue = deepCopy(tPropValue || tabComponent.propValue)
}
}
})
})
}
@ -73,7 +77,7 @@ const hanedleMessage = event => {
}
// 进行内部组件渲染 type render 渲染 calcData 计算 主组件渲染
if (event.data.type === 'componentStyleChange') {
const { type, component } = event.data.value
const { type, component, otherComponent } = event.data.value
if (type === 'renderChart') {
mobileViewStyleSwitch(component)
useEmitt().emitter.emit('renderChart-' + component.id, component)
@ -86,6 +90,14 @@ const hanedleMessage = event => {
} else if (['style', 'commonBackground', 'events', 'propValue'].includes(type)) {
const mobileComponent = findComponentById(component.id)
mobileComponent[type] = component[type]
} else if (['syncPcDesign'].includes(type)) {
const mobileComponent = findComponentById(component.id)
mobileComponent['style'] = component['style']
mobileComponent['commonBackground'] = component['commonBackground']
mobileComponent['events'] = component['events']
mobileComponent['propValue'] = component['propValue']
mobileViewStyleSwitch(otherComponent)
useEmitt().emitter.emit('renderChart-' + component.id, otherComponent)
}
}