| New file |
| | |
|---|
| | | <script setup> |
|---|
| | | import {computed, onMounted, onUpdated, reactive, ref, watch} from "vue" |
|---|
| | | import {filterChanged} from "@/hook" |
|---|
| | | import {useI18n} from "vue-i18n" |
|---|
| | | import {ElMessage, ElMessageBox,} from "element-plus" |
|---|
| | | import request from "@/utils/request" |
|---|
| | | import {useRouter,useRoute} from "vue-router" |
|---|
| | | import {Ellipse, Leafer, Line, Path, Polygon} from "leafer-ui"; |
|---|
| | | import {round} from "xe-utils"; |
|---|
| | | import DxfParser from "dxf-parser"; |
|---|
| | | import { saveAs } from 'file-saver'; |
|---|
| | | import DXFWriter from 'dxf-writer'; |
|---|
| | | |
|---|
| | | |
|---|
| | | const { t } = useI18n() |
|---|
| | | const router = useRouter() |
|---|
| | | const route = useRoute() |
|---|
| | | let width = ref("") |
|---|
| | | let height = ref("null") |
|---|
| | | let rowIndex = ref(null) |
|---|
| | | const xGrid = ref() |
|---|
| | | |
|---|
| | | //用于接收父组件参数 |
|---|
| | | let prop = defineProps({ |
|---|
| | | rowIndex:{} |
|---|
| | | }) |
|---|
| | | onMounted(()=>{ |
|---|
| | | if(Object.keys(prop.rowIndex).length === 0){ |
|---|
| | | return |
|---|
| | | } |
|---|
| | | rowIndex.value=prop.rowIndex |
|---|
| | | width.value=prop.rowIndex.width |
|---|
| | | height.value=prop.rowIndex.height |
|---|
| | | ongetproject(rowIndex.value) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const emits = defineEmits(['getUploadPicture']) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | let dxfData=ref(null) |
|---|
| | | let state=ref(false) |
|---|
| | | let points=ref([]) |
|---|
| | | let data1=ref(0);let data2=ref(0);let data3=ref(0);let data4=ref(0) |
|---|
| | | let data5=ref(0);let data6=ref(0);let data7=ref(0);let data8=ref(0) |
|---|
| | | |
|---|
| | | let datas1=ref(0);let datas2=ref(0);let datas3=ref(0);let datas4=ref(0) |
|---|
| | | let datas5=ref(0);let datas6=ref(0);let datas7=ref(0);let datas8=ref(0) |
|---|
| | | let big=0 |
|---|
| | | let leafer; |
|---|
| | | let parsedDXFData = ref([]); |
|---|
| | | let orderDetailWidth=ref(0) |
|---|
| | | let orderDetailHeight=ref(0) |
|---|
| | | let widthAgv=ref(0) |
|---|
| | | let heightAgv=ref(0) |
|---|
| | | |
|---|
| | | const ongetproject = (row) => { |
|---|
| | | |
|---|
| | | if(row.fileName==null||row.fileName==""){ |
|---|
| | | orderDetailWidth.value=row.width |
|---|
| | | orderDetailHeight.value=row.height |
|---|
| | | const main =document.getElementById('mains') |
|---|
| | | const width =document.getElementById('width') |
|---|
| | | const height =document.getElementById('height') |
|---|
| | | if(orderDetailWidth.value/400>orderDetailHeight.value/250){ |
|---|
| | | big=orderDetailWidth.value/400 |
|---|
| | | }else{ |
|---|
| | | big=orderDetailHeight.value/250 |
|---|
| | | } |
|---|
| | | let widthAgv=orderDetailWidth.value/big |
|---|
| | | let heightAgv=orderDetailHeight.value/big |
|---|
| | | main.style.width=widthAgv+"px" |
|---|
| | | main.style.height=heightAgv+"px" |
|---|
| | | main.style.backgroundColor = "#8d9095" |
|---|
| | | datas2.value=heightAgv |
|---|
| | | datas8.value=heightAgv |
|---|
| | | datas5.value=widthAgv |
|---|
| | | datas7.value=widthAgv |
|---|
| | | if(leafer!==undefined){ |
|---|
| | | leafer.clear() |
|---|
| | | } |
|---|
| | | leafer=new Leafer({ view: 'canvas' }) |
|---|
| | | points.value=[0, heightAgv, 0, 0, widthAgv, 0, widthAgv,heightAgv] |
|---|
| | | const polygon = new Polygon({ |
|---|
| | | points: points.value, |
|---|
| | | fill: '#32cd79', |
|---|
| | | origin: [0, 0] |
|---|
| | | }) |
|---|
| | | setTimeout(() => { |
|---|
| | | leafer.add(polygon); |
|---|
| | | }, 30) |
|---|
| | | state.value=true |
|---|
| | | }else{ |
|---|
| | | const b64Data = row.fileData; |
|---|
| | | const byteCharacters = atob(b64Data); |
|---|
| | | const parser = new DxfParser(); |
|---|
| | | dxfData.value = parser.parseSync(byteCharacters) |
|---|
| | | state.value=false |
|---|
| | | handleFileUpload() |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | const getproject = () => { |
|---|
| | | if (state.value){ |
|---|
| | | leafer = new Leafer({view: 'canvas'}) |
|---|
| | | points.value = [datas1.value + (parseInt(data7.value) / big), datas2.value - (parseInt(data8.value) / big), datas3.value + (parseInt(data1.value) / big), datas4.value + (parseInt(data2.value) / big), |
|---|
| | | datas5.value - (parseInt(data3.value) / big), datas6.value + (parseInt(data4.value) / big), datas7.value - (parseInt(data5.value) / big), datas8.value - (parseInt(data6.value) / big)] |
|---|
| | | const polygon = new Polygon({ |
|---|
| | | points: points.value, |
|---|
| | | fill: '#32cd79', |
|---|
| | | origin: [0, 0] |
|---|
| | | }) |
|---|
| | | leafer.add(polygon) |
|---|
| | | exportToDXF(1) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | const exportToDXF = async (value) => { |
|---|
| | | const dxf = new DXFWriter(); |
|---|
| | | const polygonPoints = points.value.map((coord, index) => ({ |
|---|
| | | x: index % 2 === 0 ? coord : undefined, |
|---|
| | | y: index % 2 !== 0 ? -coord : undefined |
|---|
| | | })).filter(point => point.x !== undefined && point.y !== undefined); |
|---|
| | | |
|---|
| | | let arr=[] |
|---|
| | | for (let i=0;i<points.value.length;i++){ |
|---|
| | | let a=[] |
|---|
| | | if(i % 2 === 0){ |
|---|
| | | a.push(points.value[i]*big) |
|---|
| | | a.push((points.value[i+1]*big)) |
|---|
| | | a.push(0) |
|---|
| | | arr.push(a) |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | let minX = Infinity, minY = Infinity; |
|---|
| | | let maxX = -Infinity, maxY = -Infinity; |
|---|
| | | arr.forEach(p => { |
|---|
| | | minX = Math.min(Math.abs(p[0]),minX ); |
|---|
| | | minY = Math.min(Math.abs(p[1]),minY); |
|---|
| | | maxX = Math.max(Math.abs(p[0]),maxX ); |
|---|
| | | maxY = Math.max(Math.abs(p[1]),maxY); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | arr.forEach(p => { |
|---|
| | | p[1]=maxY-minY-p[1] |
|---|
| | | }); |
|---|
| | | |
|---|
| | | |
|---|
| | | dxf.drawPolyline(arr,{ closed: true, layer: '0' }) |
|---|
| | | |
|---|
| | | const blob = new Blob([dxf.toDxfString()], {type: 'text/plain;charset=utf-8'}); |
|---|
| | | const base64 = await fileToBase64(blob); |
|---|
| | | if(value===1){ |
|---|
| | | emits('getUploadPicture', "map.dxf",base64.replace(/^data:.+;base64,/, ""),) |
|---|
| | | } |
|---|
| | | else if(value===2&&state.value){ |
|---|
| | | saveAs(blob, 'map.dxf'); |
|---|
| | | }else{ |
|---|
| | | ElMessage.warning("该格式不支持导出") |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | const fileToBase64 = (file) => { |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | const reader = new FileReader(); |
|---|
| | | reader.onload = () => resolve(reader.result); |
|---|
| | | reader.onerror = reject; |
|---|
| | | reader.readAsDataURL(file); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | function toBottomOrigin(y, canvasHeight) { |
|---|
| | | return canvasHeight - y; // 将左上角Y坐标转换为左下角坐标系 |
|---|
| | | } |
|---|
| | | |
|---|
| | | const handleFile = async (event) => { |
|---|
| | | state.value=false |
|---|
| | | const main = document.getElementById('mains') |
|---|
| | | const width = document.getElementById('width') |
|---|
| | | const height = document.getElementById('height') |
|---|
| | | if(leafer!==undefined){ |
|---|
| | | leafer.clear() |
|---|
| | | } |
|---|
| | | leafer = new Leafer({view: 'canvas'}); |
|---|
| | | const file = event.target.files[0]; |
|---|
| | | if (file) { |
|---|
| | | const reader = new FileReader(); |
|---|
| | | reader.onload = async (e) => { |
|---|
| | | const text = e.target.result; |
|---|
| | | try { |
|---|
| | | const base64 = await fileToBase64(file); |
|---|
| | | const parser = new DxfParser(); |
|---|
| | | dxfData.value = parser.parseSync(text); |
|---|
| | | handleFileUpload() |
|---|
| | | |
|---|
| | | emits('getUploadPicture', file.name,base64.replace(/^data:.+;base64,/, "")) |
|---|
| | | } catch (error) { |
|---|
| | | console.error('解析DXF文件时出错:', error); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | reader.readAsText(file); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | const handleFileUpload = () => { |
|---|
| | | const main =document.getElementById('mains') |
|---|
| | | const width =document.getElementById('width') |
|---|
| | | const height =document.getElementById('height') |
|---|
| | | if(leafer!==undefined){ |
|---|
| | | leafer.clear() |
|---|
| | | } |
|---|
| | | leafer = new Leafer({ view: 'canvas' }); |
|---|
| | | try { |
|---|
| | | let minX = Infinity, minY = Infinity; |
|---|
| | | let maxX = -Infinity, maxY = -Infinity; |
|---|
| | | dxfData.value.entities.forEach(entity => { |
|---|
| | | if (entity.type === 'LINE' || entity.type === 'LWPOLYLINE') { |
|---|
| | | entity.vertices.forEach(vertices => { |
|---|
| | | minX = Math.min(vertices.x, minX); |
|---|
| | | minY = Math.min(vertices.y, minY); |
|---|
| | | maxX = Math.max(vertices.x, maxX); |
|---|
| | | maxY = Math.max(vertices.y, maxY); |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | if (entity.type === 'ARC') { |
|---|
| | | const center = {x: entity.center.x, y: entity.center.y}; |
|---|
| | | const radius = entity.radius; |
|---|
| | | const startAngle = entity.startAngle * (180 / Math.PI); |
|---|
| | | const endAngle = entity.endAngle * (180 / Math.PI); |
|---|
| | | |
|---|
| | | const points = []; |
|---|
| | | const steps = 32; |
|---|
| | | for (let i = 0; i <= steps; i++) { |
|---|
| | | const angle = startAngle + (endAngle - startAngle) * (i / steps); |
|---|
| | | const x = center.x + radius * Math.cos(angle * Math.PI / 180); |
|---|
| | | const y = center.y + radius * Math.sin(angle * Math.PI / 180); |
|---|
| | | points.push({x, y}); |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | points.forEach(p => { |
|---|
| | | minX = Math.min(minX, p.x); |
|---|
| | | minY = Math.min(minY, p.y); |
|---|
| | | maxX = Math.max(maxX, p.x); |
|---|
| | | maxY = Math.max(maxY, p.y); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | if ((maxX - minX) / 400 > (maxY - minY) / 250) { |
|---|
| | | big = (maxX - minX) / 400 |
|---|
| | | } else { |
|---|
| | | big = (maxY - minY) / 250 |
|---|
| | | } |
|---|
| | | |
|---|
| | | Object.values(dxfData.value.entities).forEach(entity => { |
|---|
| | | switch (entity.type) { |
|---|
| | | case 'LINE': |
|---|
| | | main.style.width = (maxX - minX) / big + "px" |
|---|
| | | main.style.height = (maxY - minY) / big + "px" |
|---|
| | | main.style.backgroundColor = "#8d9095" |
|---|
| | | width.innerHTML = round(maxX - minX, 2) |
|---|
| | | height.innerHTML = round(maxY - minY, 2) |
|---|
| | | const line = new Line({ |
|---|
| | | points: [(entity.vertices[0].x - minX) / big, ((maxY - minY) - (entity.vertices[0].y- minY)) / big, |
|---|
| | | (entity.vertices[1].x - minX) / big, ((maxY - minY) - (entity.vertices[1].y - minY)) / big], |
|---|
| | | stroke: '#f00', |
|---|
| | | strokeWidth: 1 |
|---|
| | | }) |
|---|
| | | setTimeout(() => { |
|---|
| | | leafer.add(line); |
|---|
| | | }, 30); |
|---|
| | | break; |
|---|
| | | case 'LWPOLYLINE': |
|---|
| | | |
|---|
| | | main.style.width = (maxX - minX) / big + "px" |
|---|
| | | main.style.height = (maxY - minY) / big + "px" |
|---|
| | | main.style.backgroundColor = "#8d9095" |
|---|
| | | width.innerHTML = round(maxX - minX, 2) |
|---|
| | | height.innerHTML = round(maxY - minY, 2) |
|---|
| | | if(entity.vertices.length==4){ |
|---|
| | | state.value=true |
|---|
| | | datas1.value=0 |
|---|
| | | datas2.value=(maxY - minY) / big |
|---|
| | | datas3.value=0 |
|---|
| | | datas4.value=0 |
|---|
| | | datas5.value=(maxX - minX) / big |
|---|
| | | datas6.value=0 |
|---|
| | | datas7.value=(maxX - minX) / big |
|---|
| | | datas8.value=(maxY - minY) / big |
|---|
| | | |
|---|
| | | points.value=[0, heightAgv, 0, 0, widthAgv, 0, widthAgv,heightAgv] |
|---|
| | | |
|---|
| | | } |
|---|
| | | let point = entity.vertices.map(v => [ |
|---|
| | | (v.x - minX) / big, |
|---|
| | | toBottomOrigin((v.y - minY) / big, (maxY - minY) / big), |
|---|
| | | ]).flat() |
|---|
| | | const polygon = new Polygon({ |
|---|
| | | points: point, |
|---|
| | | fill: '#32cd79', |
|---|
| | | }) |
|---|
| | | setTimeout(() => { |
|---|
| | | leafer.add(polygon); |
|---|
| | | }, 30); |
|---|
| | | |
|---|
| | | break; |
|---|
| | | case 'CIRCLE': |
|---|
| | | big = (entity.radius * 2) / 400 |
|---|
| | | main.style.width = entity.radius * 2 / big + "px" |
|---|
| | | main.style.height = entity.radius * 2 / big + "px" |
|---|
| | | width.innerHTML = round(entity.radius * 2, 2) |
|---|
| | | height.innerHTML = round(entity.radius * 2, 2) |
|---|
| | | const ellipse = new Ellipse({ |
|---|
| | | width: entity.radius * 2 / big, |
|---|
| | | height: entity.radius * 2 / big, |
|---|
| | | fill: "#32cd79" |
|---|
| | | }) |
|---|
| | | setTimeout(() => { |
|---|
| | | leafer.add(ellipse); |
|---|
| | | }, 30); |
|---|
| | | |
|---|
| | | break; |
|---|
| | | case 'ELLIPSE': |
|---|
| | | console.log(entity) |
|---|
| | | |
|---|
| | | const {majorAxisEndPoint, axisRatio} = entity; |
|---|
| | | |
|---|
| | | const dx = majorAxisEndPoint.x; |
|---|
| | | const dy = majorAxisEndPoint.y; |
|---|
| | | const a = Math.sqrt(dx ** 2 + dy ** 2); |
|---|
| | | const c = a * axisRatio; |
|---|
| | | const θ = Math.atan2(dy, dx); |
|---|
| | | const l = axisRatio * (180 / Math.PI); |
|---|
| | | |
|---|
| | | if ((a * 2) / 400 > (c * 2) / 250) { |
|---|
| | | big = (a * 2) / 400 |
|---|
| | | } else { |
|---|
| | | big = (c * 2) / 250 |
|---|
| | | } |
|---|
| | | |
|---|
| | | main.style.width = a * 2 / big + "px" |
|---|
| | | main.style.height = c * 2 / big + "px" |
|---|
| | | width.innerHTML = round(a * 2, 2) |
|---|
| | | height.innerHTML = round(c * 2, 2) |
|---|
| | | const ellipse2 = new Ellipse({ |
|---|
| | | width: a * 2 / big, |
|---|
| | | height: c * 2 / big, |
|---|
| | | fill: "#32cd79", |
|---|
| | | }) |
|---|
| | | |
|---|
| | | setTimeout(() => { |
|---|
| | | leafer.add(ellipse2); |
|---|
| | | }, 30); |
|---|
| | | |
|---|
| | | break; |
|---|
| | | case 'ARC': |
|---|
| | | const center = {x: entity.center.x, y: entity.center.y}; |
|---|
| | | const radius = entity.radius; |
|---|
| | | const startAngle = entity.startAngle * (180 / Math.PI); |
|---|
| | | const endAngle = entity.endAngle * (180 / Math.PI); |
|---|
| | | |
|---|
| | | if ((maxX - minX) / 400 > (maxY - minY) / 250) { |
|---|
| | | big = (maxX - minX) / 400 |
|---|
| | | } else { |
|---|
| | | big = (maxY - minY) / 250 |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | // 计算圆弧的起点和终点 |
|---|
| | | const startX = (center.x + radius * Math.cos(entity.startAngle) - minX); |
|---|
| | | const startY = (maxY - minY) - ((center.y + radius * Math.sin(entity.startAngle)) - minY); |
|---|
| | | const endX = (center.x + radius * Math.cos(entity.endAngle) - minX); |
|---|
| | | const endY = (maxY - minY) - ((center.y + radius * Math.sin(entity.endAngle)) - minY); |
|---|
| | | |
|---|
| | | // 创建圆弧路径 |
|---|
| | | const path = new Path({ |
|---|
| | | path: `M ${startX / big} ${startY / big} A ${radius / big} ${radius / big} 0 ${endAngle - startAngle > 180 ? 1 : 0} 0 ${endX / big} ${endY / big}`, |
|---|
| | | stroke: '#f00', |
|---|
| | | strokeWidth: 1, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | |
|---|
| | | setTimeout(() => { |
|---|
| | | leafer.add(path); |
|---|
| | | }, 30); |
|---|
| | | |
|---|
| | | |
|---|
| | | break; |
|---|
| | | |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } catch (error) { |
|---|
| | | console.error('解析DXF文件时出错:', error); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const validate = async () => { |
|---|
| | | data1.value=0 |
|---|
| | | data2.value=0 |
|---|
| | | data3.value=0 |
|---|
| | | data4.value=0 |
|---|
| | | data5.value=0 |
|---|
| | | data6.value=0 |
|---|
| | | data7.value=0 |
|---|
| | | data8.value=0 |
|---|
| | | big=0 |
|---|
| | | return true |
|---|
| | | } |
|---|
| | | defineExpose({ |
|---|
| | | validate |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <template> |
|---|
| | | <div style="width: 404px;height: 254px;border: 2px solid #000;float: left; |
|---|
| | | position: relative;display: flex;justify-content: center;align-content: center;margin-left: 100px"> |
|---|
| | | <div id="mains" ref="parent" > |
|---|
| | | <canvas id="canvas" ></canvas> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div id="width" style="height: 20px;position: absolute;top: 37px;left: 300px;">{{orderDetailWidth}}</div> |
|---|
| | | <div id="height" style="width: 60px;position: absolute;top: 178px;left: 60px;">{{orderDetailHeight}}</div> |
|---|
| | | <div style="float: left;margin-top: 30px;margin-left: 150px"> |
|---|
| | | <el-input class="contactNumber" @blur="getproject" type="text" v-model="data1" /> |
|---|
| | | <el-input class="contactNumber" @blur="getproject" type="text" v-model="data2" /> |
|---|
| | | <el-input class="contactNumber" @blur="getproject" type="text" v-model="data3" /> |
|---|
| | | <el-input class="contactNumber" @blur="getproject" type="text" v-model="data4" /><br> |
|---|
| | | <el-input class="contactNumber" @blur="getproject" type="text" v-model="data5" /> |
|---|
| | | <el-input class="contactNumber" @blur="getproject" type="text" v-model="data6" /> |
|---|
| | | <el-input class="contactNumber" @blur="getproject" type="text" v-model="data7" /> |
|---|
| | | <el-input class="contactNumber" @blur="getproject" type="text" v-model="data8" /><br> |
|---|
| | | </div> |
|---|
| | | <div id="width" style="height: 20px;position: absolute;top: 342px;left: 145px;">上</div> |
|---|
| | | <div id="width" style="height: 20px;position: absolute;top: 364px;left: 145px;">下</div> |
|---|
| | | <div id="width" style="height: 20px;position: absolute;top: 322px;left: 185px;">横</div> |
|---|
| | | <div id="width" style="height: 20px;position: absolute;top: 322px;left: 255px;">竖</div> |
|---|
| | | <div id="width" style="height: 20px;position: absolute;top: 322px;left: 320px;">横</div> |
|---|
| | | <div id="width" style="height: 20px;position: absolute;top: 322px;left: 385px;">竖</div> |
|---|
| | | <div style="float: left;margin-top: 20px;margin-left: 80px;"> |
|---|
| | | <input type="file" @change="handleFile" accept=".dxf" /> |
|---|
| | | <el-button type="primary" @click="exportToDXF(2)">导出DXF</el-button> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .contactNumber{ |
|---|
| | | width: 60px; |
|---|
| | | height:20px; |
|---|
| | | border: none; |
|---|
| | | box-shadow: none; |
|---|
| | | font-size: 15px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #mains { |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | </style> |
|---|
