矩形

陈鑫涛
1 parent 4b8b038e
Showing 5 changed files with 143 additions and 57 deletions
src/components/Common/BoxDesign/createAirplaneBox.js
src/components/Common/BoxDesignCompontent/index.js
src/components/Common/BoxDesignCompontent/svg.js
src/components/Common/Typesetting/typesetting.js
src/components/QuickQuote/index.jsx
@@ -201,7 +201,7 @@ export const createText = (offsetX, offsetY, size, textContent) =&gt; {
   text.setAttribute("dominant-baseline", "middle"); // 文字垂直居中
   text.setAttribute("fill", "#333"); // 文字颜色
   text.setAttribute("font-size", size); // 文字大小
-  text.textContent = textContent || "Text"; // 默认文字内容
+  text.textContent = textContent || ""; // 默认文字内容
   return text;
 };
 // 竖向双箭头
@@ -261,7 +261,7 @@ const BoxDesignCompontent = baseProps =&gt; {
         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));
@@ -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 =&gt; {
     // 获取盒长、盒宽、盒高
     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 =&gt; {
     } 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 =&gt; {
           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 =&gt; {
         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 =&gt; {
       } 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 =&gt; {
       });
       // 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 =&gt; {
       } 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 =&gt; {
         }
         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;
@@ -37,7 +37,10 @@ const Typesetting = props =&gt; {
     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 =&gt; {
   // 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;
   // 动态计算公式值
@@ -1613,15 +1613,14 @@ const BoxComponent = props =&gt; {
         ) {
           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 =&gt; {
   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 =&gt; {
     };
  
     // 确认是竖向排列还是横向排列
-    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 =&gt; {
     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 =&gt; {
     { src: slaveRowData.sPackDetailPathUpLoad, alt: "展开图" },
     { src: slaveRowData.sPackPath, alt: "立体图" },
   ];
+  console.log(state,'activeKey');
+  const {activeKey = 0} = state
   return (
     <Tabs
       key={boxModel}
       type="card"
+      activeKey={activeKey}
       className={`noXlyTabs ${styles.tabs} ${!bBox ? styles.hideTab : ""}`}
       items={[BoxInformation, ImpositionInformation].map((title, index) => {
         return {
@@ -2234,6 +2239,7 @@ const BoxComponent = props =&gt; {
                     props.setState(pre => ({
                       ...pre,
                       slaveData: [...slaveData],
+                      activeKey:1
                     }));
                   }}
                   value={radioValue}
@@ -2374,12 +2380,15 @@ const BoxComponent = props =&gt; {
       })}
       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 };
+        });
       }}
     />
   );