refactor(仪表板): 移动端样式配置交互优化

core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue

@@ -303,7 +303,7 @@ const init = () => {
 }
 queryBackground()
 const commitStyle = () => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCacheToMobile('commonBackground')
 }
 
 const handleRemove = () => {
@@ -325,7 +325,7 @@ const upload = file => {
 }
 
 const onBackgroundChange = () => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCacheToMobile('commonBackground')
   emits('onBackgroundChange', state.commonBackground)
 }
 

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

@@ -37,26 +37,13 @@ const props = withDefaults(
 
 const { themes, element, showStyle } = toRefs(props)
 const dvMainStore = dvMainStoreWithOut()
-const { dvInfo, batchOptStatus } = storeToRefs(dvMainStore)
+const { dvInfo, batchOptStatus, mobileInPc } = storeToRefs(dvMainStore)
 const activeName = ref(element.value.collapseName)
 
-const styleKeys = computed(() => {
-  if (element.value) {
-    const curComponentStyleKeys = Object.keys(element.value.style)
-    return styleData.filter(item => curComponentStyleKeys.includes(item.key))
-  } else {
-    return []
-  }
-})
-
 const onChange = () => {
   element.value.collapseName = activeName
 }
 
-const isIncludesColor = str => {
-  return str.toLowerCase().includes('color')
-}
-
 const positionComponentShow = computed(() => {
   return !batchOptStatus.value && !dashboardActive.value
 })
@@ -71,31 +58,13 @@ const onBackgroundChange = val => {
 }
 
 const onStyleAttrChange = ({ key, value }) => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCacheToMobile('style')
   emits('onAttrChange', { custom: 'style', property: key, value: value })
 }
 
 const containerRef = ref()
 const containerWidth = ref()
 
-const colSpan = computed(() => {
-  if (containerWidth.value <= 240) {
-    return 24
-  } else {
-    return 12
-  }
-})
-
-const colorPickerWidth = computed(() => {
-  if (containerWidth.value <= 280) {
-    return 125
-  } else if (containerWidth.value <= 240) {
-    return 108
-  } else {
-    return 197
-  }
-})
-
 const borderSettingShow = computed(() => {
   return !!element.value.style['borderStyle']
 })
@@ -110,7 +79,7 @@ const eventsShow = computed(() => {
 })
 
 const carouselShow = computed(() => {
-  return element.value.component === 'DeTabs' && element.value.carousel
+  return element.value.component === 'DeTabs' && element.value.carousel && !mobileInPc.value
 })
 
 const backgroundCustomShow = computed(() => {
@@ -129,12 +98,6 @@ onMounted(() => {
     })
   })
 })
-const stopEvent = e => {
-  if (e && e.code === 'Enter') {
-    e.stopPropagation()
-    e.preventDefault()
-  }
-}
 </script>
 
 <template>
