Merge pull request #13108 from dataease/pr@dev-v2@fix_screen

fix(数据大屏): 修复数据大屏中时间组件预览未出现等问题 #12118

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

@@ -235,7 +235,8 @@ const resetLayout = () => {
           baseComponentData.value,
           canvasStyleData.value,
           scaleMin.value || outerScale.value * 100,
-          scaleMinHeight || outerScale.value * 100
+          scaleMinHeight || outerScale.value * 100,
+          outerScale.value * 100
         )
         scaleMin.value = isMainCanvas(canvasId.value) ? scaleMin.value : outerScale.value * 100
       }

core/core-frontend/src/custom-component/de-tabs/Component.vue

@@ -129,8 +129,10 @@ import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { getPanelAllLinkageInfo } from '@/api/visualization/linkage'
 import { dataVTabComponentAdd, groupSizeStyleAdaptor } from '@/utils/style'
-import { copyStoreWithOut, deepCopyTabItemHelper } from '@/store/modules/data-visualization/copy'
+import { deepCopyTabItemHelper } from '@/store/modules/data-visualization/copy'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 const dvMainStore = dvMainStoreWithOut()
+const snapshotStore = snapshotStoreWithOut()
 const { tabMoveInActiveId, bashMatrixInfo, editMode, mobileInPc } = storeToRefs(dvMainStore)
 const tabComponentRef = ref(null)
 let carouselTimer = null
@@ -233,6 +235,7 @@ const curPreviewGap = computed(() =>
 function sureCurTitle() {
   state.curItem.title = state.textarea
   state.dialogVisible = false
+  snapshotStore.recordSnapshotCache()
 }
 
 function addTab() {
@@ -245,6 +248,7 @@ function addTab() {
   }
   element.value.propValue.push(newTab)
   editableTabsValue.value = newTab.name
+  snapshotStore.recordSnapshotCache()
 }
 
 function deleteCur(param) {
@@ -286,9 +290,11 @@ function handleCommand(command) {
       break
     case 'deleteCur':
       deleteCur(command.param)
+      snapshotStore.recordSnapshotCache()
       break
     case 'copyCur':
       copyCur(command.param)
+      snapshotStore.recordSnapshotCache()
       break
   }
 }

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

@@ -26,17 +26,18 @@ export function changeSizeWithScale(scale) {
   return changeComponentsSizeWithScale(scale)
 }
 
-export function changeComponentsSizeWithScale(scale) {
+function changeComponentsSizeWithScaleCircle(componentDataCopy, scale) {
-  const componentDataCopy = deepCopy(componentData.value)
   componentDataCopy.forEach(component => {
     Object.keys(component.style).forEach(key => {
       if (needToChangeDirectionAttrs.width.includes(key)) {
         // 根据原来的比例获取样式原来的尺寸
         // 再用原来的尺寸 * 现在的比例得出新的尺寸
-        component.style[key] = format(
+        if (!!component.style[key]) {
-          getOriginStyle(component.style[key], canvasStyleData.value.scale),
+          component.style[key] = format(
-          scale
+            getOriginStyle(component.style[key], canvasStyleData.value.scale),
-        )
+            scale
+          )
+        }
       } else if (needToChangeDirectionAttrs.height.includes(key)) {
         // 根据原来的比例获取样式原来的尺寸
         // 再用原来的尺寸 * 现在的比例得出新的尺寸
@@ -46,6 +47,14 @@ export function changeComponentsSizeWithScale(scale) {
         )
       }
     })
+
+    if (['Group'].includes(component.component)) {
+      changeComponentsSizeWithScaleCircle(component.propValue, scale)
+    } else if (['DeTabs'].includes(component.component)) {
+      component.propValue.forEach(tabItem => {
+        changeComponentsSizeWithScaleCircle(tabItem.componentData, scale)
+      })
+    }
     // 如果是分组组件 则要进行分组内部组件groupStyle进行深度计算
     // 计算逻辑 Group 中样式 * groupComponent.groupStyle[sonKey].
     if (['Group', 'DeTabs'].includes(component.component)) {
@@ -57,7 +66,11 @@ export function changeComponentsSizeWithScale(scale) {
       }
     }
   })
+}
 
+function changeComponentsSizeWithScale(scale) {
+  const componentDataCopy = deepCopy(componentData.value)
+  changeComponentsSizeWithScaleCircle(componentDataCopy, scale)
   dvMainStore.setComponentData(componentDataCopy)
   // 更新画布数组后，需要重新设置当前组件，否则在改变比例后，直接拖动圆点改变组件大小不会生效
   dvMainStore.setCurComponent({
@@ -94,7 +107,8 @@ export function changeRefComponentsSizeWithScalePoint(
   componentDataRef,
   canvasStyleDataRef,
   scaleWidth,
-  scaleHeight
+  scaleHeight,
+  outScale
 ) {
   componentDataRef.forEach(component => {
     Object.keys(component.style).forEach(key => {
@@ -103,14 +117,14 @@ export function changeRefComponentsSizeWithScalePoint(
         // 根据原来的比例获取样式原来的尺寸
         // 再用原来的尺寸 * 现在的比例得出新的尺寸
         component.style[key] = format(
-          getOriginStyle(component.style[key], canvasStyleDataRef.scale),
+          getOriginStyle(component.style[key], canvasStyleDataRef.scale || outScale),
           scaleWidth
         )
       } else if (needToChangeDirectionAttrs.height.includes(key)) {
         // 根据原来的比例获取样式原来的尺寸
         // 再用原来的尺寸 * 现在的比例得出新的尺寸
         component.style[key] = format(
-          getOriginStyle(component.style[key], canvasStyleDataRef.scaleHeight),
+          getOriginStyle(component.style[key], canvasStyleDataRef.scaleHeight || outScale),
           scaleHeight
         )
       }

core/core-frontend/src/views/template-market/index.vue

@@ -240,7 +240,7 @@ const state = reactive({
     },
     {
       value: 'market',
-      label: t('work_branch.template_market_official')
+      label: t('visualization.template_market')
     },
     {
       value: 'manage',