refactor: 画布优化

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

 <template>
+  <div id="canvasInfoMain" ref="canvasInfoMain" class="main-class">
     <div id="canvasInfoTemp" ref="canvasInfoTemp" :style="customStyle" class="bg" @mouseup="deselectCurComponent" @mousedown="handleMouseDown">
       <el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
         {{ $t('panel.panelNull') }}
@@ -28,6 +29,7 @@
         <UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
       </el-dialog>
     </div>
+  </div>
 </template>
 
 <script>
@@ -155,7 +157,7 @@ export default {
     erd.listenTo(tempDom, element => {
       _this.$nextTick(() => {
         _this.restore()
-        //将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
+        // 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
         _this.mainHeight = tempDom.scrollHeight + 'px!important'
       })
     })
@@ -182,12 +184,14 @@ export default {
     changeStyleWithScale,
     getStyle,
     restore() {
-      const canvasHeight = document.getElementById('canvasInfoTemp').offsetHeight
-      const canvasWidth = document.getElementById('canvasInfoTemp').offsetWidth
+      const canvasHeight = document.getElementById('canvasInfoMain').offsetHeight
+      const canvasWidth = document.getElementById('canvasInfoMain').offsetWidth
       this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
       this.scaleHeight = canvasHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比
 
-      this.scaleHeight = this.scaleWidth
+      console.log('scaleHeight:' + this.scaleHeight + ';ch:' + this.canvasStyleData.height)
+
+      // this.scaleHeight = this.scaleWidth
       // this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
       // if (this.showType === 'width') {
       //   this.scaleHeight = this.scaleWidth
@@ -263,6 +267,10 @@ export default {
         }
     }
 }
+.main-class {
+  width: 100%;
+  height: 100%;
+}
 .custom-position {
   flex: 1;
   display: flex;