样式调整 (43cccc63) | Commits | xlyErp / xlyUmi

Browse Code »

Commit 43cccc63bfede68aec215a56052830fa2c6b15b8

Authored by 陈鑫涛 2025-05-19 13:51:17 +0800

1 parent 3ddcff4b

样式调整

Inline Side-by-side

Showing 24 changed files with 7109 additions and 71 deletions

Too many changes to show.
Reload with full diff Plain diff Email patch

To preserve performance only 8 of 24 files are displayed.

src/components/Common/BoxDesign/createAirplaneBox.js 0 → 100644

View file @43cccc6

		1	+/* eslint-disable */
		2	+// 创建飞机盒盒身
		3	+const boxContent = (width, height, offsetX, offsetY) => {
		4	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		5	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + width} ${offsetY + height} L ${offsetX +
		6	+ width} ${offsetY} L ${offsetX} ${offsetY} Z`;
		7	+ svg.setAttribute("d", d);
		8	+ svg.setAttribute("fill", "transparent");
		9	+ svg.setAttribute("stroke", "#333");
		10	+ svg.setAttribute("stroke-width", "1");
		11	+ svg.setAttribute("stroke-dasharray", "3.8"); // 添加虚线效果
		12	+ return svg;
		13	+};
		14	+// 创建飞机盒上盒部件
		15	+const createBoxTop = (width, height, offsetX, offsetY, outerWidth) => {
		16	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		17	+ const d = `M ${offsetX} ${offsetY} L ${width} ${offsetY} A ${height} ${height} 0 0 1 ${width + outerWidth} ${offsetX} L ${offsetX -
		18	+ outerWidth} ${offsetY + height} A ${height} ${height} 0 0 1 ${offsetX} ${offsetY}`;
		19	+ svg.setAttribute("d", d);
		20	+ svg.setAttribute("fill", "transparent");
		21	+ svg.setAttribute("stroke", "#333");
		22	+ svg.setAttribute("stroke-width", "1");
		23	+ return svg;
		24	+};
		25	+// 创建飞机左上部件
		26	+const createBoxLeftTop = (width, height, offsetX, offsetY, isLeft) => {
		27	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		28	+ const d = `M ${offsetX} ${offsetY} L ${offsetX - width + (isLeft ? 5 : -5)} ${offsetY + 5} A 10 10 0 0 ${isLeft ? 0 : 1} ${offsetX -
		29	+ width} ${offsetY + 15} L ${offsetX - width} ${offsetY + height - 15}
		30	+ A 10 10 0 0 ${isLeft ? 0 : 1} ${offsetX - width + (isLeft ? 5 : -5)} ${offsetY + height - 5} L ${offsetX} ${offsetY + height}`;
		31	+ svg.setAttribute("d", d);
		32	+ svg.setAttribute("fill", "transparent");
		33	+ svg.setAttribute("stroke", "#333");
		34	+ svg.setAttribute("stroke-width", "1");
		35	+ return svg;
		36	+};
		37	+const createBoxDown = (width, height, offsetX, offsetY) => {
		38	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		39	+ const d = `M ${offsetX} ${offsetY} L ${offsetX - width} ${offsetY} L ${offsetX - width} ${offsetY + height} L ${offsetX} ${offsetY + height}`;
		40	+ svg.setAttribute("d", d);
		41	+ svg.setAttribute("fill", "transparent");
		42	+ svg.setAttribute("stroke", "#333");
		43	+ svg.setAttribute("stroke-width", "1");
		44	+ return svg;
		45	+};
		46	+const createBoxComponent = (D, d1, dD, height, offsetX, offsetY, outerHeight) => {
		47	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		48	+ // const h = height - 8;
		49	+ // 短脚尺寸
		50	+ const dJj = height * 0.05;
		51	+ const dD1 = 5;
		52	+ // 计算突出的高度
		53	+ const dTW1 = (height / 2) * 0.1;
		54	+ const dTW2 = (height / 2) * 0.2;
		55	+ const dTW = height / 2 - dTW2 * 2 - dTW1;
		56	+ const d = `M ${offsetX} ${offsetY}
		57	+ L ${offsetX - D} ${offsetY}
		58	+ L ${offsetX - D} ${offsetY + height}
		59	+ L ${offsetX - D} ${offsetY}
		60	+ L ${offsetX - D - outerHeight} ${offsetY + dTW1}
		61	+ L ${offsetX - D - outerHeight} ${offsetY + height - dTW1}
		62	+ L ${offsetX - D - outerHeight} ${offsetY + dTW1}
		63	+ L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1}
		64	+ L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 - 2}
		65	+ L ${offsetX - D - outerHeight - d1 - dD} ${offsetY + dTW1 + dTW2}
		66	+ L ${offsetX - D - outerHeight - d1 - dD} ${offsetY + dTW1 + dTW2 + dTW - 2}
		67	+ L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW}
		68	+ L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW + dTW2}
		69	+ L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 - 2}
		70	+ L ${offsetX - D - outerHeight - d1 - dD} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2}
		71	+ L ${offsetX - D - outerHeight - d1 - dD} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW - 2}
		72	+ L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW}
		73	+ L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW + dTW2}
		74	+ L ${offsetX - D - outerHeight} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW + dTW2}
		75	+ L ${offsetX - D} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW + dTW2 + dTW1}
		76	+ L ${offsetX} ${offsetY + height}
		77	+ `;
		78	+ svg.setAttribute("d", d);
		79	+ svg.setAttribute("fill", "transparent");
		80	+ svg.setAttribute("stroke", "#333");
		81	+ svg.setAttribute("stroke-width", "1");
		82	+ return svg;
		83	+};
		84	+
		85	+// 盒身
		86	+export const createPathElement = (x, y, width, height, id, wrapperId) => {
		87	+ const d = `M ${x} ${y} L ${x} ${y + height} L ${x + width} ${y + height} L ${x + width} ${y} L ${x} ${y} Z`;
		88	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		89	+ svg.setAttribute("d", d);
		90	+ svg.setAttribute("fill", "transparent");
		91	+ svg.setAttribute("stroke", "red");
		92	+ svg.setAttribute("stroke-width", "1");
		93	+ svg.setAttribute("stroke-dasharray", "4"); // 添加虚线效果
		94	+ return svg;
		95	+};
		96	+
		97	+//
		98	+// 左边斜线贴边
		99	+export const createTrapezoid = (height, offsetX, offsetY, size) => {
		100	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		101	+ const d = `M ${offsetX} ${offsetY} L ${offsetX - size} ${offsetY + 2} L ${offsetX - size} ${offsetY + height - 2} L ${offsetX} ${offsetY + height}`;
		102	+ svg.setAttribute("d", d);
		103	+ svg.setAttribute("fill", "transparent");
		104	+ svg.setAttribute("stroke", "#333");
		105	+ svg.setAttribute("stroke-width", "1");
		106	+ return svg;
		107	+};
		108	+// 左上盒舌盒舌 x轴原点 y轴原点高度 x轴方向偏移 y轴方向偏移是否瞬时针是否镜像 type0
		109	+export const createTopTongue = (width, offsetX, offsetY, size, xz, yz, clockwise, isMirror, az, jxY) => {
		110	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		111	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + az} L ${offsetX + xz} ${offsetY - size} L ${offsetX +
		112	+ width -
		113	+ (isMirror ? -(yz * 2) : yz * 2)} ${offsetY - size}
		114	+ A ${yz} ${yz} 0 0 ${clockwise} ${offsetX + width - (isMirror ? -yz : yz)} ${offsetY - size + jxY} L ${offsetX + width} ${offsetY}`;
		115	+ svg.setAttribute("d", d);
		116	+ svg.setAttribute("fill", "transparent");
		117	+ svg.setAttribute("stroke", "#333");
		118	+ svg.setAttribute("stroke-width", "1");
		119	+ return svg;
		120	+};
		121	+// 下边
		122	+export const createBottomTongue = (width, offsetX, offsetY, size, xz, yz, clockwise, isMirror, az, jxY) => {
		123	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		124	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + az} L ${offsetX + xz} ${offsetY - size} L ${offsetX +
		125	+ width -
		126	+ (isMirror ? -(yz * 2) : yz * 2)} ${offsetY - size}
		127	+ A ${yz} ${yz} 0 0 ${clockwise} ${offsetX + width - (isMirror ? -yz : yz)} ${offsetY - size + jxY} L ${offsetX + width} ${offsetY}`;
		128	+ svg.setAttribute("d", d);
		129	+ svg.setAttribute("fill", "transparent");
		130	+ svg.setAttribute("stroke", "#333");
		131	+ svg.setAttribute("stroke-width", "1");
		132	+ return svg;
		133	+};
		134	+// 上盒舌类型1
		135	+export const createTopTongueType1 = (width, offsetX, offsetY, size, xz, yz) => {
		136	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		137	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + size} L ${offsetX + width - xz + yz} ${offsetY + size} L${offsetX +
		138	+ width} ${offsetY} `;
		139	+ svg.setAttribute("d", d);
		140	+ svg.setAttribute("fill", "transparent");
		141	+ svg.setAttribute("stroke", "#333");
		142	+ svg.setAttribute("stroke-width", "1");
		143	+ return svg;
		144	+};
		145	+export const createDynamicTop = (width, height, deep, offsetX, offsetY, size) => {
		146	+ const isSignNum = Math.sign(deep) === 1 ? 2 : -2;
		147	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		148	+ // 动态生成路径，基于输入参数
		149	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY - deep - size + isSignNum} A 2 2 0 0 1 ${offsetX + 2} ${offsetY - deep - size}
		150	+ L ${offsetX + width - 2} ${offsetY - deep - size} A 2 2 0 0 1 ${offsetX + width} ${offsetY - deep - size + isSignNum} L ${offsetX +
		151	+ width} ${offsetY - deep}
		152	+ L ${offsetX} ${offsetY - deep} L ${offsetX + width} ${offsetY - deep} L ${offsetX + width} ${offsetY} `;
		153	+ svg.setAttribute("d", d);
		154	+ svg.setAttribute("fill", "transparent");
		155	+ svg.setAttribute("stroke", "#333");
		156	+ svg.setAttribute("stroke-width", "1");
		157	+ return svg;
		158	+};
		159	+const createBottomCy = (width, height, offsetX, offsetY) => {
		160	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		161	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + 2} ${offsetY + height} L ${offsetX + width / 2} ${offsetY + height}
		162	+ L ${offsetX + width} ${offsetY}`;
		163	+ svg.setAttribute("d", d);
		164	+ svg.setAttribute("fill", "transparent");
		165	+ svg.setAttribute("stroke", "#333");
		166	+ svg.setAttribute("stroke-width", "1");
		167	+ return svg;
		168	+};
		169	+const createBottomDh = (width, height, offsetX, offsetY) => {
		170	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		171	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + 5} ${offsetY + height} L ${offsetX + width / 2 - 10} ${offsetY + height}
		172	+ A 10 10 0 0 0 ${offsetX + width / 2} ${offsetY + height - 10} A 5 5 0 0 1 ${offsetX + width / 2 + 5} ${offsetY + height - 10}
		173	+ L ${offsetX + width * 0.75} ${offsetY + height} L ${offsetX + width} ${offsetY + height} L ${offsetX + width} ${offsetY + 5}
		174	+ L ${offsetX + width - 3} ${offsetY + 3} L ${offsetX + width} ${offsetY}`;
		175	+ svg.setAttribute("d", d);
		176	+ svg.setAttribute("fill", "transparent");
		177	+ svg.setAttribute("stroke", "#333");
		178	+ svg.setAttribute("stroke-width", "1");
		179	+ return svg;
		180	+};
		181	+// 添加标注
		182	+export const createText = (offsetX, offsetY, size, textContent) => {
		183	+ const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
		184	+ text.setAttribute("x", offsetX); // 文字水平居中
		185	+ text.setAttribute("y", offsetY); // 文字垂直居中
		186	+ text.setAttribute("text-anchor", "middle"); // 文字水平居中
		187	+ text.setAttribute("dominant-baseline", "middle"); // 文字垂直居中
		188	+ text.setAttribute("fill", "#333"); // 文字颜色
		189	+ text.setAttribute("font-size", size); // 文字大小
		190	+ text.textContent = textContent \|\| "Text"; // 默认文字内容
		191	+ return text;
		192	+};
		193	+// 竖向双箭头
		194	+export const createDoubleArrow = (height, offsetX, offsetY, scale) => {
		195	+ const Y = -3 * (scale ? scale : 1);
		196	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		197	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY - height / 2 - Y} L ${offsetX + Y} ${offsetY - height / 2 - Y} L ${offsetX} ${offsetY -
		198	+ height / 2}
		199	+ L ${offsetX - Y} ${offsetY - height / 2 - Y} L ${offsetX} ${offsetY - height / 2 - Y} L ${offsetX} ${offsetY + height / 2 + Y} L
		200	+ ${offsetX - Y} ${offsetY + height / 2 + Y} L ${offsetX} ${offsetY + height / 2} L ${offsetX + Y} ${offsetY +
		201	+ height / 2 +
		202	+ Y} L ${offsetX} ${offsetY + height / 2 + Y}`;
		203	+ svg.setAttribute("d", d);
		204	+ svg.setAttribute("fill", "#F5AD6C");
		205	+ svg.setAttribute("stroke", "#F5AD6C");
		206	+ svg.setAttribute("stroke-width", "1");
		207	+
		208	+ return svg;
		209	+};
		210	+// 横向双箭头
		211	+export const createHorizontalDoubleArrow = (width, offsetX, offsetY, scale) => {
		212	+ const Y = 3 * (scale ? scale : 1);
		213	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		214	+ const d = `M ${offsetX} ${offsetY} L ${offsetX - width / 2 + Y} ${offsetY} L ${offsetX - width / 2 + Y} ${offsetY - Y} L ${offsetX -
		215	+ width / 2} ${offsetY}
		216	+ L ${offsetX - width / 2 + Y} ${offsetY + Y} L ${offsetX - width / 2 + Y} ${offsetY} L ${offsetX + width / 2 - Y} ${offsetY} L ${offsetX +
		217	+ width / 2 -
		218	+ Y} ${offsetY + Y} L ${offsetX + width / 2} ${offsetY}
		219	+ L ${offsetX + width / 2 - Y} ${offsetY - Y} L ${offsetX + width / 2 - Y} ${offsetY}`;
		220	+ svg.setAttribute("d", d);
		221	+ svg.setAttribute("fill", "#F5AD6C");
		222	+ svg.setAttribute("stroke", "#F5AD6C");
		223	+ svg.setAttribute("stroke-width", "1");
		224	+ return svg;
		225	+};
		226	+// 左右直线贴边
		227	+const createLineWelt = (width, height, offsetX, offsetY) => {
		228	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		229	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + width} ${offsetY} L ${offsetX + width} ${offsetY + height} L ${offsetX} ${offsetY + height}`;
		230	+ svg.setAttribute("d", d);
		231	+ svg.setAttribute("fill", "transparent");
		232	+ svg.setAttribute("stroke", "#333");
		233	+ svg.setAttribute("stroke-width", "1");
		234	+ return svg;
		235	+};
		236	+
		237	+const createLine = (height, offsetX, offsetY) => {
		238	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		239	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height}`;
		240	+ svg.setAttribute("d", d);
		241	+ svg.setAttribute("fill", "transparent");
		242	+ svg.setAttribute("stroke", "#333");
		243	+ svg.setAttribute("stroke-width", "1");
		244	+ svg.setAttribute("stroke-dasharray", "3.8"); // 添加虚线效果
		245	+ return svg;
		246	+};
		247	+// 没选部件的时候展示空白
		248	+export const createNoneProject = () => {
		249	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		250	+ const d = ``;
		251	+ svg.setAttribute("d", d);
		252	+ svg.setAttribute("fill", "transparent");
		253	+ svg.setAttribute("stroke", "#333");
		254	+ svg.setAttribute("stroke-width", "1");
		255	+ return svg;
		256	+};
		257	+// 自动扣抵盒
		258	+export function createDeductionBox(slaveRowData) {
		259	+ const pathList = [];
		260	+ const { W, L, D, dg, dc, db } = slaveRowData;
		261	+ const width = L;
		262	+ const height = D;
		263	+ const deep = W;
		264	+ // 盒身
		265	+ const rectangles = [
		266	+ { x: 0, y: 0, width: deep, height, id: "ac_path_c795a39_2oj", wrapperId: "3476" },
		267	+ { x: 0 + deep, y: 0, width: width, height, id: "ac_path_c795a39_2on", wrapperId: "3480" },
		268	+ { x: 0 + deep + width, y: 0, width: deep, height, id: "ac_path_c795a39_2or", wrapperId: "3484" },
		269	+ { x: 0 + deep * 2 + width, y: 0, width: width, height, id: "ac_path_c795a39_2ov", wrapperId: "3488" },
		270	+ ];
		271	+ rectangles.forEach(rect => {
		272	+ pathList.push(createPathElement(rect.x, rect.y, rect.width, rect.height, rect.id, rect.wrapperId));
		273	+ });
		274	+ pathList.push(createTrapezoid(height, deep * 2 + width * 2, 0, -dg));
		275	+ pathList.push(createTopTongue(deep, 0, 0, db, 2, 5, 1, false));
		276	+ pathList.push(createTopTongue(-deep, deep * 2 + width, 0, db, -2, 5, 0, true));
		277	+ pathList.push(createDynamicTop(width, height, deep, deep * 2 + width, 0, dc));
		278	+ pathList.push(createBottomCy(deep, dc - 10, 0, height));
		279	+ pathList.push(createBottomCy(deep, dc - 10, deep + width, height));
		280	+ pathList.push(createBottomDh(width, dc, deep, height));
		281	+ pathList.push(createBottomDh(width, dc, deep * 2 + width, height));
		282	+ pathList.push(createHorizontalDoubleArrow(width, deep + width / 2, height * 0.3));
		283	+ pathList.push(createHorizontalDoubleArrow(deep, deep + width + deep / 2, height * 0.5));
		284	+ pathList.push(createHorizontalDoubleArrow(dg, deep * 2 + width * 2 + dg / 2, height * 0.5));
		285	+ pathList.push(createDoubleArrow(db, deep + width + deep * 0.2, -db / 2, -3));
		286	+ pathList.push(createDoubleArrow(height, deep * 2 + width + width * 0.5, height / 2, -3));
		287	+ pathList.push(createDoubleArrow(dc, deep * 2 + width + width * 0.5, -deep - dc / 2, -3));
		288	+ pathList.push(createText(deep + width / 2, height * 0.3 + 15, 14, "L"));
		289	+ pathList.push(createText(deep + width + deep / 2, height * 0.5 + 15, 14, "W"));
		290	+ pathList.push(createText(deep * 2 + width * 2 + dg / 2, height * 0.5 + 15, 14, "g"));
		291	+ pathList.push(createText(deep + width + deep * 0.2 + 8, -db / 2, 14, "b"));
		292	+ pathList.push(createText(deep * 2 + width + width * 0.5 + 8, height / 2, 14, "D"));
		293	+ pathList.push(createText(deep * 2 + width + width * 0.5 + 8, -deep - dc / 2, 14, "c"));
		294	+ return pathList;
		295	+}
		296	+// 飞机盒
		297	+export function createAirplaneBox(slaveRowData) {
		298	+ const { W, L, D, dF5, dD3, dF, dD1, dTd } = slaveRowData;
		299	+ const pathList = [];
		300	+ const width = L;
		301	+ const height = W;
		302	+ const deep = D;
		303	+ const dD = dTd;
		304	+ // 盒身
		305	+ const rectangles = [
		306	+ { x: 0, y: 0, width: width - 8 * 2, height: height },
		307	+ { x: 0 - 4, y: height, width: width - 4 * 2, height: dD3 },
		308	+ { x: 0 - 8, y: height + dD3, width: width, height: height },
		309	+ { x: 0 - 4, y: height + dD3 + height, width: width - 4 * 2, height: dD3 },
		310	+ ];
		311	+ pathList.push(createBoxTop(width - 8 * 2, dD3, 0, -dD3, dF5));
		312	+ pathList.push(createBoxLeftTop(dF5, height, 0, 0, true));
		313	+ pathList.push(createBoxLeftTop(-dF5, height, width - 8 * 2, 0, false));
		314	+ pathList.push(createBoxDown(dF, dD3, -4, height));
		315	+ pathList.push(createBoxDown(-dF, dD3, width - 4 * 2 - 4, height));
		316	+ pathList.push(createBoxDown(dF, dD3, -4, height * 2 + dD3));
		317	+ pathList.push(createBoxDown(-dF, dD3, width - 4 * 2 - 4, height * 2 + dD3));
		318	+ pathList.push(createBoxComponent(deep, dD1, dD, height, 0 - 8, height + dD3, dD));
		319	+ pathList.push(createBoxComponent(-deep, -dD1, -dD, height, width - 8, height + dD3, -dD));
		320	+ // 竖向
		321	+ pathList.push(createDoubleArrow(dD3, L * 0.3, -dD3 / 2, -3));
		322	+ pathList.push(createText(L * 0.3 + 10, -dD3 / 2, 14, "d3"));
		323	+ pathList.push(createDoubleArrow(height, -15, height + dD3 + height / 2, -3));
		324	+ pathList.push(createText(-25, height + dD3 + height / 2, 14, "W"));
		325	+ // 横向
		326	+ pathList.push(createHorizontalDoubleArrow(dF5, -dF5 / 2, height / 2));
		327	+ pathList.push(createText(-dF5 / 2, height / 2 + 10, 14, "f5"));
		328	+ pathList.push(createHorizontalDoubleArrow(width, width / 2 - 8, dD3 + height + height * 0.2));
		329	+ pathList.push(createText(width / 2 - 8, dD3 + height + height * 0.2 + 10, 14, "L"));
		330	+ pathList.push(createHorizontalDoubleArrow(deep, width + deep / 2 - 8, dD3 + height + height * 0.2));
		331	+ pathList.push(createText(width + deep / 2 - 8, dD3 + height + height * 0.2 + 10, 14, "D"));
		332	+ pathList.push(createHorizontalDoubleArrow(dD1, width + deep + dD1 / 2 + dD - 8, dD3 + height + height * 0.2));
		333	+ pathList.push(createText(width + deep + dD1 / 2 + dD - 8, dD3 + height + height * 0.3 + 6, 14, "d1"));
		334	+ pathList.push(createHorizontalDoubleArrow(dD, width + deep + dD1 + dD / 2 + dD - 8, dD3 + height + height * 0.2));
		335	+ pathList.push(createText(width + deep + dD1 + dD / 2 + dD - 8, dD3 + height + height * 0.3 + 6, 14, "d"));
		336	+ pathList.push(createHorizontalDoubleArrow(dF, width - 12 + dF / 2, dD3 + height * 2 + dD3 / 2));
		337	+ pathList.push(createText(width - 12 + dF / 2, dD3 + height * 2 + dD3 / 2 + 10, 14, "f"));
		338	+ rectangles.forEach(x => {
		339	+ pathList.push(boxContent(x.width, x.height, x.x, x.y));
		340	+ });
		341	+
		342	+ return pathList;
		343	+}
		344	+// 手提袋
		345	+export function createTote(slaveRowData) {
		346	+ const pathList = [];
		347	+ const { W, L, D, dF, dF1, dF2 } = slaveRowData;
		348	+ const rectangles = [
		349	+ { x: 0, y: 0, width: L, height: D },
		350	+ { x: L, y: 0, width: W, height: D },
		351	+ { x: L + W, y: 0, width: L, height: D },
		352	+ { x: L + W + L, y: 0, width: W, height: D },
		353	+ ];
		354	+ rectangles.forEach(x => {
		355	+ pathList.push(boxContent(x.width, x.height, x.x, x.y));
		356	+ });
		357	+ pathList.push(createLineWelt(-dF, D, 0, 0));
		358	+ pathList.push(createLineWeltTop(dF + L * 2 + W * 2, -dF1, -dF, 0));
		359	+ pathList.push(createLineWeltTop(dF + L * 2 + W * 2, dF2, -dF, D));
		360	+ pathList.push(createLine(dF1, 0, -dF1));
		361	+ pathList.push(createLine(dF1, L, -dF1));
		362	+ pathList.push(createLine(dF2, 0, D));
		363	+ pathList.push(createLine(dF2, L, D));
		364	+ pathList.push(createLine(dF1 + D + dF2, L + W / 2, -dF1));
		365	+ pathList.push(createLine(dF1, L + W, -dF1));
		366	+ pathList.push(createLine(dF1, L * 2 + W, -dF1));
		367	+ pathList.push(createLine(dF2, L + W, D));
		368	+ pathList.push(createLine(dF2, L * 2 + W, D));
		369	+ pathList.push(createLine(dF1 + D + dF2, L * 2 + W + W / 2, -dF1));
		370	+
		371	+ // 横向
		372	+ pathList.push(createHorizontalDoubleArrow(dF, -dF / 2, D / 2));
		373	+ pathList.push(createText(-dF / 2, D / 2 + 10, 14, "f"));
		374	+ pathList.push(createHorizontalDoubleArrow(L, L / 2, D / 2, -3));
		375	+ pathList.push(createText(L / 2, D / 2 + 10, 14, "L"));
		376	+ pathList.push(createHorizontalDoubleArrow(W, L + W / 2, D / 2, -3));
		377	+ pathList.push(createText(L + W / 2, D / 2 + 10, 14, "W"));
		378	+ // 竖向
		379	+ pathList.push(createDoubleArrow(dF1, L + W + L / 2, -dF1 / 2, -3));
		380	+ pathList.push(createText(L + W + L / 2 + 10, -dF1 / 2, 14, "f1"));
		381	+ pathList.push(createDoubleArrow(dF2, L + W + L / 2, D + dF2 / 2, -3));
		382	+ pathList.push(createText(L + W + L / 2 + 10, D + dF2 / 2, 14, "f2"));
		383	+ pathList.push(createDoubleArrow(D, L + W + 10, D / 2, -3));
		384	+ pathList.push(createText(L + W + 20, D / 2, 14, "D"));
		385	+ return pathList;
		386	+}
		387	+// 普通盒
		388	+export function createBoxs(slaveRowData) {
		389	+ const pathList = [];
		390	+ const { W, L, D, dF, dG } = slaveRowData;
		391	+ const rectangles = [
		392	+ { x: 0, y: 0, width: L, height: D },
		393	+ { x: L, y: 0, width: W, height: D },
		394	+ { x: L + W, y: 0, width: L, height: D },
		395	+ { x: L + W + L, y: 0, width: W, height: D },
		396	+ ];
		397	+ rectangles.forEach(x => {
		398	+ pathList.push(boxContent(x.width, x.height, x.x, x.y));
		399	+ });
		400	+ pathList.push(createTrapezoid(D, 0, 0, dG));
		401	+ pathList.push(createLineWeltTop(L * 2 + W * 2, -dF, 0, 0));
		402	+ pathList.push(createLineWeltTop(L * 2 + W * 2, dF, 0, D));
		403	+ pathList.push(createLine(dF, L, -dF));
		404	+ pathList.push(createLine(dF, L + W, -dF));
		405	+ pathList.push(createLine(dF, L * 2 + W, -dF));
		406	+ pathList.push(createLine(dF, L, D));
		407	+ pathList.push(createLine(dF, L + W, D));
		408	+ pathList.push(createLine(dF, L * 2 + W, D));
		409	+
		410	+ pathList.push(createHorizontalDoubleArrow(dG, -dG / 2, D / 2));
		411	+ pathList.push(createText(-dG / 2, D / 2 + 10, 14, "g"));
		412	+
		413	+ pathList.push(createHorizontalDoubleArrow(W, L + W / 2, D * 0.7));
		414	+ pathList.push(createText(L + W / 2, D * 0.7 + 10, 14, "W"));
		415	+
		416	+ pathList.push(createHorizontalDoubleArrow(L, L + W + L / 2, D / 2));
		417	+ pathList.push(createText(L + W + L / 2, D / 2 + 10, 14, "L"));
		418	+
		419	+ pathList.push(createDoubleArrow(D, L + W + L * 0.2, D / 2, -3));
		420	+ pathList.push(createText(L + W + L * 0.2 + 10, D / 2, 14, "D"));
		421	+
		422	+ pathList.push(createDoubleArrow(dF, L + W + L * 0.6, -dF / 2, -3));
		423	+ pathList.push(createText(L + W + L * 0.6 + 10, -dF / 2, 14, "f"));
		424	+
		425	+ return pathList;
		426	+}
		427	+// 天地盖
		428	+export function createHeavenBox(slaveRowData) {
		429	+ const pathList = [];
		430	+ const { W, L, D, dF, dF1, dD1, dZBJJ } = slaveRowData;
		431	+ const rectangles = [{ x: 0, y: 0, width: L, height: W }, { x: L + D + dZBJJ + dD1, y: -2, width: L + 4, height: W + 4 }];
		432	+ rectangles.forEach(x => {
		433	+ pathList.push(boxContent(x.width, x.height, x.x, x.y));
		434	+ });
		435	+ pathList.push(createLineWelt(-D, W, 0, 0));
		436	+ pathList.push(createLineWelt(D, W, L, 0));
		437	+ pathList.push(createLineWelt(-dD1, W + 4, L + D + dZBJJ + dD1, -2));
		438	+ pathList.push(createLineWelt(dD1, W + 4, L * 2 + 4 + D + dZBJJ + dD1, -2));
		439	+
		440	+ pathList.push(createLineWeltTop(D * 2 + L, -dF, -D, 0));
		441	+ pathList.push(createLineWeltTop(D * 2 + L, dF, -D, W));
		442	+ pathList.push(createLineWeltTop(dD1 * 2 + L + 4, -dF1, L + D + dZBJJ, -2));
		443	+ pathList.push(createLineWeltTop(dD1 * 2 + L + 4, dF1, L + D + dZBJJ, W + 2));
		444	+
		445	+ pathList.push(createLine(dF, 0, -dF));
		446	+ pathList.push(createLine(dF, L, -dF));
		447	+ pathList.push(createLine(dF1, L + D + dZBJJ + dD1, -dF1 - 2));
		448	+ pathList.push(createLine(dF1, L + D + dZBJJ + dD1 + L + 4, -dF1 - 2));
		449	+ pathList.push(createLine(dF, 0, W));
		450	+ pathList.push(createLine(dF, L, W));
		451	+ pathList.push(createLine(dF1, L + D + dZBJJ + dD1, W + 2));
		452	+ pathList.push(createLine(dF1, L + D + dZBJJ + dD1 + L + 4, W + 2));
		453	+
		454	+ // 横向标注
		455	+ pathList.push(createHorizontalDoubleArrow(L, L / 2, W * 0.3));
		456	+ pathList.push(createText(L / 2, W * 0.3 + 10, 14, "L"));
		457	+ pathList.push(createHorizontalDoubleArrow(D, L + D / 2, W / 2));
		458	+ pathList.push(createText(L + D / 2, W / 2 + 10, 14, "D"));
		459	+ pathList.push(createHorizontalDoubleArrow(dD1, L + D + dZBJJ + dD1 + L + 4 + dD1 / 2, W / 2));
		460	+ pathList.push(createText(L + D + dZBJJ + dD1 + L + 4 + dD1 / 2, W / 2 + 10, 14, "d1"));
		461	+ // 竖向
		462	+ pathList.push(createDoubleArrow(dF, L + D / 2, -dF / 2, -3));
		463	+ pathList.push(createText(L + D / 2 + 10, -dF / 2, 14, "f"));
		464	+ pathList.push(createDoubleArrow(dF + 2, L + D + dZBJJ + dD1 + L + 4 + dD1 / 2, -dF / 2 - 1, -3));
		465	+ pathList.push(createText(L + D + dZBJJ + dD1 + L + 4 + dD1 / 2 + 10, -dF / 2, 14, "f1"));
		466	+ return pathList;
		467	+}
		468	+
		469	+// 盘式盒
		470	+export function createDiscBox(slaveRowData) {
		471	+ const pathList = [];
		472	+ const { W, L, D, dF, dD1, dTd, dDj } = slaveRowData;
		473	+ const dTW1 = (W / 2) * 0.1;
		474	+ const dTW2 = (W / 2) * 0.2;
		475	+ const dTW = W / 2 - dTW2 * 2 - dTW1;
		476	+ const rectangles = [
		477	+ { x: 0, y: 0, width: L - 4, height: D },
		478	+ { x: -2, y: D, width: L, height: W },
		479	+ { x: 0, y: D + W, width: L - 4, height: D },
		480	+ { x: -2, y: D + dTW1 + dTW2, width: 5, height: dTW },
		481	+ { x: L - 7, y: D + dTW1 + dTW2, width: 5, height: dTW },
		482	+ { x: -2, y: D + W - dTW1 - dTW2 - dTW, width: 5, height: dTW },
		483	+ { x: L - 7, y: D + W - dTW1 - dTW2 - dTW, width: 5, height: dTW },
		484	+ ];
		485	+ rectangles.forEach(x => {
		486	+ pathList.push(boxContent(x.width, x.height, x.x, x.y));
		487	+ });
		488	+ pathList.push(createBoxDown(dF, D - 4, 0, 2));
		489	+ pathList.push(createBoxDown(-dF, D - 4, L - 4, 2));
		490	+ pathList.push(createBoxDown(dF, D - 4, 0, D + W + 2));
		491	+ pathList.push(createBoxDown(-dF, D - 4, L - 4, D + W + 2));
		492	+ pathList.push(createBoxComponent(D, dD1, dTd, W, 0 - 2, D, dDj));
		493	+ pathList.push(createBoxComponent(-D, -dD1, -dTd, W, L, D, -dDj));
		494	+ // 横向标注
		495	+ pathList.push(createHorizontalDoubleArrow(L, (L - 2) / 2, D + W * 0.3));
		496	+ pathList.push(createText((L - 2) / 2, D + W * 0.3 + 10, 14, "L"));
		497	+ pathList.push(createHorizontalDoubleArrow(D, L + D / 2, D + 10));
		498	+ pathList.push(createText(L + D / 2, D + 15, 14, "D"));
		499	+ // 竖向
		500	+ pathList.push(createDoubleArrow(W, -D / 2, D + W / 2, -3));
		501	+ pathList.push(createText(-D / 2, D + W / 2 + 10, 14, "W"));
		502	+ return pathList;
		503	+}
		504	+// 展示盒f1
		505	+const createShowBoxF1 = (width, height, offsetX, offsetY, size) => {
		506	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		507	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX - width} ${offsetY + size + 1} L ${offsetX - width} ${offsetY +
		508	+ height} L ${offsetX} ${offsetY + height} Z`;
		509	+ svg.setAttribute("d", d);
		510	+ svg.setAttribute("fill", "transparent");
		511	+ svg.setAttribute("stroke", "#333");
		512	+ svg.setAttribute("stroke-width", "1");
		513	+ return svg;
		514	+};
		515	+// 展示盒机翼
		516	+const createShowBoxWing = (width, height, offsetX, offsetY, size) => {
		517	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		518	+ const d = `M ${offsetX} ${offsetY} ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + height} L ${offsetX + width} ${offsetY}`;
		519	+ svg.setAttribute("d", d);
		520	+ svg.setAttribute("fill", "transparent");
		521	+ svg.setAttribute("stroke", "#333");
		522	+ svg.setAttribute("stroke-width", "1");
		523	+ return svg;
		524	+};
		525	+// 展示盒f1
		526	+const createShowBoxF2 = (width, height, offsetX, offsetY, size) => {
		527	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		528	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + size} ${offsetY + height + size}
		529	+ L ${offsetX + width} ${offsetY + height + size} L ${offsetX + width} ${offsetY + -size * 2} L ${offsetX} ${offsetY}`;
		530	+ svg.setAttribute("d", d);
		531	+ svg.setAttribute("fill", "transparent");
		532	+ svg.setAttribute("stroke", "#333");
		533	+ svg.setAttribute("stroke-width", "1");
		534	+ return svg;
		535	+};
		536	+// 展示盒
		537	+export function createShowBox(slaveRowData) {
		538	+ const pathList = [];
		539	+ const { L, W, D, dD2, dF1, dF2 } = slaveRowData;
		540	+ const rectangles = [{ x: 0, y: 0, width: D, height: W }, { x: D, y: 0, width: L, height: W }, { x: D + L, y: 0, width: dD2, height: W }];
		541	+ rectangles.forEach(x => {
		542	+ pathList.push(boxContent(x.width, x.height, x.x, x.y));
		543	+ });
		544	+ pathList.push(createShowBoxF1(dF1, -D, D, 0, -3));
		545	+ pathList.push(createShowBoxF1(dF1, D, D, W, 3));
		546	+ pathList.push(createShowBoxWing(L, -dD2, D, 0, -D));
		547	+ pathList.push(createShowBoxWing(L, dD2, D, W, D));
		548	+ pathList.push(createShowBoxF2(dF2, -dD2, D + L, 0, 2));
		549	+ pathList.push(createShowBoxF2(dF2, dD2, D + L, W, -2));
		550	+ // 横向标注
		551	+ pathList.push(createHorizontalDoubleArrow(L, D + L / 2, W * 0.3));
		552	+ pathList.push(createText(D + L / 2, W * 0.3 + 10, 14, "L"));
		553	+ pathList.push(createHorizontalDoubleArrow(dF1, dF1 / 2, -D / 2));
		554	+ pathList.push(createText(dF1 / 2, -D / 2 + 10, 14, "f1"));
		555	+
		556	+ pathList.push(createHorizontalDoubleArrow(D, D / 2, W / 2));
		557	+ pathList.push(createText(D / 2, W / 2 + 10, 14, "D"));
		558	+
		559	+ pathList.push(createHorizontalDoubleArrow(dF2, D + L + dF2 / 2, -dD2 / 2));
		560	+ pathList.push(createText(D + L + dF2 / 2, -dD2 / 2 + 10, 14, "f2"));
		561	+
		562	+ pathList.push(createHorizontalDoubleArrow(dD2, D + L + dD2 / 2, W / 2));
		563	+ pathList.push(createText(D + L + dD2 / 2, W / 2 + 10, 14, "D2"));
		564	+ // 竖向
		565	+ pathList.push(createDoubleArrow(W, D + L * 0.8, W / 2, -3));
		566	+ pathList.push(createText(D + L * 0.8 + 10, D + W / 2, 14, "W"));
		567	+ return pathList;
		568	+}
		569	+// 内衬槽
		570	+const createInnerLiningGroove = (width, height, offsetX, offsetY) => {
		571	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		572	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height - width / 2} A ${width / 2} ${width / 2} 0 0 0 ${offsetX - width} ${offsetY +
		573	+ height} L ${offsetX - width} ${offsetY}`;
		574	+ svg.setAttribute("d", d);
		575	+ svg.setAttribute("fill", "transparent");
		576	+ svg.setAttribute("stroke", "#333");
		577	+ svg.setAttribute("stroke-width", "1");
		578	+ return svg;
		579	+};
		580	+// 内衬
		581	+export function createLiningBox(slaveRowData) {
		582	+ const pathList = [];
		583	+ const { L, W, D, dCk, dY, dX } = slaveRowData;
		584	+ const rectangles = [{ x: 0, y: 0, width: L, height: D }];
		585	+ rectangles.forEach(x => {
		586	+ pathList.push(boxContent(x.width, x.height, x.x, x.y));
		587	+ });
		588	+ const width = (L - dX * 2) / (dCk - 1);
		589	+ for (let index = 0; index < Number(dCk); index++) {
		590	+ pathList.push(createInnerLiningGroove(3, dY, L - dX - width * index, 0));
		591	+ }
		592	+ // 横向标注
		593	+ pathList.push(createHorizontalDoubleArrow(L, L / 2, D * 0.9));
		594	+ pathList.push(createText(L / 2, D * 0.9 - 10, 14, "L"));
		595	+ pathList.push(createHorizontalDoubleArrow(dX, L - dX / 2, dY / 2));
		596	+ pathList.push(createText(L - dX / 2, dY / 2 + 10, 14, "x"));
		597	+ // 竖向
		598	+ pathList.push(createDoubleArrow(D, dX / 2 - 5, D / 2, -3));
		599	+ pathList.push(createText(dX / 2, D / 2, 12, "D"));
		600	+ return pathList;
		601	+}
		602	+const createDiagonalEdging = (width, height, offsetX, offsetY) => {
		603	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		604	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + 5} ${offsetY + height} L ${offsetX + width - 5} ${offsetY + height} L${offsetX +
		605	+ width} ${offsetY}`;
		606	+ svg.setAttribute("d", d);
		607	+ svg.setAttribute("fill", "transparent");
		608	+ svg.setAttribute("stroke", "#333");
		609	+ svg.setAttribute("stroke-width", "1");
		610	+ return svg;
		611	+};
		612	+// 信封
		613	+export function createEnvelope(slaveRowData) {
		614	+ const pathList = [];
		615	+ const { L, W, D, dF1, dS1 } = slaveRowData;
		616	+ const rectangles = [{ x: 0, y: 0, width: W, height: L }];
		617	+ rectangles.forEach(x => {
		618	+ pathList.push(boxContent(x.width, x.height, x.x, x.y));
		619	+ });
		620	+ pathList.push(createTrapezoid(L, 0, 0, dS1));
		621	+ pathList.push(createDiagonalEdging(W, -dF1, 0, 0));
		622	+ pathList.push(createDiagonalEdging(W, dF1, 0, L));
		623	+ pathList.push(createLineWelt(W, L, W, 0));
		624	+
		625	+ // 横向标注
		626	+ pathList.push(createHorizontalDoubleArrow(W, W / 2, L * 0.3));
		627	+ pathList.push(createText(W / 2, D * 0.3 + 10, 14, "W"));
		628	+ pathList.push(createHorizontalDoubleArrow(dS1, -dS1 / 2, L / 2));
		629	+ pathList.push(createText(-dS1 / 2, L / 2 + 10, 14, "s1"));
		630	+ // 竖向
		631	+ pathList.push(createDoubleArrow(L, W * 0.8, L / 2, -3));
		632	+ pathList.push(createText(W * 0.8 + 10, L / 2, 14, "L"));
		633	+ pathList.push(createDoubleArrow(dF1, W * 0.7, L + dF1 / 2, -3));
		634	+ pathList.push(createText(W * 0.7 + 10, L + dF1 / 2, 14, "f1"));
		635	+ return pathList;
		636	+}
		637	+// 抽屉盒
		638	+// export function
		639	+const createSvg = d => {
		640	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		641	+ svg.setAttribute("d", d);
		642	+ svg.setAttribute("fill", "transparent");
		643	+ svg.setAttribute("stroke", "#7588B9");
		644	+ svg.setAttribute("stroke-width", "1");
		645	+ return svg;
		646	+};
		647	+const createDasharraySvg = d => {
		648	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		649	+ svg.setAttribute("d", d);
		650	+ svg.setAttribute("fill", "transparent");
		651	+ svg.setAttribute("stroke", "#333");
		652	+ svg.setAttribute("stroke-width", "1");
		653	+ svg.setAttribute("stroke-dasharray", "4");
		654	+ return svg;
		655	+};
		656	+// 添加虚线效果
		657	+// 上下直线贴边
		658	+export const createLineWeltTop = (width, height, offsetX, offsetY) => {
		659	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + width} ${offsetY + height} L ${offsetX + width} ${offsetY}`;
		660	+ return createSvg(d);
		661	+};
		662	+
		663	+// 上方盒舌等腰梯形
		664	+export const createIsoscelesTrapezoidWeltTop = (width, height, offsetX, offsetY) => {
		665	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.1} ${offsetY + height} L ${offsetX + width * 0.9} ${offsetY + height} L ${offsetX +
		666	+ width} ${offsetY}`;
		667	+ return createSvg(d);
		668	+};
		669	+// 盒舌梯形
		670	+export const createTrapezoidWeltTop = (width, height, offsetX, offsetY) => {
		671	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.5} ${offsetY + height} L ${offsetX + width * 0.9} ${offsetY + height} L ${offsetX +
		672	+ width} ${offsetY}`;
		673	+ return createSvg(d);
		674	+};
		675	+// 盒舌折叠
		676	+export const createFoldWeltTop = (width, height, offsetX, offsetY) => {
		677	+ // 判断高度正负值
		678	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.1} ${offsetY + height * 0.5} L ${offsetX + width * 0.5} ${offsetY + height * 0.5}
		679	+ L ${offsetX + width * 0.5} ${offsetY + height * 0.9} L ${offsetX + width} ${offsetY + height} L ${offsetX + width} ${offsetY}
		680	+ `;
		681	+ return createSvg(d);
		682	+};
		683	+// 盒舌折叠虚线
		684	+export const createFoldWeltTopLine = (width, height, offsetX, offsetY) => {
		685	+ const d = `M ${offsetX} ${offsetY} ${offsetX + width} ${offsetY + height} `;
		686	+ return createDasharraySvg(d);
		687	+};
		688	+// 盒舌圆角
		689	+export const createRoundedCornersWeltTop = (width, height, offsetX, offsetY) => {
		690	+ const isNegative = (width > 0 && height > 0) \|\| (width < 0 && height < 0);
		691	+
		692	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.1} ${offsetY + height * 0.9} L ${offsetX + width} ${offsetY + height} L ${offsetX +
		693	+ width} ${offsetY}`;
		694	+ return createSvg(d);
		695	+};
		696	+// 盒底组件直角
		697	+export const createRightAngleBoxBottomComponent = (width, deep, size, offsetX, offsetY) => {
		698	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + size} L ${offsetX + width} ${offsetY}
		699	+ L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep} ${offsetY}
		700	+ L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY}
		701	+ L ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY + size} L ${offsetX +
		702	+ width +
		703	+ deep +
		704	+ width +
		705	+ deep} ${offsetY}`;
		706	+ return createSvg(d);
		707	+};
		708	+// 盒底组件 5002
		709	+export const createBoxBottomComponent1 = (width, deep, size, offsetX, offsetY) => {
		710	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.2} ${offsetY + size * 0.5} L ${offsetX + width * 0.2} ${offsetY + size} L ${offsetX +
		711	+ width * 0.8} ${offsetY + size} L ${offsetX + width * 0.8} ${offsetY + size * 0.5} L ${offsetX + width} ${offsetY}
		712	+ L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY +
		713	+ size * 0.5} L ${offsetX + width + deep} ${offsetY}
		714	+ L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width * 0.2} ${offsetY + size} L ${offsetX +
		715	+ width +
		716	+ deep +
		717	+ width * 0.2} ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.8} ${offsetY + size * 0.5} L ${offsetX +
		718	+ width +
		719	+ deep +
		720	+ width * 0.8} ${offsetY + size}
		721	+ L ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY}
		722	+ L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + size * 0.5} L ${offsetX + width + deep + width + deep * 0.5} ${offsetY +
		723	+ size} L ${offsetX + width + deep + width + deep} ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY}
		724	+ `;
		725	+ return createSvg(d);
		726	+};
		727	+// 盒底组件 5003
		728	+export const createBoxBottomComponent2 = (width, deep, size, offsetX, offsetY) => {
		729	+ const d = `M ${offsetX} ${offsetY}
		730	+ L ${offsetX + width * 0.2} ${offsetY + size} L ${offsetX + width * 0.8} ${offsetY + size} L ${offsetX + width} ${offsetY}
		731	+ L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY +
		732	+ size * 0.5} L ${offsetX + width + deep} ${offsetY}
		733	+ L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width * 0.2} ${offsetY + size} L ${offsetX +
		734	+ width +
		735	+ deep +
		736	+ width * 0.2} ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.8} ${offsetY + size * 0.5} L ${offsetX +
		737	+ width +
		738	+ deep +
		739	+ width * 0.8} ${offsetY + size} ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY}
		740	+ L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + size * 0.5} L ${offsetX + width + deep + width + deep * 0.5} ${offsetY +
		741	+ size} L ${offsetX + width + deep + width + deep} ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY}
		742	+
		743	+ `;
		744	+ return createSvg(d);
		745	+};
		746	+// 盒底组件 5004
		747	+export const createBoxBottomComponent3 = (width, deep, size, offsetX, offsetY) => {
		748	+ const d = `M ${offsetX} ${offsetY}
		749	+ L ${offsetX + width * 0.05} ${offsetY + size} L ${offsetX + width * 0.25} ${offsetY + size} L ${offsetX + width * 0.5} ${offsetY +
		750	+ size * 0.5} L ${offsetX + width * 0.75} ${offsetY + size} L ${offsetX + width * 0.95} ${offsetY + size} L ${offsetX + width} ${offsetY}
		751	+ L ${offsetX + width + deep * 0.1} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + size} L ${offsetX + width + deep} ${offsetY}
		752	+ L ${offsetX + width + deep + width * 0.05} ${offsetY + size} L ${offsetX + width + deep + width * 0.25} ${offsetY + size} L ${offsetX +
		753	+ width +
		754	+ deep +
		755	+ width * 0.5} ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.75} ${offsetY + size} L ${offsetX +
		756	+ width +
		757	+ deep +
		758	+ width * 0.95} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY}
		759	+ L ${offsetX + width * 2 + deep + deep * 0.5} ${offsetY + size} L ${offsetX + width * 2 + deep + deep * 0.9} ${offsetY + size} L ${offsetX +
		760	+ width * 2 +
		761	+ deep +
		762	+ deep} ${offsetY + size} L ${offsetX + width * 2 + deep * 2} ${offsetY}
		763	+ `;
		764	+ return createSvg(d);
		765	+};
		766	+// 盒底组件 5005
		767	+export const createBoxBottomComponent4 = (width, deep, size, offsetX, offsetY) => {
		768	+ const d = `M ${offsetX} ${offsetY}
		769	+ L ${offsetX} ${offsetY + size} L ${offsetX + width * 0.3} ${offsetY + size} L ${offsetX + width} ${offsetY}
		770	+ L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep * 0.3} ${offsetY + size} L ${offsetX + width + deep} ${offsetY}
		771	+ L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width * 0.3} ${offsetY + size} L ${offsetX + width * 2 + deep} ${offsetY}
		772	+ L ${offsetX + width * 2 + deep} ${offsetY + size} L ${offsetX + width * 2 + deep + deep * 0.3} ${offsetY + size} L ${offsetX +
		773	+ width * 2 +
		774	+ deep * 2} ${offsetY}
		775	+ `;
		776	+ return createSvg(d);
		777	+}; // 盒底组件 5006
		778	+export const createBoxBottomComponent5 = (width, deep, size, offsetX, offsetY) => {
		779	+ const d = `M ${offsetX} ${offsetY}
		780	+ A ${width * 0.5} ${width * 0.5} 0 0 0 ${offsetX + width} ${offsetY}
		781	+ A ${deep * 0.5} ${deep * 0.5} 0 0 0 ${offsetX + width + deep} ${offsetY}
		782	+ A ${width * 0.5} ${width * 0.5} 0 0 0 ${offsetX + width * 2 + deep} ${offsetY}
		783	+ A ${deep * 0.5} ${deep * 0.5} 0 0 0 ${offsetX + width * 2 + deep * 2} ${offsetY}
		784	+ `;
		785	+ return createSvg(d);
		786	+};
		787	+// 盒底组件 5007
		788	+export const createBoxBottomComponent6 = (width, deep, size, offsetX, offsetY) => {
		789	+ const d = `M ${offsetX} ${offsetY}
		790	+ L ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + size} L ${offsetX + width} ${offsetY}
		791	+ L ${offsetX + width + deep * 0.2} ${offsetY + size * 0.7} A ${size * 0.1} ${size * 0.1} 0 0 0 ${offsetX + width + deep * 0.2} ${offsetY + size}
		792	+ L ${offsetX + width + deep * 0.8} ${offsetY + size} A ${size * 0.1} ${size * 0.1} 0 0 0 ${offsetX + width + deep * 0.8} ${offsetY + size * 0.7}
		793	+ L ${offsetX + width + deep} ${offsetY}
		794	+ L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + width + deep} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY}
		795	+ L ${offsetX + width + deep + width + deep * 0.2} ${offsetY + size * 0.7} A ${size * 0.1} ${size * 0.1} 0 0 0 ${offsetX +
		796	+ width +
		797	+ deep +
		798	+ width +
		799	+ deep * 0.2} ${offsetY + size}
		800	+ L ${offsetX + width + deep + width + deep * 0.8} ${offsetY + size} A ${size * 0.1} ${size * 0.1} 0 0 0 ${offsetX +
		801	+ width +
		802	+ deep +
		803	+ width +
		804	+ deep * 0.8} ${offsetY + size * 0.7}
		805	+ L ${offsetX + width + deep + width + deep} ${offsetY}
		806	+ `;
		807	+ return createSvg(d);
		808	+};
		809	+// 部件
		810	+export const createBoxComponentNew = (width, deep, size, offsetX, offsetY) => {
		811	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${offsetY + deep} L ${offsetX + width} ${offsetY}
		812	+ L ${offsetX + width} ${offsetY + deep + size} L ${offsetX} ${offsetY + deep + size} L ${offsetX} ${offsetY}`;
		813	+ return createSvg(d);
		814	+};
		815	+// 部件1
		816	+export const createBoxComponentNew1 = (width, deep, size, offsetX, offsetY) => {
		817	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + size} L ${offsetX + width} ${offsetY}`;
		818	+ return createSvg(d);
		819	+};
		820	+// 部件2
		821	+export const createBoxComponentNew2 = (width, deep, size, offsetX, offsetY) => {
		822	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.4} ${offsetY} L ${offsetX + width * 0.4} ${offsetY + size} L ${offsetX +
		823	+ width * 0.6} ${offsetY + size} L ${offsetX + width * 0.6} ${offsetY} L ${offsetX + width} ${offsetY}`;
		824	+ return createSvg(d);
		825	+};
		826	+// 部件3
		827	+export const createBoxComponentNew3 = (width, deep, size, offsetX, offsetY) => {
		828	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep * 2} L ${offsetX + width * 0.2} ${offsetY + deep * 2} L ${offsetX +
		829	+ width * 0.2} ${offsetY + deep * 2 + size} L ${offsetX + width * 0.4} ${offsetY + deep * 2 + size}
		830	+ L ${offsetX + width * 0.4} ${offsetY + deep * 2} L ${offsetX + width * 0.6} ${offsetY + deep * 2} L${offsetX + width * 0.6} ${offsetY +
		831	+ deep * 2 +
		832	+ size} L ${offsetX + width * 0.8} ${offsetY + deep * 2 + size} L ${offsetX + width * 0.8} ${offsetY + deep * 2}
		833	+ L ${offsetX + width} ${offsetY + deep * 2} L ${offsetX + width} ${offsetY + deep} L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${offsetY +
		834	+ deep} ${offsetX + width} ${offsetY}`;
		835	+ return createSvg(d);
		836	+};
		837	+// 部件4
		838	+export const createBoxComponentNew4 = (width, deep, size, offsetX, offsetY) => {
		839	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep * 2} L ${offsetX + width} ${offsetY + deep * 2} L ${offsetX + width} ${offsetY +
		840	+ deep} L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${offsetY + deep} L ${offsetX + width} ${offsetY}
		841	+ M ${offsetX + width * 0.3} ${offsetY + deep * 0.8} L ${offsetX + width * 0.3} ${offsetY + deep * 0.6} L ${offsetX + width * 0.7} ${offsetY +
		842	+ deep * 0.6} L ${offsetX + width * 0.7} ${offsetY + deep * 0.8} L ${offsetX + width * 0.3} ${offsetY + deep * 0.8}
		843	+ M ${offsetX + width * 0.3} ${offsetY + deep + deep * 0.8} L ${offsetX + width * 0.3} ${offsetY + deep + deep * 0.6} L ${offsetX +
		844	+ width * 0.7} ${offsetY + deep + deep * 0.6} L ${offsetX + width * 0.7} ${offsetY + deep + deep * 0.8} L ${offsetX + width * 0.3} ${offsetY +
		845	+ deep +
		846	+ deep * 0.8}
		847	+ `;
		848	+ return createSvg(d);
		849	+};
		850	+// 部件4的小组件
		851	+export const createBoxComponentNew4_1 = (width, size, offsetX, offsetY) => {
		852	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + size} L ${offsetX + width} ${offsetY}Z`;
		853	+ return createSvg(d);
		854	+};
		855	+
		856	+// 部件5
		857	+export const createBoxComponentNew5 = (width, deep, size, offsetX, offsetY) => {
		858	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${offsetY + deep}
		859	+ L ${offsetX + width} ${offsetY} L ${offsetX + width} ${offsetY + deep} L ${offsetX + width * 0.9} ${offsetY + deep + size}
		860	+ L ${offsetX + width * 0.1} ${offsetY + deep + size} L ${offsetX} ${offsetY + deep}
		861	+ `;
		862	+ return createSvg(d);
		863	+};
		864	+// 贴边1
		865	+export const createWelt = (height, size, offsetX, offsetY) => {
		866	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + size * 0.6} ${offsetY} L ${offsetX + size * 0.6} ${offsetY + height} L ${offsetX +
		867	+ size * 0.6} ${offsetY} L ${offsetX + size} ${offsetY + height * 0.1} L ${offsetX + size} ${offsetY + height * 0.9} L ${offsetX +
		868	+ size * 0.6} ${offsetY + height} L ${offsetX} ${offsetY + height}`;
		869	+ return createSvg(d);
		870	+};
		871	+// 贴边1
		872	+export const createWelt1 = (height, size, offsetX, offsetY) => {
		873	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY + height * 0.1} L ${offsetX + size} ${offsetY +
		874	+ height * 0.9} L ${offsetX} ${offsetY + height}`;
		875	+ return createSvg(d);
		876	+};
		877	+// 贴边2
		878	+export const createWelt2 = (height, size, offsetX, offsetY) => {
		879	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY} A ${size * 0.5} ${size} 0 0 1 ${offsetX + size * 0.5} ${offsetY +
		880	+ size} A ${size * 0.5} ${size} 0 0 1 ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} A ${size * 0.5} ${size} 0 0 1 ${offsetX +
		881	+ size * 0.5} ${offsetY + height + Math.abs(size)} A ${size * 0.5} ${size} 0 0 1 ${offsetX + size} ${offsetY + height} L ${offsetX +
		882	+ size} ${offsetY} L ${offsetX + size} ${offsetY + height} L ${offsetX} ${offsetY + height}`;
		883	+ return createSvg(d);
		884	+};
		885	+export const createWelt2Right = (height, size, offsetX, offsetY) => {
		886	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY} A ${size * 0.5} ${size} 0 0 0 ${offsetX + size * 0.5} ${offsetY - size} A ${size *
		887	+ 0.5} ${size} 0 0 0 ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} A ${size * 0.5} ${size} 0 0 0 ${offsetX + size * 0.5} ${offsetY +
		888	+ height +
		889	+ Math.abs(size)} A ${size * 0.5} ${size} 0 0 0 ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${offsetY} L ${offsetX + size} ${offsetY +
		890	+ height} L ${offsetX} ${offsetY + height}`;
		891	+ return createSvg(d);
		892	+};
		893	+export const createWelt3 = (height, size, offsetX, offsetY) => {
		894	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${offsetY +
		895	+ size * 0.3} L ${offsetX} ${offsetY + size * 0.3} L ${offsetX} ${offsetY}`;
		896	+ return createSvg(d);
		897	+};
		898	+export const createWelt3Right = (height, size, offsetX, offsetY) => {
		899	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${offsetY -
		900	+ size * 0.3} L ${offsetX} ${offsetY - size * 0.3} L ${offsetX} ${offsetY}`;
		901	+ return createSvg(d);
		902	+};
		903	+// 天地盒
		904	+export const createFullTelescope = (width, height, deep, offsetX, offsetY) => {
		905	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + width} ${offsetY} L ${offsetX + width} ${offsetY + height} L ${offsetX} ${offsetY +
		906	+ height} L ${offsetX} ${offsetY}
		907	+ L ${offsetX - deep} ${offsetY} L ${offsetX - deep} ${offsetY + height} L ${offsetX} ${offsetY + height}
		908	+ L ${offsetX} ${offsetY + height + deep} L ${offsetX + width} ${offsetY + height + deep} L ${offsetX + width} ${offsetY + height}
		909	+ L ${offsetX + width + deep} ${offsetY + height} L ${offsetX + width + deep} ${offsetY} L ${offsetX + width} ${offsetY}
		910	+ L ${offsetX + width} ${offsetY - deep} L ${offsetX} ${offsetY - deep} L ${offsetX} ${offsetY}
		911	+ `;
		912	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		913	+ svg.setAttribute("d", d);
		914	+ svg.setAttribute("fill", "transparent");
		915	+ svg.setAttribute("stroke", "red");
		916	+ svg.setAttribute("stroke-width", "1");
		917	+ svg.setAttribute("stroke-dasharray", "4"); // 添加虚线效果
		918	+ return svg;
		919	+};
		920	+// 天地部件1
		921	+export const createBoxComponentNewFull = (width, deep, size, offsetX, offsetY) => {
		922	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + deep} ${offsetY} L ${offsetX + deep} ${offsetY + width} L ${offsetX + deep} ${offsetY}
		923	+ L ${offsetX + deep + size} ${offsetY} L ${offsetX + deep + size} ${offsetY + width} L ${offsetX} ${offsetY + width}`;
		924	+ return createSvg(d);
		925	+};
		926	+// 天地部件2
		927	+export const createBoxComponentNewFull1 = (width, size, offsetX, offsetY) => {
		928	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY} L ${offsetX + size} ${offsetY + width} L ${offsetX} ${offsetY + width}`;
		929	+ return createSvg(d);
		930	+};
		931	+// 天地部件3
		932	+export const createBoxComponentNewFull2 = (width, size, offsetX, offsetY) => {
		933	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + width * 0.4} L ${offsetX + size} ${offsetY + width * 0.4}
		934	+ L ${offsetX + size} ${offsetY + width * 0.6} L ${offsetX} ${offsetY + width * 0.6} L ${offsetX} ${offsetY + width}
		935	+ `;
		936	+ return createSvg(d);
		937	+};
		938	+// 天地部件4
		939	+export const createBoxComponentNewFul3 = (width, deep, size, offsetX, offsetY) => {
		940	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + deep} ${offsetY} L ${offsetX + deep} ${offsetY + width} L ${offsetX} ${offsetY + width}
		941	+ L ${offsetX + deep * 2} ${offsetY + width} L ${offsetX + deep * 2} ${offsetY + width * 0.8} L ${offsetX + deep * 2 + size} ${offsetY + width * 0.8}
		942	+ L ${offsetX + deep * 2 + size} ${offsetY + width * 0.6} L ${offsetX + deep * 2} ${offsetY + width * 0.6}
		943	+ L ${offsetX + deep * 2} ${offsetY + width * 0.4} L ${offsetX + deep * 2 + size} ${offsetY + width * 0.4}
		944	+ L ${offsetX + deep * 2 + size} ${offsetY + width * 0.2} L ${offsetX + deep * 2} ${offsetY + width * 0.2}
		945	+ L ${offsetX + deep * 2} ${offsetY} L ${offsetX} ${offsetY}
		946	+ `;
		947	+ return createSvg(d);
		948	+};
		949	+// 天地部件4
		950	+export const createBoxComponentNewFul4 = (width, deep, size, offsetX, offsetY) => {
		951	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + deep * 2} ${offsetY} L ${offsetX + deep * 2} ${offsetY + width} L ${offsetX + deep} ${offsetY +
		952	+ width} L ${offsetX + deep} ${offsetY} L ${offsetX + deep} ${offsetY + width} L ${offsetX} ${offsetY + width}
		953	+ M ${offsetX + deep * 0.8} ${offsetY + width * 0.3} L ${offsetX + deep * 0.6} ${offsetY + width * 0.3} L ${offsetX + deep * 0.6} ${offsetY +
		954	+ width * 0.7} L ${offsetX + deep * 0.8} ${offsetY + width * 0.7} L ${offsetX + deep * 0.8} ${offsetY + width * 0.3}
		955	+ M ${offsetX + deep + deep * 0.8} ${offsetY + width * 0.3} L ${offsetX + deep + deep * 0.6} ${offsetY + width * 0.3} L ${offsetX +
		956	+ deep +
		957	+ deep * 0.6} ${offsetY + width * 0.7} L ${offsetX + deep + deep * 0.8} ${offsetY + width * 0.7} L ${offsetX + deep + deep * 0.8} ${offsetY +
		958	+ width * 0.3}
		959	+ `;
		960	+ return createSvg(d);
		961	+};
		962	+// 部件5
		963	+export const createBoxComponentNewFul5 = (width, deep, size, offsetX, offsetY) => {
		964	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + deep } ${offsetY} L ${offsetX + deep } ${offsetY + width}
		965	+ L ${offsetX + deep } ${offsetY} L ${offsetX + deep + size} ${offsetY + width * 0.1} L${offsetX + deep+ size} ${offsetY + width * 0.9}
		966	+ L ${offsetX + deep } ${offsetY + width} L ${offsetX} ${offsetY + width}
		967	+ `;
		968	+ return createSvg(d);
		969	+};
0	\ No newline at end of file	970	\ No newline at end of file

src/components/Common/BoxDesign/index.css 0 → 100644

View file @43cccc6

		1	+.svgBox {
		2	+ width: 145px;
		3	+ height: 130px;
		4	+ overflow: hidden;
		5	+}
		6	+.svgContainer {
		7	+ width: 100%;
		8	+ height: 100%;
		9	+ object-fit: contain;
		10	+ /* 确保 SVG 保持比例 */
		11	+}

src/components/Common/BoxDesign/index.js 0 → 100644

View file @43cccc6

		1	+/* eslint-disable */
		2	+import React, { useRef, useState, useEffect } from "react";
		3	+import style from "./index.less";
		4	+import {
		5	+ createEnvelope,
		6	+ createAirplaneBox,
		7	+ createDeductionBox,
		8	+ createTote,
		9	+ createBoxs,
		10	+ createHeavenBox,
		11	+ createDiscBox,
		12	+ createShowBox,
		13	+ createLiningBox,
		14	+} from "./createAirplaneBox";
		15	+const DynamicSVG = props => {
		16	+ const svgRef = useRef(null);
		17	+ const svgContainerRef = useRef(null);
		18	+ const [boxKey, setBoxKey] = useState(new Date().getTime());
		19	+ const [currentTranslateX, setCurrentTranslateX] = useState(0);
		20	+ const [currentTranslateY, setCurrentTranslateY] = useState(0);
		21	+ const [currentScale, setCurrentScale] = useState(1);
		22	+ const [positionInfo, setPositionInfo] = useState({ x: 0, y: 0, width: 0, height: 0 });
		23	+ // 先默认为抵扣盒
		24	+ const { boxModel } = props; //盒型参数
		25	+ const { masterData, slaveData, selectedNode } = props.state; // 主数据
		26	+ const slaveDataDetail = slaveData?.find(item => item.sTreeNodeName === selectedNode.showName && item.sBoxModel === boxModel);
		27	+ const width = Number(masterData?.dLength);
		28	+ const height = Number(masterData?.dHeight);
		29	+ const deep = Number(masterData?.dWidth);
		30	+ // 确认是竖向排列还是横向排列
		31	+ const L = masterData?.dLength;
		32	+ const W = masterData?.dWidth;
		33	+ const H = masterData?.dHeight;
		34	+ const D = masterData?.dHeight;
		35	+ const variables = {
		36	+ L,
		37	+ W,
		38	+ H,
		39	+ D,
		40	+ ...slaveDataDetail,
		41	+ };
		42	+ useEffect(
		43	+ () => {
		44	+ const svg = svgRef.current;
		45	+ svg.innerHTML = "";
		46	+ initSVG();
		47	+ // 处理
		48	+ if (slaveDataDetail?.sName.includes("扣抵盒")) {
		49	+ const c = slaveDataDetail?.dc;
		50	+ const g = slaveDataDetail?.dg;
		51	+ const a = slaveDataDetail?.da;
		52	+ createBox(width, height, deep, c, g, a);
		53	+ } else if (slaveDataDetail?.sName.includes("飞机盒")) {
		54	+ const list = createAirplaneBox(variables);
		55	+ if (list && list.length) {
		56	+ const leftWidth = (evaluateFormula(slaveDataDetail.sLengthFormula, variables) + slaveDataDetail.dTd * 2 - L) / 2;
		57	+ initBox(list, leftWidth + 9, slaveDataDetail.dD3, slaveDataDetail.dTd * 2, 0);
		58	+ }
		59	+ } else if (slaveDataDetail?.sName.includes("自动扣底盒")) {
		60	+ const top = slaveDataDetail.dc + W;
		61	+ const list = createDeductionBox(variables);
		62	+ if (list && list.length) {
		63	+ initBox(list, 0, top, 0, 0);
		64	+ }
		65	+ } else if (slaveDataDetail?.sName.includes("手提袋")) {
		66	+ const list = createTote(variables);
		67	+ if (list && list.length) {
		68	+ initBox(list, slaveDataDetail.dF, slaveDataDetail.dF1, 0, 0);
		69	+ }
		70	+ } else if (slaveDataDetail?.sName.includes("普通盒(纸箱)")) {
		71	+ const list = createBoxs(variables);
		72	+ if (list && list.length) {
		73	+ initBox(list, slaveDataDetail.dG, slaveDataDetail.dF, 0, 0);
		74	+ }
		75	+ } else if (slaveDataDetail?.sName.includes("天地盖")) {
		76	+ const list = createHeavenBox(variables);
		77	+ if (list && list.length) {
		78	+ initBox(list, D, slaveDataDetail.dF1 + 2, 4, 4);
		79	+ }
		80	+ } else if (slaveDataDetail?.sName.includes("盘式盒")) {
		81	+ const list = createDiscBox(variables);
		82	+ if (list && list.length) {
		83	+ const left = slaveDataDetail?.dTd + slaveDataDetail?.dD1 + slaveDataDetail?.dDj + D + 2;
		84	+ initBox(list, left, 0, 4, 0);
		85	+ }
		86	+ } else if (slaveDataDetail?.sName.includes("展示盒")) {
		87	+ const list = createShowBox(variables);
		88	+ if (list && list.length) {
		89	+ initBox(list, 0, slaveDataDetail?.dD2, 0, 0);
		90	+ }
		91	+ } else if (slaveDataDetail?.sName.includes("内衬")) {
		92	+ const list = createLiningBox(variables);
		93	+ if (list && list.length) {
		94	+ initBox(list, 0, 0, 0, 0);
		95	+ }
		96	+ } else if (slaveDataDetail?.sName.includes("信封")) {
		97	+ const list = createEnvelope(variables);
		98	+ if (list && list.length) {
		99	+ initBox(list, slaveDataDetail?.dS1, slaveDataDetail?.dF1, 0, 0);
		100	+ }
		101	+ }
		102	+ },
		103	+ [slaveDataDetail]
		104	+ );
		105	+ // 动态计算公式值
		106	+ const evaluateFormula = (formula, variables) => {
		107	+ if (!formula) return 0; // 如果公式为空，返回0
		108	+ try {
		109	+ // 提取公式中的变量名
		110	+ const variableNames = formula.match(/\b[a-zA-Z_][a-zA-Z0-9_]*\b/g) \|\| [];
		111	+ // 构建函数参数
		112	+ const params = variableNames.join(",");
		113	+ // 替换公式中的变量为实际值
		114	+ const func = new Function(params, `return ${formula}`);
		115	+ // 提取变量值
		116	+ const args = variableNames.map(name => Number(variables[name]) \|\| 0);
		117	+ // 执行函数并返回结果
		118	+ return func(...args);
		119	+ } catch (error) {
		120	+ console.error("公式计算错误:", error);
		121	+ return 0;
		122	+ }
		123	+ };
		124	+ // 盒身
		125	+ const createPathElement = (x, y, width, height, id, wrapperId) => {
		126	+ const d = `M ${x} ${y} L ${x} ${y + height} L ${x + width} ${y + height} L ${x + width} ${y} L ${x} ${y} Z`;
		127	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		128	+ svg.setAttribute("d", d);
		129	+ svg.setAttribute("fill", "transparent");
		130	+ svg.setAttribute("stroke", "#333");
		131	+ svg.setAttribute("stroke-width", "1");
		132	+ svg.setAttribute("stroke-dasharray", "3.8"); // 添加虚线效果
		133	+ return svg;
		134	+ };
		135	+ // 左上部件
		136	+ const createDynamicTop = (width, height, deep, offsetX, offsetY, size) => {
		137	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		138	+ // 动态生成路径，基于输入参数
		139	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY - deep - size + 2} A 2 2 0 0 1 ${offsetX + 2} ${offsetY - deep - size}
		140	+ L ${offsetX + width - 2} ${offsetY - deep - size} A 2 2 0 0 1 ${offsetX + width} ${offsetY - deep - size + 2} L ${offsetX + width} ${offsetY -
		141	+ deep}
		142	+ L ${offsetX} ${offsetY - deep} L ${offsetX + width} ${offsetY - deep} L ${offsetX + width} ${offsetY} `;
		143	+ svg.setAttribute("d", d);
		144	+ svg.setAttribute("fill", "transparent");
		145	+ svg.setAttribute("stroke", "#333");
		146	+ svg.setAttribute("stroke-width", "1");
		147	+ return svg;
		148	+ };
		149	+ // 左边贴边
		150	+ const createTrapezoid = (width, height, offsetX, offsetY, size) => {
		151	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		152	+ const d = `M ${offsetX} ${offsetY} L ${offsetX - size} ${offsetY + 2} L ${offsetX - size} ${offsetY + height - 2} L ${offsetX} ${offsetY +
		153	+ height}`;
		154	+ svg.setAttribute("d", d);
		155	+ svg.setAttribute("fill", "transparent");
		156	+ svg.setAttribute("stroke", "#333");
		157	+ svg.setAttribute("stroke-width", "1");
		158	+ return svg;
		159	+ };
		160	+ // 左上盒舌
		161	+ const createTopTongue = (width, height, deep, offsetX, offsetY, size) => {
		162	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		163	+ const d = `M ${offsetX + width} ${offsetY} L ${offsetX + width + 2} ${offsetY - 2} L ${offsetX + width + 2} ${offsetY - size - 2}
		164	+ L ${offsetX + width + deep - 5} ${offsetY - size - 2} A 2 2 0 0 1 ${offsetX + width + deep - 3} ${offsetY - size} L ${offsetX +
		165	+ width +
		166	+ deep} ${offsetY}`;
		167	+ svg.setAttribute("d", d);
		168	+ svg.setAttribute("fill", "transparent");
		169	+ svg.setAttribute("stroke", "#333");
		170	+ svg.setAttribute("stroke-width", "1");
		171	+ return svg;
		172	+ };
		173	+ // 右上盒舌
		174	+ const createTopTongueRight = (width, height, deep, offsetX, offsetY, size) => {
		175	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		176	+ // "M 130 0 L 133 87 A 2 2 0 0 1 135 85 L 158 85 L 158 98 L 160 0 Z"
		177	+ const d = `M ${offsetX} ${offsetY} L ${offsetX + 3} ${offsetY - size + 2} A 2 2 0 0 1 ${offsetX + 5} ${offsetY - size}
		178	+ L ${offsetX + deep - 2} ${offsetY - size} L ${offsetX + deep - 2} ${offsetY - 2} L ${offsetX + deep} ${offsetY} `;
		179	+ svg.setAttribute("d", d);
		180	+ svg.setAttribute("fill", "transparent");
		181	+ svg.setAttribute("stroke", "#333");
		182	+ svg.setAttribute("stroke-width", "1");
		183	+ return svg;
		184	+ };
		185	+ // 右下盒舌
		186	+ const createBottomTongueRight = (width, height, deep, offsetX, offsetY, size) => {
		187	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		188	+ // M 130 160 L 132 162 L 132 175 L 156 175 A 2 2 0 0 0 158 173 L 160 160 Z
		189	+ const d = `M ${offsetX} ${offsetY + height} L ${offsetX + 2} ${offsetY + height + 2} L ${offsetX + 2} ${offsetY + height + size}
		190	+ L ${offsetX + deep - 4} ${offsetY + height + size} A 2 2 0 0 0 ${offsetX + deep - 2} ${offsetY + height + size - 2} L ${offsetX +
		191	+ deep} ${offsetY + height} `;
		192	+ svg.setAttribute("d", d);
		193	+ svg.setAttribute("fill", "transparent");
		194	+ svg.setAttribute("stroke", "#333");
		195	+ svg.setAttribute("stroke-width", "1");
		196	+ return svg;
		197	+ };
		198	+ // 右下部件
		199	+ const createBottom = (width, height, deep, offsetX, offsetY, size) => {
		200	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		201	+ // "M 90 160 L 90 198 A 2 2 0 0 0 92 200 L 128 200 A 2 2 0 0 0 130 198 L 130 197 L 90 197 L 130 197 L 130 160 Z "
		202	+ const d = `M ${offsetX} ${offsetY + height} L ${offsetX} ${offsetY + height + deep + size - 2} A 2 2 0 0 0 ${offsetX + 2} ${offsetY +
		203	+ height +
		204	+ deep +
		205	+ size}
		206	+ L ${offsetX + width - 2} ${offsetY + height + deep + size} A 2 2 0 0 0 ${offsetX + width} ${offsetY + height + deep + size - 2}
		207	+ L ${offsetX + width} ${offsetY + height + deep} L${offsetX} ${offsetY + height + deep} L${offsetX + width} ${offsetY +
		208	+ height +
		209	+ deep} L ${offsetX + width} ${offsetY + height}
		210	+ `;
		211	+ svg.setAttribute("d", d);
		212	+ svg.setAttribute("fill", "transparent");
		213	+ svg.setAttribute("stroke", "#333");
		214	+ svg.setAttribute("stroke-width", "1");
		215	+ return svg;
		216	+ };
		217	+ // 左下盒舌
		218	+ const createBottomTongue = (width, height, deep, offsetX, offsetY, size) => {
		219	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		220	+ // M 90 160 L 88 162 L 88 175 L 64 175 A 2 2 0 0 1 62 173 L 60 160 Z
		221	+ const d = `M ${offsetX} ${offsetY + height} L ${offsetX - 2} ${offsetY + height + 2} L ${offsetX - 2} ${offsetY + height + size}
		222	+ L ${offsetX - deep + 4} ${offsetY + height + size} A 2 2 0 0 1 ${offsetX - deep + 2} ${offsetY + height + size - 2} L ${offsetX -
		223	+ deep} ${offsetY + height} `;
		224	+ svg.setAttribute("d", d);
		225	+ svg.setAttribute("fill", "transparent");
		226	+ svg.setAttribute("stroke", "#333");
		227	+ svg.setAttribute("stroke-width", "1");
		228	+ return svg;
		229	+ };
		230	+ // 标注
		231	+ const createArrowWithText = (width, height, deep, offsetX, offsetY, size) => {
		232	+ // 定义箭头标记
		233	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		234	+ const d = `M ${offsetX + width / 2} ${offsetY - deep + 15} L ${offsetX + width / 2} ${offsetY - deep + 5} L ${offsetX + width / 2 - 5} ${offsetY -
		235	+ deep +
		236	+ 5}
		237	+ L${offsetX + width / 2} ${offsetY - deep} L ${offsetX + width / 2 + 5} ${offsetY - deep + 5} L${offsetX + width / 2} ${offsetY - deep + 5}`;
		238	+ svg.setAttribute("d", d);
		239	+ svg.setAttribute("fill", "#333");
		240	+ svg.setAttribute("stroke", "#333");
		241	+ svg.setAttribute("stroke-width", "1");
		242	+
		243	+ return svg;
		244	+ };
		245	+ // 添加标注
		246	+ const createText = (offsetX, offsetY, size, textContent) => {
		247	+ const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
		248	+ text.setAttribute("x", offsetX); // 文字水平居中
		249	+ text.setAttribute("y", offsetY); // 文字垂直居中
		250	+ text.setAttribute("text-anchor", "middle"); // 文字水平居中
		251	+ text.setAttribute("dominant-baseline", "middle"); // 文字垂直居中
		252	+ text.setAttribute("fill", "#333"); // 文字颜色
		253	+ text.setAttribute("font-size", size); // 文字大小
		254	+ text.setAttribute("font-weight", "bold"); // 文字加粗
		255	+ text.textContent = textContent \|\| "Text"; // 默认文字内容
		256	+ return text;
		257	+ };
		258	+ // 竖向双箭头
		259	+ const createDoubleArrow = (height, offsetX, offsetY, Y) => {
		260	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		261	+ const d = `M ${offsetX} ${offsetY} L ${offsetX} ${height - 5} L ${offsetX + 5} ${height - 5} L ${offsetX} ${height} L ${offsetX - 5} ${height - 5}
		262	+ L ${offsetX} ${height - 5} L ${offsetX} ${Y + 5} L ${offsetX + 5} ${Y + 5} L ${offsetX} ${Y} L ${offsetX - 5} ${Y + 5} L ${offsetX} ${Y + 5}`;
		263	+ svg.setAttribute("d", d);
		264	+ svg.setAttribute("fill", "#333");
		265	+ svg.setAttribute("stroke", "#333");
		266	+ svg.setAttribute("stroke-width", "1");
		267	+
		268	+ return svg;
		269	+ };
		270	+ // 横向双箭头
		271	+ const createHorizontalDoubleArrow = (width, offsetX, offsetY) => {
		272	+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
		273	+ const d = `M ${offsetX} ${offsetY} L ${offsetX - width / 2 + 5} ${offsetY} L ${offsetX - width / 2 + 5} ${offsetY - 5} L ${offsetX -
		274	+ width / 2} ${offsetY}
		275	+ L ${offsetX - width / 2 + 5} ${offsetY + 5} L ${offsetX - width / 2 + 5} ${offsetY} L ${offsetX + width / 2 - 5} ${offsetY} L ${offsetX +
		276	+ width / 2 -
		277	+ 5} ${offsetY + 5} L ${offsetX + width / 2} ${offsetY}
		278	+ L ${offsetX + width / 2 - 5} ${offsetY - 5} L ${offsetX + width / 2 - 5} ${offsetY}`;
		279	+ svg.setAttribute("d", d);
		280	+ svg.setAttribute("fill", "#333");
		281	+ svg.setAttribute("stroke", "#333");
		282	+ svg.setAttribute("stroke-width", "1");
		283	+ return svg;
		284	+ };
		285	+ // 扣抵盒
		286	+ const createBox = (width, height, deep, c, g, a) => {
		287	+ let pathList = [];
		288	+ // 四面盒身
		289	+ const rectangles = [
		290	+ { x: 0, y: 0, width, height, id: "ac_path_c795a39_2oj", wrapperId: "3476" },
		291	+ { x: 0 + width, y: 0, width: deep, height, id: "ac_path_c795a39_2on", wrapperId: "3480" },
		292	+ { x: 0 + width + deep, y: 0, width, height, id: "ac_path_c795a39_2or", wrapperId: "3484" },
		293	+ { x: 0 + width * 2 + deep, y: 0, width: deep, height, id: "ac_path_c795a39_2ov", wrapperId: "3488" },
		294	+ ];
		295	+ const svg = svgRef.current;
		296	+ // 添加梯形
		297	+ pathList.push(createTrapezoid(width, height, 0, 0, g));
		298	+ pathList.push(createDynamicTop(width, height, deep, 0, 0, c));
		299	+ pathList.push(createTopTongue(width, height, deep, 0, 0, a));
		300	+ pathList.push(createTopTongueRight(width, height, deep, width * 2 + deep + 0, 0, a));
		301	+ pathList.push(createBottomTongueRight(width, height, deep, width * 2 + deep + 0, 0, a));
		302	+ pathList.push(createBottom(width, height, deep, 0 + deep + width, 0, c)); // 是否下舌头
		303	+ pathList.push(createBottomTongue(width, height, deep, 0 + deep + width, 0, a));
		304	+ // 上边部件贴位标注
		305	+ pathList.push(createArrowWithText(width, height, deep, 0, 0, a));
		306	+ pathList.push(createDoubleArrow(height, width + deep + width / 2 - 20, height / 2, 0));
		307	+ pathList.push(createDoubleArrow(a + height, width * 2 + deep + deep / 2, height + a / 2, height));
		308	+ pathList.push(createHorizontalDoubleArrow(width, width + deep + width / 2, height / 2 - 20));
		309	+ pathList.push(createHorizontalDoubleArrow(deep, width + deep / 2, height / 2));
		310	+ pathList.push(createText(width / 2 + 5, -deep - 5, 14, "c"));
		311	+ pathList.push(createText(width * 2 + deep + deep / 2 + 10, height + a / 2, 14, "a"));
		312	+ pathList.push(createText(-g / 2, height / 2, 14, "g"));
		313	+ pathList.push(createText(width + deep + width / 2 - 10, height / 2, 14, "D"));
		314	+ pathList.push(createText(width + deep + width / 2 + 10, height / 2 - 10, 14, "L"));
		315	+ pathList.push(createText(width + deep / 2, height / 2 + 10, 14, "W"));
		316	+ pathList.forEach(item => {
		317	+ svg.appendChild(item);
		318	+ });
		319	+ const viewBoxWidth = width * 2 + deep * 2 + g + 2;
		320	+ const viewBoxHeight = height + (deep + c) * 2 + 2;
		321	+ // 更新 SVG 的 viewBox 和尺寸
		322	+ const svgContainer = svgContainerRef.current;
		323	+ svg.setAttribute("viewBox", `${-g - 1} ${-(deep + c) - 1} ${viewBoxWidth} ${viewBoxHeight}`);
		324	+ svg.setAttribute("width", `${viewBoxWidth}px`);
		325	+ svg.setAttribute("height", `${viewBoxHeight}px`);
		326	+ svgContainer.style.width = `${viewBoxWidth}px`;
		327	+ svgContainer.style.height = `${viewBoxHeight}px`;
		328	+ rectangles.forEach(rect => {
		329	+ const pathElement = createPathElement(rect.x, rect.y, rect.width, rect.height, rect.id, rect.wrapperId);
		330	+ svg.appendChild(pathElement);
		331	+ });
		332	+ };
		333	+ const initBox = (list, g, c, width, height) => {
		334	+ const svg = svgRef.current;
		335	+ list.forEach(item => {
		336	+ svg.appendChild(item);
		337	+ });
		338	+ const viewBoxWidth = evaluateFormula(slaveDataDetail.sLengthFormula, variables) + 1 + width;
		339	+ const viewBoxHeight = evaluateFormula(slaveDataDetail.sWidthFormula, variables) + height;
		340	+ // 更新 SVG 的 viewBox 和尺寸
		341	+ const svgContainer = svgContainerRef.current;
		342	+ svg.setAttribute("viewBox", `${-g} ${-c} ${viewBoxWidth} ${viewBoxHeight}`);
		343	+ svg.setAttribute("width", `${viewBoxWidth}px`);
		344	+ svg.setAttribute("height", `${viewBoxHeight}px`);
		345	+ svgContainer.style.width = `${viewBoxWidth}px`;
		346	+ svgContainer.style.height = `${viewBoxHeight}px`;
		347	+ };
		348	+ const initSVG = () => {
		349	+ const svg = svgRef.current;
		350	+ svg.style.transform = `translate(${currentTranslateX}px, ${currentTranslateY}px) scale(${currentScale})`;
		351	+ };
		352	+
		353	+ const moveSVG = (translateX, translateY) => {
		354	+ setCurrentTranslateX(currentTranslateX + translateX);
		355	+ setCurrentTranslateY(currentTranslateY + translateY);
		356	+ };
		357	+
		358	+ const zoomSVG = scaleChange => {
		359	+ const newScale = currentScale + scaleChange;
		360	+ setCurrentScale(Math.max(0.5, Math.min(3, newScale)));
		361	+ };
		362	+
		363	+ const updateSVGTransform = () => {
		364	+ const svg = svgRef.current;
		365	+ svg.style.transform = `translate(${currentTranslateX}px, ${currentTranslateY}px) scale(${currentScale})`;
		366	+ updatePositionInfo();
		367	+ };
		368	+
		369	+ const updatePositionInfo = () => {
		370	+ if (svgRef.current) {
		371	+ const rect = svgRef.current.getBoundingClientRect();
		372	+ setPositionInfo({
		373	+ x: rect.x,
		374	+ y: rect.y,
		375	+ width: rect.width,
		376	+ height: rect.height,
		377	+ });
		378	+ }
		379	+ };
		380	+
		381	+ useEffect(
		382	+ () => {
		383	+ updateSVGTransform();
		384	+ },
		385	+ [currentTranslateX, currentTranslateY, currentScale]
		386	+ );
		387	+
		388	+ // 当 SVG 的位置或大小变化时，更新位置信息
		389	+ useEffect(
		390	+ () => {
		391	+ updatePositionInfo();
		392	+ },
		393	+ [currentTranslateX, currentTranslateY, currentScale, width, height, deep]
		394	+ );
		395	+
		396	+ return (
		397	+ // <div >
		398	+
		399	+ // {/* <div>
		400	+ // <label htmlFor="height">Height:</label>
		401	+ // <input
		402	+ // type="number"
		403	+ // id="height"
		404	+ // value={height}
		405	+ // min="10"
		406	+ // max="0"
		407	+ // onChange={(e) => {setHeight(parseInt(e.target.value, 10));setBoxKey(new Date().getTime())}}
		408	+ // />
		409	+ // <label htmlFor="width">Width:</label>
		410	+ // <input
		411	+ // type="number"
		412	+ // id="width"
		413	+ // value={width}
		414	+ // min="10"
		415	+ // max="400"
		416	+ // onChange={(e) => {setWidth(parseInt(e.target.value, 10));setBoxKey(new Date().getTime())}}
		417	+ // />
		418	+ // <label htmlFor="deep">Deep:</label>
		419	+ // <input
		420	+ // type="number"
		421	+ // id="deep"
		422	+ // value={deep}
		423	+ // min="10"
		424	+ // max="400"
		425	+ // onChange={(e) => {setDeep(parseInt(e.target.value, 10));setBoxKey(new Date().getTime())}}
		426	+ // />
		427	+ // <label htmlFor="c">C:</label>
		428	+ // <input
		429	+ // type="number"
		430	+ // id="c"
		431	+ // value={c}
		432	+ // min="10"
		433	+ // max="400"
		434	+ // onChange={(e) => setC(parseInt(e.target.value, 10))}
		435	+ // />
		436	+ // <label htmlFor="deep">g:</label>
		437	+ // <input
		438	+ // type="number"
		439	+ // id="g"
		440	+ // value={g}
		441	+ // min="10"
		442	+ // max="400"
		443	+ // onChange={(e) => setG(parseInt(e.target.value, 10))}
		444	+ // />
		445	+ // <label htmlFor="a">a:</label>
		446	+ // <input
		447	+ // type="number"
		448	+ // id="a"
		449	+ // value={a}
		450	+ // min="10"
		451	+ // max="400"
		452	+ // onChange={(e) => setA(parseInt(e.target.value, 10))}
		453	+ // />
		454	+ // </div> */}
		455	+
		456	+ // </div>
		457	+ <div id="svgContainer" key={boxKey} className={style.svgBox} ref={svgContainerRef}>
		458	+ <svg className={style.svgContainer} id="dynamicSvg" viewBox="0 0 0 0" xmlns="http://www.w3.org/2000/svg" ref={svgRef} />
		459	+ </div>
		460	+ );
		461	+};
		462	+
		463	+export default DynamicSVG;

