dxf异形显示商标拖拽

廖井涛

2025-07-25 6499ec45765ccbcf78c765445d0102aa4d918f98

 north-glass-erp/northglass-erp/src/views/sd/order/UpdateOrderCraft.vue

@@ -1,5 +1,5 @@
<script setup>
import {computed, onMounted, reactive, ref, watch} from "vue"
import {computed, onMounted, reactive, ref, watch,onUpdated,onBeforeUnmount} from "vue"
import {useRouter,useRoute} from "vue-router"
import request from "@/utils/request"
import {ElMessage, ElMessageBox} from "element-plus"
@@ -8,6 +8,11 @@
import {useI18n} from "vue-i18n"
import companyInfo from "@/stores/sd/companyInfo"
import UpdateOrderCraft from "@/components/sd/order/UpdateOrderCraft.vue"
import { saveAs } from 'file-saver';
import DXFWriter from 'dxf-writer';
import DxfParser from 'dxf-parser';
import { Leafer, Polygon,Ellipse,Line,Path } from 'leafer-ui'
import {round} from "xe-utils";
const { t } = useI18n()

const router = useRouter()
@@ -328,7 +333,28 @@

//修改商标选项
let trademarkVisible = ref(false)
const updateTrademark = (row) => {
let trademarkRow = ref(null)
let dxfData =ref(null)
const updateTrademark =  async(row) => {
  let flowData = ref({
    orderId: row.orderId,
    orderNumber: row.orderNumber
  })
  await request.post("/order/selectUploadDxf",flowData.value).then((res) => {
    if (res.code === "200") {
      if(res.data.data!=null){
        const b64Data = res.data.data.file_data;
        const byteCharacters = atob(b64Data);
        const parser = new DxfParser();
        dxfData.value = parser.parseSync(byteCharacters)
      }else{
        dxfData.value =null
      }

    }
  })

  trademarkRow.value=row
  trademarkVisible.value= true
  /*Object.keys(trademarkAttr.value).forEach((key) => {
    if(key==='location'){
@@ -360,12 +386,15 @@
  })

  rowIndex.value = row

}

const changeTrademark = ()=>{
   exportToDXF()
  rowIndex.value.icon = JSON.stringify(trademarkAttr.value)
  trademarkVisible.value=false
  Object.keys(trademarkAttr.value).forEach((key) => (trademarkAttr.value[key] = ''))

}


@@ -381,6 +410,11 @@
  craftVisible.value= false
}

onUpdated(() => {
  if (trademarkVisible.value&&trademarkRow.value!=null) {
    ongetproject(trademarkRow.value)
  }
})


//初始化判断是否有id传入
@@ -416,7 +450,6 @@
})
//保存修改工艺
const reviewOrderCraft = (state) => {

  request.post(`/order/reviewProcessById/${titleUploadData.value.orderId}/${state}`,xGrid.value.getRecordset().updateRecords).then(res =>{
    if(res.code==200){
      gridOptions.toolbarConfig.buttons[2].disabled = true
@@ -444,6 +477,7 @@
      trademarkAttr.value[key] = []
    }
  }

}

const iconChange = () => {
@@ -461,6 +495,576 @@
let enlargementFlag = ref(false)
const trademarkenlargement = () => {
  enlargementFlag.value = !enlargementFlag.value

}






/*dxf文件解析及其导出*/

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=10
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(dxfData.value==null){
    orderDetailWidth.value=row.childWidth
    orderDetailHeight.value=row.childHeight
    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);

    trademarkAttr.value.location = t('craft.lowLeft')
  }else{
    state.value=false
    handleFileUpload()
  }


}

const getproject = () => {
  if (dxfData.value == null||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)
  }
}


