<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,Rect} from "leafer-ui";
|
import {round} from "xe-utils";
|
import DxfParser from "dxf-parser";
|
import { saveAs } from 'file-saver';
|
import DXFWriter from 'dxf-writer';
|
import footSum from "@/hook/footSum";
|
import deepClone from "@/utils/deepClone";
|
|
|
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 fileName=ref(null)
|
let fileDate=ref(null)
|
let fileJson=ref({
|
quadrilateral:null,
|
polygon:null
|
})
|
let dxfData=ref(null)
|
let state=ref(false)
|
let states=ref(false)
|
let points=ref([])
|
let pointsRound=ref([])
|
let pointsRect=ref([])
|
let pointsDrilling=ref([])
|
let circle=ref({
|
x:0,
|
y:0,
|
r:0
|
})
|
let rect=ref({
|
x:0,
|
y:0,
|
w:0,
|
h:0
|
})
|
let drilling=ref({
|
coordinates:0,
|
w:0,
|
h:0,
|
})
|
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 a1=ref(0);let a2=ref(0);let b1=ref(0);let b2=ref(0)
|
let c1=ref(0);let c2=ref(0);let d1=ref(0);let d2=ref(0)
|
|
//下拉框下输入的四个参数
|
let aValue=ref("0");let bValue=ref("0");let cValue=ref("0");let dValue=ref("0")
|
|
//下拉框的四个参数
|
let select1=ref("2");let select2=ref("2");let select3=ref("2");let select4=ref("2");let select5=ref("1")
|
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,
|
stroke: '#f00',
|
strokeWidth: 0,
|
})
|
setTimeout(() => {
|
leafer.add(polygon);
|
}, 30)
|
state.value=true
|
states.value=true
|
}else{
|
const b64Data = row.fileData;
|
if(row.fileJson!=null){
|
if(typeof row.fileJson === 'object' && row.fileJson !== null && !Array.isArray(row.fileJson)){
|
fileJson.value=row.fileJson
|
}else{
|
fileJson.value =JSON.parse(row.fileJson);
|
}
|
selectData(fileJson.value)
|
}
|
const byteCharacters = atob(b64Data);
|
const parser = new DxfParser();
|
dxfData.value = parser.parseSync(byteCharacters)
|
|
handleFileUpload()
|
xGrid.value.reloadData(pointsRect.value)
|
gridOptions.loading=false
|
}
|
|
|
}
|
|
|
//绘制自由多边形
|
const getproject = () => {
|
validate1()
|
if(leafer!==undefined){
|
leafer.clear()
|
}
|
leafer=new Leafer({ view: 'canvas' })
|
points.value = [datas1.value + (parseInt(data5.value) / big), datas2.value - (parseInt(data6.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(data7.value) / big), datas8.value - (parseInt(data8.value) / big)]
|
fileJson.value.quadrilateral=[parseInt(data5.value),parseInt(data6.value),parseInt(data1.value),parseInt(data2.value),
|
parseInt(data3.value),parseInt(data4.value),parseInt(data7.value),parseInt(data8.value)]
|
fileJson.value.polygon=null
|
states.value=false
|
|
const polygon = new Polygon({
|
points: points.value,
|
stroke: '#f00',
|
zIndex: 1
|
})
|
leafer.add(polygon)
|
load()
|
state.value=true
|
exportToDXF(1)
|
|
}
|
|
//添加圆
|
const add = () => {
|
if (state.value){
|
const height = document.getElementById('height')
|
let x=parseInt(circle.value.x)
|
let y=parseInt(height.innerHTML)-parseInt(circle.value.y)
|
let r=parseInt(circle.value.r)
|
if(x>0 && y>0 && r>0){
|
const ellipse = new Ellipse({
|
x:(x-r)/ big,
|
y:(y-r)/ big,
|
width: r*2 / big,
|
height: r*2 / big,
|
stroke: '#f00',
|
zIndex: 3
|
})
|
leafer.add(ellipse);
|
//pointsRect.value.push({type:'round',x:x+r,y:y-r,r:r})
|
pointsRect.value.push({id:pointsRect.value.length+1,type:'round',shap:"〇",x:x,y:y,width:r,x1:x,y1:parseInt(circle.value.y)})
|
console.log(xGrid.value)
|
xGrid.value.loadData(deepClone(pointsRect.value))
|
gridOptions.loading=false
|
circle.value.x=0
|
circle.value.y=0
|
circle.value.r=0
|
exportToDXF(1)
|
}else{
|
ElMessage.warning(t('basicData.greater0Msg'))
|
}
|
|
}
|
}
|
|
//添加矩形
|
const addRect = () => {
|
if (state.value){
|
const height = document.getElementById('height')
|
let x=parseInt(rect.value.x)
|
let ydesc=parseInt(height.innerHTML)-parseInt(rect.value.y)
|
let y=parseInt(rect.value.y)
|
let w=parseInt(rect.value.w)
|
let h=parseInt(rect.value.h)
|
if(x>0 && y>0 && w>0 && h>0){
|
const rects = new Rect({
|
x:x/big,
|
y:(ydesc-h)/big,
|
width:w/big,
|
height:h/big,
|
stroke: '#f00',
|
zIndex:2,
|
})
|
|
leafer.add(rects);
|
pointsRect.value.push({id:pointsRect.value.length+1,type:'rect',shap:"▢",x:x,y:y,width:w,height:h,x1:x,y1:y})
|
xGrid.value.loadData(deepClone(pointsRect.value))
|
gridOptions.loading=false
|
|
rect.value.x=0
|
rect.value.y=0
|
rect.value.w=0
|
rect.value.h=0
|
exportToDXF(1)
|
}else{
|
ElMessage.warning(t('basicData.greater0Msg'))
|
}
|
|
}
|
}
|
|
//添加矩形的挖缺
|
const addDrilling = () => {
|
if (state.value){
|
const width = parseInt(document.getElementById('width').innerHTML)
|
const height = parseInt(document.getElementById('height').innerHTML)
|
let coordinates=parseInt(drilling.value.coordinates)
|
let w=parseInt(drilling.value.w)
|
let h=parseInt(drilling.value.h)
|
if(leafer!==undefined){
|
leafer.clear()
|
}
|
leafer=new Leafer({ view: 'canvas' })
|
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)
|
}
|
|
}
|
if(coordinates>0 && w>0 && h>0){
|
let potin=[]
|
let type=null
|
if(select5.value=='1'){
|
type=4
|
potin=[coordinates,0,coordinates,h,coordinates+w,h,coordinates+w,0]
|
}else if(select5.value=='2'){
|
type=2
|
potin=[coordinates+w,height,coordinates+w,height-h,coordinates,height-h,coordinates,height]
|
}else if(select5.value=='3'){
|
type=1
|
potin=[0,height-coordinates,w,height-coordinates,w,height-coordinates-h,0,height-coordinates-h]
|
} else if(select5.value=='4'){
|
type=3
|
potin=[width,height-coordinates-h,width-w,height-coordinates-h,width-w,height-coordinates,width,height-coordinates]
|
}
|
let arr1=[]
|
for (let i=0;i<potin.length;i++){
|
let a=[]
|
if(i % 2 === 0){
|
a.push(potin[i])
|
a.push((potin[i+1]))
|
a.push(0)
|
arr1.push(a)
|
}
|
}
|
const distance = getDistancess(arr, arr1[0],type);
|
arr = [
|
...arr.slice(0, distance ),
|
...arr1,
|
...arr.slice(distance)
|
];
|
let aaa=[]
|
arr.forEach(item=>{
|
aaa.push(item[0]/big)
|
aaa.push(item[1]/big)
|
})
|
points.value=aaa
|
|
|
const polygon = new Polygon({
|
points: aaa,
|
stroke: '#f00',
|
zIndex:2,
|
})
|
leafer.add(polygon);
|
drilling.value.coordinates=0
|
drilling.value.w=0
|
drilling.value.h=0
|
|
load()
|
exportToDXF(1)
|
}else{
|
//ElMessage.warning("请输入大于0的有效参数")
|
}
|
|
}
|
}
|
|
//获取坐标最近的方法
|
function getDistancess(list,xy, fx) {
|
if (list == null || xy == null || xy.length != 3) {
|
return null;
|
}
|
let best = null; // 最优坐标
|
let index = null;
|
switch (fx) {
|
case 1: // x轴递增：找x≥当前x的坐标中，x最小的；x相同则y最小的
|
|
for (let i=0;i<list.length;i++) {
|
let curr=list[i]
|
// 排除自身坐标
|
if (curr[0] == xy[0] && curr[1] == xy[1]) {
|
continue;
|
}
|
// 筛选x≥目标x的坐标（只考虑递增方向的候选）
|
if (curr[0] < xy[0]) {
|
continue;
|
}
|
// 第一次找到候选，直接赋值
|
if (best == null) {
|
best = xy;
|
continue;
|
}
|
if (curr[0] == best[0]) {
|
// x相同则比较y：y更小则更优
|
if (curr[1] < best[1]) {
|
best = curr;
|
index=i
|
}
|
}
|
}
|
break;
|
|
case 2: // x轴递减：找x≤当前x的坐标中，x最大的；x相同则y最大的
|
for (let i=0;i<list.length;i++) {
|
let curr=list[i]
|
// 排除自身坐标
|
if (curr[0] == xy[0] && curr[1] == xy[1]) {
|
continue;
|
}
|
// 筛选x≤目标x的坐标（只考虑递减方向的候选）
|
if (curr[0] > xy[0]) {
|
continue;
|
}
|
// 第一次找到候选，直接赋值
|
if (best == null) {
|
best = xy;
|
continue;
|
}
|
if (curr[0] == best[0]) {
|
// x相同则比较y：y更小则更优
|
if (curr[1] > best[1]) {
|
best = curr;
|
index=i
|
}
|
}
|
}
|
break;
|
|
case 3: // y轴递增：找y≥当前y的坐标中，y最小的；y相同则x最小的
|
for (let i=0;i<list.length;i++) {
|
let curr=list[i]
|
// 排除自身坐标
|
if (curr[0] == xy[0] && curr[1] == xy[1]) {
|
continue;
|
}
|
// 筛选y≥目标y的坐标（只考虑递增方向的候选）
|
if (curr[1] < xy[1]) {
|
continue;
|
}
|
// 第一次找到候选，直接赋值
|
if (best == null) {
|
best = xy;
|
continue;
|
}
|
if (curr[0] == best[0]) {
|
// x相同则比较y：y更小则更优
|
if (curr[1] > best[1]) {
|
best = curr;
|
index=i
|
}
|
}
|
}
|
break;
|
|
case 4: // y轴递减：找y≤当前y的坐标中，y最大的；y相同则x最大的
|
for (let i=0;i<list.length;i++) {
|
let curr=list[i]
|
// 排除自身坐标
|
if (curr[0] == xy[0] && curr[1] == xy[1]) {
|
continue;
|
}
|
// 筛选y≤目标y的坐标（只考虑递减方向的候选）
|
if (curr[1] > xy[1]) {
|
continue;
|
}
|
if (best == null) {
|
best = xy;
|
continue;
|
}
|
if (curr[1] == best[1]) {
|
// y相同则比较x：x更小则更优
|
if (curr[0] > best[0]) {
|
best = curr;
|
index=i
|
}
|
}
|
}
|
break;
|
|
default: // 无效方向
|
return null;
|
}
|
|
return index;
|
|
|
}
|
|
//绘制矩形的切角挖角弧度
|
const getproject2 = () => {
|
states.value=true
|
if (states.value){
|
validate2()
|
if(leafer!==undefined){
|
leafer.clear()
|
}
|
leafer=new Leafer({ view: 'canvas' })
|
substringData()
|
points.value=[]
|
|
let state=0
|
|
if(select3.value=="3"){
|
points.value.push(datas1.value +parseInt(a1.value)/big,datas2.value,datas1.value +a1.value/big,datas2.value-parseInt(a2.value)/big,datas1.value,datas2.value-parseInt(a2.value)/big)
|
}else if(select3.value=="2"){
|
points.value.push(datas1.value +parseInt(a1.value)/big,datas2.value,datas1.value,datas2.value-parseInt(a2.value)/big)
|
}else if(select3.value=="1"&&aValue.value!=="0"&&aValue.value!==""){
|
state=parseInt(a1.value)
|
const radius = state/big
|
const cornerPoints = []
|
const segments = 8 // 圆弧分段数，越多越平滑
|
for (let i = 0; i <= segments; i++) {
|
const angle = (Math.PI / 2) * (i / segments);
|
const x = radius - radius * Math.sin(angle);
|
const y = datas2.value - radius * (1 - Math.cos(angle));
|
cornerPoints.push(x, y);
|
}
|
points.value.push(...cornerPoints, 0, datas2.value-radius)
|
}else{
|
points.value.push(datas1.value - (parseInt(data3.value) / big), datas2.value + (parseInt(data4.value) / big))
|
}
|
|
if(select1.value=="3"){
|
points.value.push(datas3.value,datas4.value+parseInt(parseInt(b2.value))/big,datas3.value +parseInt(b1.value)/big,datas4.value+parseInt(b2.value)/big,datas3.value +parseInt(b1.value)/big,datas4.value)
|
}else if(select1.value=="2"){
|
points.value.push(datas3.value,datas4.value+parseInt(parseInt(b2.value))/big,datas3.value +parseInt(b1.value)/big,datas4.value)
|
}else if(select1.value=="1"&&bValue.value!=="0"&&bValue.value!==""){
|
state=parseInt(b1.value)
|
const radius = state/big
|
const cornerPoints = []
|
const segments = 8 // 圆弧分段数，越多越平滑
|
for (let i = 0; i <= segments; i++) {
|
const angle = (Math.PI / 2) * (i / segments) // 90度角分段
|
const x = radius - radius * Math.cos(angle)
|
const y = radius - radius * Math.sin(angle)
|
cornerPoints.push(x, y)
|
}
|
points.value.push(...cornerPoints, radius, 0)
|
}else{
|
points.value.push(datas3.value + (parseInt(data5.value) / big), datas4.value - (parseInt(data6.value) / big))
|
}
|
|
if(select2.value=="3"){
|
points.value.push(datas5.value-parseInt(c1.value)/big,datas6.value,datas5.value -parseInt(c1.value)/big,datas6.value+parseInt(c2.value)/big,datas5.value,datas6.value +parseInt(c2.value)/big)
|
}else if(select2.value=="2"){
|
points.value.push(datas5.value-parseInt(c1.value)/big,datas6.value,datas5.value,datas6.value +parseInt(c2.value)/big)
|
}else if(select2.value=="1"&&cValue.value!=="0"&&cValue.value!==""){
|
state=parseInt(c1.value)
|
const radius = state/big
|
const cornerPoints = []
|
const segments = 8 // 圆弧分段数，越多越平滑
|
for (let i = 0; i <= segments; i++) {
|
const angle = (Math.PI / 2) * (i / segments);
|
const x = (datas5.value -radius) + radius * Math.sin(angle);
|
const y = radius * (1 - Math.cos(angle));
|
cornerPoints.push(x, y);
|
}
|
points.value.push(...cornerPoints, datas5.value, radius)
|
}else{
|
points.value.push(datas5.value + (parseInt(data1.value) / big), datas6.value + (parseInt(data2.value) / big))
|
}
|
|
if(select4.value=="3"){
|
points.value.push(datas7.value,datas8.value-parseInt(d2.value)/big,datas7.value -parseInt(d1.value)/big,datas8.value-parseInt(d2.value)/big,datas7.value -parseInt(d1.value)/big,datas8.value)
|
}else if(select4.value=="2"){
|
points.value.push(datas7.value,datas8.value-parseInt(d2.value)/big,datas7.value -parseInt(d1.value)/big,datas8.value)
|
}else if(select4.value=="1"&&dValue.value!=="0"&&dValue.value!==""){
|
state=parseInt(d1.value)
|
const radius = state/big
|
const cornerPoints = []
|
const segments = 8 // 圆弧分段数，越多越平滑
|
for (let i = 0; i <= segments; i++) {
|
const angle = (Math.PI / 2) * (i / segments);
|
const x = datas5.value -(radius- radius * Math.cos(angle));
|
const y = datas2.value -(radius- radius * Math.sin(angle));
|
cornerPoints.push(x, y);
|
}
|
points.value.push(...cornerPoints, datas5.value-radius, datas2.value)
|
}else{
|
points.value.push(datas7.value - (parseInt(data7.value) / big), datas8.value - (parseInt(data8.value) / big))
|
}
|
|
const polygon = new Polygon({
|
points: points.value,
|
stroke: '#f00',
|
zIndex:2,
|
})
|
leafer.add(polygon)
|
|
|
fileJson.value.polygon=[parseInt(a1.value),parseInt(a2.value),parseInt(b1.value),parseInt(b2.value),
|
parseInt(c1.value),parseInt(c2.value),parseInt(d1.value),parseInt(d2.value),select1.value,select2.value,select3.value,select4.value]
|
|
|
load()
|
exportToDXF(1)
|
}
|
}
|
|
|
//绘制后的数据处理
|
const exportToDXF = async (value) => {
|
const dxf = new DXFWriter();
|
|
|
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' })
|
|
|
if (pointsRect.value.length > 0) {
|
|
pointsRect.value.forEach(rect => {
|
if(rect.type=="round"){
|
const x = rect.x;
|
const y = maxY-minY-rect.y;
|
const radius = rect.width;
|
if (dxf.drawCircle) {
|
dxf.drawCircle(x, y, radius, { layer: '0' });
|
}
|
}else{
|
let poist=[rect.x,rect.y, rect.x,(rect.y+rect.height),(rect.x+rect.width),(rect.y+rect.height),(rect.x+rect.width),rect.y]
|
|
let arr=[]
|
for (let i=0;i<poist.length;i++){
|
let a=[]
|
if(i % 2 === 0){
|
a.push(poist[i])
|
a.push((poist[i+1]))
|
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);
|
});
|
|
|
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){
|
fileName.value="map.dxf"
|
fileDate.value=base64.replace(/^data:.+;base64,/, "")
|
}
|
else if(value===2&&state.value){
|
saveAs(blob, 'map.dxf');
|
}else{
|
ElMessage.warning(t('basicData.notExport'))
|
}
|
}
|
|
|
//解析dxf文件
|
const fileToBase64 = (file) => {
|
return new Promise((resolve, reject) => {
|
const reader = new FileReader();
|
reader.onload = () => resolve(reader.result);
|
reader.onerror = reject;
|
reader.readAsDataURL(file);
|
});
|
};
|
|
//反向y坐标计算
|
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')
|
//validate()
|
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);
|
fileJson.value.quadrilateral=null
|
fileJson.value.polygon=null
|
handleFileUpload()
|
|
fileName.value=file.name
|
fileDate.value=base64.replace(/^data:.+;base64,/, "")
|
} catch (error) {
|
console.error('解析DXF文件时出错:', error);
|
}
|
};
|
reader.readAsText(file);
|
}
|
}
|
|
|
//解析dxf文件并显示方法
|
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 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) / 250) {
|
big = (maxX - minX) / 400
|
} else {
|
big = (maxY - minY) / 250
|
}
|
let indexNumber=0
|
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,
|
zIndex: 1
|
})
|
setTimeout(() => {
|
leafer.add(line);
|
}, 30);
|
break;
|
case 'LWPOLYLINE':
|
let point = entity.vertices.map(v => [
|
(v.x - minX) / big,
|
toBottomOrigin((v.y - minY) / big, (maxY - minY) / big),
|
]).flat()
|
|
if(indexNumber==0){
|
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(fileJson.value!=null&&(fileJson.value.polygon!=null||fileJson.value.quadrilateral!=null)){
|
points.value=point
|
isQuadrilateral(maxY,minY,maxX,minX,point)
|
}
|
indexNumber=1
|
}else{
|
let point = entity.vertices.map(v => [
|
(v.x - minX) / big,
|
(v.y - minY) / big,
|
]).flat()
|
pointsRect.value.push({id:pointsRect.value.length+1,type:'rect',shap:"▢",x:entity.vertices[0].x,y:entity.vertices[0].y,
|
width:entity.vertices[2].x-entity.vertices[0].x,
|
height:entity.vertices[1].y-entity.vertices[0].y
|
,x1:round(entity.vertices[0].x),y1:round(entity.vertices[0].y)})
|
}
|
|
const polygon = new Polygon({
|
points: point,
|
stroke: '#f00',
|
zIndex: 1
|
})
|
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
|
}
|
let x=entity.center.x-minX
|
let y=(maxY - minY)-(entity.center.y-minY)
|
pointsRect.value.push({id:pointsRect.value.length+1,type:'round',shap:"〇",x:x,y:y,width:entity.radius,
|
x1:round(x),y1:round(entity.center.y-minY)})
|
const ellipse = new Ellipse({
|
x:CIRCLEX,
|
y:CIRCLEY,
|
width: entity.radius * 2 / big,
|
height: entity.radius * 2 / big,
|
//fill: "#32cd79"
|
stroke: '#f00',
|
zIndex: 3
|
})
|
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,
|
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) / 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 selectData = (item) => {
|
if(item.quadrilateral!=null){
|
state.value=true
|
data1.value=item.quadrilateral[2]
|
data2.value=item.quadrilateral[3]
|
data3.value=item.quadrilateral[4]
|
data4.value=item.quadrilateral[5]
|
data5.value=item.quadrilateral[0]
|
data6.value=item.quadrilateral[1]
|
data7.value=item.quadrilateral[6]
|
data8.value=item.quadrilateral[7]
|
}
|
if(item.polygon!=null){
|
a1.value=item.polygon[0]
|
a2.value=item.polygon[1]
|
b1.value=item.polygon[2]
|
b2.value=item.polygon[3]
|
c1.value=item.polygon[4]
|
c2.value=item.polygon[5]
|
d1.value=item.polygon[6]
|
d2.value=item.polygon[7]
|
if(item.polygon[0]==item.polygon[1]){
|
aValue.value=item.polygon[0]+""
|
}else{
|
aValue.value=item.polygon[0]+"/"+item.polygon[1]
|
}
|
if(item.polygon[2]==item.polygon[3]){
|
bValue.value=item.polygon[2]+""
|
}else{
|
bValue.value=item.polygon[2]+"/"+item.polygon[3]
|
}
|
if(item.polygon[4]==item.polygon[5]){
|
cValue.value=item.polygon[4]+""
|
}else{
|
cValue.value=item.polygon[4]+"/"+item.polygon[5]
|
}
|
if(item.polygon[6]==item.polygon[7]){
|
dValue.value=item.polygon[6]+""
|
}else{
|
dValue.value=item.polygon[6]+"/"+item.polygon[7]
|
}
|
select1.value=item.polygon[8]
|
select2.value=item.polygon[9]
|
select3.value=item.polygon[10]
|
select4.value=item.polygon[11]
|
|
}
|
|
}
|
|
//清空输入框
|
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
|
}
|
|
//清空输入框
|
const validate1 = async () => {
|
a1.value=0
|
a2.value=0
|
b1.value=0
|
b2.value=0
|
c1.value=0
|
c2.value=0
|
d1.value=0
|
d2.value=0
|
aValue.value="0"
|
bValue.value="0"
|
cValue.value="0"
|
dValue.value="0"
|
}
|
//清空输入框
|
const validate2 = 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
|
}
|
//返回父级界面方法
|
defineExpose({
|
validate,
|
ongetproject
|
})
|
|
|
//保存方法
|
const save = () => {
|
if(fileName.value!=null&&fileDate.value!=null){
|
fileJson.value.quadrilateral=[parseInt(data5.value),parseInt(data6.value),parseInt(data1.value),parseInt(data2.value),
|
parseInt(data3.value),parseInt(data4.value),parseInt(data7.value),parseInt(data8.value)]
|
if(fileJson.value.quadrilateral==null&&fileJson.value.polygon==null){
|
fileJson.value=null
|
}
|
emits('getUploadPicture', fileName.value,fileDate.value,fileJson.value)
|
}else{
|
ElMessage.warning("未参与修改")
|
|
}
|
|
}
|
//重置方法
|
const reset = () => {
|
|
validate1()
|
validate2()
|
orderDetailWidth.value=rowIndex.value.width
|
orderDetailHeight.value=rowIndex.value.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,
|
stroke: '#f00',
|
strokeWidth: 0,
|
})
|
setTimeout(() => {
|
leafer.add(polygon);
|
}, 30)
|
state.value=true
|
states.value=true
|
|
pointsRect.value=[]
|
xGrid.value.reloadData(deepClone(pointsRect.value))
|
gridOptions.loading=false
|
|
exportToDXF(1)
|
}
|
|
const handleInputCircleX=(value)=> {
|
let val = value
|
.replace(/[^\d.]/g, 0) // 移除所有非数字和非小数点的字符
|
.replace(/^\./g, '') // 移除开头的小数点
|
.replace(/\.{2,}/g, '.') // 多个小数点只保留第一个
|
.replace('.', '$#$') // 临时替换小数点
|
.replace(/\./g, '') // 移除其他小数点
|
.replace('$#$', '.') // 恢复小数点
|
.replace(/^0+(\d)/, '$1'); // 移除开头多余的0（如"00123"变成"123"）
|
// 如果输入为空则保持空字符串
|
circle.value.x = val;
|
}
|
const handleInputCircleY=(value)=> {
|
let val = value
|
.replace(/[^\d.]/g, 0) // 移除所有非数字和非小数点的字符
|
.replace(/^\./g, '') // 移除开头的小数点
|
.replace(/\.{2,}/g, '.') // 多个小数点只保留第一个
|
.replace('.', '$#$') // 临时替换小数点
|
.replace(/\./g, '') // 移除其他小数点
|
.replace('$#$', '.') // 恢复小数点
|
.replace(/^0+(\d)/, '$1'); // 移除开头多余的0（如"00123"变成"123"）
|
// 如果输入为空则保持空字符串
|
circle.value.y = val;
|
}
|
const handleInputCircleR=(value)=> {
|
let val = value
|
.replace(/[^\d.]/g, 0) // 移除所有非数字和非小数点的字符
|
.replace(/^\./g, '') // 移除开头的小数点
|
.replace(/\.{2,}/g, '.') // 多个小数点只保留第一个
|
.replace('.', '$#$') // 临时替换小数点
|
.replace(/\./g, '') // 移除其他小数点
|
.replace('$#$', '.') // 恢复小数点
|
.replace(/^0+(\d)/, '$1'); // 移除开头多余的0（如"00123"变成"123"）
|
// 如果输入为空则保持空字符串
|
circle.value.r = val;
|
}
|
|
//下拉框触发
|
const handleChange=(value)=> {
|
getproject2()
|
/*if(value=="1"){
|
select1.value="1"
|
select2.value="1"
|
select3.value="1"
|
select4.value="1"
|
|
}*/
|
}
|
|
|
//通过/截取输入框的值
|
const substringData = () =>{
|
const indexA = aValue.value.indexOf("/");
|
if(indexA==-1){
|
a1.value=aValue.value
|
a2.value=aValue.value
|
}else{
|
a1.value = aValue.value.substring(0, indexA);
|
a2.value = aValue.value.substring(indexA + 1);
|
}
|
const indexB = bValue.value.indexOf("/");
|
if(indexB==-1){
|
b1.value=bValue.value
|
b2.value=bValue.value
|
}else{
|
b1.value = bValue.value.substring(0, indexB);
|
b2.value = bValue.value.substring(indexB + 1);
|
}
|
const indexC = cValue.value.indexOf("/");
|
if(indexC==-1){
|
c1.value=cValue.value
|
c2.value=cValue.value
|
}else{
|
c1.value = cValue.value.substring(0, indexC);
|
c2.value = cValue.value.substring(indexC + 1);
|
}
|
const indexD = dValue.value.indexOf("/");
|
if(indexD==-1){
|
d1.value=dValue.value
|
d2.value=dValue.value
|
}else{
|
d1.value = dValue.value.substring(0, indexD);
|
d2.value = dValue.value.substring(indexD + 1);
|
}
|
}
|
|
|
const isQuadrilateral = (maxY,minY,maxX,minX,point) => {
|
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
|
}
|
|
const gridOptions = reactive({
|
border: "full",//表格加边框
|
keepSource: true,//保持源数据
|
align: 'center',//文字居中
|
rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮
|
id: 'UpdateAlienEditor',
|
|
//表头参数
|
columns:[
|
{title: t('basicData.operate'), width: 60, slots: { default: 'button_slot' },fixed:"left"},
|
{field: 'shap',width:60, title: t('order.shape')},
|
{field: 'x1',width:60, title: t('X')},
|
{field: 'y1',width:60, title: t('Y')},
|
{field: 'width',width:60, title: t('')},
|
{field: 'height',width:60, title: t('')},
|
]
|
})
|
|
//表格删除
|
const getTableRow = (row,type) =>{
|
switch (type) {
|
case 'delete':{
|
pointsRect.value=pointsRect.value.filter(item => item.id !== row.id);
|
xGrid.value.loadData(deepClone(pointsRect.value))
|
gridOptions.loading=false
|
|
if(leafer!==undefined){
|
leafer.clear()
|
}
|
leafer=new Leafer({ view: 'canvas' })
|
|
const polygon = new Polygon({
|
points: points.value,
|
stroke: '#f00',
|
zIndex: 1
|
})
|
leafer.add(polygon)
|
|
load()
|
|
exportToDXF(1)
|
|
return
|
}
|
}
|
}
|
|
|
//重新加载保存的字典对象数据
|
const load= () =>{
|
if (pointsRect.value.length > 0) {
|
|
pointsRect.value.forEach(rect => {
|
if(rect.type=="round"){
|
const height = document.getElementById('height')
|
let x=parseInt(rect.x)
|
let y=parseInt(rect.y)
|
let r=parseInt(rect.width)
|
const ellipse = new Ellipse({
|
x:(x-r)/ big,
|
y:(y-r)/ big,
|
width: r*2 / big,
|
height: r*2 / big,
|
stroke: '#f00',
|
zIndex: 3
|
})
|
leafer.add(ellipse);
|
}else{
|
const height = document.getElementById('height')
|
let x=parseInt(rect.x)
|
let ydesc=parseInt(height.innerHTML)-parseInt(rect.y)
|
let y=parseInt(rect.y)
|
let w=parseInt(rect.width)
|
let h=parseInt(rect.width)
|
const rects = new Rect({
|
x:x/big,
|
y:(ydesc-h)/big,
|
width:w/big,
|
height:h/big,
|
stroke: '#f00',
|
zIndex:2,
|
})
|
|
leafer.add(rects);
|
}
|
});
|
}
|
}
|
|
|
</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: 680px;margin-top: 25px;">
|
<div id="mains" ref="parent" >
|
<canvas id="canvas" ></canvas>
|
</div>
|
</div>
|
<div id="width" style="height: 20px;position: absolute;top: 37px;left: 880px;">{{orderDetailWidth}}</div>
|
<div id="height" style="width: 60px;position: absolute;top: 178px;left: 640px;">{{orderDetailHeight}}</div>
|
<div style="float: left;margin-top: 30px;margin-left: 730px">
|
<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 style="height: 20px;position: absolute;top: 342px;left: 725px;">{{$t('order.upper')}}</div>
|
<div style="height: 20px;position: absolute;top: 364px;left: 725px;">{{$t('order.down')}}</div>
|
<div style="height: 20px;position: absolute;top: 322px;left: 767px;">{{$t('order.horizontal')}}</div>
|
<div style="height: 20px;position: absolute;top: 322px;left: 825px;">{{$t('order.vertical')}}</div>
|
<div style="height: 20px;position: absolute;top: 322px;left: 900px;">{{$t('order.horizontal')}}</div>
|
<div style="height: 20px;position: absolute;top: 322px;left: 965px;">{{$t('order.vertical')}}</div>
|
<div style="float: left;margin-top: 30px;margin-left: 690px;">
|
<label for="file-upload" class="custom-file-upload">
|
{{$t('order.selectFile')}}
|
</label>
|
<input id="file-upload" style="width: 180px;display: none;" type="file" @change="handleFile" accept=".dxf" />
|
<el-button type="primary" style="margin-left: 20px" @click="exportToDXF(2)">{{$t('order.exportDXF')}}</el-button>
|
<el-button type="primary" @click="reset()">{{$t('craft.reset')}}</el-button>
|
<el-button type="primary" @click="save()">{{$t('basicData.save')}}</el-button>
|
</div>
|
|
<div style="position: absolute;margin-top: 373px;margin-left: 300px;">
|
|
<el-select v-model="select1" @change="handleChange" style="width: 100px;height: 40px;font-size: 8px">
|
<el-option value="1" :label="$t('order.edgeAngleCurvature')"></el-option>
|
<el-option value="2" :label="$t('order.cuttingCorners')"></el-option>
|
<el-option value="3" :label="$t('order.fourCornerExcavation')"></el-option>
|
</el-select>
|
<el-select v-model="select2" @change="handleChange" style="width: 100px;height: 40px;font-size: 8px">
|
<el-option value="1" :label="$t('order.edgeAngleCurvature')"></el-option>
|
<el-option value="2" :label="$t('order.cuttingCorners')"></el-option>
|
<el-option value="3" :label="$t('order.fourCornerExcavation')"></el-option>
|
</el-select><br>
|
<el-input class="contactNumber1" @blur="getproject2" type="text" v-model="bValue" />
|
|
<el-input class="contactNumber1" @blur="getproject2" type="text" v-model="cValue" /><br><br>
|
|
<el-select v-model="select3" @change="handleChange" style="width: 100px;height: 40px;font-size: 8px">
|
<el-option value="1" :label="$t('order.edgeAngleCurvature')"></el-option>
|
<el-option value="2" :label="$t('order.cuttingCorners')"></el-option>
|
<el-option value="3" :label="$t('order.fourCornerExcavation')"></el-option>
|
</el-select>
|
<el-select v-model="select4" @change="handleChange" style="width: 100px;height: 40px;font-size: 8px">
|
<el-option value="1" :label="$t('order.edgeAngleCurvature')"></el-option>
|
<el-option value="2" :label="$t('order.cuttingCorners')"></el-option>
|
<el-option value="3" :label="$t('order.fourCornerExcavation')"></el-option>
|
</el-select><br>
|
|
<el-input class="contactNumber1" @blur="getproject2" type="text" v-model="aValue" />
|
|
<el-input class="contactNumber1" @blur="getproject2" type="text" v-model="dValue" />
|
</div>
|
|
<div style="position: absolute;margin-left: 0px;border: black 1px solid;;width: 185px">
|
<div style="font-size: 25px;width: 50px;height: 50px">〇</div>
|
<div style="position: absolute;margin-top: -35px;margin-left: 85px">
|
<el-button type="primary" style="width: 60px;height: 30px" @click="add()">+</el-button>
|
</div>
|
<br>
|
<el-input class="contactNumber" @input="handleInputCircleX" type="text" v-model="circle.x" />
|
<el-input class="contactNumber" @input="handleInputCircleY" type="text" v-model="circle.y" />
|
<el-input class="contactNumber" @input="handleInputCircleR" type="text" v-model="circle.r" /><br><br>
|
|
<div style="position: absolute;margin-top: -65px;margin-left: 25px;">X</div>
|
<div style="position: absolute;margin-top: -65px;margin-left: 85px;">Y</div>
|
<div style="position: absolute;margin-top: -65px;margin-left: 145px;">R</div>
|
</div>
|
|
<div style="position: absolute;margin-left: 0px;margin-top: 150px;border: black 1px solid;;width: 185px">
|
<div style="font-size: 25px;width: 50px;height: 50px">▢</div>
|
<div style="position: absolute;margin-top: -35px;margin-left: 85px">
|
<el-button type="primary" style="width: 60px;height: 30px" @click="addRect()">+</el-button>
|
</div>
|
<br>
|
<el-input class="contactNumber" type="text" v-model="rect.x" />
|
<el-input class="contactNumber" type="text" v-model="rect.y" /><br><br>
|
<el-input class="contactNumber" type="text" v-model="rect.w" />
|
<el-input class="contactNumber" type="text" v-model="rect.h" /><br><br>
|
<div style="position: absolute;margin-top: -110px;margin-left: 55px;">X</div>
|
<div style="position: absolute;margin-top: -110px;margin-left: 115px;">Y</div>
|
<div style="position: absolute;margin-top: -63px;margin-left: 55px;">W</div>
|
<div style="position: absolute;margin-top: -63px;margin-left: 115px;">H</div>
|
</div>
|
|
<div style="position: absolute;margin-top: 350px;margin-left: 0px;border: black 1px solid;;width: 185px;height: 170px">
|
<div style="font-size: 25px;width: 50px;height: 50px">凹</div>
|
<div style="position: absolute;margin-top: -35px;margin-left: 85px">
|
<el-button type="primary" style="width: 60px;height: 30px;margin-left: 10px;margin-top: -10px" @click="addDrilling()">+</el-button><br>
|
</div>
|
<el-select v-model="select5" style="width: 100px;height: 40px;font-size: 8px">
|
<el-option value="1" :label="$t('order.upper')"></el-option>
|
<el-option value="2" :label="$t('order.down')"></el-option>
|
<el-option value="3" :label="$t('order.left')"></el-option>
|
<el-option value="4" :label="$t('order.right')"></el-option>
|
</el-select><br><br>
|
|
<el-input class="contactNumber" type="text" v-model="drilling.coordinates" />
|
<el-input class="contactNumber" type="text" v-model="drilling.w" />
|
<el-input class="contactNumber" type="text" v-model="drilling.h" />
|
<div style="position: absolute;margin-top: -42px;margin-left: 25px;">X</div>
|
<div style="position: absolute;margin-top: -42px;margin-left: 85px;">W</div>
|
<div style="position: absolute;margin-top: -42px;margin-left: 145px;">H</div>
|
|
</div>
|
<div style="width: 400px;height:350px;position: absolute;margin-left: 220px;;text-align: center">
|
<vxe-grid
|
height="100%"
|
class="mytable-scrollbar"
|
ref="xGrid"
|
v-bind="gridOptions"
|
@mounted="handleGridMounted"
|
|
>
|
<template #button_slot="{ row }">
|
|
<el-popconfirm @confirm="getTableRow(row,'delete')" :title="$t('searchOrder.deleteConfirm')">
|
<template #reference>
|
<el-button :disabled="row.deliveryState===2" link type="primary" size="small">{{ $t('basicData.delete') }}</el-button>
|
</template>
|
</el-popconfirm>
|
</template>
|
</vxe-grid>
|
|
</div>
|
|
|
|
</template>
|
|
<style scoped>
|
.contactNumber{
|
width: 60px;
|
height:20px;
|
border: none;
|
box-shadow: none;
|
font-size: 15px;
|
}
|
.contactNumber1{
|
width: 100px;
|
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>
|
