From a9ffa322f0cf794a7da8182e1be4ca34f5ea19b6 Mon Sep 17 00:00:00 2001
From: chenlu <1320612696@qq.com>
Date: 星期五, 25 七月 2025 13:34:36 +0800
Subject: [PATCH] Merge branch 'master' of http://10.153.19.25:10105/r/ERP_override
---
north-glass-erp/northglass-erp/src/views/sd/order/UpdateOrderCraft.vue | 747 ++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 662 insertions(+), 85 deletions(-)
diff --git a/north-glass-erp/northglass-erp/src/views/sd/order/UpdateOrderCraft.vue b/north-glass-erp/northglass-erp/src/views/sd/order/UpdateOrderCraft.vue
index bdd38f4..7eaba9f 100644
--- a/north-glass-erp/northglass-erp/src/views/sd/order/UpdateOrderCraft.vue
+++ b/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" />
+ <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;">涓�</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>
\ No newline at end of file
--
Gitblit v1.8.0