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