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

core/core-frontend/src/custom-component/common/CommonAttr.vue

@@ -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"

core/core-frontend/src/custom-component/common/CommonEvent.vue

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

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

@@ -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

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

@@ -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>

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

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

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

@@ -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 => {

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

@@ -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>

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

@@ -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
             })
           })

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

@@ -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))
                 }
               })