订单明细报表新增楼层编号跟其他列

廖井涛

4 天以前 2f44fc75c78e9291f07a0864199235cde689fa8d

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

@@ -13,6 +13,7 @@
import DxfParser from 'dxf-parser';
import { Leafer, Polygon,Ellipse,Line,Path } from 'leafer-ui'
import {round} from "xe-utils";
import {add} from '@/utils/decimal'
const { t } = useI18n()

const router = useRouter()
@@ -23,6 +24,9 @@
const company = companyInfo()
const xGrid = ref()
const trademarkLocation=ref([t('craft.upperLeft'),t('craft.upperRight'),t('craft.lowLeft'),t('craft.lowRight')])
const qrcodeLocation=ref({})


const gridOptions = reactive({
  loading:true,
  border:  "full",//表格加边框
@@ -158,7 +162,7 @@
        }
        case 'computedSize' :{
          let result = toolbarButtonClickEvent()
          if(!result || result.cell!=='childWidth'){
          if(!result || !(result.cell==='childWidth' || result.cell==='childHeight')){
            break
          }
          ElMessageBox.prompt('', '', {
@@ -171,8 +175,7 @@
                const value1 = value*1
                $grid.getTableData().visibleData.forEach((item,index) =>{
                  if(index>=result.start && index<=result.end){

                    item[result.cell] = item[result.cell]*1+value1
                    item[result.cell] =add(item[result.cell]*1,value1)
                  }

                })
@@ -251,7 +254,6 @@
              widthList.push(item.childWidth)
              arcList.push(item.arc)
              archRiseList.push(item.archRise)
              console.log(item.archRise)
            })
            widthList = widthList.sort();
            arcList = arcList.sort();
@@ -298,6 +300,8 @@

const trademarkAttr = ref({
  trademark:null,
  width:null,
  height:null,
  xImage:null,
  yImage:null,
  tag:null,
@@ -305,7 +309,17 @@
  tag3:null,
  xMargin:30,
  yMargin:30,
  location:[]
  location:[],
  qr1:{
    x:10,
    y:10,
    location:[]
  },
  qr2:{
    x:10,
    y:10,
    location:[]
  }

})

@@ -322,7 +336,7 @@
  if (res.code==200){
    trademarkList.value = res.data
    trademarkList.value.forEach(item =>{
      item.basicName
      item.nickname = JSON.parse(item.nickname)
    })

  }
@@ -350,6 +364,10 @@
    if (res.code === "200") {
      if(res.data.data!=null){
        const b64Data = res.data.data.file_data;
        if(res.data.data.file_json!=null){
          fileJson.value= JSON.parse(res.data.data.file_json)
          selectData(fileJson.value)
        }
        const byteCharacters = atob(b64Data);
        const parser = new DxfParser();
        dxfData.value = parser.parseSync(byteCharacters)
@@ -362,32 +380,53 @@

  trademarkRow.value=row
  trademarkVisible.value= true
  /*Object.keys(trademarkAttr.value).forEach((key) => {
    if(key==='location'){
      trademarkAttr.value[key] = []
    }else if(key==='xMargin' || key==='yMargin'){
      trademarkAttr.value[key] = 30
    }else{
      trademarkAttr.value[key] = ''
  if(row.icon!=null && row.icon!==''){
    let trademark = JSON.parse(row.icon)
    if(trademark.qr2 === undefined){
      trademark.width = null
      trademark.height = null
      trademark.qr1 = {
        x:10,
        y:10,
        location:t('craft.lowLeft'),
      }
      trademark.qr2 = {
        x:10,
        y:10,
        location:t('craft.upperRight')
      }
    }
  })*/
  trademarkAttr.value = {
    trademark:"3C",
    xImage:false,
    yImage:false,
    tag:true,
    tag2:true ,
    tag3:true,
    xMargin:30,
    yMargin:30,
    location:t('craft.lowLeft')
    trademarkAttr.value = trademark
  }else{
    trademarkAttr.value = {
      trademark:trademarkList.value[0].basicName,
      width:trademarkList.value[0].nickname.width ,
      height:trademarkList.value[0].nickname.height,
      xImage:false,
      yImage:false,
      tag:true,
      tag2:true ,
      tag3:false,
      xMargin:30,
      yMargin:30,
      location:t('craft.lowLeft'),
      qr1:{
        x:10,
        y:10,
        location:t('craft.lowLeft'),
      },
      qr2:{
        x:10,
        y:10,
        location:t('craft.upperRight')
      }
    }
  }
  if(row.icon!=null){
    trademarkAttr.value = JSON.parse(row.icon)
  }


  trademarkList.value.forEach(item =>{
    if(item.basicName===trademarkAttr.value.trademark){
      iconNickname.value=item.nickname
      iconNickname.value=item.nickname.data
    }
  })

@@ -397,8 +436,11 @@

const changeTrademark = ()=>{
  if(company.alienFunction){
    exportToDXF()
    if(state.value){
      exportToDXF()
    }
  }

  rowIndex.value.icon = JSON.stringify(trademarkAttr.value)
  trademarkVisible.value=false
  Object.keys(trademarkAttr.value).forEach((key) => (trademarkAttr.value[key] = ''))
@@ -428,6 +470,10 @@
//初始化判断是否有id传入
onMounted(()=>{
  addListener(xGrid.value,gridOptions)
  qrcodeLocation.value[t('craft.default')] = ""
  trademarkLocation.value.forEach(item =>{
    qrcodeLocation.value[item] = item
  })
  const str = route.query.orderId
  if (typeof str === 'undefined' || str === null || str === '' || str === '\n' || str === '\r'){
    return
@@ -491,12 +537,14 @@
const iconChange = () => {
  trademarkList.value.forEach(item =>{
    if(item.basicName===trademarkAttr.value.trademark){
      iconNickname.value=item.nickname
      iconNickname.value=item.nickname.data
      trademarkAttr.value.width=item.nickname.width
      trademarkAttr.value.height=item.nickname.height
    }
  })
  if(trademarkAttr.value.trademark===company.icon){
  /*if(trademarkAttr.value.trademark===company.icon){
    trademarkAttr.value.xMargin=66
  }
  }*/

}

@@ -515,6 +563,10 @@

let state=ref(false)
let points=ref([])
let fileJson=ref({
  quadrilateral:null,
  polygon:null
})
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)

@@ -564,7 +616,7 @@
      leafer.add(polygon);
    }, 30);

    trademarkAttr.value.location = t('craft.lowLeft')
    //trademarkAttr.value.location = t('craft.lowLeft')
  }else{
    state.value=false
    handleFileUpload()
@@ -578,9 +630,11 @@
    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({
    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)]
    const polygon = new Polygon({
       points: points.value,
      fill: '#32cd79',
      stroke: '#f00',
      origin: [0, 0]
    })
  leafer.add(polygon)
@@ -619,7 +673,6 @@
    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'});
@@ -627,7 +680,8 @@
  let filterData=ref({
    dataBase64:base64.replace(/^data:.+;base64,/, ""),
    orderId:rowIndex.value.orderId,
    orderNumber:rowIndex.value.orderNumber
    orderNumber:rowIndex.value.orderNumber,
    fileJson:fileJson.value
  })
  request.post(`/order/updateOrderFile`,filterData.value).then(res =>{
    if(res.code==200){
@@ -636,7 +690,7 @@
      ElMessage.error(res.msg)
    }
  })
  //saveAs(blob, 'map.dxf');

}

const fileToBase64 = (file) => {
@@ -662,185 +716,205 @@
    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);
  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 ((maxX - minX) / 400 > (maxY - minY) / 250) {
          big = (maxX - minX) / 400
        } else {
          big = (maxY - minY) / 250
        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});
        }

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

    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){
            points.value=point
            isQuadrilateral(maxY,minY,maxX,minX,point)
          }

            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':

          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 = () => {
@@ -868,7 +942,7 @@
  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 numbers = [point[0], point[2], point[4], point[6]]; // 示例数组
  let maxX1 = Math.max(...numbers); // 找到最大值
  let maxIndex = numbers.findIndex(num => num === maxX1); // 定位第一个匹配索引
  let remaining = [...numbers]; // 复制原数组避免突变
@@ -957,7 +1031,7 @@
    data8.value=0
  }else{
    data8.value=round(maxY-minY-lowerRight[1]*big,0)
  }
  }*/
}


@@ -1125,6 +1199,21 @@
  document.removeEventListener('mouseup', stopDragLowRight)
}

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]
  }

}


