fl-web-component 0.1.1 → 1.0.1

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

@@ -0,0 +1,259 @@
+<template>
+
+    <div  ref="svgDraw" id="konva-container" style="height:100%"></div>
+</template>
+
+<script>
+
+
+
+    function downloadPDF(base64, fileName) {
+        const blob = base64ToBlob(base64);
+        const url = createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = fileName || 'downloaded_pdf.pdf'; // 设置下载文件名，如果没有提供文件名，则默认为'downloaded_pdf.pdf'
+        document.body.appendChild(link); // 添加到DOM树中以便触发下载
+        link.click(); // 模拟点击下载
+        document.body.removeChild(link); // 下载完成后移除元素
+        URL.revokeObjectURL(url); // 释放URL对象
+    }
+    import Konva from 'konva'
+    import DxfParser from "dxf-parser";
+    import jsPDF from 'jspdf'
+    import { formatEntity, handleFn, centering } from './components/entityFormatting'
+    var konvaStage = null, konvaLayer = null;
+    var recordLayerConfig = {}
+    export default {
+        name: "Fl2dcanvas",
+        components: {},
+        data() {
+            return {
+
+            };
+        },
+        created() {
+            //resize方法
+            window.addEventListener('resize', () => {
+                if (konvaStage) {
+                    const obj = document.getElementById('konva-container')
+                    konvaStage.setWidth(obj.clientWidth)
+                    konvaStage.setHeight(obj.clientHeight)
+                    konvaStage._resizeDOM()
+                }
+            });
+
+
+            this.$nextTick(() => {
+                console.log(document.getElementById('konva-container'));
+                console.log(this.$refs.svgDraw);
+                konvaStage = new Konva.Stage({
+                    className: "stage",
+                    container: "konva-container",
+                    width: this.$refs.svgDraw.clientWidth,
+                    height: this.$refs.svgDraw.clientHeight,
+                    draggable: true,
+                });
+                //init layer
+                konvaLayer = new Konva.Layer({
+                    name: "konva-layer",
+                    x: 0,
+                    y: 0,
+                });
+                //设置清晰度
+                konvaLayer.getCanvas().setPixelRatio(2);
+                konvaStage.add(konvaLayer);
+                konvaLayer.draw();
+                var scaleBy = 1.5;
+                //初始化缩放方法
+                konvaStage.on("wheel", (e) => {
+                    console.log(e)
+                    e.evt.preventDefault();
+                    var oldScale = konvaStage.scaleX();
+                    var pointer = konvaStage.getPointerPosition();
+                    var mousePointTo = {
+                        x: (pointer.x - konvaStage.x()) / oldScale,
+                        y: (pointer.y - konvaStage.y()) / oldScale,
+                    };
+                    // how to scale? Zoom in? Or zoom out?
+                    let direction = e.evt.deltaY > 0 ? -1 : 1;
+                    if (e.evt.ctrlKey) {
+                        direction = -direction;
+                    }
+                    var newScale = direction > 0 ? oldScale * scaleBy : oldScale / scaleBy;
+                    this.scaleRatio = Math.ceil(newScale)
+                    // 判断比例尺百分比
+                    if (this.scaleRatio <= 1 || this.scaleRatio >= 100) return
+                    // 设置放大缩小多少倍
+                    konvaStage.scale({ x: newScale, y: newScale });
+                    var newPos = {
+                        x: pointer.x - mousePointTo.x * newScale,
+                        y: pointer.y - mousePointTo.y * newScale,
+                    };
+                    konvaStage.position(newPos);
+                });
+            });
+
+            //create方法结束
+        },
+        //销毁方法
+
+        methods: {
+            loadDxf(data){
+                const parser = new DxfParser();
+                let dxf = parser.parse(data);
+                let entities = formatEntity(dxf.entities);
+                let layers = dxf.tables.layer.layers;
+                //加载图纸
+                for (let key in layers) {
+                    if (entities[key]) {
+                        let group = [];
+                        let l = entities[key].length
+                        let layerConfig = 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, konvaLayer, recordLayerConfig)
+                        }
+                        if (!konvaLayer) return
+                        for(let i = 0; i < group.length;i++) {
+                            let entity = group[i];
+                            if (entity.type === 'text') {
+                                if (konvaLayer) konvaLayer.add(entity.obj);
+                            }
+                        }
+
+
+                        let  customShape = new Konva.Shape({
+                            x: 0,
+                            y: 0,
+                            strokeWidth: 0.2,
+                            name: key.replace(/\s*/g, ""),
+                            entityId: key,
+                            stroke: configParams ? configParams.color : "#000",
+                            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'){
+                                        let x1=entity.x1;
+                                        let y1=entity.y1;
+                                        let x2=entity.x2;
+                                        let y2=entity.y2;
+                                        context.moveTo(x1, -parseFloat(y1));
+                                        context.lineTo(x2, -parseFloat(y2));
+                                    }
+                                    if(entity.type === "polyline"){
+                                        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 (konvaLayer) konvaLayer.add(customShape);
+                    }
+                }
+                //缩放视口
+                let scale = 1;
+                const boundingRect = konvaLayer.getClientRect();
+                let ratio = Number((this.$refs.svgDraw.clientWidth / boundingRect.width).toFixed(1));
+                if (ratio > 2) {
+                    scale = Number((boundingRect.width / boundingRect.height).toFixed(1));
+                    scale = scale < 2 ? 2 : scale
+                }
+                konvaStage.scale({
+                    x: scale,
+                    y: scale,
+                })
+                const boundingScale = konvaLayer.getClientRect();
+                //平移视口
+                const x =
+                    this.$refs.svgDraw.clientWidth / 2 -
+                    (Math.ceil(boundingScale.width) / 2 + boundingScale.x / 2);
+                const y =
+                    this.$refs.svgDraw.clientHeight / 2 -
+                    (Math.ceil(boundingScale.height) / 2 + boundingScale.y);
+                konvaStage.setX(x);
+                konvaStage.setY(y);
+
+
+
+
+            },
+            toPdf(){
+                // get data URL with default settings
+
+                // open in new window
+                konvaLayer.getCanvas().setPixelRatio(1);
+                const jpegURL = konvaStage.toDataURL({
+                    mimeType: 'image/jpeg',
+                    quality:1.0
+                });
+
+                let pageData=konvaLayer.canvas.toDataURL('image/jpeg', 1.0);
+
+                console.log(pageData);
+
+                let img = new Image();
+                img.src=jpegURL;
+                const pdf = new jsPDF('l', 'px', [konvaStage.width(), konvaStage.height()]);
+
+                pdf.addImage(
+                    konvaStage.toDataURL({ pixelRatio: 2 }),
+                    0,
+                    0,
+                    konvaStage.width(),
+                    konvaStage.height()
+                );
+
+                pdf.save('canvas.pdf');
+                // var imgData = canvas.toDataURL('image/png');
+                //doc.text("Hello world!", 10, 10);
+                //doc.save("a4.pdf");
+            },
+            clearCache(){
+                konvaLayer && konvaLayer.destroyChildren()
+                konvaLayer && konvaLayer.destroy()
+                konvaLayer && konvaLayer.clear()
+                konvaStage && konvaStage.destroy()
+                konvaStage && konvaStage.clearCache()
+                konvaLayer = null
+                konvaStage = null
+            },
+            beforeDestroy() {
+                this.clearCache()
+            }
+        }
+    };
+</script>
+<style lang="scss" scoped>
+    #konva-container {
+        z-index: 3;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        overflow: hidden;
+    }
+</style>

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

