From 01eb4abca6be8766d0e514771e849dd7bde17b25 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 6 May 2021 10:58:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=AE=BE=E7=BD=AE=20=E8=A7=A3=E5=86=B3?=
 =?UTF-8?q?=E6=94=B9=E5=8F=98=E7=AA=97=E5=8F=A3=E5=A4=A7=E5=B0=8F=20echart?=
 =?UTF-8?q?=20=E6=9C=89=E6=BB=9A=E5=8A=A8=E6=9D=A1=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/Preview.vue      | 26 +++++++++++++--
 .../canvas/components/Editor/PreviewEject.vue | 33 ++++++++++++++-----
 .../components/Editor/PreviewFullScreen.vue   |  2 +-
 .../components/canvas/components/Toolbar.vue  |  2 +-
 4 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index ef5c9143b3..a082b91ad3 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/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%;
diff --git a/frontend/src/components/canvas/components/Editor/PreviewEject.vue b/frontend/src/components/canvas/components/Editor/PreviewEject.vue
index 209d2d691a..cab7c53fd0 100644
--- a/frontend/src/components/canvas/components/Editor/PreviewEject.vue
+++ b/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;
diff --git a/frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue b/frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue
index a3ba065164..730c1c558f 100644
--- a/frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue
+++ b/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">
         关闭
diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index d1aa4a9b60..3aaf038dbf 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/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)
     },