forked from github/dataease
feat(数据大屏): 组件支持3d设置
This commit is contained in:
wangjiahao
parent
31d727a7c1
commit
6362fef337
@ -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%;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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, // 布局时保持宽高比例
|
||||
|
||||
@ -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 },
|
||||
|
||||
@ -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)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user