<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 fileName=ref(null)
|
let fileDate=ref(null)
|
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 ongetprojectOrder = (row) => {
|
if(row==undefined||row.width==null){
|
const main = document.getElementById('main2')
|
const width = document.getElementById('width2')
|
const height = document.getElementById('height2')
|
main.style.backgroundColor = "#ffffff"
|
width.innerHTML = 0
|
height.innerHTML = 0
|
if (leafer !== undefined) {
|
leafer.clear()
|
}
|
return
|
}
|
|
if (row.fileName == null || row.fileName == "") {
|
orderDetailWidth.value = row.width
|
orderDetailHeight.value = row.height
|
const main = document.getElementById('main2')
|
const width = document.getElementById('width2')
|
const height = document.getElementById('height2')
|
if (orderDetailWidth.value / 400 > orderDetailHeight.value / 200) {
|
big = orderDetailWidth.value / 400
|
} else {
|
big = orderDetailHeight.value / 200
|
}
|
let widthAgv = orderDetailWidth.value / big
|
let heightAgv = orderDetailHeight.value / big
|
main.style.width = widthAgv + "px"
|
main.style.height = heightAgv + "px"
|
main.style.backgroundColor = "#8d9095"
|
width.innerHTML = orderDetailWidth.value
|
height.innerHTML = orderDetailHeight.value
|
datas2.value = heightAgv
|
datas8.value = heightAgv
|
datas5.value = widthAgv
|
datas7.value = widthAgv
|
if (leafer !== undefined) {
|
leafer.clear()
|
}
|
leafer = new Leafer({view: 'canva2'})
|
points.value = [0, heightAgv, 0, 0, widthAgv, 0, widthAgv, heightAgv]
|
const polygon = new Polygon({
|
points: points.value,
|
stroke: '#f00',
|
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()
|
}
|
}
|
|
|
function toBottomOrigin(y, canvasHeight) {
|
return canvasHeight - y; // 将左上角Y坐标转换为左下角坐标系
|
}
|
|
|
const handleFileUpload = () => {
|
const main = document.getElementById('main2')
|
const width = document.getElementById('width2')
|
const height = document.getElementById('height2')
|
if (leafer !== undefined) {
|
leafer.clear()
|
}
|
leafer = new Leafer({view: 'canva2'});
|
try {
|
let type = 0;
|
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') {
|
type = 1
|
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 (entity.type === 'CIRCLE') {
|
type = 1
|
minX = Math.min(minX, entity.center.x - entity.radius);
|
minY = Math.min(minY, entity.center.y - entity.radius);
|
maxX = Math.max(maxX, entity.center.x + entity.radius);
|
maxY = Math.max(maxY, entity.center.y + entity.radius);
|
}
|
});
|
if ((maxX - minX) / 400 > (maxY - minY) / 200) {
|
big = (maxX - minX) / 400
|
} else {
|
big = (maxY - minY) / 200
|
}
|
|
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)
|
|
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,
|
stroke: '#f00'
|
})
|
setTimeout(() => {
|
leafer.add(polygon);
|
}, 30);
|
|
|
|
break;
|
case 'CIRCLE':
|
let CIRCLEX = (entity.center.x - minX - entity.radius) / big
|
let CIRCLEY = ((maxY - minY) - (entity.center.y - minY + entity.radius)) / big
|
if (big < (entity.radius * 2) / 400) {
|
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)
|
CIRCLEX = 0
|
CIRCLEY = 0
|
}
|
|
const ellipse = new Ellipse({
|
x: CIRCLEX,
|
y: CIRCLEY,
|
width: entity.radius * 2 / big,
|
height: entity.radius * 2 / big,
|
//fill: "#32cd79"
|
stroke: '#f00',
|
})
|
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) / 200) {
|
big = (a * 2) / 400
|
} else {
|
big = (c * 2) / 200
|
}
|
|
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,
|
stroke: '#f00',
|
})
|
|
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) / 200) {
|
big = (maxX - minX) / 400
|
} else {
|
big = (maxY - minY) / 200
|
}
|
|
|
// 计算圆弧的起点和终点
|
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,
|
ongetprojectOrder
|
})
|
|
|
|
|
|
|
</script>
|
|
<template>
|
<div style="width: 404px;height: 204px;border: 2px solid #000;float: left;
|
position: relative;display: flex;justify-content: center;align-content: center;margin-left: 80px;margin-top: 10px;">
|
<div id="main2" ref="parent" >
|
<canvas id="canva2" ></canvas>
|
</div>
|
</div>
|
<div id="width2" style="height: 20px;position: absolute;top: -8px;left: 250px;">{{orderDetailWidth}}</div>
|
<div id="height2" style="width: 60px;position: absolute;top: 95px;left: 20px;">{{orderDetailHeight}}</div>
|
|
|
|
|
|
</template>
|
|
<style scoped>
|
.contactNumber{
|
width: 60px;
|
height:20px;
|
border: none;
|
box-shadow: none;
|
font-size: 15px;
|
}
|
.custom-file-upload {
|
border: 1px solid #ccc;
|
display: inline-block;
|
padding: 6px 12px;
|
cursor: pointer;
|
background-color: #f9f9f9;
|
}
|
|
#mains {
|
position: relative;
|
}
|
</style>
|
