From dd43301aeecd0407da164e392c196b748dbc9f3c Mon Sep 17 00:00:00 2001
From: 陈鑫涛 <10125295+chen-xintao97@user.noreply.gitee.com>
Date: Thu, 10 Jul 2025 11:29:10 +0800
Subject: [PATCH] 盒型排版尺寸

---
 src/components/Common/BoxDesignCompontent/compontents/doubleLayer.js | 321 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/Common/BoxDesignCompontent/index.js                   | 737 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 src/components/Common/Typesetting/typesetting.js                     | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------
 3 files changed, 881 insertions(+), 282 deletions(-)
 create mode 100644 src/components/Common/BoxDesignCompontent/compontents/doubleLayer.js

diff --git a/src/components/Common/BoxDesignCompontent/compontents/doubleLayer.js b/src/components/Common/BoxDesignCompontent/compontents/doubleLayer.js
new file mode 100644
index 0000000..7d526ba
--- /dev/null
+++ b/src/components/Common/BoxDesignCompontent/compontents/doubleLayer.js
@@ -0,0 +1,321 @@
+/* eslint-disable */
+import React, { useRef, useState, useEffect } from "react";
+import styles from "../index.less";
+import SvgBox from "../svg";
+import { Select, Button, message, Input, Spin } from "antd-v4";
+import { CompressOutlined, ExpandOutlined } from "@ant-design/icons";
+import * as commonUtils from "@/utils/utils";
+import * as commonFunc from "@/components/Common/commonFunc";
+import * as commonBusiness from "@/components/Common/commonBusiness";
+import * as commonServices from "@/services/services";
+import CommonBase from "@/components/Common/CommonBase";
+import AntdDraggableModal from "@/components/Common/AntdDraggableModal";
+import CommonViewTable from "@/components/Common/CommonViewTable";
+import StaticEditTable from "@/components/Common/CommonTable";
+import jsPreviewPdf from "@js-preview/pdf";
+import commonConfig from "@/utils/config";
+const DoubleLayerBox = props => {
+  console.log("🚀 ~ DoubleLayerBox:", props);
+  const [boxList, setBoxList] = useState([]);
+  const [tableColum, setTableColum] = useState([]); // 盒身类型
+  const [tableDataList, setTableDataList] = useState([]); // 盒长
+  const [boxBodyList, setBoxBodyList] = useState([]); // 盒身信息
+  const [isDefaultValue, setIsDefaultValue] = useState(true); // 是否默认值
+  const [topBoxList, setTopBoxList] = useState([]); // 盒身信息
+  const [leftBoxList, setLeftBoxList] = useState([]); // 左边
+  const [rightBoxList, setRightBoxList] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const { renderOptionWithImage } = props;
+  let boxData = {
+    value: "",
+    sName: "",
+    isEditable: true,
+    isSelect: false,
+    selectValue: null,
+    selectLabel: "",
+    selectImage: null,
+    type: null,
+    show: true,
+    showName: "", // 参数名称
+    sAssignFormula: null,
+    code: "",
+  };
+  const options = props.options;
+  const top = [
+    { name: "左贴边位", value: "dZTBW" },
+    { name: "上插位组件", value: "dZSCW" },
+    { name: "右贴边位", value: "dYTBW" },
+  ];
+  setTopBoxList(
+    top.map(item => {
+      boxData.sName = item.name;
+      boxData.showName = item.name;
+      boxData.code = item.value;
+      return boxData;
+    })
+  );
+  const svgBoxProps = {
+    ...props,
+    boxList: [],
+    showNew: 0,
+  };
+  return (
+    <div className={styles.boxBody}>
+      <div className={styles.boxTop}>
+        {topBoxList.map((topItem, index) => (
+          <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>
+            <div className={styles.boxTitle}>{topItem.sName}</div>
+            {topItem?.selectImage ? (
+              <img
+                src={topItem?.selectImage}
+                alt={topItem.value}
+                style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}
+              />
+            ) : (
+              ""
+            )}
+
+            <Select
+              optionLabelProp="label"
+              className="mySelects"
+              style={{ width: 180 }}
+              defaultValue={options.length ? options[0].value : ""}
+              onSelect={(value, option) => handleSelect(value, option, index, 0)}
+              onDropdownVisibleChange={async open => {
+                if (open) {
+                  props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions
+                }
+              }}
+            >
+              {!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>
+          </div>
+        ))}
+      </div>
+      <div className={styles.boxLeft}>
+        {leftBoxList.map((item, index) => (
+          <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
+            <div className={styles.boxTitle}>{titleList[index + 3]}</div>
+
+            <Select
+              optionLabelProp="label"
+              className="mySelects"
+              style={{ width: 180 }}
+              defaultValue={options.length ? options[0].value : ""}
+              onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
+              onDropdownVisibleChange={async open => {
+                if (open) {
+                  props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
+                }
+              }}
+            >
+              {!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,
+                  }}
+                />
+              ) : (
+                ""
+              )}
+              <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>
+      <div className={styles.boxRight}>
+        {rightBoxList.map((item, index) => (
+          <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
+            <div className={styles.boxTitle}>{titleList[findIndexBySname(item.sName)]}</div>
+
+            <Select
+              optionLabelProp="label"
+              className="mySelects"
+              style={{ width: 180 }}
+              defaultValue={options.length ? options[0].value : ""}
+              onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
+              onDropdownVisibleChange={async open => {
+                if (open) {
+                  props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
+                }
+              }}
+            >
+              {!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,
+                  }}
+                />
+              ) : (
+                ""
+              )}
+
+              <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>
+      <div className={styles.boxBottom}>
+        <div className={styles.svgBox}>
+          <SvgBox {...svgBoxProps} />
+        </div>
+        <div className={styles.content}>
+          {tableColum && tableColum.length
+            ? tableColum.map((item, index) => {
+                const uniqueIndex = index + 9;
+                return (
+                  <div key={uniqueIndex} className={styles.boxFlex}>
+                    <div className={styles.boxInput}>
+                      <div className={styles.text} style={{ width: "120px" }}>
+                        {item.showName}
+                      </div>
+                      <Input
+                        value={boxList[uniqueIndex]?.value}
+                        onChange={e => handleChange(e, uniqueIndex)}
+                        onFocus={e => handleFocus(e, uniqueIndex)}
+                        onBlur={e => handleBlur(e, uniqueIndex)}
+                        readOnly={!boxList[uniqueIndex]?.isEditable}
+                        style={{ width: " 80%" }}
+                      />
+                    </div>
+                  </div>
+                );
+              })
+            : ""}
+          {boxBodyList && boxBodyList.length
+            ? boxBodyList.map((item, index) => {
+                const uniqueIndex = index + 9 + tableColum.length;
+
+                return (
+                  <div key={uniqueIndex} className={styles.boxFlex}>
+                    <div className={styles.boxInput}>
+                      <div className={styles.text} style={{ width: "120px" }}>
+                        {item.showName}
+                      </div>
+                      {boxList[uniqueIndex]?.selectImage ? (
+                        <img
+                          src={boxList[uniqueIndex]?.selectImage}
+                          alt={boxList[uniqueIndex].value}
+                          style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 120, top: 6, zIndex: 10 }}
+                        />
+                      ) : (
+                        ""
+                      )}
+                      {isDefaultValue ? <div className={styles.defaultValue}>{boxList[uniqueIndex]?.value}</div> : ""}
+                      <Select
+                        optionLabelProp="label"
+                        className="mySelects"
+                        style={{ width: "80%" }}
+                        defaultValue={boxList[uniqueIndex]?.value}
+                        onSelect={(value, option) => handleSelect(value, option, uniqueIndex, 1)}
+                        onDropdownVisibleChange={async open => {
+                          if (open) {
+                            props.getSqlOptions(10); // 盒身
+                          }
+                        }}
+                      >
+                        {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
+                      </Select>
+                    </div>
+                  </div>
+                );
+              })
+            : ""}
+          <div className={styles.boxFlexs}>
+            {tableDataList && tableDataList.length
+              ? tableDataList.map((item, index) => {
+                  const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length;
+
+                  return (
+                    <div key={uniqueIndex} className={styles.boxInputs}>
+                      <div className={styles.text}>{item.sName}</div>
+                      <Input
+                        value={boxList[uniqueIndex]?.value}
+                        onChange={e => handleChange(e, uniqueIndex)}
+                        onFocus={e => handleFocus(e, uniqueIndex)}
+                        onBlur={e => handleBlur(e, uniqueIndex)}
+                        readOnly={!boxList[uniqueIndex]?.isEditable}
+                        style={{ width: " 60%" }}
+                      />
+                    </div>
+                  );
+                })
+              : ""}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default DoubleLayerBox;
diff --git a/src/components/Common/BoxDesignCompontent/index.js b/src/components/Common/BoxDesignCompontent/index.js
index 7394401..8f4ecd0 100644
--- a/src/components/Common/BoxDesignCompontent/index.js
+++ b/src/components/Common/BoxDesignCompontent/index.js
@@ -14,6 +14,7 @@ import jsPreviewPdf from "@js-preview/pdf";
 import commonConfig from "@/utils/config";
 import SvgBox from "./svg";
 import styles from "./index.less";
+import DoubleLayerBox from "./compontents/doubleLayer";
 const BoxDesignEvent = props => {
   const addState = {};
   const { formData = [], selectData = [], masterData, makeUpPDFRecord = {} } = props;
@@ -218,6 +219,7 @@ const BoxDesignCompontent = baseProps => {
       setBoxList(newBoxList);
     }
   }, [newBoxList]);
