Merge pull request #3589 from dataease/pr@dev@fix_tab-preview-notice

fix(仪表板): 定时任务预览tab组件内的视图错位的问题

frontend/src/components/DeViewSelect/index.vue

@@ -34,7 +34,7 @@
         :style="{'height': panelHeight + 'px'}"
       >
         <Preview
-          :component-data="componentData"
+          :component-data="mainCanvasComponentData"
           :canvas-style-data="canvasStyleData"
           :panel-info="panelInfo"
           :show-position="showPosition"
@@ -85,6 +85,8 @@ export default {
   },
   data() {
     return {
+      componentData: [],
+      canvasId: 'canvas-main',
       visible: false,
       placement: 'bottom',
       transition: 'el-zoom-in-top',
@@ -100,6 +102,9 @@ export default {
     }
   },
   computed: {
+    mainCanvasComponentData() {
+      return this.componentData.filter(item => item.canvasId === this.canvasId)
+    },
     popperClass() {
       const _c = 'el-view-select-popper ' + this.popoverClass
       return this.disabled ? _c + ' disabled ' : _c
@@ -148,6 +153,7 @@ export default {
         panelDataPrepare(JSON.parse(response.data.panelData), JSON.parse(response.data.panelStyle), rsp => {
           this.viewLoaded = true
           this.componentData = rsp.componentData
+          this.$store.commit('setPreviewComponentData', this.componentData)
           this.canvasStyleData = rsp.componentStyle
           this.loadOptions()
         })

frontend/src/components/canvas/store/copy.js

@@ -108,6 +108,8 @@ export default {
           Vue.set(newView, 'needAdaptor', needAdaptor)
           newView.id = uuid.v1()
           newView.propValue.viewId = res.data
+          newView['canvasId'] = 'canvas-main'
+          newView['canvasPid'] = '0'
           if (newView.filters && newView.filters.length) {
             newView.filters = []
           }

frontend/src/components/canvas/utils/utils.js

@@ -231,6 +231,10 @@ export function imgUrlTrans(url) {
   }
 }
 
-export function getNowCanvasComponentData(canvasId) {
-  return store.state.componentData.filter(item => item.canvasId === canvasId)
+export function getNowCanvasComponentData(canvasId, showPosition) {
+  if (showPosition && (showPosition.includes('email-task') || showPosition.includes('multiplexing'))) {
+    return store.state.previewComponentData.filter(item => item.canvasId === canvasId)
+  } else {
+    return store.state.componentData.filter(item => item.canvasId === canvasId)
+  }
 }

frontend/src/components/widget/DeWidget/DeTabs.vue

@@ -76,6 +76,7 @@
             :canvas-id="element.id+'-'+item.name"
             :panel-info="panelInfo"
             :in-screen="true"
+            :show-position="showPosition"
           />
         </div>
 
@@ -431,7 +432,7 @@ export default {
       if (this.mobileLayoutStatus) {
         return this.pcComponentData.filter(item => item.canvasId === tabCanvasId)
       } else {
-        return getNowCanvasComponentData(tabCanvasId)
+        return getNowCanvasComponentData(tabCanvasId, this.showPosition)
       }
     },
     setContentThemeStyle() {

frontend/src/store/index.js

@@ -152,7 +152,8 @@ const data = {
       width: 0,
       height: 0
     },
-    previewVisible: false
+    previewVisible: false,
+    previewComponentData: []
   },
   mutations: {
     ...animation.mutations,
@@ -245,7 +246,9 @@ const data = {
     setComponentData(state, componentData = []) {
       Vue.set(state, 'componentData', componentData)
     },
-
+    setPreviewComponentData(state, previewComponentData = []) {
+      Vue.set(state, 'previewComponentData', previewComponentData)
+    },
     setComponentViewsData(state, componentViewsData = {}) {
       Vue.set(state, 'componentViewsData', componentViewsData)
     },

frontend/src/views/panel/ViewSelect/multiplexing.vue

@@ -75,7 +75,7 @@ export default {
   },
   computed: {
     mainCanvasComponentData() {
-      return getNowCanvasComponentData(this.canvasId)
+      return this.componentData.filter(item => item.canvasId === this.canvasId)
     }
   },
   watch: {
@@ -105,6 +105,7 @@ export default {
             _this.componentData = rsp.componentData
             _this.canvasStyleData = rsp.componentStyle
             _this.selectedPanel = params
+            _this.$store.commit('setPreviewComponentData', _this.componentData)
           })
         })
       } else if (params.showType === 'view') {