fl-web-component 2.1.1-beta.2 → 2.1.1-beta.21

package/packages/components/com-flcanvas/index.vue

@@ -35,11 +35,19 @@ function downloadPDF(base64, fileName) {
   URL.revokeObjectURL(url); // 释放URL对象
 }
 import Konva from 'konva';
-import { Vector2 } from "three";
+import { Vector2 } from 'three';
 import DxfParser from 'dxf-parser';
 import DxfParser2 from '@/utils/dxf-parser/DxfParser';
 import jsPDF from 'jspdf';
-import { formatEntity, handleFn, centering, _GenerateArcVertices, _GenerateBulgeVertices } from './components/entityFormatting';
+import _ from 'lodash'
+import {
+  formatEntity,
+  handleFn,
+  centering,
+  _GenerateArcVertices,
+  _GenerateBulgeVertices,
+  decimalToRGBHex
+} from './components/entityFormatting';
 export default {
   name: 'Fl2dcanvas',
   components: {},
@@ -72,7 +80,6 @@ export default {
         this.konvaStage._resizeDOM();
       }
     });
-
     this.$nextTick(() => {
       this.konvaStage = new Konva.Stage({
         className: 'stage',
@@ -94,7 +101,6 @@ export default {
       var scaleBy = 1.1;
       //初始化缩放方法
       this.konvaStage.on('wheel', e => {
-        console.log(e);
         e.evt.preventDefault();
         var oldScale = this.konvaStage.scaleX();
         var pointer = this.konvaStage.getPointerPosition();
@@ -156,27 +162,44 @@ export default {
 
 */
 
-        const { scale, x, y } = this.calculateScaleAndPosition(
-          this.bounds,
-          this.konvaStage.width(),
-          this.konvaStage.height(),
-          0.05 // 5% 边距
-        );
+        // const { scale, x, y } = this.calculateScaleAndPosition(
+        //   this.bounds,
+        //   this.konvaStage.width(),
+        //   this.konvaStage.height(),
+        //   0.05 // 5% 边距
+        // );
 
-        this.konvaStage.position({ x: x, y: y });
-        this.konvaStage.scale({ x: scale, y: scale });
+        // this.konvaStage.position({ x: x, y: y });
+        // this.konvaStage.scale({ x: scale, y: scale });
 
-        this.konvaStage.batchDraw();
+        // this.konvaStage.batchDraw();
+        this.centerDraw();
       });
       this.konvaStage.on('click', e => {
         let target = this.konvaStage.mouseClickEndShape;
-        this.$emit('leftClick', target ? target.attrs : null)
+        this.$emit('leftClick', target ? target.attrs : null);
       });
     });
   },
   //销毁方法
 
   methods: {
+    // 图纸居中展示
+    centerDraw() {
+      if (this.bounds) {
+        const { scale, x, y } = this.calculateScaleAndPosition(
+          this.bounds,
+          this.konvaStage.width(),
+          this.konvaStage.height(),
+          0.05 // 5% 边距
+        );
+
+        this.konvaStage.position({ x: x, y: y });
+        this.konvaStage.scale({ x: scale, y: scale });
+
+        this.konvaStage.batchDraw();
+      }
+    },
     calculateScaleAndPosition(contentBounds, stageWidth, stageHeight, padding = 0.1) {
       // 1. 计算内容的实际宽高
       const contentWidth = contentBounds.maxX - contentBounds.minX;
@@ -219,7 +242,6 @@ export default {
 
       return { scale, x, y };
     },
-
     updateBounds(v) {
       if (this.bounds === null) {
         this.bounds = { minX: v.x, maxX: v.x, minY: v.y, maxY: v.y };
@@ -255,34 +277,37 @@ export default {
     //思路是计算居中包围盒，然后排除脏数据。
     loadDxf(data) {
       let _this = this;
-
-      /* if(this.layer!=null){
-                      let nodes=this.layer.find(".item");
-                      for(let i=0;i<nodes.length;i++){
-                        nodes[i].destroy();
-                      }
-                    }*/
-
+      this.bounds = null;
       this.konvaLayer.destroyChildren();
       const parser = new DxfParser();
       let dxf = parser.parse(data);
+      // 在这里处理数据为空的时候
+      if (dxf.entities.length === 0) {
+        this.$emit('error', {
+          type: 'entityEmpty'
+        })
+        return
+      }
       const parser2 = new DxfParser2();
       let dxf2 = parser2.parseSync(data);
-
-      let hatchEntitys = dxf2.entities;
+      let hatchEntitys = dxf2.entities.filter(item => item.type === 'HATCH');
       // 处理HATCH部分
       for (let i = 0; i < hatchEntitys.length; i++) {
         let entity = hatchEntitys[i];
         let layerConfig = this.recordLayerConfig[entity.layer];
-        let configParams =
-          layerConfig && Object.keys(layerConfig).length > 0
-            ? layerConfig
-            : null;
-        let color = configParams ? configParams.color : "#000";
+        let configParams = layerConfig && Object.keys(layerConfig).length > 0 ? layerConfig : null;
+        let entityColor = entity.color;
+        let rgb = entityColor ? decimalToRGBHex(entityColor) : {hex: '#FFFFFF'};
+        let hex = rgb.hex;
+        if (hex == '#FFFFFF') {
+          hex = '#000';
+        }
+        let color = configParams ? configParams.color : hex;
         let visible = configParams ? configParams.visible : true;
-        let name = entity.layer.replace(/\s*/g, "");
-        if (entity.type == "HATCH") {
-          let boundaryLoops = entity.boundaryLoops;
+        let name = entity.layer.replace(/\s*/g, '');
+        // if (entity.type == 'HATCH') {
+        let boundaryLoops = entity.boundaryLoops;
+        if (boundaryLoops && boundaryLoops.length > 0) {
           for (let j = 0; j < boundaryLoops.length; j++) {
             let list = [];
             let edges = boundaryLoops[j].edges;
@@ -298,10 +323,7 @@ export default {
                   );
                   const axisRatio = entity.radius;
                   const yR = xR * axisRatio;
-                  const rotation = Math.atan2(
-                    majorAxisEndPoint.y,
-                    majorAxisEndPoint.x
-                  );
+                  const rotation = Math.atan2(majorAxisEndPoint.y, majorAxisEndPoint.x);
 
                   const arcVertices = _GenerateArcVertices({
                     vertices: [],
@@ -330,10 +352,8 @@ export default {
                     list.push(arcVertices[i].x);
                     list.push(-parseFloat(arcVertices[i].y));
                   }
-
                 }
                 if (entity.type == 1) {
-
                   list.push(entity.start.x);
                   list.push(-parseFloat(entity.start.y));
                   list.push(entity.end.x);
@@ -350,7 +370,7 @@ export default {
                   stroke: color,
                   customColor: color,
                   visible: visible,
-                  shapeType: 'hatch'
+                  shapeType: 'hatch',
                 });
                 this.konvaLayer.add(line);
               }
@@ -359,20 +379,14 @@ export default {
               let loop = boundaryLoops[0];
               if (loop.type == 7) {
                 let vertices = [];
-                for (
-                  let vtxIdx = 0;
-                  vtxIdx < loop.polyline.vertices.length;
-                  vtxIdx++
-                ) {
+                for (let vtxIdx = 0; vtxIdx < loop.polyline.vertices.length; vtxIdx++) {
                   const vtx = loop.polyline.vertices[vtxIdx];
                   if ((vtx.bulge ?? 0) == 0) {
                     vertices.push(new Vector2(vtx.x, vtx.y));
                   } else {
                     const prevVtx =
                       loop.polyline.vertices[
-                        vtxIdx == 0
-                          ? loop.polyline.vertices.length - 1
-                          : vtxIdx - 1
+                        vtxIdx == 0 ? loop.polyline.vertices.length - 1 : vtxIdx - 1
                       ];
                     if ((prevVtx.bulge ?? 0) == 0) {
                       /* Start vertex is not produced by _GenerateBulgeVertices(). */
@@ -380,16 +394,9 @@ export default {
                     }
                     const nextVtx =
                       loop.polyline.vertices[
-                        vtxIdx == loop.polyline.vertices.length - 1
-                          ? 0
-                          : vtxIdx + 1
+                        vtxIdx == loop.polyline.vertices.length - 1 ? 0 : vtxIdx + 1
                       ];
-                    vertices = _GenerateBulgeVertices(
-                      [],
-                      vtx,
-                      nextVtx,
-                      vtx.bulge
-                    );
+                    vertices = _GenerateBulgeVertices([], vtx, nextVtx, vtx.bulge);
                   }
                 }
                 let list = [];
@@ -408,13 +415,14 @@ export default {
                   stroke: color,
                   customColor: color,
                   visible: visible,
-                  shapeType: 'hatch'
+                  shapeType: 'hatch',
                 });
                 this.konvaLayer.add(line);
               }
             }
           }
         }
+        // }
       }
       //加载图纸
       let entities = formatEntity(dxf.entities);
@@ -435,7 +443,8 @@ export default {
               key,
               configParams,
               this.konvaLayer,
-              this.recordLayerConfig
+              dxf.tables.lineType.lineTypes
+              // this.recordLayerConfig
             );
           }
           if (!this.konvaLayer) return;
@@ -445,84 +454,94 @@ export default {
               if (this.konvaLayer) this.konvaLayer.add(entity.obj);
             }
           }
-
-          if (group[0].stroke == undefined) {
-            console.log(group);
-            group[0].stroke = '#000';
-          }
-          let customShape = new Konva.Shape({
-            x: 0,
-            y: 0,
-            strokeWidth: 0.2,
-            name: key.replace(/\s*/g, ''),
-            entityId: key,
-            stroke: group[0].stroke,
-            customColor: configParams ? configParams.color : group[0].stroke,
-            //visible: configParams ? configParams.visible :true,
-            sceneFunc(context, shape) {
-              context.beginPath();
-              for (let i = 0; i < group.length; i++) {
-                let entity = group[i];
-
-                if (entity.type === 'line') {
-                  context.strokeStyle = entity.stroke;
-                  let x1 = entity.x1;
-                  let y1 = entity.y1;
-                  let x2 = entity.x2;
-                  let y2 = entity.y2;
-                  if (x1 != undefined && y1 != undefined && x2 != undefined && y2 != undefined) {
-                    context.moveTo(x1, -parseFloat(y1));
-                    context.lineTo(x2, -parseFloat(y2));
-                  }
-                  let v1 = {};
-                  v1.x = x1;
-                  v1.y = y1;
-                  let v2 = {};
-                  v2.x = x2;
-                  v2.y = y2;
-                  _this.updateBounds(v1);
-                  _this.updateBounds(v2);
-                }
-                if (entity.type === 'polyline') {
-                  context.strokeStyle = entity.stroke;
-
-                  let flag = false;
-
-                  let points = entity.points;
-
-                  let closed = entity.closed;
-
-                  for (let j = 0; j < points.length; j++) {
-                    let index = j % 2;
-                    if (index === 0) {
-                      let x = points[j];
-                      let y = points[j + 1];
-                      let point = {};
-                      point.x = x;
-                      point.y = y;
-                      _this.updateBounds(point);
-
-                      if (j === 0) {
-                        context.moveTo(x, y);
-                      } else {
-                        context.lineTo(x, y);
+          let shapeGroup = group.filter(item => item.type !== 'text')
+          if (shapeGroup.length > 0) {
+            // if (group[0]?.stroke) {
+            //   group[0].stroke = '#000';
+            // }
+            // 根据颜色分组
+            let colorGroup = _.groupBy(shapeGroup, 'stroke');
+            for (const colorKey in colorGroup) {
+              let  entityColorGroup = colorGroup[colorKey]
+              let customShape = new Konva.Shape({
+                x: 0,
+                y: 0,
+                strokeWidth: 0.2,
+                name: key.replace(/\s*/g, ''),
+                entityId: key,
+                stroke: colorKey,
+                customColor: configParams ? configParams.color : colorKey,
+                //visible: configParams ? configParams.visible :true,
+                sceneFunc(context, shape) {
+                  context.beginPath();
+                  for (let i = 0; i < entityColorGroup.length; i++) {
+                    let entity = entityColorGroup[i];
+                    if (entity.type === 'line') {
+                      context.strokeStyle = entity.stroke;
+                      let x1 = entity.x1;
+                      let y1 = entity.y1;
+                      let x2 = entity.x2;
+                      let y2 = entity.y2;
+                      if (x1 != undefined && y1 != undefined && x2 != undefined && y2 != undefined) {
+                        context.moveTo(x1, -parseFloat(y1));
+                        context.lineTo(x2, -parseFloat(y2));
                       }
+                      let v1 = {};
+                      v1.x = x1;
+                      v1.y = y1;
+                      let v2 = {};
+                      v2.x = x2;
+                      v2.y = y2;
+                      _this.updateBounds(v1);
+                      _this.updateBounds(v2);
                     }
+                    if (entity.type === 'polyline') {
+                      context.strokeStyle = entity.stroke;
+
+                      let flag = false;
+
+                      let points = entity.points;
+
+                      let closed = entity.closed;
+
+                      for (let j = 0; j < points.length; j++) {
+                        let index = j % 2;
+                        if (index === 0) {
+                          let x = points[j];
+                          let y = points[j + 1];
+                          let point = {};
+                          point.x = x;
+                          point.y = y;
+                          _this.updateBounds(point);
+
+                          if (j === 0) {
+                            context.moveTo(x, y);
+                          } else {
+                            context.lineTo(x, y);
+                          }
+                        }
 
-                    if (closed) {
-                      if (j === points.length - 1) {
-                        context.lineTo(points[0], points[1]);
+                        if (closed) {
+                          if (j === points.length - 1) {
+                            context.lineTo(points[0], points[1]);
+                          }
+                        }
+                      }
+                      if (entity.lineType === 'DASH') {
+                        context.setLineDash(entity.dash)
                       }
                     }
                   }
-                }
-              }
-              // context.closePath();
-              context.fillStrokeShape(shape);
-            },
-            shapeType: 'shape',
-          });
-          if (this.konvaLayer) this.konvaLayer.add(customShape);
+                  // context.closePath();
+                  context.fillStrokeShape(shape);
+                },
+                shapeType: 'shape',
+              });
+              if (this.konvaLayer) this.konvaLayer.add(customShape);
+            }
+
+          }
+
         }
       }
       //缩放视口
@@ -546,18 +565,19 @@ export default {
         this.$refs.svgDraw.clientHeight / 2 -
         (Math.ceil(boundingScale.height) / 2 + boundingScale.y);
 
-      this.konvaStage.scale({
-        x: 2,
-        y: 2,
-      });
-      this.konvaStage.setX(0);
-      this.konvaStage.setY(750); // 750
-
-      this.activedSvgPan.zoom.x = 0;
-      this.activedSvgPan.zoom.y = 750;
-      this.activedSvgPan.x = x;
-      this.activedSvgPan.y = x;
+      // this.konvaStage.scale({
+      //   x: 2,
+      //   y: 2,
+      // });
+      // this.konvaStage.setX(0);
+      // this.konvaStage.setY(750); // 750
+
+      // this.activedSvgPan.zoom.x = 0;
+      // this.activedSvgPan.zoom.y = 750;
+      // this.activedSvgPan.x = x;
+      // this.activedSvgPan.y = x;
       setTimeout(() => {
+        this.centerDraw();
         this.$emit('loaded');
       }, 100);
     },
@@ -599,143 +619,59 @@ export default {
     },
     toPdfs(list) {
       let _this = this;
-      const pdf = new jsPDF('l', 'px', [this.konvaStage.width(), this.konvaStage.height()]);
-      const exportPixelRatio = 2; // 可以 2/3/4 自己调
-
-      for (let pageIdx = 0; pageIdx < list.length; pageIdx++) {
-        let data = list[pageIdx];
-        //先绘制图面
-        this.konvaLayer.destroyChildren();
-        const parser = new DxfParser();
-        let dxf = parser.parse(data);
-        let entities = formatEntity(dxf.entities);
-        let layers = dxf.tables.layer.layers;
-
-        //先计算包围
-        for (let key in entities) {
-          if (entities[key]) {
-            let group = [];
-            let l = entities[key].length;
-            let layerConfig = this.recordLayerConfig[key];
-            let configParams =
-              layerConfig && Object.keys(layerConfig).length > 0 ? layerConfig : null;
-            for (let i = 0; i < l; i++) {
-              let type = entities[key][i].type;
-              handleFn(
-                type,
-                dxf,
-                entities[key][i],
-                group,
-                key,
-                configParams,
-                this.konvaLayer,
-                this.recordLayerConfig
-              );
-            }
-
-            for (let i = 0; i < group.length; i++) {
-              let entity = group[i];
-              if (entity.type === 'line') {
-                let x1 = entity.x1;
-                let y1 = entity.y1;
-                let x2 = entity.x2;
-                let y2 = entity.y2;
-                let v1 = {};
-                v1.x = x1;
-                v1.y = y1;
-                let v2 = {};
-                v2.x = x2;
-                v2.y = y2;
-                _this.updateBounds1(v1);
-                _this.updateBounds1(v2);
-              }
-              if (entity.type === 'polyline') {
-                let flag = false;
-                let points = entity.points;
-                let closed = entity.closed;
-
-                for (let j = 0; j < points.length; j++) {
-                  let index = j % 2;
-                  if (index === 0) {
-                    let x = points[j];
-                    let y = points[j + 1];
-                    let point = {};
-                    point.x = x;
-                    point.y = y;
-                    _this.updateBounds1(point);
-                  }
+      return new Promise((resolve, reject) => {
+        const pdf = new jsPDF('l', 'px', [this.konvaStage.width(), this.konvaStage.height()]);
+        const exportPixelRatio = 2; // 可以 2/3/4 自己调
+        let index = 0;
+        for (let pageIdx = 0; pageIdx < list.length; pageIdx++) {
+          let data = list[pageIdx];
+          //先绘制图面
+          this.konvaLayer.destroyChildren();
+          const parser = new DxfParser();
+          let dxf = parser.parse(data);
+          if (dxf.entities.length > 0) {
+            let entities = formatEntity(dxf.entities);
+            let layers = dxf.tables.layer.layers;
+            //先计算包围
+            for (let key in entities) {
+              if (entities[key]) {
+                let group = [];
+                let l = entities[key].length;
+                let layerConfig = this.recordLayerConfig[key];
+                let configParams =
+                  layerConfig && Object.keys(layerConfig).length > 0 ? layerConfig : null;
+                for (let i = 0; i < l; i++) {
+                  let type = entities[key][i].type;
+                  handleFn(
+                    type,
+                    dxf,
+                    entities[key][i],
+                    group,
+                    key,
+                    configParams,
+                    this.konvaLayer,
+                    this.recordLayerConfig
+                  );
                 }
-              }
-            }
-          }
-        }
-
-        console.log('bounds1');
-        console.log(_this.bounds1);
-
-        for (let key in entities) {
-          if (entities[key]) {
-            let group = [];
-            let l = entities[key].length;
-            let layerConfig = this.recordLayerConfig[key];
-            let configParams =
-              layerConfig && Object.keys(layerConfig).length > 0 ? layerConfig : null;
-            for (let i = 0; i < l; i++) {
-              let type = entities[key][i].type;
-              handleFn(
-                type,
-                dxf,
-                entities[key][i],
-                group,
-                key,
-                configParams,
-                this.konvaLayer,
-                this.recordLayerConfig
-              );
-            }
-            if (!this.konvaLayer) return;
-            for (let i = 0; i < group.length; i++) {
-              let entity = group[i];
-              if (entity.type === 'text') {
-                if (this.konvaLayer) this.konvaLayer.add(entity.obj);
-              }
-            }
-
-            if (group[0].stroke == undefined) {
-              console.log(group);
-              group[0].stroke = '#000';
-            }
 
-            let customShape = new Konva.Shape({
-              x: 0,
-              y: 0,
-              strokeWidth: 0.2,
-              name: key.replace(/\s*/g, ''),
-              entityId: key,
-              stroke: group[0].stroke,
-              customColor: configParams ? configParams.color : '',
-              //visible: configParams ? configParams.visible :true,
-              sceneFunc(context, shape) {
-                context.beginPath();
                 for (let i = 0; i < group.length; i++) {
                   let entity = group[i];
-
                   if (entity.type === 'line') {
-                    context.strokeStyle = entity.stroke;
                     let x1 = entity.x1;
                     let y1 = entity.y1;
                     let x2 = entity.x2;
                     let y2 = entity.y2;
-                    if (x1 != undefined && y1 != undefined && x2 != undefined && y2 != undefined) {
-                      context.moveTo(x1, -parseFloat(y1));
-                      context.lineTo(x2, -parseFloat(y2));
-                    }
+                    let v1 = {};
+                    v1.x = x1;
+                    v1.y = y1;
+                    let v2 = {};
+                    v2.x = x2;
+                    v2.y = y2;
+                    _this.updateBounds1(v1);
+                    _this.updateBounds1(v2);
                   }
                   if (entity.type === 'polyline') {
-                    context.strokeStyle = entity.stroke;
-
                     let flag = false;
-
                     let points = entity.points;
                     let closed = entity.closed;
 
@@ -744,67 +680,159 @@ export default {
                       if (index === 0) {
                         let x = points[j];
                         let y = points[j + 1];
-
-                        if (j === 0) {
-                          context.moveTo(x, y);
-                        } else {
-                          context.lineTo(x, y);
-                        }
+                        let point = {};
+                        point.x = x;
+                        point.y = y;
+                        _this.updateBounds1(point);
                       }
+                    }
+                  }
+                }
+              }
+            }
+
+            for (let key in entities) {
+              if (entities[key]) {
+                let group = [];
+                let l = entities[key].length;
+                let layerConfig = this.recordLayerConfig[key];
+                let configParams =
+                  layerConfig && Object.keys(layerConfig).length > 0 ? layerConfig : null;
+                for (let i = 0; i < l; i++) {
+                  let type = entities[key][i].type;
+                  handleFn(
+                    type,
+                    dxf,
+                    entities[key][i],
+                    group,
+                    key,
+                    configParams,
+                    this.konvaLayer,
+                    this.recordLayerConfig
+                  );
+                }
+                if (!this.konvaLayer) return;
+                for (let i = 0; i < group.length; i++) {
+                  let entity = group[i];
+                  if (entity.type === 'text') {
+                    if (this.konvaLayer) this.konvaLayer.add(entity.obj);
+                  }
+                }
+
+                if (group.length > 0) {
+                  if (group[0]?.stroke) {
+                    group[0].stroke = '#000';
+                  }
 
-                      if (closed) {
-                        if (j === points.length - 1) {
-                          context.lineTo(points[0], points[1]);
+                  let customShape = new Konva.Shape({
+                    x: 0,
+                    y: 0,
+                    strokeWidth: 0.2,
+                    name: key.replace(/\s*/g, ''),
+                    entityId: key,
+                    stroke: group[0].stroke,
+                    customColor: configParams ? configParams.color : '',
+                    //visible: configParams ? configParams.visible :true,
+                    sceneFunc(context, shape) {
+                      context.beginPath();
+                      for (let i = 0; i < group.length; i++) {
+                        let entity = group[i];
+
+                        if (entity.type === 'line') {
+                          context.strokeStyle = entity.stroke;
+                          let x1 = entity.x1;
+                          let y1 = entity.y1;
+                          let x2 = entity.x2;
+                          let y2 = entity.y2;
+                          if (x1 != undefined && y1 != undefined && x2 != undefined && y2 != undefined) {
+                            context.moveTo(x1, -parseFloat(y1));
+                            context.lineTo(x2, -parseFloat(y2));
+                          }
+                        }
+                        if (entity.type === 'polyline') {
+                          context.strokeStyle = entity.stroke;
+
+                          let flag = false;
+
+                          let points = entity.points;
+                          let closed = entity.closed;
+
+                          for (let j = 0; j < points.length; j++) {
+                            let index = j % 2;
+                            if (index === 0) {
+                              let x = points[j];
+                              let y = points[j + 1];
+
+                              if (j === 0) {
+                                context.moveTo(x, y);
+                              } else {
+                                context.lineTo(x, y);
+                              }
+                            }
+
+                            if (closed) {
+                              if (j === points.length - 1) {
+                                context.lineTo(points[0], points[1]);
+                              }
+                            }
+                          }
                         }
                       }
-                    }
-                  }
+                      // context.closePath();
+                      context.fillStrokeShape(shape);
+                    },
+                  });
+                  if (this.konvaLayer) this.konvaLayer.add(customShape);
                 }
-                // context.closePath();
-                context.fillStrokeShape(shape);
-              },
-            });
-            if (this.konvaLayer) this.konvaLayer.add(customShape);
-          }
-        }
+              }
+            }
 
-        const { scale, x, y } = this.calculateScaleAndPosition(
-          _this.bounds1,
-          this.konvaStage.width(),
-          this.konvaStage.height(),
-          0.05 // 5% 边距
-        );
-        console.log('test1:');
-        console.log(this.bounds1);
+            const { scale, x, y } = this.calculateScaleAndPosition(
+              _this.bounds1,
+              this.konvaStage.width(),
+              this.konvaStage.height(),
+              0.05 // 5% 边距
+            );
 
-        _this.bounds1 = null;
+            _this.bounds1 = null;
 
-        this.konvaStage.position({ x: x, y: y });
-        this.konvaStage.scale({ x: scale, y: scale });
+            this.konvaStage.position({ x: x, y: y });
+            this.konvaStage.scale({ x: scale, y: scale });
 
-        this.konvaStage.batchDraw();
-        //添加成功移动视口位置
-
-        if (pageIdx == 0) {
-          pdf.addImage(
-            this.konvaStage.toDataURL({ pixelRatio: 2 }),
-            0,
-            0,
-            this.konvaStage.width(),
-            this.konvaStage.height()
-          );
+            this.konvaStage.batchDraw();
+            //添加成功移动视口位置 pageIdx === 0
+
+            if (index === 0) {
+              pdf.addImage(
+                this.konvaStage.toDataURL({ pixelRatio: 2 }),
+                0,
+                0,
+                this.konvaStage.width(),
+                this.konvaStage.height()
+              );
+            } else {
+              pdf.addPage();
+              pdf.addImage(
+                this.konvaStage.toDataURL({ pixelRatio: 2 }),
+                0,
+                0,
+                this.konvaStage.width(),
+                this.konvaStage.height()
+              );
+            }
+            index++
+          }
+
+        }
+        if (index > 0) {
+          pdf.save('批量导出.pdf');
+          resolve()
         } else {
-          pdf.addPage();
-          pdf.addImage(
-            this.konvaStage.toDataURL({ pixelRatio: 2 }),
-            0,
-            0,
-            this.konvaStage.width(),
-            this.konvaStage.height()
-          );
+          reject('解析数据为空, 请检查数据再进行下载')
         }
-      }
-      pdf.save('批量导出.pdf');
+      })
+
+      
 
       // var imgData = canvas.toDataURL('image/png');
       //doc.text("Hello world!", 10, 10);
@@ -822,32 +850,38 @@ export default {
     // 更改图纸的色系 区分明暗两种 darkness 暗色系 bright 明亮
     setColorScheme(colorType) {
       // const backgroundColor = colorType === "darkness" ? "#000" : "transparent";
-      const color = colorType === "darkness" ? "#fff" : "#000";
+      const color = colorType === 'darkness' ? '#fff' : '#000';
       // konvaStage.container().style.background = backgroundColor;
-      this.konvaLayer.children.forEach((item) => {
+      this.konvaLayer.children.forEach(item => {
         this.traverseLayer(item, color);
       });
     },
-    
+
     traverseLayer(obj, color) {
       if (!obj.attrs.isGroup) {
         if (color === '#fff') {
-         let setColor = (obj.attrs.customColor === '#000' || obj.attrs.customColor === '#000000'|| obj.attrs.customColor === 'rgb(0, 0, 0)' || obj.attrs.customColor === 'rgba(0, 0, 0, 1)') ? color : obj.attrs.customColor
+          let setColor =
+            obj.attrs.customColor === '#000' ||
+            obj.attrs.customColor === '#000000' ||
+            obj.attrs.customColor === 'rgb(0, 0, 0)' ||
+            obj.attrs.customColor === 'rgba(0, 0, 0, 1)'
+              ? color
+              : obj.attrs.customColor;
           if (obj.attrs.shapeType === 'hatch' || obj.attrs.shapeType === 'text') {
             obj.setFill(setColor);
           }
           obj.setStroke(setColor);
-          obj.attrs.oldCustomColor = obj.attrs.customColor
-          obj.attrs.customColor = setColor
+          obj.attrs.oldCustomColor = obj.attrs.customColor;
+          obj.attrs.customColor = setColor;
         } else {
-          obj.attrs.customColor = obj.attrs.oldCustomColor
+          obj.attrs.customColor = obj.attrs.oldCustomColor;
           if (obj.attrs.shapeType === 'hatch' || obj.attrs.shapeType === 'text') {
             obj.setFill(obj.attrs.customColor);
           }
           obj.setStroke(obj.attrs.customColor);
         }
       } else {
-        obj.children.forEach((item) => {
+        obj.children.forEach(item => {
           this.traverseLayer(item, color);
         });
       }
@@ -855,7 +889,7 @@ export default {
   },
   beforeDestroy() {
     this.clearCache();
-  }
+  },
 };
 </script>
 <style lang="scss" scoped>