+  console.log(boxList, "boxList");
 
   const arraysAreEqual = (arr1, arr2) => {
     if (arr1.length !== arr2.length) return false;
@@ -261,7 +263,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));
@@ -279,6 +281,7 @@ const BoxDesignCompontent = baseProps => {
 
     updateLists();
   }, [boxList]);
+  const boxType = boxList.find(item => item.sName === "盒身")?.type;
 
   const handleFocus = (e, index) => {
     if (boxList && boxList.length) {
@@ -355,6 +358,10 @@ const BoxDesignCompontent = baseProps => {
     boxList,
     showNew: 0,
   };
+  const dobuleProps = {
+    ...props,
+    renderOptionWithImage,
+  };
   // 计算展长展宽
   // 创建盒型
   const submit = () => {
@@ -740,6 +747,17 @@ const BoxDesignCompontent = baseProps => {
     const i = boxList.findIndex(x => x.sName === name);
     return i || 0;
   };
+
+  // 单独处理双层盒型
+  if (boxType === "8") {
+    const top = [
+      { name: "左贴边位", value: "dZTBW" },
+      { name: "上插位组件", value: "dZSCW" },
+      { name: "右贴边位", value: "dYTBW" },
+    ];
+    console.log(topBoxList,options,'topBoxList');
+    
+  }
   return (
     <AntdDraggableModal
       width="1000px"
@@ -760,262 +778,521 @@ const BoxDesignCompontent = baseProps => {
       }}
     >
       {/* 盒身信息 */}
-      <div className={styles.boxBody} key={boxKey}>
-        <div className={styles.boxTop}>
-          {topBoxList.map((topItem, index) => (
-            <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>
-              <div className={styles.boxTitle}>{topItem.sName}</div>
-              {topItem?.selectImage ? (
-                <img
-                  src={topItem?.selectImage}
-                  alt={topItem.value}
-                  style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}
-                />
-              ) : (
-                ""
-              )}
-
-              <Select
-                optionLabelProp="label"
-                className="mySelects"
-                style={{ width: 180 }}
-                defaultValue={options.length ? options[0].value : ""}
-                onSelect={(value, option) => handleSelect(value, option, index, 0)}
-                onDropdownVisibleChange={async open => {
-                  if (open) {
-                    props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions
-                  }
-                }}
-              >
-                {!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>
-            </div>
-          ))}
-        </div>
-        <div className={styles.boxLeft}>
-          {leftBoxList.map((item, index) => (
-            <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
-              <div className={styles.boxTitle}>{titleList[index + 3]}</div>
-
-              <Select
-                optionLabelProp="label"
-                className="mySelects"
-                style={{ width: 180 }}
-                defaultValue={options.length ? options[0].value : ""}
-                onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
-                onDropdownVisibleChange={async open => {
-                  if (open) {
-                    props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
-                  }
-                }}
-              >
-                {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
-              </Select>
-              <div className={styles.boxInput}>
-                {item?.selectImage ? (
+      {boxType && boxType === "8" ? (
+        <div className={styles.boxBody} key={boxKey}>
+          <div className={styles.boxTop}>
+            {topBoxList.map((topItem, index) => (
+              <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>
+                <div className={styles.boxTitle}>{topItem.sName}</div>
+                {topItem?.selectImage ? (
                   <img
-                    src={item?.selectImage}
-                    alt={item.value}
-                    style={{
-                      width: 40,
-                      height: 30,
-                      marginRight: 8,
-                      position: "absolute",
-                      left: 20,
-                      top: -35,
-                      zIndex: 10,
-                    }}
+                    src={topItem?.selectImage}
+                    alt={topItem.value}
+                    style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, 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%" }}
-                />
+
+                <Select
+                  optionLabelProp="label"
+                  className="mySelects"
+                  style={{ width: 180 }}
+                  defaultValue={options.length ? options[0].value : ""}
+                  onSelect={(value, option) => handleSelect(value, option, index, 0)}
+                  onDropdownVisibleChange={async open => {
+                    if (open) {
+                      props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions
+                    }
+                  }}
+                >
+                  {!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>
+              </div>
+            ))}
+          </div>
+          <div className={styles.boxLeft}>
+            {leftBoxList.map((item, index) => (
+              <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
+                <div className={styles.boxTitle}>{titleList[index + 3]}</div>
+
+                <Select
+                  optionLabelProp="label"
+                  className="mySelects"
+                  style={{ width: 180 }}
+                  defaultValue={options.length ? options[0].value : ""}
+                  onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
+                  onDropdownVisibleChange={async open => {
+                    if (open) {
+                      props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
+                    }
+                  }}
+                >
+                  {!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,
+                      }}
+                    />
+                  ) : (
+                    ""
+                  )}
+                  <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>
+          <div className={styles.boxRight}>
+            {rightBoxList.map((item, index) => (
+              <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
+                <div className={styles.boxTitle}>{titleList[findIndexBySname(item.sName)]}</div>
+
+                <Select
+                  optionLabelProp="label"
+                  className="mySelects"
+                  style={{ width: 180 }}
+                  defaultValue={options.length ? options[0].value : ""}
+                  onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
+                  onDropdownVisibleChange={async open => {
+                    if (open) {
+                      props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
+                    }
+                  }}
+                >
+                  {!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,
+                      }}
+                    />
+                  ) : (
+                    ""
+                  )}
+
+                  <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>
+          <div className={styles.boxBottom}>
+            <div className={styles.svgBox}>
+              <SvgBox {...svgBoxProps} />
             </div>
-          ))}
+            <div className={styles.content}>
+              {tableColum && tableColum.length
+                ? tableColum.map((item, index) => {
+                    const uniqueIndex = index + 9;
+                    return (
+                      <div key={uniqueIndex} className={styles.boxFlex}>
+                        <div className={styles.boxInput}>
+                          <div className={styles.text} style={{ width: "120px" }}>
+                            {item.showName}
+                          </div>
+                          <Input
+                            value={boxList[uniqueIndex]?.value}
+                            onChange={e => handleChange(e, uniqueIndex)}
+                            onFocus={e => handleFocus(e, uniqueIndex)}
+                            onBlur={e => handleBlur(e, uniqueIndex)}
+                            readOnly={!boxList[uniqueIndex]?.isEditable}
+                            style={{ width: " 80%" }}
+                          />
+                        </div>
+                      </div>
+                    );
+                  })
+                : ""}
+              {boxBodyList && boxBodyList.length
+                ? boxBodyList.map((item, index) => {
+                    const uniqueIndex = index + 9 + tableColum.length;
+
+                    return (
+                      <div key={uniqueIndex} className={styles.boxFlex}>
+                        <div className={styles.boxInput}>
+                          <div className={styles.text} style={{ width: "120px" }}>
+                            {item.showName}
+                          </div>
+                          {boxList[uniqueIndex]?.selectImage ? (
+                            <img
+                              src={boxList[uniqueIndex]?.selectImage}
+                              alt={boxList[uniqueIndex].value}
+                              style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 120, top: 6, zIndex: 10 }}
+                            />
+                          ) : (
+                            ""
+                          )}
+                          {isDefaultValue ? <div className={styles.defaultValue}>{boxList[uniqueIndex]?.value}</div> : ""}
+                          <Select
+                            optionLabelProp="label"
+                            className="mySelects"
+                            style={{ width: "80%" }}
+                            defaultValue={boxList[uniqueIndex]?.value}
+                            onSelect={(value, option) => handleSelect(value, option, uniqueIndex, 1)}
+                            onDropdownVisibleChange={async open => {
+                              if (open) {
+                                props.getSqlOptions(10); // 盒身
+                              }
+                            }}
+                          >
+                            {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
+                          </Select>
+                        </div>
+                      </div>
+                    );
+                  })
+                : ""}
+              <div className={styles.boxFlexs}>
+                {tableDataList && tableDataList.length
+                  ? tableDataList.map((item, index) => {
+                      const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length;
+
+                      return (
+                        <div key={uniqueIndex} className={styles.boxInputs}>
+                          <div className={styles.text}>{item.sName}</div>
+                          <Input
+                            value={boxList[uniqueIndex]?.value}
+                            onChange={e => handleChange(e, uniqueIndex)}
+                            onFocus={e => handleFocus(e, uniqueIndex)}
+                            onBlur={e => handleBlur(e, uniqueIndex)}
+                            readOnly={!boxList[uniqueIndex]?.isEditable}
+                            style={{ width: " 60%" }}
+                          />
+                        </div>
+                      );
+                    })
+                  : ""}
+              </div>
+            </div>
+          </div>
         </div>
-        <div className={styles.boxRight}>
-          {rightBoxList.map((item, index) => (
-            <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
-              <div className={styles.boxTitle}>{titleList[findIndexBySname(item.sName)]}</div>
-
-              <Select
-                optionLabelProp="label"
-                className="mySelects"
-                style={{ width: 180 }}
-                defaultValue={options.length ? options[0].value : ""}
-                onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
-                onDropdownVisibleChange={async open => {
-                  if (open) {
-                    props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
-                  }
-                }}
-              >
-                {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
-              </Select>
-              <div className={styles.boxInput}>
-                {item?.selectImage ? (
+      ) : (
+        <div className={styles.boxBody} key={boxKey}>
+          <div className={styles.boxTop}>
+            {topBoxList.map((topItem, index) => (
+              <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>
+                <div className={styles.boxTitle}>{topItem.sName}</div>
+                {topItem?.selectImage ? (
                   <img
-                    src={item?.selectImage}
-                    alt={item.value}
-                    style={{
-                      width: 40,
-                      height: 30,
-                      marginRight: 8,
-                      position: "absolute",
-                      left: 20,
-                      top: -35,
-                      zIndex: 10,
-                    }}
+                    src={topItem?.selectImage}
+                    alt={topItem.value}
+                    style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, 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%" }}
-                />
+                <Select
+                  optionLabelProp="label"
+                  className="mySelects"
+                  style={{ width: 180 }}
+                  defaultValue={options.length ? options[0].value : ""}
+                  onSelect={(value, option) => handleSelect(value, option, index, 0)}
+                  onDropdownVisibleChange={async open => {
+                    if (open) {
+                      props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions
+                    }
+                  }}
+                >
+                  {!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>
               </div>
-            </div>
-          ))}
-        </div>
-        <div className={styles.boxBottom}>
-          <div className={styles.svgBox}>
-            <SvgBox {...svgBoxProps} />
+            ))}
           </div>
-          <div className={styles.content}>
-            {tableColum && tableColum.length
-              ? tableColum.map((item, index) => {
-                  const uniqueIndex = index + 9;
-                  return (
-                    <div key={uniqueIndex} className={styles.boxFlex}>
-                      <div className={styles.boxInput}>
-                        <div className={styles.text} style={{ width: "120px" }}>
-                          {item.showName}
-                        </div>
-                        <Input
-                          value={boxList[uniqueIndex]?.value}
-                          onChange={e => handleChange(e, uniqueIndex)}
-                          onFocus={e => handleFocus(e, uniqueIndex)}
-                          onBlur={e => handleBlur(e, uniqueIndex)}
-                          readOnly={!boxList[uniqueIndex]?.isEditable}
-                          style={{ width: " 80%" }}
-                        />
-                      </div>
-                    </div>
-                  );
-                })
-              : ""}
-            {boxBodyList && boxBodyList.length
-              ? boxBodyList.map((item, index) => {
-                  const uniqueIndex = index + 9 + tableColum.length;
-
-                  return (
-                    <div key={uniqueIndex} className={styles.boxFlex}>
-                      <div className={styles.boxInput}>
-                        <div className={styles.text} style={{ width: "120px" }}>
-                          {item.showName}
-                        </div>
-                        {boxList[uniqueIndex]?.selectImage ? (
-                          <img
-                            src={boxList[uniqueIndex]?.selectImage}
-                            alt={boxList[uniqueIndex].value}
-                            style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 120, top: 6, zIndex: 10 }}
+          <div className={styles.boxLeft}>
+            {leftBoxList.map((item, index) => (
+              <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
+                <div className={styles.boxTitle}>{titleList[index + 3]}</div>
+
+                <Select
+                  optionLabelProp="label"
+                  className="mySelects"
+                  style={{ width: 180 }}
+                  defaultValue={options.length ? options[0].value : ""}
+                  onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
+                  onDropdownVisibleChange={async open => {
+                    if (open) {
+                      props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
+                    }
+                  }}
+                >
+                  {!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,
+                      }}
+                    />
+                  ) : (
+                    ""
+                  )}
+                  <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>
+          <div className={styles.boxRight}>
+            {rightBoxList.map((item, index) => (
+              <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
+                <div className={styles.boxTitle}>{titleList[findIndexBySname(item.sName)]}</div>
+
+                <Select
+                  optionLabelProp="label"
+                  className="mySelects"
+                  style={{ width: 180 }}
+                  defaultValue={options.length ? options[0].value : ""}
+                  onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
+                  onDropdownVisibleChange={async open => {
+                    if (open) {
+                      props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
+                    }
+                  }}
+                >
+                  {!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,
+                      }}
+                    />
+                  ) : (
+                    ""
+                  )}
+
+                  <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>
+          <div className={styles.boxBottom}>
+            <div className={styles.svgBox}>
+              <SvgBox {...svgBoxProps} />
+            </div>
+            <div className={styles.content}>
+              {tableColum && tableColum.length
+                ? tableColum.map((item, index) => {
+                    const uniqueIndex = index + 9;
+                    return (
+                      <div key={uniqueIndex} className={styles.boxFlex}>
+                        <div className={styles.boxInput}>
+                          <div className={styles.text} style={{ width: "120px" }}>
+                            {item.showName}
+                          </div>
+                          <Input
+                            value={boxList[uniqueIndex]?.value}
+                            onChange={e => handleChange(e, uniqueIndex)}
+                            onFocus={e => handleFocus(e, uniqueIndex)}
+                            onBlur={e => handleBlur(e, uniqueIndex)}
+                            readOnly={!boxList[uniqueIndex]?.isEditable}
+                            style={{ width: " 80%" }}
                           />
-                        ) : (
-                          ""
-                        )}
-                        {isDefaultValue ? <div className={styles.defaultValue}>{boxList[uniqueIndex]?.value}</div> : ""}
-                        <Select
-                          optionLabelProp="label"
-                          className="mySelects"
-                          style={{ width: "80%" }}
-                          defaultValue={boxList[uniqueIndex]?.value}
-                          onSelect={(value, option) => handleSelect(value, option, uniqueIndex, 1)}
-                          onDropdownVisibleChange={async open => {
-                            if (open) {
-                              props.getSqlOptions(10); // 盒身
-                            }
-                          }}
-                        >
-                          {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
-                        </Select>
+                        </div>
                       </div>
-                    </div>
-                  );
-                })
-              : ""}
-            <div className={styles.boxFlexs}>
-              {tableDataList && tableDataList.length
-                ? tableDataList.map((item, index) => {
-                    const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length;
+                    );
+                  })
+                : ""}
+              {boxBodyList && boxBodyList.length
+                ? boxBodyList.map((item, index) => {
+                    const uniqueIndex = index + 9 + tableColum.length;
 
                     return (
-                      <div key={uniqueIndex} className={styles.boxInputs}>
-                        <div className={styles.text}>{item.sName}</div>
-                        <Input
-                          value={boxList[uniqueIndex]?.value}
-                          onChange={e => handleChange(e, uniqueIndex)}
-                          onFocus={e => handleFocus(e, uniqueIndex)}
-                          onBlur={e => handleBlur(e, uniqueIndex)}
-                          readOnly={!boxList[uniqueIndex]?.isEditable}
-                          style={{ width: " 60%" }}
-                        />
+                      <div key={uniqueIndex} className={styles.boxFlex}>
+                        <div className={styles.boxInput}>
+                          <div className={styles.text} style={{ width: "120px" }}>
+                            {item.showName}
+                          </div>
+                          {boxList[uniqueIndex]?.selectImage ? (
+                            <img
+                              src={boxList[uniqueIndex]?.selectImage}
+                              alt={boxList[uniqueIndex].value}
+                              style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 120, top: 6, zIndex: 10 }}
+                            />
+                          ) : (
+                            ""
+                          )}
+                          {isDefaultValue ? <div className={styles.defaultValue}>{boxList[uniqueIndex]?.value}</div> : ""}
+                          <Select
+                            optionLabelProp="label"
+                            className="mySelects"
+                            style={{ width: "80%" }}
+                            defaultValue={boxList[uniqueIndex]?.value}
+                            onSelect={(value, option) => handleSelect(value, option, uniqueIndex, 1)}
+                            onDropdownVisibleChange={async open => {
+                              if (open) {
+                                props.getSqlOptions(10); // 盒身
+                              }
+                            }}
+                          >
+                            {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
+                          </Select>
+                        </div>
                       </div>
                     );
                   })
                 : ""}
+              <div className={styles.boxFlexs}>
+                {tableDataList && tableDataList.length
+                  ? tableDataList.map((item, index) => {
+                      const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length;
+
+                      return (
+                        <div key={uniqueIndex} className={styles.boxInputs}>
+                          <div className={styles.text}>{item.sName}</div>
+                          <Input
+                            value={boxList[uniqueIndex]?.value}
+                            onChange={e => handleChange(e, uniqueIndex)}
+                            onFocus={e => handleFocus(e, uniqueIndex)}
+                            onBlur={e => handleBlur(e, uniqueIndex)}
+                            readOnly={!boxList[uniqueIndex]?.isEditable}
+                            style={{ width: " 60%" }}
+                          />
+                        </div>
+                      );
+                    })
+                  : ""}
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      )}
     </AntdDraggableModal>
   );
 };
diff --git a/src/components/Common/Typesetting/typesetting.js b/src/components/Common/Typesetting/typesetting.js
index 88faa4e..463eaaa 100644
--- a/src/components/Common/Typesetting/typesetting.js
+++ b/src/components/Common/Typesetting/typesetting.js
@@ -38,7 +38,7 @@ const Typesetting = props => {
     bAdvancedSetting, // 高级设置
     sSvgPath,
     dL = 0,
-    dW = 0
+    dW = 0,
   } = slaveRowData;
   const { masterData, selectedNode, slaveData } = state;
   if (!masterData) return;
@@ -90,8 +90,8 @@ const Typesetting = props => {
   // dHorizontal = 1;
   // 如果需要自定义排版数
   // 确认是竖向排列还是横向排列
-  const L = slaveRowData.dL? Number(dL) : Number(masterData?.dLength) || 0;
-  const W = slaveRowData.dW? Number(dW) : masterData?.dWidth || 0;
+  const L = slaveRowData.dL ? Number(dL) : Number(masterData?.dLength) || 0;
+  const W = slaveRowData.dW ? Number(dW) : masterData?.dWidth || 0;
   const H = masterData?.dWidth || 0;
   const D = masterData?.dHeight || 0;
   // 动态计算公式值
@@ -188,7 +188,7 @@ const Typesetting = props => {
     ...result,
   };
   Object.keys(variabless).forEach(key => {
-    if (variabless[key] === null || variabless[key] === undefined || variabless[key] === '') {
+    if (variabless[key] === null || variabless[key] === undefined || variabless[key] === "") {
       variabless[key] = 0;
     }
   });
@@ -205,7 +205,6 @@ const Typesetting = props => {
   const boxWidthOffset = evaluateFormula(sSecondLongitudinalOffset, variabless); // 第二列纵向偏移
   const isVertical = sSettingMethod === "从上到下"; // true 表示竖向排列，false 表示横向排列 sSettingMethod === '从上到下'
   const reference = sSGroupOffset === "首盒"; // 第三列参考
-
   // 计算内层盒子尺寸 加上间距
   let jInnerHeight = innerHeight;
   let jInnerWidth = innerWidth;
@@ -221,13 +220,14 @@ const Typesetting = props => {
     jInnerWidth = innerWidth;
   }
 
-  const innerHeightCombined = isVertical
-    ? jInnerHeight * 2 + dSWidthOffset + dFWidthOffset + dXBJJ
-    : Math.max(jInnerHeight + dFWidthOffset, jInnerHeight + dSWidthOffset) + dXBJJ; // 计算内层盒子高度 从上向下排列 取首盒加偏移量和次盒加偏移量最大的值  从左往右排列 盒子尺寸 * 2 加上首盒偏移量和次盒偏移量
+  const innerHeightCombined = (isVertical
+    ? jInnerHeight * 2 + dSWidthOffset + dFWidthOffset
+    : Math.max(jInnerHeight + dFWidthOffset, jInnerHeight + dSWidthOffset)) + dXBJJ; // 计算内层盒子高度 从上向下排列 取首盒加偏移量和次盒加偏移量最大的值  从左往右排列 盒子尺寸 * 2 加上首盒偏移量和次盒偏移量
   // 计算内层盒子宽度 从上向下排列 取首盒加偏移量和次盒加偏移量最大的值  从左往右排列 盒子尺寸 * 2 加上首盒偏移量和次盒偏移量
-  const innerWidthCombined = isVertical
-    ? Math.max(jInnerWidth + dFLengthOffset, jInnerWidth + dSLengthOffset) + dYBJJ
-    : jInnerWidth * 2 + dSLengthOffset + dFLengthOffset + dYBJJ;
+  const innerWidthCombined = (isVertical
+    ? Math.max(jInnerWidth + dFLengthOffset, jInnerWidth + dSLengthOffset)
+    : jInnerWidth * 2 + dSLengthOffset + dFLengthOffset) + dYBJJ;
+
   const style = {
     width: `${outerWidth}px`,
     height: `${outerHeight}px`,
@@ -245,19 +245,19 @@ const Typesetting = props => {
 
   let rowsMaxLength =
     rows * (innerHeightCombined + boxWidthOffset + (reference ? 0 : dSWidthOffset) + dXBJJ) + dSBLB + dXBLB - (reference ? 0 : dSWidthOffset);
-  while (colsMaxLength >= outerWidth && cols > 0) {
+  while (colsMaxLength > outerWidth && cols > 0) {
     cols = cols - 1;
     colsMaxLength = cols * (innerWidthCombined + boxLengthOffset + (reference ? 0 : dSLengthOffset) + dYBJJ);
   }
 
-  while (rowsMaxLength >= outerHeight && rows > 0) {
+  while (rowsMaxLength > outerHeight && rows > 0) {
     rows = rows - 1;
     rowsMaxLength = rows * (innerHeightCombined + boxWidthOffset + (reference ? 0 : dSWidthOffset) + dXBJJ);
   }
   // 最大上机长 上机宽 开料尺寸
   // 计算剩余空间 每组都算上偏移量 那么剩余需要加上后面偏移的总量
-  const remainingWidth = outerWidth - colsMaxLength  - (boxLengthOffset + (reference ? 0 : dSLengthOffset) + dYBJJ);
-  const remainingHeight = outerHeight - rowsMaxLength - (boxWidthOffset + (reference ? 0 : dSWidthOffset) + dXBJJ);
+  const remainingWidth = outerWidth - colsMaxLength + (boxLengthOffset + (reference ? 0 : dSLengthOffset));
+  const remainingHeight = outerHeight - rowsMaxLength + (boxWidthOffset + (reference ? 0 : dSWidthOffset));
   //   const remainingWidth =
   //   outerWidth -
   //   (cols * (innerWidthCombined + boxLengthOffset + (reference ? 0 : dSLengthOffset)) - boxLengthOffset - (reference ? 0 : dSLengthOffset));
@@ -268,8 +268,8 @@ const Typesetting = props => {
   const commonHeightCheck = remainingHeight > jInnerHeight + dXBJJ;
   const commonWidthCheck = remainingWidth > jInnerWidth + dYBJJ;
   const isCustomized = bAdvancedSetting;
-
   let remaining = isVertical ? commonHeightCheck : commonWidthCheck;
+  console.log(dSLengthOffset,'次盒横向偏移量');
   
   // 判断
   // const remaining = false;
@@ -336,7 +336,7 @@ const Typesetting = props => {
     <div
       key={`${col}-${row}-${index}`}
       style={{
-        width: `${innerWidthCombined}px`,
+        width: `${ innerWidthCombined }px`,
         height: `${innerHeightCombined}px`,
         display: "flex",
         justifyContent: "center",
@@ -380,7 +380,7 @@ const Typesetting = props => {
       <div
         key={`${col}-${row}-${index}-1`}
         style={{
-          width: `${iSAngle === 90 || iSAngle === 270 ? jInnerWidth : innerWidth}px`,
+          width: `${(iSAngle === 90 || iSAngle === 270 ? jInnerWidth : innerWidth)}px`,
           height: `${iSAngle === 90 || iSAngle === 270 ? jInnerHeight : innerHeight}px`,
           display: "flex",
           justifyContent: "center",
@@ -458,12 +458,12 @@ const Typesetting = props => {
       if (reference) {
         return col === 0 ? leftPosition : leftPosition;
       }
-      return col === 0 ? leftPosition : leftPosition + boxLengthOffset * col;
+      return col === 0 ? leftPosition : leftPosition + (boxLengthOffset + dYBJJ) * col;
     } else {
       if (reference) {
         return col === 0 ? leftPosition : leftPosition;
       }
-      return col === 0 ? leftPosition : leftPosition + boxLengthOffset * col + dSLengthOffset * col;
+      return col === 0 ? leftPosition : leftPosition + (boxLengthOffset + dYBJJ) * col + dSLengthOffset * col;
     }
   };
   // 计算上偏移
@@ -505,59 +505,59 @@ const Typesetting = props => {
     if (cols > 0) {
       for (let col = 0; col < cols; col++) {
         const leftPosition = col * innerWidthCombined;
-        const topPosition = 0 * (innerHeightCombined + dXBJJ);
+        const topPosition = 0 * (innerHeightCombined );
         innerDivs.push(createBoxOne(col, 0, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
       }
     }
     if (rows > 0) {
       for (let row = 0; row < rows; row++) {
         const leftPosition = 0 * innerWidthCombined;
-        const topPosition = row * (innerHeightCombined + dXBJJ);
+        const topPosition = row * (innerHeightCombined);
         innerDivs.push(createBoxOne(0, row, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
       }
     }
   } else {
+    let hasPushed = false; // 标志变量
     for (let col = 0; col < cols; col++) {
       for (let row = 0; row < rows; row++) {
         const leftPosition = col * innerWidthCombined;
-        const topPosition = row * (innerHeightCombined + dXBJJ);
+        const topPosition = row * (innerHeightCombined);
         innerDivs.push(createBox(col, row, 1, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
       }
       // 如果可以放下首盒
-      if (remaining) {
-        if (isVertical) {
-          let leftPosition = 0;
+    }
+    if (remaining) {
+      if (isVertical) {
+        let leftPosition = 0;
+        let topPosition = 0;
+        if (reference) {
+          // 是否首盒
+          // 首盒的上边距下边距 末尾盒子的上下边距 添加那一行的上边距
+          leftPosition = cols - 1 * innerWidthCombined + dFLengthOffset;
+          topPosition = rows * (innerHeightCombined ) + dFWidthOffset;
+        } else {
+          leftPosition = cols - 1 * innerWidthCombined;
+          topPosition = rows * (innerHeightCombined);
+        }
+        innerDivs.push(createBoxOne(cols - 1, rows, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
+      } else {
+        // 只会在横向排的时候
+        for (let index = 0; index < rows; index++) {
+          // 先默认为首盒参考
           let topPosition = 0;
+          let leftPosition = 0;
           if (reference) {
-            // 是否首盒
-            // 首盒的上边距下边距 末尾盒子的上下边距 添加那一行的上边距
-            leftPosition = col * innerWidthCombined + dFLengthOffset;
-            topPosition = rows * (innerHeightCombined + dXBJJ) + dFWidthOffset;
+            topPosition = index * (innerHeightCombined + boxWidthOffset) ;
+            leftPosition = cols * (innerWidthCombined + boxLengthOffset) ;
           } else {
-            leftPosition = col * innerWidthCombined;
-            topPosition = rows * (innerHeightCombined + dXBJJ);
-          }
-          innerDivs.push(createBoxOne(col, rows, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
-        } else {
-          for (let index = 0; index < rows; index++) {
-            // 先默认为首盒参考
-            let topPosition = 0;
-            let leftPosition = 0;
-            if (reference) {
-              topPosition = index * (innerHeightCombined + boxWidthOffset);
-              leftPosition = cols * (innerWidthCombined + boxLengthOffset + dXBJJ);
-            } else {
-              topPosition = index * (innerHeightCombined + boxWidthOffset + dSWidthOffset + dXBJJ);
-              leftPosition = cols * (innerWidthCombined + boxLengthOffset + dSLengthOffset);
-            }
-            innerDivs.push(createDiv(col, index, 3, leftPosition + col * dYBJJ, topPosition + index * dXBJJ, iFAngle, DisableMateriallIcon));
+            topPosition = index * (innerHeightCombined + boxWidthOffset + dSWidthOffset) ;
+            leftPosition = cols * (innerWidthCombined + boxLengthOffset + dSLengthOffset) + dYBJJ;
           }
+          innerDivs.push(createDiv(cols - 1, index, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
         }
       }
     }
   }
-  console.log(cols,rows,'cols');
-  
   // 判断展开长展开宽是否变化
   if (dPartsLength !== innerWidth && !innerDivs.length) {
     setDPartsLength(innerWidth);
@@ -575,9 +575,10 @@ const Typesetting = props => {
     const propsDataHeight = Number(propsData.props.style.height.slice(0, -2));
     const propsDataTop = Number(propsData.props.style.top.slice(0, -2));
     // 判断列是否是单独的
-
+    console.log(cols,rows,'rows');
+    
     const newMaterialLength = parseFloat(propsDataLeft + (remaining ? jInnerWidth : innerWidthCombined) + dZBLB + dYBLB).toFixed(2); // 原纸长
-    const newMaterialWidth = parseFloat(propsDataTop + propsDataHeight + dSBLB + dXBLB).toFixed(2);
+    const newMaterialWidth = parseFloat(propsDataTop + propsDataHeight + dSBLB + dXBLB - (rows >= 1 ? dXBJJ : 0)).toFixed(2);
 
     // 计算开数
     let dSinglePQty = isVertical
@@ -699,7 +700,7 @@ const Typesetting = props => {
     Number(slaveDataDetail?.dMaxWidth) >= Number(slaveRowData?.dMachineWidth);
 
   const isShow = slaveRowData && slaveRowData.dMachineLength && slaveRowData.dMaxWidth && slaveRowData.dMaxLength && isMax && innerDivs.length > 0;
-  
+
   const confirmParam = commonFunc.showLocalMessage(props, "confirmParam", "排版尺寸大于上机尺寸，请确认参数!");
   const isJuantong = selectedNode.sTypeKey === "juantong";
   if (isCustomized && !isShow) {
--
libgit2 0.22.2