fix: 移动端PC坐标转换自适应

core/core-frontend/package.json

@@ -42,7 +42,7 @@
     "qs": "^6.11.0",
     "snowflake-id": "^1.1.0",
     "tinymce": "^5.8.2",
-    "vant": "^4.8.2",
+    "vant": "^4.8.3",
     "vue": "^3.3.4",
     "vue-clipboard3": "^2.0.0",
     "vue-codemirror": "^6.1.1",

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

@@ -1,5 +1,13 @@
 <template>
   <div class="shape" ref="shapeInnerRef" :id="domId" @dblclick="handleDbClick">
+    <div v-if="showCheck" class="del-from-mobile" @click="delFromMobile">
+      <label class="el-checkbox el-checkbox--small is-checked"
+        ><span class="el-checkbox__input is-checked"
+          ><input class="el-checkbox__original" checked type="checkbox" /><span
+            class="el-checkbox__inner"
+          ></span></span
+      ></label>
+    </div>
     <div
       class="shape-outer"
       v-show="contentDisplay"
@@ -113,7 +121,8 @@ const {
   curLinkageView,
   tabCollisionActiveId,
   tabMoveInActiveId,
-  tabMoveOutComponentId
+  tabMoveOutComponentId,
+  mobileInPc
 } = storeToRefs(dvMainStore)
 const { editorMap, areaData, isCtrlOrCmdDown } = storeToRefs(composeStore)
 const emit = defineEmits([
@@ -126,6 +135,7 @@ const emit = defineEmits([
   'linkJumpSetOpen',
   'linkageSetOpen'
 ])
+
 const isEditMode = computed(() => editMode.value === 'edit')
 const state = reactive({
   seriesIdMap: {
@@ -246,6 +256,17 @@ const initialAngle = {
 }
 const cursors = ref({})
 
+const showCheck = computed(() => {
+  return mobileInPc.value && element.value.canvasId === 'canvas-main'
+})
+
+const delFromMobile = () => {
+  useEmitt().emitter.emit('onMobileStatusChange', {
+    type: 'delFromMobile',
+    value: element.value.id
+  })
+}
+
 const angleToCursor = [
   // 每个范围的角度对应的光标
   { start: 338, end: 23, cursor: 'nw' },
@@ -879,6 +900,13 @@ onMounted(() => {
 <style lang="less" scoped>
 .shape {
   position: absolute;
+
+  .del-from-mobile {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    z-index: 2;
+  }
 }
 
 .shape-shadow {

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ref, onMounted, unref, onBeforeUnmount, computed } from 'vue'
+import eventBus from '@/utils/eventBus'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { getStyle } from '@/utils/style'
@@ -33,7 +34,9 @@ const handleLoad = () => {
     'panelInit',
     JSON.parse(
       JSON.stringify({
-        componentData: JSON.parse(JSON.stringify(unref(componentData))),
+        componentData: JSON.parse(
+          JSON.stringify(unref(componentData.value.filter(ele => !!ele.inMobile)))
+        ),
         canvasStyleData: JSON.parse(JSON.stringify(unref(canvasStyleData))),
         canvasViewInfo: JSON.parse(JSON.stringify(unref(canvasViewInfo))),
         dvInfo: JSON.parse(JSON.stringify(unref(dvInfo)))
@@ -51,6 +54,31 @@ const hanedleMessage = event => {
     mobileLoading.value = false
     handleLoad()
   }
+
+  if (event.data.type === 'delFromMobile') {
+    componentData.value.some(ele => {
+      if (ele.id === event.data.value) {
+        ele.inMobile = false
+        return true
+      }
+      return false
+    })
+  }
+
+  if (event.data.type === 'mobileSaveFromMobile') {
+    componentData.value.forEach(ele => {
+      const com = event.data.value[ele.id]
+      if (!!com) {
+        const { x, y, sizeX, sizeY } = com
+        ele.mx = x
+        ele.my = y
+        ele.mSizeX = sizeX
+        ele.mSizeY = sizeY
+      }
+    })
+
+    eventBus.emit('save')
+  }
 }
 onMounted(() => {
   window.addEventListener('message', hanedleMessage)
@@ -81,6 +109,11 @@ const addToMobile = com => {
         <Icon class="toolbar-icon" name="icon_left_outlined" />
       </el-icon>
     </div>
+    <div class="mobile-save">
+      <el-button type="primary" @click="mobileStatusChange('mobileSave', undefined)"
+        >保存</el-button
+      >
+    </div>
     <div class="mobile-canvas">
       <div class="config-panel-title">{{ dvInfo.name }}</div>
       <div class="config-panel-content" v-loading="mobileLoading">
@@ -120,7 +153,7 @@ const addToMobile = com => {
           />
           <div class="mobile-com-mask"></div>
 
-          <div class="pc-select-to-mobile" @click="addToMobile(config)"></div>
+          <div class="pc-select-to-mobile" v-if="!mobileLoading" @click="addToMobile(config)"></div>
         </div>
       </template>
     </div>
@@ -132,6 +165,19 @@ const addToMobile = com => {
   height: 100vh;
   width: 100vw;
   position: relative;
+
+  .mobile-to-pc {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    cursor: pointer;
+  }
+
+  .mobile-save {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+  }
   .mobile-canvas {
     border-radius: 30px;
     width: 370px;

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { onBeforeMount, ref, onBeforeUnmount } from 'vue'
+import { useEmitt } from '@/hooks/web/useEmitt'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 const dvMainStore = dvMainStoreWithOut()
 import DePreviewMobile from './MobileInPc.vue'
@@ -16,7 +17,14 @@ const checkItemPosition = component => {
 const hanedleMessage = event => {
   if (event.data.type === 'panelInit') {
     const { componentData, canvasStyleData, dvInfo, canvasViewInfo } = event.data.value
-    dvMainStore.setComponentData(componentData.filter(ele => !!ele.inMobile))
+    componentData.forEach(ele => {
+      const { mx, my, mSizeX, mSizeY } = ele
+      ele.x = mx
+      ele.y = my
+      ele.sizeX = mSizeX
+      ele.sizeY = mSizeY
+    })
+    dvMainStore.setComponentData(componentData)
     dvMainStore.setMobileInPc(true)
     dvMainStore.setCanvasStyle(canvasStyleData)
     dvMainStore.updateCurDvInfo(dvInfo)
@@ -29,13 +37,39 @@ const hanedleMessage = event => {
     checkItemPosition(component)
     dvMainStore.componentData.push(component)
   }
+
+  if (event.data.type === 'mobileSave') {
+    window.top.postMessage(
+      {
+        type: 'mobileSaveFromMobile',
+        value: dvMainStore.componentData.reduce((pre, next) => {
+          const { x, y, sizeX, sizeY, id } = next
+          pre[id] = { x, y, sizeX, sizeY }
+          return pre
+        }, {})
+      },
+      '*'
+    )
+  }
 }
 
 onBeforeMount(() => {
   window.top.postMessage({ type: 'panelInit', value: true }, '*')
   window.addEventListener('message', hanedleMessage)
+  useEmitt({
+    name: 'onMobileStatusChange',
+    callback: ({ type, value }) => {
+      mobileStatusChange(type, value)
+    }
+  })
 })
 
+const mobileStatusChange = (type, value) => {
+  window.top.postMessage({ type, value }, '*')
+  if (type === 'delFromMobile') {
+    dvMainStore.setComponentData(dvMainStore.componentData.filter(ele => ele.id !== value))
+  }
+}
 onBeforeUnmount(() => {
   window.removeEventListener('message', hanedleMessage)
 })