双部件

陈鑫涛
1 parent 8daf27c8
Showing 4 changed files with 671 additions and 167 deletions
src/components/Common/BoxDesignCompontent/index.css
src/components/Common/BoxDesignCompontent/index.js
src/components/Common/BoxDesignCompontent/index.less
src/components/Common/BoxDesignCompontent/svg.js
@@ -22,7 +22,7 @@
 }
 .boxBody .boxLeft {
   width: 180px;
-  height: 320px;
+  min-height: 320px;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
@@ -34,7 +34,7 @@
 }
 .boxBody .boxRight {
   width: 180px;
-  height: 320px;
+  min-height: 320px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -54,8 +54,8 @@
 }
 .boxBody .boxBottom .svgBox {
   width: 100%;
-  height: 250px;
-  background-color: #9AFF9A;
+  min-height: 250px;
+  background-color: #9aff9a;
 }
 .boxBody .boxBottom .content {
   width: 100%;
@@ -78,8 +78,9 @@
   line-height: 20px;
   text-align: center;
 }
-.boxBody :global .mySelects .ant-select-selector {
-  background-color: #99CCFF !important;
+.boxBody :global .mySelects .ant-select-selector,
+.boxBody :global .mySelectsDouble .ant-select-selector {
+  background-color: #99ccff !important;
   /* 选择框背景色 */
   height: 40px !important;
   /* 选择框高度 */
@@ -88,6 +89,11 @@
   color: transparent !important;
   /* 选择框文字颜色 */
 }
+.boxBody :global .mySelectsDouble .ant-select-selection-item {
+  color: #333 !important;
+  /* 选择框文字颜色 */
+  line-height: 40px !important;
+}
 .boxBody .mySelects {
   position: relative;
 }
@@ -96,17 +102,20 @@
   align-items: center;
   justify-content: space-between;
   width: 180px;
-  height: 40px;
+  min-height: 40px;
   position: relative;
 }
 .boxBody .boxInput :global .ant-input {
-  background-color: #99CCFF !important;
+  background-color: #99ccff !important;
   /* 输入框背景色 */
   border: 1px solid #d9d9d9;
   height: 40px;
 }
+.boxBody .boxInput :global .ant-input::placeholder {
+  color: #fff !important;
+}
 .boxBody .text {
-  background-color: #99CCFF;
+  background-color: #99ccff;
   width: 100%;
   height: 40px;
   line-height: 40px;
@@ -115,18 +124,18 @@
   margin-right: 1px;
 }
 .boxBody .content :global .ant-input {
-  background-color: #EEEEEE !important;
+  background-color: #eeeeee !important;
   /* 输入框背景色 */
   height: 40px;
 }
 .boxBody .content :global .ant-select-selector {
-  background-color: #EEEEEE !important;
+  background-color: #eeeeee !important;
   /* 选择框背景色 */
   height: 40px !important;
   /* 选择框高度 */
 }
 .boxBody .content .text {
-  background-color: #EEEEEE;
+  background-color: #eeeeee;
   margin: 0;
 }
 .boxBody .content .boxFlex {
@@ -148,7 +157,7 @@
   flex: 1;
 }
 .boxBody .content .boxFlexs .boxInputs :global .ant-input {
-  background-color: #EEEEEE !important;
+  background-color: #eeeeee !important;
   /* 输入框背景色 */
   height: 40px;
 }
@@ -162,7 +171,7 @@
   top: 3px;
   width: 60px;
   height: 30px;
-  background-color: #EEE;
+  background-color: #eee;
   color: #333;
   line-height: 40px;
   z-index: 2;
@@ -23,6 +23,26 @@ const BoxDesignEvent = props =&gt; {
   addState.getSqlOptions = async type => {
     setLoading(true);
+    if (!type) {
+      setLoading(false);
+      setOptions([
+        {
+          sId: "0",
+          sCode: "0",
+          sName: "矩形",
+          sMakeUpPath: "",
+          sTypes: "0",
+        },
+        {
+          sId: "1",
+          sCode: "1",
+          sName: "梯形",
+          sMakeUpPath: "",
+          sTypes: "1",
+        },
+      ]);
+      return;
+    }
     const { app, token, makeConfig } = props;
     // const quickQuoteConfig = config.gdsconfigformslave.find(item => item.sControlName === "BtnQuickQuote") || {};
     const { sId } = makeConfig;
@@ -48,6 +68,8 @@ const BoxDesignEvent = props =&gt; {
         }
         return 0; // 其他元素保持原顺序
       });
+      console.log(data.data.dataset.rows, "data.data.dataset.rows");
+
       setOptions(data.data.dataset.rows);
     }
     setLoading(false);
