feat:预览增加自适应屏幕尺寸功能

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

@@ -1,21 +1,10 @@
 <template>
-  <div v-if="show" class="bg">
-    <el-button class="close" @click="close">关闭</el-button>
-    <div 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 ref="element" class="bg">
+    <ComponentWrapper
+      v-for="(item, index) in componentDataInfo"
+      :key="index"
+      :config="item"
+    />
   </div>
 </template>
 
@@ -25,6 +14,9 @@ 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 { get } from '@/api/panel/panel'
 
 export default {
   components: { ComponentWrapper },
@@ -38,39 +30,87 @@ export default {
       default: false
     }
   },
-  created() {
-    this.restore()
+  data() {
+    return {
+      isShowPreview: false,
+      panelId: '',
+      needToChangeHeight: [
+        'top',
+        'height',
+        'fontSize',
+        'borderWidth'
+      ],
+      needToChangeWidth: [
+        'left',
+        'width'
+      ],
+      scaleWidth: '100',
+      scaleHeight: '100',
+      timer: null,
+      componentData: {},
+      canvasStyleData: {}
+
+    }
+  },
+  computed: {
+    componentDataInfo() {
+      return this.componentData
+    }
+  },
+  mounted() {
+    // 加载数据
+    this.restore()
+    window.onresize = () => {
+      debugger
+      this.resize()
+    }
+    // this.resize()
   },
-  computed: mapState([
-    'componentData',
-    'canvasStyleData'
-  ]),
   methods: {
     changeStyleWithScale,
-
     getStyle,
-
     close() {
       this.$emit('change', false)
     },
+    resize() {
+      this.scaleWidth = window.innerWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
+      this.scaleHeight = window.innerHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比
+      this.handleScaleChange()
+    },
     restore() {
       debugger
-      // 用保存的数据恢复画布
-      if (localStorage.getItem('canvasData')) {
-        this.componentData = this.resetID(JSON.parse(localStorage.getItem('canvasData')))
-      }
-
-      if (localStorage.getItem('canvasStyle')) {
-        this.canvasStyleData = JSON.parse(localStorage.getItem('canvasStyle'))
-        this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
-      }
+      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.canvasStyleData = JSON.parse(response.data.panelStyle)
+        this.resize()
+      })
     },
     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.componentData = componentData
+      eventBus.$emit('resizing', '')
     }
   }
 }
