ERP_override.git

<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 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 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(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)]
    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){
    fileName.value="map.dxf"
    fileDate.value=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')
  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);
        handleFileUpload()
 
        fileName.value=file.name
        fileDate.value=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)
 
          let point = entity.vertices.map(v => [
            (v.x - minX) / big,
            toBottomOrigin((v.y - minY) / big, (maxY - minY) / big),
          ]).flat()
 
 
          if(entity.vertices.length==4){
            isQuadrilateral(maxY,minY,maxX,minX,point)
          }
 
          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
})
 
const save =  () => {
  emits('getUploadPicture', fileName.value,fileDate.value)
}
 
 
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
  //points.value=[0, heightAgv, 0, 0, widthAgv, 0, widthAgv,heightAgv]
 
  let numbers = [point[0], point[2], point[4], point[6]]; // 示例数组
  let maxX1 = Math.max(...numbers); // 找到最大值
  let maxIndex = numbers.findIndex(num => num === maxX1); // 定位第一个匹配索引
  let remaining = [...numbers]; // 复制原数组避免突变
  remaining.splice(maxIndex, 1); // 仅移除第一个最大值实例
  let maxX2 = Math.max(...remaining); // 在剩余数组中找第二大值
 
  let arr=[]
  for (let i=0;i<point.length;i++){
    let a=[]
    if(i % 2 === 0){
      a.push(point[i])
      a.push((point[i+1]))
      arr.push(a)
    }
 
  }
  let x=[]
  let y=[]
 
  let upperRight=null //右上
  let lowerRight=null //右下
  let topLeft=null //左上
  let lowerLeft=null //左下
 
  arr.forEach(item=>{
    if(item[0]==maxX1||item[0]==maxX2){
      x.push(item)
    }else{
      y.push(item)
    }
  })
 
  if(x[0][1]>x[1][1]){
    lowerRight=x[0]
    upperRight=x[1]
  }else{
    upperRight=x[0]
    lowerRight=x[1]
  }
 
  if(y[0][1]>y[1][1]){
    lowerLeft=y[0]
    topLeft=y[1]
  }else {
    topLeft=y[0]
    lowerLeft=y[1]
  }
 
 
  if(lowerLeft[0]*big===0){
    data5.value=0
  }else{
    data5.value=round(lowerLeft[0]*big,0)
  }
  if(lowerLeft[1]*big===0){
    data6.value=0
  }else{
    data6.value=round(maxY-minY-lowerLeft[1]*big,0)
  }
  if(topLeft[0]*big===0){
    data1.value=0
  }else{
    data1.value=round(topLeft[0]*big,0)
  }
  if(topLeft[1]*big===0){
    data2.value=0
  }else{
    data2.value=round(topLeft[1]*big,0)
  }
  if(upperRight[0]*big===0){
    data3.value=0
  }else{
    data3.value=round(maxX-minX-upperRight[0]*big,0)
  }
  if(upperRight[1]*big===0){
    data4.value=0
  }else{
    data4.value=round(upperRight[1]*big,0)
  }
  if(lowerRight[0]*big===0){
    data7.value=0
  }else{
    data7.value=round(maxX-minX-lowerRight[0]*big,0)
  }
  if(lowerRight[1]*big===0){
    data8.value=0
  }else{
    data8.value=round(maxY-minY-lowerRight[1]*big,0)
  }
}
 
 
 
</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;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: 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"  />&nbsp;&nbsp;&nbsp;
    <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"  />&nbsp;&nbsp;&nbsp;
    <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;">{{$t('order.upper')}}</div>
  <div id="width" style="height: 20px;position: absolute;top: 364px;left: 145px;">{{$t('order.down')}}</div>
  <div id="width" style="height: 20px;position: absolute;top: 322px;left: 185px;">{{$t('order.horizontal')}}</div>
  <div id="width" style="height: 20px;position: absolute;top: 322px;left: 255px;">{{$t('order.vertical')}}</div>
  <div id="width" style="height: 20px;position: absolute;top: 322px;left: 320px;">{{$t('order.horizontal')}}</div>
  <div id="width" style="height: 20px;position: absolute;top: 322px;left: 385px;">{{$t('order.vertical')}}</div>
  <div style="float: left;margin-top: 20px;margin-left: 80px;">
    <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>
  </div>
  <div style="float: left;margin-top: 20px;margin-left: 80px;">
    <el-button type="primary" @click="save()">{{$t('basicData.save')}}</el-button>
  </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>