feat(数据大屏): 组件支持3d设置

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

@@ -192,6 +192,17 @@ const commonBackgroundSvgInner = computed(() => {
   }
 })
 
+const slotStyle = computed(() => {
+  // 3d效果支持
+  if (config.value['multiDimensional'] && config.value['multiDimensional']?.enable) {
+    return {
+      transform: `rotateX(${config.value['multiDimensional'].x}deg) rotateY(${config.value['multiDimensional'].y}deg) rotateZ(${config.value['multiDimensional'].z}deg)`
+    }
+  } else {
+    return {}
+  }
+})
+
 const onPointClick = param => {
   emits('onPointClick', param)
 }
@@ -232,7 +243,11 @@ const deepScale = computed(() => scale.value / 100)
         :style="{ color: config.commonBackground.innerImageColor }"
         :name="commonBackgroundSvgInner"
       ></Board>
-      <div class="wrapper-inner-adaptor" :class="{ 'pop-wrapper-inner': popActive }">
+      <div
+        class="wrapper-inner-adaptor"
+        :style="slotStyle"
+        :class="{ 'pop-wrapper-inner': popActive }"
+      >
         <component
           :is="findComponent(config['component'])"
           :view="viewInfo"
@@ -274,6 +289,7 @@ const deepScale = computed(() => scale.value / 100)
   background-size: 100% 100% !important;
   .wrapper-inner-adaptor {
     position: relative;
+    transform-style: preserve-3d;
     width: 100%;
     height: 100%;
   }

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

@@ -48,7 +48,7 @@
           :style="{ color: element.commonBackground.innerImageColor }"
           :name="commonBackgroundSvgInner"
         ></Board>
-        <div class="component-slot">
+        <div class="component-slot" :style="slotStyle">
           <slot></slot>
         </div>
       </div>
@@ -927,6 +927,16 @@ const tabMoveInCheck = async () => {
     }
   }
 }
+const slotStyle = computed(() => {
+  // 3d效果支持
+  if (element.value['multiDimensional'] && element.value['multiDimensional']?.enable) {
+    return {
+      transform: `rotateX(${element.value['multiDimensional'].x}deg) rotateY(${element.value['multiDimensional'].y}deg) rotateZ(${element.value['multiDimensional'].z}deg)`
+    }
+  } else {
+    return {}
+  }
+})
 
 const batchOptFlag = computed(() => {
   return batchOptStatus.value && dashboardActive.value
@@ -974,7 +984,6 @@ onMounted(() => {
 <style lang="less" scoped>
 .shape {
   position: absolute;
-
   .del-from-mobile {
     position: absolute;
     right: 12px;
@@ -1127,5 +1136,6 @@ onMounted(() => {
   width: 100%;
   height: 100%;
   position: relative;
+  transform-style: preserve-3d;
 }
 </style>