</script>

@@ -1226,11 +1315,11 @@
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @closed="handleClosed"
        style="width: 922px;height:443px ;
        style="width: 1122px;height:750px;margin-top: 100px ;
        position: relative;" >
      <div style="width: 50%;height: 100%;float: left">
        <el-row style="">
          <el-col :span="4">{{$t('craft.TrademarkOptions')}}:</el-col>
          <el-col :span="5">{{$t('craft.TrademarkOptions')}}:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.trademark" @change ="iconChange" filterable>
              <el-option :value="item.basicName" v-for="item in trademarkList" />
@@ -1239,7 +1328,30 @@
        </el-row>

        <el-row>
          <el-col :span="4">{{$t('craft.xImage')}}:</el-col>
          <el-col :span="5">{{$t('craft.location')}}:</el-col>
          <el-col :span="25">
            <el-radio v-model="trademarkAttr.location" v-for="item in trademarkLocation" :label="item"  />
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="5">X:</el-col>
          <el-col :span="6">
            <el-input-number v-model="trademarkAttr.xMargin"/>
          </el-col>
        </el-row>



        <el-row>
          <el-col :span="5">Y:</el-col>
          <el-col :span="6">
            <el-input-number v-model="trademarkAttr.yMargin"/>
          </el-col>
        </el-row>

        <el-row >
          <el-col :span="5">{{$t('craft.xImage')}}:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.xImage">
              <el-option :value="true" :label="$t('basicData.true')"/>
