feat(数据大屏): 数据大屏支持批量样式设置

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) {

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)
 })

core/core-frontend/src/components/visualization/ComponentEditBar.vue

@@ -440,8 +440,10 @@ const multiplexingCheck = val => {
 // 批量操作-Begin
 
 const batchOptCheckOut = () => {
-  state.batchOptCheckModel = !state.batchOptCheckModel
+  if (showPosition.value === 'batchOpt') {
-  batchOptChange(state.batchOptCheckModel)
+    state.batchOptCheckModel = !state.batchOptCheckModel
+    batchOptChange(state.batchOptCheckModel)
+  }
 }
 
 const batchOptChange = val => {

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>

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)
 }

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"
+          v-if="batchOptStatus"
-          :title="curComponent['name']"
+          :theme-info="'dark'"
-          :width="240"
+          title="批量设置样式"
-          :side-name="'componentProp'"
+          :width="280"
-          :aside-position="'right'"
+          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>