fl-web-component 0.1.0 → 1.0.0

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/Readme.md

@@ -0,0 +1,409 @@
+<!-- 使用方法 样例 -->
+<template>
+  <div class="trigger_dialog">
+    <!-- 弹窗  -->
+    <el-button type="primary" @click="dialogVisible = true">触发对话框</el-button>
+    <DialogWrapper
+      v-if="dialogVisible"
+      dialog-title="触发对话框"
+      :visible.sync="dialogVisible"
+      :popup-width="'35%'"
+      @handleClose="handleClose"
+      @submitDialogData="submitDialogData"
+    >
+      <FormDialog
+        ref="formDialog"
+        :form-item-config-arr="formItemConfigArr"
+        @handleInputValue="handleInputValue"
+      />
+    </DialogWrapper>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TriggerDialog',
+  components: {
+    DialogWrapper: () => import('./components/DialogWrapper.vue'),
+    FormDialog: () => import('./form-dialog.vue')
+
+  },
+  props: {},
+  data() {
+    return {
+      dialogVisible: false, // 弹框状态
+      // 表单项配置
+      formItemConfigArr: [{
+        label: '选择器: 单选',
+        prop: 'SelectorSingleSelection',
+        id: 'SelectorSingleSelection',
+        itemType: 'SelectorSingleSelection',
+        deliveryLevel: '',
+        optionArr: [
+          { optionValue: '黄金糕', optionLabel: '黄金糕' },
+          { optionValue: '双皮奶', optionLabel: '双皮奶' },
+          { optionValue: '蚵仔煎', optionLabel: '蚵仔煎' },
+          { optionValue: '龙须面', optionLabel: '龙须面' },
+          { optionValue: '北京烤鸭', optionLabel: '北京烤鸭' }
+        ]
+      }, {
+        label: '选择器: 多选',
+        prop: 'SelectorMultipleSelection',
+        id: 'SelectorMultipleSelection',
+        itemType: 'SelectorMultipleSelection',
+        deliveryLevel: '',
+        optionArr: [
+          { optionValue: '东南', optionLabel: '东南', children: [
+            { optionValue: '上海', optionLabel: '上海', children: [
+              { optionValue: '普陀', optionLabel: '普陀' },
+              { optionValue: '黄埔', optionLabel: '黄埔' },
+              { optionValue: '徐汇', optionLabel: '徐汇' }]
+            },
+            { optionValue: '江苏', optionLabel: '江苏', children: [
+              { optionValue: '南京', optionLabel: '南京' },
+              { optionValue: '苏州', optionLabel: '苏州' },
+              { optionValue: '无锡', optionLabel: '无锡' }]
+            },
+            { optionValue: '浙江', optionLabel: '浙江', children: [
+              { optionValue: '杭州', optionLabel: '杭州' },
+              { optionValue: '宁波', optionLabel: '宁波' },
+              { optionValue: '嘉兴', optionLabel: '嘉兴' }]
+            }]
+          },
+          { optionValue: '西北', optionLabel: '西北', children: [
+            { optionValue: '陕西', optionLabel: '陕西', children: [
+              { optionValue: '西安', optionLabel: '西安' },
+              { optionValue: '延安', optionLabel: '延安' }]
+            },
+            { optionValue: '新疆维吾尔族自治区', optionLabel: '新疆维吾尔族自治区', children: [
+              { optionValue: '乌鲁木齐', optionLabel: '乌鲁木齐' },
+              { optionValue: '克拉玛依', optionLabel: '克拉玛依' }]
+            }]
+          }
+        ]
+      }, {
+        label: '选择器: 树结构',
+        prop: 'SelectorTreeStructure',
+        id: 'SelectorTreeStructure',
+        itemType: 'SelectorTreeStructure',
+        deliveryLevel: '',
+        optionArr: [
+          {
+            'id': 16610387558572,
+            'deptId': 100,
+            'parentId': 0,
+            'ancestors': null,
+            'deptName': '中科辅龙',
+            'parentName': null,
+            'children': [
+              {
+                'id': 16610389432685,
+                'deptId': 101,
+                'parentId': 100,
+                'ancestors': null,
+                'deptName': '北京总公司',
+                'parentName': null,
+                'children': [
+                  {
+                    'id': 16610388531515,
+                    'deptId': 103,
+                    'parentId': 101,
+                    'ancestors': null,
+                    'deptName': '研发部门',
+                    'parentName': null,
+                    'children': [
+                      {
+                        'id': 16610387615239,
+                        'deptId': 16610387615239,
+                        'parentId': 103,
+                        'ancestors': null,
+                        'deptName': '系统管理员',
+                        'parentName': null,
+                        'children': [],
+                        'userId': 1,
+                        'nickName': null
+                      }
+                    ],
+                    'userId': null,
+                    'nickName': null
+                  },
+                  {
+                    'id': 16610388036783,
+                    'deptId': 104,
+                    'parentId': 101,
+                    'ancestors': null,
+                    'deptName': '市场部门',
+                    'parentName': null,
+                    'children': [],
+                    'userId': null,
+                    'nickName': null
+                  },
+                  {
+                    'id': 16610388740710,
+                    'deptId': 105,
+                    'parentId': 101,
+                    'ancestors': null,
+                    'deptName': '测试部门',
+                    'parentName': null,
+                    'children': [
+                      {
+                        'id': 16610388604617,
+                        'deptId': 121,
+                        'parentId': 105,
+                        'ancestors': null,
+                        'deptName': '测试部',
+                        'parentName': null,
+                        'children': [],
+                        'userId': null,
+                        'nickName': null
+                      },
+                      {
+                        'id': 16610387802667,
+                        'deptId': 16610387802667,
+                        'parentId': 105,
+                        'ancestors': null,
+                        'deptName': '若依',
+                        'parentName': null,
+                        'children': [],
+                        'userId': 2,
+                        'nickName': null
+                      },
+                      {
+                        'id': 16610388008178,
+                        'deptId': 16610388008178,
+                        'parentId': 105,
+                        'ancestors': null,
+                        'deptName': '赵文莉',
+                        'parentName': null,
+                        'children': [],
+                        'userId': 738512,
+                        'nickName': null
+                      }
+                    ],
+                    'userId': null,
+                    'nickName': null
+                  },
+                  {
+                    'id': 16610389553740,
+                    'deptId': 106,
+                    'parentId': 101,
+                    'ancestors': null,
+                    'deptName': '财务部门',
+                    'parentName': null,
+                    'children': [],
+                    'userId': null,
+                    'nickName': null
+                  },
+                  {
+                    'id': 16610389178321,
+                    'deptId': 107,
+                    'parentId': 101,
+                    'ancestors': null,
+                    'deptName': '运维部门',
+                    'parentName': null,
+                    'children': [],
+                    'userId': null,
+                    'nickName': null
+                  }
+                ],
+                'userId': null,
+                'nickName': null
+              },
+              {
+                'id': 16610388755966,
+                'deptId': 102,
+                'parentId': 100,
+                'ancestors': null,
+                'deptName': '长沙分公司',
+                'parentName': null,
+                'children': [
+                  {
+                    'id': 16610389179839,
+                    'deptId': 108,
+                    'parentId': 102,
+                    'ancestors': null,
+                    'deptName': '市场部门',
+                    'parentName': null,
+                    'children': [],
+                    'userId': null,
+                    'nickName': null
+                  },
+                  {
+                    'id': 16610389330898,
+                    'deptId': 109,
+                    'parentId': 102,
+                    'ancestors': null,
+                    'deptName': '财务部门',
+                    'parentName': null,
+                    'children': [],
+                    'userId': null,
+                    'nickName': null
+                  }
+                ],
+                'userId': null,
+                'nickName': null
+              },
+              {
+                'id': 16610388015679,
+                'deptId': 110,
+                'parentId': 100,
+                'ancestors': null,
+                'deptName': '监理单位',
+                'parentName': null,
+                'children': [],
+                'userId': null,
+                'nickName': null
+              },
+              {
+                'id': 16610388258734,
+                'deptId': 16610388258734,
+                'parentId': 100,
+                'ancestors': null,
+                'deptName': '咩咩',
+                'parentName': null,
+                'children': [],
+                'userId': 4,
+                'nickName': null
+              }
+            ],
+            'userId': null,
+            'nickName': null
+          }
+        ]
+      }, {
+        label: '选择器: 单时间',
+        prop: 'SelectorSingleTime',
+        id: 'SelectorSingleTime',
+        itemType: 'SelectorSingleTime',
+        deliveryLevel: '',
+        optionArr: []
+      }, {
+        label: '选择器: 单日期',
+        prop: 'SelectorSingleDate',
+        id: 'SelectorSingleDate',
+        itemType: 'SelectorSingleDate',
+        deliveryLevel: '',
+        optionArr: []
+      }, {
+        label: '选择器: 日期范围长度测试',
+        prop: 'SelectorDateRange',
+        id: 'SelectorDateRange',
+        itemType: 'SelectorDateRange',
+        deliveryLevel: 'ESS',
+        optionArr: []
+      }, {
+        label: '多行文本',
+        prop: 'MultilineText',
+        id: 'MultilineText',
+        itemType: 'MultilineText',
+        deliveryLevel: '',
+        optionArr: []
+      }, {
+        label: '单选框',
+        prop: 'RadioBox',
+        id: 'RadioBox',
+        itemType: 'RadioBox',
+        deliveryLevel: '',
+        optionArr: [
+          { optionValue: '单选一', optionLabel: '单选一' },
+          { optionValue: '单选二', optionLabel: '单选二' },
+          { optionValue: '单选三', optionLabel: '单选三' },
+          { optionValue: '单选四', optionLabel: '单选四' },
+          { optionValue: '单选五', optionLabel: '单选五' }
+        ]
+      }, {
+        label: '多选框',
+        prop: 'MultipleCheckbox',
+        id: 'MultipleCheckbox',
+        itemType: 'MultipleCheckbox',
+        deliveryLevel: 'ESS',
+        optionArr: [
+          { optionValue: '复选框A', optionLabel: '复选框A' },
+          { optionValue: '复选框B', optionLabel: '复选框B' },
+          { optionValue: '复选框C', optionLabel: '复选框C' },
+          { optionValue: '复选框D', optionLabel: '复选框D' },
+          { optionValue: '复选框F', optionLabel: '复选框F' }
+        ]
+      }, {
+        label: '字符串输入框',
+        prop: 'InputString',
+        id: 'InputString',
+        itemType: 'InputString',
+        deliveryLevel: 'ESS',
+        optionArr: []
+      }, {
+        label: '整数输入框',
+        prop: 'InputInteger',
+        id: 'InputInteger',
+        itemType: 'InputInteger',
+        deliveryLevel: '',
+        optionArr: []
+      }, {
+        label: '小数输入框',
+        prop: 'InputDecimals',
+        id: 'InputDecimals',
+        itemType: 'InputDecimals',
+        deliveryLevel: '',
+        optionArr: []
+      }, {
+        label: '计数器',
+        prop: 'CounterFrame',
+        id: 'CounterFrame',
+        itemType: 'CounterFrame',
+        deliveryLevel: '',
+        optionArr: []
+      }, {
+        label: '文件上传',
+        prop: 'FileUpload',
+        id: 'FileUpload',
+        itemType: 'FileUpload',
+        deliveryLevel: '',
+        optionArr: []
+      }, {
+        label: '富文本',
+        prop: 'RichText',
+        id: 'RichText',
+        itemType: 'RichText',
+        deliveryLevel: '',
+        optionArr: []
+      }]
+    }
+  },
+  computed: { },
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    /* 弹窗 修改是否让页面显示与隐藏的事件 */
+    updateVisible(val) {
+      this.dialogVisible = val
+    },
+    /* 弹窗 确认 操作 */
+    submitDialogData() {
+      // this.dialogVisible = false
+      const formData = this.$refs.formDialog.formInline
+      console.log(formData)
+    },
+    /* 弹窗 关闭 操作 */
+    handleClose() {
+      this.dialogVisible = false
+    },
+
+    /* 表单操作 */
+    handleInputValue(data) {
+      console.log(data)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.trigger_dialog {
+  box-sizing: border-box;
+  width: calc(100% - 32px);
+  height: calc(100% - 72px);
+  margin: 16px;
+  padding: 16px;
+  border-radius: 4px;
+  background-color: #ccc;
+}
+</style>