From 5eec729cc139469ea014ba537e5d57fd58a7e065 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 25 Jul 2024 10:44:22 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?=
 =?UTF-8?q?=20=E4=BF=AE=E5=A4=8D=E7=BB=84=E5=90=88=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E5=A4=9A=E9=80=89=E5=A4=A7=E5=B1=8F=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E5=90=8E=EF=BC=8C=E6=8B=96=E5=8A=A8=E8=BE=B9=E6=A1=86?=
 =?UTF-8?q?=E5=90=8E=E7=BB=84=E5=90=88=E5=87=BA=E7=8E=B0=E9=9A=90=E8=97=8F?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=AD=89=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/store/modules/data-visualization/dvMain.ts          | 6 +++---
 .../src/store/modules/data-visualization/snapshot.ts        | 5 +++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
index 36709fb489..567afe4125 100644
--- 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)
         })
       }
     }
diff --git a/core/core-frontend/src/store/modules/data-visualization/snapshot.ts b/core/core-frontend/src/store/modules/data-visualization/snapshot.ts
index 627ba302d5..085235bc3c 100644
--- 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),

From 508a578f0b46fd083f5bdcb678d505891e949e73 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 25 Jul 2024 11:40:26 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?=
 =?UTF-8?q?=20=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=89=B9=E9=87=8F=E6=A0=B7=E5=BC=8F=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/CanvasCore.vue  | 13 ++++
 .../data-visualization/canvas/Shape.vue       | 15 ++--
 .../visualization/ComponentEditBar.vue        |  6 +-
 .../editor/editor-style/ChartStyle.vue        | 10 ++-
 .../editor-style/ChartStyleBatchSet.vue       | 11 ++-
 .../src/views/data-visualization/index.vue    | 75 +++++++++++--------
 6 files changed, 89 insertions(+), 41 deletions(-)

diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
index 1532403877..daffd76982 100644
--- 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) {
diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
index 795cdd1e5e..6387da7b24 100644
--- 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)
 })
diff --git a/core/core-frontend/src/components/visualization/ComponentEditBar.vue b/core/core-frontend/src/components/visualization/ComponentEditBar.vue
index 9302dcc6c1..dc75986ba2 100644
--- 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 => {
diff --git 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
index 8332d3b4b7..e6e9dc8ee8 100644
--- 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>
diff --git 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
index 6d424a5df6..04b65605ab 100644
--- 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)
 }
diff --git a/core/core-frontend/src/views/data-visualization/index.vue b/core/core-frontend/src/views/data-visualization/index.vue
index 084254aadf..5f102a55b1 100644
--- 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>