feat:仪表板可以自动进行无限下拉，取消仪表板尺寸设置，统一为自适应

frontend/src/components/DeDrag/index.vue

@@ -610,7 +610,7 @@ export default {
         const rect = this.$el.parentNode.getBoundingClientRect()
         this.parentX = rect.x
         this.parentY = rect.y
-        return [Math.round(parseFloat(style.getPropertyValue('width'), 10)), Math.round(parseFloat(style.getPropertyValue('height'), 10))]
+        return [Math.round(parseFloat(style.getPropertyValue('width'), 10)), 100000]
       }
       if (typeof this.parent === 'string') {
         const parentNode = document.querySelector(this.parent)

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

@@ -110,12 +110,16 @@ export default {
           }
         }
       }
-      if (this.canvasStyleData.selfAdaption) {
-        style = {
-          overflow: 'hidden',
-          ...style
-        }
-      }
+      // if (this.canvasStyleData.selfAdaption) {
+      //   style = {
+      //     overflow: 'hidden',
+      //     ...style
+      //   }
+      // }
+      // style = {
+      //   overflow-x :'hidden',
+      //   ...style
+      // }
       return style
     },
     // 此处单独计算componentData的值 不放入全局mapState中
@@ -168,10 +172,13 @@ export default {
       const canvasWidth = document.getElementById('canvasInfoTemp').offsetWidth
       this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
       this.scaleHeight = canvasHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比
-      if (this.showType === 'width') {
-        this.scaleHeight = this.scaleWidth
-        this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
-      }
+
+      this.scaleHeight = this.scaleWidth
+      // this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
+      // if (this.showType === 'width') {
+      //   this.scaleHeight = this.scaleWidth
+      //   this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
+      // }
       this.handleScaleChange()
     },
     resetID(data) {

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

@@ -12,7 +12,7 @@
     @mousedown="handleMouseDown"
   >
     <!-- 网格线 -->
-    <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />
+<!--    <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
 
     <!-- 仪表板联动清除按钮-->
     <canvas-opt-bar />
@@ -216,10 +216,10 @@ export default {
         width: 80,
         height: 20
       },
-      // 矩阵数量 默认 12 * 24
+      // 矩阵数量 默认 128 * 72
       matrixCount: {
-        x: 24,
-        y: 72
+        x: 80,
+        y: 45
       },
       customStyleHistory: null,
       showDrag: true,
@@ -555,6 +555,9 @@ export default {
       if (this.canvasStyleData.matrixCount) {
         this.matrixCount = this.canvasStyleData.matrixCount
       }
+      // 1.3 版本重新设计仪表板定位方式，基准画布宽高为 1600*900 宽度自适应当前画布获取缩放比例scaleWidth
+      // 高度缩放比例scaleHeight = scaleWidth 基础矩阵为128*72 矩阵原始宽度12.5*12.5 矩阵高度可以调整
+
       if (this.outStyle.width && this.outStyle.height) {
         // 矩阵计算
         if (!this.canvasStyleData.selfAdaption) {
@@ -642,6 +645,7 @@ export default {
     position: relative;
     /*background: #fff;*/
     margin: auto;
+    overflow-x: hidden;
     background-size:100% 100% !important;
     /*transform-style:preserve-3d;*/
     .lock {

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

@@ -17,18 +17,6 @@
         <el-switch v-model="canvasStyleData.auxiliaryMatrix" :width="35" name="auxiliaryMatrix" />
         <span>{{ $t('panel.matrix_design') }}</span>
       </div>
-
-      <div class="canvas-config" style="margin-right: 10px">
-        <el-switch v-model="canvasStyleData.selfAdaption" :width="35" name="selfAdaption" />
-        <span>{{ $t('panel.canvas_self_adaption') }} </span>
-      </div>
-
-      <div class="canvas-config" style="margin-right: 55px">
-        <span> {{ $t('panel.canvas_size') }} </span>
-        <input v-model="canvasStyleData.width" :disabled="canvasStyleData.selfAdaption">
-        <span>*</span>
-        <input v-model="canvasStyleData.height" :disabled="canvasStyleData.selfAdaption">
-      </div>
       <!--      <div class="canvas-config" style="margin-right: 10px">-->
       <!--        <span> {{ $t('panel.canvas_scale') }} </span>-->
       <!--        <input v-model="scale" @input="handleScaleChange"> %-->
@@ -383,7 +371,7 @@ export default {
     float: right;
     height: 35px;
     line-height: 35px;
-    min-width: 900px;
+    min-width: 500px;
     /*background: #fff;*/
     /*border-bottom: 1px solid #ddd;*/
 

frontend/src/store/index.js

@@ -79,6 +79,9 @@ const data = {
     },
 
     setCanvasStyle(state, style) {
+      if (style) {
+        style['selfAdaption'] = true
+      }
       state.canvasStyleData = style
     },
 

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

@@ -96,7 +96,6 @@
 
         <div
           id="canvasInfo"
-          :class="{'style-hidden':canvasStyleData.selfAdaption}"
           class="content this_canvas"
           @drop="handleDrop"
           @dragover="handleDragOver"
@@ -839,7 +838,7 @@ export default {
   }
 }
   .style-hidden{
-    overflow: hidden;
+    overflow-x: hidden;
   }
 
 </style>

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

@@ -56,7 +56,7 @@
       <el-row class="panel-design-preview">
         <div id="imageWrapper" ref="imageWrapper" style="width: 100%;height: 100%">
           <fullscreen style="height: 100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="fullscreen">
-            <Preview v-if="showMain" :in-screen="!fullscreen" :show-type="canvasStyleData.selfAdaption?'full':'width'" />
+            <Preview v-if="showMain" :in-screen="!fullscreen" :show-type="'width'" />
           </fullscreen>
         </div>
       </el-row>