From 5ef299dfcfca4c036c193df863137e30065fcf91 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 1 Jun 2021 13:40:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BC=96=E8=BE=91=E4=BB=AA=E8=A1=A8?=
 =?UTF-8?q?=E7=9B=98=E5=90=8C=E6=97=B6=E6=94=AF=E6=8C=81=E8=87=AA=E9=80=82?=
 =?UTF-8?q?=E5=BA=94=E7=94=BB=E5=B8=83=E5=8C=BA=E5=9F=9F=E5=92=8C=E5=AE=9E?=
 =?UTF-8?q?=E9=99=85=E7=94=BB=E5=B8=83=E5=A4=A7=E5=B0=8F=E4=B8=A4=E7=A7=8D?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/Area.vue         |  37 +-
 .../canvas/components/Editor/index.vue        | 107 ++++-
 .../components/canvas/components/Toolbar.vue  |  24 +-
 .../utils/calculateComponentPositonAndSize.js | 450 +++++++++---------
 .../src/components/canvas/utils/translate.js  |  28 +-
 frontend/src/store/index.js                   |  16 +-
 frontend/src/views/panel/edit/index.vue       |  51 +-
 frontend/src/views/panel/list/PanelList.vue   |  14 +-
 frontend/src/views/panel/panel.js             |   7 +-
 9 files changed, 450 insertions(+), 284 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/Area.vue b/frontend/src/components/canvas/components/Editor/Area.vue
index a9e6d30e61..c9d5efb1a7 100644
--- a/frontend/src/components/canvas/components/Editor/Area.vue
+++ b/frontend/src/components/canvas/components/Editor/Area.vue
@@ -1,25 +1,28 @@
 <template>
