From 8d2d3302bf2f08960b81b5c2b8aca045b4112510 Mon Sep 17 00:00:00 2001 From: 陈鑫涛 <10125295+chen-xintao97@user.noreply.gitee.com> Date: Sun, 6 Jul 2025 15:37:32 +0800 Subject: [PATCH] 矩形 --- src/components/Common/BoxDesign/createAirplaneBox.js | 2 +- src/components/Common/BoxDesignCompontent/index.js | 2 +- src/components/Common/BoxDesignCompontent/svg.js | 150 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------- src/components/Common/Typesetting/typesetting.js | 9 ++++++--- src/components/QuickQuote/index.jsx | 37 +++++++++++++++++++++++-------------- 5 files changed, 143 insertions(+), 57 deletions(-) diff --git a/src/components/Common/BoxDesign/createAirplaneBox.js b/src/components/Common/BoxDesign/createAirplaneBox.js index 903dea0..e833fc5 100644 --- a/src/components/Common/BoxDesign/createAirplaneBox.js +++ b/src/components/Common/BoxDesign/createAirplaneBox.js @@ -201,7 +201,7 @@ export const createText = (offsetX, offsetY, size, textContent) => { text.setAttribute("dominant-baseline", "middle"); // 文字垂直居中 text.setAttribute("fill", "#333"); // 文字颜色 text.setAttribute("font-size", size); // 文字大小 - text.textContent = textContent || "Text"; // 默认文字内容 + text.textContent = textContent || ""; // 默认文字内容 return text; }; // 竖向双箭头 diff --git a/src/components/Common/BoxDesignCompontent/index.js b/src/components/Common/BoxDesignCompontent/index.js index c46ca15..7394401 100644 --- a/src/components/Common/BoxDesignCompontent/index.js +++ b/src/components/Common/BoxDesignCompontent/index.js @@ -261,7 +261,7 @@ const BoxDesignCompontent = baseProps => { box.forEach(x => { x.show = true; }); - const title = ["盒底组件", "左(下)插位组件", "右(上)插位组件","上方盒舌","下方盒舌"]; + const title = ["盒底组件", "左贴边位", "右贴边位","上方盒舌","下方盒舌"]; box.forEach(x => title.includes(x.sName) && (x.show = false)); setTopBoxList(box.filter(topBoxFilter)); setLeftBoxList(box.filter(leftBoxFilter)); diff --git a/src/components/Common/BoxDesignCompontent/svg.js b/src/components/Common/BoxDesignCompontent/svg.js index 6691083..502999e 100644 --- a/src/components/Common/BoxDesignCompontent/svg.js +++ b/src/components/Common/BoxDesignCompontent/svg.js @@ -50,6 +50,7 @@ import { createBoxComponentNewFul5, createBoxComponentNewFul6, } from "../BoxDesign/createAirplaneBox"; +import { log } from "lodash-decorators/utils"; const SvgBox = props => { const svgContainerRef = useRef(null); const svgRef = useRef(null); @@ -84,7 +85,7 @@ const SvgBox = props => { // 获取盒长、盒宽、盒高 const boxLength = Number(boxList.find(x => x.sName === "盒长")?.value) || 0; const boxWidth = Number(boxList.find(x => x.sName === "盒宽")?.value) || 0; - const boxHeight = Number(boxList.find(x => x.sName === "盒高")?.value) || 0; + let boxHeight = Number(boxList.find(x => x.sName === "盒高")?.value) || 0; setWidth(boxLength); setHeight(boxWidth); @@ -193,9 +194,66 @@ const SvgBox = props => { } else if (Number(svgType) === 6) { viewBoxWidth = boxWidth + 2; viewBoxHeight = boxLength + 2; + } else if (Number(svgType) === 7) { - viewBoxWidth = boxWidth + dZTBW + dYTBW; - viewBoxHeight = boxLength + dZSCW + dYXCW; + boxHeight = boxWidth + const zxcw = boxList.find(x => x.sName === "左(下)插位组件"); + const zscw = boxList.find(x => x.sName === "左(上)插位组件"); + const yscw = boxList.find(x => x.sName === "右(上)插位组件"); + const yxcw = boxList.find(x => x.sName === "右(下)插位组件"); + const zxcwType = zxcw?.type; + const zxcwValue = zxcw?.value; + const zscwType = zscw?.type; + const zscwValue = zscw?.value; + const yscwType = yscw?.type; + const yscwValue = yscw?.value; + const yxcwType = yxcw?.type; + const yxcwValue = yxcw?.value; + let leftValue = 0; + let rightValue = 0; + let topValue = 0; + let bottomValue = 0; + if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") { + leftValue = leftValue + Number(zxcwValue) + boxHeight * 2; + } else if (zxcwType === "4002" || zxcwType === "4003") { + leftValue = leftValue + Number(zxcwValue) + boxHeight; + } else if (zxcwType === "4004") { + leftValue = leftValue + Number(zxcwValue) + boxHeight * 3; + } else if (zxcwType === "4005") { + leftValue = boxHeight * 3; + } + if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") { + rightValue = rightValue + Number(yscwValue) + boxHeight * 2; + } else if (yscwType === "6002" || yscwType === "6003") { + rightValue = rightValue + Number(yscwValue) + boxHeight; + } else if (yscwType === "6004") { + rightValue = rightValue + Number(yscwValue) + boxHeight * 3; + } else if (yscwType === "6005") { + rightValue = boxHeight * 3; + } + if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") { + topValue = topValue + Number(zscwValue) + boxHeight * 2; + } else if (zscwType === "3002" || zscwType === "3003") { + topValue = topValue + Number(zscwValue) + boxHeight; + } else if (zscwType === "3004") { + topValue = topValue + Number(zscwValue) + boxHeight * 3; + } else if (zscwType === "3005") { + topValue = boxHeight * 3; + } + if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") { + bottomValue = bottomValue + Number(yxcwValue) + boxHeight * 2; + } else if (yxcwType === "7002" || yxcwType === "7003") { + bottomValue = bottomValue + Number(yxcwValue) + boxHeight; + } else if (yxcwType === "7004") { + bottomValue = bottomValue + Number(yxcwValue) + boxHeight * 3; + } else if (yxcwType === "7005") { + bottomValue = boxHeight * 3; + } + viewBoxWidth = Number(boxLength) + leftValue + rightValue; + console.log("🚀 ~ initSVG ~ leftValue:", leftValue,rightValue) + viewBoxHeight = Number(boxWidth) + topValue + bottomValue; + // viewBoxWidth = boxWidth + leftValue + rightValue; + // viewBoxHeight = boxLength + dZSCW + dYXCW; } // 计算缩放比例 let scale = 1; @@ -212,9 +270,15 @@ const SvgBox = props => { ySvg = ySvg + boxHeight * scale; } ySvg = ySvg + 50 * scale; + let xSvg = 0; + if (Number(svgType === 7)) { + xSvg = scaledWidth + dZXCW * scale; + } else { + xSvg = zbtb?.value; + } svg.setAttribute( "viewBox", - `${-(zbtb?.value * scale)} ${dSvgBoxWidth ? (dSvgBoxWidth === 100 ? -ySvg : 0) : -ySvg} ${dSvgBoxWidth ? dSvgBoxWidth + ySvg : 500} ${ + `${-(xSvg * scale)} ${dSvgBoxWidth ? (dSvgBoxWidth === 100 ? -ySvg : 0) : -ySvg} ${dSvgBoxWidth ? dSvgBoxWidth + ySvg : 500} ${ dSvgBoxHeight ? dSvgBoxHeight - ySvg - bottom * scale : 250 + ySvg }` ); @@ -227,13 +291,19 @@ const SvgBox = props => { let ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight) * scale; if (Number(svgType) === 4) { ySvg = ySvg + boxHeight; - } else if (Number(svgType) === 7) { - ySvg = ySvg + boxWidth / 2 + dZSCW; } ySvg = ySvg + 50 * scale; + let xSvg = 0; + if (Number(svgType === 7)) { + xSvg = scaledWidth + dZXCW * scale; + } else { + xSvg = zbtb?.value; + } + console.log(xSvg,viewBoxWidth / 2,viewBoxWidth,'viewBoxWidth / 2'); + svg.setAttribute( "viewBox", - `${-(dSvgBoxWidth ? zbtb?.value : viewBoxWidth / 2)} ${dSvgBoxWidth ? -0 : -ySvg} ${dSvgBoxWidth ? dSvgBoxWidth : 500} ${ + `${-(dSvgBoxWidth ? xSvg : viewBoxWidth / 2)} ${dSvgBoxWidth ? -0 : -ySvg} ${dSvgBoxWidth ? dSvgBoxWidth : 500} ${ dSvgBoxHeight ? dSvgBoxHeight : 250 }` ); @@ -328,7 +398,7 @@ const SvgBox = props => { } else { leftSize = zbtb?.value; } - svg.setAttribute("viewBox", `${-((leftSize) * scale || 0)} ${-ySvg} ${dSvgBoxWidth} ${dSvgBoxHeight}`); + svg.setAttribute("viewBox", `${-(leftSize * scale || 0)} ${-ySvg} ${dSvgBoxWidth} ${dSvgBoxHeight}`); svg.setAttribute("width", `${dSvgBoxWidth}px`); svg.setAttribute("height", `${dSvgBoxHeight}px`); svgContainerRef.current.style.width = `${dSvgBoxWidth}px`; @@ -1058,7 +1128,7 @@ const SvgBox = props => { }); // svg.appendChild(g); let pathList = []; - // 左上部件 + // 左上部件 pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0)); if ((zsbj?.type === "3001" && zsbj?.value) || (zsbj?.type === "3006" && zsbj?.value) || (zsbj?.type === "3007" && zsbj?.value)) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); @@ -1079,34 +1149,38 @@ const SvgBox = props => { } else if (zsbj?.type && dZSCW) { pathList.push(createText(scaledWidth / 2, -(dZSCW / 2 - 5), 10 * scales, dZSCW)); } - // 右下部件 - pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW, 0, scaledDeep)); - if ((yxbj?.type === "7001" && yxbj?.value) || (yxbj?.type === "7006" && yxbj?.value) || (yxbj?.type === "7007" && yxbj?.value)) { - pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); - pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); - pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + scaledHeight + dYXCW / 2 - 4, 10 * scales, dYXCW)); - } else if (yxbj?.type === "7004" && yxbj?.value) { - pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); - pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 - 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); - pathList.push( - createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales) - ); - pathList.push( - createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W") - ); - pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dYXCW / 2 - 4, 10 * scales, dYXCW)); - } else if (yxbj?.type === "7005" && yxbj?.value) { - pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); - pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); - pathList.push( - createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales) - ); - pathList.push( - createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scale, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scale, "W") - ); - } else if (dYXCW && yxbj?.type) { - pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + dYXCW / 2 - 4, 10 * scales, dYXCW)); - } + // 右下部件 + pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW * scale, 0, scaledHeight)); + // if ((yxbj?.type === "7001" && yxbj?.value) || (yxbj?.type === "7006" && yxbj?.value) || (yxbj?.type === "7007" && yxbj?.value)) { + // pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); + // pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); + // pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + scaledHeight + dYXCW / 2 - 4, 10 * scales, dYXCW)); + // } else if (yxbj?.type === "7004" && yxbj?.value) { + // pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); + // pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 - 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); + // pathList.push( + // createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales) + // ); + // pathList.push( + // createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W") + // ); + // pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dYXCW / 2 - 4, 10 * scales, dYXCW)); + // } else if (yxbj?.type === "7005" && yxbj?.value) { + // pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); + // pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); + // pathList.push( + // createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales) + // ); + // pathList.push( + // createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scale, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scale, "W") + // ); + // } else if (dYXCW && yxbj?.type) { + // pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + dYXCW / 2 - 4, 10 * scales, dYXCW)); + // } + // 右边 + pathList.push(createFull(ysbj?.type, scaledWidth, scaledHeight, dYSCW * scale, scaledWidth, 0)); + pathList.push(createFull(zxbj?.type, scaledWidth, -scaledHeight, -dZXCW * scale, 0, 0)); + pathList.forEach(x => { g.appendChild(x); }); @@ -1281,7 +1355,7 @@ const SvgBox = props => { } top = addValue > sfhs?.value ? addValue : sfhs?.value; } else { - top = addValue?addValue:0 > sfhs?.value ? max : sfhs?.value; + top = sfhs?.value ? max : sfhs?.value; } } else if (zscw?.type) { const max = dZSCW; diff --git a/src/components/Common/Typesetting/typesetting.js b/src/components/Common/Typesetting/typesetting.js index 224bfa5..f5604ac 100644 --- a/src/components/Common/Typesetting/typesetting.js +++ b/src/components/Common/Typesetting/typesetting.js @@ -37,7 +37,10 @@ const Typesetting = props => { sColumnNameConfig, bAdvancedSetting, // 高级设置 sSvgPath, + dL = 0, + dW = 0 } = slaveRowData; + console.log("🚀 ~ slaveRowData:", slaveRowData) const { masterData, selectedNode, slaveData } = state; if (!masterData) return; @@ -89,9 +92,9 @@ const Typesetting = props => { // dHorizontal = 1; // 如果需要自定义排版数 // 确认是竖向排列还是横向排列 - - const L = Number(masterData?.dLength) || 0; - const W = masterData?.dWidth || 0; + const isKapai = slaveRowData.sName === '卡牌' + const L = isKapai? Number(dL) : Number(masterData?.dLength) || 0; + const W = isKapai? Number(dW) : masterData?.dWidth || 0; const H = masterData?.dWidth || 0; const D = masterData?.dHeight || 0; // 动态计算公式值 diff --git a/src/components/QuickQuote/index.jsx b/src/components/QuickQuote/index.jsx index ff96b89..6d3c332 100644 --- a/src/components/QuickQuote/index.jsx +++ b/src/components/QuickQuote/index.jsx @@ -1613,15 +1613,14 @@ const BoxComponent = props => { ) { return false; } - if (item.sName === 'iRateType') { - console.log(item,'iRateType'); - + if (item.sName === "iRateType") { + console.log(item, "iRateType"); } if (Number(selectedNode.iRateType) === 0 && item.sName === "iPage") { return false; } else { if (item.sName === "iPage") { - const rateList = JSON.parse(slaveConfig.gdsconfigformslave.find(x=>x.sName === "iRateType")?.showDropDown) || [] + const rateList = JSON.parse(slaveConfig.gdsconfigformslave.find(x => x.sName === "iRateType")?.showDropDown) || []; item.showName = rateList[Number(selectedNode.iRateType)] || "倍率"; } } @@ -2074,14 +2073,15 @@ const BoxComponent = props => { const { sStripType = 0 } = selectedNode; if ( (slaveRowData.sColumnNameConfig && masterData.dLength && masterData.dWidth && masterData.dHeight) || - (Number(sStripType) === 1 && slaveRowData.sColumnNameConfig && masterData.dLength && masterData.dWidth) + (Number(sStripType) === 1 && slaveRowData.sColumnNameConfig && masterData.dLength && masterData.dWidth) || + slaveRowData.sName ==='卡牌' ) { const slaveNewData = slaveRowData.upAbleConfigsExtra || JSON.parse(slaveRowData.sColumnNameConfig); const tables = [ { name: "盒型类别", value: slaveRowData.sBoxType, type: null }, { name: "盒身", value: slaveRowData.sBoxBody, type: slaveRowData.sTypes }, - { name: "盒长", value: masterData.dLength ? Number(masterData.dLength) : 0, type: null }, - { name: "盒宽", value: masterData.dWidth ? Number(masterData.dWidth) : 0, type: null }, + { name: "盒长", value:slaveRowData.dL ? slaveRowData.dL : masterData.dLength ? Number(masterData.dLength) : 0, type: null }, + { name: "盒宽", value: slaveRowData.dW ? slaveRowData.dW :masterData.dWidth ? Number(masterData.dWidth) : 0, type: null }, { name: "盒高", value: masterData.dHeight ? Number(masterData.dHeight) : 0, type: null }, ]; const titleList1 = [ @@ -2115,7 +2115,7 @@ const BoxComponent = props => { }; // 确认是竖向排列还是横向排列 - const L = masterData?.dLength || 0; + const L = masterData?.dLength || 0; const W = masterData?.dWidth || 0; const H = masterData?.dWidth || 0; const D = masterData?.dHeight || 0; @@ -2171,12 +2171,14 @@ const BoxComponent = props => { dSvgBoxHeight: 200, showNew: 1, }; + console.log(boxList,'boxList'); + // upViewProps.viewRow = const isShowImg = boxList.find(x => x.sName === "盒身")?.type !== "" || false; const PrintingParameters = props.getI18nName("PrintingParameters", "印刷参数"); - const BoxInformation = commonFunc.showLocalMessage(props, "Box-typeInformation", "拼版信息"); + const BoxInformation = commonFunc.showLocalMessage(props, "Box-typeInformation", "盒型信息"); const ImpositionInformation = commonFunc.showLocalMessage(props, "ImpositionInformation", "拼版信息"); const noImage = commonFunc.showLocalMessage(props, "ImpositionInformation", "暂无图片"); @@ -2185,10 +2187,13 @@ const BoxComponent = props => { { src: slaveRowData.sPackDetailPathUpLoad, alt: "展开图" }, { src: slaveRowData.sPackPath, alt: "立体图" }, ]; + console.log(state,'activeKey'); + const {activeKey = 0} = state return ( { return { @@ -2234,6 +2239,7 @@ const BoxComponent = props => { props.setState(pre => ({ ...pre, slaveData: [...slaveData], + activeKey:1 })); }} value={radioValue} @@ -2374,12 +2380,15 @@ const BoxComponent = props => { })} onChange={activeKey => { // 切换事件的处理逻辑 - const index = slaveData?.findIndex(x => x.sTreeNodeName === selectedNode.showName && x.sBoxModel === boxModel); - if (index !== -1) { - slaveData[index].dMaxLength = Number(selectedNode.sMachineStyle.split("*")[0]); - slaveData[index].dMaxWidth = Number(selectedNode.sMachineStyle.split("*")[1]); - } + // const index = slaveData?.findIndex(x => x.sTreeNodeName === selectedNode.showName && x.sBoxModel === boxModel); + // if (index !== -1) { + // slaveData[index].dMaxLength = Number(selectedNode.sMachineStyle.split("*")[0]); + // slaveData[index].dMaxWidth = Number(selectedNode.sMachineStyle.split("*")[1]); + // } // 可以在这里执行其他操作，比如根据 activeKey 加载数据 + props.setState(pre => { + return { ...pre, activeKey }; + }); }} /> ); -- libgit2 0.22.2