盒型设计

陈鑫涛
1 parent ccba4bb7
Showing 2 changed files with 54 additions and 11 deletions
src/components/Common/BoxDesignCompontent/index.js
src/components/Common/BoxDesignCompontent/svg.js
@@ -311,6 +311,17 @@ const BoxDesignCompontent = baseProps =&gt; {
         setTopBoxList(box.filter(topBoxFilter));
         setLeftBoxList(box.filter(leftBoxFilter));
         setRightBoxList(box.filter(rightBoxFilter));
+      } else if (type === "8" || type === 8) {
+        const box = [...boxList];
+        box.forEach(x => {
+          x.show = true;
+        });
+        const topBoxFilter = item => item.sName === "左上插位组件" || item.sName === "上插位组件" || item.sName === "右上插位组件";
+        const leftBoxFilter = item => item.sName === "左偏移" || item.sName === "左插位组件" || item.sName === "左下插位组件";
+        const rightBoxFilter = item => item.sName === "右偏移" || item.sName === "右插位组件" || item.sName === "右下插位组件";
+        setTopDoubleBoxList(box.filter(topBoxFilter));
+        setLeftDoubleBoxList(box.filter(leftBoxFilter));
+        setRightDoubleBoxList(box.filter(rightBoxFilter));
       } else {
         const box = [...boxList];
         box.forEach(x => {
@@ -350,6 +361,7 @@ const BoxDesignCompontent = baseProps =&gt; {
     } else {
     }
   }, [boxType]);
+
   const handleFocus = (e, index) => {
     if (boxList && boxList.length) {
       const updatedBoxList = [...boxList];
@@ -367,6 +379,7 @@ const BoxDesignCompontent = baseProps =&gt; {
   };
   const handleChange = (e, index) => {
+    console.log(e.target.value, index, "handleChange");
     const updatedBoxList = [...boxList];
     updatedBoxList[index].value = e.target.value;
     setBoxList(updatedBoxList);
@@ -409,7 +422,6 @@ const BoxDesignCompontent = baseProps =&gt; {
     const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&scale=0.1&sModelsId=100&token=${props.token}`;
     return imageUrl;
   };
-  console.log(boxList, "boxList");
   // 下来框
   const renderOptionWithImage = option => {
@@ -817,10 +829,6 @@ const BoxDesignCompontent = baseProps =&gt; {
     return i || 0;
   };
-  // 单独处理双层盒型
-  if (boxType === "8") {
-    console.log(newBoxList, boxList, "topBoxList");
-  }
   return (
     <AntdDraggableModal
       width="1000px"
@@ -50,8 +50,8 @@ import {
   createBoxComponentNewFul5,
   createBoxComponentNewFul6,
 } from "../BoxDesign/createAirplaneBox";
-import { log } from "lodash-decorators/utils";
 const SvgBox = props => {
+  console.log("🚀 ~ SvgBox:", props);
   const svgContainerRef = useRef(null);
   const svgRef = useRef(null);
   const [boxKey, setBoxKey] = useState(new Date().getTime());
@@ -90,6 +90,17 @@ const SvgBox = props =&gt; {
     setWidth(boxLength);
     setHeight(boxWidth);
     setDeep(boxHeight);
+    let headLength = 0;
+    let headWidth = 0;
+    let orderLength = 0;
+    let orderWidth = 0;
+    if (svgTypes === "8") {
+      headLength = Number(boxList.find(x => x.sName === "首盒长")?.value) || 0;
+      headWidth = Number(boxList.find(x => x.sName === "首盒宽")?.value) || 0;
+      orderLength = Number(boxList.find(x => x.sName === "次盒长")?.value) || 0;
+      orderWidth = Number(boxList.find(x => x.sName === "次盒宽")?.value) || 0;
+    }
+    console.log(headLength, headWidth, orderLength, orderWidth, props.showNew, "orderWidth");
     // 计算视口宽度和高度
     const zbtb = boxList.find(x => x.sName === "左贴边位");
@@ -194,9 +205,8 @@ const SvgBox = props =&gt; {
     } else if (Number(svgType) === 6) {
       viewBoxWidth = boxWidth + 2;
       viewBoxHeight = boxLength + 2;
-
     } else if (Number(svgType) === 7) {
-      boxHeight = boxWidth
+      boxHeight = boxWidth;
       const zxcw = boxList.find(x => x.sName === "左(下)插位组件");
       const zscw = boxList.find(x => x.sName === "左(上)插位组件");
       const yscw = boxList.find(x => x.sName === "右(上)插位组件");
@@ -250,10 +260,13 @@ const SvgBox = props =&gt; {
         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;
+    } else if (Number(svgType) === 8) {
+      
+      viewBoxWidth = Number(headLength);
+      viewBoxHeight = Number(headWidth) + Number(orderWidth);
     }
     // 计算缩放比例
     let scale = 1;
@@ -299,8 +312,8 @@ const SvgBox = props =&gt; {
         } else {
           xSvg = zbtb?.value;
         }
-        console.log(xSvg,viewBoxWidth / 2,viewBoxWidth,'viewBoxWidth / 2');
-        
+        console.log(xSvg, viewBoxWidth / 2, viewBoxWidth, "viewBoxWidth / 2");
+
         svg.setAttribute(
           "viewBox",
           `${-(dSvgBoxWidth ? xSvg : viewBoxWidth / 2)} ${dSvgBoxWidth ? -0 : -ySvg} ${dSvgBoxWidth ? dSvgBoxWidth : 500} ${
@@ -1185,6 +1198,28 @@ const SvgBox = props =&gt; {
         g.appendChild(x);
       });
       svg.appendChild(g);
+    } else if (Number(svgType) === 8) {
+      const scaleHeadLength = headLength * scale
+      const scaleHeadWidth = headWidth * scale
+      const scaleOrderLength = orderLength * scale
+      const scaleOrderWidth = orderWidth * scale
+      // 获取他的偏移距离
+      const leftOffect = boxList.find(x=>x.sName === "左偏移")?.value || 0
+      const rightOffect = boxList.find(x=>x.sName === "右偏移")?.value || 0
+      console.log("🚀 ~ initSVG ~ rightOffect:", leftOffect,rightOffect)
+      const rectangles = [{ x: 0, y: 0, width: scaleHeadLength, height: scaleHeadWidth }];
+      rectangles.forEach(rect => {
+        g.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height));
+      });
+      const rectanglesLeft = [{ x: scaleHeadLength / 2 - scaleOrderLength - Number(leftOffect), y: scaleHeadWidth, width: scaleOrderLength, height: scaleOrderWidth }];
+      rectanglesLeft.forEach(rect => {
+        g.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height));
+      });
+      const rectanglesRight = [{ x: scaleHeadLength / 2 + Number(rightOffect), y: scaleHeadWidth, width: scaleOrderLength, height: scaleOrderWidth }];
+      rectanglesRight.forEach(rect => {
+        g.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height));
+      });
+      svg.appendChild(g);
     }
   };
   // 计算头部偏移