@@ -173,7 +136,7 @@ const stopEvent = e => {
         ></common-style-set>
       </el-collapse-item>
       <el-collapse-item
-        v-if="element && element.events && eventsShow"
+        v-if="element && element.events && eventsShow && !mobileInPc"
         :effect="themes"
         title="事件"
         name="events"

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

@@ -8,6 +8,7 @@
         v-if="curComponent && curComponent.streamMediaLinks"
       >
         <stream-media-links
+          v-show="!mobileInPc"
           :link-info="curComponent.streamMediaLinks"
           :themes="themes"
         ></stream-media-links>
@@ -20,10 +21,9 @@
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import CommonAttr from '@/custom-component/common/CommonAttr.vue'
 import { storeToRefs } from 'pinia'
-import VideoLinks from '@/custom-component/de-video/VideoLinks.vue'
 import StreamMediaLinks from '@/custom-component/de-stream-media/StreamMediaLinks.vue'
 const dvMainStore = dvMainStoreWithOut()
-const { curComponent } = storeToRefs(dvMainStore)
+const { curComponent, mobileInPc } = storeToRefs(dvMainStore)
 withDefaults(
   defineProps<{
     themes?: EditorTheme

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

@@ -7,7 +7,11 @@
         name="videoLinks"
         v-if="curComponent && curComponent.videoLinks"
       >
-        <video-links :link-info="curComponent.videoLinks" :themes="themes"></video-links>
+        <video-links
+          v-show="!mobileInPc"
+          :link-info="curComponent.videoLinks"
+          :themes="themes"
+        ></video-links>
       </el-collapse-item>
     </CommonAttr>
   </div>
@@ -19,7 +23,7 @@ import CommonAttr from '@/custom-component/common/CommonAttr.vue'
 import { storeToRefs } from 'pinia'
 import VideoLinks from '@/custom-component/de-video/VideoLinks.vue'
 const dvMainStore = dvMainStoreWithOut()
-const { curComponent } = storeToRefs(dvMainStore)
+const { curComponent, mobileInPc } = storeToRefs(dvMainStore)
 withDefaults(
   defineProps<{
     themes?: EditorTheme

core/core-frontend/src/custom-component/picture-group/Attr.vue

@@ -18,7 +18,7 @@ const props = defineProps({
 
 const dvMainStore = dvMainStoreWithOut()
 
-const { curComponent, canvasViewInfo } = storeToRefs(dvMainStore)
+const { curComponent, canvasViewInfo, mobileInPc } = storeToRefs(dvMainStore)
 </script>
 
 <template>
@@ -32,15 +32,16 @@ const { curComponent, canvasViewInfo } = storeToRefs(dvMainStore)
       <picture-group-upload-attr
         :themes="themes"
         :element="curComponent"
+        v-if="!mobileInPc"
       ></picture-group-upload-attr>
-      <template v-slot:carousel>
+      <template v-slot:carousel v-if="!mobileInPc">
         <carousel-setting
           v-if="curComponent?.innerType === 'picture-group'"
           :element="curComponent"
           :themes="themes"
         ></carousel-setting>
       </template>
-      <template v-slot:threshold>
+      <template v-slot:threshold v-if="!mobileInPc">
         <picture-group-threshold
           :themes="themes"
           :element="curComponent"

core/core-frontend/src/custom-component/picture/Attr.vue

@@ -10,11 +10,7 @@ import { beforeUploadCheck, uploadFileResult } from '@/api/staticResource'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import eventBus from '@/utils/eventBus'
 import ImgViewDialog from '@/custom-component/ImgViewDialog.vue'
-import DatasetSelect from '@/views/chart/components/editor/dataset-select/DatasetSelect.vue'
-import Icon from '../../components/icon-custom/src/Icon.vue'
 import { useI18n } from '@/hooks/web/useI18n'
-import { cloneDeep } from 'lodash-es'
-import FilterTree from '@/views/chart/components/editor/filter/FilterTree.vue'
 const { t } = useI18n()
 
 const props = defineProps({
@@ -27,7 +23,7 @@ const props = defineProps({
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 
-const { curComponent } = storeToRefs(dvMainStore)
+const { curComponent, mobileInPc } = storeToRefs(dvMainStore)
 
 const fileList = ref([])
 const dialogImageUrl = ref('')
@@ -35,8 +31,6 @@ const dialogVisible = ref(false)
 const uploadDisabled = ref(false)
 const files = ref(null)
 const maxImageSize = 15000000
-const datasetSelector = ref(null)
-const filterTree = ref(null)
 const state = reactive({})
 
 const handlePictureCardPreview = file => {
@@ -130,7 +124,7 @@ onBeforeUnmount(() => {
       :background-color-picker-width="197"
       :background-border-select-width="197"
     >
-      <el-collapse-item :effect="themes" title="图片" name="picture">
+      <el-collapse-item :effect="themes" title="图片" name="picture" v-show="!mobileInPc">
         <el-row class="img-area" :class="`img-area_${themes}`">
           <el-col style="width: 130px !important">
             <el-upload

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

@@ -18,7 +18,8 @@ const {
   curOriginThemes,
   dataPrepareState,
   nowPanelTrackInfo,
-  nowPanelJumpInfo
+  nowPanelJumpInfo,
+  mobileInPc
 } = storeToRefs(dvMainStore)
 
 let defaultCanvasInfo = {
@@ -53,6 +54,16 @@ export const snapshotStore = defineStore('snapshot', {
         this.recordSnapshot('snapshotCatchToStore')
       }
     },
+    recordSnapshotCacheToMobile(type) {
+      if (mobileInPc.value && curComponent.value) {
+        //移动端设计
+        useEmitt().emitter.emit('onMobileStatusChange', {
+          type: 'componentStyleChange',
+          value: { type: type, component: JSON.parse(JSON.stringify(curComponent.value)) }
+        })
+      }
+      this.recordSnapshotCache(type)
+    },
     recordSnapshotCache(type?, viewId = 'all') {
       if (dataPrepareState.value) {
         if (type === 'calcData') {

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

@@ -12,8 +12,13 @@ import { imgUrlTrans } from '@/utils/imgUtils'
 import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
 import CollapseSwitchItem from '@/components/collapse-switch-item/src/CollapseSwitchItem.vue'
 import { cloneDeep } from 'lodash-es'
+import { useEmitt } from '@/hooks/web/useEmitt'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { storeToRefs } from 'pinia'
 const { t } = useI18n()
 const styleActiveNames = ref(['basicStyle'])
+const dvMainStore = dvMainStoreWithOut()
+const { mobileInPc } = storeToRefs(dvMainStore)
 
 const props = defineProps({
   element: {
@@ -33,6 +38,7 @@ const props = defineProps({
     default: 'dark'
   }
 })
+const { chart, commonBackgroundPop } = toRefs(props)
 const toolTip = computed(() => {
   return props.themes === 'dark' ? 'ndark' : 'dark'
 })
@@ -54,10 +60,47 @@ const state = reactive({
   dialogVisible: false
 })
 
+const mobileStyleChange = () => {
+  if (mobileInPc.value) {
+    //移动端设计
+    useEmitt().emitter.emit('onMobileStatusChange', {
+      type: 'componentStyleChange',
+      value: { type: 'renderChart', component: JSON.parse(JSON.stringify(chart.value)) }
+    })
+  }
+}
+
+const mobileBackgroundChange = () => {
+  if (mobileInPc.value) {
+    //移动端设计
+    useEmitt().emitter.emit('onMobileStatusChange', {
+      type: 'componentStyleChange',
+      value: { type: 'commonBackground', component: JSON.parse(JSON.stringify(props.element)) }
+    })
+  }
+}
+
+watch(
+  [() => state.commonBackground, () => commonBackgroundPop.value],
+  () => {
+    mobileBackgroundChange()
+  },
+  { deep: true }
+)
+
+watch(
+  [() => chart.value.customStyle],
+  () => {
+    mobileStyleChange()
+  },
+  { deep: true }
+)
+
 watch(
   () => props.commonBackgroundPop,
   () => {
     init()
+    mobileBackgroundChange()
   }
 )
 
@@ -147,7 +190,6 @@ const checkItalic = type => {
   if (!chart.value.customStyle.component.labelShow) return
   chart.value.customStyle.component[type] = chart.value.customStyle.component[type] ? '' : 'italic'
 }
-const { chart, commonBackgroundPop } = toRefs(props)
 const initParams = () => {
   if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
     chart.value.customStyle.component = {

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

@@ -1799,7 +1799,14 @@ const deleteChartFieldItem = id => {
     <template v-if="mobileInPc">
       <el-container direction="vertical">
         <el-scrollbar class="drag_main_area">
-          <template v-if="view.plugin?.isPlugin">
+          <VQueryChartStyle
+            v-if="view.type === 'VQuery' && curComponent"
+            :element="curComponent"
+            :common-background-pop="curComponent?.commonBackground"
+            :chart="view"
+            :themes="themes"
+          />
+          <template v-else-if="view.plugin?.isPlugin">
             <plugin-component
               :jsname="view.plugin.staticMap['editor-style']"
               :view="view"

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

@@ -94,8 +94,13 @@ const hanedleMessage = event => {
   }
 
   if (event.data.type === 'curComponentChange') {
-    // 移动端CurComponent引用不在主dvMain中
+    // 移动端CurComponent引用不在主dvMain中 1111
     dvMainStore.setCurComponent({ component: event.data.value, index: 0 })
+    if (!!event.data.value) {
+      activeCollapse.value = 'componentStyle'
+    } else {
+      activeCollapse.value = 'com'
+    }
   }
 
   if (event.data.type === 'delFromMobile') {