@@ -8,12 +8,7 @@
 -->
 <template>
   <div v-loading="loadingForm" class="inline_false">
-    <el-form
-      ref="form"
-      :model="formInline"
-      :label-width="labelWidth"
-      class="form_inline_false"
-    >
+    <el-form ref="form" :model="formInline" :label-width="labelWidth" class="form_inline_false">
       <!-- 表单循环 -->
       <el-form-item
         v-for="(item, index) in formItemConfigArr"
@@ -44,7 +39,7 @@
               :key="optionItem.optionValue + optionIndex"
               :label="optionItem.optionLabel"
               :value="optionItem.optionValue"
-              :style="{'width': minWidth + 2 + 'px'}"
+              :style="{ width: minWidth + 2 + 'px' }"
             />
           </el-select>
 
@@ -78,7 +73,7 @@
             :tree-props="{
               id: 'deptId',
               label: 'deptName',
-              children: 'children'
+              children: 'children',
             }"
             :tree-node-key="`deptId`"
             :placeholder-title="`请选择${item.label}`"
@@ -128,7 +123,7 @@
             v-model="formInline[item.prop]"
             type="textarea"
             class="form_multiline"
-            :autosize="{ minRows: 2, maxRows: 4}"
+            :autosize="{ minRows: 2, maxRows: 4 }"
             placeholder="请输入内容"
             @input="handleInputValue($event, item.prop)"
           />
@@ -144,7 +139,8 @@
               v-for="(optionItem, optionIndex) in item.optionArr"
               :key="optionItem.optionValue + optionIndex"
               :label="optionItem"