const exportToDXF = async () => {
  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);
  let filterData=ref({
    dataBase64:base64.replace(/^data:.+;base64,/, ""),
    orderId:rowIndex.value.orderId,
    orderNumber:rowIndex.value.orderNumber
  })
  request.post(`/order/updateOrderFile`,filterData.value).then(res =>{
    if(res.code==200){
      //saveAs(blob, 'map.dxf');
    }else{
      ElMessage.error(res.msg)
    }
  })
  //saveAs(blob, 'map.dxf');
}

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 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;

          }
        })
        trademarkAttr.value.xMargin=trademarkAttr.value.xMargin+1
        trademarkAttr.value.xMargin=trademarkAttr.value.xMargin-1
        trademarkAttr.value.location = t('craft.lowLeft')
      } catch (error) {
        console.error('解析DXF文件时出错:', error);
      }


};
const handleClosed = () => {
  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
}


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]

  if(point[0]*big===0){
    data5.value=0
  }else{
    data5.value=round(point[0]*big,0)
  }
  if(point[1]*big===0){
    data6.value=0
  }else{
    data6.value=maxY-minY-round(point[1]*big,0)
  }
  if(point[2]*big===0){
    data1.value=0
  }else{
    data1.value=round(point[2]*big,0)
  }
  if(point[3]*big===0){
    data2.value=0
  }else{
    data2.value=round(point[3]*big,0)
  }
  if(point[4]*big===0){
    data3.value=0
  }else{
    data3.value=maxX-minX-round(point[4]*big,0)
  }
  if(point[5]*big===0){
    data4.value=0
  }else{
    data4.value=round(point[5]*big,0)
  }
  if(point[6]*big===0){
    data7.value=0
  }else{
    data7.value=maxX-minX-round(point[6]*big,0)
  }
  if(point[7]*big===0){
    data8.value=0
  }else{
    data8.value=maxY-minY-round(point[7]*big,0)
  }
}


/*商标拖动*/

const parent = ref(null)
const draggable = ref(null)
const isDragging = ref(false)
const startPos = ref({ x: 0, y: 0 })

const startDragUpperLeft = (e) => {
  const parentRect = parent.value.getBoundingClientRect()
  isDragging.value = true
  startPos.value = {
    x: parentRect.x+trademarkAttr.value.xMargin/big,
    y: parentRect.y+trademarkAttr.value.yMargin/big
  }

  document.addEventListener('mousemove', dragUpperLeft)
  document.addEventListener('mouseup', stopDragUpperLeft)
}

const dragUpperLeft = (e) => {
  if (!isDragging.value) return

  // 限制在父元素范围内
  const parentRect = parent.value.getBoundingClientRect()
  const boxRect = draggable.value.getBoundingClientRect()

  let newX = (e.clientX-parentRect.x)
  let newY = (e.clientY-parentRect.y)

  const maxX = parentRect.width - boxRect.width
  const maxY = parentRect.height - boxRect.height

  newX = Math.max(0, Math.min(newX, maxX))
  newY = Math.max(0, Math.min(newY, maxY))

  trademarkAttr.value.xMargin=round(newX*big,0)
  trademarkAttr.value.yMargin=round(newY*big,0)

}

const stopDragUpperLeft = (e) => {
  isDragging.value = false
  document.removeEventListener('mousemove', dragUpperLeft)
  document.removeEventListener('mouseup', stopDragUpperLeft)
}

const startDragUpperRight = (e) => {
  const parentRect = parent.value.getBoundingClientRect()
  const boxRect = draggable.value.getBoundingClientRect()
  isDragging.value = true

  startPos.value = {
    x: parentRect.x+parentRect.width - (trademarkAttr.value.xMargin/big),
    y: parentRect.y+trademarkAttr.value.yMargin/big
  }
  document.addEventListener('mousemove', dragUpperRight)
  document.addEventListener('mouseup', stopDragUpperRight)
}

