diff --git a/src/components/Common/BoxDesignCompontent/compontents/doubleLayer.js b/src/components/Common/BoxDesignCompontent/compontents/doubleLayer.js
index 7d526ba..3a252fd 100644
--- a/src/components/Common/BoxDesignCompontent/compontents/doubleLayer.js
+++ b/src/components/Common/BoxDesignCompontent/compontents/doubleLayer.js
@@ -1,7 +1,5 @@
 /* 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";
@@ -14,8 +12,69 @@ 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);
+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;
+  const [tableData, setTableData] = useState({});
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(false); // 加载状态
+
+  addState.getSqlOptions = async type => {
+    setLoading(true);
+    const { app, token, makeConfig } = props;
+    // const quickQuoteConfig = config.gdsconfigformslave.find(item => item.sControlName === "BtnQuickQuote") || {};
+    const { sId } = makeConfig;
+    if (!sId) return;
+    const url = `${commonConfig.server_host}business/getSelectLimit/${sId}?sModelsId=${sId}`;
+    const body = {
+      pageNum: 1,
+      pageSize: 20,
+      sKeyUpFilterName: "",
+      sSqlCondition: {
+        sType: type,
+      },
+    };
+    const data = await commonServices.postValueService(token, body, url);
+    if (data) {
+      const option = data.data.dataset.rows;
+      option.sort((a, b) => {
+        if (a.sCode === "") {
+          return -1; // 将 id 为 1 的元素排在前面
+        }
+        if (b.sCode === "") {
+          return 1;
+        }
+        return 0; // 其他元素保持原顺序
+      });
+      setOptions(data.data.dataset.rows);
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (!formData.length) return;
+
+    const data = formData[0].gdsconfigformslave.filter(Item => Item.bVisible);
+    setTableData(data);
+    props.onSaveState(pre => ({ ...pre, data }));
+  }, [formData.length]);
+
+  return {
+    ...props,
+    tableData,
+    ...addState,
+    options,
+    loading,
+  };
+};
+const BoxDesignCompontent = baseProps => {
+  const props = BoxDesignEvent(baseProps);
+  const { onCancel, onOk, title, loading, masterConfig, bFullScreen, tableData, options = [] } = props;
+  const { slaveData = {}, masterData = {} } = props.state;
+  const { boxVisible } = baseProps;
   const [boxList, setBoxList] = useState([]);
   const [tableColum, setTableColum] = useState([]); // 盒身类型
   const [tableDataList, setTableDataList] = useState([]); // 盒长
@@ -24,298 +83,954 @@ const DoubleLayerBox = props => {
   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 = [
+  const [boxKey, setBoxKey] = useState(new Date().getTime());
+  if (!boxVisible) return "";
+  useEffect(() => {
+    if (tableData && tableData.length) {
+      const newTableColum = tableData.map(item => {
+        return {
+          ...item,
+          isEditable: true,
+          isSelect: false,
+          selectImage: null,
+          value: "",
+        };
+      });
+      const newList = newTableColum.filter(
+        item => item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽")
+      );
+      const newLists = newTableColum.filter(
+        item =>
+          !(item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽") || item.showName.includes("盒身"))
+      );
+      const bodyList = newTableColum.filter(item => item.showName.includes("盒身"));
+      newLists.forEach(x => {
+        if (x.showName === "盒型类别") {
+          x.showName = "盒型名称";
+        }
+      });
+      setTableColum(newLists);
+      setBoxBodyList(bodyList);
+      newList.forEach(item => {
+        let name = "";
+        if (item.showName === "盒长") {
+          name = item.showName + "(L)";
+        } else if (item.showName === "盒宽") {
+          name = item.showName + "(W)";
+        } else if (item.showName === "盒高") {
+          name = item.showName + "(D)";
+        }
+        item.sName = name;
+      });
+      setTableDataList(newList);
+    }
+  }, [tableData]);
+  const titleList = [
+    "上方盒舌",
+    "盒底组件",
+    "下方盒舌",
+    "左(上)插位组件",
+    "左贴边位",
+    "左(下)插位组件",
+    "右(上)插位组件",
+    "右贴边位",
+    "右(下)插位组件",
+  ];
+  const titleList1 = [
+    { name: "上方盒舌", value: "dSFHS" },
+    { name: "盒底组件", value: "dHDC" },
+    { name: "下方盒舌", value: "dXFHS" },
+    { name: "左(上)插位组件", value: "dZSCW" },
     { name: "左贴边位", value: "dZTBW" },
-    { name: "上插位组件", value: "dZSCW" },
+    { name: "左(下)插位组件", value: "dZXCW" },
+    { name: "右(上)插位组件", value: "dYSCW" },
     { name: "右贴边位", value: "dYTBW" },
+    { name: "右(下)插位组件", value: "dYXCW" },
   ];
-  setTopBoxList(
-    top.map(item => {
-      boxData.sName = item.name;
-      boxData.showName = item.name;
-      boxData.code = item.value;
-      return boxData;
-    })
-  );
+  const newBoxList = [];
+
+  // const boxs = titleList.length + tableData.length;
+  tableColum.forEach(item => {
+    titleList.push(item.showName);
+  });
+  boxBodyList.forEach(item => {
+    titleList.push(item.showName);
+  });
+  tableDataList.forEach(item => {
+    titleList.push(item.showName);
+  });
+  // 盒身信息
+  titleList.forEach((item, index) => {
+    newBoxList.push({
+      value: "",
+      sName: item,
+      isEditable: true,
+      isSelect: false,
+      selectValue: null,
+      selectLabel: "",
+      selectImage: null,
+      type: null,
+      show: true,
+      showName: item, // 参数名称
+      sAssignFormula: null,
+    });
+  });
+  // 部件信息
+  if (slaveData && slaveData.length) {
+    slaveData.forEach((item, index) => {
+      const i = titleList1.findIndex(i => {
+        return i.value === item.sCode;
+      });
+      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;
+      }
+    });
+  }
+  // 盒身信息
+  if (masterData) {
+    newBoxList.forEach((item, index) => {
+      if (item.sName === "盒身") {
+        newBoxList[index].value = masterData.sBoxBody;
+        newBoxList[index].selectImage = masterData.sMakeUpPath;
+        newBoxList[index].type = masterData.sTypes;
+      } else if (item.sName === "盒长") {
+        newBoxList[index].value = masterData.dBoxLength;
+      } else if (item.sName === "盒宽") {
+        newBoxList[index].value = masterData.dBoxWidth;
+      } else if (item.sName === "盒高") {
+        newBoxList[index].value = masterData.dBoxHeight;
+      } else if (item.sName === "盒型名称") {
+        newBoxList[index].value = masterData.sName;
+      }
+    });
+  }
+  // 有数据的时候 盒型设计需要赋值
+  useEffect(() => {
+    if (newBoxList.length > 0 && !arraysAreEqual(boxList, newBoxList)) {
+      setBoxList(newBoxList);
+    }
+  }, [newBoxList]);
+  console.log(boxList, "boxList");
+
+  const arraysAreEqual = (arr1, arr2) => {
+    if (arr1.length !== arr2.length) return false;
+    return arr1.every((item, index) => item.sName === arr2[index].sName);
+  };
+  useEffect(() => {
+    const type = boxList.find(item => item.sName === "盒身")?.type;
+    const updateLists = () => {
+      const topBoxFilter = item => item.sName === "上方盒舌" || item.sName === "盒底组件" || item.sName === "下方盒舌";
+
+      const leftBoxFilter = item => item.sName === "左(上)插位组件" || item.sName === "左贴边位" || item.sName === "左(下)插位组件";
+
+      const rightBoxFilter = item => item.sName === "右(上)插位组件" || item.sName === "右贴边位" || item.sName === "右(下)插位组件";
+
+      if (type === "2" || type === 2 || type === "4" || type === 4 || type === 3 || type === "3" || type === 5 || type === "5") {
+        const box = [...boxList];
+        box.forEach(x => {
+          x.show = true;
+        });
+        if (type === "2" || type === 2) {
+          box.forEach(x => x.sName === "盒底组件" && (x.show = false));
+        } else if (type === "4" || type === 4) {
+          const title = ["盒底组件", "左贴边位", "右贴边位"];
+          box.forEach(x => title.includes(x.sName) && (x.show = false));
+        } else if (type === "3" || type === 3) {
+          const title = ["左(上)插位组件", "右(下)插位组件", "盒底组件"];
+          box.forEach(x => title.includes(x.sName) && (x.show = false));
+        } else if (type === "5" || type === 5) {
+          const title = ["盒底组件"];
+          box.forEach(x => title.includes(x.sName) && (x.show = false));
+        }
+        setTopBoxList(box.filter(topBoxFilter));
+        setLeftBoxList(box.filter(leftBoxFilter));
+        if (type === 3 || type === "3") {
+          setRightBoxList(box.filter(rightBoxFilter).reverse());
+        } else {
+          setRightBoxList(box.filter(rightBoxFilter));
+        }
+      } else if (type === "7" || type === 7) {
+        const box = [...boxList];
+        box.forEach(x => {
+          x.show = true;
+        });
+        const title = ["盒底组件", "左贴边位", "右贴边位", "上方盒舌", "下方盒舌"];
+        box.forEach(x => title.includes(x.sName) && (x.show = false));
+        setTopBoxList(box.filter(topBoxFilter));
+        setLeftBoxList(box.filter(leftBoxFilter));
+        setRightBoxList(box.filter(rightBoxFilter));
+      } else {
+        const box = [...boxList];
+        box.forEach(x => {
+          x.show = true;
+        });
+        setTopBoxList(box.filter(topBoxFilter));
+        setLeftBoxList(box.filter(leftBoxFilter));
+        setRightBoxList(box.filter(rightBoxFilter));
+      }
+    };
+
+    updateLists();
+  }, [boxList]);
+  const boxType = boxList.find(item => item.sName === "盒身")?.type;
+
+  const handleFocus = (e, index) => {
+    if (boxList && boxList.length) {
+      const updatedBoxList = [...boxList];
+      updatedBoxList[index].isEditable = true;
+      setBoxList(updatedBoxList);
+    }
+  };
+
+  const handleBlur = (e, index) => {
+    if (boxList && boxList.length) {
+      const updatedBoxList = [...boxList];
+      updatedBoxList[index].isEditable = false;
+      setBoxList(updatedBoxList);
+    }
+  };
+
+  const handleChange = (e, index) => {
+    const updatedBoxList = [...boxList];
+    updatedBoxList[index].value = e.target.value;
+    setBoxList(updatedBoxList);
+  };
+
+  const handleChangeName = (e, index) => {
+    const updatedBoxList = [...boxList];
+    updatedBoxList[index].showName = e.target.value;
+    setBoxList(updatedBoxList);
+  };
+
+  const handleSelect = (name, selectConfig, index, type) => {
+    let updatedBoxList = [...boxList];
+    updatedBoxList[index].type = name;
+    updatedBoxList[index].selectImage = selectConfig.image;
+    // 选择盒身数据全部清空
+
+    const typeList = [1, 2, 3, 4];
+    if (typeList.includes(type)) {
+      const table1 = tableColum.map(x => x.showName);
+      const table2 = boxBodyList.map(x => x.showName);
+      const table3 = tableDataList.map(x => x.showName);
+      const tableTitle = table1.concat(table2, table3);
+      updatedBoxList.forEach((x, i) => {
+        if (i !== index && !tableTitle.includes(x.sName)) {
+          x.value = "";
+          x.type = null;
+          x.selectValue = null;
+          x.selectImage = null;
+          // x.showName =
+        }
+      });
+      setIsDefaultValue(false);
+      updatedBoxList[index].value = selectConfig.label;
+    }
+    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}`;
+    return imageUrl;
+  };
+  console.log(boxList, "boxList");
+
+  // 下来框
+  const renderOptionWithImage = option => {
+    return (
+      <Select.Option key={option.sId} value={option.sCode} label={option.sName} image={getImage(option.sMakeUpPath)}>
+        <div style={{ display: "flex", alignItems: "center" }}>
+          {option.sMakeUpPath ? <img src={getImage(option.sMakeUpPath)} style={{ width: 24, height: 24, marginRight: 8 }} /> : ""}
+          <span>{option.sName}</span>
+        </div>
+      </Select.Option>
+    );
+  };
   const svgBoxProps = {
     ...props,
-    boxList: [],
+    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 }}
-              />
-            ) : (
-              ""
-            )}
+  const dobuleProps = {
+    ...props,
+    renderOptionWithImage,
+  };
+  // 计算展长展宽
+  // 创建盒型
+  const submit = () => {
+    const newSlaveData = [];
+    // 判断是新增还是修改
 
-            <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>
+    // 存储子表数据
+    boxList.forEach((item, index) => {
+      const i = titleList1.findIndex(i => i.name === item.sName);
+      const slave = slaveData.find(z => z.sCode === titleList1[i]?.value);
+      if (i !== -1) {
+        const data = {
+          ...slaveData[0],
+          handleType: slave ? "update" : "add",
+          sName: item.showName,
+          sCode: titleList1[i].value,
+          iValue: item.value,
+          iOrder: index + 1,
+          iRowNum: index + 1,
+          sId: slave ? slave.sId : commonUtils.createSid(),
+          sMakeUpPath: item.selectImage,
+          sTypes: item.type,
+          bVisible: item.value ? true : false,
+          sParentId: masterData.sId,
+          sAssignFormula: item.sAssignFormula,
+        };
+        // if (item.value !== "") {
+        newSlaveData.push(data);
+        // }
+      }
+    });
+    const submitSlaveData = [];
+    slaveData.forEach(item => {
+      const i = newSlaveData.findIndex(x => x.scode === item.code);
+      if (i === -1) {
+        submitSlaveData.push({ ...item, handleType: "del" });
+      }
+    });
+    submitSlaveData.concat(newSlaveData);
+
+    // 处理计算公式
+    // 计算展长公式 sLengthFormula
+    let sLengthFormula = "";
+    let sWidthFormula = "";
+    const boxType = boxList.find(item => item.sName === "盒身")?.type;
+    const boxLength = Number(boxList.find(item => item.sName === "盒长")?.value);
+    const boxWidth = Number(boxList.find(item => item.sName === "盒宽")?.value);
+    const boxHeight = Number(boxList.find(item => item.sName === "盒高")?.value);
+    const zxcw = boxList.find(x => x.sName === "左(下)插位组件");
+    const zscw = boxList.find(x => x.sName === "左(上)插位组件");
+    const yscw = boxList.find(x => x.sName === "右(上)插位组件");
+    const yxcw = boxList.find(x => x.sName === "右(下)插位组件");
+    const hdzj = boxList.find(x => x.sName === "盒底组件");
+    const zxcwType = zxcw?.type;
+    const zxcwValue = zxcw?.value;
+    const zscwType = zscw?.type;
+    const zscwValue = zscw?.value;
+    const yscwType = yscw?.type;
+    const yscwValue = yscw?.value;
+    const yxcwType = yxcw?.type;
+    const yxcwValue = yxcw?.value;
+    let leftTopValue = 0;
+    let leftTop = "";
+    let rightTopValue = 0;
+    let rightTop = "";
+    let leftBottomValue = 0;
+    let leftBottom = "";
+    let rightBottomValue = 0;
+    let rightBottom = "";
+    if (boxType && boxType === "1") {
+      // 四面盒
+      const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value;
+      const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value;
+      sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L * 2 + W * 2" + (ytbw ? " +dYTBW" : "");
 
-            <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 ? (
+      if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") {
+        leftBottomValue = Number(zxcwValue) + boxHeight;
+        leftBottom = " + dZXCW + W";
+      } else if (zxcwType === "4002" || zxcwType === "4003") {
+        leftBottomValue = Number(zxcwValue);
+        leftBottom = " + dZXCW";
+      } else if (zxcwType === "4004") {
+        leftBottomValue = Number(zxcwValue) + boxHeight * 2;
+        leftBottom = " + dZXCW + W * 2";
+      } else if (zxcwType === "4005") {
+        leftBottomValue = boxHeight * 2;
+        leftBottom = "+ W * 2";
+      }
+      if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") {
+        rightTopValue = Number(yscwValue) + boxHeight;
+        rightTop = "dYSCW + W + ";
+      } else if (yscwType === "6002" || yscwType === "6003") {
+        rightTopValue = Number(yscwValue);
+        rightTop = "dYSCW +  ";
+      } else if (yscwType === "6004") {
+        rightTopValue = Number(yscwValue) + boxHeight * 2;
+        rightTop = "dYSCW + W * 2+ ";
+      } else if (yscwType === "6005") {
+        rightTopValue = boxHeight * 2;
+        rightTop = "W * 2+ ";
+      }
+      if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") {
+        leftTopValue = Number(zscwValue) + boxHeight;
+        leftTop = "dZSCW + W +";
+      } else if (zscwType === "3002" || zscwType === "3003") {
+        leftTopValue = Number(zscwValue);
+        leftTop = "dZSCW +";
+      } else if (zscwType === "3004") {
+        leftTopValue = Number(zscwValue) + boxHeight * 2;
+        leftTop = "dZSCW + W * 2 +";
+      } else if (zscwType === "3005") {
+        leftTopValue = boxHeight * 2;
+        leftTop = "W * 2 +";
+      }
+      if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") {
+        rightBottomValue = Number(yxcwValue) + boxHeight;
+        rightBottom = "+ dYXCW + W";
+      } else if (yxcwType === "7002" || yxcwType === "7003") {
+        rightBottomValue = Number(yxcwValue);
+        rightBottom = "+ dYXCW ";
+      } else if (yxcwType === "7004") {
+        rightBottomValue = Number(yxcwValue) + boxHeight * 2;
+        rightBottom = "+ dYXCW + W * 2";
+      } else if (yxcwType === "7005") {
+        rightBottomValue = boxHeight * 2;
+        rightBottom = "+ W * 2";
+      }
+      sWidthFormula =
+        (leftTopValue > rightTopValue ? leftTop : rightTop) +
+        "D" +
+        (hdzj ? " + dHDC" : leftBottomValue > rightBottomValue ? leftBottom : rightBottom);
+    } else if (boxType && boxType === "2") {
+      // 单折
+      const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value;
+      const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value;
+      sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L * 2 + W" + (ytbw ? " +dYTBW" : "");
+      if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") {
+        leftBottomValue = Number(zxcwValue) + boxHeight;
+        leftBottom = " + dZXCW + W";
+      } else if (zxcwType === "4002" || zxcwType === "4003") {
+        leftBottomValue = Number(zxcwValue);
+        leftBottom = " + dZXCW";
+      } else if (zxcwType === "4004") {
+        leftBottomValue = Number(zxcwValue) + boxHeight * 2;
+        leftBottom = " + dZXCW + W * 2";
+      } else if (zxcwType === "4005") {
+        leftBottomValue = boxHeight * 2;
+        leftBottom = "+ W * 2";
+      }
+      if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") {
+        rightTopValue = Number(yscwValue) + boxHeight;
+        rightTop = "dYSCW + W + ";
+      } else if (yscwType === "6002" || yscwType === "6003") {
+        rightTopValue = Number(yscwValue);
+        rightTop = "dYSCW +  ";
+      } else if (yscwType === "6004") {
+        rightTopValue = Number(yscwValue) + boxHeight * 2;
+        rightTop = "dYSCW + W * 2+ ";
+      } else if (yscwType === "6005") {
+        rightTopValue = boxHeight * 2;
+        rightTop = "W * 2+ ";
+      }
+      if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") {
+        leftTopValue = Number(zscwValue) + boxHeight;
+        leftTop = "dZSCW + W +";
+      } else if (zscwType === "3002" || zscwType === "3003") {
+        leftTopValue = Number(zscwValue);
+        leftTop = "dZSCW +";
+      } else if (zscwType === "3004") {
+        leftTopValue = Number(zscwValue) + boxHeight * 2;
+        leftTop = "dZSCW + W * 2 +";
+      } else if (zscwType === "3005") {
+        leftTopValue = boxHeight * 2;
+        leftTop = "W * 2 +";
+      }
+      if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") {
+        rightBottomValue = Number(yxcwValue) + boxHeight;
+        rightBottom = "+ dYXCW + W";
+      } else if (yxcwType === "7002" || yxcwType === "7003") {
+        rightBottomValue = Number(yxcwValue);
+        rightBottom = "+ dYXCW ";
+      } else if (yxcwType === "7004") {
+        rightBottomValue = Number(yxcwValue) + boxHeight * 2;
+        rightBottom = "+ dYXCW + W * 2";
+      } else if (yxcwType === "7005") {
+        rightBottomValue = boxHeight * 2;
+        rightBottom = "+ W * 2";
+      }
+      sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom);
+    } else if (boxType && boxType === "3") {
+      const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value;
+      const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value;
+      sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L + W * 2" + (ytbw ? " +dYTBW" : "");
+      if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") {
+        leftBottomValue = Number(zxcwValue) + boxHeight;
+        leftBottom = " + dZXCW + W";
+      } else if (zxcwType === "4002" || zxcwType === "4003") {
+        leftBottomValue = Number(zxcwValue);
+        leftBottom = " + dZXCW";
+      } else if (zxcwType === "4004") {
+        leftBottomValue = Number(zxcwValue) + boxHeight * 2;
+        leftBottom = " + dZXCW + W * 2";
+      } else if (zxcwType === "4005") {
+        leftBottomValue = boxHeight * 2;
+        leftBottom = "+ W * 2";
+      }
+      if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") {
+        rightTopValue = Number(yscwValue) + boxHeight;
+        rightTop = "dYSCW + W + ";
+      } else if (yscwType === "6002" || yscwType === "6003") {
+        rightTopValue = Number(yscwValue);
+        rightTop = "dYSCW +  ";
+      } else if (yscwType === "6004") {
+        rightTopValue = Number(yscwValue) + boxHeight * 2;
+        rightTop = "dYSCW + W * 2+ ";
+      } else if (yscwType === "6005") {
+        rightTopValue = boxHeight * 2;
+        rightTop = "W * 2+ ";
+      }
+      if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") {
+        leftTopValue = Number(zscwValue) + boxHeight;
+        leftTop = "dZSCW + W +";
+      } else if (zscwType === "3002" || zscwType === "3003") {
+        leftTopValue = Number(zscwValue);
+        leftTop = "dZSCW +";
+      } else if (zscwType === "3004") {
+        leftTopValue = Number(zscwValue) + boxHeight * 2;
+        leftTop = "dZSCW + W * 2 +";
+      } else if (zscwType === "3005") {
+        leftTopValue = boxHeight * 2;
+        leftTop = "W * 2 +";
+      }
+      if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") {
+        rightBottomValue = Number(yxcwValue) + boxHeight;
+        rightBottom = "+ dYXCW + W";
+      } else if (yxcwType === "7002" || yxcwType === "7003") {
+        rightBottomValue = Number(yxcwValue);
+        rightBottom = "+ dYXCW ";
+      } else if (yxcwType === "7004") {
+        rightBottomValue = Number(yxcwValue) + boxHeight * 2;
+        rightBottom = "+ dYXCW + W * 2";
+      } else if (yxcwType === "7005") {
+        rightBottomValue = boxHeight * 2;
+        rightBottom = "+ W * 2";
+      }
+      sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom);
+    } else if (boxType && boxType === "4") {
+      // 天地盒
+      const zxcw = boxList.find(x => x.sName === "左(下)插位组件");
+      const zscw = boxList.find(x => x.sName === "左(上)插位组件");
+      const yscw = boxList.find(x => x.sName === "右(上)插位组件");
+      const yxcw = boxList.find(x => x.sName === "右(下)插位组件");
+      const zxcwType = zxcw?.type;
+      const zxcwValue = zxcw?.value;
+      const zscwType = zscw?.type;
+      const zscwValue = zscw?.value;
+      const yscwType = yscw?.type;
+      const yscwValue = yscw?.value;
+      const yxcwType = yxcw?.type;
+      const yxcwValue = yxcw?.value;
+      let leftValue = "";
+      let rightValue = "";
+      let topValue = "";
+      let bottomValue = "";
+      if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") {
+        // leftValue = leftValue + Number(zxcwValue) + boxHeight * 2;
+        leftValue = "dZXCW + D * 2 +";
+      } else if (zxcwType === "4002" || zxcwType === "4003") {
+        leftValue = "dZXCW + D +";
+      } else if (zxcwType === "4004") {
+        leftValue = "dZXCW + D * 3 +";
+      } else if (zxcwType === "4005") {
+        leftValue = "D * 3 +";
+      }
+      if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") {
+        rightValue = "+ dYSCW + D * 2";
+      } else if (yscwType === "6002" || yscwType === "6003") {
+        rightValue = "+ dYSCW + D";
+      } else if (yscwType === "6004") {
+        rightValue = "+ dYSCW + D * 3";
+      } else if (yscwType === "6005") {
+        rightValue = " + D * 3";
+      }
+      if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") {
+        topValue = "dZSCW + D * 2 +";
+      } else if (zscwType === "3002" || zscwType === "3003") {
+        topValue = "dZSCW + D +";
+      } else if (zscwType === "3004") {
+        topValue = "dZSCW + D * 3 +";
+      } else if (zscwType === "3005") {
+        topValue = "D * 3+";
+      }
+      if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") {
+        bottomValue = "+ dYXCW + D * 2";
+      } else if (yxcwType === "7002" || yxcwType === "7003") {
+        bottomValue = "+ dYXCW + D ";
+      } else if (yxcwType === "7004") {
+        bottomValue = "+ dYXCW + D * 3";
+      } else if (yxcwType === "7005") {
+        bottomValue = "+ D * 3";
+      }
+      // viewBoxWidth = Number(boxLength) + leftValue + rightValue;
+      // viewBoxHeight = Number(boxWidth) + topValue + bottomValue;
+      sLengthFormula = leftValue + "L" + rightValue;
+      sWidthFormula = topValue + "W" + bottomValue;
+    } else if (boxType && boxType === "5") {
+      // 飞机盒
+      const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value;
+      const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value;
+      sLengthFormula = (ztbw ? "dZTBW+ " : "") + "D * 2 + W * 2" + (ytbw ? " +dYTBW" : "");
+      if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") {
+        leftBottomValue = Number(zxcwValue) + boxHeight;
+        leftBottom = " + dZXCW + D";
+      } else if (zxcwType === "4002" || zxcwType === "4003") {
+        leftBottomValue = Number(zxcwValue);
+        leftBottom = " + dZXCW";
+      } else if (zxcwType === "4004") {
+        leftBottomValue = Number(zxcwValue) + boxHeight * 2;
+        leftBottom = " + dZXCW + D * 2";
+      } else if (zxcwType === "4005") {
+        leftBottomValue = boxHeight * 2;
+        leftBottom = "+ D * 2";
+      }
+      if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") {
+        rightTopValue = Number(yscwValue) + boxHeight;
+        rightTop = "dYSCW + D + ";
+      } else if (yscwType === "6002" || yscwType === "6003") {
+        rightTopValue = Number(yscwValue);
+        rightTop = "dYSCW +  ";
+      } else if (yscwType === "6004") {
+        rightTopValue = Number(yscwValue) + boxHeight * 2;
+        rightTop = "dYSCW + D * 2+ ";
+      } else if (yscwType === "6005") {
+        rightTopValue = boxHeight * 2;
+        rightTop = "D * 2+ ";
+      }
+      if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") {
+        leftTopValue = Number(zscwValue) + boxHeight;
+        leftTop = "dZSCW + D +";
+      } else if (zscwType === "3002" || zscwType === "3003") {
+        leftTopValue = Number(zscwValue);
+        leftTop = "dZSCW +";
+      } else if (zscwType === "3004") {
+        leftTopValue = Number(zscwValue) + boxHeight * 2;
+        leftTop = "dZSCW + D * 2 +";
+      } else if (zscwType === "3005") {
+        leftTopValue = boxHeight * 2;
+        leftTop = "D * 2 +";
+      }
+      if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") {
+        rightBottomValue = Number(yxcwValue) + boxHeight;
+        rightBottom = "+ dYXCW + D";
+      } else if (yxcwType === "7002" || yxcwType === "7003") {
+        rightBottomValue = Number(yxcwValue);
+        rightBottom = "+ dYXCW ";
+      } else if (yxcwType === "7004") {
+        rightBottomValue = Number(yxcwValue) + boxHeight * 2;
+        rightBottom = "+ dYXCW + D * 2";
+      } else if (yxcwType === "7005") {
+        rightBottomValue = boxHeight * 2;
+        rightBottom = "+ D * 2";
+      }
+      sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "L" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom);
+    }
+
+    // 存储盒身数据 主表
+    const newMasterData = {
+      ...masterData,
+      sBoxBody: boxList.find(item => item.sName === "盒身")?.value || "",
+      dBoxLength: boxList.find(item => item.sName === "盒长")?.value || "",
+      dBoxWidth: boxList.find(item => item.sName === "盒宽")?.value || "",
+      dBoxHeight: boxList.find(item => item.sName === "盒高")?.value || "",
+      sName: boxList.find(item => item.sName === "盒型名称")?.value || "",
+      sMakeUpPath: boxList.find(item => item.sName === "盒身")?.selectImage || "",
+      sTypes: boxList.find(item => item.sName === "盒身")?.type || "",
+      sLengthFormula: masterData.sLengthFormula || sLengthFormula,
+      sWidthFormula: masterData.sWidthFormula || sWidthFormula,
+    };
+
+    onOk({ slaveData: newSlaveData, masterData: newMasterData }); // 提交数据
+  };
+  const findIndexBySname = name => {
+    const i = boxList.findIndex(x => x.sName === name);
+    return i || 0;
+  };
+
+  // 单独处理双层盒型
+  if (boxType === "8") {
+    console.log(newBoxList, boxList, "topBoxList");
+  }
+  return (
+    <AntdDraggableModal
+      width="1000px"
+      height="calc(100vh - 50px)"
+      title={title}
+      visible={boxVisible}
+      onCancel={onCancel}
+      okText="创建"
+      onOk={submit}
+      bodyStyle={{
+        height: "calc(95vh - 105px)",
+        overflowY: "auto",
+        display: "flex",
+        flexDirection: "column",
+      }}
+      style={{
+        top: 50,
+      }}
+    >
+      {/* 盒身信息 */}
+
+      <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%" }}
-              />
-            </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,
-                  }}
+              <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>
 