@@ -1249,7 +1361,7 @@
        </el-row>

        <el-row>
          <el-col :span="4">{{$t('craft.yImage')}}:</el-col>
          <el-col :span="5">{{$t('craft.yImage')}}:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.yImage">
              <el-option :value="true" :label="$t('basicData.true')"/>
@@ -1259,7 +1371,7 @@
        </el-row>

        <el-row>
          <el-col :span="4">{{$t('craft.tag')}}:</el-col>
          <el-col :span="5">{{$t('craft.tag')}}:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.tag">
              <el-option :value="true" :label="$t('basicData.true')"/>
@@ -1267,9 +1379,9 @@
            </el-select>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4">{{$t('craft.tag2')}}:</el-col>
<!--二维码1-->
        <el-row class="row_item">
          <el-col :span="5">{{$t('craft.tag2')}}:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.tag2">
              <el-option :value="true" :label="$t('basicData.true')"/>
@@ -1279,7 +1391,35 @@
        </el-row>

        <el-row>
          <el-col :span="4">{{$t('craft.tag3')}}:</el-col>
          <el-col :span="5">{{$t('craft.qr1Local')}}:</el-col>
          <el-col :span="25">
            <el-radio v-model="trademarkAttr.qr1.location"
                      v-for="(item,keys) in qrcodeLocation"
                      :value="item"
            >
              {{keys}}
            </el-radio>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="5">X:</el-col>
          <el-col :span="6">
            <el-input-number v-model="trademarkAttr.qr1.x"/>
          </el-col>
        </el-row>



        <el-row>
          <el-col :span="5">Y:</el-col>
          <el-col :span="6">
            <el-input-number v-model="trademarkAttr.qr1.y"/>
          </el-col>
        </el-row>
<!--二维码2-->
        <el-row class="row_item">
          <el-col :span="5">{{$t('craft.tag3')}}:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.tag3">
              <el-option :value="true" :label="$t('basicData.true')"/>
