1.AJT-MES 纸箱需要显示工单盒型数据

Min
1 parent dead33a3
Showing 3 changed files with 501 additions and 41 deletions
src/components/Common/CommonTable/index.js
src/mes/common/commonModelComponent/index.js
src/mes/scheduledTasks/boxTypeDetail/boxTypeDetail.js
@@ -10286,7 +10286,7 @@ class CommonTableRc extends React.Component {
         }
         childTitle = (
-          <div style={styleObj}>
+          <div style={styleObj} title={`${column.tipTitle}`}>
             {editableSpan}
             {childTitleContent}
           </div>
@@ -10,7 +10,9 @@ import {
   Radio,
   message,
   Badge,
-  Spin
+  Spin,
+  Row,
+  Col
 } from "antd";
 import * as commonUtils from "@/utils/utils";
 import * as commonConfig from "@/utils/config";
@@ -28,6 +30,7 @@ import ChoosePalletComponent from &quot;../choosePalletComponent&quot;;
 import CommonViewDragable from "@/components/Common/CommonViewDragable";
 import costomPageFun from "@/mes/costomPageFun";
 import ReportInfo from "@/mes/productionExec/noticeModal/reportInfoButton";
+import BoxTypeDetail from "../../scheduledTasks/boxTypeDetail/boxTypeDetail";
 import styles from "./index.less";
@@ -227,7 +230,7 @@ const useCommonModelEvent = props =&gt; {
       try {
         delete tabConfigFilter[0].configList[0].children[1].configList[2];
         delete tabConfigFilter[0].configList[0].children[1].configList[1];
-      } catch (error) {}
+      } catch (error) { }
     } else if (
       iTeamType === 1
       // [
@@ -248,7 +251,7 @@ const useCommonModelEvent = props =&gt; {
         delete tabConfigFilter[0].configList[0].children[1].configList[3];
         delete tabConfigFilter[0].configList[0].children[1].configList[1];
         delete tabConfigFilter[0].configList[1].children[2].configList[7];
-      } catch (error) {}
+      } catch (error) { }
     } else {
       tableListFilter = tableList.filter(
         item =>
@@ -260,7 +263,7 @@ const useCommonModelEvent = props =&gt; {
         delete tabConfigFilter[0].configList[0].children[1].configList[3];
         delete tabConfigFilter[0].configList[0].children[1].configList[2];
         delete tabConfigFilter[0].configList[1].children[2].configList[7];
-      } catch (error) {}
+      } catch (error) { }
     }
     return [tableListFilter, tabConfigFilter];
   };
@@ -1473,12 +1476,12 @@ const TabTitleComponent = props =&gt; {
   }
-  if (sTabName.split("_")[0] === "空" || sTabName.split("_")[0] === "Empty" ) return "";
+  if (sTabName.split("_")[0] === "空" || sTabName.split("_")[0] === "Empty") return "";
   const costomTitle =
     props.costomTitle && sTabName === "下料信息" ? props.costomTitle : "";
