refactor(仪表板): 优化移动端设计面板部分交互问题

core/core-frontend/src/utils/canvasUtils.ts

@@ -750,7 +750,7 @@ export function componentSwitch(componentData, changeComponent) {
 
 export function findComponentById(componentId) {
   let result
-  componentData.forEach(item => {
+  componentData.value.forEach(item => {
     if (item.id === componentId) {
       result = item
     } else if (item.component === 'Group') {
@@ -776,6 +776,6 @@ export function mobileViewStyleSwitch(component) {
   if (component) {
     const viewInfo = canvasViewInfo.value[component.id]
     viewInfo.customStyle = component.customStyle
-    viewInfo.customStyleMobile = component.customStyleMobile
+    viewInfo.customAttr = component.customAttr
   }
 }

core/core-frontend/src/views/chart/components/editor/index.vue

@@ -1077,10 +1077,24 @@ const onFunctionCfgChange = val => {
 
 const onBackgroundChange = val => {
   curComponent.value.commonBackground = val
+  if (mobileInPc.value) {
+    //移动端设计
+    useEmitt().emitter.emit('onMobileStatusChange', {
+      type: 'componentStyleChange',
+      value: { type: 'commonBackground', component: JSON.parse(JSON.stringify(curComponent.value)) }
+    })
+  }
 }
 
 const onStyleAttrChange = val => {
   curComponent.value.style[val.property] = val.value
+  if (mobileInPc.value) {
+    //移动端设计
+    useEmitt().emitter.emit('onMobileStatusChange', {
+      type: 'componentStyleChange',
+      value: { type: 'style', component: JSON.parse(JSON.stringify(curComponent.value)) }
+    })
+  }
 }
 
 const onAssistLineChange = val => {

core/core-frontend/src/views/common/ComponentStyleEditor.vue

@@ -5,7 +5,14 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import ViewEditor from '@/views/chart/components/editor/index.vue'
 import { computed } from 'vue'
 const dvMainStore = dvMainStoreWithOut()
-const { curComponent, canvasViewInfo, batchOptStatus } = storeToRefs(dvMainStore)
+const { curComponent, batchOptStatus } = storeToRefs(dvMainStore)
+
+defineProps({
+  canvasViewInfoMobile: {
+    type: Object,
+    required: true
+  }
+})
 
 const otherEditorShow = computed(() => {
   return Boolean(
@@ -35,7 +42,7 @@ const viewEditorShow = computed(() => {
     <template v-if="viewEditorShow">
       <view-editor
         :themes="'light'"
-        :view="canvasViewInfo[curComponent ? curComponent.id : 'default']"
+        :view="canvasViewInfoMobile[curComponent ? curComponent.id : 'default']"
       ></view-editor>
     </template>
   </div>

core/core-frontend/src/views/dashboard/MobileConfigPanel.vue

@@ -22,6 +22,7 @@ const mobileLoading = ref(true)
 const mobileStyle = ref(null)
 const emits = defineEmits(['pcMode'])
 const snapshotStore = snapshotStoreWithOut()
+const canvasViewInfoMobile = ref({})
 
 const getComponentStyleDefault = () => {
   return {
@@ -51,6 +52,7 @@ const iframeSrc = computed(() => {
     : './mobile.html#/panel'
 })
 const handleLoad = () => {
+  canvasViewInfoMobile.value = JSON.parse(JSON.stringify(unref(canvasViewInfo)))
   mobileStatusChange(
     'panelInit',
     JSON.parse(
@@ -140,6 +142,14 @@ const hanedleMessage = event => {
         }
       }
     })
+    // 将图表的修改信息还原
+    if (!!canvasViewInfoMobile.value) {
+      Object.keys(canvasViewInfoMobile.value).forEach(key => {
+        const { customAttr, customStyle } = canvasViewInfoMobile.value[key]
+        canvasViewInfo.value[key]['customAttrMobile'] = customAttr
+        canvasViewInfo.value[key]['customStyleMobile'] = customStyle
+      })
+    }
   }
   if (event.data.type === 'mobileSaveFromMobile') {
     saveCanvasWithCheckFromMobile()
@@ -285,7 +295,9 @@ const save = () => {
         <MobileBackgroundSelector @styleChange="changeTimes++"></MobileBackgroundSelector>
       </div>
       <div class="config-mobile-tab-style" v-show="activeCollapse === 'componentStyle'">
-        <component-style-editor></component-style-editor>
+        <component-style-editor
+          :canvas-view-info-mobile="canvasViewInfoMobile"
+        ></component-style-editor>
       </div>
       <div class="config-mobile-tab" v-show="activeCollapse === 'com'">
         <div

core/core-frontend/src/views/mobile/panel/index.vue

@@ -5,7 +5,7 @@ import eventBus from '@/utils/eventBus'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { XpackComponent } from '@/components/plugin'
 import DePreviewMobile from './MobileInPc.vue'
-import { mobileViewStyleSwitch } from '@/utils/canvasUtils'
+import { findComponentById, mobileViewStyleSwitch } from '@/utils/canvasUtils'
 const panelInit = ref(false)
 const dvMainStore = dvMainStoreWithOut()
 
@@ -21,6 +21,12 @@ const checkItemPosition = component => {
 const hanedleMessage = event => {
   if (event.data.type === 'panelInit') {
     const { componentData, canvasStyleData, dvInfo, canvasViewInfo, isEmbedded } = event.data.value
+    Object.keys(canvasViewInfo).forEach(viewId => {
+      const viewInfo = canvasViewInfo[viewId]
+      const { customAttrMobile, customStyleMobile } = viewInfo
+      viewInfo.customAttr = customAttrMobile || viewInfo.customAttr
+      viewInfo.customStyle = customStyleMobile || viewInfo.customStyle
+    })
     componentData.forEach(ele => {
       const { mx, my, mSizeX, mSizeY, mStyle, mCommonBackground } = ele
       ele.x = mx
@@ -64,14 +70,16 @@ const hanedleMessage = event => {
   }
   // 进行内部组件渲染 type render 渲染 calcData 计算  主组件渲染
   if (event.data.type === 'componentStyleChange') {
-    const { type, innerOptType, component } = event.data.value
+    const { type, component } = event.data.value
     if (type === 'renderChart') {
       mobileViewStyleSwitch(component)
       useEmitt().emitter.emit('renderChart-' + component.id, component)
     } else if (type === 'calcData') {
       mobileViewStyleSwitch(component)
       useEmitt().emitter.emit('calcData-' + component.id, component)
-    } else if (type === 'component') {
+    } else if (['style', 'commonBackground'].includes(type)) {
+      const mobileComponent = findComponentById(component.id)
+      mobileComponent[type] = component[type]
     }
   }