feat: 编辑仪表盘同时支持自适应画布区域和实际画布大小两种编辑模式

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

 <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>
+</style>
\ No newline at end of file

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 })
+      }
     }
   }
 }

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

 <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>

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
 }

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
     },
 

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 {

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: {

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: {