feat:增加预览背景设置 解决改变窗口大小 echart 有滚动条的问题

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="canvasInfo" class="bg">
+  <div id="canvasInfo" :style="customStyle" class="bg">
     <ComponentWrapper
       v-for="(item, index) in componentDataInfo"
       :key="index"
@@ -51,6 +51,25 @@ export default {
     }
   },
   computed: {
+    customStyle() {
+      let style = {}
+      if (this.canvasStyleData.openCommonStyle) {
+        if (this.canvasStyleData.panel.backgroundType === 'image') {
+          style = {
+            width: '100%',
+            height: '100%',
+            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`
+          }
+        } else {
+          style = {
+            width: '100%',
+            height: '100%',
+            background: this.canvasStyleData.panel.color
+          }
+        }
+      }
+      return style
+    },
     // 此处单独计算componentData的值 不放入全局mapState中
     componentDataInfo() {
       return this.componentDataShow
@@ -81,7 +100,7 @@ export default {
       this.handleScaleChange()
     },
     resetID(data) {
-      if( data ) {
+      if (data) {
         data.forEach(item => {
           item.id = uuid.v1()
         })
@@ -104,7 +123,7 @@ export default {
         })
       })
       this.componentDataShow = componentData
-      eventBus.$emit('resizing', '')
+      this.$nextTick(() => (eventBus.$emit('resizing', '')))
     }
   }
 }
@@ -117,6 +136,7 @@ export default {
     width: 100%;
     height: 100%;
     border: 1px solid #E6E6E6;
+    background-size: 100% !important;
     .canvas-container {
         width: 100%;
         height: 100%;

frontend/src/components/canvas/components/Editor/PreviewEject.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="canvasInfo" class="bg">
+  <div id="canvasInfo" :style="customStyle" class="bg">
     <ComponentWrapper
       v-for="(item, index) in componentDataInfo"
       :key="index"
@@ -47,13 +47,32 @@ export default {
       scaleWidth: '100',
       scaleHeight: '100',
       timer: null,
-      componentDataSource: {},
-      componentData: {},
+      componentDataSource: [],
+      componentData: [],
       canvasStyleData: {}
 
     }
   },
   computed: {
+    customStyle() {
+      let style = {}
+      if (this.canvasStyleData.openCommonStyle) {
+        if (this.canvasStyleData.panel.backgroundType === 'image') {
+          style = {
+            width: '100%',
+            height: '100%',
+            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`
+          }
+        } else {
+          style = {
+            width: '100%',
+            height: '100%',
+            background: this.canvasStyleData.panel.color
+          }
+        }
+      }
+      return style
+    },
     componentDataInfo() {
       return this.componentData
     }
@@ -70,9 +89,6 @@ export default {
         _this.resize()
       })
     })
-    window.onresize = () => {
-      this.resize()
-    }
     // this.resize()
   },
   methods: {
@@ -96,7 +112,7 @@ export default {
       })
     },
     resetID(data) {
-      if( data ) {
+      if (data) {
         data.forEach(item => {
           item.id = uuid.v1()
         })
@@ -120,7 +136,7 @@ export default {
         })
       })
       this.componentData = componentData
-      eventBus.$emit('resizing', '')
+      this.$nextTick(() => (eventBus.$emit('resizing', '')))
     }
   }
 }
@@ -132,6 +148,7 @@ export default {
     min-height: 600px;
     width: 100%;
     height: 100%;
+    background-size: 100% !important;
     overflow: auto;
     position: relative;
     margin: 0;

frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%;height: 100%;background-color: #f7f8fa">
+  <div style="width: 100%;height: 100%;">
     <span style="line-height: 35px; position: absolute; top:10px;right: 20px;z-index:100000">
       <el-button size="mini" @click="toDir">
         关闭

frontend/src/components/canvas/components/Toolbar.vue

@@ -121,7 +121,7 @@ export default {
           ...this.canvasStyleData,
           scale: this.scale
         })
-        eventBus.$emit('resizing', '')
+        this.$nextTick(() => (eventBus.$emit('resizing', '')))
       }, 1000)
     },