-              <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, 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>
-      <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;
+        <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>
 
-                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 }}
+              <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>
   );
 };
-export default DoubleLayerBox;
+
+export default CommonBase(BoxDesignCompontent);
diff --git a/src/components/Common/BoxDesignCompontent/index.js b/src/components/Common/BoxDesignCompontent/index.js
index 8f4ecd0..97ee569 100644
--- a/src/components/Common/BoxDesignCompontent/index.js
+++ b/src/components/Common/BoxDesignCompontent/index.js
@@ -14,7 +14,6 @@ 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;
@@ -78,55 +77,94 @@ const BoxDesignCompontent = baseProps => {
   const [boxList, setBoxList] = useState([]);
   const [tableColum, setTableColum] = useState([]); // 盒身类型
   const [tableDataList, setTableDataList] = useState([]); // 盒长
+  const [tableDataLists, setTableDataLists] = useState([]); // 盒长
   const [boxBodyList, setBoxBodyList] = useState([]); // 盒身信息
   const [isDefaultValue, setIsDefaultValue] = useState(true); // 是否默认值
   const [topBoxList, setTopBoxList] = useState([]); // 盒身信息
   const [leftBoxList, setLeftBoxList] = useState([]); // 左边
   const [rightBoxList, setRightBoxList] = useState([]);
   const [boxKey, setBoxKey] = useState(new Date().getTime());
+  const [doubleLayerList,setDoubleLayerList] = useState([])
   if (!boxVisible) return "";
-  useEffect(() => {
-    if (tableData && tableData.length) {
-      const newTableColum = tableData.map(item => {
-        return {
-          ...item,
-          isEditable: true,
-          isSelect: false,
-          selectImage: null,
-          value: "",
-        };
-      });
-      // const last = newTableColum.pop();
-      // const newList = [last, ...newTableColum];
-      const newList = newTableColum.filter(
-        item => item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽")
-      );
-      const newLists = newTableColum.filter(
-        item =>
-          !(item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽") || item.showName.includes("盒身"))
-      );
-      const bodyList = newTableColum.filter(item => item.showName.includes("盒身"));
-      newLists.forEach(x => {
-        if (x.showName === "盒型类别") {
-          x.showName = "盒型名称";
-        }
-      });
-      setTableColum(newLists);
-      setBoxBodyList(bodyList);
-      newList.forEach(item => {
-        let name = "";
-        if (item.showName === "盒长") {
-          name = item.showName + "(L)";
-        } else if (item.showName === "盒宽") {
-          name = item.showName + "(W)";
-        } else if (item.showName === "盒高") {
-          name = item.showName + "(D)";
-        }
-        item.sName = name;
-      });
-      setTableDataList(newList);
-    }
-  }, [tableData]);
+// 1️⃣ 只负责 tableColum
+useEffect(() => {
+  if (!tableData?.length) return;
+
+  const newTableColum = tableData
+    .filter(item => item.bVisible) // 先过滤可见
+    .map(item => ({
+      ...item,
+      isEditable: true,
+      isSelect: false,
+      selectImage: null,
+      value: '',
+    }))
+    .filter(
+      item =>
+        !(
+          item.showName.includes('盒长') ||
+          item.showName.includes('盒高') ||
+          item.showName.includes('盒宽') ||
+          item.showName.includes('盒身')
+        )
+    )
+    .map(item =>
+      item.showName === '盒型类别'
+        ? { ...item, showName: '盒型名称' }
+        : item
+    );
+
+  setTableColum(newTableColum);
+}, [tableData]);
+
+// 2️⃣ 只负责 boxBodyList
+useEffect(() => {
+  if (!tableData?.length) return;
+
+  const bodyList = tableData
+    .filter(item => item.bVisible)
+    .map(item => ({
+      ...item,
+      isEditable: true,
+      isSelect: false,
+      selectImage: null,
+      value: '',
+    }))
+    .filter(item => item.showName.includes('盒身'));
+
+  setBoxBodyList(bodyList);
+}, [tableData]);
+
+// 3️⃣ 只负责 tableDataList 和 tableDataLists
+useEffect(() => {
+  if (!tableData?.length) return;
+
+  const newList = tableData
+    .filter(item => item.bVisible)
+    .map(item => ({
+      ...item,
+      isEditable: true,
+      isSelect: false,
+      selectImage: null,
+      value: '',
+    }))
+    .filter(
+      item =>
+        item.showName.includes('盒长') ||
+        item.showName.includes('盒高') ||
+        item.showName.includes('盒宽')
+    )
+    .map(item => {
+      let name = '';
+      if (item.showName === '盒长') name = '盒长(L)';
+      if (item.showName === '盒宽') name = '盒宽(W)';
+      if (item.showName === '盒高') name = '盒高(D)';
+      return { ...item, sName: name };
+    });
+
+  setTableDataList(newList);
+  setTableDataLists(newList);
+}, [tableData]);
   const titleList = [
     "上方盒舌",
     "盒底组件",
@@ -161,6 +199,8 @@ const BoxDesignCompontent = baseProps => {
   tableDataList.forEach(item => {
     titleList.push(item.showName);
   });
+  // 这里处理双盒的初始数据
+  titleList.push(...["首盒长", "首盒宽", "次盒长", "次盒宽"])
   // 盒身信息
   titleList.forEach((item, index) => {
     newBoxList.push({
@@ -219,7 +259,7 @@ const BoxDesignCompontent = baseProps => {
       setBoxList(newBoxList);
     }
   }, [newBoxList]);
-  console.log(boxList, "boxList");
+
 
   const arraysAreEqual = (arr1, arr2) => {
     if (arr1.length !== arr2.length) return false;
@@ -282,7 +322,34 @@ const BoxDesignCompontent = baseProps => {
     updateLists();
   }, [boxList]);
   const boxType = boxList.find(item => item.sName === "盒身")?.type;
-
+  // 监听盒身类型
+  useEffect(() => {
+    if (!boxType) return;
+    if (boxType === "8") {
+      const doubleList = ["首盒长", "首盒宽", "次盒长", "次盒宽"];
+      let box = [];
+      doubleList.forEach(item => {
+        box.push({
+          value: "",
+          sName: item,
+          isEditable: true,
+          isSelect: false,
+          selectValue: null,
+          selectLabel: "",
+          selectImage: null,
+          type: null,
+          show: true,
+          showName: item, // 参数名称
+          sAssignFormula: null,
+        });
+      });
+      // boxList.push()
+      setDoubleLayerList(box)
+    } else {
+    }
+    console.log(boxList,'boxList');
+    
+  }, [boxType]);
   const handleFocus = (e, index) => {
     if (boxList && boxList.length) {
       const updatedBoxList = [...boxList];
@@ -342,6 +409,8 @@ const BoxDesignCompontent = baseProps => {
     const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&scale=0.1&sModelsId=100&token=${props.token}`;
     return imageUrl;
   };
+  console.log(boxList, "boxList");
+
   // 下来框
   const renderOptionWithImage = option => {
     return (
@@ -750,13 +819,7 @@ const BoxDesignCompontent = baseProps => {
 
   // 单独处理双层盒型
   if (boxType === "8") {
-    const top = [
-      { name: "左贴边位", value: "dZTBW" },
-      { name: "上插位组件", value: "dZSCW" },
-      { name: "右贴边位", value: "dYTBW" },
-    ];
-    console.log(topBoxList,options,'topBoxList');
-    
+    console.log(newBoxList, boxList, "topBoxList");
   }
   return (
     <AntdDraggableModal
@@ -778,521 +841,285 @@ const BoxDesignCompontent = baseProps => {
       }}
     >
       {/* 盒身信息 */}
-      {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={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>
+      <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, 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>
+              <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 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;
+          ))}
+        </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>
 
-                      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>
-                      );
-                    })
-                  : ""}
+              <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>
-      ) : (
-        <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 ? (
+        <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={topItem?.selectImage}
-                    alt={topItem.value}
-                    style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}
+                    src={item?.selectImage}
+                    alt={item.value}
+                    style={{
+                      width: 40,
+                      height: 30,
+                      marginRight: 8,
+                      position: "absolute",
+                      left: 20,
+                      top: -35,
+                      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>
+                <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.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>
+          <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;
 
-                <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,
-                      }}
-                    />
-                  ) : (
-                    ""
-                  )}
+                  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 && boxType !== '8'
+                ? tableDataList.map((item, index) => {
+                    const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length;
 
-                  <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 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>
                     );
                   })
                 : ""}
-              {boxBodyList && boxBodyList.length
-                ? boxBodyList.map((item, index) => {
-                    const uniqueIndex = index + 9 + tableColum.length;
+            </div>
+            
+             <div className={styles.boxFlexs}>
+              {doubleLayerList && doubleLayerList.length && boxType === '8'
+                ? doubleLayerList.map((item, index) => {
+                    const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length + tableDataList.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 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 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>
   );
 };