feat:仪表盘样式适配

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

@@ -1,20 +1,10 @@
 <template>
-  <div class="bg">
-    <div id="preview-parent" class="canvas-container">
-      <div
-        class="canvas"
-        :style="{
-          width: changeStyleWithScale(canvasStyleData.width) + 'px',
-          height: changeStyleWithScale(canvasStyleData.height) + 'px',
-        }"
-      >
-        <ComponentWrapper
-          v-for="(item, index) in componentData"
-          :key="index"
-          :config="item"
-        />
-      </div>
-    </div>
+  <div id="canvasInfo" class="bg">
+    <ComponentWrapper
+      v-for="(item, index) in componentDataInfo"
+      :key="index"
+      :config="item"
+    />
   </div>
 </template>
 
@@ -23,6 +13,10 @@ import { getStyle } from '@/components/canvas/utils/style'
 import { mapState } from 'vuex'
 import ComponentWrapper from './ComponentWrapper'
 import { changeStyleWithScale } from '@/components/canvas/utils/translate'
+import { uuid } from 'vue-uuid'
+import { deepCopy } from '@/components/canvas/utils/utils'
+import eventBus from '@/components/canvas/utils/eventBus'
+import elementResizeDetectorMaker from 'element-resize-detector'
 
 export default {
   components: { ComponentWrapper },
@@ -36,20 +30,84 @@ export default {
       default: false
     }
   },
-  computed: mapState([
-    'componentData',
-    'canvasStyleData'
-  ]),
+  data() {
+    return {
+      isShowPreview: false,
+      panelId: '',
+      needToChangeHeight: [
+        'top',
+        'height',
+        'fontSize',
+        'borderWidth'
+      ],
+      needToChangeWidth: [
+        'left',
+        'width'
+      ],
+      scaleWidth: '100',
+      scaleHeight: '100',
+      timer: null,
+      componentDataShow: []
+    }
+  },
+  computed: {
+    // 此处单独计算componentData的值 不放入全局mapState中
+    componentDataInfo() {
+      return this.componentDataShow
+    },
+    ...mapState([
+      'componentData',
+      'canvasStyleData'
+    ])
+  },
   mounted() {
-    // 计算组件当前合适宽度
+    debugger
+    const _this = this
+    const erd = elementResizeDetectorMaker()
+    // 监听div变动事件
+    erd.listenTo(document.getElementById('canvasInfo'), element => {
+      _this.$nextTick(() => {
+        _this.restore()
+      })
+    })
+    // 监听数据变动事件
+    eventBus.$on('componentDataChange', () => {
+      _this.restore()
+    })
   },
   methods: {
     changeStyleWithScale,
-
     getStyle,
-
-    close() {
-      this.$emit('change', false)
+    restore() {
+      const canvasHeight = document.getElementById('canvasInfo').offsetHeight
+      const canvasWidth = document.getElementById('canvasInfo').offsetWidth
+      this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
+      this.scaleHeight = canvasHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比
+      this.handleScaleChange()
+    },
+    resetID(data) {
+      data.forEach(item => {
+        item.id = uuid.v1()
+      })
+      return data
+    },
+    format(value, scale) {
+      return value * parseInt(scale) / 100
+    },
+    handleScaleChange() {
+      const componentData = deepCopy(this.componentData)
+      componentData.forEach(component => {
+        Object.keys(component.style).forEach(key => {
+          if (this.needToChangeHeight.includes(key)) {
+            component.style[key] = this.format(component.style[key], this.scaleHeight)
+          }
+          if (this.needToChangeWidth.includes(key)) {
+            component.style[key] = this.format(component.style[key], this.scaleWidth)
+          }
+        })
+      })
+      this.componentDataShow = componentData
+      eventBus.$emit('resizing', '')
     }
   }
 }
@@ -57,12 +115,14 @@ export default {
 
 <style lang="scss" scoped>
 .bg {
+    min-width: 600px;
+    min-height: 300px;
     width: 100%;
     height: 100%;
+    border: 1px solid #E6E6E6;
     .canvas-container {
         width: 100%;
         height: 100%;
-        overflow: auto;
       .canvas {
             position: relative;
             margin: auto;

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

@@ -1,5 +1,5 @@
 <template>
-  <div ref="element" class="bg">
+  <div id="canvasInfo" class="bg">
     <ComponentWrapper
       v-for="(item, index) in componentDataInfo"
       :key="index"
@@ -10,12 +10,12 @@
 
 <script>
 import { getStyle } from '@/components/canvas/utils/style'
-import { mapState } from 'vuex'
 import ComponentWrapper from './ComponentWrapper'
 import { changeStyleWithScale } from '@/components/canvas/utils/translate'
 import { uuid } from 'vue-uuid'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
+import elementResizeDetectorMaker from 'element-resize-detector'
 import { get } from '@/api/panel/panel'
 
 export default {
@@ -47,6 +47,7 @@ export default {
       scaleWidth: '100',
       scaleHeight: '100',
       timer: null,
+      componentDataSource: {},
       componentData: {},
       canvasStyleData: {}
 
@@ -58,8 +59,17 @@ export default {
     }
   },
   mounted() {
+    const _this = this
+
     // 加载数据
-    this.restore()
+    _this.restore()
+    const erd = elementResizeDetectorMaker()
+    // 监听div变动事件
+    erd.listenTo(document.getElementById('canvasInfo'), element => {
+      _this.$nextTick(() => {
+        _this.resize()
+      })
+    })
     window.onresize = () => {
       debugger
       this.resize()
@@ -82,7 +92,7 @@ export default {
       this.panelId = this.$route.path.split('/')[2]
       // 加载视图数据
       get('panel/group/findOne/' + this.panelId).then(response => {
-        this.componentData = this.resetID(JSON.parse(response.data.panelData))
+        this.componentDataSource = this.resetID(JSON.parse(response.data.panelData))
         this.canvasStyleData = JSON.parse(response.data.panelStyle)
         this.resize()
       })
@@ -98,7 +108,7 @@ export default {
       return value * parseInt(scale) / 100
     },
     handleScaleChange() {
-      const componentData = deepCopy(this.componentData)
+      const componentData = deepCopy(this.componentDataSource)
       componentData.forEach(component => {
         Object.keys(component.style).forEach(key => {
           if (this.needToChangeHeight.includes(key)) {
@@ -118,6 +128,8 @@ export default {
 
 <style lang="scss" scoped>
   .bg {
+    min-width: 800px;
+    min-height: 600px;
     width: 100%;
     height: 100%;
     overflow: auto;