|
|
|
|
<script setup>
|
import { Leafer, Polygon,Ellipse,Line,Path } from 'leafer-ui'
|
import {nextTick, onMounted, onUnmounted, onUpdated, reactive, ref, watch} from "vue"
|
import { saveAs } from 'file-saver';
|
import DXFWriter from 'dxf-writer';
|
import DxfParser from 'dxf-parser';
|
import {round} from "xe-utils";
|
import request from "@/utils/request";
|
import {ElMessage} from "element-plus";
|
|
let XMargin=ref(30)
|
let YMargin=ref(30)
|
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;
|
|
onMounted(() => {
|
const main =document.getElementById('mains')
|
const width =document.getElementById('width')
|
const height =document.getElementById('height')
|
const iocn =document.getElementById('iocn')
|
width.innerHTML=1500
|
height.innerHTML=600
|
if(1500/400>600/300){
|
big=1500/400
|
}else{
|
big=600/300
|
}
|
let widthAgv=1500/big
|
let heightAgv=600/big
|
main.style.width=widthAgv+"px"
|
main.style.height=heightAgv+"px"
|
main.style.backgroundColor="white"
|
iocn.style.marginLeft=XMargin.value/big+"px"
|
iocn.style.marginTop=YMargin.value/big+"px"
|
datas2.value=heightAgv
|
datas8.value=heightAgv
|
datas5.value=widthAgv
|
datas7.value=widthAgv
|
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],
|
scale:0.5
|
})
|
leafer.add(polygon)
|
|
})
|
const getproject = () => {
|
leafer=new Leafer({ view: 'canvas' })
|
points.value=[datas1.value+(parseInt(data1.value)/big), datas2.value-(parseInt(data2.value)/big), datas3.value+(parseInt(data3.value)/big), datas4.value+(parseInt(data4.value)/big),
|
datas5.value-(parseInt(data5.value)/big), datas6.value+(parseInt(data6.value)/big), datas7.value-(parseInt(data7.value)/big), datas8.value-(parseInt(data8.value)/big)]
|
const polygon = new Polygon({
|
points: points.value,
|
fill: '#32cd79',
|
origin: [0, 0]
|
})
|
leafer.add(polygon)
|
|
}
|
|
const exportToDXF = () => {
|
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' });
|
saveAs(blob, 'map.dxf');
|
}
|
|
|
function toBottomOrigin(y, canvasHeight) {
|
return canvasHeight - y; // 将左上角Y坐标转换为左下角坐标系
|
}
|
|
function addPolygonAsLines(dxf, points, layer = '0') {
|
for (let i = 0; i < points.length; i++) {
|
const nextIdx = (i + 1) % points.length;
|
dxf.drawPolygon(
|
points[i].x, points[i].y,
|
points[nextIdx].x, points[nextIdx].y
|
);
|
}
|
}
|
|
const uploadToServer = (data, fileName) => {
|
request.post('/order/upload-dxf', {
|
fileName: fileName,
|
fileData: data
|
}, {
|
headers: {'Content-Type': 'application/json'}
|
});
|
};
|
|
const file = ref(null);
|
const triggerFileSelect = () => {
|
request.post("/order/selectUploadDxf").then((res) => {
|
if (res.code === "200" ) {
|
console.log(res.data)
|
const b64Data = res.data.data.file_data;
|
const byteCharacters = atob(b64Data);
|
const parser = new DxfParser();
|
const dxfData = parser.parseSync(byteCharacters)
|
console.log(dxfData)
|
}
|
})
|
};
|
|
|
|
const fileToBase64 = (file) => {
|
return new Promise((resolve, reject) => {
|
const reader = new FileReader();
|
reader.onload = () => resolve(reader.result);
|
reader.onerror = reject;
|
reader.readAsDataURL(file);
|
});
|
};
|
|
const handleFileUpload = async (event) => {
|
const main = document.getElementById('mains')
|
const width = document.getElementById('width')
|
const height = document.getElementById('height')
|
leafer.removeAll()
|
leafer = new Leafer({view: 'canvas'});
|
const file = event.target.files[0];
|
try {
|
const base64 = await fileToBase64(file);
|
const pureBase64 = base64.replace(/^data:.+;base64,/, "");
|
uploadToServer(pureBase64, file.name)
|
} catch (error) {
|
console.error('转换失败:', error);
|
}
|
if (file) {
|
const reader = new FileReader();
|
reader.onload = async (e) => {
|
const text = e.target.result;
|
try {
|
const parser = new DxfParser();
|
const dxfData = parser.parseSync(text);
|
|
let minX = Infinity, minY = Infinity;
|
let maxX = -Infinity, maxY = -Infinity;
|
dxfData.entities.forEach(entity => {
|
if (entity.type === 'LINE' || entity.type === 'LWPOLYLINE') {
|
entity.vertices.forEach(vertices => {
|
minX = Math.min(Math.abs(vertices.x), minX);
|
minY = Math.min(Math.abs(vertices.y), minY);
|
maxX = Math.max(Math.abs(vertices.x), maxX);
|
maxY = Math.max(Math.abs(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) / 300) {
|
big = (maxX - minX) / 400
|
} else {
|
big = (maxY - minY) / 300
|
}
|
|
Object.values(dxfData.entities).forEach(entity => {
|
/*const bounds = drawEntity(entity);
|
|
if (bounds) {
|
minX = Math.min(minX, bounds.minX);
|
minY = Math.min(minY, bounds.minY);
|
maxX = Math.max(maxX, bounds.maxX);
|
maxY = Math.max(maxY, bounds.maxY);
|
}*/
|
switch (entity.type) {
|
|
case 'LINE':
|
/*main.style.width=(maxX-minX)+"px"
|
main.style.height=(maxY-minY)+"px"
|
width.innerHTML=round(maxX-minX,2)
|
height.innerHTML=round(maxY-minY,2)
|
const line = new Line({
|
points: [(Math.abs(entity.vertices[0].x)-minX)/big, toBottomOrigin((Math.abs(entity.vertices[0].y)-minY)/big,(maxY-minY)/big),
|
(Math.abs(entity.vertices[1].x)-minX)/big, toBottomOrigin((Math.abs(entity.vertices[1].y)-minY)/big,(maxY-minY)/big)],
|
stroke: '#f00',
|
strokeWidth: 2
|
})*/
|
main.style.width = (maxX - minX) / big + "px"
|
main.style.height = (maxY - minY) / big + "px"
|
width.innerHTML = round(maxX - minX, 2)
|
height.innerHTML = round(maxY - minY, 2)
|
const line = new Line({
|
points: [(Math.abs(entity.vertices[0].x) - minX) / big, ((maxY - minY) - (Math.abs(entity.vertices[0].y) - minY)) / big,
|
(Math.abs(entity.vertices[1].x) - minX) / big, ((maxY - minY) - (Math.abs(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 = "white"
|
width.innerHTML = round(maxX - minX, 2)
|
height.innerHTML = round(maxY - minY, 2)
|
let point = entity.vertices.map(v => [
|
(Math.abs(v.x) - minX) / big,
|
toBottomOrigin((Math.abs(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) / 300) {
|
big = (a * 2) / 400
|
} else {
|
big = (c * 2) / 300
|
}
|
|
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) / 300) {
|
big = (maxX - minX) / 400
|
} else {
|
big = (maxY - minY) / 300
|
}
|
|
|
// 计算圆弧的起点和终点
|
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;
|
|
}
|
})
|
// 自动缩放视图
|
/*if (minX !== Infinity) {
|
const width = maxX - minX;
|
const height = maxY - minY;
|
const centerX = (minX + maxX) / 2;
|
const centerY = (minY + maxY) / 2;
|
|
main.style.width=width/big+"px"
|
main.style.height=height/big+"px"
|
|
}*/
|
|
} catch (error) {
|
console.error('解析DXF文件时出错:', error);
|
}
|
};
|
reader.readAsText(file);
|
}
|
};
|
|
function drawEntity(entity) {
|
switch (entity.type) {
|
case 'LWPOLYLINE':
|
return drawPolyline(entity);
|
case 'POLYLINE':
|
return drawPolyline(entity);
|
case 'LINE':
|
return drawLine(entity);
|
case 'CIRCLE':
|
return drawCircle(entity);
|
case 'ARC':
|
return drawArc(entity);
|
case 'SPLINE':
|
return drawSpline(entity);
|
default:
|
console.warn('Unsupported entity type:', entity.type);
|
return null;
|
}
|
}
|
|
let minX = Infinity, minY = Infinity;
|
let maxX = -Infinity, maxY = -Infinity;
|
// 绘制多段线
|
function drawPolyline(polyline) {
|
const points = polyline.vertices.map(v => {
|
return { x: Math.abs(v.x), y: Math.abs(v.y) }; // 翻转Y坐标
|
});
|
|
// 处理闭合多边形
|
if (polyline.flags && polyline.flags.includes('closed') && points.length > 0) {
|
points.push({...points[0]});
|
}
|
|
// 计算边界
|
|
points.forEach(p => {
|
minX = Math.min(p.x,minX);
|
minY = Math.min(p.y,minY);
|
maxX = Math.max(p.x,maxX);
|
maxY = Math.max(p.y,maxY);
|
});
|
|
let agvX=maxX-minX
|
let agvY=maxY-minY
|
|
|
// 创建Leafer多边形
|
const polygon = new Polygon({
|
points: points.flatMap(p => [(p.x-minX)/big,(agvY-(p.y-minY))/big]),
|
fill: 'rgba(100, 150, 255, 0.3)',
|
stroke: '#32cd79',
|
strokeWidth: 2,
|
cornerRadius: 0,
|
draggable: true
|
});
|
|
// 保存原始DXF数据
|
polygon.dxfData = {
|
type: polyline.type,
|
layer: polyline.layer || '0',
|
color: polyline.color || 7
|
};
|
setTimeout(() => {
|
leafer.add(polygon);
|
}, 30);
|
|
|
return { minX, minY, maxX, maxY };
|
}
|
|
// 绘制直线
|
function drawLine(line) {
|
const points = line.vertices.map(v => {
|
return { x: Math.abs(v.x), y: Math.abs(v.y) };
|
});
|
|
points.forEach(p => {
|
minX = Math.min(p.x,minX);
|
minY = Math.min(p.y,minY);
|
maxX = Math.max(p.x,maxX);
|
maxY = Math.max(p.y,maxY);
|
});
|
|
let agvX=maxX-minX
|
let agvY=maxY-minY
|
|
const lineObj = new Line({
|
points:[
|
(points[0].x-minX)/big,(agvY-(points[0].y-minY))/big,
|
(points[1].x-minX)/big,(agvY-(points[1].y-minY))/big
|
],
|
stroke: '#32cd79',
|
strokeWidth: 2
|
});
|
|
setTimeout(() => {
|
leafer.add(lineObj);
|
}, 30);
|
|
return { minX, minY, maxX, maxY };
|
}
|
|
// 绘制圆
|
function drawCircle(circle) {
|
const center = { x: circle.center.x, y: circle.center.y };
|
const radius = circle.radius;
|
|
minX = center.x - radius;
|
minY = center.y - radius;
|
maxX = center.x + radius;
|
maxY = center.y + radius;
|
|
const circleObj = new Leafer.Ellipse({
|
x: center.x,
|
y: center.y,
|
radiusX: radius,
|
radiusY: radius,
|
fill: 'rgba(100, 150, 255, 0.3)',
|
stroke: '#32cd79',
|
strokeWidth: 2
|
});
|
|
circleObj.dxfData = {
|
type: 'CIRCLE',
|
layer: circle.layer || '0',
|
color: circle.color || 7
|
};
|
|
leafer.add(circleObj);
|
|
return { minX, minY, maxX, maxY };
|
}
|
|
// 绘制圆弧
|
function drawArc(arc) {
|
const center = { x: arc.center.x, y: arc.center.y };
|
const radius = arc.radius;
|
const startAngle = arc.startAngle*(180/Math.PI);
|
const endAngle = arc.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);
|
});
|
let agvX=maxX-minX
|
let agvY=maxY-minY
|
|
// 计算圆弧的起点和终点
|
const startX = (center.x-minX)/big + radius/big * Math.cos(arc.startAngle);
|
const startY = (agvY-(center.y-minY))/big + radius/big * Math.sin(arc.startAngle);
|
const endX = (center.x-minX)/big + radius/big * Math.cos(arc.endAngle);
|
const endY = (agvY-(center.y-minY))/big + radius/big * Math.sin(arc.endAngle);
|
|
// 创建圆弧路径
|
const path = new Path({
|
path: `M ${endX} ${endY} A ${radius/big} ${radius/big} 0 ${endAngle - startAngle > 180 ? 1 : 0} 0 ${startX} ${startY}`,
|
stroke: '#32cd79',
|
strokeWidth: 2,
|
});
|
|
|
setTimeout(() => {
|
leafer.add(path);
|
}, 30);
|
|
|
return { minX, minY, maxX, maxY };
|
}
|
|
// 绘制样条曲线（简化实现）
|
function drawSpline(spline) {
|
if (!spline.controlPoints || spline.controlPoints.length < 2) {
|
console.warn('Invalid SPLINE entity');
|
return null;
|
}
|
|
const points = spline.controlPoints.map(p => {
|
return { x: p.x, y: -p.y };
|
});
|
|
// 创建样条曲线路径（使用三次贝塞尔曲线近似）
|
let pathData = `M ${points[0].x} ${points[0].y}`;
|
|
if (points.length === 2) {
|
pathData += ` L ${points[1].x} ${points[1].y}`;
|
} else {
|
for (let i = 1; i < points.length; i++) {
|
const p0 = points[i-1];
|
const p1 = points[i];
|
const cp1x = p0.x + (p1.x - p0.x) / 3;
|
const cp1y = p0.y + (p1.y - p0.y) / 3;
|
const cp2x = p1.x - (p1.x - p0.x) / 3;
|
const cp2y = p1.y - (p1.y - p0.y) / 3;
|
|
pathData += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p1.x} ${p1.y}`;
|
}
|
}
|
|
const path = new Leafer.Path({
|
path: pathData,
|
stroke: '#32cd79',
|
strokeWidth: 2,
|
fill: 'none'
|
});
|
|
path.dxfData = {
|
type: 'SPLINE',
|
layer: spline.layer || '0',
|
color: spline.color || 7
|
};
|
|
leafer.add(path);
|
|
// 计算边界
|
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);
|
});
|
|
return { minX, minY, maxX, maxY };
|
}
|
|
const handleInputX = (newValue) => {
|
const iocn =document.getElementById('iocn')
|
if(newValue+20*big<=1500){
|
iocn.style.marginLeft=newValue/big+"px"
|
}
|
|
};
|
const handleInputY = (newValue) => {
|
const iocn =document.getElementById('iocn')
|
iocn.style.marginTop=newValue/big+"px"
|
};
|
|
|
|
</script>
|
|
<template>
|
<div style="width: 460px;height: 320px;justify-content: center;display: flex;">
|
<div>
|
<div id="width" style="height: 20px;"></div>
|
<div id="height" style="width: 60px;margin-left: -40px;"></div>
|
<div id="mains" style="margin-top: -20px" >
|
<div id="iocn" style="width: 20px;height: 20px;position: absolute;"></div>
|
<canvas id="canvas" ></canvas>
|
</div>
|
</div>
|
|
|
</div>
|
|
<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>
|
<el-button type="primary" @click="exportToDXF">导出DXF</el-button>
|
<div>
|
<input type="file" @change="handleFileUpload" accept=".dxf" />
|
</div>
|
<el-input-number @input="handleInputX" v-model="XMargin"/>
|
<el-input-number @input="handleInputY" v-model="YMargin"/>
|
|
<button @click="triggerFileSelect">选择文件</button>
|
</template>
|
|
<style>
|
.contactNumber{
|
width: 60px;
|
height:20px;
|
border: none;
|
box-shadow: none;
|
font-size: 15px;
|
}
|
|
#mains {
|
position: relative;
|
}
|
input[type="file"] {
|
margin-top: 10px;
|
}
|
</style>
|