src/components/Common/BoxDesign/index.less 0 → 100644

View file @43cccc6

		1	+.svgBox{
		2	+ width: 145px;
		3	+ height: 130px;
		4	+ overflow: hidden;
		5	+}
		6	+.svgContainer {
		7	+ width: 100%;
		8	+ height: 100%;
		9	+ object-fit: contain; /* 确保 SVG 保持比例 */
		10	+}
0	\ No newline at end of file	11	\ No newline at end of file

src/components/Common/BoxDesignCompontent/index.css 0 → 100644

View file @43cccc6

		1	+.boxBody {
		2	+ width: 100%;
		3	+ height: 100%;
		4	+ position: relative;
		5	+ padding: 10px;
		6	+}
		7	+.boxBody .boxTop {
		8	+ display: flex;
		9	+ align-items: center;
		10	+ justify-content: space-around;
		11	+ width: 640px;
		12	+ height: 100px;
		13	+ margin: 0 auto;
		14	+}
		15	+.boxBody .boxTop .boxFlex {
		16	+ width: 200px;
		17	+ display: flex;
		18	+ align-items: center;
		19	+ flex-wrap: wrap;
		20	+ flex-direction: column;
		21	+ position: relative;
		22	+}
		23	+.boxBody .boxLeft {
		24	+ width: 180px;
		25	+ height: 320px;
		26	+ display: flex;
		27	+ flex-wrap: wrap;
		28	+ flex-direction: column;
		29	+ position: absolute;
		30	+ justify-content: space-between;
		31	+ left: 10px;
		32	+ top: 130px;
		33	+ text-align: center;
		34	+}
		35	+.boxBody .boxRight {
		36	+ width: 180px;
		37	+ height: 320px;
		38	+ display: flex;
		39	+ flex-wrap: wrap;
		40	+ justify-content: space-between;
		41	+ flex-direction: column;
		42	+ position: absolute;
		43	+ right: 10px;
		44	+ top: 130px;
		45	+ text-align: center;
		46	+}
		47	+.boxBody .boxBottom {
		48	+ width: 500px;
		49	+ height: 380px;
		50	+ position: absolute;
		51	+ top: 130px;
		52	+ left: 50%;
		53	+ transform: translateX(-50%);
		54	+}
		55	+.boxBody .boxBottom .svgBox {
		56	+ width: 100%;
		57	+ height: 250px;
		58	+ background-color: #9AFF9A;
		59	+}
		60	+.boxBody .boxBottom .content {
		61	+ width: 100%;
		62	+ height: 130px;
		63	+}
		64	+.boxBody .boxBottom .content :global .ant-select-selector {
		65	+ color: #333;
		66	+}
		67	+.boxBody .boxBottom .content :global .ant-select-selection-item {
		68	+ color: #333 !important;
		69	+ /* 选择框文字颜色 */
		70	+ padding-left: 50px;
		71	+ line-height: 40px;
		72	+}
		73	+.boxBody .boxTitle {
		74	+ background-color: #3399ff;
		75	+ color: #fff;
		76	+ width: 180px;
		77	+ height: 20px;
		78	+ line-height: 20px;
		79	+ text-align: center;
		80	+}
		81	+.boxBody :global .mySelects .ant-select-selector {
		82	+ background-color: #99CCFF !important;
		83	+ /* 选择框背景色 */
		84	+ height: 40px !important;
		85	+ /* 选择框高度 */
		86	+}
		87	+.boxBody :global .mySelects .ant-select-selection-item {
		88	+ color: transparent !important;
		89	+ /* 选择框文字颜色 */
		90	+}
		91	+.boxBody .mySelects {
		92	+ position: relative;
		93	+}
		94	+.boxBody .boxInput {
		95	+ display: flex;
		96	+ align-items: center;
		97	+ justify-content: space-between;
		98	+ width: 180px;
		99	+ height: 40px;
		100	+ position: relative;
		101	+}
		102	+.boxBody .boxInput :global .ant-input {
		103	+ background-color: #99CCFF !important;
		104	+ /* 输入框背景色 */
		105	+ border: 1px solid #d9d9d9;
		106	+ height: 40px;
		107	+}
		108	+.boxBody .text {
		109	+ background-color: #99CCFF;
		110	+ width: 100%;
		111	+ height: 40px;
		112	+ line-height: 40px;
		113	+ text-align: center;
		114	+ font-size: 10px;
		115	+ margin-right: 1px;
		116	+}
		117	+.boxBody .content :global .ant-input {
		118	+ background-color: #EEEEEE !important;
		119	+ /* 输入框背景色 */
		120	+ height: 40px;
		121	+}
		122	+.boxBody .content :global .ant-select-selector {
		123	+ background-color: #EEEEEE !important;
		124	+ /* 选择框背景色 */
		125	+ height: 40px !important;
		126	+ /* 选择框高度 */
		127	+}
		128	+.boxBody .content .text {
		129	+ background-color: #EEEEEE;
		130	+ margin: 0;
		131	+}
		132	+.boxBody .content .boxFlex {
		133	+ display: flex;
		134	+ align-items: center;
		135	+ flex-wrap: wrap;
		136	+ flex-direction: column;
		137	+ width: 500px;
		138	+}
		139	+.boxBody .content .boxFlexs {
		140	+ display: flex;
		141	+ align-items: center;
		142	+ width: 500px;
		143	+ justify-content: space-between;
		144	+}
		145	+.boxBody .content .boxFlexs .boxInputs {
		146	+ display: flex;
		147	+ align-items: center;
		148	+ flex: 1;
		149	+}
		150	+.boxBody .content .boxFlexs .boxInputs :global .ant-input {
		151	+ background-color: #EEEEEE !important;
		152	+ /* 输入框背景色 */
		153	+ height: 40px;
		154	+}
		155	+.boxBody .content .boxInput {
		156	+ width: 100%;
		157	+ position: relative;
		158	+}
		159	+.boxBody .content .boxInput .defaultValue {
		160	+ position: absolute;
		161	+ left: 32%;
		162	+ top: 3px;
		163	+ width: 60px;
		164	+ height: 30px;
		165	+ background-color: #EEE;
		166	+ color: #333;
		167	+ line-height: 40px;
		168	+ z-index: 2;
		169	+ text-align: center;
		170	+}