@@ -89,6 +111,8 @@ const BoxDesignCompontent = baseProps =&gt; {
   const [boxKey, setBoxKey] = useState(new Date().getTime());
   const [doubleLayerList, setDoubleLayerList] = useState([]);
   if (!boxVisible) return "";
+  console.log(baseProps, "baseProps");
+
   // 1️⃣ 只负责 tableColum
   useEffect(() => {
     if (!tableData?.length) return;
@@ -230,6 +254,18 @@ const BoxDesignCompontent = baseProps =&gt; {
       show: true,
       showName: item, // 参数名称
       sAssignFormula: null,
+      sLength: null,
+      sWidth: null,
+      sType: null, // 盒型类别
+      sTypeName: null, // 盒型名称
+      sOffset: null, // 偏移
+      sQuantity: null, // 数量
+      cLength: null,
+      cWidth: null,
+      cType: null, // 盒型类别
+      cTypeName: null, // 盒型名称
+      cOffset: null, // 偏移
+      cQuantity: null, // 数量
     });
   });
   // 部件信息
@@ -243,13 +279,27 @@ const BoxDesignCompontent = baseProps =&gt; {
         });
         if (i !== -1) {
           const x = newBoxList.findIndex(z => z.sName === titleList1[i].name);
-          newBoxList[x].value = item.iValue;
-          newBoxList[x].type = item.sTypes;
-          newBoxList[x].showName = item.sName;
-          newBoxList[x].selectImage = item.sMakeUpPath;
-          newBoxList[x].sName = titleList1[i].name;
-          newBoxList[x].sAssignFormula = item.sAssignFormula;
-          newBoxList[x].bVisible = item.bVisible;
+          Object.assign(newBoxList[x], {
+            value: item.iValue,
+            type: item.sTypes,
+            showName: item.sName,
+            selectImage: item.sMakeUpPath,
+            sName: titleList1[i].name,
+            sAssignFormula: item.sAssignFormula,
+            bVisible: item.bVisible,
+            sLength: item.sLength,
+            sWidth: item.sWidth,
+            sType: item.sType,
+            sTypeName: item.sTypeName,
+            sOffset: item.sOffset,
+            sQuantity: item.sQuantity,
+            cLength: item.cLength,
+            cWidth: item.cWidth,
+            cType: item.cType,
+            cTypeName: item.cTypeName,
+            cOffset: item.cOffset,
+            cQuantity: item.cQuantity,
+          });
         }
       });
     } else {
@@ -273,10 +323,10 @@ const BoxDesignCompontent = baseProps =&gt; {
   }
   // 盒身信息
   if (masterData) {
-    const headLength = slaveData.find(item => item.sCode === "dSHC")?.iValue
-    const headWidth = slaveData.find(item => item.sCode === "dSHK")?.iValue
-    const orderLength = slaveData.find(item => item.sCode === "dCHC")?.iValue
-    const orderWidth = slaveData.find(item => item.sCode === "dCHK")?.iValue
+    const headLength = slaveData.find(item => item.sCode === "dSHC")?.iValue;
+    const headWidth = slaveData.find(item => item.sCode === "dSHK")?.iValue;
+    const orderLength = slaveData.find(item => item.sCode === "dCHC")?.iValue;
+    const orderWidth = slaveData.find(item => item.sCode === "dCHK")?.iValue;
     newBoxList.forEach((item, index) => {
       if (item.sName === "盒身") {
         newBoxList[index].value = masterData.sBoxBody;
@@ -298,7 +348,7 @@ const BoxDesignCompontent = baseProps =&gt; {
         newBoxList[index].value = orderLength;
       } else if (item.sName === "次盒宽") {
         newBoxList[index].value = orderWidth;
-      } 
+      }
     });
   }
   // 有数据的时候 盒型设计需要赋值
@@ -422,9 +472,13 @@ const BoxDesignCompontent = baseProps =&gt; {
     }
   };
