打印框架优化单位

components.d.ts

@@ -84,6 +84,7 @@ declare module 'vue' {
     YvanCircleProps: typeof import('./src/components/elements/YvanCircleProps.vue')['default']
     YvanComplexTable: typeof import('./src/components/elements/yvan-table/YvanComplexTable.vue')['default']
     YvanComplexTableProps: typeof import('./src/components/elements/yvan-table/YvanComplexTableProps.vue')['default']
+    YvanDesigner: typeof import('./src/components/YvanDesigner.vue')['default']
     YvanFieldText: typeof import('./src/components/elements/YvanFieldText.vue')['default']
     YvanFieldTextProps: typeof import('./src/components/elements/YvanFieldTextProps.vue')['default']
     YvanGroup: typeof import('./src/components/elements/YvanGroup.vue')['default']

src/App.vue

@@ -1,15 +1,3 @@
 <template>
-  <div class="yvan-print">
-    <yvan-print-designer />
-  </div>
-</template>
-
-<script setup lang="ts">
-import YvanPrintDesigner from "@/components/YvanPrintDesigner.vue";
-</script>
-
-<style lang="less" scoped>
-.yvan-print {
-  height: 100%;
-}
-</style>
+  <router-view />
+</template>

src/components/YvanDesigner.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="yvan-print">
+    <YvanPrintDesigner/>
+  </div>
+</template>
+
+<script lang="ts">
+import {globalStore} from "@/store";
+import {PrintTemplateParamApi} from "@/api";
+import YvanPrintDesigner from "@/components/YvanPrintDesigner.vue";
+
+export default {
+  name: 'YvanDesigner',
+  components: {
+    YvanPrintDesigner
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+    const printTemplateId = this.$route.params.printTemplateId;
+    if (printTemplateId) {
+      this.loadPrintTemplateParamList(printTemplateId);
+    }
+  },
+  methods: {
+    async loadPrintTemplateParamList(printTemplateId) {
+      const printTemplateParamList = await PrintTemplateParamApi.getPrintTemplateParamList(printTemplateId);
+      console.log('printTemplateParamList >> ', printTemplateParamList)
+      for (let printTemplateParam of printTemplateParamList) {
+        const datasource = {
+          paramId: printTemplateParam.print_template_param_id,
+          paramName: printTemplateParam.param_name,
+          paramKey: printTemplateParam.param_key,
+          paramType: printTemplateParam.param_type,
+          paramValue: printTemplateParam.param_value,
+          fields: []
+        }
+        const paramFields = JSON.parse(printTemplateParam.param_detail)
+        for (let field of paramFields) {
+          datasource.fields.push({
+            field: field.field,
+            fieldLabel: field.field_label,
+            fieldDict: field.field_dict,
+            formatter: field.formatter,
+            expression: field.expression
+          })
+        }
+        globalStore().addDataSource(datasource);
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.yvan-print {
+  height: 100%;
+}
+</style>

src/components/YvanPrintDesigner.vue

@@ -191,6 +191,7 @@ export default {
         eleA.download = `${this.pageConfig.title + "_" + Date.now()}.json`
         eleA.style.display = 'none'
         const saveData = this.getTemplateJSON()
+        console.log('saveData >>', saveData)
         const blob = new Blob([JSON.stringify(saveData)])
         eleA.href = URL.createObjectURL(blob)
         document.body.appendChild(eleA)

src/components/YvanPrintPageFormat.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="yvan-print-page-format">
-    <el-form label-width="80px">
+    <el-form label-width="100px">
       <el-form-item label="模板名称">
         <el-input v-model="pageConfig.title" placeholder="请输入模板名称"/>
       </el-form-item>
@@ -25,15 +25,13 @@
           </el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="宽度">
+      <el-form-item label="宽度(mm)">
         <el-input-number v-model="pageConfig.pageWidth" controls-position="right" @change="changePageWidth"/>
-        (mm)
       </el-form-item>
-      <el-form-item label="高度">
+      <el-form-item label="高度(mm)">
         <el-input-number v-model="pageConfig.pageHeight" controls-position="right" @change="changePageHeight"/>
-        (mm)
       </el-form-item>
-      <el-form-item label="外边距" class="yvan-print-page-format__margins">
+      <el-form-item label="外边距(mm)" class="yvan-print-page-format__margins">
         <el-input-number v-model="pageConfig.topMargin" placeholder="上" controls-position="right"/>
         <el-input-number v-model="pageConfig.rightMargin" placeholder="右" controls-position="right"/>
         <el-input-number v-model="pageConfig.bottomMargin" placeholder="下" controls-position="right"/>
@@ -77,7 +75,7 @@ const changePageHeight = (newPageHeight) => {
   }
 
   .el-input-number {
-    width: calc(100% - 36px);
+    width: 100%;
   }
 
   .yvan-print-page-format__margins {

src/components/config/globalConfig.ts

@@ -1,5 +1,3 @@
-import {globalStore} from "@/store";
-
 /** 纸张方向 */
 export const pageDirectionList = [
     // vertical or horizontal
@@ -45,12 +43,12 @@ export const commonAttr = {
 }
 
 export const elementBands = [
-    {name: 'Title', code: 'title', height: 30, isDefaultShow: true},
-    {name: 'Page Header', code: 'pageHeader', height: 30, isDefaultShow: true},
+    {name: 'Title', code: 'title', height: 80, isDefaultShow: true},
+    {name: 'Page Header', code: 'pageHeader', height: 80, isDefaultShow: true},
     {name: 'Column Header', code: 'columnHeader', height: 30, isDefaultShow: true},
-    {name: 'Detail', code: 'detail', height: 30, isDefaultShow: true},
+    {name: 'Detail', code: 'detail', height: 80, isDefaultShow: true},
     {name: 'Column Footer', code: 'columnFooter', height: 30, isDefaultShow: true},
-    {name: 'Page Footer', code: 'pageFooter', height: 30, isDefaultShow: true},
+    {name: 'Page Footer', code: 'pageFooter', height: 80, isDefaultShow: true},
     {name: 'Last Page Footer', code: 'lastPageFooter', height: 30, isDefaultShow: false},
     {name: 'Summary', code: 'summary', height: 30, isDefaultShow: false},
 ]

src/components/sketch-ruler/sketchRuler.vue

@@ -87,7 +87,7 @@ export default {
       type: Object,
       default: () => {
         return {
-          x: 200,
+          x: 100,
           y: 100,
           width: 200,
           height: 400
@@ -194,7 +194,7 @@ export default {
     }
   },
   mounted() {
-
+    console.log('props >', this.$props)
   }
 }
 </script>

src/components/yvan-editor/ComponentAdjuster.vue

@@ -256,6 +256,7 @@ export default {
       e.preventDefault()
 
       const style = {...this.defaultStyle}
+      console.log('style >', style)
 
       // 组件宽高比
       const proportion = style.width / style.height
@@ -284,13 +285,12 @@ export default {
             e.target.offsetHeight / this.scale / 2
         )
       }
-
       // 获取对称点的坐标
       const symmetricPoint = {
         x: center.x - (curPoint.x - center.x),
         y: center.y - (curPoint.y - center.y)
       }
-
+      console.log('symmetricPoint >>', symmetricPoint)
       // 是否需要保存快照
       let needSave = false
       let isFirst = true
@@ -308,6 +308,7 @@ export default {
           x: (moveEvent.clientX - Math.round(editorRectInfo.left)) / this.scale,
           y: (moveEvent.clientY - Math.round(editorRectInfo.top)) / this.scale
         }
+        console.log('curPosition >>', curPosition)
         calculateComponentPositionAndSize(
             point,
             style,
@@ -350,7 +351,6 @@ export default {
     handleMouseDownOnShape(event) {
       this.$nextTick(() => eventBus.emit('componentClick'))
       const elementRect = event.target.getBoundingClientRect();
-      console.log('>>> ', {top: elementRect.top, left: elementRect.right})
       EditorUtils.showEditorMenu(elementRect)
       globalStore().setInEditorStatus(true)
       globalStore().setClickComponentStatus(true)
@@ -383,6 +383,7 @@ export default {
       let hasMove = false
       const move = (moveEvent) => {
         hasMove = true
+        EditorUtils.hideEditorMenu()
         const curX = moveEvent.clientX
         const curY = moveEvent.clientY
         const editorRectInfo = this.editor
@@ -390,6 +391,7 @@ export default {
             Math.max(0, (curY - startY) / this.scale + startTop),
             editorRectInfo.offsetHeight - adjuster.offsetHeight
         )
+        console.log(' ===>>>> ', curY, startY, startTop, editorRectInfo.offsetHeight, adjuster.offsetHeight, pos.top)
         pos.left = Math.min(
             Math.max(0, (curX - startX) / this.scale + startLeft),
             editorRectInfo.offsetWidth - adjuster.offsetWidth
@@ -403,7 +405,6 @@ export default {
           // 后面两个参数代表鼠标移动方向
           // curY - startY > 0 true 表示向下移动 false 表示向上移动
           // curX - startX > 0 true 表示向右移动 false 表示向左移动
-          console.log('curX, curY', curX, curY)
           eventBus.emit('move', {
             isDownward: curY - startY > 0,
             isRightward: curX - startX > 0,
@@ -419,6 +420,8 @@ export default {
         eventBus.emit('unmove')
         document.removeEventListener('mousemove', move)
         document.removeEventListener('mouseup', up)
+        const elementRect = e.target.getBoundingClientRect();
+        EditorUtils.showEditorMenu(elementRect)
       }
 
       document.addEventListener('mousemove', move)

src/components/yvan-editor/ComponentBand.vue

@@ -87,7 +87,7 @@ export default {
     },
     bandHeight: {
       type: Number,
-      default: 40
+      default: 80
     },
     usedHeight: {
       type: Number,
@@ -129,7 +129,8 @@ export default {
       showRuler: (state) => state.showRuler,
     }),
     scale() {
-      return new Big(this.realScale).div(new Big(5)).toNumber()
+      // return new Big(this.realScale).div(new Big(5)).toNumber()
+      return new Big(this.realScale).toNumber();
     },
     getElements() {
       const elementBand = this.elementBands ? this.elementBands.get(this.bandCode) : {}
@@ -278,13 +279,13 @@ export default {
 
   .yvan-component-layout__top, .yvan-component-layout__bottom {
     position: absolute;
-    border-top: 1px dashed #ccc;
+    border-top: 1.5px dashed #ccc;
     width: 100%;
     z-index: 100;
   }
 
   .yvan-component-layout__main {
-    border-left: 3px solid var(--yvan-menu-bar-background);
+    //border-left: 3px solid var(--yvan-menu-bar-background);
     position: absolute;
     width: 100%;
     z-index: 5;

src/components/yvan-editor/Editor.vue

@@ -112,8 +112,8 @@ export default {
     return {
       rulerWidth: 0,
       rulerHeight: 0,
-      startX: -20,
-      startY: -25,
+      startX: -10,
+      startY: -15,
       lines: {
         h: [],
         v: []
@@ -162,7 +162,8 @@ export default {
       showRuler: (state) => state.showRuler,
     }),
     scale() {
-      return new Big(this.realScale).div(new Big(5)).toNumber()
+      // return new Big(this.realScale).div(new Big(5)).toNumber()
+      return new Big(this.realScale).toNumber();
     },
     shadow() {
       return {
@@ -174,8 +175,10 @@ export default {
     },
     canvasStyle() {
       return {
-        width: `${this.rectWidth * 5}px`,
-        height: `${this.rectHeight * 5}px`,
+        // width: `${this.rectWidth * 5}px`,
+        // height: `${this.rectHeight * 5}px`,
+        width: `${this.rectWidth}px`,
+        height: `${this.rectHeight}px`,
         transform: `scale(${this.scale})`,
         background: this.pageConfig?.background,
         color: this.pageConfig?.color,
@@ -211,6 +214,8 @@ export default {
       return elementBands.findLast(elementBand => elementBand.code === bandCode);
     },
     getElementBandFormStore(bandCode) {
+      console.log('bandCode >>', bandCode)
+      console.log('elementBand >>', ElementUtils.getElementBandFromStore(bandCode))
       return ElementUtils.getElementBandFromStore(bandCode);
     },
     handleMouseDown(e) {
@@ -223,13 +228,18 @@ export default {
 
       // 获取编辑器的位移信息，每次点击时都需要获取一次。主要是为了方便开发时调试用。
       const rectInfo = this.editor.getBoundingClientRect()
+
+      console.log('reactInfo >>', rectInfo)
       this.editorX = rectInfo.x
       this.editorY = rectInfo.y
 
       const startX = e.clientX
       const startY = e.clientY
+
+      console.log('reactInfo >>', rectInfo)
       this.start.x = (startX - this.editorX) / this.scale
       this.start.y = (startY - this.editorY) / this.scale
+
       // 展示选中区域
       this.isShowArea = true
 
@@ -238,10 +248,12 @@ export default {
         this.height = Math.abs((moveEvent.clientY - startY) / this.scale)
         if (moveEvent.clientX < startX) {
           this.start.x = (moveEvent.clientX - this.editorX) / this.scale
+          console.log('x >> ', this.start.x)
         }
 
         if (moveEvent.clientY < startY) {
           this.start.y = (moveEvent.clientY - this.editorY) / this.scale
+          console.log('y >> ', this.start.y)
         }
       }
 
@@ -383,8 +395,10 @@ export default {
       const screensRect = document.querySelector('#screens').getBoundingClientRect()
       const canvasRect = document.querySelector('#designer-page').getBoundingClientRect()
       // 标尺开始的刻度
-      const startX = (screensRect.left + this.thick - canvasRect.left) / this.realScale
-      const startY = (screensRect.top + this.thick - canvasRect.top) / this.realScale
+      // const startX = (screensRect.left + this.thick - canvasRect.left) / this.realScale
+      // const startY = (screensRect.top + this.thick - canvasRect.top) / this.realScale
+      const startX = (screensRect.left + this.thick - canvasRect.left)
+      const startY = (screensRect.top + this.thick - canvasRect.top)
 
       this.startX = startX
       this.startY = startY
@@ -482,8 +496,8 @@ export default {
 
 .screen-container {
   position: absolute;
-  width: 5000px;
-  height: 5000px;
+  width: 2000px;
+  height: 2000px;
 }
 
 .yvan-print-designer-main__page {

src/components/yvan-editor/EditorCoordinate.vue

@@ -42,8 +42,10 @@ export default {
         this.x = curX
         this.y = curY
         this.coordinateStyle = this.getCoordinateStyle()
-        this.left = new Big(this.curComponent.style.left).div(new Big(5)).toNumber()
-        this.top = new Big(this.curComponent.style.top).div(new Big(5)).toNumber()
+        // this.left = new Big(this.curComponent.style.left).div(new Big(5)).toNumber()
+        // this.top = new Big(this.curComponent.style.top).div(new Big(5)).toNumber()
+        this.left = new Big(this.curComponent.style.left).toNumber()
+        this.top = new Big(this.curComponent.style.top).toNumber()
       })
       eventBus.on('unmove', () => {
         this.showCoordinate = false

src/components/yvan-editor/EditorMenu.vue

@@ -71,6 +71,7 @@ export default {
   //border: 0.5px dotted var(--yvan-menu-bar-background);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
+  z-index: 100;
 
   ul {
     list-style: none;
@@ -80,13 +81,10 @@ export default {
 
     li {
       margin-right: 10px;
-
-      i:hover {
+      &:hover {
         cursor: pointer;
       }
     }
-
-
   }
 }
 </style>

src/components/yvan-ui/YvanPrintToolbar.vue

@@ -64,7 +64,8 @@ export default {
       rectHeight: (store) => store.rectHeight,
     }),
     scale100() {
-      let currentScale = new Big(this.scale).div(new Big(5))
+      // let currentScale = new Big(this.scale).div(new Big(5))
+      let currentScale = new Big(this.scale)
       let num100 = new Big(100)
       return currentScale.mul(num100).toNumber()
     },

src/initialize.ts

@@ -1,5 +1,3 @@
-import {globalStore} from "@/store";
-import {PrintTemplateParamApi} from "@/api";
 import * as Icons from '@ant-design/icons-vue';
 import ElementUtils from "@/utils/ElementUtils";
 
@@ -9,29 +7,5 @@ export default {
             app.component(i, Icons[i])
         }
         ElementUtils.initElementBandCode();
-        const printTemplateParamList = await PrintTemplateParamApi.getPrintTemplateParamList('178746772213465144');
-        console.log('printTemplateParamList >> ', printTemplateParamList)
-        for (let printTemplateParam of printTemplateParamList) {
-            const datasource = {
-                paramId: printTemplateParam.print_template_param_id,
-                paramName: printTemplateParam.param_name,
-                paramKey: printTemplateParam.param_key,
-                paramType: printTemplateParam.param_type,
-                paramValue: printTemplateParam.param_value,
-                fields: []
-            }
-            const paramFields = JSON.parse(printTemplateParam.param_detail)
-            for (let field of paramFields) {
-                datasource.fields.push({
-                    field: field.field,
-                    fieldLabel: field.field_label,
-                    fieldDict: field.field_dict,
-                    formatter: field.formatter,
-                    expression: field.expression
-                })
-            }
-            globalStore().addDataSource(datasource);
-        }
-        console.log('datasource >> ', globalStore().dataSources)
     }
 }

src/main.ts

@@ -1,14 +1,15 @@
-import {createApp} from 'vue'
-import {createPinia} from 'pinia'
-import ElementPlus from 'element-plus'
 import '@/style.css'
 import '@/assets/style/main.less'
 import '@/assets/style/variable.css'
 import 'element-plus/theme-chalk/index.css'
 import App from '@/App.vue'
-import elements from "@/components/elements"
+import {createApp} from 'vue'
+import {router} from "@/router"
+import {createPinia} from 'pinia'
 import initialize from "@/initialize"
+import ElementPlus from 'element-plus'
+import elements from "@/components/elements"
 
 const pinia = createPinia()
 
-createApp(App).use(elements).use(pinia).use(ElementPlus, {}).use(initialize).mount('#app');
+createApp(App).use(elements).use(pinia).use(router).use(ElementPlus, {}).use(initialize).mount('#app');

src/router.ts

@@ -1,17 +1,10 @@
-import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
-
-// 基本页面
-const basePages = {
-    // design: () => import('@/pages/Design.vue'),
-    // studio: () => import('@/pages/Studio.vue'),
-    // 404: () => import('@/components/NotFound.vue'),
-}
-
+import YvanDesigner from "@/components/YvanDesigner.vue";
+import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router';
 /** 获取路由数据 */
-async function getRoutes(): Promise<RouteRecordRaw[]> {
-    const routes: RouteRecordRaw[] = [];
-    // 全局404页面
-    routes.push({path: "/:pathMatch(.*)*", component: basePages["404"]});
+function getRoutes(): RouteRecordRaw[] {
+    const routes = [];
+    routes.push({path: "/", component: YvanDesigner})
+    routes.push({path: "/designer/:printTemplateId", component: YvanDesigner})
     return routes;
 }
 
@@ -27,26 +20,15 @@ const router = createRouter({
 const removeRoutesFuc: Array<() => void> = [];
 
 /** 初始化路由 */
-async function initRouter() {
-    // system.setStudioRequest(request)
-
-    const routes = await getRoutes();
+function initRouter() {
+    const routes = getRoutes();
     removeRoutesFuc.forEach(removeRoute => removeRoute());
     removeRoutesFuc.length = 0;
     routes.forEach(route => removeRoutesFuc.push(router.addRoute(route)));
-    router.addRoute({
-        name: "design",
-        path: "/design",
-        component: basePages.design,
-    })
-    router.addRoute({
-        name: "studio",
-        path: "/studio",
-        component: basePages.studio,
-    })
 }
 
+initRouter()
+
 export {
-    initRouter,
     router,
 };

src/store/global.ts

@@ -19,20 +19,21 @@ export const globalStore = defineStore('global', {
             pageConfig: {
                 // 页面方向 h 水平方向 v 垂直方向
                 pageDirection: 'Vertical',
-                // 页面长度：mm
-                pageWidth: 210,
-                // 页面高度：mm
-                pageHeight: 297,
+                // 页面长度：px
+                pageWidth: 595,
+                // 页面高度：px
+                pageHeight: 842,
+                pageSize: 'A4',
                 // 模板标题
                 title: '新建模板',
                 // 模板编码
                 code: 'TEMPLATE',
                 // 默认缩放比例：100%
-                // 页面边距 mm
-                topMargin: 4,
-                rightMargin: 4,
-                bottomMargin: 4,
-                leftMargin: 4,
+                // 页面边距 px
+                topMargin: 20,
+                rightMargin: 20,
+                bottomMargin: 20,
+                leftMargin: 20,
                 style: {
                     // 默认缩放比例：100%
                     scale: 1,
@@ -81,16 +82,16 @@ export const globalStore = defineStore('global', {
             this.isClickComponent = status
         },
 
-        setEditMode(state, mode) {
-            state.editMode = mode
+        setEditMode(mode) {
+            this.editMode = mode
         },
 
         setInEditorStatus(status) {
             this.isInEditor = status
         },
 
-        setCanvasStyle(state, style) {
-            state.canvasStyleData = style
+        setCanvasStyle(style) {
+            this.canvasStyleData = style
         },
 
         setCurComponent({component, index}) {
@@ -200,8 +201,8 @@ export const globalStore = defineStore('global', {
             this.dataset = dataset
         },
 
-        setCurTableSettingId(state, id) {
-            state.curTableSettingId = id
+        setCurTableSettingId(id) {
+            this.curTableSettingId = id
         },
 
         setShapeStyle({top, left, width, height, rotate}) {
@@ -226,8 +227,8 @@ export const globalStore = defineStore('global', {
             this.curComponent.style[key] = value
         },
 
-        setComponentData(state, componentData = []) {
-            state.componentData = componentData
+        setComponentData(componentData = []) {
+            this.componentData = componentData
         },
         getElementBandByCode(bandCode) {
             return this.elementBands.get(bandCode);
@@ -320,7 +321,6 @@ export const globalStore = defineStore('global', {
         },
         showEditorMenu({top, left}) {
             const editorMenuPos = EditorUtils.getEditorMenuPos(top, left);
-            console.log('editorMenuPos >> ', editorMenuPos)
             this.editorMenuInfo = {
                 visible: true,
                 style: {
@@ -340,8 +340,8 @@ export const globalStore = defineStore('global', {
         }
     },
     getters: {
-        getPageConfig(state) {
-            return state.pageConfig
+        getPageConfig() {
+            return this.pageConfig
         },
     }
 })

src/store/ruler-things.ts

@@ -8,7 +8,7 @@ const {MIN_SCALE, MAX_SCALE} = CONSTANT
 
 export const ruleStore = defineStore('ruleThings', {
     state: () => ({
-        scale: 5,
+        scale: 1,
         rectWidth: globalStore().getPageConfig.pageWidth,
         rectHeight: globalStore().getPageConfig.pageHeight,
         needReDrawRuler: 0,
@@ -17,23 +17,28 @@ export const ruleStore = defineStore('ruleThings', {
     actions: {
         setScale(nextScale) {
             let nextScaleBig = new Big(nextScale)
-            this.scale = new Big(nextScaleBig).times(new Big(5)).toNumber()
+            // this.scale = new Big(nextScaleBig).times(new Big(5)).toNumber()
+            this.scale = new Big(nextScaleBig).toNumber()
         },
         setBiggerScale() {
             let currentScaleTime5 = new Big(this.scale)
-            let currentScale = currentScaleTime5.div(new Big(5))
+            // let currentScale = currentScaleTime5.div(new Big(5))
+            let currentScale = currentScaleTime5
             let stepScale = new Big(0.1)
             let nextScale = currentScale.plus(stepScale).toNumber()
             let myNextScale = nextScale > MAX_SCALE ? MAX_SCALE : nextScale
-            this.scale = new Big(myNextScale).times(new Big(5)).toNumber()
+            // this.scale = new Big(myNextScale).times(new Big(5)).toNumber()
+            this.scale = new Big(myNextScale).toNumber()
         },
         setSmallerScale() {
             let currentScaleTime5 = new Big(this.scale)
-            let currentScale = currentScaleTime5.div(new Big(5))
+            // let currentScale = currentScaleTime5.div(new Big(5))
+            let currentScale = currentScaleTime5
             let stepScale = new Big(0.1)
             let nextScale = currentScale.minus(stepScale).toNumber()
             let myNextScale = nextScale < MIN_SCALE ? MIN_SCALE : nextScale
-            this.scale = new Big(myNextScale).times(new Big(5)).toNumber()
+            // this.scale = new Big(myNextScale).times(new Big(5)).toNumber()
+            this.scale = new Big(myNextScale).toNumber()
         },
         setReDrawRuler() {
             this.needReDrawRuler += 1

src/utils/translate.js

@@ -1,5 +1,3 @@
-// import store from '@/stores'
-// import Big from 'big.js'
 
 // 角度转弧度
 // Math.PI = 180 度