| | |
|---|
| | | <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" |
|---|
| | |
|---|
| | | 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"; |
|---|
| | | import {add} from '@/utils/decimal' |
|---|
| | | const { t } = useI18n() |
|---|
| | | |
|---|
| | | const router = useRouter() |
|---|
| | |
|---|
| | | 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",//表格加边框 |
|---|
| | |
|---|
| | | {field: 'childWidth',width:120, title: t('craft.childWidth'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
|---|
| | | {field: 'childHeight',width:120, title: t('craft.childHeight'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
|---|
| | | {field: 'arc',width:120, title: t('craft.arc'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
|---|
| | | {field: 'archRise',width:120, title: t('craft.archRise'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
|---|
| | | {field: 'area',width:120, title: t('craft.area'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
|---|
| | | {field: 'orderDetail.quantity',width:120, title: t('order.quantity'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
|---|
| | | {field: 'process',width:120, title: t('craft.process'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
|---|
| | |
|---|
| | | } |
|---|
| | | case 'computedSize' :{ |
|---|
| | | let result = toolbarButtonClickEvent() |
|---|
| | | if(!result || result.cell!=='childWidth'){ |
|---|
| | | if(!result || !(result.cell==='childWidth' || result.cell==='childHeight')){ |
|---|
| | | break |
|---|
| | | } |
|---|
| | | ElMessageBox.prompt('', '', { |
|---|
| | |
|---|
| | | 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) |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | |
|---|
| | | ) |
|---|
| | | let widthList = [] |
|---|
| | | let arcList = [] |
|---|
| | | let archRiseList = [] |
|---|
| | | sameOrderNumber.forEach((item) =>{ |
|---|
| | | widthList.push(item.childWidth) |
|---|
| | | arcList.push(item.arc) |
|---|
| | | archRiseList.push(item.archRise) |
|---|
| | | }) |
|---|
| | | widthList = widthList.sort(); |
|---|
| | | arcList = arcList.sort(); |
|---|
| | | archRiseList = archRiseList.sort(); |
|---|
| | | sameOrderNumber.forEach((item,index) =>{ |
|---|
| | | item.childWidth = widthList[index] |
|---|
| | | item.arc = arcList[index] |
|---|
| | | item.archRise = archRiseList[index] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | } |
|---|
| | |
|---|
| | | |
|---|
| | | const trademarkAttr = ref({ |
|---|
| | | trademark:null, |
|---|
| | | width:null, |
|---|
| | | height:null, |
|---|
| | | xImage:null, |
|---|
| | | yImage:null, |
|---|
| | | tag:null, |
|---|
| | |
|---|
| | | tag3:null, |
|---|
| | | xMargin:30, |
|---|
| | | yMargin:30, |
|---|
| | | location:[] |
|---|
| | | location:[], |
|---|
| | | qr1:{ |
|---|
| | | x:10, |
|---|
| | | y:10, |
|---|
| | | location:[] |
|---|
| | | }, |
|---|
| | | qr2:{ |
|---|
| | | x:10, |
|---|
| | | y:10, |
|---|
| | | location:[] |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | |
|---|
| | | if (res.code==200){ |
|---|
| | | trademarkList.value = res.data |
|---|
| | | trademarkList.value.forEach(item =>{ |
|---|
| | | item.basicName |
|---|
| | | item.nickname = JSON.parse(item.nickname) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | } |
|---|
| | |
|---|
| | | |
|---|
| | | //修改商标选项 |
|---|
| | | let trademarkVisible = ref(false) |
|---|
| | | const updateTrademark = (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] = '' |
|---|
| | | 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; |
|---|
| | | 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) |
|---|
| | | }else{ |
|---|
| | | dxfData.value =null |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | })*/ |
|---|
| | | trademarkAttr.value = { |
|---|
| | | trademark:"3C", |
|---|
| | | xImage:false, |
|---|
| | | yImage:false, |
|---|
| | | tag:true, |
|---|
| | | tag2:true , |
|---|
| | | tag3:true, |
|---|
| | | xMargin:30, |
|---|
| | | yMargin:30, |
|---|
| | | location:t('craft.lowLeft') |
|---|
| | | }) |
|---|
| | | |
|---|
| | | trademarkRow.value=row |
|---|
| | | trademarkVisible.value= true |
|---|
| | | 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 |
|---|
| | | }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 |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | rowIndex.value = row |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | const changeTrademark = ()=>{ |
|---|
| | | if(company.alienFunction){ |
|---|
| | | if(state.value){ |
|---|
| | | exportToDXF() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | rowIndex.value.icon = JSON.stringify(trademarkAttr.value) |
|---|
| | | trademarkVisible.value=false |
|---|
| | | Object.keys(trademarkAttr.value).forEach((key) => (trademarkAttr.value[key] = '')) |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | |
|---|
| | | craftVisible.value= false |
|---|
| | | } |
|---|
| | | |
|---|
| | | onUpdated(() => { |
|---|
| | | if (trademarkVisible.value&&trademarkRow.value!=null) { |
|---|
| | | ongetproject(trademarkRow.value) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | //初始化判断是否有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 |
|---|
| | |
|---|
| | | }) |
|---|
| | | //保存修改工艺 |
|---|
| | | 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 |
|---|
| | |
|---|
| | | trademarkAttr.value[key] = [] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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 |
|---|
| | | } |
|---|
| | | }*/ |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | let enlargementFlag = ref(false) |
|---|
| | | const trademarkenlargement = () => { |
|---|
| | | enlargementFlag.value = !enlargementFlag.value |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | /*dxf文件解析及其导出*/ |
|---|
| | | |
|---|
| | | 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) |
|---|
| | | |
|---|
| | | 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)] |
|---|
| | | 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, |
|---|
| | | stroke: '#f00', |
|---|
| | | 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, |
|---|
| | | fileJson:fileJson.value |
|---|
| | | }) |
|---|
| | | request.post(`/order/updateOrderFile`,filterData.value).then(res =>{ |
|---|
| | | if(res.code==200){ |
|---|
| | | //saveAs(blob, 'map.dxf'); |
|---|
| | | }else{ |
|---|
| | | ElMessage.error(res.msg) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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 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 |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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 = () => { |
|---|
| | | 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] |
|---|
| | | |
|---|
| | | /*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) |
|---|
| | | }*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | /*商标拖动*/ |
|---|
| | | |
|---|
| | | 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) |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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] |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | |
|---|
| | | :title="$t('craft.TrademarkAttribute')" |
|---|
| | | :close-on-click-modal="false" |
|---|
| | | :close-on-press-escape="false" |
|---|
| | | style="width: 922px;height:443px ; |
|---|
| | | @closed="handleClosed" |
|---|
| | | 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" /> |
|---|
| | |
|---|
| | | </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')"/> |
|---|
| | |
|---|
| | | </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')"/> |
|---|
| | |
|---|
| | | </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')"/> |
|---|
| | |
|---|
| | | </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')"/> |
|---|
| | |
|---|
| | | </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')"/> |
|---|
| | |
|---|
| | | </el-row> |
|---|
| | | |
|---|
| | | <el-row> |
|---|
| | | <el-col :span="4">{{$t('order.width')}}:</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="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> |
|---|
| | | </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 |
|---|
| | | 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> |
|---|
| | | <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 |
|---|
| | | 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> |
|---|
| | | <div v-if="enlargementFlag" style="width: 400px;height: 250px;float: left;position: relative;"> |
|---|
| | | <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="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;" |
|---|
| | | @mousedown="startDragUpperLeft" |
|---|
| | | > |
|---|
| | | <el-image @dblclick="trademarkenlargement" style="width: 100%;height: 100%" :src="iconNickname"/> |
|---|
| | | </div> |
|---|
| | | <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="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="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> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | | </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" /> |
|---|
| | | <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 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> |
|---|
| | | |
|---|
| | |
|---|
| | | width: 50px; |
|---|
| | | height: 50px; |
|---|
| | | } |
|---|
| | | .contactNumber{ |
|---|
| | | width: 60px; |
|---|
| | | height:20px; |
|---|
| | | border: none; |
|---|
| | | box-shadow: none; |
|---|
| | | font-size: 15px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #mains { |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | :deep(#trademark .el-dialog__body){ |
|---|
| | | height: 85%; |
|---|
| | | width: 100%; |
|---|
| | | overflow-y: auto; |
|---|
| | | } |
|---|
| | | .row_item{ |
|---|
| | | margin-top: 30px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