-            >{{ optionItem.optionLabel }}</el-radio>
+              >{{ optionItem.optionLabel }}</el-radio
+            >
           </el-radio-group>
 
           <!-- 9. 多选框 MultipleCheckbox -->
@@ -158,7 +154,8 @@
               v-for="(optionItem, optionIndex) in item.optionArr"
               :key="optionItem.optionValue + optionIndex"
               :label="optionItem"
-            >{{ optionItem.optionLabel }}</el-checkbox>
+              >{{ optionItem.optionLabel }}</el-checkbox
+            >
           </el-checkbox-group>
 
           <!-- 10. 输入框 InputString InputInteger InputDecimals -->
@@ -201,7 +198,6 @@
 
           <!-- 13. 富文本 RichText -->
 
-
           <!-- 备用校验方法 -->
           <!-- <div class="input_error" v-if="item.isRulesType"> <span class="input_error_label" :title="item.label">{{item.label}}</span>不能为空 </div> -->
         </template>
@@ -214,19 +210,20 @@
 export default {
   name: 'FormDialog',
   components: {
-    SelectTree: () => import('./components/SelectTree') /* 3. 选择器_树结构 SelectorTreeStructure */
+    SelectTree: () =>
+      import('./components/SelectTree') /* 3. 选择器_树结构 SelectorTreeStructure */,
   },
   props: {
     /* el-form-item表单循环项 */
     formItemConfigArr: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     /* 表单label宽度 */
     labelWidth: {
       type: String,
-      default: '120px'
-    }
+      default: '120px',
+    },
   },
   data() {
     return {
@@ -239,55 +236,55 @@ export default {
       /* 1. 选择器_单选 SelectorSingleSelection 绑定的值 */
       valueSelectorSingle: '',
       /* 表单校验 */
-      rulesForm: {}
-    }
+      rulesForm: {},
+    };
   },
   computed: {},
   watch: {},
   created() {
-    this.initialization()
+    this.initialization();
   },
   mounted() {},
   methods: {
     /* 初始化数据 */
     initialization() {
       for (let i = 1; i < this.formItemConfigArr.length; i++) {
-        const item = this.formItemConfigArr[i]
+        const item = this.formItemConfigArr[i];
         this.rulesForm[item.prop] = {
           required: true,
           validator: this.validateRules(),
-          trigger: 'blur'
-        }
+          trigger: 'blur',
+        };
         switch (item.itemType) {
           /* 1. 选择器_单选 SelectorSingleSelection */
           case 'SelectorSingleSelection':
-            this.formInline[item.prop] = {}
-            break
+            this.formInline[item.prop] = {};
+            break;
 
           /* 2. 选择器_多选 SelectorMultipleSelection */
           case 'SelectorMultipleSelection':
-            this.formInline[item.prop] = []
-            break
+            this.formInline[item.prop] = [];
+            break;
 
           /* 3. 选择器_树结构 SelectorTreeStructure */
           case 'SelectorTreeStructure':
-            this.formInline[item.prop] = {}
-            break
+            this.formInline[item.prop] = {};
+            break;
 
           /* 8. 单选框 RadioBox */
           case 'RadioBox':
-            this.formInline[item.prop] = {}
-            break
+            this.formInline[item.prop] = {};
+            break;
 
           /* 9. 多选框 MultipleCheckbox */
           case 'MultipleCheckbox':
-            this.formInline[item.prop] = []
-            break
+            this.formInline[item.prop] = [];
+            break;
 
           /* 11. 计数器 CounterFrame */
           case 'CounterFrame':
-            this.formInline[item.prop] = 0
-            break
+            this.formInline[item.prop] = 0;
+            break;
 
           /**
            * 4. 选择器_单时间 SelectorSingleTime
@@ -297,83 +294,87 @@ export default {
            * 10. 输入框 InputString InputInteger InputDecimals
            * 12. 文件上传 FileUpload
            * 13. 富文本 RichText
-          **/
+           **/
           default:
-            this.formInline[item.prop] = ''
+            this.formInline[item.prop] = '';
         }
       }
     },
     /* 下拉框样式 无数据的情况下，给请选择提示设置最小宽度*/
     setMinWidth(val) {
-      this.minWidth = val.srcElement.clientWidth
+      this.minWidth = val.srcElement.clientWidth;
     },
     validateRules(value, prop) {
-      console.log('validateRules', value, prop)
+      console.log('validateRules', value, prop);
       if (!value) {
-        return `${prop}不能为空`
+        return `${prop}不能为空`;
       } else if (this.isNameType(value)) {
-        return `${prop}只包含中文、英文、空格、数字、中划线、下划线`
+        return `${prop}只包含中文、英文、空格、数字、中划线、下划线`;
       }
     },
     /**
      *  只包含英文、数字、空格、中划线、下划线
      *  true 符合 false 不符合
-    **/
+     **/
     isCodeType(str, prop) {
       if (str.length === 0) {
-        return `${prop}不能为空`
+        return `${prop}不能为空`;
       }
-      const reg = /[`~!@#$%^&*()+=<>?:"{}|,.;'·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘'，。、]/im
-      const regOne = /^[^\u4e00-\u9fa5]+$/
-      const regTwo = /\\/
+      const reg =
+        /[`~!@#$%^&*()+=<>?:"{}|,.;'·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘'，。、]/im;
+      const regOne = /^[^\u4e00-\u9fa5]+$/;
+      const regTwo = /\\/;
       if (!reg.test(str) && regOne.test(str) && !regTwo.test(str)) {
-        return `${prop}只包含中文、英文、空格、数字、中划线、下划线`
+        return `${prop}只包含中文、英文、空格、数字、中划线、下划线`;
       }
-      return true
+      return true;
     },
     /**
      *  可输入英文、中文、空格、数字、中划线、下划线，特殊字符可以排除
      *  true 符合 false 不符合
-    **/
+     **/
     isNameType(str, prop) {
       if (str.length === 0) {
-        return `${prop}不能为空`
+        return `${prop}不能为空`;
       }
-      const reg = /[`~!@#$%^&*()+=<>?:"{}|,.;'·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘'，。、]/im
-      const regTwo = /\\/
+      const reg =
+        /[`~!@#$%^&*()+=<>?:"{}|,.;'·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘'，。、]/im;
+      const regTwo = /\\/;
       if (!reg.test(str) && !regTwo.test(str)) {
-        return `${prop}只包含英文、数字、空格、中划线、下划线`
+        return `${prop}只包含英文、数字、空格、中划线、下划线`;
       }
-      return true
+      return true;
     },
 
     /* 1. 选择器_单选 SelectorSingleSelection */
     handleSelectorSingle(e, prop, index) {
-      this.formInline[prop] = {}
-      const arr = this.formItemConfigArr[index].optionArr
-      const objIndex = arr.find(item => {
-        if (item.optionValue === e) return item
-      })
-      this.handleInputValue(objIndex, prop)
+      this.formInline[prop] = {};
+      const arr = this.formItemConfigArr[index].optionArr;
+      const objIndex = arr.find((item) => {
+        if (item.optionValue === e) return item;
+      });
+      this.handleInputValue(objIndex, prop);
     },
     /* 2. 选择器_多选 SelectorMultipleSelection */
     handleSelectorMultiple(e, prop) {
-      this.formInline[prop] = []
-      const nodesObj = this.$refs['formCascader'][0].getCheckedNodes()
-      const selectorMultipleSelectionArr = []
-      nodesObj.forEach(item => { selectorMultipleSelectionArr.push(item.data) })
-      this.handleInputValue(selectorMultipleSelectionArr, prop)
+      this.formInline[prop] = [];
+      const nodesObj = this.$refs['formCascader'][0].getCheckedNodes();
+      const selectorMultipleSelectionArr = [];
+      nodesObj.forEach((item) => {
+        selectorMultipleSelectionArr.push(item.data);
+      });
+      this.handleInputValue(selectorMultipleSelectionArr, prop);
     },
 
     /* 3. 选择器_树结构 SelectorTreeStructure */
     nodeClickTree(data) {
-      this.handleInputValue(data, 'SelectorTreeStructure')
+      this.handleInputValue(data, 'SelectorTreeStructure');
     },
 
     /* 6. 选择器_日期范围 SelectorDateRange */
     handleSelectorDateRange(e, prop) {
-      this.formInline[prop] = []
-      this.handleInputValue(e, prop)
+      this.formInline[prop] = [];
+      this.handleInputValue(e, prop);
     },
 
     /* 12. 文件上传 FileUpload */
@@ -387,15 +388,15 @@ export default {
      * 9. 多选框 MultipleCheckbox
      * 10. 输入框 InputString InputInteger InputDecimals
      * 11. 计数器 CounterFrame
-    **/
+     **/
     handleInputValue(e, prop) {
-      this.formInline[prop] = e
-      this.$forceUpdate()
-      const data = { data: e, prop: prop }
-      this.$emit('handleInputValue', data)
-    }
-  }
-}
+      this.formInline[prop] = e;
+      this.$forceUpdate();
+      const data = { data: e, prop: prop };
+      this.$emit('handleInputValue', data);
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 // 1. 选择器_单选 form_select