feat(数据大屏): 数据大屏支持复用组件功能 #9545

core/core-frontend/src/store/modules/data-visualization/copy.ts

@@ -42,6 +42,7 @@ export const copyStore = defineStore('copy', {
     ) {
       // eslint-disable-next-line @typescript-eslint/no-this-alias
       const _this = this
+      const { width, height, scale } = canvasStyleData.value
       Object.keys(outerMultiplexingComponents).forEach(function (componentId, index) {
         const newComponent = deepCopy(outerMultiplexingComponents[componentId])
         newComponent.canvasId = 'canvas-main'
@@ -56,10 +57,10 @@ export const copyStore = defineStore('copy', {
           newComponent.x = newComponent.sizeX * xPositionOffset + 1
           newComponent.y = 200
           // dataV 数据大屏
-          newComponent.style.width = canvasStyleData.value.width / 3
-          newComponent.style.height = canvasStyleData.value.height / 3
-          newComponent.style.left = newComponent.style.width * xPositionOffset
-          newComponent.style.top = newComponent.style.height * yPositionOffset
+          newComponent.style.width = (width * scale) / 400
+          newComponent.style.height = (height * scale) / 400
+          newComponent.style.left = 0
+          newComponent.style.top = 0
         }
         _this.copyData = {
           data: [newComponent],
@@ -85,6 +86,8 @@ export const copyStore = defineStore('copy', {
       }
       const dataArray = this.copyData.data
 
+      console.log('past=' + JSON.stringify(dataArray))
+
       let i = 0
       const copyDataTemp = this.copyData
       const moveTime = dataArray.length > 1 ? 300 : 10

core/core-frontend/src/views/data-visualization/MultiplexPreviewShow.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { nextTick, onBeforeMount, reactive, ref, toRefs, watch } from 'vue'
+import { computed, nextTick, onBeforeMount, reactive, ref, toRefs, watch } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { getCanvasStyle } from '@/utils/style'
 const dvMainStore = dvMainStoreWithOut()
 const viewShow = ref(true)
 
@@ -25,6 +26,8 @@ const props = defineProps({
 
 const { canvasStyleData, componentData, canvasViewInfo, dvInfo } = toRefs(props)
 
+const canvasStyle = computed(() => getCanvasStyle(canvasStyleData.value))
+
 const filterNodeMethod = (value, data) => {
   return !value || data.multiplexActive
 }
@@ -82,6 +85,13 @@ watch(
   }
 )
 
+watch(
+  () => state.showSelected,
+  newValue => {
+    multiplexInfoTree.value?.filter(newValue)
+  }
+)
+
 const init = () => {
   dvMainStore.initCurMultiplexingComponents()
   curMultiplexTargetComponentsInfo.value = []
@@ -162,16 +172,19 @@ onBeforeMount(() => {
       </el-tree>
     </el-col>
     <el-col :span="18" class="preview-show">
-      <div class="view-show-content">
-        <ComponentWrapper
-          v-if="viewShow && state.multiplexInfo && state.multiplexInfo.id"
-          class="wrapper-content"
-          :view-info="canvasViewInfo[state.multiplexInfo.id]"
-          :config="state.multiplexInfo"
-          :canvas-style-data="canvasStyleData"
-          :dv-info="dvInfo"
-          :canvas-view-info="canvasViewInfo"
-        />
+      <div class="view-show-content-outer">
+        <div class="view-show-content">
+          <ComponentWrapper
+            v-if="viewShow && state.multiplexInfo && state.multiplexInfo.id"
+            class="wrapper-content"
+            :style="canvasStyle"
+            :view-info="canvasViewInfo[state.multiplexInfo.id]"
+            :config="state.multiplexInfo"
+            :canvas-style-data="canvasStyleData"
+            :dv-info="dvInfo"
+            :canvas-view-info="canvasViewInfo"
+          />
+        </div>
       </div>
     </el-col>
   </el-row>
@@ -514,14 +527,20 @@ span {
   width: 100%;
   height: 100%;
 }
+.view-show-content-outer {
+  width: 100%;
+  height: 100%;
+  padding: 12px;
+  background: #ffffff;
+}
 .view-show-content {
   position: relative;
   width: 100%;
   height: 100%;
-  background: #ffffff;
   .wrapper-content {
     width: 100%;
     height: 100%;
+    background-size: 100% 100% !important;
   }
 }
 </style>

core/core-frontend/src/views/data-visualization/PreviewShow.vue

@@ -8,7 +8,7 @@ import PreviewHead from '@/views/data-visualization/PreviewHead.vue'
 import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
 import { storeToRefs } from 'pinia'
 import { useAppStoreWithOut } from '@/store/modules/app'
-import { initCanvasData } from '@/utils/canvasUtils'
+import { initCanvasData, initCanvasDataPrepare } from '@/utils/canvasUtils'
 import { useRequestStoreWithOut } from '@/store/modules/request'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import { useMoveLine } from '@/hooks/web/useMoveLine'
@@ -27,7 +27,7 @@ const dataInitState = ref(true)
 const downloadStatus = ref(false)
 const { width, node } = useMoveLine('DASHBOARD')
 
-defineProps({
+const props = defineProps({
   showPosition: {
     required: false,
     type: String,
@@ -62,8 +62,9 @@ function createNew() {
 }
 
 const loadCanvasData = (dvId, weight?) => {
+  const initMethod = props.showPosition === 'multiplexing' ? initCanvasDataPrepare : initCanvasData
   dataInitState.value = false
-  initCanvasData(
+  initMethod(
     dvId,
     'dataV',
     function ({
@@ -141,6 +142,14 @@ const mouseleave = () => {
   appStore.setArrowSide(false)
 }
 
+const getPreviewStateInfo = () => {
+  return state
+}
+
+defineExpose({
+  getPreviewStateInfo
+})
+
 onBeforeMount(() => {
   dvMainStore.canvasDataInit()
 })
@@ -192,7 +201,10 @@ onBeforeMount(() => {
           @download="download"
           @downloadAsAppTemplate="downloadAsAppTemplate"
         />
-        <div v-if="showPosition === 'multiplexing'" class="content multiplexing-content">
+        <div
+          v-if="showPosition === 'multiplexing' && dataInitState"
+          class="content multiplexing-content"
+        >
           <multiplex-preview-show
             :component-data="state.canvasDataPreview"
             :canvas-style-data="state.canvasStylePreview"