Merge pull request #11171 from dataease/pr@dev-v2@feat_datav-batchopt

Pr@dev v2@feat datav batchopt
2024-07-25 11:41:18 +08:00 · 2024-07-25 11:41:18 +08:00 · 8b790fddc0
commit 8b790fddc0
parent 9135984a62 508a578f0b
8 changed files with 95 additions and 46 deletions
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
@ -1371,6 +1371,15 @@ const contextMenuShow = computed(() => {

 const markLineShow = computed(() => isMainCanvas(canvasId.value))

+// 批量设置
+
+const dataVBatchOptAdaptor = () => {
+  dvMainStore.setBatchOptStatus(true)
+  areaData.value.components.forEach(component => {
+    dvMainStore.addCurBatchComponent(component)
+  })
+}
+
 // 点击事件导致选择区域变更
 const groupAreaClickChange = async () => {
  let groupAreaCom
@ -1378,8 +1387,12 @@ const groupAreaClickChange = async () => {
  if (groupAreaHis && groupAreaHis.length > 0) {
    groupAreaCom = groupAreaHis[0]
  }
+  if (areaData.value.components.length === 0) {
+    dvMainStore.setBatchOptStatus(false)
+  }
  // 显示Group视括组件
  if (areaData.value.components.length > 1) {
+    dataVBatchOptAdaptor()
    // 重新计算边界
    composeStore.calcComposeArea()
    if (groupAreaHis.length === 0) {
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@ -59,7 +59,7 @@
        :style="getPointStyle(item)"
        @mousedown="handleMouseDownOnPoint(item, $event)"
      ></div>
-      <div class="shape-shadow" v-show="batchOptStatus" @mousedown="batchSelected"></div>
+      <div class="shape-shadow" v-show="batchOptFlag" @mousedown="batchSelected"></div>
      <template v-if="boardMoveActive">
        <div
          v-show="!element.editing"
@ -164,7 +164,8 @@ const shapeLock = computed(() => {

 const showPosition = computed(() => {
  let position
-  if (batchOptStatus.value) {
+  // 数据大屏批量操作合并为分组
+  if (batchOptFlag.value) {
    position = 'batchOpt'
  } else if (isEditMode.value) {
    position = dvInfo.value.type === 'dashboard' ? 'canvas' : 'canvasDataV'
@ -421,7 +422,7 @@ const handleInnerMouseDownOnShape = e => {
  if (!canvasActive.value) {
    return
  }
-  if (dvMainStore.batchOptStatus) {
+  if (batchOptFlag.value) {
    componentEditBarRef.value.batchOptCheckOut()
    e.stopPropagation()
    e.preventDefault()
@ -592,7 +593,7 @@ const selectCurComponent = e => {
 }

 const batchSelected = e => {
-  if (dvMainStore.batchOptStatus) {
+  if (batchOptFlag.value) {
    componentEditBarRef.value.batchOptCheckOut()
    e.stopPropagation()
    e.preventDefault()
@ -823,7 +824,7 @@ const componentBackgroundStyle = computed(() => {

 const editBarShowFlag = computed(() => {
  return (
-    ((active.value || batchOptStatus.value) &&
+    ((active.value || batchOptFlag.value) &&
      ['canvas', 'canvasDataV', 'batchOpt'].includes(showPosition.value)) ||
    linkageSettingStatus.value
  )
@ -921,6 +922,10 @@ const tabMoveInCheck = async () => {
  }
 }

+const batchOptFlag = computed(() => {
+  return batchOptStatus.value && dashboardActive.value
+})
+
 const dragCollision = computed(() => {
  return active.value && Boolean(tabCollisionActiveId.value)
 })
--- a/core/core-frontend/src/components/visualization/ComponentEditBar.vue
+++ b/core/core-frontend/src/components/visualization/ComponentEditBar.vue
@ -440,8 +440,10 @@ const multiplexingCheck = val => {
 // 批量操作-Begin

 const batchOptCheckOut = () => {
-  state.batchOptCheckModel = !state.batchOptCheckModel
-  batchOptChange(state.batchOptCheckModel)
+  if (showPosition.value === 'batchOpt') {
+    state.batchOptCheckModel = !state.batchOptCheckModel
+    batchOptChange(state.batchOptCheckModel)
+  }
 }

 const batchOptChange = val => {
--- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
@ -1273,12 +1273,12 @@ export const dvMainStore = defineStore('dataVisualization', {
      }
      this.canvasStyleData = { ...deepCopy(DEFAULT_CANVAS_STYLE_DATA_DARK), backgroundColor: null }
    },
-    removeGroupArea() {
+    removeGroupArea(curComponentData = this.componentData) {
      // 清理临时组件
-      const groupAreaHis = this.componentData.filter(ele => ele.component === 'GroupArea')
+      const groupAreaHis = curComponentData.filter(ele => ele.component === 'GroupArea')
      if (groupAreaHis && groupAreaHis.length > 0) {
        groupAreaHis.forEach(ele => {
-          this.deleteComponentById(ele.id)
+          this.deleteComponentById(ele.id, curComponentData)
        })
      }
    }
--- a/core/core-frontend/src/store/modules/data-visualization/snapshot.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/snapshot.ts
@ -154,10 +154,11 @@ export const snapshotStore = defineStore('snapshot', {
    recordSnapshot() {
      this.styleChangeTimes = ++this.styleChangeTimes
      if (dataPrepareState.value) {
-        dvMainStore.removeGroupArea()
+        const snapshotComponentData = deepCopy(componentData.value)
+        dvMainStore.removeGroupArea(snapshotComponentData)
        // 添加新的快照
        const newSnapshot = {
-          componentData: deepCopy(componentData.value),
+          componentData: snapshotComponentData,
          canvasStyleData: deepCopy(canvasStyleData.value),
          canvasViewInfo: deepCopy(canvasViewInfo.value),
          cacheViewIdInfo: deepCopy(this.cacheViewIdInfo),
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useI18n } from '@/hooks/web/useI18n'
-import { PropType, toRefs, nextTick, watch, ref } from 'vue'
+import { PropType, toRefs, nextTick, watch, ref, computed } from 'vue'
 import MiscSelector from '@/views/chart/components/editor/editor-style/components/MiscSelector.vue'
 import LabelSelector from '@/views/chart/components/editor/editor-style/components/LabelSelector.vue'
 import TooltipSelector from '@/views/chart/components/editor/editor-style/components/TooltipSelector.vue'
@ -27,7 +27,7 @@ import FlowMapLineSelector from '@/views/chart/components/editor/editor-style/co
 import FlowMapPointSelector from '@/views/chart/components/editor/editor-style/components/FlowMapPointSelector.vue'

 const dvMainStore = dvMainStoreWithOut()
-const { dvInfo } = storeToRefs(dvMainStore)
+const { dvInfo, batchOptStatus } = storeToRefs(dvMainStore)
 const { t } = useI18n()

 const state = {
@ -113,6 +113,10 @@ const emit = defineEmits([
 const indicatorValueRef = ref()
 const indicatorNameRef = ref()

+const positionComponentShow = computed(() => {
+  return !batchOptStatus.value && dvInfo.value.type !== 'dashboard'
+})
+
 const showProperties = (property: EditorProperty) => properties.value?.includes(property)

 const onMiscChange = (val, prop) => {
@ -220,7 +224,7 @@ watch(
            :effect="themes"
            name="position"
            :title="'位置'"
-            v-if="dvInfo.type !== 'dashboard'"
+            v-if="positionComponentShow"
          >
            <component-position :themes="themes" />
          </el-collapse-item>
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue
@ -3,7 +3,7 @@
    <chart-style
      v-if="mixProperties && batchOptComponentInfo && batchOptComponentType === 'UserView'"
      class="chart-style-main"
-      themes="light"
+      :themes="themes"
      :param="param"
      :common-background-pop="batchOptComponentInfo.commonBackground"
      :view="batchOptComponentInfo"
@ -60,6 +60,15 @@ const state = reactive({
  quotaData: []
 })

+const props = withDefaults(
+  defineProps<{
+    themes?: EditorTheme
+  }>(),
+  {
+    themes: 'light'
+  }
+)
+
 const onMiscChange = (val, prop) => {
  batchOptChange('customAttr', 'misc', val.data, prop)
 }
--- a/core/core-frontend/src/views/data-visualization/index.vue
+++ b/core/core-frontend/src/views/data-visualization/index.vue
@ -42,6 +42,7 @@ import DvPreview from '@/views/data-visualization/DvPreview.vue'
 import DeRuler from '@/custom-component/common/DeRuler.vue'
 import { useRequestStoreWithOut } from '@/store/modules/request'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
+import ChartStyleBatchSet from '@/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue'
 const interactiveStore = interactiveStoreWithOut()
 const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
@ -79,7 +80,8 @@ const {
  canvasViewInfo,
  editMode,
  dvInfo,
-  canvasState
+  canvasState,
+  batchOptStatus
 } = storeToRefs(dvMainStore)
 const { editorMap } = storeToRefs(composeStore)
 const canvasOut = ref(null)
@ -471,39 +473,52 @@ eventBus.on('handleNew', handleNew)
      </main>
      <!-- 右侧侧组件列表 -->
      <div style="width: auto; height: 100%" ref="leftSidebarRef">
+        <template v-if="!batchOptStatus">
+          <dv-sidebar
+            v-if="commonPropertiesShow"
+            :title="curComponent['name']"
+            :width="240"
+            :side-name="'componentProp'"
+            :aside-position="'right'"
+            class="left-sidebar"
+            :class="{ 'preview-aside': editMode === 'preview' }"
+          >
+            <component :is="findComponent(curComponent['component'] + 'Attr')" />
+          </dv-sidebar>
+          <dv-sidebar
+            v-show="canvasPropertiesShow"
+            :title="'大屏配置'"
+            :width="240"
+            :side-name="'canvas'"
+            :aside-position="'right'"
+            class="left-sidebar"
+            :class="{ 'preview-aside': editMode === 'preview' }"
+          >
+            <canvas-attr></canvas-attr>
+          </dv-sidebar>
+          <div
+            v-show="viewsPropertiesShow"
+            style="height: 100%"
+            :class="{ 'preview-aside': editMode === 'preview' }"
+          >
+            <editor
+              :view="canvasViewInfo[curComponent ? curComponent.id : 'default']"
+              themes="dark"
+              :dataset-tree="state.datasetTree"
+            ></editor>
+          </div>
+        </template>
        <dv-sidebar
-          v-if="commonPropertiesShow"
-          :title="curComponent['name']"
-          :width="240"
-          :side-name="'componentProp'"
-          :aside-position="'right'"
+          v-if="batchOptStatus"
+          :theme-info="'dark'"
+          title="批量设置样式"
+          :width="280"
+          aside-position="right"
          class="left-sidebar"
-          :class="{ 'preview-aside': editMode === 'preview' }"
+          :side-name="'batchOpt'"
        >
-          <component :is="findComponent(curComponent['component'] + 'Attr')" />
+          <chart-style-batch-set themes="dark"></chart-style-batch-set>
        </dv-sidebar>
-        <dv-sidebar
-          v-show="canvasPropertiesShow"
-          :title="'大屏配置'"
-          :width="240"
-          :side-name="'canvas'"
-          :aside-position="'right'"
-          class="left-sidebar"
-          :class="{ 'preview-aside': editMode === 'preview' }"
-        >
-          <canvas-attr></canvas-attr>
-        </dv-sidebar>
-        <div
-          v-show="viewsPropertiesShow"
-          style="height: 100%"
-          :class="{ 'preview-aside': editMode === 'preview' }"
-        >
-          <editor
-            :view="canvasViewInfo[curComponent ? curComponent.id : 'default']"
-            themes="dark"
-            :dataset-tree="state.datasetTree"
-          ></editor>
-        </div>
      </div>
    </el-container>
  </div>