-    <div :style="{
-        left: start.x + 'px',
-        top: start.y + 'px',
-        width: width + 'px',
-        height: height + 'px',
-    }" class="area"></div>
+  <div
+    :style="{
+      left: start.x + 'px',
+      top: start.y + 'px',
+      width: width + 'px',
+      height: height + 'px',
+    }"
+    class="area"
+  />
 </template>
 
 <script>
 export default {
-    props: {
-        start: {
-            type: Object,
-        },
-        width: {
-            type: Number,
-        },
-        height: {
-            type: Number,
-        },
+  props: {
+    start: {
+      type: Object
     },
+    width: {
+      type: Number
+    },
+    height: {
+      type: Number
+    }
+  }
 }
 </script>
 
@@ -28,4 +31,4 @@ export default {
     border: 1px solid #70c0ff;
     position: absolute;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 224e01ae75..16e73a204f 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -14,13 +14,15 @@
     <Shape
       v-for="(item, index) in componentData"
       :key="item.id"
-      :default-style="item.style"
+      :default-style="getShapeStyleInt(item.style)"
       :style="getShapeStyle(item.style)"
       :active="item === curComponent"
       :element="item"
       :index="index"
       :class="{ lock: item.isLock }"
     >
+      <!--      item.style-&#45;&#45;{{ item.style }}-->
+      <!--      item.style-&#45;&#45;{{ getShapeStyleInt(item.style) }}-->
 
       <component
         :is="item.component"
@@ -76,6 +78,7 @@ import Grid from './Grid'
 import { changeStyleWithScale } from '@/components/canvas/utils/translate'
 import { Condition } from '@/components/widget/bean/Condition'
 import bus from '@/utils/bus'
+
 export default {
   components: { Shape, ContextMenu, MarkLine, Area, Grid },
   props: {
@@ -86,6 +89,10 @@ export default {
     filter: {
       type: Object,
       require: false
+    },
+    outStyle: {
+      type: Object,
+      require: false
     }
   },
   data() {
@@ -99,31 +106,58 @@ export default {
       width: 0,
       height: 0,
       isShowArea: false,
-      conditions: []
+      conditions: [],
+      scaleWidth: 100,
+      scaleHeight: 100,
+      timer: null,
+      needToChangeHeight: [
+        'top',
+        'height',
+        'fontSize',
+        'borderWidth'
+      ],
+      needToChangeWidth: [
+        'left',
+        'width'
+      ]
+    }
+  },
+  watch: {
+    outStyle: {
+      handler(newVal, oldVla) {
+        this.changeScale()
+      },
+      deep: true
+    },
+    canvasStyleData: {
+      handler(newVal, oldVla) {
+        this.changeScale()
+      },
+      deep: true
     }
   },
   computed: {
+
     customStyle() {
       let style = {
-        width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
-        height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px'
+        width: this.format(this.canvasStyleData.width, this.scaleWidth) + 'px',
+        height: this.format(this.canvasStyleData.height, this.scaleHeight) + 'px'
       }
+      console.log('customStyle=>' + JSON.stringify(style))
+
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
           style = {
-            width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
-            height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px',
-            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`
+            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`,
+            ...style
           }
         } else {
           style = {
-            width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
-            height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px',
-            background: this.canvasStyleData.panel.color
+            background: this.canvasStyleData.panel.color,
+            ...style
           }
         }
       }
-
       return style
     },
     panelInfo() {
@@ -153,7 +187,6 @@ export default {
   },
   methods: {
     changeStyleWithScale,
-
     handleMouseDown(e) {
       // 如果没有选中组件 在画布上点击时需要调用 e.preventDefault() 防止触发 drop 事件
       if (!this.curComponent || (this.curComponent.component !== 'v-text' && this.curComponent.component !== 'rect-shape')) {
@@ -218,8 +251,10 @@ export default {
 
       // 根据选中区域和区域中每个组件的位移信息来创建 Group 组件
       // 要遍历选择区域的每个组件，获取它们的 left top right bottom 信息来进行比较
-      let top = Infinity; let left = Infinity
-      let right = -Infinity; let bottom = -Infinity
+      let top = Infinity
+      let left = Infinity
+      let right = -Infinity
+      let bottom = -Infinity
       areaData.forEach(component => {
         let style = {}
         if (component.component === 'Group') {
@@ -303,19 +338,34 @@ export default {
 
     getShapeStyle(style) {
       const result = {};
-      ['width', 'height', 'top', 'left', 'rotate'].forEach(attr => {
-        if (attr !== 'rotate') {
-          result[attr] = style[attr] + 'px'
-        } else {
-          result.transform = 'rotate(' + style[attr] + 'deg)'
-        }
+      ['width', 'left'].forEach(attr => {
+        result[attr] = this.format(style[attr], this.scaleWidth) + 'px'
+      });
+      ['height', 'top'].forEach(attr => {
+        result[attr] = this.format(style[attr], this.scaleHeight) + 'px'
       })
+      result.transform = 'rotate(' + style['rotate'] + 'deg)'
+
+      return result
+    },
+
+    getShapeStyleInt(style) {
+      const result = {};
+      ['width', 'left'].forEach(attr => {
+        result[attr] = this.format(style[attr], this.scaleWidth)
+      });
+      ['height', 'top'].forEach(attr => {
+        result[attr] = this.format(style[attr], this.scaleHeight)
+      })
+      result['rotate'] = style['rotate']
+      result['borderWidth'] = style['borderWidth']
+      result['opacity'] = style['opacity']
 
       return result
     },
 
     getComponentStyle(style) {
-    //   return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
+      //   return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
       return style
     },
 
@@ -368,6 +418,21 @@ export default {
     },
     executeSearch() {
       console.log('当前查询条件是: ' + JSON.stringify(this.conditions))
+    },
+    format(value, scale) {
+      // 自适应画布区域 返回原值
+      if (this.canvasStyleData.selfAdaption) {
+        return parseInt(value * parseInt(scale) / 100)
+      } else {
+        return parseInt(value)
+      }
+    },
+    changeScale() {
+      if (this.outStyle.width && this.outStyle.height) {
+        this.scaleWidth = parseInt(this.outStyle.width * 100 / this.canvasStyleData.width)
+        this.scaleHeight = parseInt(this.outStyle.height * 100 / this.canvasStyleData.height)
+        this.$store.commit('setCurCanvasScale', { scaleWidth: this.scaleWidth, scaleHeight: this.scaleHeight })
+      }
     }
   }
 }
diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index 36c6cdf466..306fd10128 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -1,11 +1,17 @@
 <template>
   <div>
     <div class="toolbar">
+
+      <div class="canvas-config" style="margin-right: 10px">
+        <el-switch v-model="canvasStyleData.selfAdaption" :width="35" label="自适应画布区域" name="selfAdaption" />
+        <span>自适应画布区域 </span>
+      </div>
+
       <div class="canvas-config" style="margin-right: 10px">
         <span> {{ $t('panel.canvas_size') }} </span>
-        <input v-model="canvasStyleData.width">
+        <input v-model="canvasStyleData.width" :disabled="canvasStyleData.selfAdaption">
         <span>*</span>
-        <input v-model="canvasStyleData.height">
+        <input v-model="canvasStyleData.height" :disabled="canvasStyleData.selfAdaption">
       </div>
       <!--      <div class="canvas-config" style="margin-right: 10px">-->
       <!--        <span> {{ $t('panel.canvas_scale') }} </span>-->
@@ -140,7 +146,6 @@ export default {
           ...this.canvasStyleData,
           scale: this.scale
         })
-        this.$nextTick(() => (eventBus.$emit('resizing', '')))
       }, 1000)
     },
 
@@ -320,4 +325,17 @@ export default {
     background-color: #ffffff!important;
   }
 
+   >>>.el-switch__core{
+     width:30px!important;
+     height:15px;
+     /*color:#409EFF;*/
+   }
+  /*设置圆*/
+  >>>.el-switch__core::after{
+    width:14px;
+    height:14px;
+    margin-top:-1px;
+    margin-bottom: 2px;
+  }
+
 </style>
diff --git a/frontend/src/components/canvas/utils/calculateComponentPositonAndSize.js b/frontend/src/components/canvas/utils/calculateComponentPositonAndSize.js
index a0541f2f7c..7e4effc74b 100644
--- a/frontend/src/components/canvas/utils/calculateComponentPositonAndSize.js
+++ b/frontend/src/components/canvas/utils/calculateComponentPositonAndSize.js
@@ -2,272 +2,272 @@
 import { calculateRotatedPointCoordinate, getCenterPoint } from './translate'
 
 const funcs = {
-    lt: calculateLeftTop,
-    t: calculateTop,
-    rt: calculateRightTop,
-    r: calculateRight,
-    rb: calculateRightBottom,
-    b: calculateBottom,
-    lb: calculateLeftBottom,
-    l: calculateLeft,
+  lt: calculateLeftTop,
+  t: calculateTop,
+  rt: calculateRightTop,
+  r: calculateRight,
+  rb: calculateRightBottom,
+  b: calculateBottom,
+  lb: calculateLeftBottom,
+  l: calculateLeft
 }
 
 function calculateLeftTop(style, curPositon, proportion, needLockProportion, pointInfo) {
-    const { symmetricPoint } = pointInfo
-    let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
-    let newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
-    let newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-  
-    let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
-    let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
+  const { symmetricPoint } = pointInfo
+  let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
+  let newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
+  let newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
 
-    if (needLockProportion) {
-        if (newWidth / newHeight > proportion) {
-            newTopLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
-            newWidth = newHeight * proportion
-        } else {
-            newTopLeftPoint.y += Math.abs(newHeight - newWidth / proportion)
-            newHeight = newWidth / proportion
-        }
+  let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
+  let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
 
-        // 由于现在求的未旋转前的坐标是以没按比例缩减宽高前的坐标来计算的
-        // 所以缩减宽高后，需要按照原来的中心点旋转回去，获得缩减宽高并旋转后对应的坐标
-        // 然后以这个坐标和对称点获得新的中心点，并重新计算未旋转前的坐标
-        const rotatedTopLeftPoint = calculateRotatedPointCoordinate(newTopLeftPoint, newCenterPoint, style.rotate)
-        newCenterPoint = getCenterPoint(rotatedTopLeftPoint, symmetricPoint)
-        newTopLeftPoint = calculateRotatedPointCoordinate(rotatedTopLeftPoint, newCenterPoint, -style.rotate)
-        newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-    
-        newWidth = newBottomRightPoint.x - newTopLeftPoint.x
-        newHeight = newBottomRightPoint.y - newTopLeftPoint.y
+  if (needLockProportion) {
+    if (newWidth / newHeight > proportion) {
+      newTopLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
+      newWidth = newHeight * proportion
+    } else {
+      newTopLeftPoint.y += Math.abs(newHeight - newWidth / proportion)
+      newHeight = newWidth / proportion
     }
 
-    if (newWidth > 0 && newHeight > 0) {
-        style.width = Math.round(newWidth)
-        style.height = Math.round(newHeight)
-        style.left = Math.round(newTopLeftPoint.x)
-        style.top = Math.round(newTopLeftPoint.y)
-    }
+    // 由于现在求的未旋转前的坐标是以没按比例缩减宽高前的坐标来计算的
+    // 所以缩减宽高后，需要按照原来的中心点旋转回去，获得缩减宽高并旋转后对应的坐标
+    // 然后以这个坐标和对称点获得新的中心点，并重新计算未旋转前的坐标
+    const rotatedTopLeftPoint = calculateRotatedPointCoordinate(newTopLeftPoint, newCenterPoint, style.rotate)
+    newCenterPoint = getCenterPoint(rotatedTopLeftPoint, symmetricPoint)
+    newTopLeftPoint = calculateRotatedPointCoordinate(rotatedTopLeftPoint, newCenterPoint, -style.rotate)
+    newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+
+    newWidth = newBottomRightPoint.x - newTopLeftPoint.x
+    newHeight = newBottomRightPoint.y - newTopLeftPoint.y
+  }
+
+  if (newWidth > 0 && newHeight > 0) {
+    style.width = Math.round(newWidth)
+    style.height = Math.round(newHeight)
+    style.left = Math.round(newTopLeftPoint.x)
+    style.top = Math.round(newTopLeftPoint.y)
+  }
 }
 
 function calculateRightTop(style, curPositon, proportion, needLockProportion, pointInfo) {
-    const { symmetricPoint } = pointInfo
-    let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
-    let newTopRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
-    let newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-  
-    let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
-    let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
+  const { symmetricPoint } = pointInfo
+  let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
+  let newTopRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
+  let newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
 
-    if (needLockProportion) {
-        if (newWidth / newHeight > proportion) {
-            newTopRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
-            newWidth = newHeight * proportion
-        } else {
-            newTopRightPoint.y += Math.abs(newHeight - newWidth / proportion)
-            newHeight = newWidth / proportion
-        }
+  let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
+  let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
 
-        const rotatedTopRightPoint = calculateRotatedPointCoordinate(newTopRightPoint, newCenterPoint, style.rotate)
-        newCenterPoint = getCenterPoint(rotatedTopRightPoint, symmetricPoint)
-        newTopRightPoint = calculateRotatedPointCoordinate(rotatedTopRightPoint, newCenterPoint, -style.rotate)
-        newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-  
-        newWidth = newTopRightPoint.x - newBottomLeftPoint.x
-        newHeight = newBottomLeftPoint.y - newTopRightPoint.y
-    }
-    
-    if (newWidth > 0 && newHeight > 0) {
-        style.width = Math.round(newWidth)
-        style.height = Math.round(newHeight)
-        style.left = Math.round(newBottomLeftPoint.x)
-        style.top = Math.round(newTopRightPoint.y)
+  if (needLockProportion) {
+    if (newWidth / newHeight > proportion) {
+      newTopRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
+      newWidth = newHeight * proportion
+    } else {
+      newTopRightPoint.y += Math.abs(newHeight - newWidth / proportion)
+      newHeight = newWidth / proportion
     }
+
+    const rotatedTopRightPoint = calculateRotatedPointCoordinate(newTopRightPoint, newCenterPoint, style.rotate)
+    newCenterPoint = getCenterPoint(rotatedTopRightPoint, symmetricPoint)
+    newTopRightPoint = calculateRotatedPointCoordinate(rotatedTopRightPoint, newCenterPoint, -style.rotate)
+    newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+
+    newWidth = newTopRightPoint.x - newBottomLeftPoint.x
+    newHeight = newBottomLeftPoint.y - newTopRightPoint.y
+  }
+
+  if (newWidth > 0 && newHeight > 0) {
+    style.width = Math.round(newWidth)
+    style.height = Math.round(newHeight)
+    style.left = Math.round(newBottomLeftPoint.x)
+    style.top = Math.round(newTopRightPoint.y)
+  }
 }
-  
+
 function calculateRightBottom(style, curPositon, proportion, needLockProportion, pointInfo) {
-    const { symmetricPoint } = pointInfo
-    let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
-    let newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-    let newBottomRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
-  
-    let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
-    let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
+  const { symmetricPoint } = pointInfo
+  let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
+  let newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+  let newBottomRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
 
-    if (needLockProportion) {
-        if (newWidth / newHeight > proportion) {
-            newBottomRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
-            newWidth = newHeight * proportion
-        } else {
-            newBottomRightPoint.y -= Math.abs(newHeight - newWidth / proportion)
-            newHeight = newWidth / proportion
-        }
+  let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
+  let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
 
-        const rotatedBottomRightPoint = calculateRotatedPointCoordinate(newBottomRightPoint, newCenterPoint, style.rotate)
-        newCenterPoint = getCenterPoint(rotatedBottomRightPoint, symmetricPoint)
-        newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-        newBottomRightPoint = calculateRotatedPointCoordinate(rotatedBottomRightPoint, newCenterPoint, -style.rotate)
-  
-        newWidth = newBottomRightPoint.x - newTopLeftPoint.x
-        newHeight = newBottomRightPoint.y - newTopLeftPoint.y
+  if (needLockProportion) {
+    if (newWidth / newHeight > proportion) {
+      newBottomRightPoint.x -= Math.abs(newWidth - newHeight * proportion)
+      newWidth = newHeight * proportion
+    } else {
+      newBottomRightPoint.y -= Math.abs(newHeight - newWidth / proportion)
+      newHeight = newWidth / proportion
     }
 
-    if (newWidth > 0 && newHeight > 0) {
-        style.width = Math.round(newWidth)
-        style.height = Math.round(newHeight)
-        style.left = Math.round(newTopLeftPoint.x)
-        style.top = Math.round(newTopLeftPoint.y)
-    }
+    const rotatedBottomRightPoint = calculateRotatedPointCoordinate(newBottomRightPoint, newCenterPoint, style.rotate)
+    newCenterPoint = getCenterPoint(rotatedBottomRightPoint, symmetricPoint)
+    newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+    newBottomRightPoint = calculateRotatedPointCoordinate(rotatedBottomRightPoint, newCenterPoint, -style.rotate)
+
+    newWidth = newBottomRightPoint.x - newTopLeftPoint.x
+    newHeight = newBottomRightPoint.y - newTopLeftPoint.y
+  }
+
+  if (newWidth > 0 && newHeight > 0) {
+    style.width = Math.round(newWidth)
+    style.height = Math.round(newHeight)
+    style.left = Math.round(newTopLeftPoint.x)
+    style.top = Math.round(newTopLeftPoint.y)
+  }
 }
-  
+
 function calculateLeftBottom(style, curPositon, proportion, needLockProportion, pointInfo) {
-    const { symmetricPoint } = pointInfo
-    let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
-    let newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-    let newBottomLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
+  const { symmetricPoint } = pointInfo
+  let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
+  let newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+  let newBottomLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
 
-    let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
-    let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
+  let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
+  let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
 
-    if (needLockProportion) {
-        if (newWidth / newHeight > proportion) {
-            newBottomLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
-            newWidth = newHeight * proportion
-        } else {
-            newBottomLeftPoint.y -= Math.abs(newHeight - newWidth / proportion)
-            newHeight = newWidth / proportion
-        }
-
-        const rotatedBottomLeftPoint = calculateRotatedPointCoordinate(newBottomLeftPoint, newCenterPoint, style.rotate)
-        newCenterPoint = getCenterPoint(rotatedBottomLeftPoint, symmetricPoint)
-        newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
-        newBottomLeftPoint = calculateRotatedPointCoordinate(rotatedBottomLeftPoint, newCenterPoint, -style.rotate)
-
-        newWidth = newTopRightPoint.x - newBottomLeftPoint.x
-        newHeight = newBottomLeftPoint.y - newTopRightPoint.y
+  if (needLockProportion) {
+    if (newWidth / newHeight > proportion) {
+      newBottomLeftPoint.x += Math.abs(newWidth - newHeight * proportion)
+      newWidth = newHeight * proportion
+    } else {
+      newBottomLeftPoint.y -= Math.abs(newHeight - newWidth / proportion)
+      newHeight = newWidth / proportion
     }
 
-    if (newWidth > 0 && newHeight > 0) {
-        style.width = Math.round(newWidth)
-        style.height = Math.round(newHeight)
-        style.left = Math.round(newBottomLeftPoint.x)
-        style.top = Math.round(newTopRightPoint.y)
-    }
+    const rotatedBottomLeftPoint = calculateRotatedPointCoordinate(newBottomLeftPoint, newCenterPoint, style.rotate)
+    newCenterPoint = getCenterPoint(rotatedBottomLeftPoint, symmetricPoint)
+    newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+    newBottomLeftPoint = calculateRotatedPointCoordinate(rotatedBottomLeftPoint, newCenterPoint, -style.rotate)
+
+    newWidth = newTopRightPoint.x - newBottomLeftPoint.x
+    newHeight = newBottomLeftPoint.y - newTopRightPoint.y
+  }
+
+  if (newWidth > 0 && newHeight > 0) {
+    style.width = Math.round(newWidth)
+    style.height = Math.round(newHeight)
+    style.left = Math.round(newBottomLeftPoint.x)
+    style.top = Math.round(newTopRightPoint.y)
+  }
 }
 
 function calculateTop(style, curPositon, proportion, needLockProportion, pointInfo) {
-    const { symmetricPoint, curPoint } = pointInfo
-    let rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
-    let rotatedTopMiddlePoint = calculateRotatedPointCoordinate({
-        x: curPoint.x,
-        y: rotatedcurPositon.y,
-    }, curPoint, style.rotate)
-  
-    // 勾股定理
-    let newHeight = Math.sqrt((rotatedTopMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedTopMiddlePoint.y - symmetricPoint.y) ** 2)
-    
-    if (newHeight > 0) {
-        const newCenter = {
-            x: rotatedTopMiddlePoint.x - (rotatedTopMiddlePoint.x - symmetricPoint.x) / 2,
-            y: rotatedTopMiddlePoint.y + (symmetricPoint.y - rotatedTopMiddlePoint.y) / 2,
-        }
+  const { symmetricPoint, curPoint } = pointInfo
+  const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
+  const rotatedTopMiddlePoint = calculateRotatedPointCoordinate({
+    x: curPoint.x,
+    y: rotatedcurPositon.y
+  }, curPoint, style.rotate)
 
-        let width = style.width
-        // 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
-        if (needLockProportion) {
-            width = newHeight * proportion
-        }
-        
-        style.width = width
-        style.height = Math.round(newHeight)
-        style.top = Math.round(newCenter.y - (newHeight / 2))
-        style.left = Math.round(newCenter.x - (style.width / 2))
+  // 勾股定理
+  const newHeight = Math.sqrt((rotatedTopMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedTopMiddlePoint.y - symmetricPoint.y) ** 2)
+
+  if (newHeight > 0) {
+    const newCenter = {
+      x: rotatedTopMiddlePoint.x - (rotatedTopMiddlePoint.x - symmetricPoint.x) / 2,
+      y: rotatedTopMiddlePoint.y + (symmetricPoint.y - rotatedTopMiddlePoint.y) / 2
     }
+
+    let width = style.width
+    // 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
+    if (needLockProportion) {
+      width = newHeight * proportion
+    }
+
+    style.width = width
+    style.height = Math.round(newHeight)
+    style.top = Math.round(newCenter.y - (newHeight / 2))
+    style.left = Math.round(newCenter.x - (style.width / 2))
+  }
 }
-  
+
 function calculateRight(style, curPositon, proportion, needLockProportion, pointInfo) {
-    const { symmetricPoint, curPoint } = pointInfo
-    const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
-    const rotatedRightMiddlePoint = calculateRotatedPointCoordinate({
-        x: rotatedcurPositon.x,
-        y: curPoint.y,
-    }, curPoint, style.rotate)
-  
-    let newWidth = Math.sqrt((rotatedRightMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedRightMiddlePoint.y - symmetricPoint.y) ** 2)
-    if (newWidth > 0) {
-        const newCenter = {
-            x: rotatedRightMiddlePoint.x - (rotatedRightMiddlePoint.x - symmetricPoint.x) / 2,
-            y: rotatedRightMiddlePoint.y + (symmetricPoint.y - rotatedRightMiddlePoint.y) / 2,
-        }
+  const { symmetricPoint, curPoint } = pointInfo
+  const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
+  const rotatedRightMiddlePoint = calculateRotatedPointCoordinate({
+    x: rotatedcurPositon.x,
+    y: curPoint.y
+  }, curPoint, style.rotate)
 
-        let height = style.height
-        // 因为调整的是宽度 所以只需根据锁定的比例调整高度即可
-        if (needLockProportion) {
-            height = newWidth / proportion
-        }
-        
-        style.height = height
-        style.width = Math.round(newWidth)
-        style.top = Math.round(newCenter.y - (style.height / 2))
-        style.left = Math.round(newCenter.x - (newWidth / 2))
+  const newWidth = Math.sqrt((rotatedRightMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedRightMiddlePoint.y - symmetricPoint.y) ** 2)
+  if (newWidth > 0) {
+    const newCenter = {
+      x: rotatedRightMiddlePoint.x - (rotatedRightMiddlePoint.x - symmetricPoint.x) / 2,
+      y: rotatedRightMiddlePoint.y + (symmetricPoint.y - rotatedRightMiddlePoint.y) / 2
     }
+
+    let height = style.height
+    // 因为调整的是宽度 所以只需根据锁定的比例调整高度即可
+    if (needLockProportion) {
+      height = newWidth / proportion
+    }
+
+    style.height = height
+    style.width = Math.round(newWidth)
+    style.top = Math.round(newCenter.y - (style.height / 2))
+    style.left = Math.round(newCenter.x - (newWidth / 2))
+  }
 }
-  
+
 function calculateBottom(style, curPositon, proportion, needLockProportion, pointInfo) {
-    const { symmetricPoint, curPoint } = pointInfo
-    const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
-    const rotatedBottomMiddlePoint = calculateRotatedPointCoordinate({
-        x: curPoint.x,
-        y: rotatedcurPositon.y,
-    }, curPoint, style.rotate)
-  
-    const newHeight = Math.sqrt((rotatedBottomMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedBottomMiddlePoint.y - symmetricPoint.y) ** 2)
-    if (newHeight > 0) {
-        const newCenter = {
-            x: rotatedBottomMiddlePoint.x - (rotatedBottomMiddlePoint.x - symmetricPoint.x) / 2,
-            y: rotatedBottomMiddlePoint.y + (symmetricPoint.y - rotatedBottomMiddlePoint.y) / 2,
-        }
+  const { symmetricPoint, curPoint } = pointInfo
+  const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
+  const rotatedBottomMiddlePoint = calculateRotatedPointCoordinate({
+    x: curPoint.x,
+    y: rotatedcurPositon.y
+  }, curPoint, style.rotate)
 
-        let width = style.width
-        // 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
-        if (needLockProportion) {
-            width = newHeight * proportion
-        }
-        
-        style.width = width
-        style.height = Math.round(newHeight)
-        style.top = Math.round(newCenter.y - (newHeight / 2))
-        style.left = Math.round(newCenter.x - (style.width / 2))
+  const newHeight = Math.sqrt((rotatedBottomMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedBottomMiddlePoint.y - symmetricPoint.y) ** 2)
+  if (newHeight > 0) {
+    const newCenter = {
+      x: rotatedBottomMiddlePoint.x - (rotatedBottomMiddlePoint.x - symmetricPoint.x) / 2,
+      y: rotatedBottomMiddlePoint.y + (symmetricPoint.y - rotatedBottomMiddlePoint.y) / 2
     }
+
+    let width = style.width
+    // 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
+    if (needLockProportion) {
+      width = newHeight * proportion
+    }
+
+    style.width = width
+    style.height = Math.round(newHeight)
+    style.top = Math.round(newCenter.y - (newHeight / 2))
+    style.left = Math.round(newCenter.x - (style.width / 2))
+  }
 }
-  
+
 function calculateLeft(style, curPositon, proportion, needLockProportion, pointInfo) {
-    const { symmetricPoint, curPoint } = pointInfo
-    const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
-    const rotatedLeftMiddlePoint = calculateRotatedPointCoordinate({
-        x: rotatedcurPositon.x,
-        y: curPoint.y,
-    }, curPoint, style.rotate)
-  
-    const newWidth = Math.sqrt((rotatedLeftMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedLeftMiddlePoint.y - symmetricPoint.y) ** 2)
-    if (newWidth > 0) {
-        const newCenter = {
-            x: rotatedLeftMiddlePoint.x - (rotatedLeftMiddlePoint.x - symmetricPoint.x) / 2,
-            y: rotatedLeftMiddlePoint.y + (symmetricPoint.y - rotatedLeftMiddlePoint.y) / 2,
-        }
-        
-        let height = style.height
-        if (needLockProportion) {
-            height = newWidth / proportion
-        }
-        
-        style.height = height
-        style.width = Math.round(newWidth)
-        style.top = Math.round(newCenter.y - (style.height / 2))
-        style.left = Math.round(newCenter.x - (newWidth / 2))
+  const { symmetricPoint, curPoint } = pointInfo
+  const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
+  const rotatedLeftMiddlePoint = calculateRotatedPointCoordinate({
+    x: rotatedcurPositon.x,
+    y: curPoint.y
+  }, curPoint, style.rotate)
+
+  const newWidth = Math.sqrt((rotatedLeftMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedLeftMiddlePoint.y - symmetricPoint.y) ** 2)
+  if (newWidth > 0) {
+    const newCenter = {
+      x: rotatedLeftMiddlePoint.x - (rotatedLeftMiddlePoint.x - symmetricPoint.x) / 2,
+      y: rotatedLeftMiddlePoint.y + (symmetricPoint.y - rotatedLeftMiddlePoint.y) / 2
     }
+
+    let height = style.height
+    if (needLockProportion) {
+      height = newWidth / proportion
+    }
+
+    style.height = height
+    style.width = Math.round(newWidth)
+    style.top = Math.round(newCenter.y - (style.height / 2))
+    style.left = Math.round(newCenter.x - (newWidth / 2))
+  }
 }
 
 export default function calculateComponentPositonAndSize(name, style, curPositon, proportion, needLockProportion, pointInfo) {
-    funcs[name](style, curPositon, proportion, needLockProportion, pointInfo)
-}
\ No newline at end of file
+  funcs[name](style, curPositon, proportion, needLockProportion, pointInfo)
+}
diff --git a/frontend/src/components/canvas/utils/translate.js b/frontend/src/components/canvas/utils/translate.js
index 157a8d0d4c..24787269ae 100644
--- a/frontend/src/components/canvas/utils/translate.js
+++ b/frontend/src/components/canvas/utils/translate.js
@@ -126,6 +126,30 @@ export function changeStyleWithScale(value) {
   return value * parseInt(store.state.canvasStyleData.scale) / 100
 }
 
-export function changeStyleWithScaleIn(value, scale) {
-  return value * parseInt(scale) / 100
+// 自适应宽高
+export function changeStyleWithScaleHeightInAuto(value) {
+  const scale = store.state.canvasStyleData.scaleHeight ? store.state.canvasStyleData.scaleHeight : 100
+  const result = value * scale / 100
+  console.log('heightInAuto=>' + scale + ';' + result)
+  return result
+}
+
+// 自适应宽高
+export function changeStyleWithScaleWidthInAuto(value) {
+  const scale = store.state.canvasStyleData.scaleWidth ? store.state.canvasStyleData.scaleWidth : 100
+  const result = value * scale / 100
+  console.log('widthInAuto=>' + scale + ';' + result)
+  return result
+}
+
+export function getOriginStyleHeight(value) {
+  const scale = store.state.canvasStyleData.scaleHeight ? store.state.canvasStyleData.scaleHeight : 100
+  const result = value / (scale / 100)
+  return result
+}
+
+export function getOriginStyleWidth(value) {
+  const scale = store.state.canvasStyleData.scaleWidth ? store.state.canvasStyleData.scaleWidth : 100
+  const result = value / (scale / 100)
+  return result
 }
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index dcde8db87d..e626257d9a 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -42,6 +42,7 @@ const data = {
     canvasStyleData: DEFAULT_COMMON_CANVAS_STYLE, // 页面全局数据  //扩展公共样式 公共的仪表板样式，用来实时响应样式的变化
     componentData: [], // 画布组件数据
     curComponent: null,
+    curCanvasScale: null,
     curComponentIndex: null,
     // 点击画布时是否点中组件，主要用于取消选中组件用。
     // 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
@@ -75,11 +76,16 @@ const data = {
       state.curComponentIndex = index
     },
 
-    setShapeStyle({ curComponent }, { top, left, width, height, rotate }) {
-      if (top) curComponent.style.top = top
-      if (left) curComponent.style.left = left
-      if (width) curComponent.style.width = width
-      if (height) curComponent.style.height = height
+    setCurCanvasScale(state, curCanvasScale) {
+      debugger
+      state.curCanvasScale = curCanvasScale
+    },
+
+    setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
+      if (top) curComponent.style.top = parseInt(canvasStyleData.selfAdaption ? (top * 100 / curCanvasScale.scaleHeight) : top)
+      if (left) curComponent.style.left = parseInt(canvasStyleData.selfAdaption ? (left * 100 / curCanvasScale.scaleWidth) : left)
+      if (width) curComponent.style.width = parseInt(canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width)
+      if (height) curComponent.style.height = parseInt(canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height)
       if (rotate) curComponent.style.rotate = rotate
     },
 
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index b2a3865b97..9f0641d617 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -57,7 +57,7 @@
       </de-aside-container>
 
       <!--画布区域-->
-      <de-main-container style="margin-left: 5px;margin-right: 5px">
+      <de-main-container id="canvasInfo-main" style="margin-left: 5px;margin-right: 5px">
         <!--左侧抽屉-->
         <el-drawer
           :visible.sync="show"
@@ -76,13 +76,14 @@
         </el-drawer>
 
         <div
+          id="canvasInfo"
           class="content this_canvas"
           @drop="handleDrop"
           @dragover="handleDragOver"
           @mousedown="handleMouseDown"
           @mouseup="deselectCurComponent"
         >
-          <Editor style="margin: 15px;" />
+          <Editor :out-style="outStyle" />
         </div>
       </de-main-container>
       <de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">
@@ -147,6 +148,7 @@ import { findOne } from '@/api/panel/panel'
 import PreviewFullScreen from '@/components/canvas/components/Editor/PreviewFullScreen'
 import Preview from '@/components/canvas/components/Editor/Preview'
 import AttrList from '@/components/canvas/components/AttrList.vue'
+import elementResizeDetectorMaker from 'element-resize-detector'
 
 // 引入样式
 import '@/components/canvas/assets/iconfont/iconfont.css'
@@ -187,7 +189,21 @@ export default {
       subjectVisible: false,
       previewVisible: false,
       componentStyleShow: true,
-      aidedButtonActive: false
+      aidedButtonActive: false,
+      timer: null,
+      needToChange: [
+        'top',
+        'left',
+        'width',
+        'height',
+        'fontSize',
+        'borderWidth'
+      ],
+      scale: '100',
+      outStyle: {
+        width: null,
+        height: null
+      }
     }
   },
 
@@ -238,6 +254,15 @@ export default {
     bus.$on('previewFullScreenClose', () => {
       this.previewVisible = false
     })
+    const _this = this
+    const erd = elementResizeDetectorMaker()
+    // 监听div变动事件
+    erd.listenTo(document.getElementById('canvasInfo-main'), element => {
+      _this.$nextTick(() => {
+        debugger
+        _this.restore()
+      })
+    })
   },
   beforeDestroy() {
     const elx = this.$refs.rightPanel
@@ -410,8 +435,24 @@ export default {
     },
     changeAidedDesign() {
       this.aidedButtonActive = !this.aidedButtonActive
+    },
+    getOriginStyle(value) {
+      const scale = this.canvasStyleData.scale
+      const result = value / (parseInt(scale) / 100)
+      return result
+    },
+    restore() {
+      debugger
+      if (document.getElementById('canvasInfo')) {
+        this.$nextTick(() => {
+          const canvasHeight = document.getElementById('canvasInfo').offsetHeight
+          const canvasWidth = document.getElementById('canvasInfo').offsetWidth
+          this.outStyle.height = canvasHeight
+          this.outStyle.width = canvasWidth
+          console.log(canvasHeight + '--' + canvasWidth)
+        })
+      }
     }
-
   }
 }
 </script>
@@ -419,9 +460,9 @@ export default {
 <style scoped>
   .ms-aside-container {
     height: calc(100vh - 91px);
-    min-width: 40px;
     max-width: 60px;
     border: none;
+    width: 60px;
   }
 
   .ms-main-container {
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index 6a43e97d5c..77588006a9 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -217,9 +217,12 @@ export default {
           nodeType: null,
           panelType: null,
           panelStyle: JSON.stringify({
-            width: 1280,
-            height: 720,
+            width: 1600,
+            height: 900,
             scale: 100,
+            scaleWidth: 100,
+            scaleHeight: 100,
+            selfAdaption: true,
             openCommonStyle: true,
             panel: DEFAULT_PANEL_STYLE,
             chart: {
@@ -258,9 +261,12 @@ export default {
           nodeType: null,
           panelType: null,
           panelStyle: JSON.stringify({
-            width: 1280,
-            height: 720,
+            width: 1600,
+            height: 900,
             scale: 100,
+            scaleWidth: 100,
+            scaleHeight: 100,
+            selfAdaption: true,
             openCommonStyle: true,
             panel: DEFAULT_PANEL_STYLE,
             chart: {
diff --git a/frontend/src/views/panel/panel.js b/frontend/src/views/panel/panel.js
index ef650c5077..fdbb2915c2 100644
--- a/frontend/src/views/panel/panel.js
+++ b/frontend/src/views/panel/panel.js
@@ -19,9 +19,12 @@ export const DEFAULT_PANEL_STYLE = {
 }
 
 export const DEFAULT_COMMON_CANVAS_STYLE = {
-  width: 1280,
-  height: 720,
+  width: 1600,
+  height: 900,
   scale: 100,
+  scaleWidth: 100,
+  scaleHeight: 100,
+  selfAdaption: true,
   openCommonStyle: true,
   panel: DEFAULT_PANEL_STYLE,
   chart: {