@@ -1289,38 +1429,46 @@
        </el-row>

        <el-row>
          <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">Y:</el-col>
          <el-col :span="6">
            <el-input-number v-model="trademarkAttr.yMargin"/>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4">{{$t('craft.location')}}:</el-col>
          <el-col :span="5">{{$t('craft.qr2Local')}}:</el-col>
          <el-col :span="25">
            <el-radio v-model="trademarkAttr.location" v-for="item in trademarkLocation" :label="item"  />
            <el-radio v-model="trademarkAttr.qr2.location"
                      v-for="(item,keys) in qrcodeLocation"
                      :value="item"
            >
              {{keys}}
            </el-radio>
          </el-col>
        </el-row>

        <el-row>
          <el-col >
            <el-button @click="changeTrademark" style="float:right;" type="primary" >{{$t('craft.sure')}}</el-button>
            <el-button @click="resetTrademark" style="float:right;margin-right: 0.5rem" type="primary" >{{$t('craft.reset')}}</el-button>
          <el-col :span="5">X:</el-col>
          <el-col :span="6">
            <el-input-number v-model="trademarkAttr.qr2.x"/>
          </el-col>
        </el-row>



        <el-row>
          <el-col :span="5">Y:</el-col>
          <el-col :span="6">
            <el-input-number v-model="trademarkAttr.qr2.y"/>
          </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 id="mains" ref="parent"  >
            <div id="iocn" ref="draggable"
            <div id="icon" 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;"
@@ -1328,13 +1476,13 @@
            >
              <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;">
            <div id="icon" 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;">
            <div id="icon" 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;">
            <div id="icon" 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>
@@ -1342,8 +1490,8 @@


      </div>
      <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 id="width" style="height: 20px;position: absolute;top: 33px;left: 752px;">{{orderDetailWidth}}</div>
      <div id="height" style="width: 60px;position: absolute;top: 178px;right: 100px;">{{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;
@@ -1354,15 +1502,23 @@
        <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;">{{$t('order.upper')}}</div>
      <div id="width" style="height: 20px;position: absolute;top: 354px;left: 520px;">{{$t('order.down')}}</div>
      <div id="width" style="height: 20px;position: absolute;top: 312px;left: 562px;">{{$t('order.horizontal')}}</div>
      <div id="width" style="height: 20px;position: absolute;top: 312px;left: 625px;">{{$t('order.vertical')}}</div>
      <div id="width" style="height: 20px;position: absolute;top: 312px;left: 695px;">{{$t('order.horizontal')}}</div>
      <div id="width" style="height: 20px;position: absolute;top: 312px;left: 760px;">{{$t('order.vertical')}}</div>
      <div id="width" style="height: 20px;position: absolute;top: 332px;left: 520px;margin-left: 80px">{{$t('order.upper')}}</div>
      <div id="width" style="height: 20px;position: absolute;top: 354px;left: 520px;margin-left: 80px">{{$t('order.down')}}</div>
      <div id="width" style="height: 20px;position: absolute;top: 312px;left: 562px;margin-left: 80px">{{$t('order.horizontal')}}</div>
      <div id="width" style="height: 20px;position: absolute;top: 312px;left: 625px;margin-left: 80px">{{$t('order.vertical')}}</div>
      <div id="width" style="height: 20px;position: absolute;top: 312px;left: 695px;margin-left: 80px">{{$t('order.horizontal')}}</div>
      <div id="width" style="height: 20px;position: absolute;top: 312px;left: 760px;margin-left: 80px">{{$t('order.vertical')}}</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>
      <template #footer style="width: 100%;height: 100%">
                <el-row>
                  <el-col >
                    <el-button @click="changeTrademark" style="float:right;" type="primary" >{{$t('craft.sure')}}</el-button>
                    <el-button @click="resetTrademark" style="float:right;margin-right: 0.5rem" type="primary" >{{$t('craft.reset')}}</el-button>
                  </el-col>
                </el-row>
      </template>
    </el-dialog>
  </div>
</template>
@@ -1420,4 +1576,12 @@
#mains {
  position: relative;
}
:deep(#trademark .el-dialog__body){
  height: 85%;
  width: 100%;
  overflow-y: auto;
}
.row_item{
  margin-top: 30px;
}
</style>