-  const handleChange = (e, index) => {
+  const handleChange = (e, index, field) => {
     const updatedBoxList = [...boxList];
-    updatedBoxList[index].value = e.target.value;
+    if (field) {
+      updatedBoxList[index][field] = e.target.value;
+    } else {
+      updatedBoxList[index].value = e.target.value;
+    }
     setBoxList(updatedBoxList);
   };
@@ -434,7 +488,7 @@ const BoxDesignCompontent = baseProps =&gt; {
     setBoxList(updatedBoxList);
   };
-  const handleSelect = (name, selectConfig, index, type) => {
+  const handleSelect = (name, selectConfig, index, type, doubleType) => {
     let updatedBoxList = [...boxList];
     updatedBoxList[index].type = name;
     updatedBoxList[index].selectImage = selectConfig.image;
@@ -460,6 +514,17 @@ const BoxDesignCompontent = baseProps =&gt; {
     }
     setBoxList(updatedBoxList);
   };
+  const handleSelects = (name, selectConfig, index, type, doubleType) => {
+    let updatedBoxList = [...boxList];
+    if (doubleType === 0) {
+      updatedBoxList[index].sTypeName = Number(name) === 0 ? "矩形" : "梯形";
+      updatedBoxList[index].sType = Number(name)
+    } else {
+      updatedBoxList[index].cTypeName = Number(name) === 0 ? "矩形" : "梯形";
+      updatedBoxList[index].cType = Number(name)
+    }
+    setBoxList(updatedBoxList);
+  };
   const getImage = fileName => {
     // const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&sModelsId=100&token=${props.token}`;
     const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&scale=0.1&sModelsId=100&token=${props.token}`;
@@ -477,10 +542,22 @@ const BoxDesignCompontent = baseProps =&gt; {
       </Select.Option>
     );
   };
-  const svgBoxProps = {
+  const renderOptionWithText = option => {
+    return (
+      <Select.Option key={option.sId} value={option.sCode} label={option.sName}>
+        <div style={{ display: "flex", alignItems: "center" }}>
+          <span>{option.sName}</span>
+        </div>
+      </Select.Option>
+    );
+  };
+  // const [svgBoxProps, setSvgBoxProps] = useState({ ...props, boxList, showNew: 0, dSvgBoxWidth: 500, dSvgBoxHeight: 250 });
+  let svgBoxProps = {
     ...props,
     boxList,
     showNew: 0,
+    // dSvgBoxWidth: 500,
+    // dSvgBoxHeight: 250,
   };
   const dobuleProps = {
     ...props,
@@ -513,6 +590,18 @@ const BoxDesignCompontent = baseProps =&gt; {
           bVisible: item.value ? true : false,
           sParentId: masterData.sId,
           sAssignFormula: item.sAssignFormula,
+          sLength: item.sLength,
+          sWidth: item.sWidth,
+          sType: item.sType,
+          sTypeName: item.sTypeName,
+          sOffset: item.sOffset,
+          sQuantity: item.sQuantity,
+          cLength: item.cLength,
+          cWidth: item.cWidth,
+          cType: item.cType,
+          cTypeName: item.cTypeName,
+          cOffset: item.cOffset,
+          cQuantity: item.cQuantity,
         };
         // if (item.value !== "") {
         newSlaveData.push(data);
@@ -534,7 +623,6 @@ const BoxDesignCompontent = baseProps =&gt; {
     let sWidthFormula = "";
     const boxType = boxList.find(item => item.sName === "盒身")?.type;
     if (boxType === "8") {
-     
     } else {
       const boxLength = Number(boxList.find(item => item.sName === "盒长")?.value);
       const boxWidth = Number(boxList.find(item => item.sName === "盒宽")?.value);
@@ -878,7 +966,27 @@ const BoxDesignCompontent = baseProps =&gt; {
     const i = boxList.findIndex(x => x.sName === name);
     return i || 0;
   };
-
+  const types = (leftBoxList || []).find(item => {
+    if (!item.type) return false;
+    return item.type.includes("09");
+  });
+  const typesRight = (rightBoxList || []).find(item => {
+    if (!item.type) return false;
+    return item.type.includes("09");
+  });
+  const typesTop = (topBoxList || []).find(item => {
+    if (!item.type) return false;
+    return item.type.includes("09");
+  });
+  if (types || typesRight) {
+    svgBoxProps = {
+      ...props,
+      boxList,
+      showNew: 0,
+      // dSvgBoxWidth: 500,
+      // dSvgBoxHeight: 400,
+    };
+  }
   return (
     <AntdDraggableModal
       width="1000px"
@@ -901,7 +1009,7 @@ const BoxDesignCompontent = baseProps =&gt; {
       {/* 盒身信息 */}
       <div className={styles.boxBody} key={boxKey}>
-        <div className={styles.boxTop}>
+        <div className={styles.boxTop} style={{ height: `${typesTop ? "200px" : "100px"}` }}>
           {boxType !== "8" &&
             topBoxList.map((topItem, index) => (
               <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>
@@ -930,25 +1038,146 @@ const BoxDesignCompontent = baseProps =&gt; {
                 >
                   {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
                 </Select>
-                <div className={styles.boxInput}>
-                  {/* <div className={styles.text}>参数：</div> */}
-                  <Input
-                    value={topItem?.showName}
-                    onChange={e => handleChangeName(e, index)}
-                    onFocus={e => handleFocus(e, index)}
-                    onBlur={e => handleBlur(e, index)}
-                    readOnly={!topItem?.isEditable}
-                    className={styles.text}
-                  />
-                  <Input
-                    value={topItem?.value}
-                    onChange={e => handleChange(e, index)}
-                    onFocus={e => handleFocus(e, index)}
-                    onBlur={e => handleBlur(e, index)}
-                    readOnly={!topItem?.isEditable}
-                    style={{ width: " 80%" }}
-                  />
-                </div>
+                {topItem.type && topItem.type.includes("09") ? (
+                  <div>
+                    <div className={styles.boxInput}>
+                      <div className={styles.text} style={{ width: " 100%" }}>
+                        层1{" "}
+                      </div>
+                      <Input
+                        value={topItem?.sLength}
+                        onChange={e => handleChange(e, findIndexBySname(topItem.sName), "sLength")}
+                        onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))}
+                        readOnly={!topItem?.isEditable}
+                        style={{ width: " 80%" }}
+                        placeholder="长"
+                      />
+                      <Input
+                        value={topItem?.sWidth}
+                        onChange={e => handleChange(e, findIndexBySname(topItem.sName), "sWidth")}
+                        onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))}
+                        readOnly={!topItem?.isEditable}
+                        style={{ width: " 80%" }}
+                        placeholder="宽"
+                      />
+                    </div>
+                    <div className={styles.boxInput}>
+                      <Select
+                        optionLabelProp="label"
+                        className="mySelectsDouble"
+                        style={{ width: 180, color: "#000" }}
+                        defaultValue={options.length ? options[0].value : ""}
+                        value={topItem?.sTypeName || ""}
+                        onSelect={(value, option) => handleSelects(value, option, findIndexBySname(topItem.sName), 0, 0)}
+                        onDropdownVisibleChange={async open => {
+                          if (open) {
+                            props.getSqlOptions(null); // 在下拉菜单打开时调用 getSqlOptions
+                          }
+                        }}
+                      >
+                        {!loading ? options.map(option => renderOptionWithText(option)) : ""}
+                      </Select>
+                      <Input
+                        value={topItem?.sQuantity}
+                        onChange={e => handleChange(e, findIndexBySname(topItem.sName), "sQuantity")}
+                        onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))}
+                        readOnly={!topItem?.isEditable}
+                        style={{ width: " 80%" }}
+                        placeholder="个数"
+                      />
+                      <Input
+                        value={topItem?.sOffset}
+                        onChange={e => handleChange(e, findIndexBySname(topItem.sName), "sOffset")}
+                        onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))}
+                        readOnly={!topItem?.isEditable}
+                        style={{ width: " 80%" }}
+                        placeholder="偏移"
+                      />
+                    </div>
+                    <div className={styles.boxInput}>
+                      <div className={styles.text} style={{ width: " 100%" }}>
+                        层2{" "}
+                      </div>
+                      <Input
+                        value={topItem?.cLength}
+                        onChange={e => handleChange(e, findIndexBySname(topItem.sName), "cLength")}
+                        onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))}
+                        readOnly={!topItem?.isEditable}
+                        style={{ width: " 80%" }}
+                        placeholder="长"
+                      />
+                      <Input
+                        value={topItem?.cWidth}
+                        onChange={e => handleChange(e, findIndexBySname(topItem.sName), "cWidth")}
+                        onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))}
+                        readOnly={!topItem?.isEditable}
+                        style={{ width: " 80%" }}
+                        placeholder="宽"
+                      />
+                    </div>
+                    <div className={styles.boxInput}>
+                      <Select
+                        optionLabelProp="label"
+                        className="mySelectsDouble"
+                        style={{ width: 180, color: "#000" }}
+                        defaultValue={options.length ? options[0].value : ""}
+                        value={topItem?.cTypeName || ""}
+                        onSelect={(value, option) => handleSelects(value, option, findIndexBySname(topItem.sName), 0, 1)}
+                        onDropdownVisibleChange={async open => {
+                          if (open) {
+                            props.getSqlOptions(null); // 在下拉菜单打开时调用 getSqlOptions
+                          }
+                        }}
+                      >
+                        {!loading ? options.map(option => renderOptionWithText(option)) : ""}
+                      </Select>
+                      <Input
+                        value={topItem?.cQuantity}
+                        onChange={e => handleChange(e, findIndexBySname(topItem.sName), "cQuantity")}
+                        onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))}
+                        readOnly={!topItem?.isEditable}
+                        style={{ width: " 80%" }}
+                        placeholder="个数"
+                      />
+                      <Input
+                        value={topItem?.cOffset}
+                        onChange={e => handleChange(e, findIndexBySname(topItem.sName), "cOffset")}
+                        onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))}
+                        readOnly={!topItem?.isEditable}
+                        style={{ width: " 80%" }}
+                        placeholder="偏移"
+                      />
+                    </div>
+                  </div>
+                ) : (
+                  <div className={styles.boxInput}>
+                    {/* <div className={styles.text}>参数：</div> */}
+                    <Input
+                      value={topItem?.showName}
+                      onChange={e => handleChangeName(e, index)}
+                      onFocus={e => handleFocus(e, index)}
+                      onBlur={e => handleBlur(e, index)}
+                      readOnly={!topItem?.isEditable}
+                      className={styles.text}
+                    />
+                    <Input
+                      value={topItem?.value}
+                      onChange={e => handleChange(e, index)}
+                      onFocus={e => handleFocus(e, index)}
+                      onBlur={e => handleBlur(e, index)}
+                      readOnly={!topItem?.isEditable}
+                      style={{ width: " 80%" }}
+                    />
+                  </div>
+                )}
               </div>
             ))}
           {boxType === "8" &&
@@ -1000,7 +1229,7 @@ const BoxDesignCompontent = baseProps =&gt; {
               </div>
             ))}
         </div>
-        <div className={styles.boxLeft}>
+        <div className={styles.boxLeft} style={{ top: `${typesTop ? "240px" : "130px"}` }}>
           {boxType !== "8" &&
             leftBoxList.map((item, index) => (
               <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
@@ -1038,22 +1267,145 @@ const BoxDesignCompontent = baseProps =&gt; {
                   ) : (
                     ""
                   )}
-                  <Input
-                    value={item?.showName}
-                    onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
-                    onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
-                    onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
-                    readOnly={!item?.isEditable}
-                    className={styles.text}
-                  />
-                  <Input
-                    value={item?.value}
-                    onChange={e => handleChange(e, findIndexBySname(item.sName))}
-                    onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
-                    onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
-                    readOnly={!item?.isEditable}
-                    style={{ width: " 80%" }}
-                  />
+                  {item.type && item.type.includes("09") ? (
+                    <div>
+                      <div className={styles.boxInput}>
+                        <div className={styles.text} style={{ width: " 100%" }}>
+                          层1{" "}
+                        </div>
+                        <Input
+                          value={item?.sLength}
+                          onChange={e => handleChange(e, findIndexBySname(item.sName), "sLength")}
+                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                          readOnly={!item?.isEditable}
+                          style={{ width: " 80%" }}
+                          placeholder="长"
+                        />
+                        <Input
+                          value={item?.sWidth}
+                          onChange={e => handleChange(e, findIndexBySname(item.sName), "sWidth")}
+                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                          readOnly={!item?.isEditable}
+                          style={{ width: " 80%" }}
+                          placeholder="宽"
+                        />
+                      </div>
+                      <div className={styles.boxInput}>
+                        <Select
+                          optionLabelProp="label"
+                          className="mySelectsDouble"
+                          style={{ width: 180, color: "#000" }}
+                          defaultValue={options.length ? options[0].value : ""}
+                          value={item?.sTypeName || ""}
+                          onSelect={(value, option) => handleSelects(value, option, findIndexBySname(item.sName), 0, 0)}
+                          onDropdownVisibleChange={async open => {
+                            if (open) {
+                              props.getSqlOptions(null); // 在下拉菜单打开时调用 getSqlOptions
+                            }
+                          }}
+                        >
+                          {!loading ? options.map(option => renderOptionWithText(option)) : ""}
+                        </Select>
+                        <Input
+                          value={item?.sQuantity}
+                          onChange={e => handleChange(e, findIndexBySname(item.sName), "sQuantity")}
+                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                          readOnly={!item?.isEditable}
+                          style={{ width: " 80%" }}
+                          placeholder="个数"
+                        />
+                        <Input
+                          value={item?.sOffset}
+                          onChange={e => handleChange(e, findIndexBySname(item.sName), "sOffset")}
+                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                          readOnly={!item?.isEditable}
+                          style={{ width: " 80%" }}
+                          placeholder="偏移"
+                        />
+                      </div>
+                      <div className={styles.boxInput}>
+                        <div className={styles.text} style={{ width: " 100%" }}>
+                          层2{" "}
+                        </div>
+                        <Input
+                          value={item?.cLength}
+                          onChange={e => handleChange(e, findIndexBySname(item.sName), "cLength")}
+                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                          readOnly={!item?.isEditable}
+                          style={{ width: " 80%" }}
+                          placeholder="长"
+                        />
+                        <Input
+                          value={item?.cWidth}
+                          onChange={e => handleChange(e, findIndexBySname(item.sName), "cWidth")}
+                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                          readOnly={!item?.isEditable}
+                          style={{ width: " 80%" }}
+                          placeholder="宽"
+                        />
+                      </div>
+                      <div className={styles.boxInput}>
+                        <Select
+                          optionLabelProp="label"
+                          className="mySelectsDouble"
+                          style={{ width: 180, color: "#000" }}
+                          defaultValue={options.length ? options[0].value : ""}
+                          value={item?.cTypeName || ""}
+                          onSelect={(value, option) => handleSelects(value, option, findIndexBySname(item.sName), 0, 1)}
+                          onDropdownVisibleChange={async open => {
+                            if (open) {
+                              props.getSqlOptions(null); // 在下拉菜单打开时调用 getSqlOptions
+                            }
+                          }}
+                        >
+                          {!loading ? options.map(option => renderOptionWithText(option)) : ""}
+                        </Select>
+                        <Input
+                          value={item?.cQuantity}
+                          onChange={e => handleChange(e, findIndexBySname(item.sName), "cQuantity")}
+                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                          readOnly={!item?.isEditable}
+                          style={{ width: " 80%" }}
+                          placeholder="个数"
+                        />
+                        <Input
+                          value={item?.cOffset}
+                          onChange={e => handleChange(e, findIndexBySname(item.sName), "cOffset")}
+                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                          readOnly={!item?.isEditable}
+                          style={{ width: " 80%" }}
+                          placeholder="偏移"
+                        />
+                      </div>
+                    </div>
+                  ) : (
+                    <div className={styles.boxInput}>
+                      <Input
+                        value={item?.showName}
+                        onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
+                        onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                        readOnly={!item?.isEditable}
+                        className={styles.text}
+                      />
+                      <Input
+                        value={item?.value}
+                        onChange={e => handleChange(e, findIndexBySname(item.sName))}
+                        onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                        readOnly={!item?.isEditable}
+                        style={{ width: " 80%" }}
+                      />
+                    </div>
+                  )}
                 </div>
               </div>
             ))}
@@ -1118,7 +1470,7 @@ const BoxDesignCompontent = baseProps =&gt; {
               </div>
             ))}
         </div>
-        <div className={styles.boxRight}>
+        <div className={styles.boxRight} style={{ top: `${typesTop ? "240px" : "130px"}` }}>
           {boxType !== "8" &&
             rightBoxList.map((item, index) => (
               <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
@@ -1138,42 +1490,163 @@ const BoxDesignCompontent = baseProps =&gt; {
                 >
                   {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
                 </Select>
-                <div className={styles.boxInput}>
-                  {item?.selectImage ? (
-                    <img
-                      src={item?.selectImage}
-                      alt={item.value}
-                      style={{
-                        width: 40,
-                        height: 30,
-                        marginRight: 8,
-                        position: "absolute",
-                        left: 20,
-                        top: -35,
-                        zIndex: 10,
-                      }}
-                    />
-                  ) : (
-                    ""
-                  )}
+                {item?.type && item?.type.includes("09") ? (
+                  <div>
+                    <div className={styles.boxInput}>
+                      <div className={styles.text} style={{ width: " 100%" }}>
+                        层1{" "}
+                      </div>
+                      <Input
+                        value={item?.sLength}
+                        onChange={e => handleChange(e, findIndexBySname(item.sName), "sLength")}
+                        onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                        readOnly={!item?.isEditable}
+                        style={{ width: " 80%" }}
+                        placeholder="长"
+                      />
+                      <Input
+                        value={item?.sWidth}
+                        onChange={e => handleChange(e, findIndexBySname(item.sName), "sWidth")}
+                        onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                        readOnly={!item?.isEditable}
+                        style={{ width: " 80%" }}
+                        placeholder="宽"
+                      />
+                    </div>
+                    <div className={styles.boxInput}>
+                      <Select
+                        optionLabelProp="label"
+                        className="mySelectsDouble"
+                        style={{ width: 180, color: "#000" }}
+                        defaultValue={options.length ? options[0].value : ""}
+                        value={item?.sTypeName || ""}
+                        onSelect={(value, option) => handleSelects(value, option, findIndexBySname(item.sName), 0, 0)}
+                        onDropdownVisibleChange={async open => {
+                          if (open) {
+                            props.getSqlOptions(null); // 在下拉菜单打开时调用 getSqlOptions
+                          }
+                        }}
+                      >
+                        {!loading ? options.map(option => renderOptionWithText(option)) : ""}
+                      </Select>
+                      <Input
+                        value={item?.sQuantity}
+                        onChange={e => handleChange(e, findIndexBySname(item.sName), "sQuantity")}
+                        onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                        readOnly={!item?.isEditable}
+                        style={{ width: " 80%" }}
+                        placeholder="个数"
+                      />
+                      <Input
+                        value={item?.sOffset}
+                        onChange={e => handleChange(e, findIndexBySname(item.sName), "sOffset")}
+                        onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                        readOnly={!item?.isEditable}
+                        style={{ width: " 80%" }}
+                        placeholder="偏移"
+                      />
+                    </div>
+                    <div className={styles.boxInput}>
+                      <div className={styles.text} style={{ width: " 100%" }}>
+                        层2{" "}
+                      </div>
+                      <Input
+                        value={item?.cLength}
+                        onChange={e => handleChange(e, findIndexBySname(item.sName), "cLength")}
+                        onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                        readOnly={!item?.isEditable}
+                        style={{ width: " 80%" }}
+                        placeholder="长"
+                      />
+                      <Input
+                        value={item?.cWidth}
+                        onChange={e => handleChange(e, findIndexBySname(item.sName), "cWidth")}
+                        onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                        readOnly={!item?.isEditable}
+                        style={{ width: " 80%" }}
+                        placeholder="宽"
+                      />
+                    </div>
+                    <div className={styles.boxInput}>
+                      <Select
+                        optionLabelProp="label"
+                        className="mySelectsDouble"
+                        style={{ width: 180, color: "#000" }}
+                        defaultValue={options.length ? options[0].value : ""}
+                        value={item?.cTypeName || ""}
+                        onSelect={(value, option) => handleSelects(value, option, findIndexBySname(item.sName), 0, 1)}
+                        onDropdownVisibleChange={async open => {
+                          if (open) {
+                            props.getSqlOptions(null); // 在下拉菜单打开时调用 getSqlOptions
+                          }
+                        }}
+                      >
+                        {!loading ? options.map(option => renderOptionWithText(option)) : ""}
+                      </Select>
+                      <Input
+                        value={item?.cQuantity}
+                        onChange={e => handleChange(e, findIndexBySname(item.sName), "cQuantity")}
+                        onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                        readOnly={!item?.isEditable}
+                        style={{ width: " 80%" }}
+                        placeholder="个数"
+                      />
+                      <Input
+                        value={item?.cOffset}
+                        onChange={e => handleChange(e, findIndexBySname(item.sName), "cOffset")}
+                        onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                        onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                        readOnly={!item?.isEditable}
+                        style={{ width: " 80%" }}
+                        placeholder="偏移"
+                      />
+                    </div>
+                  </div>
+                ) : (
+                  <div className={styles.boxInput}>
+                    {item?.selectImage ? (
+                      <img
+                        src={item?.selectImage}
+                        alt={item.value}
+                        style={{
+                          width: 40,
+                          height: 30,
+                          marginRight: 8,
+                          position: "absolute",
+                          left: 20,
+                          top: -35,
+                          zIndex: 10,
+                        }}
+                      />
+                    ) : (
+                      ""
+                    )}
-                  <Input
-                    value={item?.showName}
-                    onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
-                    onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
-                    onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
-                    readOnly={!item?.isEditable}
-                    className={styles.text}
-                  />
-                  <Input
-                    value={item?.value}
-                    onChange={e => handleChange(e, findIndexBySname(item.sName))}
-                    onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
-                    onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
-                    readOnly={!item?.isEditable}
-                    style={{ width: " 80%" }}
-                  />
-                </div>
+                    <Input
+                      value={item?.showName}
+                      onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
+                      onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                      onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                      readOnly={!item?.isEditable}
+                      className={styles.text}
+                    />
+                    <Input
+                      value={item?.value}
+                      onChange={e => handleChange(e, findIndexBySname(item.sName))}
+                      onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
+                      onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
+                      readOnly={!item?.isEditable}
+                      style={{ width: " 80%" }}
+                    />
+                  </div>
+                )}
               </div>
             ))}
           {boxType === "8" &&
@@ -1238,7 +1711,7 @@ const BoxDesignCompontent = baseProps =&gt; {
               </div>
             ))}
         </div>
-        <div className={styles.boxBottom}>
+        <div className={styles.boxBottom} style={{ top: `${typesTop ? "240px" : "130px"}` }}>
           <div className={styles.svgBox}>
             <SvgBox {...svgBoxProps} />
           </div>
@@ -21,7 +21,7 @@
   }
   .boxLeft {
     width: 180px;
-    height: 320px;
+    min-height: 320px;
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
@@ -33,7 +33,7 @@
   }
   .boxRight {
     width: 180px;
-    height: 320px;
+    min-height: 320px;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -43,23 +43,23 @@
     top: 130px;
     text-align: center;
   }
-  .boxBottom{
+  .boxBottom {
     width: 500px;
     height: 380px;
     position: absolute;
     top: 130px;
     left: 50%;
     transform: translateX(-50%);
-    .svgBox{
+    .svgBox {
       width: 100%;
-      height: 250px;
-      background-color: #9AFF9A;
+      min-height: 250px;
+      background-color: #9aff9a;
     }
-    .content{
+    .content {
       width: 100%;
       height: 130px;
-      :global{
-        .ant-select-selector{
+      :global {
+        .ant-select-selector {
           // width: 380px  !important; /* 选择框宽度 */
           color: #333;
         }
@@ -68,11 +68,10 @@
           padding-left: 50px;
           line-height: 40px;
         }
-        
       }
     }
   }
-  .boxTitle{
+  .boxTitle {
     background-color: #3399ff;
     color: #fff;
     width: 180px;
@@ -80,37 +79,45 @@
     line-height: 20px;
     text-align: center;
   }
-  :global{
-    .mySelects .ant-select-selector {
-      background-color: #99CCFF !important; /* 选择框背景色 */
+  :global {
+    .mySelects .ant-select-selector,
+    .mySelectsDouble .ant-select-selector {
+      background-color: #99ccff !important; /* 选择框背景色 */
       height: 40px !important; /* 选择框高度 */
     }
     .mySelects .ant-select-selection-item {
       color: transparent !important; /* 选择框文字颜色 */
     }
-   
+    .mySelectsDouble .ant-select-selection-item {
+      color: #333 !important; /* 选择框文字颜色 */
+      line-height: 40px !important;
+
+    }
   }
   .mySelects {
     position: relative;
   }
-  .boxInput{
+  .boxInput {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 180px;
-    height: 40px;
+    // height: 40px;
+    min-height: 40px;
     position: relative;
     :global {
       .ant-input {
-        background-color: #99CCFF !important; /* 输入框背景色 */
+        background-color: #99ccff !important; /* 输入框背景色 */
         border: 1px solid #d9d9d9;
         height: 40px;
       }
-      
+      .ant-input::placeholder {
+        color: #fff !important; // 修改为你想要的颜色
+      }
     }
   }
-  .text{
-    background-color: #99CCFF;
+  .text {
+    background-color: #99ccff;
     width: 100%;
     height: 40px;
     line-height: 40px;
@@ -119,19 +126,18 @@
     margin-right: 1px;
   }
   .content {
-    :global{
+    :global {
       .ant-input {
-        background-color: #EEEEEE !important; /* 输入框背景色 */
+        background-color: #eeeeee !important; /* 输入框背景色 */
         height: 40px;
       }
       .ant-select-selector {
-        background-color: #EEEEEE !important; /* 选择框背景色 */
+        background-color: #eeeeee !important; /* 选择框背景色 */
         height: 40px !important; /* 选择框高度 */
       }
-     
     }
-    .text{
-      background-color: #EEEEEE ;
+    .text {
+      background-color: #eeeeee;
       margin: 0;
     }
     .boxFlex {
@@ -141,33 +147,33 @@
       flex-direction: column;
       width: 500px;
     }
-    .boxFlexs{
+    .boxFlexs {
       display: flex;
       align-items: center;
       width: 500px;
       justify-content: space-between;
-      .boxInputs{
+      .boxInputs {
         display: flex;
         align-items: center;
         flex: 1;
-        :global{
+        :global {
           .ant-input {
-            background-color: #EEEEEE !important; /* 输入框背景色 */
+            background-color: #eeeeee !important; /* 输入框背景色 */
             height: 40px;
           }
         }
       }
     }
-    .boxInput{
+    .boxInput {
       width: 100%;
       position: relative;
-      .defaultValue{
+      .defaultValue {
         position: absolute;
         left: 32%;
         top: 3px;
         width: 60px;
         height: 30px;
-        background-color: #EEE;
+        background-color: #eee;
         color: #333;
         line-height: 40px;
         z-index: 2;
@@ -606,30 +606,44 @@ const SvgBox = props =&gt; {
         pathList.push(createText(scaledWidth * 2 + scaledHeight * 2 + dYTBW * 0.4, scaledDeep / 2, 10 * scales, dYTBW));
       }
       // 左上部件
-      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));
-        pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
-        // 插位值
-        pathList.push(createText(scaledWidth / 2, -scaledHeight - dZSCW / 2 + 4, 10 * scales, dZSCW));
-      } else if (zsbj?.type === "3002" && dZSCW) {
-        pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW));
-      } else if (zsbj?.type === "3003" && dZSCW) {
-        pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW));
-      } else if (zsbj?.type === "3004" && zsbj?.value) {
-        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales));
-        pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
-        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales));
-        pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
-        pathList.push(createText(scaledWidth * 0.3, -(scaledHeight * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW));
-      } else if (zsbj?.type === "3005" && zsbj?.value) {
-        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, -scaledHeight / 2, scales));
-        pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
-        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales));
-        pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
-      } else if (zsbj?.type && dZSCW) {
-        pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW));
+      if (zsbj?.type && zsbj?.type === "3009") {
+        console.log(zsbj, boxList, "zsbj");
+        // 先放层1的盒型
+        const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = zsbj;
+        if (Number(sType) === 0) {
+          const rectangles = [{ x: -sLength * scale, y: ((scaledDeep -  (Number(sWidth) * scale)) / 2) + Number(sOffset), width: sLength * scale, height: sWidth * scale }];
+          rectangles.forEach(rect => {
+            g.appendChild(createPathElements(rect.x, rect.y, rect.width, rect.height));
+          });
+          svg.appendChild(g);
+        }
+      } else {
+        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));
+          pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
+          // 插位值
+          pathList.push(createText(scaledWidth / 2, -scaledHeight - dZSCW / 2 + 4, 10 * scales, dZSCW));
+        } else if (zsbj?.type === "3002" && dZSCW) {
+          pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW));
+        } else if (zsbj?.type === "3003" && dZSCW) {
+          pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW));
+        } else if (zsbj?.type === "3004" && zsbj?.value) {
+          pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales));
+          pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
+          pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales));
+          pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
+          pathList.push(createText(scaledWidth * 0.3, -(scaledHeight * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW));
+        } else if (zsbj?.type === "3005" && zsbj?.value) {
+          pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, -scaledHeight / 2, scales));
+          pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
+          pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales));
+          pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
+        } else if (zsbj?.type && dZSCW) {
+          pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW));
+        }
       }
+
       // 右上部件
       pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0));
       if ((ysbj?.type === "6001" && ysbj?.value) || (ysbj?.type === "6006" && ysbj?.value) || (ysbj?.type === "6007" && ysbj?.value)) {
@@ -1425,10 +1439,12 @@ const SvgBox = props =&gt; {
         pathList.push(createText(scaleHeadWidth / 2, scaleHeadLength * 0.3 + 10 * scales, 10 * scales, "dSHC"));
       }
       if (scaleOrderLength && scaleOrderWidth) {
-        pathList.push(createDoubleArrow(scaleOrderWidth, scaleOrderLength * 0.6 - (leftOffect ), scaleHeadWidth + scaleOrderWidth / 2, scales));
-        pathList.push(createText(scaleOrderLength * 0.8 - 10 * scales - (leftOffect ), scaleHeadWidth + scaleOrderWidth / 2, 10 * scales, "dCHK"));
-        pathList.push(createHorizontalDoubleArrow(scaleOrderLength, scaleOrderLength / 2  - (leftOffect ), scaleHeadWidth + scaleOrderWidth * 0.7, scales));
-        pathList.push(createText(scaleOrderWidth / 2 - (leftOffect ), scaleHeadWidth + scaleOrderLength * 0.8 * scales, 10 * scales, "dCHC"));
+        pathList.push(createDoubleArrow(scaleOrderWidth, scaleOrderLength * 0.6 - leftOffect, scaleHeadWidth + scaleOrderWidth / 2, scales));
+        pathList.push(createText(scaleOrderLength * 0.8 - 10 * scales - leftOffect, scaleHeadWidth + scaleOrderWidth / 2, 10 * scales, "dCHK"));
+        pathList.push(
+          createHorizontalDoubleArrow(scaleOrderLength, scaleOrderLength / 2 - leftOffect, scaleHeadWidth + scaleOrderWidth * 0.7, scales)
+        );
+        pathList.push(createText(scaleOrderWidth / 2 - leftOffect, scaleHeadWidth + scaleOrderLength * 0.8 * scales, 10 * scales, "dCHC"));
       }
       pathList.forEach(x => {