const dragUpperRight = (e) => {
  if (!isDragging.value) return

  // 限制在父元素范围内
  const parentRect = parent.value.getBoundingClientRect()
  const boxRect = draggable.value.getBoundingClientRect()

  let newX = (parentRect.x+parentRect.width-e.clientX)
  let newY = (e.clientY-parentRect.y)

  const maxX = parentRect.width - boxRect.width
  const maxY = parentRect.height - boxRect.height

  newX = Math.max(0, Math.min(newX, maxX))
  newY = Math.max(0, Math.min(newY, maxY))

  trademarkAttr.value.xMargin=round(newX*big,0)
  trademarkAttr.value.yMargin=round(newY*big,0)

}

const stopDragUpperRight = (e) => {
  isDragging.value = false
  document.removeEventListener('mousemove', dragUpperRight)
  document.removeEventListener('mouseup', stopDragUpperRight)
}

const startDragLowLeft = (e) => {
  isDragging.value = true
  const parentRect = parent.value.getBoundingClientRect()
  startPos.value = {
    x: parentRect.x+trademarkAttr.value.xMargin/big,
    y: parentRect.y+parentRect.height-trademarkAttr.value.yMargin/big
  }

  document.addEventListener('mousemove', dragLowLeft)
  document.addEventListener('mouseup', stopDragLowLeft)
}

const dragLowLeft = (e) => {
  if (!isDragging.value) return
  // 限制在父元素范围内
  const parentRect = parent.value.getBoundingClientRect()
  const boxRect = draggable.value.getBoundingClientRect()

  let newX = (e.clientX-parentRect.x)
  let newY = (parentRect.y+parentRect.height-e.clientY)


  const maxX = parentRect.width - boxRect.width
  const maxY = parentRect.height - boxRect.height

  newX = Math.max(0, Math.min(newX, maxX))
  newY = Math.max(0, Math.min(newY, maxY))

  trademarkAttr.value.xMargin=round(newX*big,0)
  trademarkAttr.value.yMargin=round(newY*big,0)
}

const stopDragLowLeft = (e) => {
  isDragging.value = false
  document.removeEventListener('mousemove', dragLowLeft)
  document.removeEventListener('mouseup', stopDragLowLeft)
}


const startDragLowRight = (e) => {
  isDragging.value = true
  const parentRect = parent.value.getBoundingClientRect()
  const boxRect = draggable.value.getBoundingClientRect()
  startPos.value = {
    x: parentRect.x+parentRect.width-trademarkAttr.value.xMargin/big,
    y: parentRect.y+parentRect.height-trademarkAttr.value.yMargin/big
  }

  document.addEventListener('mousemove', dragLowRight)
  document.addEventListener('mouseup', stopDragLowRight)
}

const dragLowRight = (e) => {
  if (!isDragging.value) return

  const parentRect = parent.value.getBoundingClientRect()
  const boxRect = draggable.value.getBoundingClientRect()

  let newX = (parentRect.x+parentRect.width-e.clientX)
  let newY = (parentRect.y+parentRect.height-e.clientY)

  const maxX = parentRect.width - boxRect.width
  const maxY = parentRect.height - boxRect.height

  newX = Math.max(0, Math.min(newX, maxX))
  newY = Math.max(0, Math.min(newY, maxY))


  trademarkAttr.value.xMargin=round(newX*big,0)
  trademarkAttr.value.yMargin=round(newY*big,0)
}

const stopDragLowRight = (e) => {
  isDragging.value = false
  document.removeEventListener('mousemove', dragLowRight)
  document.removeEventListener('mouseup', stopDragLowRight)
}


@@ -563,6 +1167,7 @@
        :title="$t('craft.TrademarkAttribute')"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @closed="handleClosed"
        style="width: 922px;height:443px ;
        position: relative;" >
      <div style="width: 50%;height: 100%;float: left">
@@ -626,14 +1231,14 @@
        </el-row>

        <el-row>
          <el-col :span="4">{{$t('order.width')}}:</el-col>
          <el-col :span="4">X:</el-col>
          <el-col :span="6">
            <el-input-number v-model="trademarkAttr.xMargin"/>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4">{{$t('order.height')}}:</el-col>
          <el-col :span="4">Y:</el-col>
          <el-col :span="6">
            <el-input-number v-model="trademarkAttr.yMargin"/>
          </el-col>