-  const sTip = sTabName !== sTipName  ? sTabName + '-' + sTipName : sTabName;
+  const sTip = sTabName !== sTipName ? sTabName + '-' + sTipName : sTabName;
   return (
     <div className="tabTitle" title={sTip}>
@@ -1491,7 +1494,7 @@ const TabTitleComponent = props =&gt; {
 // 表单组件
 const CommonViewTableComponent = props => {
-  const { sTabName, showType, sName,  sEnglishTabName, } = props;
+  const { sTabName, showType, sName, sEnglishTabName, } = props;
   if (showType !== "form") return "";
   const {
@@ -1598,17 +1601,17 @@ const CommonViewTableComponent = props =&gt; {
   };
-    const [reportInfoVisible, setReportInfoVisible] = useState(false);
-    const reportRef = useRef(null);
+  const [reportInfoVisible, setReportInfoVisible] = useState(false);
+  const reportRef = useRef(null);
-    const handleReportInfo = (config = null) => {
-        reportRef.current = config;
-        setReportInfoVisible(!reportInfoVisible);
+  const handleReportInfo = (config = null) => {
+    reportRef.current = config;
+    setReportInfoVisible(!reportInfoVisible);
   };
   const sLanguage = props.app.userinfo?.sLanguage;
-  const sTabLocalName = sLanguage === 'sEnglish' ? sEnglishTabName  : sTabName;
+  const sTabLocalName = sLanguage === 'sEnglish' ? sEnglishTabName : sTabName;
   const groupListNew = sTabLocalName?.split(",") || [];
   const groupListChinese = sTabName?.split(",") || [];
@@ -1637,8 +1640,8 @@ const CommonViewTableComponent = props =&gt; {
           handleReportInfo
         };
-        if(viewProps.tableS0Data && viewProps.tableS0Data.length!==0){
-            viewProps.reportPeopleSelectedRowKeys = viewProps.tableS0Data[0].sMainAssistantTransId?.split(",")
+        if (viewProps.tableS0Data && viewProps.tableS0Data.length !== 0) {
+          viewProps.reportPeopleSelectedRowKeys = viewProps.tableS0Data[0].sMainAssistantTransId?.split(",")
         }
@@ -1648,14 +1651,14 @@ const CommonViewTableComponent = props =&gt; {
         return (
           <>
-            <TabTitleComponent {...props} sTabName={groupListNew[index]} sTipName = {groupListChinese[index] } />
+            <TabTitleComponent {...props} sTabName={groupListNew[index]} sTipName={groupListChinese[index]} />
             <CommonViewTable {...viewProps} />
             <ReportInfo
-                reportInfoVisible={reportInfoVisible}
-                handleReportInfo={handleReportInfo}
-                {...props}
-                reportRef={reportRef.current || {}}
-                hasShowInfo={viewProps.viewRow}
+              reportInfoVisible={reportInfoVisible}
+              handleReportInfo={handleReportInfo}
+              {...props}
+              reportRef={reportRef.current || {}}
+              hasShowInfo={viewProps.viewRow}
             />
@@ -1682,7 +1685,8 @@ const CommonTableComponent = props =&gt; {
     showType,
     sName,
     sEnglishTabName,
-    tableBtnsConfig: tableBtnsConfigOld = []
+    tableBtnsConfig: tableBtnsConfigOld = [],
+    app,
   } = props;
   if (showType !== "table") return "";
@@ -1863,7 +1867,7 @@ const CommonTableComponent = props =&gt; {
     // },
     onTableBtnClick,
     tableProps: {
-      onChange: () => {}
+      onChange: () => { }
       // AutoTableHeight: 200
     },
     onViewClick: (tableName, sFieldName, record, index, config) => {
@@ -1897,14 +1901,46 @@ const CommonTableComponent = props =&gt; {
     ...props,
     sName
   };
-  const sLanguage =  props.app.userinfo?.sLanguage;
+  const sLanguage = props.app.userinfo?.sLanguage;
-  const sTabLocalName = sLanguage === 'sEnglish' ? sEnglishTabName  : sTabName;
+  const sTabLocalName = sLanguage === 'sEnglish' ? sEnglishTabName : sTabName;
+  const isPack = props.app.userinfo?.sBrandsId === '2222222222'; // 纸箱品牌
+  const bBoxShow = isPack && (sName === 'slave' ||  sName === 'control');
+  const { slaveData = [], enabled, controlData = [], slaveSelectedRowKeys = [], controlSelectedRowKeys = [] } = props;
+  /* 计算imageBox */
   return (
     <>
-      <TabTitleComponent {...props} sTabName={sTabLocalName }  sTipName={sTabName } />
-      <StaticEditTable {...tableProps} />
+      <TabTitleComponent {...props} sTabName={sTabLocalName} sTipName={sTabName} />
+      {
+        bBoxShow ? (
+          <Row gutter={[24, 0]}>
+            <Col span={15} order={1}>
+              <div className={[styles.slaveTabs, 'slave-tabs-container'].join(' ')} >
+                <StaticEditTable {...tableProps} />
+              </div>
+            </Col>
+            <Col span={9} order={2}>
+              <BoxTypeDetail
+                slaveData={slaveData}
+                controlData={controlData}
+                slaveSelectedRowKeys={slaveSelectedRowKeys}
+                controlSelectedRowKeys={controlSelectedRowKeys}
+                onSaveState={props.onSaveState}
+                enabled={enabled}
+                iColValue={16}
+                isPack={isPack}
+                tableName={sName}
+                parentProps={props}
+              />
+            </Col>
+          </Row>
+        ) : ''
+      }
+      {
+        !bBoxShow ? <StaticEditTable {...tableProps} /> : ''
+      }
+
       <CommonOperationBarComponent {...operationBarProps} />
       <SwasterTypeTable
         {...props}
@@ -1995,15 +2031,15 @@ const CommonRepairComponent = props =&gt; {
   let bCenter = false;
   //  OQC标签弹窗添加清空按钮
-  const onEmptyClick = () =>{
+  const onEmptyClick = () => {
     setViewRow({
-        ...viewRow,
-        sAbnormalLine: '',
-        sAbnormalType: '',
-        sAbnormalMemo: '',
-        sQcPerson: '',
-        dSampQty: 0,
-        bReturn: false
+      ...viewRow,
+      sAbnormalLine: '',
+      sAbnormalType: '',
+      sAbnormalMemo: '',
+      sQcPerson: '',
+      dSampQty: 0,
+      bReturn: false
     })
   }
   const titleNew = title === '异常信息' ? 'Abnormal Info' : title;
@@ -2018,10 +2054,10 @@ const CommonRepairComponent = props =&gt; {
       className="mesCommonModal"
       footer={
         <Space>
-            {/* //  OQC标签弹窗添加清空按钮 */}
-            {
-                params.tableName=='slaveWyrj2'? <Button size="large" onClick={onEmptyClick}>Clear</Button> : null
-            }
+          {/* //  OQC标签弹窗添加清空按钮 */}
+          {
+            params.tableName == 'slaveWyrj2' ? <Button size="large" onClick={onEmptyClick}>Clear</Button> : null
+          }
           <Button size="large" onClick={onCancel}>
             {BtnCancel}
           </Button>
@@ -2209,7 +2245,7 @@ const RunningStatusConditionComponent = props =&gt; {
       : table0SelectedRowKeys,
     bMutiSelect: true,
     tableProps: {
-      onChange: () => {}
+      onChange: () => { }
     }
   };
+import React, { useEffect, useMemo, useState } from 'react';
+import { Row, Col, Divider, Tooltip, InputNumber, Carousel, Image, Modal } from 'antd';
+import * as commonUtils from "@/utils/utils";
+import * as commonConfig from "@/utils/config";
+import * as commonFunc from "@/components/Common/commonFunc";
+
+const evaluateFormula = (formula, variables) => {
+  if (!formula) return 0;
+  try {
+    const variableNames = formula.match(/\b[a-zA-Z_][a-zA-Z0-9_]*\b/g) || [];
+    const params = variableNames.join(",") + ",Math";
+    const func = new Function(params, `return ${formula}`);
+    const args = variableNames.map(name => Number(variables[name]) || 0);
+    return func(...args, Math);
+  } catch (error) {
+    console.error("公式执行错误", error);
+    return Number(formula) || 0;
+  }
+};
+
+const removeExtension = (filename) => {
+  if (!filename) return '';
+  const lastDotIndex = filename.lastIndexOf('.');
+  return lastDotIndex === -1 ? filename : filename.substring(0, lastDotIndex);
+};
+
+const getImageUrl = (sName) => {
+  console.log('getImageUrl', sName);
+  return `${commonConfig.server_host}file/downloadPrice?sLogoName=${sName}&date=${new Date().getTime()}`;
+};
+
+const CuttingComponent = (props) => {
+  const { selectedRowIndex, slaveData, onSaveState } = props;
+  const PrintSize = commonFunc.showLocalMessage(props, "PrintSize", "印刷尺寸");
+  const insert = commonFunc.showLocalMessage(props, "insert", "插入");
+  const imposition = commonFunc.showLocalMessage(props, "imposition", "拼版");
+  const mouthpiece = commonFunc.showLocalMessage(props, "mouthpiece", "叼口");
+  const trailingEdge = commonFunc.showLocalMessage(props, "trailingEdge", "拖梢");
+  const SheetSize = commonFunc.showLocalMessage(props, "SheetSize", "印张尺寸");
+  const cutting = commonFunc.showLocalMessage(props, "cutting", "分切");
+  const edgeTrimming = commonFunc.showLocalMessage(props, "edgeTrimmings", "修边");
+  const MaterialSpecifications = commonFunc.showLocalMessage(props, "MaterialSpecifications", "材料规格");
+  const length = commonFunc.showLocalMessage(props, "length", "长");
+  const width = commonFunc.showLocalMessage(props, "width", "宽");
+
+  const lengthFormula = length + '( |-|)*| +(|+| )=|*|+|=';
+  const widthFormula = width + '( |-|)*| +(|+| )=|*|+|=';
+  const lengthFormulaList = lengthFormula.split('|');
+  const widthFormulaList = widthFormula.split('|');
+
+  const titleList = [
+    PrintSize, insert, imposition, mouthpiece, trailingEdge,
+    SheetSize, cutting, edgeTrimming, MaterialSpecifications,
+  ];
+
+  if (!slaveData || !slaveData[selectedRowIndex]) return null;
+  const slaveRowData = slaveData[selectedRowIndex];
+  const { boxLengthList = [], boxWidthList = [] } = slaveRowData;
+
+  return (
+    <div className="cuttingComponent">
+      <div className="title">
+        {titleList.map((item, i) => (
+          <div key={i} style={{ width: '9%', textAlign: 'center', fontSize: '12px' }}>{item}</div>
+        ))}
+      </div>
+
+      <div className="title">
+        {boxLengthList.map((item, index) => (
+          <InputNumber
+            key={item.id || index}
+            value={item.value}
+            controls={false}
+            style={{ width: '9%', height: '26px' }}
+            onChange={(val) => {
+              const list = [...boxLengthList];
+              list[index].value = Number(val) || 0;
+              list[5].value = (list[0].value - list[1].value) * list[2].value + (list[3].value + list[4].value);
+              list[list.length - 1].value = list[5].value * list[6].value + list[7].value;
+              slaveData[selectedRowIndex] = {
+                ...slaveData[selectedRowIndex],
+                boxLengthList: list,
+                dBoxLengthSum: list[list.length - 1]?.value,
+                dBoxLengthSumPqty: list[2]?.value,
+              };
+              onSaveState({ slaveData });
+            }}
+          />
+        ))}
+      </div>
+
+      <div className="text">
+        <div className="title">
+          {lengthFormulaList.map((item, i) => (
+            <div key={i} style={{ width: '9%', transform: i === 0 ? 'translateX(-10px)' : i === 3 ? 'translateX(-3px)' : '' }}>{item}</div>
+          ))}
+        </div>
+      </div>
+
+      <div className="title" style={{ marginTop: '8px' }}>
+        {boxWidthList.map((item, index) => (
+          <InputNumber
+            key={item.id || index}
+            value={item.value}
+            controls={false}
+            style={{ width: '9%', height: '26px' }}
+            onChange={(val) => {
+              const list = [...boxWidthList];
+              list[index].value = Number(val) || 0;
+              list[5].value = (list[0].value - list[1].value) * list[2].value + (list[3].value + list[4].value);
+              list[list.length - 1].value = list[5].value * list[6].value + list[7].value;
+              slaveData[selectedRowIndex] = {
+                ...slaveData[selectedRowIndex],
+                boxWidthList: list,
+                dBoxWidthSum: list[list.length - 1]?.value,
+                dBoxWidthSumPqty: list[2]?.value,
+              };
+              onSaveState({ slaveData });
+            }}
+          />
+        ))}
+      </div>
+
+      <div className="text" style={{ top: '54px' }}>
+        <div className="title">
+          {widthFormulaList.map((item, i) => (
+            <div key={i} style={{ width: '9%', transform: i === 0 ? 'translateX(-10px)' : i === 3 ? 'translateX(-3px)' : '' }}>{item}</div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default function BoxTypeDetail(props) {
+  const {
+    slaveData,
+    controlData,
+    slaveSelectedRowKeys,
+    controlSelectedRowKeys,
+    onSaveState,
+    enabled = true,
+    sOrderCategoryId,
+    processShowLeft,
+    isPack,
+    parentProps,
+  } = props;
+  if(commonUtils.isEmptyArr(slaveData)) return null;
+
+  // 使用 useMemo 缓存，避免每次渲染创建新引用
+  const slaveSelectedRowKeysData = useMemo(() => {
+    return slaveData.find(item => slaveSelectedRowKeys?.includes(item.sId)) || slaveData[0];
+  }, [slaveData, slaveSelectedRowKeys]);
+
+  const slaveSelectedRowKeysId = slaveSelectedRowKeysData.sId;
+  const selectRowIndex = slaveData ? slaveData.findIndex(x => x.sId === slaveSelectedRowKeysId) : -1;
+
+  // 使用 useMemo 缓存，避免每次渲染创建新引用
+  const selectRow = useMemo(() => {
+    if (!slaveData || selectRowIndex < 0) return slaveData[0];
+    return slaveData[selectRowIndex];
+  }, [slaveData, selectRowIndex]);
+
+  const [boxMaxModalVisible, setBoxMaxModalVisible] = useState(false);
+  const [boxList, setBoxList] = useState([]);
+  const [offsetXList, setOffsetXList] = useState([]);
+  const [offsetYList, setOffsetYList] = useState([]);
+
+  // 使用 useMemo 缓存，避免每次渲染解析 JSON
+  const sBoxInfo = useMemo(() => {
+    if (!selectRow?.sBoxInfo || !commonUtils.isJSON(selectRow.sBoxInfo)) return [];
+    try {
+      return JSON.parse(selectRow.sBoxInfo);
+    } catch (e) {
+      return [];
+    }
+  }, [selectRow?.sBoxInfo]);
+
+  const selectRowData = useMemo(() => {
+  return { ...selectRow, ...sBoxInfo[0] };
+}, [selectRow, sBoxInfo]);
+
+
+  // 使用 useMemo 缓存，确保引用稳定
+  const upAbleConfigsExtra = useMemo(() => {
+    return commonUtils.isNotEmptyArr(sBoxInfo) ? sBoxInfo[0].upAbleConfigsExtra : '';
+  }, [sBoxInfo]);
+
+
+  const bSelectBox = selectRowData.bSelectBox;
+
+  useEffect(() => {
+    if (!upAbleConfigsExtra) return;
+    let slaveNewData = [];
+    try {
+      slaveNewData = JSON.parse(upAbleConfigsExtra.sColumnNameConfig || '[]');
+    } catch (e) {}
+
+    const { slaveRowData = {} } = slaveSelectedRowKeysData;
+    const L = Number(slaveSelectedRowKeysData.dProductLength) || 0;
+    const W = Number(slaveSelectedRowKeysData.dProductWidth) || 0;
+    const D = Number(slaveSelectedRowKeysData.dProductHeight) || 0;
+
+    const titleList1 = [
+      { name: "上方盒舌", value: "dSFHS" },
+      { name: "盒底组件", value: "dHDC" },
+      { name: "下方盒舌", value: "dXFHS" },
+      { name: "左(上)插位组件", value: "dZSCW" },
+      { name: "左贴边位", value: "dZTBW" },
+      { name: "左(下)插位组件", value: "dZXCW" },
+      { name: "右(上)插位组件", value: "dYSCW" },
+      { name: "右贴边位", value: "dYTBW" },
+      { name: "右(下)插位组件", value: "dYXCW" },
+      { name: "压线", value: "dYx" },
+    ];
+
+    const tables = [
+      { name: "盒型类别", value: slaveRowData.sBoxType, type: null },
+      { name: "盒身", value: slaveRowData.sBoxBody, type: slaveRowData.sTypes },
+      { name: "盒长", value: L, type: null },
+      { name: "盒宽", value: W, type: null },
+      { name: "盒高", value: D, type: null },
+    ];
+
+    const variables = { L, W, H: W, D, ...slaveRowData };
+    const newBoxList = [];
+
+    slaveNewData.forEach(x => {
+      let key = 0;
+      if (x.sAssignFormula) {
+        key = evaluateFormula(x.sAssignFormula, variables);
+        slaveRowData[x.sName] = key;
+      } else {
+        if (x.sTypes && x.sTypes.includes('09')) {
+          if (x.sName === 'dZTBW' || x.sName === 'dYTBW') {
+            key = Number(x.iSLength || 0) + Number(x.iCLength || 0);
+          } else {
+            key = Number(x.iSWidth || 0) + Number(x.iCWidth || 0);
+          }
+        } else {
+          key = slaveRowData[x.sName];
+        }
+      }
+      newBoxList.push({
+        value: key,
+        sName: titleList1.find(i => i.value === x.sName)?.name || '',
+        sCode: x.sName,
+        type: x.sTypes,
+        showName: x.showName,
+        ...x,
+      });
+    });
+
+    tables.forEach(t => newBoxList.push(t));
+    setBoxList(newBoxList);
+  }, [upAbleConfigsExtra, slaveSelectedRowKeysData]);
+
+  useEffect(() => {
+    if (!upAbleConfigsExtra || !selectRowData) return;
+    let configData = [];
+    try {
+      configData = JSON.parse(upAbleConfigsExtra.sColumnNameConfig || '[]');
+    } catch (e) {}
+
+    const xList = selectRowData.controlSelectedRowBoxXList || [];
+    const yList = selectRowData.controlSelectedRowBoxYList || [];
+
+    const ox = xList.map(item => {
+      const d = configData.find(c => c.sName === item.id) || {};
+      return { x: d.dX || 0, y: d.dY || 0, id: item.id, value: item.value };
+    });
+
+    const oy = yList.map(item => {
+      const d = configData.find(c => c.sName === item.id) || {};
+      return { x: d.dX || 0, y: d.dY || 0, id: item.id, value: item.value };
+    });
+
+    if (ox.length) ox[9].value = ox.slice(0, 9).reduce((a, b) => a + b.value, 0);
+    if (oy.length) oy[9].value = oy.slice(0, 9).reduce((a, b) => a + b.value, 0);
+
+    setOffsetXList(ox);
+    setOffsetYList(oy);
+  }, [upAbleConfigsExtra, selectRowData]);
+
+  // 数据是查看用的，不需要更新状态，移除可能导致死循环的 useEffect
+
+  const imagesData = useMemo(() => {
+    if (!upAbleConfigsExtra) return [];
+    return [{ src: getImageUrl(removeExtension(upAbleConfigsExtra.sPackPath)), alt: "立体图" }];
+  }, [upAbleConfigsExtra?.sPackPath]);
+
+
+  const boxSizeImage = useMemo(() => {
+    if (!upAbleConfigsExtra) return '';
+    return getImageUrl(removeExtension(upAbleConfigsExtra.sPackDetailPathUpLoad));
+  }, [upAbleConfigsExtra?.sPackDetailPathUpLoad]);
+
+
+
+  const BoxDetails = commonFunc.showLocalMessage(parentProps, "BoxDetail", "盒型详情");
+  const noData = commonFunc.showLocalMessage(parentProps, 'noData', 'No Data');
+  const TransversePressure = commonFunc.showLocalMessage(parentProps, "TransversePressure", "横压");
+  const longitudinalPressure = commonFunc.showLocalMessage(parentProps, "longitudinalPressure", "纵压");
+  const { controlSelectedRowBoxXList = [], controlSelectedRowBoxYList = [] } = selectRowData;
+  const boxType = false;
+  return (
+    <>
+      <Modal open={boxMaxModalVisible} onCancel={() => setBoxMaxModalVisible(false)} footer={null} width={800}>
+        <Image src={boxSizeImage} style={{ width: '100%' }} />
+      </Modal>
+
+
+      {isPack ? (
+        <Row gutter={[8, 0]}>
+          <Col span={24 - (processShowLeft?.iColValue || 16)} order={2}>
+            {boxSizeImage === '' ? (
+              <div style={{ width: '100%', height: '100%', position: 'relative' }}>
+                <Divider className="workOrderDivider" orientation="center">{BoxDetails}</Divider>
+                <div style={{ textAlign: 'center', fontSize: 12, position: 'absolute', bottom: 0, left: '50%', transform: 'translateX(-50%)' }}>{noData}</div>
+              </div>
+            ) : props.tableName === 'slave' && (
+              <div style={{ paddingBottom: '20px' }}>
+                <div style={{ height: 200, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <div style={{ width: 300, height: 200, position: 'relative' }} id="imageRefId">
+                    <img src={boxSizeImage} style={{ width: 300, height: 200 }} onClick={() => setBoxMaxModalVisible(true)} />
+                    {offsetXList.map((item, i) => (
+                      <div key={i} style={{ position: 'absolute', left: item.x, bottom: item.y, fontSize: 10, color: 'red' }}>
+                        {item.value > 0 ? item.value : ''}
+                      </div>
+                    ))}
+                    {offsetYList.map((item, i) => (
+                      <div key={i} style={{ position: 'absolute', left: item.x, bottom: item.y, fontSize: 10, color: 'red' }}>
+                        {item.value > 0 ? item.value : ''}
+                      </div>
+                    ))}
+                  </div>
+
+                  <div style={{ width: '300px', height: 200 }}>
+                    <Carousel dots style={{ width: '300px', height: 200 }}>
+                      {imagesData.map((im, i) => (
+                        <div key={i} className="carousel-item">
+                          <Image src={im.src} style={{ width: '100%', height: 200 }} />
+                        </div>
+                      ))}
+                    </Carousel>
+                  </div>
+                </div>
+
+                {!boxType && boxList.length > 0 && (
+                  <div style={{ height: '12px', lineHeight: '12px', width: '100%', display: 'flex', gap: '2px', marginTop: '6px', marginBottom: '2px', alignItems: 'center' }}>
+                    <Tooltip title={TransversePressure}>
+                      <div style={{ whiteSpace: 'nowrap', fontSize: '14px', fontWeight: 'bold', width:'145px' }}>{TransversePressure}：</div>
+                    </Tooltip>
+                    <div style={{ display: 'flex', flex: 1, gap: '2px' }}>
+                      {controlSelectedRowBoxYList?.map((cfg, i) => (
+                        <InputNumber
+                          key={cfg.id}
+                          value={cfg.value}
+                          style={{ flex: 1, minWidth: '45px', fontSize: '14px', fontWeight: 'bold' }}
+                          controls={false}
+                          disabled={!enabled}
+                          onChange={(val) => {
+                            const list = controlSelectedRowBoxYList.map((it, idx) => idx === i ? { ...it, value: val } : it);
+                            list[9].value = list.slice(0, 9).reduce((a, b) => a + b.value, 0);
+                            const newSlave = [...slaveData];
+                            newSlave[selectRowIndex] = {
+                              ...newSlave[selectRowIndex],
+                              controlSelectedRowBoxYList: list,
+                              dMaterialsWidth: list[9].value,
+                            };
+                            onSaveState({ slaveData: newSlave });
+                          }}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {!boxType && boxList.length > 0 && (
+                  <div style={{ height: '22px', lineHeight: '22px', width: '100%', display: 'flex', gap: '2px', marginTop: '10px', marginBottom: '2px', alignItems: 'center' }}>
+                    <Tooltip title={longitudinalPressure}>
+                      <div style={{ whiteSpace: 'nowrap', fontSize: '14px', fontWeight: 'bold', width:'145px' }}>{longitudinalPressure}：</div>
+                    </Tooltip>
+                    <div style={{ display: 'flex', flex: 1, gap: '2px' }}>
+                      {controlSelectedRowBoxXList?.map((cfg, i) => (
+                        <InputNumber
+                          key={cfg.id}
+                          value={cfg.value}
+                          style={{ flex: 1, minWidth: '45px', fontSize: '14px', fontWeight: 'bold' }}
+                          controls={false}
+                          disabled={!enabled}
+                          onChange={(val) => {
+                            const list = controlSelectedRowBoxXList.map((it, idx) => idx === i ? { ...it, value: val } : it);
+                            list[9].value = list.slice(0, 9).reduce((a, b) => a + b.value, 0);
+                            const newSlave = [...slaveData];
+                            newSlave[selectRowIndex] = {
+                              ...newSlave[selectRowIndex],
+                              controlSelectedRowBoxXList: list,
+                              dMaterialsLength: list[9].value,
+                            };
+                            onSaveState({ slaveData: newSlave });
+                          }}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {sOrderCategoryId === '17581757610008020076844948336000' && boxList.length > 0 && (
+                  <CuttingComponent
+                    {...parentProps}
+                    selectedRowIndex={selectRowIndex}
+                    slaveData={slaveData}
+                    onSaveState={onSaveState}
+                  />
+                )}
+              </div>
+            )}
+          </Col>
+        </Row>
+      ) : null}
+    </>
+  );
+}