src/components/Common/BoxDesignCompontent/index.js 0 → 100644

View file @43cccc6

		1	+/* eslint-disable */
		2	+import React, { useRef, useState, useEffect } from "react";
		3	+import { Select, Button, message, Input, Spin } from "antd";
		4	+import { CompressOutlined, ExpandOutlined } from "@ant-design/icons";
		5	+import * as commonUtils from "@/utils/utils";
		6	+import * as commonFunc from "@/components/Common/commonFunc";
		7	+import * as commonBusiness from "@/components/Common/commonBusiness";
		8	+import * as commonServices from "@/services/services";
		9	+import CommonBase from "@/components/Common/CommonBase";
		10	+import AntdDraggableModal from "@/components/Common/AntdDraggableModal";
		11	+import CommonViewTable from "@/components/Common/CommonViewTable";
		12	+import StaticEditTable from "@/components/Common/CommonTable";
		13	+import jsPreviewPdf from "@js-preview/pdf";
		14	+import * as commonConfig from "@/utils/config";
		15	+import SvgBox from "./svg";
		16	+import styles from "./index.less";
		17	+const BoxDesignEvent = props => {
		18	+ const addState = {};
		19	+ const { formData = [], selectData = [], masterData, makeUpPDFRecord = {} } = props;
		20	+ const [tableData, setTableData] = useState({});
		21	+ const [options, setOptions] = useState([]);
		22	+ const [loading, setLoading] = useState(false); // 加载状态
		23	+
		24	+ addState.getSqlOptions = async type => {
		25	+ setLoading(true);
		26	+ const { app, token, makeConfig } = props;
		27	+ // const quickQuoteConfig = config.gdsconfigformslave.find(item => item.sControlName === "BtnQuickQuote") \|\| {};
		28	+ const { sId } = makeConfig;
		29	+ if (!sId) return;
		30	+ const url = `${commonConfig.server_host}business/getSelectLimit/${sId}?sModelsId=${sId}`;
		31	+ const body = {
		32	+ pageNum: 1,
		33	+ pageSize: 20,
		34	+ sKeyUpFilterName: "",
		35	+ sSqlCondition: {
		36	+ sType: type,
		37	+ },
		38	+ };
		39	+ const data = await commonServices.postValueService(token, body, url);
		40	+ if (data) {
		41	+ const option = data.data.dataset.rows;
		42	+ option.sort((a, b) => {
		43	+ if (a.sCode === "") {
		44	+ return -1; // 将 id 为 1 的元素排在前面
		45	+ }
		46	+ if (b.sCode === "") {
		47	+ return 1;
		48	+ }
		49	+ return 0; // 其他元素保持原顺序
		50	+ });
		51	+ setOptions(data.data.dataset.rows);
		52	+ }
		53	+ setLoading(false);
		54	+ };
		55	+
		56	+ useEffect(
		57	+ () => {
		58	+ if (!formData.length) return;
		59	+
		60	+ const data = formData[0].gdsconfigformslave.filter(Item => Item.bVisible);
		61	+ setTableData(data);
		62	+ props.onSaveState(pre => ({ ...pre, data }));
		63	+ },
		64	+ [formData.length]
		65	+ );
		66	+
		67	+ return {
		68	+ ...props,
		69	+ tableData,
		70	+ ...addState,
		71	+ options,
		72	+ loading,
		73	+ };
		74	+};
		75	+const BoxDesignCompontent = baseProps => {
		76	+ const props = BoxDesignEvent(baseProps);
		77	+ const { onCancel, onOk, title, loading, masterConfig, bFullScreen, tableData, options = [] } = props;
		78	+ const { slaveData = {}, masterData = {} } = props.state;
		79	+ const { boxVisible } = baseProps;
		80	+ const [boxList, setBoxList] = useState([]);
		81	+ const [tableColum, setTableColum] = useState([]); // 盒身类型
		82	+ const [tableDataList, setTableDataList] = useState([]); // 盒长
		83	+ const [boxBodyList, setBoxBodyList] = useState([]); // 盒身信息
		84	+ const [isDefaultValue, setIsDefaultValue] = useState(true); // 是否默认值
		85	+ const [topBoxList, setTopBoxList] = useState([]); // 盒身信息
		86	+ const [leftBoxList, setLeftBoxList] = useState([]); // 左边
		87	+ const [rightBoxList, setRightBoxList] = useState([]);
		88	+ const [boxKey, setBoxKey] = useState(new Date().getTime());
		89	+ if (!boxVisible) return "";
		90	+ useEffect(
		91	+ () => {
		92	+ if (tableData && tableData.length) {
		93	+ const newTableColum = tableData.map(item => {
		94	+ return {
		95	+ ...item,
		96	+ isEditable: true,
		97	+ isSelect: false,
		98	+ selectImage: null,
		99	+ value: "",
		100	+ };
		101	+ });
		102	+ // const last = newTableColum.pop();
		103	+ // const newList = [last, ...newTableColum];
		104	+ const newList = newTableColum.filter(
		105	+ item => item.showName.includes("盒长") \|\| item.showName.includes("盒高") \|\| item.showName.includes("盒宽")
		106	+ );
		107	+ const newLists = newTableColum.filter(
		108	+ item =>
		109	+ !(item.showName.includes("盒长") \|\| item.showName.includes("盒高") \|\| item.showName.includes("盒宽") \|\| item.showName.includes("盒身"))
		110	+ );
		111	+ const bodyList = newTableColum.filter(item => item.showName.includes("盒身"));
		112	+ newLists.forEach(x => {
		113	+ if (x.showName === "盒型类别") {
		114	+ x.showName = "盒型名称";
		115	+ }
		116	+ });
		117	+ setTableColum(newLists);
		118	+ setBoxBodyList(bodyList);
		119	+ newList.forEach(item => {
		120	+ let name = "";
		121	+ if (item.showName === "盒长") {
		122	+ name = item.showName + "(L)";
		123	+ } else if (item.showName === "盒宽") {
		124	+ name = item.showName + "(W)";
		125	+ } else if (item.showName === "盒高") {
		126	+ name = item.showName + "(D)";
		127	+ }
		128	+ item.sName = name;
		129	+ });
		130	+ setTableDataList(newList);
		131	+ }
		132	+ },
		133	+ [tableData]
		134	+ );
		135	+ const titleList = [
		136	+ "上方盒舌",
		137	+ "盒底组件",
		138	+ "下方盒舌",
		139	+ "左(上)插位组件",
		140	+ "左贴边位",
		141	+ "左(下)插位组件",
		142	+ "右(上)插位组件",
		143	+ "右贴边位",
		144	+ "右(下)插位组件",
		145	+ ];
		146	+ const titleList1 = [
		147	+ { name: "上方盒舌", value: "dSFHS" },
		148	+ { name: "盒底组件", value: "dHDC" },
		149	+ { name: "下方盒舌", value: "dXFHS" },
		150	+ { name: "左(上)插位组件", value: "dZSCW" },
		151	+ { name: "左贴边位", value: "dZTBW" },
		152	+ { name: "左(下)插位组件", value: "dZXCW" },
		153	+ { name: "右(上)插位组件", value: "dYSCW" },
		154	+ { name: "右贴边位", value: "dYTBW" },
		155	+ { name: "右(下)插位组件", value: "dYXCW" },
		156	+ ];
		157	+ const newBoxList = [];
		158	+
		159	+ // const boxs = titleList.length + tableData.length;
		160	+ tableColum.forEach(item => {
		161	+ titleList.push(item.showName);
		162	+ });
		163	+ console.log("🚀 ~ tableColum:", tableColum);
		164	+ boxBodyList.forEach(item => {
		165	+ titleList.push(item.showName);
		166	+ });
		167	+ tableDataList.forEach(item => {
		168	+ titleList.push(item.showName);
		169	+ });
		170	+ // 盒身信息
		171	+ titleList.forEach((item, index) => {
		172	+ newBoxList.push({
		173	+ value: "",
		174	+ sName: item,
		175	+ isEditable: true,
		176	+ isSelect: false,
		177	+ selectValue: null,
		178	+ selectLabel: "",
		179	+ selectImage: null,
		180	+ type: null,
		181	+ show: true,
		182	+ showName: item, // 参数名称
		183	+ sAssignFormula: null,
		184	+ });
		185	+ });
		186	+ // 部件信息
		187	+ if (slaveData && slaveData.length) {
		188	+ slaveData.forEach((item, index) => {
		189	+ const i = titleList1.findIndex(i => {
		190	+ return i.value === item.sCode;
		191	+ });
		192	+ if (i !== -1) {
		193	+ const x = newBoxList.findIndex(z => z.sName === titleList1[i].name);
		194	+ newBoxList[x].value = item.iValue;
		195	+ newBoxList[x].type = item.sTypes;
		196	+ newBoxList[x].showName = item.sName;
		197	+ newBoxList[x].selectImage = item.sMakeUpPath;
		198	+ newBoxList[x].sName = titleList1[i].name;
		199	+ newBoxList[x].sAssignFormula = item.sAssignFormula;
		200	+ newBoxList[x].bVisible = item.bVisible;
		201	+ }
		202	+ });
		203	+ }
		204	+ // 盒身信息
		205	+ if (masterData) {
		206	+ newBoxList.forEach((item, index) => {
		207	+ if (item.sName === "盒身") {
		208	+ newBoxList[index].value = masterData.sBoxBody;
		209	+ newBoxList[index].selectImage = masterData.sMakeUpPath;
		210	+ newBoxList[index].type = masterData.sTypes;
		211	+ } else if (item.sName === "盒长") {
		212	+ newBoxList[index].value = masterData.dBoxLength;
		213	+ } else if (item.sName === "盒宽") {
		214	+ newBoxList[index].value = masterData.dBoxWidth;
		215	+ } else if (item.sName === "盒高") {
		216	+ newBoxList[index].value = masterData.dBoxHeight;
		217	+ } else if (item.sName === "盒型名称") {
		218	+ newBoxList[index].value = masterData.sName;
		219	+ }
		220	+ });
		221	+ }
		222	+ // 有数据的时候盒型设计需要赋值
		223	+ useEffect(
		224	+ () => {
		225	+ if (newBoxList.length > 0 && !arraysAreEqual(boxList, newBoxList)) {
		226	+ setBoxList(newBoxList);
		227	+ }
		228	+ },
		229	+ [newBoxList]
		230	+ );
		231	+
		232	+ const arraysAreEqual = (arr1, arr2) => {
		233	+ if (arr1.length !== arr2.length) return false;
		234	+ return arr1.every((item, index) => item.sName === arr2[index].sName);
		235	+ };
		236	+ useEffect(
		237	+ () => {
		238	+ const type = boxList.find(item => item.sName === "盒身")?.type;
		239	+ const updateLists = () => {
		240	+ const topBoxFilter = item => item.sName === "上方盒舌" \|\| item.sName === "盒底组件" \|\| item.sName === "下方盒舌";
		241	+
		242	+ const leftBoxFilter = item => item.sName === "左(上)插位组件" \|\| item.sName === "左贴边位" \|\| item.sName === "左(下)插位组件";
		243	+
		244	+ const rightBoxFilter = item => item.sName === "右(上)插位组件" \|\| item.sName === "右贴边位" \|\| item.sName === "右(下)插位组件";
		245	+
		246	+ if (type === "2" \|\| type === 2 \|\| type === "4" \|\| type === 4 \|\| type === 3 \|\| type === "3" \|\| type === 5 \|\| type === "5") {
		247	+ const box = [...boxList];
		248	+ box.forEach(x => {
		249	+ x.show = true;
		250	+ });
		251	+ if (type === "2" \|\| type === 2) {
		252	+ box.forEach(x => x.sName === "盒底组件" && (x.show = false));
		253	+ } else if (type === "4" \|\| type === 4) {
		254	+ const title = ["盒底组件", "左贴边位", "右贴边位"];
		255	+ box.forEach(x => title.includes(x.sName) && (x.show = false));
		256	+ } else if (type === "3" \|\| type === 3) {
		257	+ const title = ["左(上)插位组件", "右(下)插位组件", "盒底组件"];
		258	+ box.forEach(x => title.includes(x.sName) && (x.show = false));
		259	+ } else if (type === "5" \|\| type === 5) {
		260	+ const title = ["盒底组件"];
		261	+ box.forEach(x => title.includes(x.sName) && (x.show = false));
		262	+ }
		263	+ setTopBoxList(box.filter(topBoxFilter));
		264	+ setLeftBoxList(box.filter(leftBoxFilter));
		265	+ if (type === 3 \|\| type === "3") {
		266	+ setRightBoxList(box.filter(rightBoxFilter).reverse());
		267	+ } else {
		268	+ setRightBoxList(box.filter(rightBoxFilter));
		269	+ }
		270	+ } else {
		271	+ const box = [...boxList];
		272	+ box.forEach(x => {
		273	+ x.show = true;
		274	+ });
		275	+ setTopBoxList(box.filter(topBoxFilter));
		276	+ setLeftBoxList(box.filter(leftBoxFilter));
		277	+ setRightBoxList(box.filter(rightBoxFilter));
		278	+ }
		279	+ };
		280	+
		281	+ updateLists();
		282	+ },
		283	+ [boxList]
		284	+ );
		285	+
		286	+ const handleFocus = (e, index) => {
		287	+ if (boxList && boxList.length) {
		288	+ const updatedBoxList = [...boxList];
		289	+ updatedBoxList[index].isEditable = true;
		290	+ setBoxList(updatedBoxList);
		291	+ }
		292	+ };
		293	+
		294	+ const handleBlur = (e, index) => {
		295	+ if (boxList && boxList.length) {
		296	+ const updatedBoxList = [...boxList];
		297	+ updatedBoxList[index].isEditable = false;
		298	+ setBoxList(updatedBoxList);
		299	+ }
		300	+ };
		301	+
		302	+ const handleChange = (e, index) => {
		303	+ const updatedBoxList = [...boxList];
		304	+ updatedBoxList[index].value = e.target.value;
		305	+ setBoxList(updatedBoxList);
		306	+ };
		307	+
		308	+ const handleChangeName = (e, index) => {
		309	+ const updatedBoxList = [...boxList];
		310	+ updatedBoxList[index].showName = e.target.value;
		311	+ setBoxList(updatedBoxList);
		312	+ };
		313	+
		314	+ const handleSelect = (name, selectConfig, index, type) => {
		315	+ let updatedBoxList = [...boxList];
		316	+ updatedBoxList[index].type = name;
		317	+ updatedBoxList[index].selectImage = selectConfig.image;
		318	+ // 选择盒身数据全部清空
		319	+
		320	+ const typeList = [1, 2, 3, 4];
		321	+ if (typeList.includes(type)) {
		322	+ const table1 = tableColum.map(x => x.showName);
		323	+ const table2 = boxBodyList.map(x => x.showName);
		324	+ const table3 = tableDataList.map(x => x.showName);
		325	+ const tableTitle = table1.concat(table2, table3);
		326	+ updatedBoxList.forEach((x, i) => {
		327	+ if (i !== index && !tableTitle.includes(x.sName)) {
		328	+ x.value = "";
		329	+ x.type = null;
		330	+ x.selectValue = null;
		331	+ x.selectImage = null;
		332	+ // x.showName =
		333	+ }
		334	+ });
		335	+ setIsDefaultValue(false);
		336	+ updatedBoxList[index].value = selectConfig.label;
		337	+ }
		338	+ setBoxList(updatedBoxList);
		339	+ };
		340	+ const getImage = fileName => {
		341	+ const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&sModelsId=100&token=${props.token}`;
		342	+ return imageUrl;
		343	+ };
		344	+ // 下来框
		345	+ const renderOptionWithImage = option => {
		346	+ return (
		347	+ <Select.Option key={option.sId} value={option.sCode} label={option.sName} image={getImage(option.sMakeUpPath)}>
		348	+ <div style={{ display: "flex", alignItems: "center" }}>
		349	+ {option.sMakeUpPath ? <img src={getImage(option.sMakeUpPath)} alt={option.sName} style={{ width: 24, height: 24, marginRight: 8 }} /> : ""}
		350	+ <span>{option.sName}</span>
		351	+ </div>
		352	+ </Select.Option>
		353	+ );
		354	+ };
		355	+ const svgBoxProps = {
		356	+ ...props,
		357	+ boxList,
		358	+ showNew: 0,
		359	+ };
		360	+ // 计算展长展宽
		361	+ // 创建盒型
		362	+ const submit = () => {
		363	+ const newSlaveData = [];
		364	+ // 判断是新增还是修改
		365	+
		366	+ // 存储子表数据
		367	+ boxList.forEach((item, index) => {
		368	+ const i = titleList1.findIndex(i => i.name === item.sName);
		369	+ const slave = slaveData.find(z => z.sCode === titleList1[i]?.value);
		370	+ if (i !== -1) {
		371	+ const data = {
		372	+ ...slaveData[0],
		373	+ handleType: slave ? "update" : "add",
		374	+ sName: item.showName,
		375	+ sCode: titleList1[i].value,
		376	+ iValue: item.value,
		377	+ iOrder: index + 1,
		378	+ iRowNum: index + 1,
		379	+ sId: slave ? slave.sId : commonUtils.createSid(),
		380	+ sMakeUpPath: item.selectImage,
		381	+ sTypes: item.type,
		382	+ bVisible: item.value ? true : false,
		383	+ sParentId: masterData.sId,
		384	+ sAssignFormula: item.sAssignFormula,
		385	+ };
		386	+ // if (item.value !== "") {
		387	+ newSlaveData.push(data);
		388	+ // }
		389	+ }
		390	+ });
		391	+ const submitSlaveData = [];
		392	+ slaveData.forEach(item => {
		393	+ const i = newSlaveData.findIndex(x => x.scode === item.code);
		394	+ if (i === -1) {
		395	+ submitSlaveData.push({ ...item, handleType: "del" });
		396	+ }
		397	+ });
		398	+ submitSlaveData.concat(newSlaveData);
		399	+
		400	+ // 处理计算公式
		401	+ console.log(boxList, "boxList");
		402	+ // 计算展长公式 sLengthFormula
		403	+ let sLengthFormula = "";
		404	+ let sWidthFormula = "";
		405	+ const boxType = boxList.find(item => item.sName === "盒身")?.type;
		406	+ const boxLength = Number(boxList.find(item => item.sName === "盒长")?.value);
		407	+ const boxWidth = Number(boxList.find(item => item.sName === "盒宽")?.value);
		408	+ const boxHeight = Number(boxList.find(item => item.sName === "盒高")?.value);
		409	+ const zxcw = boxList.find(x => x.sName === "左(下)插位组件");
		410	+ const zscw = boxList.find(x => x.sName === "左(上)插位组件");
		411	+ const yscw = boxList.find(x => x.sName === "右(上)插位组件");
		412	+ const yxcw = boxList.find(x => x.sName === "右(下)插位组件");
		413	+ const zxcwType = zxcw?.type;
		414	+ const zxcwValue = zxcw?.value;
		415	+ const zscwType = zscw?.type;
		416	+ const zscwValue = zscw?.value;
		417	+ const yscwType = yscw?.type;
		418	+ const yscwValue = yscw?.value;
		419	+ const yxcwType = yxcw?.type;
		420	+ const yxcwValue = yxcw?.value;
		421	+ let leftTopValue = 0;
		422	+ let leftTop = "";
		423	+ let rightTopValue = 0;
		424	+ let rightTop = "";
		425	+ let leftBottomValue = 0;
		426	+ let leftBottom = "";
		427	+ let rightBottomValue = 0;
		428	+ let rightBottom = "";
		429	+ if (boxType && boxType === "1") {
		430	+ // 四面盒
		431	+ const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value;
		432	+ const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value;
		433	+ sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L * 2 + W * 2" + (ytbw ? " +dYTBW" : "");
		434	+
		435	+ if (zxcwType === "4001" \|\| zxcwType === "4006") {
		436	+ leftBottomValue = Number(zxcwValue) + boxHeight;
		437	+ leftBottom = " + dZXCW + W";
		438	+ } else if (zxcwType === "4002" \|\| zxcwType === "4003") {
		439	+ leftBottomValue = Number(zxcwValue);
		440	+ leftBottom = " + dZXCW";
		441	+ } else if (zxcwType === "4004") {
		442	+ leftBottomValue = Number(zxcwValue) + boxHeight * 2;
		443	+ leftBottom = " + dZXCW + W * 2";
		444	+ } else if (zxcwType === "4005") {
		445	+ leftBottomValue = boxHeight * 2;
		446	+ leftBottom = "+ W * 2";
		447	+ }
		448	+ if (yscwType === "6001" \|\| yscwType === "6006") {
		449	+ rightTopValue = Number(yscwValue) + boxHeight;
		450	+ rightTop = "dYSCW + W + ";
		451	+ } else if (yscwType === "6002" \|\| yscwType === "6003") {
		452	+ rightTopValue = Number(yscwValue);
		453	+ rightTop = "dYSCW + ";
		454	+ } else if (yscwType === "6004") {
		455	+ rightTopValue = Number(yscwValue) + boxHeight * 2;
		456	+ rightTop = "dYSCW + W * 2+ ";
		457	+ } else if (yscwType === "6005") {
		458	+ rightTopValue = boxHeight * 2;
		459	+ rightTop = "W * 2+ ";
		460	+ }
		461	+ if (zscwType === "3001" \|\| zscwType === "3006") {
		462	+ leftTopValue = Number(zscwValue) + boxHeight;
		463	+ leftTop = "dZSCW + W +";
		464	+ } else if (zscwType === "3002" \|\| zscwType === "3003") {
		465	+ leftTopValue = Number(zscwValue);
		466	+ leftTop = "dZSCW +";
		467	+ } else if (zscwType === "3004") {
		468	+ leftTopValue = Number(zscwValue) + boxHeight * 2;
		469	+ leftTop = "dZSCW + W * 2 +";
		470	+ } else if (zscwType === "3005") {
		471	+ leftTopValue = boxHeight * 2;
		472	+ leftTop = "W * 2 +";
		473	+ }
		474	+ if (yxcwType === "7001" \|\| yxcwType === "7006") {
		475	+ rightBottomValue = Number(yxcwValue) + boxHeight;
		476	+ rightBottom = "+ dYXCW + W";
		477	+ } else if (yxcwType === "7002" \|\| yxcwType === "7003") {
		478	+ rightBottomValue = Number(yxcwValue);
		479	+ rightBottom = "+ dYXCW ";
		480	+ } else if (yxcwType === "7004") {
		481	+ rightBottomValue = Number(yxcwValue) + boxHeight * 2;
		482	+ rightBottom = "+ dYXCW + W * 2";
		483	+ } else if (yxcwType === "7005") {
		484	+ rightBottomValue = boxHeight * 2;
		485	+ rightBottom = "+ W * 2";
		486	+ }
		487	+ sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom);
		488	+ } else if (boxType && boxType === "2") {
		489	+ // 单折
		490	+ const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value;
		491	+ const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value;
		492	+ sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L * 2 + W" + (ytbw ? " +dYTBW" : "");
		493	+ if (zxcwType === "4001" \|\| zxcwType === "4006") {
		494	+ leftBottomValue = Number(zxcwValue) + boxHeight;
		495	+ leftBottom = " + dZXCW + W";
		496	+ } else if (zxcwType === "4002" \|\| zxcwType === "4003") {
		497	+ leftBottomValue = Number(zxcwValue);
		498	+ leftBottom = " + dZXCW";
		499	+ } else if (zxcwType === "4004") {
		500	+ leftBottomValue = Number(zxcwValue) + boxHeight * 2;
		501	+ leftBottom = " + dZXCW + W * 2";
		502	+ } else if (zxcwType === "4005") {
		503	+ leftBottomValue = boxHeight * 2;
		504	+ leftBottom = "+ W * 2";
		505	+ }
		506	+ if (yscwType === "6001" \|\| yscwType === "6006") {
		507	+ rightTopValue = Number(yscwValue) + boxHeight;
		508	+ rightTop = "dYSCW + W + ";
		509	+ } else if (yscwType === "6002" \|\| yscwType === "6003") {
		510	+ rightTopValue = Number(yscwValue);
		511	+ rightTop = "dYSCW + ";
		512	+ } else if (yscwType === "6004") {
		513	+ rightTopValue = Number(yscwValue) + boxHeight * 2;
		514	+ rightTop = "dYSCW + W * 2+ ";
		515	+ } else if (yscwType === "6005") {
		516	+ rightTopValue = boxHeight * 2;
		517	+ rightTop = "W * 2+ ";
		518	+ }
		519	+ if (zscwType === "3001" \|\| zscwType === "3006") {
		520	+ leftTopValue = Number(zscwValue) + boxHeight;
		521	+ leftTop = "dZSCW + W +";
		522	+ } else if (zscwType === "3002" \|\| zscwType === "3003") {
		523	+ leftTopValue = Number(zscwValue);
		524	+ leftTop = "dZSCW +";
		525	+ } else if (zscwType === "3004") {
		526	+ leftTopValue = Number(zscwValue) + boxHeight * 2;
		527	+ leftTop = "dZSCW + W * 2 +";
		528	+ } else if (zscwType === "3005") {
		529	+ leftTopValue = boxHeight * 2;
		530	+ leftTop = "W * 2 +";
		531	+ }
		532	+ if (yxcwType === "7001" \|\| yxcwType === "7006") {
		533	+ rightBottomValue = Number(yxcwValue) + boxHeight;
		534	+ rightBottom = "+ dYXCW + W";
		535	+ } else if (yxcwType === "7002" \|\| yxcwType === "7003") {
		536	+ rightBottomValue = Number(yxcwValue);
		537	+ rightBottom = "+ dYXCW ";
		538	+ } else if (yxcwType === "7004") {
		539	+ rightBottomValue = Number(yxcwValue) + boxHeight * 2;
		540	+ rightBottom = "+ dYXCW + W * 2";
		541	+ } else if (yxcwType === "7005") {
		542	+ rightBottomValue = boxHeight * 2;
		543	+ rightBottom = "+ W * 2";
		544	+ }
		545	+ sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom);
		546	+ } else if (boxType && boxType === "3") {
		547	+ const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value;
		548	+ const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value;
		549	+ sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L + W * 2" + (ytbw ? " +dYTBW" : "");
		550	+ if (zxcwType === "4001" \|\| zxcwType === "4006") {
		551	+ leftBottomValue = Number(zxcwValue) + boxHeight;
		552	+ leftBottom = " + dZXCW + W";
		553	+ } else if (zxcwType === "4002" \|\| zxcwType === "4003") {
		554	+ leftBottomValue = Number(zxcwValue);
		555	+ leftBottom = " + dZXCW";
		556	+ } else if (zxcwType === "4004") {
		557	+ leftBottomValue = Number(zxcwValue) + boxHeight * 2;
		558	+ leftBottom = " + dZXCW + W * 2";
		559	+ } else if (zxcwType === "4005") {
		560	+ leftBottomValue = boxHeight * 2;
		561	+ leftBottom = "+ W * 2";
		562	+ }
		563	+ if (yscwType === "6001" \|\| yscwType === "6006") {
		564	+ rightTopValue = Number(yscwValue) + boxHeight;
		565	+ rightTop = "dYSCW + W + ";
		566	+ } else if (yscwType === "6002" \|\| yscwType === "6003") {
		567	+ rightTopValue = Number(yscwValue);
		568	+ rightTop = "dYSCW + ";
		569	+ } else if (yscwType === "6004") {
		570	+ rightTopValue = Number(yscwValue) + boxHeight * 2;
		571	+ rightTop = "dYSCW + W * 2+ ";
		572	+ } else if (yscwType === "6005") {
		573	+ rightTopValue = boxHeight * 2;
		574	+ rightTop = "W * 2+ ";
		575	+ }
		576	+ if (zscwType === "3001" \|\| zscwType === "3006") {
		577	+ leftTopValue = Number(zscwValue) + boxHeight;
		578	+ leftTop = "dZSCW + W +";
		579	+ } else if (zscwType === "3002" \|\| zscwType === "3003") {
		580	+ leftTopValue = Number(zscwValue);
		581	+ leftTop = "dZSCW +";
		582	+ } else if (zscwType === "3004") {
		583	+ leftTopValue = Number(zscwValue) + boxHeight * 2;
		584	+ leftTop = "dZSCW + W * 2 +";
		585	+ } else if (zscwType === "3005") {
		586	+ leftTopValue = boxHeight * 2;
		587	+ leftTop = "W * 2 +";
		588	+ }
		589	+ if (yxcwType === "7001" \|\| yxcwType === "7006") {
		590	+ rightBottomValue = Number(yxcwValue) + boxHeight;
		591	+ rightBottom = "+ dYXCW + W";
		592	+ } else if (yxcwType === "7002" \|\| yxcwType === "7003") {
		593	+ rightBottomValue = Number(yxcwValue);
		594	+ rightBottom = "+ dYXCW ";
		595	+ } else if (yxcwType === "7004") {
		596	+ rightBottomValue = Number(yxcwValue) + boxHeight * 2;
		597	+ rightBottom = "+ dYXCW + W * 2";
		598	+ } else if (yxcwType === "7005") {
		599	+ rightBottomValue = boxHeight * 2;
		600	+ rightBottom = "+ W * 2";
		601	+ }
		602	+ sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom);
		603	+ } else if (boxType && boxType === "4") {
		604	+ // 天地盒
		605	+ const zxcw = boxList.find(x => x.sName === "左(下)插位组件");
		606	+ const zscw = boxList.find(x => x.sName === "左(上)插位组件");
		607	+ const yscw = boxList.find(x => x.sName === "右(上)插位组件");
		608	+ const yxcw = boxList.find(x => x.sName === "右(下)插位组件");
		609	+ const zxcwType = zxcw?.type;
		610	+ const zxcwValue = zxcw?.value;
		611	+ const zscwType = zscw?.type;
		612	+ const zscwValue = zscw?.value;
		613	+ const yscwType = yscw?.type;
		614	+ const yscwValue = yscw?.value;
		615	+ const yxcwType = yxcw?.type;
		616	+ const yxcwValue = yxcw?.value;
		617	+ let leftValue = "";
		618	+ let rightValue = "";
		619	+ let topValue = "";
		620	+ let bottomValue = "";
		621	+ if (zxcwType === "4001" \|\| zxcwType === "4006") {
		622	+ // leftValue = leftValue + Number(zxcwValue) + boxHeight * 2;
		623	+ leftValue = "dZXCW + D * 2 +";
		624	+ } else if (zxcwType === "4002" \|\| zxcwType === "4003") {
		625	+ leftValue = "dZXCW + D +";
		626	+ } else if (zxcwType === "4004") {
		627	+ leftValue = "dZXCW + D * 3 +";
		628	+ } else if (zxcwType === "4005") {
		629	+ leftValue = "D * 3 +";
		630	+ }
		631	+ if (yscwType === "6001" \|\| yscwType === "6006") {
		632	+ rightValue = "+ dYSCW + D * 2";
		633	+ } else if (yscwType === "6002" \|\| yscwType === "6003") {
		634	+ rightValue = "+ dYSCW + D";
		635	+ } else if (yscwType === "6004") {
		636	+ rightValue = "+ dYSCW + D * 3";
		637	+ } else if (yscwType === "6005") {
		638	+ rightValue = " + D * 3";
		639	+ }
		640	+ if (zscwType === "3001" \|\| zscwType === "3006") {
		641	+ topValue = "dZSCW + D * 2 +";
		642	+ } else if (zscwType === "3002" \|\| zscwType === "3003") {
		643	+ topValue = "dZSCW + D +";
		644	+ } else if (zscwType === "3004") {
		645	+ topValue = "dZSCW + D * 3 +";
		646	+ } else if (zscwType === "3005") {
		647	+ topValue = "D * 3+";
		648	+ }
		649	+ if (yxcwType === "7001" \|\| yxcwType === "7006") {
		650	+ bottomValue = "+ dYXCW + D * 2";
		651	+ } else if (yxcwType === "7002" \|\| yxcwType === "7003") {
		652	+ bottomValue = "+ dYXCW + D ";
		653	+ } else if (yxcwType === "7004") {
		654	+ bottomValue = "+ dYXCW + D * 3";
		655	+ } else if (yxcwType === "7005") {
		656	+ bottomValue = "+ D * 3";
		657	+ }
		658	+ // viewBoxWidth = Number(boxLength) + leftValue + rightValue;
		659	+ // viewBoxHeight = Number(boxWidth) + topValue + bottomValue;
		660	+ sLengthFormula = leftValue + "L" + rightValue;
		661	+ sWidthFormula = topValue + "W" + bottomValue;
		662	+ } else if (boxType && boxType === "5") {
		663	+ // 飞机盒
		664	+ const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value;
		665	+ const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value;
		666	+ sLengthFormula = (ztbw ? "dZTBW+ " : "") + "D * 2 + W * 2" + (ytbw ? " +dYTBW" : "");
		667	+ if (zxcwType === "4001" \|\| zxcwType === "4006") {
		668	+ leftBottomValue = Number(zxcwValue) + boxHeight;
		669	+ leftBottom = " + dZXCW + D";
		670	+ } else if (zxcwType === "4002" \|\| zxcwType === "4003") {
		671	+ leftBottomValue = Number(zxcwValue);
		672	+ leftBottom = " + dZXCW";
		673	+ } else if (zxcwType === "4004") {
		674	+ leftBottomValue = Number(zxcwValue) + boxHeight * 2;
		675	+ leftBottom = " + dZXCW + D * 2";
		676	+ } else if (zxcwType === "4005") {
		677	+ leftBottomValue = boxHeight * 2;
		678	+ leftBottom = "+ D * 2";
		679	+ }
		680	+ if (yscwType === "6001" \|\| yscwType === "6006") {
		681	+ rightTopValue = Number(yscwValue) + boxHeight;
		682	+ rightTop = "dYSCW + D + ";
		683	+ } else if (yscwType === "6002" \|\| yscwType === "6003") {
		684	+ rightTopValue = Number(yscwValue);
		685	+ rightTop = "dYSCW + ";
		686	+ } else if (yscwType === "6004") {
		687	+ rightTopValue = Number(yscwValue) + boxHeight * 2;
		688	+ rightTop = "dYSCW + D * 2+ ";
		689	+ } else if (yscwType === "6005") {
		690	+ rightTopValue = boxHeight * 2;
		691	+ rightTop = "D * 2+ ";
		692	+ }
		693	+ if (zscwType === "3001" \|\| zscwType === "3006") {
		694	+ leftTopValue = Number(zscwValue) + boxHeight;
		695	+ leftTop = "dZSCW + D +";
		696	+ } else if (zscwType === "3002" \|\| zscwType === "3003") {
		697	+ leftTopValue = Number(zscwValue);
		698	+ leftTop = "dZSCW +";
		699	+ } else if (zscwType === "3004") {
		700	+ leftTopValue = Number(zscwValue) + boxHeight * 2;
		701	+ leftTop = "dZSCW + D * 2 +";
		702	+ } else if (zscwType === "3005") {
		703	+ leftTopValue = boxHeight * 2;
		704	+ leftTop = "D * 2 +";
		705	+ }
		706	+ if (yxcwType === "7001" \|\| yxcwType === "7006") {
		707	+ rightBottomValue = Number(yxcwValue) + boxHeight;
		708	+ rightBottom = "+ dYXCW + D";
		709	+ } else if (yxcwType === "7002" \|\| yxcwType === "7003") {
		710	+ rightBottomValue = Number(yxcwValue);
		711	+ rightBottom = "+ dYXCW ";
		712	+ } else if (yxcwType === "7004") {
		713	+ rightBottomValue = Number(yxcwValue) + boxHeight * 2;
		714	+ rightBottom = "+ dYXCW + D * 2";
		715	+ } else if (yxcwType === "7005") {
		716	+ rightBottomValue = boxHeight * 2;
		717	+ rightBottom = "+ D * 2";
		718	+ }
		719	+ sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "L" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom);
		720	+ }
		721	+
		722	+ // 存储盒身数据主表
		723	+ const newMasterData = {
		724	+ ...masterData,
		725	+ sBoxBody: boxList.find(item => item.sName === "盒身")?.value \|\| "",
		726	+ dBoxLength: boxList.find(item => item.sName === "盒长")?.value \|\| "",
		727	+ dBoxWidth: boxList.find(item => item.sName === "盒宽")?.value \|\| "",
		728	+ dBoxHeight: boxList.find(item => item.sName === "盒高")?.value \|\| "",
		729	+ sName: boxList.find(item => item.sName === "盒型名称")?.value \|\| "",
		730	+ sMakeUpPath: boxList.find(item => item.sName === "盒身")?.selectImage \|\| "",
		731	+ sTypes: boxList.find(item => item.sName === "盒身")?.type \|\| "",
		732	+ sLengthFormula: sLengthFormula,
		733	+ sWidthFormula: sWidthFormula,
		734	+ };
		735	+
		736	+ onOk({ slaveData: newSlaveData, masterData: newMasterData }); // 提交数据
		737	+ };
		738	+ const findIndexBySname = name => {
		739	+ const i = boxList.findIndex(x => x.sName === name);
		740	+ return i \|\| 0;
		741	+ };
		742	+ return (
		743	+ <AntdDraggableModal
		744	+ width="1000px"
		745	+ height="calc(100vh - 50px)"
		746	+ title={title}
		747	+ visible={boxVisible}
		748	+ onCancel={onCancel}
		749	+ okText="创建"
		750	+ onOk={submit}
		751	+ bodyStyle={{
		752	+ height: "calc(95vh - 105px)",
		753	+ overflowY: "auto",
		754	+ display: "flex",
		755	+ flexDirection: "column",
		756	+ }}
		757	+ style={{
		758	+ top: 50,
		759	+ }}
		760	+ >
		761	+ {/* 盒身信息 */}
		762	+ <div className={styles.boxBody} key={boxKey}>
		763	+ <div className={styles.boxTop}>
		764	+ {topBoxList.map((topItem, index) => (
		765	+ <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>
		766	+ <div className={styles.boxTitle}>{topItem.sName}</div>
		767	+ {topItem?.selectImage ? (
		768	+ <img
		769	+ src={topItem?.selectImage}
		770	+ alt={topItem.value}
		771	+ style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}
		772	+ />
		773	+ ) : (
		774	+ ""
		775	+ )}
		776	+
		777	+ <Select
		778	+ optionLabelProp="label"
		779	+ className="mySelects"
		780	+ style={{ width: 180 }}
		781	+ defaultValue={options.length ? options[0].value : ""}
		782	+ onSelect={(value, option) => handleSelect(value, option, index, 0)}
		783	+ onDropdownVisibleChange={async open => {
		784	+ if (open) {
		785	+ props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions
		786	+ }
		787	+ }}
		788	+ >
		789	+ {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
		790	+ </Select>
		791	+ <div className={styles.boxInput}>
		792	+ {/* <div className={styles.text}>参数：</div> */}
		793	+ <Input
		794	+ value={topItem?.showName}
		795	+ onChange={e => handleChangeName(e, index)}
		796	+ onFocus={e => handleFocus(e, index)}
		797	+ onBlur={e => handleBlur(e, index)}
		798	+ readOnly={!topItem?.isEditable}
		799	+ className={styles.text}
		800	+ />
		801	+ <Input
		802	+ value={topItem?.value}
		803	+ onChange={e => handleChange(e, index)}
		804	+ onFocus={e => handleFocus(e, index)}
		805	+ onBlur={e => handleBlur(e, index)}
		806	+ readOnly={!topItem?.isEditable}
		807	+ style={{ width: " 80%" }}
		808	+ />
		809	+ </div>
		810	+ </div>
		811	+ ))}
		812	+ </div>
		813	+ <div className={styles.boxLeft}>
		814	+ {leftBoxList.map((item, index) => (
		815	+ <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
		816	+ <div className={styles.boxTitle}>{titleList[index + 3]}</div>
		817	+
		818	+ <Select
		819	+ optionLabelProp="label"
		820	+ className="mySelects"
		821	+ style={{ width: 180 }}
		822	+ defaultValue={options.length ? options[0].value : ""}
		823	+ onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
		824	+ onDropdownVisibleChange={async open => {
		825	+ if (open) {
		826	+ props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
		827	+ }
		828	+ }}
		829	+ >
		830	+ {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
		831	+ </Select>
		832	+ <div className={styles.boxInput}>
		833	+ {item?.selectImage ? (
		834	+ <img
		835	+ src={item?.selectImage}
		836	+ alt={item.value}
		837	+ style={{
		838	+ width: 40,
		839	+ height: 30,
		840	+ marginRight: 8,
		841	+ position: "absolute",
		842	+ left: 20,
		843	+ top: -35,
		844	+ zIndex: 10,
		845	+ }}
		846	+ />
		847	+ ) : (
		848	+ ""
		849	+ )}
		850	+ <Input
		851	+ value={item?.showName}
		852	+ onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
		853	+ onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
		854	+ onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
		855	+ readOnly={!item?.isEditable}
		856	+ className={styles.text}
		857	+ />
		858	+ <Input
		859	+ value={item?.value}
		860	+ onChange={e => handleChange(e, findIndexBySname(item.sName))}
		861	+ onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
		862	+ onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
		863	+ readOnly={!item?.isEditable}
		864	+ style={{ width: " 80%" }}
		865	+ />
		866	+ </div>
		867	+ </div>
		868	+ ))}
		869	+ </div>
		870	+ <div className={styles.boxRight}>
		871	+ {rightBoxList.map((item, index) => (
		872	+ <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
		873	+ <div className={styles.boxTitle}>{titleList[findIndexBySname(item.sName)]}</div>
		874	+
		875	+ <Select
		876	+ optionLabelProp="label"
		877	+ className="mySelects"
		878	+ style={{ width: 180 }}
		879	+ defaultValue={options.length ? options[0].value : ""}
		880	+ onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
		881	+ onDropdownVisibleChange={async open => {
		882	+ if (open) {
		883	+ props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
		884	+ }
		885	+ }}
		886	+ >
		887	+ {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
		888	+ </Select>
		889	+ <div className={styles.boxInput}>
		890	+ {item?.selectImage ? (
		891	+ <img
		892	+ src={item?.selectImage}
		893	+ alt={item.value}
		894	+ style={{
		895	+ width: 40,
		896	+ height: 30,
		897	+ marginRight: 8,
		898	+ position: "absolute",
		899	+ left: 20,
		900	+ top: -35,
		901	+ zIndex: 10,
		902	+ }}
		903	+ />
		904	+ ) : (
		905	+ ""
		906	+ )}
		907	+
		908	+ <Input
		909	+ value={item?.showName}
		910	+ onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
		911	+ onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
		912	+ onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
		913	+ readOnly={!item?.isEditable}
		914	+ className={styles.text}
		915	+ />
		916	+ <Input
		917	+ value={item?.value}
		918	+ onChange={e => handleChange(e, findIndexBySname(item.sName))}
		919	+ onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
		920	+ onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
		921	+ readOnly={!item?.isEditable}
		922	+ style={{ width: " 80%" }}
		923	+ />
		924	+ </div>
		925	+ </div>
		926	+ ))}
		927	+ </div>
		928	+ <div className={styles.boxBottom}>
		929	+ <div className={styles.svgBox}>
		930	+ <SvgBox {...svgBoxProps} />
		931	+ </div>
		932	+ <div className={styles.content}>
		933	+ {tableColum && tableColum.length
		934	+ ? tableColum.map((item, index) => {
		935	+ const uniqueIndex = index + 9;
		936	+ return (
		937	+ <div key={uniqueIndex} className={styles.boxFlex}>
		938	+ <div className={styles.boxInput}>
		939	+ <div className={styles.text} style={{ width: "120px" }}>
		940	+ {item.showName}
		941	+ </div>
		942	+ <Input
		943	+ value={boxList[uniqueIndex]?.value}
		944	+ onChange={e => handleChange(e, uniqueIndex)}
		945	+ onFocus={e => handleFocus(e, uniqueIndex)}
		946	+ onBlur={e => handleBlur(e, uniqueIndex)}
		947	+ readOnly={!boxList[uniqueIndex]?.isEditable}
		948	+ style={{ width: " 80%" }}
		949	+ />
		950	+ </div>
		951	+ </div>
		952	+ );
		953	+ })
		954	+ : ""}
		955	+ {boxBodyList && boxBodyList.length
		956	+ ? boxBodyList.map((item, index) => {
		957	+ const uniqueIndex = index + 9 + tableColum.length;
		958	+
		959	+ return (
		960	+ <div key={uniqueIndex} className={styles.boxFlex}>
		961	+ <div className={styles.boxInput}>
		962	+ <div className={styles.text} style={{ width: "120px" }}>
		963	+ {item.showName}
		964	+ </div>
		965	+ {boxList[uniqueIndex]?.selectImage ? (
		966	+ <img
		967	+ src={boxList[uniqueIndex]?.selectImage}
		968	+ alt={boxList[uniqueIndex].value}
		969	+ style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 120, top: 6, zIndex: 10 }}
		970	+ />
		971	+ ) : (
		972	+ ""
		973	+ )}
		974	+ {isDefaultValue ? <div className={styles.defaultValue}>{boxList[uniqueIndex]?.value}</div> : ""}
		975	+ <Select
		976	+ optionLabelProp="label"
		977	+ className="mySelects"
		978	+ style={{ width: "80%" }}
		979	+ defaultValue={boxList[uniqueIndex]?.value}
		980	+ onSelect={(value, option) => handleSelect(value, option, uniqueIndex, 1)}
		981	+ onDropdownVisibleChange={async open => {
		982	+ if (open) {
		983	+ props.getSqlOptions(10); // 盒身
		984	+ }
		985	+ }}
		986	+ >
		987	+ {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
		988	+ </Select>
		989	+ </div>
		990	+ </div>
		991	+ );
		992	+ })
		993	+ : ""}
		994	+ <div className={styles.boxFlexs}>
		995	+ {tableDataList && tableDataList.length
		996	+ ? tableDataList.map((item, index) => {
		997	+ const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length;
		998	+
		999	+ return (
		1000	+ <div key={uniqueIndex} className={styles.boxInputs}>
		1001	+ <div className={styles.text}>{item.sName}</div>
		1002	+ <Input
		1003	+ value={boxList[uniqueIndex]?.value}
		1004	+ onChange={e => handleChange(e, uniqueIndex)}
		1005	+ onFocus={e => handleFocus(e, uniqueIndex)}
		1006	+ onBlur={e => handleBlur(e, uniqueIndex)}
		1007	+ readOnly={!boxList[uniqueIndex]?.isEditable}
		1008	+ style={{ width: " 60%" }}
		1009	+ />
		1010	+ </div>
		1011	+ );
		1012	+ })
		1013	+ : ""}
		1014	+ </div>
		1015	+ </div>
		1016	+ </div>
		1017	+ </div>
		1018	+ </AntdDraggableModal>
		1019	+ );
		1020	+};
		1021	+
		1022	+export default CommonBase(BoxDesignCompontent);

src/components/Common/BoxDesignCompontent/index.less 0 → 100644

View file @43cccc6

		1	+.boxBody {
		2	+ width: 100%;
		3	+ height: 100%;
		4	+ position: relative;
		5	+ padding: 10px;
		6	+ .boxTop {
		7	+ display: flex;
		8	+ align-items: center;
		9	+ justify-content: space-around;
		10	+ width: 640px;
		11	+ height: 100px;
		12	+ margin: 0 auto;
		13	+ .boxFlex {
		14	+ width: 200px;
		15	+ display: flex;
		16	+ align-items: center;
		17	+ flex-wrap: wrap;
		18	+ flex-direction: column;
		19	+ position: relative;
		20	+ }
		21	+ }
		22	+ .boxLeft {
		23	+ width: 180px;
		24	+ height: 320px;
		25	+ display: flex;
		26	+ flex-wrap: wrap;
		27	+ flex-direction: column;
		28	+ position: absolute;
		29	+ justify-content: space-between;
		30	+ left: 10px;
		31	+ top: 130px;
		32	+ text-align: center;
		33	+ }
		34	+ .boxRight {
		35	+ width: 180px;
		36	+ height: 320px;
		37	+ display: flex;
		38	+ flex-wrap: wrap;
		39	+ justify-content: space-between;
		40	+ flex-direction: column;
		41	+ position: absolute;
		42	+ right: 10px;
		43	+ top: 130px;
		44	+ text-align: center;
		45	+ }
		46	+ .boxBottom{
		47	+ width: 500px;
		48	+ height: 380px;
		49	+ position: absolute;
		50	+ top: 130px;
		51	+ left: 50%;
		52	+ transform: translateX(-50%);
		53	+ .svgBox{
		54	+ width: 100%;
		55	+ height: 250px;
		56	+ background-color: #9AFF9A;
		57	+ }
		58	+ .content{
		59	+ width: 100%;
		60	+ height: 130px;
		61	+ :global{
		62	+ .ant-select-selector{
		63	+ // width: 380px !important; /* 选择框宽度 */
		64	+ color: #333;
		65	+ }
		66	+ .ant-select-selection-item {
		67	+ color: #333 !important; /* 选择框文字颜色 */
		68	+ padding-left: 50px;
		69	+ line-height: 40px;
		70	+ }
		71	+
		72	+ }
		73	+ }
		74	+ }
		75	+ .boxTitle{
		76	+ background-color: #3399ff;
		77	+ color: #fff;
		78	+ width: 180px;
		79	+ height: 20px;
		80	+ line-height: 20px;
		81	+ text-align: center;
		82	+ }
		83	+ :global{
		84	+ .mySelects .ant-select-selector {
		85	+ background-color: #99CCFF !important; /* 选择框背景色 */
		86	+ height: 40px !important; /* 选择框高度 */
		87	+ }
		88	+ .mySelects .ant-select-selection-item {
		89	+ color: transparent !important; /* 选择框文字颜色 */
		90	+ }
		91	+
		92	+ }
		93	+ .mySelects {
		94	+ position: relative;
		95	+ }
		96	+ .boxInput{
		97	+ display: flex;
		98	+ align-items: center;
		99	+ justify-content: space-between;
		100	+ width: 180px;
		101	+ height: 40px;
		102	+ position: relative;
		103	+ :global {
		104	+ .ant-input {
		105	+ background-color: #99CCFF !important; /* 输入框背景色 */
		106	+ border: 1px solid #d9d9d9;
		107	+ height: 40px;
		108	+ }
		109	+
		110	+ }
		111	+ }
		112	+ .text{
		113	+ background-color: #99CCFF;
		114	+ width: 100%;
		115	+ height: 40px;
		116	+ line-height: 40px;
		117	+ text-align: center;
		118	+ font-size: 10px;
		119	+ margin-right: 1px;
		120	+ }
		121	+ .content {
		122	+ :global{
		123	+ .ant-input {
		124	+ background-color: #EEEEEE !important; /* 输入框背景色 */
		125	+ height: 40px;
		126	+ }
		127	+ .ant-select-selector {
		128	+ background-color: #EEEEEE !important; /* 选择框背景色 */
		129	+ height: 40px !important; /* 选择框高度 */
		130	+ }
		131	+
		132	+ }
		133	+ .text{
		134	+ background-color: #EEEEEE ;
		135	+ margin: 0;
		136	+ }
		137	+ .boxFlex {
		138	+ display: flex;
		139	+ align-items: center;
		140	+ flex-wrap: wrap;
		141	+ flex-direction: column;
		142	+ width: 500px;
		143	+ }
		144	+ .boxFlexs{
		145	+ display: flex;
		146	+ align-items: center;
		147	+ width: 500px;
		148	+ justify-content: space-between;
		149	+ .boxInputs{
		150	+ display: flex;
		151	+ align-items: center;
		152	+ flex: 1;
		153	+ :global{
		154	+ .ant-input {
		155	+ background-color: #EEEEEE !important; /* 输入框背景色 */
		156	+ height: 40px;
		157	+ }
		158	+ }
		159	+ }
		160	+ }
		161	+ .boxInput{
		162	+ width: 100%;
		163	+ position: relative;
		164	+ .defaultValue{
		165	+ position: absolute;
		166	+ left: 32%;
		167	+ top: 3px;
		168	+ width: 60px;
		169	+ height: 30px;
		170	+ background-color: #EEE;
		171	+ color: #333;
		172	+ line-height: 40px;
		173	+ z-index: 2;
		174	+ text-align: center;
		175	+ }
		176	+ }
		177	+ }
		178	+}

src/components/Common/BoxDesignCompontent/showSvg.js 0 → 100644

View file @43cccc6

		1	+/* eslint-disable */
		2	+import React, { useRef, useState, useEffect } from "react";
		3	+import styles from "./index.less";
		4	+import {
		5	+ createPathElement,
		6	+ createTopTongue,
		7	+ createTopTongueType1,
		8	+ createTrapezoid,
		9	+ createDynamicTop,
		10	+ createNoneProject,
		11	+ createLineWeltTop,
		12	+ createIsoscelesTrapezoidWeltTop,
		13	+ createTrapezoidWeltTop,
		14	+ createFoldWeltTop,
		15	+ createFoldWeltTopLine,
		16	+ createRoundedCornersWeltTop,
		17	+ createRightAngleBoxBottomComponent,
		18	+ createBoxBottomComponent1,
		19	+ createBoxBottomComponent2,
		20	+ createBoxBottomComponent3,
		21	+ createBoxBottomComponent4,
		22	+ createBoxBottomComponent5,
		23	+ createBoxBottomComponent6,
		24	+ createBoxComponentNew,
		25	+ createBoxComponentNew1,
		26	+ createBoxComponentNew2,
		27	+ createBoxComponentNew3,
		28	+ createBoxComponentNew4,
		29	+ createBoxComponentNew5,
		30	+ createBoxComponentNew4_1,
		31	+ createWelt,
		32	+ createWelt1,
		33	+ createWelt2,
		34	+ createWelt2Right,
		35	+ createWelt3,
		36	+ createWelt3Right,
		37	+ createText,
		38	+ createDoubleArrow,
		39	+ createHorizontalDoubleArrow,
		40	+} from "../BoxDesign/createAirplaneBox";
		41	+const SvgBox = props => {
		42	+ const svgContainerRef = useRef(null);
		43	+ const svgRef = useRef(null);
		44	+ const [boxKey, setBoxKey] = useState(new Date().getTime());
		45	+ const { boxList, dSvgBoxWidth, dSvgBoxHeight } = props;
		46	+ const [width, setWidth] = useState(0);
		47	+ const [height, setHeight] = useState(0);
		48	+ const [deep, setDeep] = useState(0);
		49	+ const [svgType, setSvgType] = useState(1);
		50	+ // 盒身
		51	+ useEffect(
		52	+ () => {
		53	+ setTimeout(() => {
		54	+ const svg = svgRef.current;
		55	+ if (svg) {
		56	+ initSVG();
		57	+ }
		58	+ }, 0);
		59	+ },
		60	+ [boxList, svgType]
		61	+ );
		62	+
		63	+ // 初始化svg
		64	+ const initSVG = () => {
		65	+ setBoxKey(new Date().getTime());
		66	+ const svg = svgRef.current;
		67	+ svg.innerHTML = "";
		68	+
		69	+ // 获取盒型类型
		70	+ const svgTypes = boxList.find(x => x.sName === "盒身")?.type \|\| 1;
		71	+ setSvgType(svgTypes);
		72	+
		73	+ // 获取盒长、盒宽、盒高
		74	+ const boxLength = Number(boxList.find(x => x.sName === "盒长")?.value) \|\| 0;
		75	+ const boxWidth = Number(boxList.find(x => x.sName === "盒宽")?.value) \|\| 0;
		76	+ const boxHeight = Number(boxList.find(x => x.sName === "盒高")?.value) \|\| 0;
		77	+
		78	+ setWidth(boxLength);
		79	+ setHeight(boxWidth);
		80	+ setDeep(boxHeight);
		81	+
		82	+ // 计算视口宽度和高度
		83	+ const zbtb = boxList.find(x => x.sName === "左贴边位");
		84	+ const ybtb = boxList.find(x => x.sName === "右贴边位");
		85	+ const dZTBW = Number(zbtb?.value) \|\| 0;
		86	+ const dYTBW = Number(ybtb?.value) \|\| 0;
		87	+ const sfhs = boxList.find(x => x.sName === "上方盒舌");
		88	+ const dSFHS = Number(sfhs?.value) \|\| 0;
		89	+ const hdzj = boxList.find(x => x.sName === "盒底组件");
		90	+ const xfhs = boxList.find(x => x.sName === "下方盒舌");
		91	+ const dXFHS = Number(xfhs?.value) \|\| 0;
		92	+ const zsbj = boxList.find(x => x.sName === "左(上)插位组件");
		93	+ const dZSCW = Number(zsbj?.value) \|\| 0;
		94	+ const ysbj = boxList.find(x => x.sName === "右(上)插位组件");
		95	+ const dYSCW = Number(ysbj?.value) \|\| 0;
		96	+ const zxbj = boxList.find(x => x.sName === "左(下)插位组件");
		97	+ const dZXCW = Number(zxbj?.value) \|\| 0;
		98	+ const yxbj = boxList.find(x => x.sName === "右(下)插位组件");
		99	+ const dYXCW = Number(yxbj?.value) \|\| 0;
		100	+ // 根据选择不同的部件计算尺寸
		101	+
		102	+ // const viewBoxWidth = (boxLength * 2 + boxHeight * 2 + dYTBW + dZTBW);
		103	+ let viewBoxWidth = 0;
		104	+ let max = 0;
		105	+ // 展宽
		106	+ if (boxList && boxList.length) {
		107	+ // 如果存在部件和盒舌取最大的
		108	+ const top = topOffect(boxList, boxLength, boxWidth, boxHeight);
		109	+ const bottom = bottomOffect(boxList, boxLength, boxWidth, boxHeight);
		110	+ max = top + bottom + 4;
		111	+ }
		112	+
		113	+ let viewBoxHeight = Number(boxWidth) + max;
		114	+ if (Number(svgType) === 1) {
		115	+ // 四面盒身
		116	+ viewBoxWidth = dZTBW + Number(boxLength) * 2 + Number(boxWidth) * 2;
		117	+ } else if (Number(svgType) === 2) {
		118	+ viewBoxWidth = boxLength * 2 + boxWidth + dYTBW + dZTBW;
		119	+ } else if (Number(svgType) === 3) {
		120	+ viewBoxWidth = boxLength + boxWidth * 2 + dYTBW + dZTBW;
		121	+ } else {
		122	+ viewBoxWidth = boxLength + boxHeight + dYTBW + dZTBW;
		123	+ viewBoxHeight = Number(boxWidth) + Number(boxHeight) * 2 + max;
		124	+ }
		125	+ if (!dSvgBoxWidth) {
		126	+ viewBoxWidth = Number(viewBoxWidth) + 200;
		127	+ viewBoxHeight = Number(viewBoxHeight) + 200;
		128	+ }
		129	+ // 计算缩放比例
		130	+ let scale = 1;
		131	+ const ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight) * scale;
		132	+ svg.setAttribute("viewBox", `${-(zbtb?.value * scale)} ${-ySvg} ${dSvgBoxWidth} ${dSvgBoxHeight}`);
		133	+ svg.setAttribute("width", `${dSvgBoxWidth}px`);
		134	+ svg.setAttribute("height", `${dSvgBoxHeight}px`);
		135	+ svgContainerRef.current.style.width = `${dSvgBoxWidth}px`;
		136	+ svgContainerRef.current.style.height = `${dSvgBoxHeight}px`;
		137	+
		138	+ const scaledWidth = boxLength * scale;
		139	+ const scaledHeight = boxWidth * scale;
		140	+ const scaledDeep = boxHeight * scale;
		141	+ const scales = dSvgBoxWidth ? scale : 1;
		142	+ // 根据盒型类型生成不同的盒身四面盒身
		143	+ if (Number(svgType) === 1) {
		144	+ const rectangles = [
		145	+ { x: 0, y: 0, width: scaledWidth, height: scaledDeep },
		146	+ { x: 0 + scaledWidth, y: 0, width: scaledHeight, height: scaledDeep },
		147	+ { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep },
		148	+ { x: 0 + scaledWidth * 2 + scaledHeight, y: 0, width: scaledHeight, height: scaledDeep },
		149	+ ];
		150	+ rectangles.forEach(rect => {
		151	+ svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height));
		152	+ });
		153	+
		154	+ let pathList = [];
		155	+ // 上方盒舌
		156	+ pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth, 0));
		157	+ pathList.push(createUpperBoxTongueLeft(sfhs?.type, -scaledHeight, -dSFHS * scale, scaledWidth * 2 + scaledHeight * 2, 0));
		158	+ if (sfhs?.type && dSFHS) {
		159	+ pathList.push(createText(scaledWidth + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS));
		160	+ pathList.push(createText(scaledWidth * 2 + scaledHeight + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS));
		161	+ }
		162	+ // if (sfhs?.type === "1004") {
		163	+ // pathList.push(createFoldWeltTopLine(scaledHeight * 0.5, -dSFHS * scale * 0.5, scaledWidth, 0));
		164	+ // pathList.push(createFoldWeltTopLine(-scaledHeight * 0.5, -dSFHS * scale * 0.5, scaledWidth * 2 + scaledHeight * 2, 0));
		165	+ // }
		166	+ // if (sfhs?.type === "1005") {
		167	+ // pathList.push(createFoldWeltTopLine(scaledHeight * 0.85, -dSFHS * scale * 0.9, scaledWidth, 0));
		168	+ // pathList.push(createFoldWeltTopLine(-scaledHeight * 0.85, -dSFHS * scale * 0.9, scaledWidth * 2 + scaledHeight * 2, 0));
		169	+ // }
		170	+ // 盒底组件
		171	+ if (hdzj && hdzj.type) {
		172	+ // 盒底组件
		173	+ pathList.push(createBoxBottomComponent(hdzj?.type, scaledWidth, scaledHeight, Number(hdzj?.value) * scale, 0, scaledDeep));
		174	+ pathList.push(createText(scaledWidth / 2, scaledDeep + (Number(hdzj?.value) / 2) * scales, 10 * scales, Number(hdzj?.value)));
		175	+ } else {
		176	+ // 下方盒舌
		177	+
		178	+ pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth, scaledDeep));
		179	+ pathList.push(createUpperBoxTongueLeft(xfhs?.type, -scaledHeight, dXFHS * scale, scaledWidth * 2 + scaledHeight * 2, scaledDeep));
		180	+ if (xfhs?.type && dXFHS) {
		181	+ pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 10) * scales, 10 * scales, dXFHS));
		182	+ pathList.push(createText(scaledWidth * 2 + scaledHeight + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 10) * scales, 10 * scales, dXFHS));
		183	+ }
		184	+ }
		185	+
		186	+ // 左边贴边
		187	+ pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0));
		188	+ if (zbtb?.type && dZTBW) {
		189	+ pathList.push(createText(-dZTBW * 0.4, scaledDeep / 2, 10 * scales, dZTBW));
		190	+ }
		191	+ // 右边贴边
		192	+ pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight * 2, 0));
		193	+ if (ybtb?.type && dYTBW) {
		194	+ pathList.push(createText(scaledWidth * 2 + scaledHeight * 2 + dYTBW * 0.4, scaledDeep / 2, 10 * scales, dYTBW));
		195	+ }
		196	+ // 左上部件
		197	+ pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0));
		198	+ if ((zsbj?.type === "3001" && zsbj?.value )\|\| (zsbj?.type === "3006" && zsbj?.value)) {
		199	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales));
		200	+ pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
		201	+ // 插位值
		202	+ pathList.push(createText(scaledWidth / 2, -scaledHeight - dZSCW / 2 + 4, 10 * scales, dZSCW));
		203	+ } else if (zsbj?.type === "3002" && dZSCW) {
		204	+ pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW));
		205	+ } else if (zsbj?.type === "3003" && dZSCW) {
		206	+ pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW));
		207	+ } else if (zsbj?.type === "3004" && zsbj?.value) {
		208	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales));
		209	+ pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
		210	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales));
		211	+ pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
		212	+ pathList.push(createText(scaledWidth * 0.3, -(scaledHeight * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW));
		213	+ } else if (zsbj?.type === "3005" && zsbj?.value) {
		214	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, -scaledHeight / 2, scales));
		215	+ pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
		216	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales));
		217	+ pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
		218	+ }
		219	+ // 右上部件
		220	+ pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0));
		221	+ if (ysbj?.type === "6001" && ysbj?.value) {
		222	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales));
		223	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
		224	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2 + 4, 10 * scales, dYSCW));
		225	+ } else if (ysbj?.type === "6002" && dYSCW) {
		226	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW));
		227	+ } else if (ysbj?.type === "6003" && dYSCW) {
		228	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW));
		229	+ } else if (ysbj?.type === "6004" && ysbj?.value) {
		230	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales));
		231	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
		232	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales));
		233	+ pathList.push(
		234	+ createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")
		235	+ );
		236	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW));
		237	+ } else if (ysbj?.type === "6005" && ysbj?.value) {
		238	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales));
		239	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
		240	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales));
		241	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
		242	+ }
		243	+ // 左下部件-
		244	+ if (!(hdzj && hdzj.type)) {
		245	+ pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep));
		246	+ if (zxbj?.type === "4001" && zxbj?.value) {
		247	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
		248	+ pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
		249	+ pathList.push(createText(scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2 - 4, 10 * scales, dZXCW));
		250	+ } else if (zxbj?.type === "4002" && dZXCW) {
		251	+ pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW));
		252	+ } else if (zxbj?.type === "4003" && dZXCW) {
		253	+ pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW));
		254	+ } else if (zxbj?.type === "4004" && zxbj?.value) {
		255	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
		256	+ pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
		257	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales));
		258	+ pathList.push(createText(scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W"));
		259	+ pathList.push(createText(scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW));
		260	+ } else if (zxbj?.type === "4005" && zxbj?.value) {
		261	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales));
		262	+ pathList.push(createText(scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
		263	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales));
		264	+ pathList.push(createText(scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W"));
		265	+ }
		266	+ }
		267	+ if (!(hdzj && hdzj.type)) {
		268	+ pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW * scale, scaledWidth + scaledHeight, scaledDeep));
		269	+ if (yxbj?.type === "7001" && yxbj?.value) {
		270	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
		271	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
		272	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + scaledHeight + dYXCW / 2 - 4, 10 * scales, dYXCW));
		273	+ } else if (yxbj?.type === "7004" && yxbj?.value) {
		274	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
		275	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 - 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
		276	+ pathList.push(
		277	+ createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales)
		278	+ );
		279	+ pathList.push(
		280	+ createText(
		281	+ scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales,
		282	+ scaledDeep + (scaledHeight + scaledHeight / 2),
		283	+ 10 * scales,
		284	+ "W"
		285	+ )
		286	+ );
		287	+ pathList.push(
		288	+ createText(scaledWidth + scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dYXCW / 2 - 4, 10 * scales, dYXCW)
		289	+ );
		290	+ } else if (yxbj?.type === "7005" && yxbj?.value) {
		291	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales));
		292	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
		293	+ pathList.push(
		294	+ createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales)
		295	+ );
		296	+ pathList.push(
		297	+ createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")
		298	+ );
		299	+ } else if (dYXCW && yxbj?.type) {
		300	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + dYXCW / 2 - 4, 10 * scales, dYXCW));
		301	+ }
		302	+ }
		303	+ // 右下部件
		304	+
		305	+ // 纵向 D
		306	+ if (scaledDeep && scaledWidth && scaledHeight) {
		307	+ pathList.push(createDoubleArrow(scaledDeep, scaledWidth + scaledHeight + scaledWidth / 2, scaledDeep / 2, scales));
		308	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth / 2 + 10 * scales, scaledDeep / 2, 10 * scales, "D"));
		309	+
		310	+ // 横向 L
		311	+ pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledDeep / 2, scales));
		312	+ pathList.push(createText(scaledWidth / 2, scaledDeep / 2 + 10 * scales, 10 * scales, "L"));
		313	+ // W
		314	+ pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledWidth + scaledHeight / 2, scaledDeep * 0.3, scale));
		315	+ pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep * 0.3 + 10 * scales, 10 * scales, "W"));
		316	+ }
		317	+ pathList.forEach(x => {
		318	+ svg.appendChild(x);
		319	+ });
		320	+ } else if (Number(svgType) === 2) {
		321	+ // 单折盒身
		322	+ const rectangles = [
		323	+ { x: 0, y: 0, width: scaledWidth, height: scaledDeep },
		324	+ { x: 0 + scaledWidth, y: 0, width: scaledHeight, height: scaledDeep },
		325	+ { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep },
		326	+ ];
		327	+ rectangles.forEach(rect => {
		328	+ svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height));
		329	+ });
		330	+ let pathList = [];
		331	+ // 上方盒舌
		332	+ pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth, 0));
		333	+ if (sfhs?.type && dSFHS) {
		334	+ pathList.push(createText(scaledWidth + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS));
		335	+ }
		336	+ // 下方盒舌
		337	+ pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth, scaledDeep));
		338	+ if (xfhs?.type && dXFHS) {
		339	+ pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dSFHS));
		340	+ }
		341	+ // 左边贴边
		342	+ pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0));
		343	+ if (zbtb?.type && dZTBW) {
		344	+ pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW));
		345	+ }
		346	+ // 右边贴边
		347	+ pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight, 0));
		348	+ if (zbtb?.type && dYTBW) {
		349	+ pathList.push(createText(scaledWidth * 2 + scaledHeight + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW));
		350	+ }
		351	+ // 左上部件
		352	+ pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0));
		353	+ if ((zsbj?.type === "3001" && zsbj?.value )\|\| (zsbj?.type === "3006" && zsbj?.value)) {
		354	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales));
		355	+ pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
		356	+ pathList.push(createText(scaledWidth / 2, -scaledHeight - dZSCW / 2 + 4, 10 * scales, dZSCW));
		357	+ } else if (zsbj?.type === "3004" && zsbj?.value) {
		358	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales));
		359	+ pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
		360	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales));
		361	+ pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
		362	+ pathList.push(createText(scaledWidth * 0.3, -(scaledHeight * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW));
		363	+ } else if (zsbj?.type === "3005" && zsbj?.value) {
		364	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, -scaledHeight / 2, scales));
		365	+ pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
		366	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales));
		367	+ pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
		368	+ pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
		369	+ } else if (zsbj?.type && dZSCW) {
		370	+ pathList.push(createText(scaledWidth / 2, -(dZSCW / 2 - 5), 10 * scales, dZSCW));
		371	+ }
		372	+ // 右上部件
		373	+ pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0));
		374	+ if (ysbj?.type === "6001" && ysbj?.value) {
		375	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales));
		376	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
		377	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2 + 4, 10 * scales, dYSCW));
		378	+ } else if (ysbj?.type === "6004" && ysbj?.value) {
		379	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales));
		380	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
		381	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales));
		382	+ pathList.push(
		383	+ createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")
		384	+ );
		385	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW));
		386	+ } else if (ysbj?.type === "6005" && ysbj?.value) {
		387	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales));
		388	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
		389	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales));
		390	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
		391	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
		392	+ } else if (ysbj?.type && dYSCW) {
		393	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW));
		394	+ }
		395	+ // 左下部件-
		396	+ pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep));
		397	+ if (zxbj?.type === "4001" && zxbj?.value) {
		398	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
		399	+ pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
		400	+ pathList.push(createText(scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2 - 4, 10 * scales, dZXCW));
		401	+ } else if (zxbj?.type === "4004" && zxbj?.value) {
		402	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
		403	+ pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
		404	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales));
		405	+ pathList.push(createText(scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W"));
		406	+ pathList.push(createText(scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW));
		407	+ } else if (zxbj?.type === "4005" && zxbj?.value) {
		408	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales));
		409	+ pathList.push(createText(scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
		410	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales));
		411	+ pathList.push(createText(scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W"));
		412	+ } else if (zxbj?.type && dZXCW) {
		413	+ pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW));
		414	+ }
		415	+ // 右下部件
		416	+ pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW, scaledWidth + scaledHeight, scaledDeep));
		417	+ if (yxbj?.type === "7001" && yxbj?.value) {
		418	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
		419	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
		420	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + scaledHeight + dYXCW / 2 - 4, 10 * scales, dYXCW));
		421	+ } else if (yxbj?.type === "7004" && yxbj?.value) {
		422	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
		423	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 - 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
		424	+ pathList.push(
		425	+ createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales)
		426	+ );
		427	+ pathList.push(
		428	+ createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")
		429	+ );
		430	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dYXCW / 2 - 4, 10 * scales, dYXCW));
		431	+ } else if (yxbj?.type === "7005" && yxbj?.value) {
		432	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales));
		433	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
		434	+ pathList.push(
		435	+ createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales)
		436	+ );
		437	+ pathList.push(
		438	+ createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scale, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scale, "W")
		439	+ );
		440	+ } else if (dYXCW && yxbj?.type) {
		441	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + dYXCW / 2 - 4, 10 * scales, dYXCW));
		442	+ }
		443	+ if (scaledDeep && scaledWidth && scaledHeight) {
		444	+ // 纵向 D
		445	+ pathList.push(createDoubleArrow(scaledDeep, scaledWidth + scaledHeight + scaledWidth / 2, scaledDeep / 2, scales));
		446	+ pathList.push(createText(scaledWidth + scaledHeight + scaledWidth / 2 + 10, scaledDeep / 2, 10 * scales, "D"));
		447	+
		448	+ // 横向 L
		449	+ pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledDeep / 2, scales));
		450	+ pathList.push(createText(scaledWidth / 2, scaledDeep / 2 + 10, 10 * scales, "L"));
		451	+ // W
		452	+ pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledWidth + scaledHeight / 2, scaledDeep * 0.3, scales));
		453	+ pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep * 0.3 + 10, 10 * scales, "W"));
		454	+ }
		455	+
		456	+ pathList.forEach(x => {
		457	+ svg.appendChild(x);
		458	+ });
		459	+ } else if (Number(svgType) === 3) {
		460	+ // 双折盒
		461	+ const rectangles = [
		462	+ { x: 0, y: 0, width: scaledHeight, height: scaledDeep },
		463	+ { x: 0 + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep },
		464	+ { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledHeight, height: scaledDeep },
		465	+ ];
		466	+ rectangles.forEach(rect => {
		467	+ svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height));
		468	+ });
		469	+ let pathList = [];
		470	+ // 上方盒舌
		471	+ pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, 0, 0));
		472	+ pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth + scaledHeight, 0));
		473	+ if (sfhs?.type && dSFHS) {
		474	+ pathList.push(createText(scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS));
		475	+ pathList.push(createText(scaledWidth + scaledHeight + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS));
		476	+ }
		477	+ // 下方盒舌
		478	+ pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, 0, scaledDeep));
		479	+ pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth + scaledHeight, scaledDeep));
		480	+ if (xfhs?.type && dXFHS) {
		481	+ pathList.push(createText(scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dXFHS));
		482	+ pathList.push(createText(scaledWidth + scaledHeight + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dXFHS));
		483	+ }
		484	+ // 左边贴边
		485	+ pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0));
		486	+ if (zbtb?.type && dZTBW) {
		487	+ pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW));
		488	+ }
		489	+ // 右边贴边
		490	+ pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth + scaledHeight * 2, 0));
		491	+ if (zbtb?.type && dYTBW) {
		492	+ pathList.push(createText(scaledWidth + scaledHeight * 2 + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW));
		493	+ }
		494	+ // 左下部件-
		495	+ pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, scaledHeight, scaledDeep));
		496	+ if (zxbj?.type === "4001" && zxbj?.value) {
		497	+ pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
		498	+ pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
		499	+ pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
		500	+ pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2 - 4, 10 * scales, dZXCW));
		501	+ } else if (zxbj?.type === "4004" && zxbj?.value) {
		502	+ pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
		503	+ pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
		504	+ pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales));
		505	+ pathList.push(createText(scaledHeight + scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W"));
		506	+ pathList.push(createText(scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW));
		507	+ } else if (zxbj?.type === "4005" && zxbj?.value) {
		508	+ pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales));
		509	+ pathList.push(createText(scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
		510	+ pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales));
		511	+ pathList.push(createText(scaledHeight + scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W"));
		512	+ } else if (zxbj?.type && dZXCW) {
		513	+ pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW));
		514	+ }
		515	+ // 右上部件
		516	+ pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledHeight, 0));
		517	+ if (ysbj?.type === "6001" && ysbj?.value) {
		518	+ pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales));
		519	+ pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
		520	+ pathList.push(createText(scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2 + 4, 10 * scales, dYSCW));
		521	+ } else if (ysbj?.type === "6004" && ysbj?.value) {
		522	+ pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales));
		523	+ pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
		524	+ pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales));
		525	+ pathList.push(createText(scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
		526	+ pathList.push(createText(scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW));
		527	+ } else if (ysbj?.type === "6005" && ysbj?.value) {
		528	+ pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales));
		529	+ pathList.push(createText(scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
		530	+ pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales));
		531	+ pathList.push(createText(scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
		532	+ } else if (ysbj?.type && dYSCW) {
		533	+ pathList.push(createText(scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW));
		534	+ }
		535	+
		536	+ if (scaledDeep && scaledWidth && scaledHeight) {
		537	+ // 纵向 D
		538	+ pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledWidth + scaledHeight / 2, scaledDeep / 2, scales));
		539	+ pathList.push(createText(scaledHeight + scaledWidth + scaledHeight / 2 + 10, scaledDeep / 2, 10 * scales, "D"));
		540	+
		541	+ // 横向 L
		542	+ pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledHeight + scaledWidth / 2, scaledDeep / 2, scales));
		543	+ pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep / 2 + 10, 10 * scales, "L"));
		544	+ // W
		545	+ pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledHeight / 2, scaledDeep * 0.3, scales));
		546	+ pathList.push(createText(scaledHeight / 2, scaledDeep * 0.3 + 10, 10 * scales, "W"));
		547	+ }
		548	+
		549	+ pathList.forEach(x => {
		550	+ svg.appendChild(x);
		551	+ });
		552	+ } else {
		553	+ svg.appendChild(createFullTelescope(scaledWidth, scaledHeight, scaledDeep, 0, 0));
		554	+ // createFullTelescope
		555	+ let pathList = [];
		556	+ if (scaledDeep && scaledWidth && scaledHeight) {
		557	+ // 纵向 D
		558	+ pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledHeight / 2, scales));
		559	+ pathList.push(createText(scaledWidth * 0.2 + 10, scaledHeight / 2, 10 * scales, "W"));
		560	+
		561	+ // 横向 L
		562	+ pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledHeight * 0.8, scales));
		563	+ pathList.push(createText(scaledWidth / 2, scaledHeight * 0.8 + 10, 10 * scales, "L"));
		564	+ // W
		565	+ pathList.push(createHorizontalDoubleArrow(scaledDeep, -scaledDeep / 2, scaledHeight * 0.3, scales));
		566	+ pathList.push(createText(-scaledDeep / 2, scaledHeight * 0.3 + 10, 10 * scales, "D"));
		567	+ }
		568	+ pathList.forEach(x => {
		569	+ svg.appendChild(x);
		570	+ });
		571	+ }
		572	+ };
		573	+ // 计算头部偏移
		574	+ const topOffect = (list, length, width, height) => {
		575	+ // 判断code
		576	+ const valueList = list.filter(x => x.type !== ("" \|\| null));
		577	+ // const titleList = ['上方盒舌','左(上)插位组件','右(上)插位组件']
		578	+ const sfhs = valueList.find(x => x.sName === "上方盒舌");
		579	+ const zscw = valueList.find(x => x.sName === "左(上)插位组件");
		580	+ const yscw = valueList.find(x => x.sName === "右(上)插位组件");
		581	+ let top = 0;
		582	+ const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006"];
		583	+ const four = ["6004", "3004", "4004", "7004"];
		584	+ const five = ["6005", "3005", "4005", "7005"];
		585	+ const dYSCW = Number(yscw?.value) \|\| 0;
		586	+ const dZSCW = Number(zscw?.value) \|\| 0;
		587	+ // 如果存在插位就不计算盒舌
		588	+ if (zscw?.type && yscw?.type) {
		589	+ const max = Math.max(dZSCW, dYSCW);
		590	+ if (five.includes(zscw?.type) \|\| five.includes(yscw?.type)) {
		591	+ top = width * 2;
		592	+ } else if (four.includes(zscw?.type) \|\| four.includes(yscw?.type)) {
		593	+ top = width * 2 + max;
		594	+ } else if (one.includes(zscw?.type) \|\| one.includes(yscw?.type)) {
		595	+ top = width + max;
		596	+ } else {
		597	+ top = max;
		598	+ }
		599	+ } else if (yscw?.type) {
		600	+ const max = dYSCW;
		601	+ if (five.includes(zscw?.type) \|\| five.includes(yscw?.type)) {
		602	+ top = width * 2;
		603	+ } else if (four.includes(zscw?.type) \|\| four.includes(yscw?.type)) {
		604	+ top = width * 2 + max;
		605	+ } else if (one.includes(zscw?.type) \|\| one.includes(yscw?.type)) {
		606	+ top = width + max;
		607	+ } else {
		608	+ top = max;
		609	+ }
		610	+ } else if (zscw?.type) {
		611	+ const max = dZSCW;
		612	+ if (five.includes(zscw?.type) \|\| five.includes(yscw?.type)) {
		613	+ top = width * 2;
		614	+ } else if (four.includes(zscw?.type) \|\| four.includes(yscw?.type)) {
		615	+ top = width * 2 + max;
		616	+ } else if (one.includes(zscw?.type) \|\| one.includes(yscw?.type)) {
		617	+ top = width + max;
		618	+ } else {
		619	+ top = max;
		620	+ }
		621	+ } else {
		622	+ top = sfhs?.value;
		623	+ }
		624	+ return isNaN(top) ? 0 : top;
		625	+ };
		626	+ const bottomOffect = (list, length, width, height) => {
		627	+ // 判断code
		628	+ const valueList = list.filter(x => x.type !== ("" \|\| null));
		629	+ // const titleList = ['上方盒舌','左(上)插位组件','右(上)插位组件']
		630	+ const sfhs = valueList.find(x => x.sName === "下方盒舌");
		631	+ const zscw = valueList.find(x => x.sName === "左(下)插位组件");
		632	+ const yscw = valueList.find(x => x.sName === "右(下)插位组件");
		633	+ const hdzj = valueList.find(x => x.sName === "盒底组件");
		634	+ // 将找到的对象放入数组中，并过滤掉 undefined 值
		635	+ // 使用 reduce 方法比较 value 属性，找出最大的对象
		636	+ let top = 0;
		637	+ const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006"];
		638	+ const four = ["6004", "3004", "4004", "7004"];
		639	+ const five = ["6005", "3005", "4005", "7005"];
		640	+ const dYSCW = Number(yscw?.value) \|\| 0;
		641	+ const dZSCW = Number(zscw?.value) \|\| 0;
		642	+ if (hdzj?.type) {
		643	+ return Number(hdzj?.value);
		644	+ }
		645	+ if (zscw?.type && yscw?.type) {
		646	+ const max = Math.max(dZSCW, dYSCW);
		647	+ if (five.includes(zscw?.type) \|\| five.includes(yscw?.type)) {
		648	+ top = width * 2;
		649	+ } else if (four.includes(zscw?.type) \|\| four.includes(yscw?.type)) {
		650	+ top = width * 2 + max;
		651	+ } else if (one.includes(zscw?.type) \|\| one.includes(yscw?.type)) {
		652	+ top = width + max;
		653	+ } else {
		654	+ top = max;
		655	+ }
		656	+ } else if (yscw?.type) {
		657	+ const max = dYSCW;
		658	+ if (five.includes(zscw?.type) \|\| five.includes(yscw?.type)) {
		659	+ top = width * 2;
		660	+ } else if (four.includes(zscw?.type) \|\| four.includes(yscw?.type)) {
		661	+ top = width * 2 + max;
		662	+ } else if (one.includes(zscw?.type) \|\| one.includes(yscw?.type)) {
		663	+ top = width + max;
		664	+ } else {
		665	+ top = max;
		666	+ }
		667	+ } else if (zscw?.type) {
		668	+ const max = dZSCW;
		669	+ if (five.includes(zscw?.type) \|\| five.includes(yscw?.type)) {
		670	+ top = width * 2;
		671	+ } else if (four.includes(zscw?.type) \|\| four.includes(yscw?.type)) {
		672	+ top = width * 2 + max;
		673	+ } else if (one.includes(zscw?.type) \|\| one.includes(yscw?.type)) {
		674	+ top = width + max;
		675	+ } else {
		676	+ top = max;
		677	+ }
		678	+ } else {
		679	+ top = sfhs?.value;
		680	+ }
		681	+ // if (five.includes(zscw?.type) \|\| five.includes(yscw?.type)) {
		682	+ // top = width * 2;
		683	+ // } else if (four.includes(zscw?.type) \|\| four.includes(yscw?.type)) {
		684	+ // if (dZSCW && dYSCW) {
		685	+ // const max = Math.max(dZSCW, dYSCW);
		686	+ // top = width * 2 + max;
		687	+ // } else if (dZSCW && !dYSCW) {
		688	+ // top = width * 2 + dZSCW;
		689	+ // } else if (!dZSCW && dYSCW) {
		690	+ // top = width * 2 + dYSCW;
		691	+ // }
		692	+ // } else if (one.includes(zscw?.type) \|\| one.includes(yscw?.type)) {
		693	+ // if (dZSCW && dYSCW) {
		694	+ // const max = Math.max(dZSCW, dYSCW);
		695	+ // top = width + max;
		696	+ // } else if (dZSCW && !dYSCW) {
		697	+ // top = width + dZSCW;
		698	+ // } else if (!dZSCW && dYSCW) {
		699	+ // top = width + dYSCW;
		700	+ // }
		701	+ // } else {
		702	+ // if (dZSCW && !dYSCW) {
		703	+ // top = Number(dZSCW);
		704	+ // } else if (!dZSCW && dYSCW) {
		705	+ // top = Number(dYSCW);
		706	+ // } else {
		707	+ // top = Number(sfhs?.value);
		708	+ // }
		709	+ // }
		710	+
		711	+ return isNaN(top) ? 0 : top;
		712	+ };
		713	+ // 上方盒舌左边
		714	+ const createUpperBoxTongueLeft = (upperBoxTongueType, width, height, offsetX, offsetY) => {
		715	+ if (!height) return createNoneProject();
		716	+ // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回
		717	+ let data = {};
		718	+ switch (upperBoxTongueType) {
		719	+ case "1001":
		720	+ data = createLineWeltTop(width, height, offsetX, offsetY);
		721	+ break;
		722	+ case "1002":
		723	+ data = createIsoscelesTrapezoidWeltTop(width, height, offsetX, offsetY);
		724	+ break;
		725	+ case "1003":
		726	+ data = createTrapezoidWeltTop(width, height, offsetX, offsetY);
		727	+ break;
		728	+ case "1004":
		729	+ data = createFoldWeltTop(width, height, offsetX, offsetY);
		730	+ break;
		731	+ case "1005":
		732	+ data = createRoundedCornersWeltTop(width, height, offsetX, offsetY);
		733	+ break;
		734	+ case "2001":
		735	+ data = createLineWeltTop(width, height, offsetX, offsetY);
		736	+ break;
		737	+ case "2002":
		738	+ data = createIsoscelesTrapezoidWeltTop(width, height, offsetX, offsetY);
		739	+ break;
		740	+ case "2003":
		741	+ data = createTrapezoidWeltTop(width, height, offsetX, offsetY);
		742	+ break;
		743	+ case "2004":
		744	+ data = createFoldWeltTop(width, height, offsetX, offsetY);
		745	+ break;
		746	+ case "2005":
		747	+ data = createRoundedCornersWeltTop(width, height, offsetX, offsetY);
		748	+ break;
		749	+ default:
		750	+ data = createNoneProject();
		751	+ break;
		752	+ }
		753	+ return data;
		754	+ };
		755	+ // 右上方盒舌
		756	+ const createUpperBoxTongueRight = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => {
		757	+ if (!size) return createNoneProject();
		758	+ // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回
		759	+ let data = {};
		760	+ switch (upperBoxTongueType) {
		761	+ case "1001":
		762	+ data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2);
		763	+ break;
		764	+ case 1:
		765	+ data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2);
		766	+ break;
		767	+ default:
		768	+ data = createNoneProject();
		769	+ break;
		770	+ }
		771	+ return data;
		772	+ };
		773	+ // 右上方盒舌
		774	+ const createBottomBoxTongueRight = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => {
		775	+ if (!size) return createNoneProject();
		776	+ // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回
		777	+ let data = {};
		778	+ switch (upperBoxTongueType) {
		779	+ case 0:
		780	+ data = createTopTongue(-deep, offsetX, offsetY, size, -2, 5, 0, true);
		781	+ break;
		782	+ case 1:
		783	+ data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2);
		784	+ break;
		785	+ default:
		786	+ data = createNoneProject();
		787	+ break;
		788	+ }
		789	+ return data;
		790	+ };
		791	+ const createBottomBoxTongueLeft = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => {
		792	+ if (!size) return createNoneProject();
		793	+ // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回
		794	+ let data = {};
		795	+ switch (upperBoxTongueType) {
		796	+ case 0:
		797	+ data = createTopTongue(deep, offsetX, offsetY, size, 2, 5, 1, false);
		798	+ break;
		799	+ case 1:
		800	+ data = createTopTongueType1(deep, offsetX, offsetY, -size, 3, 2);
		801	+ break;
		802	+ default:
		803	+ data = createNoneProject();
		804	+ break;
		805	+ }
		806	+ return data;
		807	+ };
		808	+
		809	+ // 左边贴位
		810	+ const createTrapezoidLeft = (trapezoidLeftType, height, size, offsetX, offsetY) => {
		811	+ if (!size) return createNoneProject();
		812	+ let data = {};
		813	+ switch (trapezoidLeftType) {
		814	+ case "8001":
		815	+ data = createWelt(height, size, offsetX, offsetY);
		816	+ break;
		817	+ case "8002":
		818	+ data = createWelt1(height, size, offsetX, offsetY);
		819	+ break;
		820	+ case "8003":
		821	+ data = createWelt2(height, size, offsetX, offsetY);
		822	+ break;
		823	+ case "8004":
		824	+ data = createWelt3(height, size, offsetX, offsetY);
		825	+ break;
		826	+ default:
		827	+ data = createNoneProject();
		828	+ break;
		829	+ }
		830	+ return data;
		831	+ };
		832	+ // 右边贴位
		833	+ const createTrapezoidRight = (trapezoidLeftType, height, size, offsetX, offsetY) => {
		834	+ if (!size) return createNoneProject();
		835	+ let data = {};
		836	+ switch (trapezoidLeftType) {
		837	+ case "9001":
		838	+ data = createWelt(height, size, offsetX, offsetY);
		839	+ break;
		840	+ case "9002":
		841	+ data = createWelt1(height, size, offsetX, offsetY);
		842	+ break;
		843	+ case "9003":
		844	+ data = createWelt2Right(height, size, offsetX, offsetY);
		845	+ break;
		846	+ case "9004":
		847	+ data = createWelt3Right(height, size, offsetX, offsetY);
		848	+ break;
		849	+ default:
		850	+ data = createNoneProject();
		851	+ break;
		852	+ }
		853	+ return data;
		854	+ };
		855	+ // 左上部件
		856	+ const createDynamicTopLeft = (trapezoidLeftType, width, height, size, offsetX, offsetY) => {
		857	+ if (!size) return createNoneProject();
		858	+ let data = {};
		859	+ switch (trapezoidLeftType) {
		860	+ case "3001":
		861	+ data = createBoxComponentNew(width, height, size, offsetX, offsetY);
		862	+ break;
		863	+ case "3002":
		864	+ data = createBoxComponentNew1(width, height, size, offsetX, offsetY);
		865	+ break;
		866	+ case "3003":
		867	+ data = createBoxComponentNew2(width, height, size, offsetX, offsetY);
		868	+ break;
		869	+ case "3004":
		870	+ data = createBoxComponentNew3(width, height, size, offsetX, offsetY);
		871	+ break;
		872	+ case "3005":
		873	+ data = createBoxComponentNew4(width, height, size, offsetX, offsetY);
		874	+ break;
		875	+ case "3006":
		876	+ data = createBoxComponentNew5(width, height, size, offsetX, offsetY);
		877	+ break;
		878	+ case "4001":
		879	+ data = createBoxComponentNew(width, height, size, offsetX, offsetY);
		880	+ break;
		881	+ case "4002":
		882	+ data = createBoxComponentNew1(width, height, size, offsetX, offsetY);
		883	+ break;
		884	+ case "4003":
		885	+ data = createBoxComponentNew2(width, height, size, offsetX, offsetY);
		886	+ break;
		887	+ case "4004":
		888	+ data = createBoxComponentNew3(width, height, size, offsetX, offsetY);
		889	+ break;
		890	+ case "4005":
		891	+ data = createBoxComponentNew4(width, height, size, offsetX, offsetY);
		892	+ break;
		893	+ case "4006":
		894	+ data = createBoxComponentNew5(width, height, size, offsetX, offsetY);
		895	+ break;
		896	+ case "6001":
		897	+ data = createBoxComponentNew(width, height, size, offsetX, offsetY);
		898	+ break;
		899	+ case "6002":
		900	+ data = createBoxComponentNew1(width, height, size, offsetX, offsetY);
		901	+ break;
		902	+ case "6003":
		903	+ data = createBoxComponentNew2(width, height, size, offsetX, offsetY);
		904	+ break;
		905	+ case "6004":
		906	+ data = createBoxComponentNew3(width, height, size, offsetX, offsetY);
		907	+ break;
		908	+ case "6005":
		909	+ data = createBoxComponentNew4(width, height, size, offsetX, offsetY);
		910	+ break;
		911	+ case "6006":
		912	+ data = createBoxComponentNew5(width, height, size, offsetX, offsetY);
		913	+ break;
		914	+ case "7001":
		915	+ data = createBoxComponentNew(width, height, size, offsetX, offsetY);
		916	+ break;
		917	+ case "7002":
		918	+ data = createBoxComponentNew1(width, height, size, offsetX, offsetY);
		919	+ break;
		920	+ case "7003":
		921	+ data = createBoxComponentNew2(width, height, size, offsetX, offsetY);
		922	+ break;
		923	+ case "7004":
		924	+ data = createBoxComponentNew3(width, height, size, offsetX, offsetY);
		925	+ break;
		926	+ case "7005":
		927	+ data = createBoxComponentNew4(width, height, size, offsetX, offsetY);
		928	+ break;
		929	+ case "7006":
		930	+ data = createBoxComponentNew5(width, height, size, offsetX, offsetY);
		931	+ break;
		932	+ default:
		933	+ data = createNoneProject();
		934	+ break;
		935	+ }
		936	+ return data;
		937	+ };
		938	+ // 右上部件
		939	+ const createDynamicTopRight = (trapezoidLeftType, width, height, size, offsetX, offsetY) => {
		940	+ if (!size) return createNoneProject();
		941	+ let data = {};
		942	+ switch (trapezoidLeftType) {
		943	+ case "6001":
		944	+ data = createBoxComponentNew(width, height, size, offsetX, offsetY);
		945	+ break;
		946	+ case 1:
		947	+ break;
		948	+ default:
		949	+ data = createNoneProject();
		950	+ break;
		951	+ }
		952	+ return data;
		953	+ };
		954	+ // 盒底组件特殊的盒底组件
		955	+ const createBoxBottomComponent = (trapezoidLeftType, width, deep, size, offsetX, offsetY) => {
		956	+ let data = {};
		957	+ switch (trapezoidLeftType) {
		958	+ case "5001":
		959	+ data = createRightAngleBoxBottomComponent(width, deep, size, offsetX, offsetY);
		960	+ break;
		961	+ case "5002":
		962	+ data = createBoxBottomComponent1(width, deep, size, offsetX, offsetY);
		963	+ break;
		964	+ case "5003":
		965	+ data = createBoxBottomComponent2(width, deep, size, offsetX, offsetY);
		966	+ break;
		967	+ case "5004":
		968	+ data = createBoxBottomComponent3(width, deep, size, offsetX, offsetY);
		969	+ break;
		970	+ case "5005":
		971	+ data = createBoxBottomComponent4(width, deep, size, offsetX, offsetY);
		972	+ break;
		973	+ case "5006":
		974	+ data = createBoxBottomComponent5(width, deep, size, offsetX, offsetY);
		975	+ break;
		976	+ case "5007":
		977	+ data = createBoxBottomComponent6(width, deep, size, offsetX, offsetY);
		978	+ break;
		979	+ default:
		980	+ data = createNoneProject();
		981	+ break;
		982	+ }
		983	+ return data;
		984	+ };
		985	+ return (
		986	+ <div
		987	+ id="svgContainer"
		988	+ key={boxKey}
		989	+ ref={svgContainerRef}
		990	+ style={{
		991	+ width: "100%",
		992	+ height: "100%",
		993	+ margin: "0 auto",
		994	+ }}
		995	+ >
		996	+ <svg
		997	+ className={styles.svgContainer}
		998	+ id="dynamicSvg"
		999	+ xmlns="http://www.w3.org/2000/svg"
		1000	+ ref={svgRef}
		1001	+ viewBox="0 0 400 300"
		1002	+ preserveAspectRatio="xMidYMid meet"
		1003	+ width="100%"
		1004	+ height="100%"
		1005	+ />
		1006	+ </div>
		1007	+ );
		1008	+};
		1009	+
		1010	+export default SvgBox;

样式调整

Too many changes to show. Reload with full diff Plain diff Email patch

Too many changes to show.
Reload with full diff Plain diff Email patch