feat(fix): 非自适应画布的 仪表盘展示时 超高显示滚动条,修复间隙不准问题

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

@@ -68,8 +68,4 @@ export default {
 .component {
     position: absolute;
 }
-
-.gap_class{
-  padding:3px;
-}
 </style>

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

@@ -68,15 +68,13 @@ export default {
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
           style = {
-            width: '100%',
-            height: '100%',
-            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`
+            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`,
+            ...style
           }
-        } else {
+        } else if (this.canvasStyleData.panel.backgroundType === 'color') {
           style = {
-            width: '100%',
-            height: '100%',
-            background: this.canvasStyleData.panel.color
+            background: this.canvasStyleData.panel.color,
+            ...style
           }
         }
       }
@@ -117,6 +115,7 @@ export default {
     changeStyleWithScale,
     getStyle,
     restore() {
+      debugger
       const canvasHeight = document.getElementById('canvasInfo').offsetHeight
       const canvasWidth = document.getElementById('canvasInfo').offsetWidth
       this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比

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

@@ -97,8 +97,8 @@ export default {
       this.$emit('change', false)
     },
     resize() {
-      this.scaleWidth = window.innerWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
-      this.scaleHeight = window.innerHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比
+      this.scaleWidth = window.innerWidth * 100 / this.canvasStyleData.width// 获取宽度比
+      this.scaleHeight = window.innerHeight * 100 / this.canvasStyleData.height// 获取高度比
       this.handleScaleChange()
     },
     restore() {
@@ -123,7 +123,7 @@ export default {
     },
 
     format(value, scale) {
-      return value * parseInt(scale) / 100
+      return value * scale / 100
     },
     handleScaleChange() {
       const componentData = deepCopy(this.componentDataSource)

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

@@ -450,9 +450,9 @@ export default {
     format(value, scale) {
       // 自适应画布区域 返回原值
       if (this.canvasStyleData.selfAdaption) {
-        return parseInt(value * parseInt(scale) / 100)
+        return value * scale / 100
       } else {
-        return parseInt(value)
+        return value
       }
     },
     changeScale() {
@@ -479,8 +479,8 @@ export default {
           this.matrixStyle.width = this.outStyle.width / this.matrixCount.x
           this.matrixStyle.height = this.outStyle.height / this.matrixCount.y
         }
-        this.scaleWidth = parseInt(this.outStyle.width * 100 / this.canvasStyleData.width)
-        this.scaleHeight = parseInt(this.outStyle.height * 100 / this.canvasStyleData.height)
+        this.scaleWidth = this.outStyle.width * 100 / this.canvasStyleData.width
+        this.scaleHeight = this.outStyle.height * 100 / this.canvasStyleData.height
         this.$store.commit('setCurCanvasScale',
           {
             scaleWidth: this.scaleWidth,

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

@@ -123,12 +123,12 @@ export default {
     },
     format(value) {
       const scale = this.scale
-      return value * parseInt(scale) / 100
+      return value * scale / 100
     },
 
     getOriginStyle(value) {
       const scale = this.canvasStyleData.scale
-      const result = value / (parseInt(scale) / 100)
+      const result = value / (scale / 100)
       return result
     },
 

frontend/src/store/index.js

@@ -81,10 +81,10 @@ const data = {
     },
 
     setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
-      if (top || top === 0) curComponent.style.top = parseInt(canvasStyleData.selfAdaption ? (top * 100 / curCanvasScale.scaleHeight) : top)
-      if (left || left === 0) curComponent.style.left = parseInt(canvasStyleData.selfAdaption ? (left * 100 / curCanvasScale.scaleWidth) : left)
-      if (width || width === 0) curComponent.style.width = parseInt(canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width)
-      if (height || height === 0) curComponent.style.height = parseInt(canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height)
+      if (top || top === 0) curComponent.style.top = canvasStyleData.selfAdaption ? (top * 100 / curCanvasScale.scaleHeight) : top
+      if (left || left === 0) curComponent.style.left = canvasStyleData.selfAdaption ? (left * 100 / curCanvasScale.scaleWidth) : left
+      if (width || width === 0) curComponent.style.width = canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width
+      if (height || height === 0) curComponent.style.height = canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height
       if (rotate || rotate === 0) curComponent.style.rotate = rotate
       // console.log('setShapeStyle:curComponent' + 'top:' + top + ';left:' + left + '====' + JSON.stringify(curComponent))
     },

frontend/src/views/panel/edit/index.vue

@@ -483,7 +483,7 @@ export default {
     },
     getOriginStyle(value) {
       const scale = this.canvasStyleData.scale
-      const result = value / (parseInt(scale) / 100)
+      const result = value / (scale / 100)
       return result
     },
     restore() {

frontend/src/views/panel/list/PanelViewShow.vue

@@ -47,7 +47,7 @@
       <!-- 仪表板预览区域-->
       <el-row class="panel-design-preview">
         <div ref="imageWrapper" style="width: 100%;height: 100%">
-          <fullscreen style="background: none;height: 100%" :fullscreen.sync="fullscreen">
+          <fullscreen style="height: 100%;background: none" :fullscreen.sync="fullscreen">
             <Preview v-if="showMain" :show-type="canvasStyleData.selfAdaption?'full':'width'" />
           </fullscreen>
         </div>