卡牌类型默认矩形

陈鑫涛
1 parent c5278118
Showing 6 changed files with 132 additions and 145334 deletions
src/components/Common/BoxDesign/createAirplaneBox.js
src/components/Common/BoxDesignCompontent/svg.js
src/components/Common/Typesetting/typesetting.js
src/components/QuickQuote/i.json
src/components/QuickQuote/index.jsx
src/components/QuickQuote/kapai.json
@@ -93,7 +93,16 @@ export const createPathElement = (x, y, width, height, id, wrapperId) =&gt; {
   svg.setAttribute("stroke-dasharray", "4"); // 添加虚线效果
   return svg;
 };
-
+export const createPathElements = (x, y, width, height, id, wrapperId) => {
+  const d = `M ${x} ${y} L ${x} ${y + height} L ${x + width} ${y + height} L ${x + width} ${y} L ${x} ${y} Z`;
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  svg.setAttribute("d", d);
+  svg.setAttribute("fill", "transparent");
+  svg.setAttribute("stroke", "#7588B9");
+  svg.setAttribute("stroke-width", "1");
+  // svg.setAttribute("stroke-dasharray", "4"); // 添加虚线效果
+  return svg;
+};
 //
 // 左边斜线贴边
 export const createTrapezoid = (height, offsetX, offsetY, size) => {
@@ -13,6 +13,7 @@ import {
   createTrapezoidWeltTop,
   createFoldWeltTop,
   createFoldWeltTopLine,
+  createPathElements,
   createRoundedCornersWeltTop,
   createRightAngleBoxBottomComponent,
   createBoxBottomComponent1,
@@ -57,17 +58,14 @@ const SvgBox = props =&gt; {
   const [deep, setDeep] = useState(0);
   const [svgType, setSvgType] = useState(1);
   // 盒身
-  useEffect(
-    () => {
-      setTimeout(() => {
-        const svg = svgRef.current;
-        if (svg) {
-          initSVG();
-        }
-      }, 0);
-    },
-    [boxList, svgType]
-  );
+  useEffect(() => {
+    setTimeout(() => {
+      const svg = svgRef.current;
+      if (svg) {
+        initSVG();
+      }
+    }, 0);
+  }, [boxList, svgType]);
   // 初始化svg
   const initSVG = () => {
@@ -189,6 +187,9 @@ const SvgBox = props =&gt; {
     } else if (Number(svgType) === 5) {
       viewBoxWidth = (boxHeight + boxWidth) * 2 + dYTBW + dZTBW;
       viewBoxHeight = boxLength + max;
+    } else if (Number(svgType) === 6) {
+      viewBoxWidth = boxLength + 2;
+      viewBoxHeight = boxWidth + 2;
     }
     // 计算缩放比例
     let scale = 1;
@@ -263,10 +264,12 @@ const SvgBox = props =&gt; {
           topSize = Number(zscwValue) + boxHeight * 3;
         }
         ySvg = topSize;
+      } else if (Number(svgType) === 6) {
+        leftSize = 0;
       } else {
         leftSize = zbtb?.value;
       }
-      svg.setAttribute("viewBox", `${-(leftSize * scale)||0} ${-ySvg} ${viewBoxWidth} ${viewBoxHeight}`);
+      svg.setAttribute("viewBox", `${-(leftSize * scale) || 0} ${-ySvg} ${viewBoxWidth} ${viewBoxHeight}`);
       svg.setAttribute("width", `${viewBoxWidth}px`);
       svg.setAttribute("height", `${viewBoxHeight}px`);
       svgContainerRef.current.style.width = `${viewBoxWidth}px`;
@@ -276,7 +279,7 @@ const SvgBox = props =&gt; {
       svgContainerRef.current.style.transform = `scale(${scaleX >= 1 ? 1 : scaleX}, ${scaleY >= 1 ? 1 : scaleY})`;
       svgContainerRef.current.style.transformOrigin = "top left";
       svgContainerRef.current.style.paddingTop = dSvgBoxWidth ? "0" : "25px";
-      svgContainerRef.current.style.backgroundColor = props.isMobile ? '#EDF4FF' : ''
+      svgContainerRef.current.style.backgroundColor = props.isMobile ? "#EDF4FF" : "";
     } else if (props.showNew === 2) {
       // g.setAttribute("transform", `rotate(${iFAngle, dSvgBoxWidth/2,dSvgBoxHeight*2})`);
       let ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight) * scale;
@@ -308,10 +311,12 @@ const SvgBox = props =&gt; {
           topSize = Number(zscwValue) + boxHeight * 3;
         }
         ySvg = topSize;
+      } else if (Number(svgType) === 6) {
+        leftSize = 0;
       } 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`;
@@ -784,7 +789,7 @@ const SvgBox = props =&gt; {
       }
       // 左边部件
       pathList.push(createFull(zxbj?.type, scaledHeight, -scaledDeep, -dZXCW, -scaledDeep, 0));
-      if ((zxbj?.type === "4001" && dZXCW) || (zxbj?.type === "4006" && dZXCW)|| (zxbj?.type === "4007" && dZXCW)) {
+      if ((zxbj?.type === "4001" && dZXCW) || (zxbj?.type === "4006" && dZXCW) || (zxbj?.type === "4007" && dZXCW)) {
         pathList.push(createHorizontalDoubleArrow(scaledDeep, -scaledDeep - scaledDeep / 2, scaledHeight * 0.8, scales));
         pathList.push(createText(-scaledDeep - scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D"));
         pathList.push(createText(-scaledDeep - scaledDeep - dZXCW / 2, scaledHeight * 0.5, 10 * scales, dZXCW));
@@ -925,7 +930,7 @@ const SvgBox = props =&gt; {
         pathList.push(createText(scaledHeight * 0.1 + 10 * scales, -scaledDeep / 2, 10 * scales, "D"));
         pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.8, -(scaledDeep + scaledDeep / 2), scales));
         pathList.push(createText(scaledHeight * 0.8 + 10 * scales, -(scaledDeep + scaledHeight / 2), 10 * scales, "D"));
-      }else if (zsbj?.type  && dZSCW) {
+      } else if (zsbj?.type && dZSCW) {
         pathList.push(createText(scaledHeight / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW));
       }
       // 右上部件
@@ -949,7 +954,7 @@ const SvgBox = props =&gt; {
         pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.1 + 10 * scales, -scaledDeep / 2, 10 * scales, "D"));
         pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.8, -(scaledDeep + scaledDeep / 2), scales));
         pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.8 + 10 * scales, -(scaledDeep + scaledDeep / 2), 10 * scales, "D"));
-      }else if (ysbj?.type  && dYSCW) {
+      } else if (ysbj?.type && dYSCW) {
         pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW));
       }
       // 左下部件-
@@ -975,7 +980,7 @@ const SvgBox = props =&gt; {
           pathList.push(createText(scaledHeight * 0.1 + 10 * scales, scaledWidth + scaledDeep / 2, 10 * scales, "D"));
           pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.8, scaledWidth + (scaledDeep + scaledDeep / 2), scales));
           pathList.push(createText(scaledHeight * 0.8 + 10 * scales, scaledWidth + (scaledDeep + scaledDeep / 2), 10 * scales, "D"));
-        }else if (zxbj?.type  && dZXCW) {
+        } else if (zxbj?.type && dZXCW) {
           pathList.push(createText(scaledHeight / 2, scaledWidth + dZXCW / 2 - 4, 10 * scales, dZXCW));
         }
       }
@@ -1027,6 +1032,12 @@ const SvgBox = props =&gt; {
       });
       svg.appendChild(g);
       // g.setAttribute('transform', `rotate(90, ${viewBoxWidth/2}, ${viewBoxHeight/2})`);
+    } else if (Number(svgType) === 6) {
+      const rectangles = [{ x: 0, y: 0, width: scaledWidth, height: scaledHeight }];
+      rectangles.forEach(rect => {
+        g.appendChild(createPathElements(rect.x, rect.y, rect.width, rect.height));
+      });
+      svg.appendChild(g);
     }
   };
   // 计算头部偏移
@@ -1044,6 +1055,7 @@ const SvgBox = props =&gt; {
     const five = ["6005", "3005", "4005", "7005"];
     const dYSCW = Number(yscw?.value) || 0;
     const dZSCW = Number(zscw?.value) || 0;
+    if (Number(svgType) === 6) return 0;
     // 如果存在插位就不计算盒舌
     if (zscw?.type && yscw?.type) {
       const max = Math.max(dZSCW, dYSCW);
@@ -1075,8 +1087,10 @@ const SvgBox = props =&gt; {
       if (
         five.includes(zscw?.type) ||
         five.includes(yscw?.type) ||
-        (four.includes(zscw?.type) || four.includes(yscw?.type)) ||
-        (one.includes(zscw?.type) || one.includes(yscw?.type))
+        four.includes(zscw?.type) ||
+        four.includes(yscw?.type) ||
+        one.includes(zscw?.type) ||
+        one.includes(yscw?.type)
       ) {
         const coefficient = svgType === "5" ? height : width;
         let addValue = 0;
@@ -1096,8 +1110,10 @@ const SvgBox = props =&gt; {
       if (
         five.includes(zscw?.type) ||
         five.includes(yscw?.type) ||
-        (four.includes(zscw?.type) || four.includes(yscw?.type)) ||
-        (one.includes(zscw?.type) || one.includes(yscw?.type))
+        four.includes(zscw?.type) ||
+        four.includes(yscw?.type) ||
+        one.includes(zscw?.type) ||
+        one.includes(yscw?.type)
       ) {
         const coefficient = svgType === "5" ? height : width;
         let addValue = 0;
@@ -1138,6 +1154,7 @@ const SvgBox = props =&gt; {
     const five = ["6005", "3005", "4005", "7005"];
     const dYSCW = Number(yscw?.value) || 0;
     const dZSCW = Number(zscw?.value) || 0;
+    if (Number(svgType) === 6) return 0;
     if (hdzj?.type) {
       return Number(hdzj?.value);
     }
@@ -1171,8 +1188,10 @@ const SvgBox = props =&gt; {
       if (
         five.includes(zscw?.type) ||
         five.includes(yscw?.type) ||
-        (four.includes(zscw?.type) || four.includes(yscw?.type)) ||
-        (one.includes(zscw?.type) || one.includes(yscw?.type))
+        four.includes(zscw?.type) ||
+        four.includes(yscw?.type) ||
+        one.includes(zscw?.type) ||
+        one.includes(yscw?.type)
       ) {
         const coefficient = svgType === "5" ? height : width;
         let addValue = 0;
@@ -1192,8 +1211,10 @@ const SvgBox = props =&gt; {
       if (
         five.includes(zscw?.type) ||
         five.includes(yscw?.type) ||
-        (four.includes(zscw?.type) || four.includes(yscw?.type)) ||
-        (one.includes(zscw?.type) || one.includes(yscw?.type))
+        four.includes(zscw?.type) ||
+        four.includes(yscw?.type) ||
+        one.includes(zscw?.type) ||
+        one.includes(yscw?.type)
       ) {
         const coefficient = svgType === "5" ? height : width;
         let addValue = 0;
 /* eslint-disable */
 import React, { useEffect, useState, useRef } from "react";
-import { Modal } from "antd-v4";
+import { Modal, message } from "antd-v4";
 import { VerticalRightOutlined, VerticalLeftOutlined, LeftOutlined, RightOutlined, UpOutlined, DownOutlined } from "@ant-design/icons";
 import * as commonUtils from "@/utils/utils"; /* 通用方法 */
 import commonConfig from "@/utils/config";
@@ -606,7 +606,9 @@ const Typesetting = props =&gt; {
     Number(slaveDataDetail?.dMaxWidth) >= Number(slaveRowData?.dMachineWidth);
   const isShow = slaveRowData && slaveRowData.dMachineLength && slaveRowData.dMaxWidth && slaveRowData.dMaxLength && isMax && innerDivs.length;
-
+  if (isCustomized && !isShow) {
+    message.error("排版尺寸大于上机尺寸，请确认参数！");
+  }
   const onClick = () => {
     if (isMobile) return;
     setIsModalOpen(true);