@@ -80,14 +120,8 @@ export default {
   .bg {
     width: 100%;
     height: 100%;
-    .canvas-container {
-      width: 100%;
-      height: 100%;
-      overflow: auto;
-      .canvas {
-        position: relative;
-        margin: auto;
-      }
-    }
+    overflow: auto;
+    position: relative;
+    margin: 0;
   }
 </style>

frontend/src/components/canvas/utils/translate.js

@@ -3,7 +3,7 @@ import store from '@/store'
 // 角度转弧度
 // Math.PI = 180 度
 function angleToRadian(angle) {
-    return angle * Math.PI / 180
+  return angle * Math.PI / 180
 }
 
 /**
@@ -15,7 +15,7 @@ function angleToRadian(angle) {
  * https://www.zhihu.com/question/67425734/answer/252724399 旋转矩阵公式
  */
 export function calculateRotatedPointCoordinate(point, center, rotate) {
-    /**
+  /**
      * 旋转公式：
      *  点a(x, y)
      *  旋转中心c(x, y)
@@ -25,10 +25,10 @@ export function calculateRotatedPointCoordinate(point, center, rotate) {
      * ny = sinθ * (ax - cx) + cosθ * (ay - cy) + cy
      */
 
-    return {
-        x: (point.x - center.x) * Math.cos(angleToRadian(rotate)) - (point.y - center.y) * Math.sin(angleToRadian(rotate)) + center.x,
-        y: (point.x - center.x) * Math.sin(angleToRadian(rotate)) + (point.y - center.y) * Math.cos(angleToRadian(rotate)) + center.y,
-    }
+  return {
+    x: (point.x - center.x) * Math.cos(angleToRadian(rotate)) - (point.y - center.y) * Math.sin(angleToRadian(rotate)) + center.x,
+    y: (point.x - center.x) * Math.sin(angleToRadian(rotate)) + (point.y - center.y) * Math.cos(angleToRadian(rotate)) + center.y
+  }
 }
 
 /**
@@ -39,89 +39,93 @@ export function calculateRotatedPointCoordinate(point, center, rotate) {
  * @return {Object}        旋转后的点坐标
  */
 export function getRotatedPointCoordinate(style, center, name) {
-    let point // point 是未旋转前的坐标
-    switch (name) {
-        case 't':
-            point = {
-                x: style.left + (style.width / 2),
-                y: style.top,
-            }
+  let point // point 是未旋转前的坐标
+  switch (name) {
+    case 't':
+      point = {
+        x: style.left + (style.width / 2),
+        y: style.top
+      }
 
-            break
-        case 'b':
-            point = {
-                x: style.left + (style.width / 2),
-                y: style.top + style.height,
-            }
+      break
+    case 'b':
+      point = {
+        x: style.left + (style.width / 2),
+        y: style.top + style.height
+      }
 
-            break
-        case 'l':
-            point = {
-                x: style.left,
-                y: style.top + style.height / 2,
-            }
+      break
+    case 'l':
+      point = {
+        x: style.left,
+        y: style.top + style.height / 2
+      }
 
-            break
-        case 'r':
-            point = {
-                x: style.left + style.width,
-                y: style.top + style.height / 2,
-            }
+      break
+    case 'r':
+      point = {
+        x: style.left + style.width,
+        y: style.top + style.height / 2
+      }
 
-            break
-        case 'lt':
-            point = {
-                x: style.left,
-                y: style.top,
-            }
+      break
+    case 'lt':
+      point = {
+        x: style.left,
+        y: style.top
+      }
 
-            break
-        case 'rt':
-            point = {
-                x: style.left + style.width,
-                y: style.top,
-            }
+      break
+    case 'rt':
+      point = {
+        x: style.left + style.width,
+        y: style.top
+      }
 
-            break
-        case 'lb':
-            point = {
-                x: style.left,
-                y: style.top + style.height,
-            }
+      break
+    case 'lb':
+      point = {
+        x: style.left,
+        y: style.top + style.height
+      }
 
-            break
-        default: // rb
-            point = {
-                x: style.left + style.width,
-                y: style.top+ style.height,
-            }
+      break
+    default: // rb
+      point = {
+        x: style.left + style.width,
+        y: style.top + style.height
+      }
 
-            break
-    }
+      break
+  }
 
-    return calculateRotatedPointCoordinate(point, center, style.rotate)
+  return calculateRotatedPointCoordinate(point, center, style.rotate)
 }
 
 // 求两点之间的中点坐标
 export function getCenterPoint(p1, p2) {
-    return {
-        x: p1.x + ((p2.x - p1.x) / 2),
-        y: p1.y + ((p2.y - p1.y) / 2),
-    }
+  return {
+    x: p1.x + ((p2.x - p1.x) / 2),
+    y: p1.y + ((p2.y - p1.y) / 2)
+  }
 }
 
 export function sin(rotate) {
-    return Math.abs(Math.sin(angleToRadian(rotate)))
+  return Math.abs(Math.sin(angleToRadian(rotate)))
 }
 
 export function cos(rotate) {
-    return Math.abs(Math.cos(angleToRadian(rotate)))
+  return Math.abs(Math.cos(angleToRadian(rotate)))
 }
 
 export function mod360(deg) {
-    return (deg + 360) % 360
+  return (deg + 360) % 360
 }
 
 export function changeStyleWithScale(value) {
-    return value * parseInt(store.state.canvasStyleData.scale) / 100
+  return value * parseInt(store.state.canvasStyleData.scale) / 100
+}
+
+export function changeStyleWithScaleIn(value, scale) {
+  return value * parseInt(scale) / 100
 }

frontend/src/router/index.js

@@ -72,8 +72,8 @@ export const constantRoutes = [
     ]
   },
   {
-    path: '/preview',
-    component: () => import('@/components/canvas/components/Editor/PreviewFullScreen'),
+    path: '/preview/:reportId',
+    component: () => import('@/components/canvas/components/Editor/PreviewEject'),
     hidden: true
   },
 

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

@@ -417,6 +417,7 @@ export default {
 
     nodeClick(data, node) {
       if (data.nodeType === 'panel') {
+        this.$store.dispatch('panel/setPanelInfo', data)
         this.currGroup = data
         // 加载视图数据
         this.$nextTick(() => {

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

@@ -48,9 +48,10 @@ export default {
   },
   methods: {
     clickPreview() {
+      debugger
       localStorage.setItem('canvasData', JSON.stringify(this.componentData))
       localStorage.setItem('canvasStyle', JSON.stringify(this.canvasStyleData))
-      const url = '#/preview'
+      const url = '#/preview/' + this.$store.state.panel.panelInfo.id
       window.open(url, '_blank')
     }