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>

core/core-frontend/src/components/visualization/common/ComponentPosition.vue

@@ -28,6 +28,61 @@
         保持宽高比
       </el-checkbox>
     </el-form-item>
+    <el-row v-if="curComponent && curComponent.multiDimensional">
+      <el-col :span="12">
+        <el-form-item class="form-item" :class="'form-item-' + themes">
+          <el-checkbox
+            size="small"
+            :effect="themes"
+            v-model="curComponent.multiDimensional.enable"
+            @change="multiDimensionalChange"
+          >
+            3D
+          </el-checkbox>
+        </el-form-item>
+        <template v-if="curComponent.multiDimensional.enable">
+          <el-form-item class="form-item" :class="'form-item-' + themes" label="X">
+            <el-input-number
+              :effect="themes"
+              size="middle"
+              :disabled="curComponent['isLock']"
+              :min="-360"
+              :max="360"
+              :step="1"
+              v-model="curComponent.multiDimensional.x"
+              @change="multiDimensionalChange"
+              controls-position="right"
+            />
+          </el-form-item>
+          <el-form-item class="form-item" :class="'form-item-' + themes" label="Y">
+            <el-input-number
+              :effect="themes"
+              size="middle"
+              :disabled="curComponent['isLock']"
+              :min="-360"
+              :max="360"
+              :step="1"
+              v-model="curComponent.multiDimensional.y"
+              @change="multiDimensionalChange"
+              controls-position="right"
+            />
+          </el-form-item>
+          <el-form-item class="form-item" :class="'form-item-' + themes" label="Z">
+            <el-input-number
+              :effect="themes"
+              size="middle"
+              :disabled="curComponent['isLock']"
+              :min="-360"
+              :max="360"
+              :step="1"
+              v-model="curComponent.multiDimensional.z"
+              @change="multiDimensionalChange"
+              controls-position="right"
+            />
+          </el-form-item>
+        </template>
+      </el-col>
+    </el-row>
   </el-form>
 </template>
 
@@ -117,6 +172,9 @@ const maintainRadioChange = () => {
   curComponent.value.aspectRatio = curComponent.value.style.width / curComponent.value.style.height
   snapshotStore.recordSnapshotCache()
 }
+const multiDimensionalChange = () => {
+  // do change
+}
 
 const positionInit = () => {
   if (curComponent.value) {

core/core-frontend/src/custom-component/component-list.ts

@@ -134,6 +134,13 @@ export const ACTION_SELECTION = {
   linkageActive: 'custom'
 }
 
+export const MULTI_DIMENSIONAL = {
+  enable: false,
+  x: 0,
+  y: 0,
+  z: 0
+}
+
 export const COMMON_COMPONENT_BACKGROUND_BASE = {
   backgroundColorSelect: true,
   backgroundImageEnable: false,
@@ -172,6 +179,7 @@ export const commonAttr = {
   animations: [],
   canvasId: 'canvas-main',
   events: BASE_EVENTS,
+  multiDimensional: MULTI_DIMENSIONAL, // 3d 设置
   groupStyle: {}, // 当一个组件成为 Group 的子组件时使用
   isLock: false, // 是否锁定组件
   maintainRadio: false, // 布局时保持宽高比例

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

@@ -5,6 +5,12 @@ export const positionData = [
   { key: 'height', label: 'H', min: 10, max: 20000, step: 10 }
 ]
 
+export const multiDimensionalData = [
+  { key: 'x', label: 'X', min: -360, max: 360, step: 1 },
+  { key: 'y', label: 'W', min: -360, max: 360, step: 1 },
+  { key: 'z', label: 'Y', min: -360, max: 360, step: 1 }
+]
+
 export const styleData = [
   { key: 'lineHeight', label: '行高', min: 0, max: 50, step: 1 },
   { key: 'opacity', label: '不透明度', min: 0, max: 1, step: 0.1 },

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

@@ -3,7 +3,8 @@ import componentList, {
   ACTION_SELECTION,
   BASE_EVENTS,
   COMMON_COMPONENT_BACKGROUND_DARK,
-  COMMON_COMPONENT_BACKGROUND_LIGHT
+  COMMON_COMPONENT_BACKGROUND_LIGHT,
+  MULTI_DIMENSIONAL
 } from '@/custom-component/component-list'
 import eventBus from '@/utils/eventBus'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
@@ -153,6 +154,8 @@ export function historyAdaptor(
       componentItem.style['adaptation'] = componentItem.style['adaptation'] || 'adaptation'
     }
     componentItem['maintainRadio'] = componentItem['maintainRadio'] || false
+    componentItem['multiDimensional'] =
+      componentItem['multiDimensional'] || deepCopy(MULTI_DIMENSIONAL)
     componentItem['aspectRatio'] = componentItem['aspectRatio'] || 1
     if (componentItem.component === 'UserView') {
       componentItem.actionSelection = componentItem.actionSelection || deepCopy(ACTION_SELECTION)