refactor(数据大屏): 图层管理移动优化

This commit is contained in:
wangjiahao
2024-08-30 18:04:27 +08:00
parent d51fa63cea
commit 72e90896b9
5 changed files with 25 additions and 6 deletions

View File

@@ -187,7 +187,7 @@ const popComponentData = computed(() =>
)
const baseComponentData = computed(() =>
componentData.value.filter(ele => ele.category !== 'hidden' && ele.component !== 'GroupArea')
componentData.value.filter(ele => ele?.category !== 'hidden' && ele.component !== 'GroupArea')
)
const dragOnEnd = ({ oldIndex, newIndex }) => {

View File

@@ -9,7 +9,7 @@ import { storeToRefs } from 'pinia'
import { computed, toRefs } from 'vue'
import { ElDivider } from 'element-plus-secondary'
import eventBus from '@/utils/eventBus'
import { getCurInfo } from '@/store/modules/data-visualization/common'
import { componentArraySort, getCurInfo } from '@/store/modules/data-visualization/common'
import { useEmitt } from '@/hooks/web/useEmitt'
import { XpackComponent } from '@/components/plugin'
const dvMainStore = dvMainStoreWithOut()
@@ -122,6 +122,7 @@ const upComponent = () => {
if (curComponent.value && !isGroupArea.value) {
layerStore.upComponent(curComponent.value.id)
} else if (areaData.value.components.length) {
componentArraySort(areaData.value.components)
areaData.value.components.forEach(component => {
layerStore.upComponent(component.id)
})
@@ -131,7 +132,14 @@ const upComponent = () => {
}
const downComponent = () => {
layerStore.downComponent()
if (curComponent.value && !isGroupArea.value) {
layerStore.downComponent(curComponent.value.id)
} else if (areaData.value.components.length) {
componentArraySort(areaData.value.components, 'top')
areaData.value.components.forEach(component => {
layerStore.downComponent(component.id)
})
}
snapshotStore.recordSnapshotCache('downComponent')
menuOpt('downComponent')
}
@@ -140,6 +148,7 @@ const topComponent = () => {
if (curComponent.value && !isGroupArea.value) {
layerStore.topComponent(curComponent.value.id)
} else if (areaData.value.components.length) {
componentArraySort(areaData.value.components, 'top')
areaData.value.components.forEach(component => {
layerStore.topComponent(component.id)
})
@@ -152,6 +161,7 @@ const bottomComponent = () => {
if (curComponent.value && !isGroupArea.value) {
layerStore.bottomComponent(curComponent.value.id)
} else if (areaData.value.components.length) {
componentArraySort(areaData.value.components)
areaData.value.components.forEach(component => {
layerStore.bottomComponent(component.id)
})
@@ -260,7 +270,6 @@ const editQueryCriteria = () => {
<template v-if="!curComponent['isLock'] && curComponent.category !== 'hidden'">
<li v-if="curComponent.component === 'VQuery'" @click="editQueryCriteria">编辑</li>
<li @click="upComponent">上移一层</li>
<li @click="upComponent">上移一层</li>
<li @click="downComponent">下移一层</li>
<li @click="topComponent">置于顶层</li>
<li @click="bottomComponent">置于底层</li>

View File

@@ -121,7 +121,7 @@ const popComponentData = computed(() =>
)
const baseComponentData = computed(() =>
componentData.value.filter(ele => ele.category !== 'hidden' && ele.component !== 'GroupArea')
componentData.value.filter(ele => ele?.category !== 'hidden' && ele.component !== 'GroupArea')
)
const canvasStyle = computed(() => {
let style = {}