@@ -653,93 +1258,54 @@
          </el-col>
        </el-row>
      </div>
      <div v-if="!enlargementFlag" style="width: 400px;height: 250px;border: 2px solid #000;float: left;position: relative;">
        <div
            v-if="tagCheck(t('craft.upperLeft'))"
            style="float: left;width: 50px;height: 90px;margin-left: 1rem;margin-top: 15px">
          <el-row class="icon">
            <el-col class="icon" >
              <el-image @dblclick="trademarkenlargement" style="width: 100%;height: 100%" :class="{'xStyle':trademarkAttr.xImage,'yStyle':trademarkAttr.yImage}"  :src="iconNickname"/>
            </el-col>
          </el-row>
          <el-row  >
            <el-col :span="12" >{{$t('order.width')}}:</el-col>
            <el-col :span="12" >{{trademarkAttr.xMargin}}</el-col>
          </el-row>
          <el-row >
            <el-col :span="12" >{{$t('order.height')}}:</el-col>
            <el-col :span="12" >{{trademarkAttr.yMargin}}</el-col>
          </el-row>
        </div>
      <div style="width: 404px;height: 254px;border: 2px solid #000;float: left;
      position: relative;display: flex;justify-content: center;align-content: center;">

        <div
            v-if="tagCheck(t('craft.upperRight'))"
            style="float: right;width: 50px;height: 90px;margin-right: 1rem;margin-top: 15px">
          <el-row class="icon">
            <el-col class="icon" >
              <el-image @dblclick="trademarkenlargement" style="width: 100%;height: 100%" :class="{'xStyle':trademarkAttr.xImage,'yStyle':trademarkAttr.yImage}"  :src="iconNickname"/>
            </el-col>
          </el-row>
          <el-row  >
            <el-col :span="12" >{{$t('order.width')}}:</el-col>
            <el-col :span="12" >{{trademarkAttr.xMargin}}</el-col>
          </el-row>
          <el-row >
            <el-col :span="12" >{{$t('order.height')}}:</el-col>
            <el-col :span="12" >{{trademarkAttr.yMargin}}</el-col>
          </el-row>
        </div>


        <div

            v-if="tagCheck(t('craft.lowLeft'))"
            style="width: 50px;height: 90px;margin-left: 1rem;float: left;position: absolute;bottom: 15px" >
          <el-row  >
            <el-col :span="12" >{{$t('order.width')}}:</el-col>
            <el-col :span="12" >{{trademarkAttr.xMargin}}</el-col>
          </el-row>
          <el-row >
            <el-col :span="12" >{{$t('order.height')}}:</el-col>
            <el-col :span="12" >{{trademarkAttr.yMargin}}</el-col>
          </el-row>
          <el-row class="icon">
            <el-col class="icon" >
              <el-image @dblclick="trademarkenlargement" style="width: 100%;height: 100%" :class="{'xStyle':trademarkAttr.xImage,'yStyle':trademarkAttr.yImage}"  :src="iconNickname"/>
            </el-col>
          </el-row>

        </div>


        <div
            v-if="tagCheck(t('craft.lowRight'))"
            style="width: 50px;height: 90px;position: absolute;bottom: 15px;right: 1rem">
          <el-row>
            <el-col :span="12" >{{$t('order.width')}}:</el-col>
            <el-col :span="12" >{{trademarkAttr.xMargin}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="12" >{{$t('order.height')}}:</el-col>
            <el-col :span="12" >{{trademarkAttr.yMargin}}</el-col>
          </el-row>
          <el-row class="icon">
            <el-col class="icon">
              <el-image style="width: 100%;height: 100%"  @dblclick="trademarkenlargement" :class="{'xStyle':trademarkAttr.xImage,'yStyle':trademarkAttr.yImage}"  :src="iconNickname"/>
            </el-col>
          </el-row>

        </div>
        <div style="position: absolute;left: 405px;top: 115px;color: red">{{$t('order.height')}}</div>
        <div style="position: absolute;left: 200px;top: 250px;color: red">{{$t('order.width')}}</div>
          <div id="mains" ref="parent"  >
            <div id="iocn" ref="draggable"
                v-if="tagCheck(t('craft.upperLeft'))"
                :style="{marginLeft:trademarkAttr.xMargin/big+'px',marginTop:trademarkAttr.yMargin/big+'px'}"
                style="width: 20px;height: 20px;left: 0;top: 0;background-color: red;position: absolute;"
                @mousedown="startDragUpperLeft"
            >
              <el-image @dblclick="trademarkenlargement" style="width: 100%;height: 100%"   :src="iconNickname"/>
            </div>
            <div id="iocn" ref="draggable" v-if="tagCheck(t('craft.upperRight'))"  @mousedown="startDragUpperRight" :style="{marginRight:trademarkAttr.xMargin/big+'px',marginTop:trademarkAttr.yMargin/big+'px'}" style="width: 20px;height: 20px;right: 0;top: 0;background-color: red;position: absolute;">
              <el-image @dblclick="trademarkenlargement" style="width: 100%;height: 100%"   :src="iconNickname"/>
            </div>
            <div id="iocn" ref="draggable" v-if="tagCheck(t('craft.lowLeft'))" @mousedown="startDragLowLeft" :style="{marginLeft:trademarkAttr.xMargin/big+'px',marginBottom:trademarkAttr.yMargin/big+'px'}" style="width: 20px;height: 20px;left: 0;bottom: 0;background-color: red;position: absolute;">
              <el-image @dblclick="trademarkenlargement" style="width: 100%;height: 100%"   :src="iconNickname"/>
            </div>
            <div id="iocn" ref="draggable" v-if="tagCheck(t('craft.lowRight'))" @mousedown="startDragLowRight" :style="{marginRight:trademarkAttr.xMargin/big+'px',marginBottom:trademarkAttr.yMargin/big+'px'}" style="width: 20px;height: 20px;right: 0;bottom: 0;background-color: red;position: absolute;">
              <el-image @dblclick="trademarkenlargement" style="width: 100%;height: 100%"   :src="iconNickname"/>
            </div>
           <canvas  id="canvas" ></canvas>
          </div>


      </div>
      <div v-if="enlargementFlag" style="width: 400px;height: 250px;float: left;position: relative;">
      <div id="width" style="height: 20px;position: absolute;top: 33px;left: 652px;">{{orderDetailWidth}}</div>
      <div id="height" style="width: 60px;position: absolute;top: 178px;left: 390px;">{{orderDetailHeight}}</div>
      <div style="float: left;margin-top: 20px;margin-left: 80px">
        <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: 332px;left: 520px;">上</div>
      <div id="width" style="height: 20px;position: absolute;top: 354px;left: 520px;">下</div>
      <div id="width" style="height: 20px;position: absolute;top: 312px;left: 562px;">横</div>
      <div id="width" style="height: 20px;position: absolute;top: 312px;left: 625px;">竖</div>
      <div id="width" style="height: 20px;position: absolute;top: 312px;left: 695px;">横</div>
      <div id="width" style="height: 20px;position: absolute;top: 312px;left: 760px;">竖</div>
      <div v-if="enlargementFlag" style="width: 400px;height: 250px;float: left;position: relative;background-color: red">
        <el-image  @dblclick="trademarkenlargement" style="z-index: 9999;max-width: 100%;max-height: 100%" :src="iconNickname"/>
      </div>
    </el-dialog>

  </div>
</template>

@@ -785,4 +1351,15 @@
  width: 50px;
  height: 50px;
}
.contactNumber{
  width: 60px;
  height:20px;
  border: none;
  box-shadow: none;
  font-size: 15px;
}

#mains {
  position: relative;
}
</style>