订单首页流程卡新增楼层编号显示

廖井涛

7 天以前 a660db06773007b1be690e0674829c00a57aeb7b

 north-glass-erp/northglass-erp/src/components/sd/order/SelectAlienEditor.vue

New file
@@ -0,0 +1,373 @@
<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>