/* eslint-disable */ import React, { useRef, useState, useEffect } from "react"; import styles from "./index.less"; import { createPathElement, createTopTongue, createTopTongueType1, createTrapezoid, createDynamicTop, createNoneProject, createLineWeltTop, createIsoscelesTrapezoidWeltTop, createTrapezoidWeltTop, createFoldWeltTop, createFoldWeltTopLine, createPathElements, createRoundedCornersWeltTop, createRightAngleBoxBottomComponent, createBoxBottomComponent1, createBoxBottomComponent2, createBoxBottomComponent3, createBoxBottomComponent4, createBoxBottomComponent5, createBoxBottomComponent6, createBoxComponentNew, createBoxComponentNew1, createBoxComponentNew2, createBoxComponentNew3, createBoxComponentNew4, createBoxComponentNew5, createBoxComponentNew6, createBoxComponentNew4_1, createWelt, createWelt1, createWelt2, createWelt2Right, createWelt3, createWelt4, createWelt3Right, createWelt4Right, createText, createDoubleArrow, createHorizontalDoubleArrow, createFullTelescope, createBoxComponentNewFull, createBoxComponentNewFull1, createBoxComponentNewFull2, createBoxComponentNewFul3, createBoxComponentNewFul4, createBoxComponentNewFul5, createBoxComponentNewFul6, createPathElementTrapezoid, createPathElementTrapezoids, createPathElementTrapezoidRight, createPathElementTrapezoidBottom, } from "../BoxDesign/createAirplaneBox"; const SvgBox = props => { const svgContainerRef = useRef(null); const svgRef = useRef(null); const [boxKey, setBoxKey] = useState(new Date().getTime()); const { boxList, dSvgBoxWidth, dSvgBoxHeight, iFAngle, tableColum, boxBodyList, tableDataList, showNew } = props; const [width, setWidth] = useState(0); const [height, setHeight] = useState(0); const [deep, setDeep] = useState(0); const [svgType, setSvgType] = useState(1); // 盒身 useEffect(() => { setTimeout(() => { const svg = svgRef.current; if (svg) { initSVG() } }, 0); }, [boxList, svgType]); // 初始化svg const initSVG = () => { // setBoxKey(new Date().getTime()); const svg = svgRef.current; const g = document.createElementNS("http://www.w3.org/2000/svg", "g"); // 创建 svg.innerHTML = ""; if (!(boxList && boxList.length)) return; // 获取盒型类型 let svgTypes; // 获取盒长、盒宽、盒高 let boxLength let boxWidth let boxHeight if (showNew === 0) { if (!(boxBodyList && boxBodyList.length)) return svgTypes = boxList.find(x => x.sName?.trim() === boxBodyList[0].showName)?.type || 1 if (!(tableDataList && tableDataList.length)) return boxLength = Number(boxList.find(x => x.sName?.trim() === tableDataList[0].showName)?.value) || 0; boxWidth = Number(boxList.find(x => x.sName?.trim() === tableDataList[1].showName)?.value) || 0; boxHeight = Number(boxList.find(x => x.sName?.trim() === tableDataList[2].showName)?.value) || 0; } else { svgTypes = boxList.find(x => x.sName === "盒身")?.type || 1 boxLength = Number(boxList.find(x => x.sName === "盒长")?.value) || 0; boxWidth = Number(boxList.find(x => x.sName === "盒宽")?.value) || 0; boxHeight = Number(boxList.find(x => x.sName === "盒高")?.value) || 0; } setSvgType(svgTypes); setWidth(boxLength); setHeight(boxWidth); setDeep(boxHeight); let headLength = 0; let headWidth = 0; let orderLength = 0; let orderWidth = 0; if (svgTypes === "8") { headLength = Number(boxList.find(x => x.sName === "首盒长")?.value) || 0; headWidth = Number(boxList.find(x => x.sName === "首盒宽")?.value) || 0; orderLength = Number(boxList.find(x => x.sName === "次盒长")?.value) || 0; orderWidth = Number(boxList.find(x => x.sName === "次盒宽")?.value) || 0; } // 计算视口宽度和高度 const zbtb = boxList.find(x => x.sName === "左贴边位"); const ybtb = boxList.find(x => x.sName === "右贴边位"); const dZTBW = Number(zbtb?.value) || 0; const dYTBW = Number(ybtb?.value) || 0; const sfhs = boxList.find(x => x.sName === "上方盒舌"); const dSFHS = Number(sfhs?.value) || 0; const hdzj = boxList.find(x => x.sName === "盒底组件"); const xfhs = boxList.find(x => x.sName === "下方盒舌"); const dXFHS = Number(xfhs?.value) || 0; const zsbj = boxList.find(x => x.sName === "左(上)插位组件"); const dZSCW = Number(zsbj?.value) || 0; const ysbj = boxList.find(x => x.sName === "右(上)插位组件"); const dYSCW = Number(ysbj?.value) || 0; const zxbj = boxList.find(x => x.sName === "左(下)插位组件"); const dZXCW = Number(zxbj?.value) || 0; const yxbj = boxList.find(x => x.sName === "右(下)插位组件"); const dYXCW = Number(yxbj?.value) || 0; // 根据选择不同的部件 计算尺寸 // const viewBoxWidth = (boxLength * 2 + boxHeight * 2 + dYTBW + dZTBW); let viewBoxWidth = 0; let max = 0; // 展宽 if (boxList && boxList.length) { // 如果存在部件和盒舌 取最大的 const top = topOffect(boxList, boxLength, boxWidth, boxHeight, props); const bottom = bottomOffect(boxList, boxLength, boxWidth, boxHeight, props); max = Number(top) + Number(bottom); if (Number(svgType) === 8) { const top = topOffect(boxList, headLength, headWidth, props); const bottom = bottomOffect(boxList, orderLength, orderWidth, props); max = Number(top) + Number(bottom); } } let viewBoxHeight = Number(boxHeight) + max; const doubleTotal = 0 // const doubleTotal = // (zbtb?.type === "8009" ? Number(zbtb.sLength !== undefined ? zbtb.sLength : 0) + Number(zbtb.cLength !== undefined ? zbtb.cLength : 0) : 0) + // (ybtb?.type === "9009" ? Number(ybtb.sLength !== undefined ? ybtb.sLength : 0) + Number(ybtb.cLength !== undefined ? ybtb.cLength : 0) : 0); if (Number(svgType) === 1) { // 四面盒身 viewBoxWidth = Number(boxLength) * 2 + Number(boxWidth) * 2 + dZTBW + dYTBW + doubleTotal; } else if (Number(svgType) === 2) { viewBoxWidth = boxLength * 2 + boxWidth + dYTBW + dZTBW + doubleTotal } else if (Number(svgType) === 3) { viewBoxWidth = boxLength + boxWidth * 2 + dYTBW + dZTBW + doubleTotal } else if (Number(svgType) === 4) { // 天地盒 const zxcw = boxList.find(x => x.sName === "左(下)插位组件"); const zscw = boxList.find(x => x.sName === "左(上)插位组件"); const yscw = boxList.find(x => x.sName === "右(上)插位组件"); const yxcw = boxList.find(x => x.sName === "右(下)插位组件"); const zxcwType = zxcw?.type; const zxcwValue = zxcw?.value; const zscwType = zscw?.type; const zscwValue = zscw?.value; const yscwType = yscw?.type; const yscwValue = yscw?.value; const yxcwType = yxcw?.type; const yxcwValue = yxcw?.value; let leftValue = 0; let rightValue = 0; let topValue = 0; let bottomValue = 0; if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") { leftValue = leftValue + Number(zxcwValue) + boxHeight * 2; } else if (zxcwType === "4002" || zxcwType === "4003") { leftValue = leftValue + Number(zxcwValue) + boxHeight; } else if (zxcwType === "4004") { leftValue = leftValue + Number(zxcwValue) + boxHeight * 3; } else if (zxcwType === "4005") { leftValue = boxHeight * 3; } else if (zxcwType === "4009") { leftValue = Number(zxcw?.sLength) + Number(zxcw?.cLength); } if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") { rightValue = rightValue + Number(yscwValue) + boxHeight * 2; } else if (yscwType === "6002" || yscwType === "6003") { rightValue = rightValue + Number(yscwValue) + boxHeight; } else if (yscwType === "6004") { rightValue = rightValue + Number(yscwValue) + boxHeight * 3; } else if (yscwType === "6005") { rightValue = boxHeight * 3; } else if (yscwType === "6009") { rightValue = Number(yscw?.sLength) + Number(yscw?.cLength); } if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") { topValue = topValue + Number(zscwValue) + boxHeight * 2; } else if (zscwType === "3002" || zscwType === "3003") { topValue = topValue + Number(zscwValue) + boxHeight; } else if (zscwType === "3004") { topValue = topValue + Number(zscwValue) + boxHeight * 3; } else if (zscwType === "3005") { topValue = boxHeight * 3; } else if (zscwType === "3009") { topValue = Number(zscw?.sLength) + Number(zscw?.cLength); } if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") { bottomValue = bottomValue + Number(yxcwValue) + boxHeight * 2; } else if (yxcwType === "7002" || yxcwType === "7003") { bottomValue = bottomValue + Number(yxcwValue) + boxHeight; } else if (yxcwType === "7004") { bottomValue = bottomValue + Number(yxcwValue) + boxHeight * 3; } else if (yxcwType === "7005") { bottomValue = boxHeight * 3; } else if (yxcwType === "7009") { bottomValue = Number(yxcw?.sLength) + Number(yxcw?.cLength); } viewBoxWidth = Number(boxLength) + leftValue + rightValue; viewBoxHeight = Number(boxWidth) + topValue + bottomValue; } else if (Number(svgType) === 5) { viewBoxWidth = (boxHeight + boxWidth) * 2 + dYTBW + dZTBW + doubleTotal viewBoxHeight = boxLength + max; } else if (Number(svgType) === 6) { viewBoxWidth = boxWidth + 2; viewBoxHeight = boxLength + 2; } else if (Number(svgType) === 7) { boxHeight = boxWidth; const zxcw = boxList.find(x => x.sName === "左(下)插位组件"); const zscw = boxList.find(x => x.sName === "左(上)插位组件"); const yscw = boxList.find(x => x.sName === "右(上)插位组件"); const yxcw = boxList.find(x => x.sName === "右(下)插位组件"); const zxcwType = zxcw?.type; const zxcwValue = zxcw?.value; const zscwType = zscw?.type; const zscwValue = zscw?.value; const yscwType = yscw?.type; const yscwValue = yscw?.value; const yxcwType = yxcw?.type; const yxcwValue = yxcw?.value; let leftValue = 0; let rightValue = 0; let topValue = 0; let bottomValue = 0; if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") { leftValue = leftValue + Number(zxcwValue) + boxHeight * 2; } else if (zxcwType === "4002" || zxcwType === "4003") { leftValue = leftValue + Number(zxcwValue) + boxHeight; } else if (zxcwType === "4004") { leftValue = leftValue + Number(zxcwValue) + boxHeight * 3; } else if (zxcwType === "4005") { leftValue = boxHeight * 3; } if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") { rightValue = rightValue + Number(yscwValue) + boxHeight * 2; } else if (yscwType === "6002" || yscwType === "6003") { rightValue = rightValue + Number(yscwValue) + boxHeight; } else if (yscwType === "6004") { rightValue = rightValue + Number(yscwValue) + boxHeight * 3; } else if (yscwType === "6005") { rightValue = boxHeight * 3; } if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") { topValue = topValue + Number(zscwValue) + boxHeight * 2; } else if (zscwType === "3002" || zscwType === "3003") { topValue = topValue + Number(zscwValue) + boxHeight; } else if (zscwType === "3004") { topValue = topValue + Number(zscwValue) + boxHeight * 3; } else if (zscwType === "3005") { topValue = boxHeight * 3; } if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") { bottomValue = bottomValue + Number(yxcwValue) + boxHeight * 2; } else if (yxcwType === "7002" || yxcwType === "7003") { bottomValue = bottomValue + Number(yxcwValue) + boxHeight; } else if (yxcwType === "7004") { bottomValue = bottomValue + Number(yxcwValue) + boxHeight * 3; } else if (yxcwType === "7005") { bottomValue = boxHeight * 3; } viewBoxWidth = Number(boxLength) + leftValue + rightValue; viewBoxHeight = Number(boxWidth) + topValue + bottomValue; // viewBoxWidth = boxWidth + leftValue + rightValue; // viewBoxHeight = boxLength + dZSCW + dYXCW; } else if (Number(svgType) === 8) { const getTop = (item, offset = 0) => { if (!item || !item?.type) return 0; const key = Number(item.type - offset); if (!Number.isFinite(key)) return 0; const value = Number(item?.value) || 0; const headWidthNum = Number(headWidth) || 0; switch (key) { case 10001: return headWidthNum + value; case 10002: case 10003: return value; case 10004: return value + headWidthNum * 2; case 10005: return headWidthNum * 2; case 10006: case 10007: return value + headWidthNum; default: return 0; } }; const topLeft = getTop(boxList.find(x => x.sName === "左上插位组件")); const topRight = getTop( boxList.find(x => x.sName === "右上插位组件"), 2000 ); const topLength = headLength + topLeft + topRight; const bottomLeft = getTop( boxList.find(x => x.sName === "左插位组件"), 3000 ); const bottomRight = getTop( boxList.find(x => x.sName === "右插位组件"), 5000 ); const bottomLength = orderLength * 2 + bottomLeft + bottomRight; const leftOffect = boxList.find(x => x.sName === "左偏移")?.value || 0; const rightOffect = boxList.find(x => x.sName === "右偏移")?.value || 0; viewBoxWidth = Math.max(topLength, bottomLength) + Number(leftOffect) + Number(rightOffect); viewBoxHeight = Number(headWidth) + Number(orderWidth) + max; } else if (Number(svgType) === 9) { } // 计算缩放比例 let scale = 1; if (props.showNew === 0) { if (viewBoxWidth > (dSvgBoxWidth ? dSvgBoxWidth : 500) || viewBoxHeight > (dSvgBoxHeight ? dSvgBoxHeight : 250)) { const widthScale = (dSvgBoxWidth ? dSvgBoxWidth : 500) / viewBoxWidth; const heightScale = (dSvgBoxHeight ? dSvgBoxHeight : 250) / viewBoxHeight; scale = Math.min(widthScale, heightScale); let ySvg = dSvgBoxHeight ? topOffect(boxList, boxLength, boxWidth, boxHeight, props) * scale : topOffect(boxList, boxLength, boxWidth, boxHeight, props) * scale; let bottom = 0; let xSvg = 0; if (Number(svgType) !== 8) { bottom = bottomOffect(boxList, boxLength, boxWidth, boxHeight, props); } else { bottom = bottomOffect(boxList, orderLength, orderWidth, props); } if (Number(svgType) === 4) { } else if (Number(svgType) === 8) { ySvg = topOffect(boxList, headLength, headWidth, props) * scale; } ySvg = ySvg + 50 * scale; if (Number(svgType) === 7) { xSvg = scaledWidth + dZXCW * scale; } else if (Number(svgType) === 8) { const leftOffect = boxList.find(x => x.sName === "左偏移")?.value || 0; // 计算首盒部件与次盒部件尺寸 const getTop = (item, offset = 0) => { // 确保 headWidth 和 item?.value 是有效的数字 const headWidthNum = Number(headWidth) || 0; const itemValue = Number(item?.value) || 0; // 确保 item?.type 是数字 const type = Number(item?.type); if (!Number.isFinite(type)) return 0; const key = type - offset; // 使用 switch-case 替代 map switch (key) { case 10001: return headWidthNum + itemValue; case 10002: case 10003: return itemValue; case 10004: return itemValue + headWidthNum * 2; case 10005: return headWidthNum * 2; case 10006: case 10007: return itemValue + headWidthNum; default: return 0; // 默认返回值，避免 unreachable } }; const topLeft = getTop(boxList.find(x => x.sName === "左上插位组件")); const topLength = headLength + topLeft; const bottomLeft = getTop( boxList.find(x => x.sName === "左插位组件"), 3000 ); const bottomLength = headLength / 2 - orderLength + -bottomLeft - Number(leftOffect); xSvg = Math.max(Math.abs(bottomLength), Math.abs(topLength)); } else if (Number(svgType) === 4) { xSvg = (boxHeight * 2 + boxLength) / 2; } else if (Number(svgType) === 9) { // const data = calculateCupDimensionsAndStart(boxLength, boxWidth, boxHeight, g) // xSvg = (data?.startX + 100) * scale // ySvg = (data?.startDistance + 100) * scale } else { xSvg = zbtb?.value; } if (zbtb?.type === "8009") { xSvg = doubleTotal * scale; } svg.setAttribute( "viewBox", `${-(xSvg * scale)} ${dSvgBoxWidth ? (dSvgBoxWidth === 100 ? -ySvg : 0) : -ySvg} ${dSvgBoxWidth ? dSvgBoxWidth + ySvg : 500} ${dSvgBoxHeight ? dSvgBoxHeight - ySvg - bottom * scale : 250 + ySvg }` ); svg.setAttribute("width", `${dSvgBoxWidth ? dSvgBoxWidth : 500}px`); svg.setAttribute("height", `${dSvgBoxHeight ? dSvgBoxHeight : 250}px`); svgContainerRef.current.style.width = `${dSvgBoxWidth ? dSvgBoxWidth : 500}px`; svgContainerRef.current.style.height = `${dSvgBoxHeight ? dSvgBoxHeight : 250}px`; } else { scale = 0.5; let ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight, props) * scale; if (Number(svgType) === 4) { } else if (Number(svgType) === 8) { ySvg = topOffect(boxList, headLength, headWidth, props) * scale; } ySvg = Number(ySvg) + 50 * scale; let xSvg = 0; if (Number(svgType) === 7) { xSvg = scaledWidth + dZXCW * scale; } else if (Number(svgType) === 8) { const leftOffect = boxList.find(x => x.sName === "左偏移")?.value || 0; // 计算首盒部件与次盒部件尺寸 const getTop = (item, offset = 0) => { // 确保 headWidth 和 item?.value 是有效的数字 const headWidthNum = Number(headWidth) || 0; const itemValue = Number(item?.value) || 0; // 确保 item?.type 是数字 const type = Number(item?.type); if (!Number.isFinite(type)) return 0; const key = type - offset; // 使用 switch-case 替代 map switch (key) { case 10001: return headWidthNum + itemValue; case 10002: case 10003: return itemValue; case 10004: return itemValue + headWidthNum * 2; case 10005: return headWidthNum * 2; case 10006: case 10007: return itemValue + headWidthNum; default: return 0; // 默认返回值，避免 unreachable } }; const topLeft = getTop(boxList.find(x => x.sName === "左上插位组件")); const topLength = headLength + topLeft; const bottomLeft = getTop( boxList.find(x => x.sName === "左插位组件"), 3000 ); const bottomLength = headLength / 2 - orderLength + -bottomLeft - Number(leftOffect); xSvg = Math.max(Math.abs(bottomLength), Math.abs(topLength)); } else if (Number(svgType) === 4) { xSvg = (boxHeight * 2 + boxLength) / 2; } else if (Number(svgType) === 9) { // const data = calculateCupDimensionsAndStart(boxLength, boxWidth, boxHeight, g) // xSvg = (data?.startX + 150) * scale // ySvg = (data?.startDistance + 100) * scale } else { xSvg = zbtb?.value; } if (!dSvgBoxWidth) { xSvg = (viewBoxWidth / 2 + 200) * scale; } svg.setAttribute( "viewBox", `${-xSvg} ${dSvgBoxWidth ? -0 : -ySvg} ${dSvgBoxWidth ? dSvgBoxWidth : 500} ${dSvgBoxHeight ? dSvgBoxHeight : 250}` ); svg.setAttribute("width", `${dSvgBoxWidth ? dSvgBoxWidth : 500}px`); svg.setAttribute("height", `${dSvgBoxHeight ? dSvgBoxHeight : 250}px`); svgContainerRef.current.style.width = `${dSvgBoxWidth ? dSvgBoxWidth : 500}px`; svgContainerRef.current.style.height = `${dSvgBoxHeight ? dSvgBoxHeight : 250}px`; } } else if (props.showNew === 1) { let ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight, props) * scale; let leftSize = 0; let topSize = 0; if (Number(svgType) === 4) { const zxcw = boxList.find(x => x.sName === "左(下)插位组件"); const zxcwType = zxcw?.type; const zxcwValue = zxcw?.value; if (zxcwType === "4001" || zxcwType === "4006") { leftSize = Number(zxcwValue) + boxHeight * 2; } else if (zxcwType === "4002" || zxcwType === "4003") { leftSize = Number(zxcwValue) + boxHeight; } else if (zxcwType === "4004") { leftSize = Number(zxcwValue) + boxHeight * 3; } else if (zxcwType === "4005") { leftSize = Number(zxcwValue) + boxHeight * 3; } const zscw = boxList.find(x => x.sName === "左(上)插位组件"); const zscwType = zscw?.type; const zscwValue = zscw?.value; if (zscwType === "3001" || zscwType === "3006") { topSize = Number(zscwValue) + boxHeight * 2; } else if (zscwType === "3002" || zscwType === "3003") { topSize = Number(zscwValue) + boxHeight; } else if (zscwType === "3004") { topSize = Number(zscwValue) + boxHeight * 3; } else if (zscwType === "3005") { topSize = Number(zscwValue) + boxHeight * 3; } ySvg = topSize; } else if (Number(svgType) === 6) { leftSize = 0; } else if (Number(svgType) === 8) { const leftOffect = boxList.find(x => x.sName === "左偏移")?.value || 0; // 计算首盒部件与次盒部件尺寸 const getTop = (item, offset = 0) => { if (!item) return 0; const type = Number(item.type); const key = type - offset; const headWidthNum = Number(headWidth) || 0; const itemValue = Number(item.value) || 0; switch (key) { case 10001: return headWidthNum + itemValue; case 10002: case 10003: return itemValue; case 10004: return itemValue + headWidthNum * 2; case 10005: return headWidthNum * 2; case 10006: case 10007: return itemValue + headWidthNum; default: return 0; } }; const topLeft = getTop(boxList.find(x => x.sName === "左上插位组件")); const topLength = topLeft; const bottomLeft = getTop( boxList.find(x => x.sName === "左插位组件"), 3000 ); const bottomLength = headLength / 2 - orderLength + -bottomLeft - Number(leftOffect); leftSize = Math.max(Math.abs(bottomLength), Math.abs(topLength)); ySvg = topOffect(boxList, headLength, headWidth, props); } else if (Number(svgType) === 9) { // const data = calculateCupDimensionsAndStart(boxLength, boxWidth, boxHeight, g) // leftSize = -data?.startX // ySvg = (data?.startDistance) * scale } else { leftSize = zbtb?.value; if (zbtb?.type === "8009") { leftSize = (zbtb?.type === "8009" ? Number(zbtb.sLength !== undefined ? zbtb.sLength : 0) + Number(zbtb.cLength !== undefined ? zbtb.cLength : 0) : 0); } } svg.setAttribute("viewBox", `${-(leftSize * scale) || 0} ${-ySvg} ${viewBoxWidth + 2} ${viewBoxHeight + 2}`); svg.setAttribute("width", `${viewBoxWidth}px`); svg.setAttribute("height", `${viewBoxHeight}px`); svgContainerRef.current.style.width = `${viewBoxWidth}px`; svgContainerRef.current.style.height = `${viewBoxHeight}px`; const scaleX = (dSvgBoxWidth ? dSvgBoxWidth : 450) / viewBoxWidth; const scaleY = (dSvgBoxHeight ? dSvgBoxHeight : 200) / viewBoxHeight; svgContainerRef.current.style.transform = `scale(${scaleX >= 1 ? 1 : scaleX}, ${scaleY >= 1 ? 1 : scaleY})`; svgContainerRef.current.style.transformOrigin = "top left"; svgContainerRef.current.style.paddingTop = dSvgBoxWidth ? "0" : "25px"; if (Number(svgType) !== 9) { svgContainerRef.current.style.margin = `0 auto`; } else { svgContainerRef.current.style.margin = `0`; } svgContainerRef.current.style.backgroundColor = props.isMobile ? "#EDF4FF" : ""; // svgContainerRef.current.style.position = 'absolute'; // svgContainerRef.current.style.left = '50%'; // svgContainerRef.current.style.top = '50%'; // svgContainerRef.current.style.transform = 'translate(-50%, -50%)'; } else if (props.showNew === 2) { // g.setAttribute("transform", `rotate(${iFAngle, dSvgBoxWidth/2,dSvgBoxHeight*2})`); let ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight, props) * scale; let leftSize = 0; let topSize = 0; if (Number(svgType) === 4) { const zxcw = boxList.find(x => x.sName === "左(下)插位组件"); const zxcwType = zxcw?.type; const zxcwValue = zxcw?.value; if (zxcwType === "4001" || zxcwType === "4006") { leftSize = Number(zxcwValue) + boxHeight * 2; } else if (zxcwType === "4002" || zxcwType === "4003") { leftSize = Number(zxcwValue) + boxHeight; } else if (zxcwType === "4004") { leftSize = Number(zxcwValue) + boxHeight * 3; } else if (zxcwType === "4005") { leftSize = Number(zxcwValue) + boxHeight * 3; } const zscw = boxList.find(x => x.sName === "左(上)插位组件"); const zscwType = zscw?.type; const zscwValue = zscw?.value; if (zscwType === "3001" || zscwType === "3006") { topSize = Number(zscwValue) + boxHeight * 2; } else if (zscwType === "3002" || zscwType === "3003") { topSize = Number(zscwValue) + boxHeight; } else if (zscwType === "3004") { topSize = Number(zscwValue) + boxHeight * 3; } else if (zscwType === "3005") { topSize = Number(zscwValue) + boxHeight * 3; } ySvg = topSize; } else if (Number(svgType) === 6) { leftSize = 0; } else if (Number(svgType) === 8) { const leftOffect = boxList.find(x => x.sName === "左偏移")?.value || 0; // 计算首盒部件与次盒部件尺寸 const getTop = (item, offset = 0) => { if (!item || !item.type) return 0; const key = item.type - offset; const itemValue = Number(item.value) || 0; switch (key) { case 10001: return headWidth + itemValue; case 10002: case 10003: return itemValue; case 10004: return itemValue + headWidth * 2; case 10005: return headWidth * 2; case 10006: case 10007: return itemValue + headWidth; default: return 0; } }; const topLeft = getTop(boxList.find(x => x.sName === "左上插位组件")); const topLength = topLeft; const bottomLeft = getTop( boxList.find(x => x.sName === "左插位组件"), 3000 ); const bottomLength = headLength / 2 - orderLength + -bottomLeft - Number(leftOffect); leftSize = Math.max(Math.abs(bottomLength), Math.abs(topLength)); ySvg = topOffect(boxList, headLength, headWidth, props); } else if (Number(svgType) === 9) { // const data = calculateCupDimensionsAndStart(boxLength, boxWidth, boxHeight, g) // leftSize = -data?.startX // ySvg = (data?.startDistance) * scale } else { leftSize = zbtb?.value; } svg.setAttribute("viewBox", `${-(leftSize * scale || 0)} ${-ySvg} ${dSvgBoxWidth} ${dSvgBoxHeight}`); svg.setAttribute("width", `${dSvgBoxWidth}px`); svg.setAttribute("height", `${dSvgBoxHeight}px`); svgContainerRef.current.style.width = `${dSvgBoxWidth}px`; svgContainerRef.current.style.height = `${dSvgBoxHeight}px`; } const scaledWidth = boxLength * scale; const scaledHeight = boxWidth * scale; const scaledDeep = boxHeight * scale; const scales = dSvgBoxWidth ? scale : 1; // 根据盒型类型生成不同的盒身 四面盒身 if (Number(svgType) === 1) { const rectangles = [ { x: 0, y: 0, width: scaledWidth, height: scaledDeep }, { x: 0 + scaledWidth, y: 0, width: scaledHeight, height: scaledDeep }, { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep }, { x: 0 + scaledWidth * 2 + scaledHeight, y: 0, width: scaledHeight, height: scaledDeep }, ]; rectangles.forEach(rect => { g.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); }); svg.appendChild(g); let pathList = []; // 上方盒舌 if (sfhs?.type && sfhs.type === "1009") { const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = sfhs; // 通用函数：添加矩形层（支持单双数量、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledHeight - totalLength) / 2 + numOffset + scaledWidth, y: -totalWidth + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledHeight - totalLength * 2) / 2 - numOffset / 2 + scaledWidth, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledHeight - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledWidth, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; const addLayers = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledHeight - totalLength) / 2 + numOffset + scaledWidth + scaledWidth + scaledHeight, y: -totalWidth + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledHeight - totalLength * 2) / 2 - numOffset / 2 + scaledWidth + scaledWidth + scaledHeight, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledHeight - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledWidth + scaledWidth + scaledHeight, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); addLayers({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayers({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); // 将 group 添加到 svg svg.appendChild(g); } else { // 非 1009 类型的兜底逻辑 pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth, 0)); pathList.push(createUpperBoxTongueLeft(sfhs?.type, -scaledHeight, -dSFHS * scale, scaledWidth * 2 + scaledHeight * 2, 0)); if (sfhs?.type && dSFHS) { pathList.push(createText(scaledWidth + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); pathList.push(createText(scaledWidth * 2 + scaledHeight + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); } } // 盒底组件 if (hdzj && hdzj.type) { // 盒底组件 pathList.push(createBoxBottomComponent(hdzj?.type, scaledWidth, scaledHeight, Number(hdzj?.value) * scale, 0, scaledDeep)); pathList.push(createText(scaledWidth / 2, scaledDeep + (Number(hdzj?.value) / 2) * scales, 10 * scales, Number(hdzj?.value))); } else { // 下方盒舌 if (xfhs?.type && xfhs.type === "2009") { const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = xfhs; // 通用函数：添加矩形层（支持单双数量、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidBottom : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledHeight - totalLength) / 2 + numOffset + scaledWidth, y: scaledDeep - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledHeight - totalLength * 2) / 2 - numOffset / 2 + scaledWidth, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledHeight - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledWidth, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; const addLayers = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidBottom : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledHeight - totalLength) / 2 + numOffset + scaledWidth + scaledWidth + scaledHeight, y: scaledDeep - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledHeight - totalLength * 2) / 2 - numOffset / 2 + scaledWidth + scaledWidth + scaledHeight, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledHeight - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledWidth + scaledWidth + scaledHeight, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); addLayers({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayers({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); // 将 group 添加到 svg svg.appendChild(g); } else { pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth, scaledDeep)); pathList.push(createUpperBoxTongueLeft(xfhs?.type, -scaledHeight, dXFHS * scale, scaledWidth * 2 + scaledHeight * 2, scaledDeep)); if (xfhs?.type && dXFHS) { pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 10) * scales, 10 * scales, dXFHS)); pathList.push(createText(scaledWidth * 2 + scaledHeight + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 10) * scales, 10 * scales, dXFHS)); } } } // 左边贴边 if (zbtb?.type === "8009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = zbtb; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoids : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: -totalLength - yExtraOffset, y: (scaledDeep - totalWidth) / 2 + numOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; const halfWidth = totalWidth * 2; rectangles = [ { x: -totalLength - yExtraOffset, y: (scaledDeep - halfWidth) / 2 - numOffset / 2, width: halfLength, height: totalWidth, }, { x: -totalLength - yExtraOffset, y: (scaledDeep - halfWidth) / 2 + numOffset / 2 + totalWidth, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: Number(sLength) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0, dSFHS * scale, dXFHS * scale)); if (zbtb?.type && dZTBW) { pathList.push(createText(-dZTBW * 0.4, scaledDeep / 2, 10 * scales, dZTBW)); } } // 右边贴边 if (ybtb?.type === "9009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = ybtb; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidRight : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: scaledWidth * 2 + scaledHeight * 2 + yExtraOffset, y: (scaledDeep - totalWidth) / 2 + numOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; const halfWidth = totalWidth * 2; rectangles = [ { x: scaledWidth * 2 + scaledHeight * 2 + yExtraOffset, y: (scaledDeep - halfWidth) / 2 - numOffset / 2, width: halfLength, height: totalWidth, }, { x: scaledWidth * 2 + scaledHeight * 2 + yExtraOffset, y: (scaledDeep - halfWidth) / 2 + numOffset / 2 + totalWidth, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: Number(sLength) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push( createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight * 2, 0, dSFHS * scale, dXFHS * scale) ); if (ybtb?.type && dYTBW) { pathList.push(createText(scaledWidth * 2 + scaledHeight * 2 + dYTBW * 0.4, scaledDeep / 2, 10 * scales, dYTBW)); } } // 左上部件 if (zsbj?.type && zsbj?.type === "3009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = zsbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset, y: -totalWidth + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2 + halfLength, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0)); if ((zsbj?.type === "3001" && zsbj?.value) || (zsbj?.type === "3006" && zsbj?.value) || (zsbj?.type === "3007" && zsbj?.value)) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); // 插位值 pathList.push(createText(scaledWidth / 2, -scaledHeight - dZSCW / 2 + 4, 10 * scales, dZSCW)); } else if (zsbj?.type === "3002" && dZSCW) { pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW)); } else if (zsbj?.type === "3003" && dZSCW) { pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW)); } else if (zsbj?.type === "3004" && zsbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); pathList.push(createText(scaledWidth * 0.3, -(scaledHeight * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW)); } else if (zsbj?.type === "3005" && zsbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, -scaledHeight / 2, scales)); pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); } else if (zsbj?.type && dZSCW) { pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW)); } } // 右上部件 if (ysbj?.type && ysbj?.type === "6009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = ysbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset + scaledHeight + scaledWidth, y: -totalWidth + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2 + scaledHeight + scaledWidth, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledHeight + scaledWidth, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { // 右上部件 pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0)); if ((ysbj?.type === "6001" && ysbj?.value) || (ysbj?.type === "6006" && ysbj?.value) || (ysbj?.type === "6007" && ysbj?.value)) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2, 10 * scales, dYSCW)); } else if (ysbj?.type === "6002" && dYSCW) { pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); } else if (ysbj?.type === "6003" && dYSCW) { pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); } else if (ysbj?.type === "6004" && ysbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); pathList.push( createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W") ); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW)); } else if (ysbj?.type === "6005" && ysbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales)); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); pathList.push( createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W") ); } else if (ysbj?.type && dYSCW) { pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); } } // 左下部件- if (!(hdzj && hdzj.type)) { if (zxbj?.type && zxbj?.type === "4009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = zxbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset, y: scaledDeep - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2 + halfLength, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep)); if ((zxbj?.type === "4001" && zxbj?.value) || (zxbj?.type === "4006" && zxbj?.value) || (zxbj?.type === "4007" && zxbj?.value)) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); pathList.push(createText(scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2 - 4, 10 * scales, dZXCW)); } else if (zxbj?.type === "4002" && dZXCW) { pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); } else if (zxbj?.type === "4003" && dZXCW) { pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); } else if (zxbj?.type === "4004" && zxbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); pathList.push(createText(scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); pathList.push(createText(scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW)); } else if (zxbj?.type === "4005" && zxbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); pathList.push(createText(scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); pathList.push(createText(scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); } else if (zxbj?.type && dZXCW) { pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); } } } // 右下部件 if (!(hdzj && hdzj.type)) { if (yxbj?.type && yxbj?.type === "7009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = yxbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset + scaledHeight + scaledWidth, y: scaledDeep - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2 + scaledHeight + scaledWidth, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledHeight + scaledWidth, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW * scale, scaledWidth + scaledHeight, scaledDeep)); if ((yxbj?.type === "7001" && yxbj?.value) || (yxbj?.type === "7006" && yxbj?.value) || (yxbj?.type === "7007" && yxbj?.value)) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + scaledHeight + dYXCW / 2, 10 * scales, dYXCW)); } else if (yxbj?.type === "7004" && yxbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 - 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); pathList.push( createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales) ); pathList.push( createText( scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W" ) ); pathList.push( createText(scaledWidth + scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dYXCW / 2 - 4, 10 * scales, dYXCW) ); } else if (yxbj?.type === "7005" && yxbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); pathList.push( createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales) ); pathList.push( createText( scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W" ) ); } else if (dYXCW && yxbj?.type) { pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + dYXCW / 2 - 4, 10 * scales, dYXCW)); } } } // 纵向 D if (scaledDeep && scaledWidth && scaledHeight) { pathList.push(createDoubleArrow(scaledDeep, scaledWidth + scaledHeight + scaledWidth / 2, scaledDeep / 2, scales)); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth / 2 + 10 * scales, scaledDeep / 2, 10 * scales, "D")); // 横向 L pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledDeep / 2, scales)); pathList.push(createText(scaledWidth / 2, scaledDeep / 2 + 10 * scales, 10 * scales, "L")); // W pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledWidth + scaledHeight / 2, scaledDeep * 0.3, scale)); pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep * 0.3 + 10 * scales, 10 * scales, "W")); } pathList.forEach(x => { g.appendChild(x); }); svg.appendChild(g); } else if (Number(svgType) === 2) { // 单折盒身 const rectangles = [ { x: 0, y: 0, width: scaledWidth, height: scaledDeep }, { x: 0 + scaledWidth, y: 0, width: scaledHeight, height: scaledDeep }, { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep }, ]; rectangles.forEach(rect => { g.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); }); svg.appendChild(g); let pathList = []; // 上方盒舌 if (sfhs?.type && sfhs.type === "1009") { const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = sfhs; // 通用函数：添加矩形层（支持单双数量、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledHeight - totalLength) / 2 + numOffset + scaledWidth, y: -totalWidth + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledHeight - totalLength * 2) / 2 - numOffset / 2 + scaledWidth, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledHeight - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledWidth, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); // 将 group 添加到 svg svg.appendChild(g); } else { pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth, 0)); if (sfhs?.type && dSFHS) { pathList.push(createText(scaledWidth + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); } } // 下方盒舌 if (xfhs?.type && xfhs.type === "2009") { const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = xfhs; // 通用函数：添加矩形层（支持单双数量、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidBottom : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledHeight - totalLength) / 2 + numOffset + scaledWidth, y: scaledDeep - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledHeight - totalLength * 2) / 2 - numOffset / 2 + scaledWidth, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledHeight - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledWidth, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); // 将 group 添加到 svg svg.appendChild(g); } else { pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth, scaledDeep)); if (xfhs?.type && dXFHS) { pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dSFHS)); } } // 左边贴边 if (zbtb?.type === "8009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = zbtb; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoids : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: -totalLength - yExtraOffset, y: (scaledDeep - totalWidth) / 2 + numOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; const halfWidth = totalWidth * 2; rectangles = [ { x: -totalLength - yExtraOffset, y: (scaledDeep - halfWidth) / 2 - numOffset / 2, width: halfLength, height: totalWidth, }, { x: -totalLength - yExtraOffset, y: (scaledDeep - halfWidth) / 2 + numOffset / 2 + totalWidth, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: Number(sLength) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0, dSFHS * scale, dXFHS * scale)); if (zbtb?.type && dZTBW) { pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW)); } } // 右边贴边 if (ybtb?.type === "9009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = ybtb; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidRight : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: scaledWidth * 2 + scaledHeight + yExtraOffset, y: (scaledDeep - totalWidth) / 2 + numOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; const halfWidth = totalWidth * 2; rectangles = [ { x: scaledWidth * 2 + scaledHeight + yExtraOffset, y: (scaledDeep - halfWidth) / 2 - numOffset / 2, width: halfLength, height: totalWidth, }, { x: scaledWidth * 2 + scaledHeight + yExtraOffset, y: (scaledDeep - halfWidth) / 2 + numOffset / 2 + totalWidth, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: Number(sLength) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight, 0, dSFHS * scale, dXFHS * scale)); if (ybtb?.type && dYTBW) { pathList.push(createText(scaledWidth * 2 + scaledHeight + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW)); } } // 左上部件 if (zsbj?.type && zsbj?.type === "3009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = zsbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset, y: -totalWidth + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2 + halfLength, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0)); if ((zsbj?.type === "3001" && zsbj?.value) || (zsbj?.type === "3006" && zsbj?.value) || (zsbj?.type === "3007" && zsbj?.value)) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); pathList.push(createText(scaledWidth / 2, -scaledHeight - dZSCW / 2 + 4, 10 * scales, dZSCW)); } else if (zsbj?.type === "3004" && zsbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); pathList.push(createText(scaledWidth * 0.3, -(scaledHeight * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW)); } else if (zsbj?.type === "3005" && zsbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, -scaledHeight / 2, scales)); pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); } else if (zsbj?.type && dZSCW) { pathList.push(createText(scaledWidth / 2, -(dZSCW / 2 - 5), 10 * scales, dZSCW)); } } // 右上部件 if (ysbj?.type && ysbj?.type === "6009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = ysbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset + scaledHeight + scaledWidth, y: -totalWidth + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2 + scaledHeight + scaledWidth, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledHeight + scaledWidth, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0)); if ((ysbj?.type === "6001" && ysbj?.value) || (ysbj?.type === "6006" && ysbj?.value) || (ysbj?.type === "6007" && ysbj?.value)) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2, 10 * scales, dYSCW)); } else if (ysbj?.type === "6004" && ysbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); pathList.push( createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W") ); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW)); } else if (ysbj?.type === "6005" && ysbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales)); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); pathList.push( createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W") ); pathList.push( createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W") ); } else if (ysbj?.type && dYSCW) { pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); } } // 左下部件- if (zxbj?.type && zxbj?.type === "4009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = zxbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidBottom : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset, y: scaledDeep - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2 + halfLength, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep)); if ((zxbj?.type === "4001" && zxbj?.value) || (zxbj?.type === "4006" && zxbj?.value) || (zxbj?.type === "4007" && zxbj?.value)) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); pathList.push(createText(scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2, 10 * scales, dZXCW)); } else if (zxbj?.type === "4004" && zxbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); pathList.push(createText(scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); pathList.push(createText(scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW)); } else if (zxbj?.type === "4005" && zxbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); pathList.push(createText(scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); pathList.push(createText(scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); } else if (zxbj?.type && dZXCW) { pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); } } // 右下部件 if (yxbj?.type && yxbj?.type === "7009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = yxbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidBottom : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset + scaledHeight + scaledWidth, y: scaledDeep - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2 + scaledHeight + scaledWidth, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledHeight + scaledWidth, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW, scaledWidth + scaledHeight, scaledDeep)); if ((yxbj?.type === "7001" && yxbj?.value) || (yxbj?.type === "7006" && yxbj?.value) || (yxbj?.type === "7007" && yxbj?.value)) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + scaledHeight + dYXCW / 2 - 4, 10 * scales, dYXCW)); } else if (yxbj?.type === "7004" && yxbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 - 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); pathList.push( createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales) ); pathList.push( createText( scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W" ) ); pathList.push( createText(scaledWidth + scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dYXCW / 2 - 4, 10 * scales, dYXCW) ); } else if (yxbj?.type === "7005" && yxbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); pathList.push( createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales) ); pathList.push( createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scale, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scale, "W") ); } else if (dYXCW && yxbj?.type) { pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + dYXCW / 2 - 4, 10 * scales, dYXCW)); } } if (scaledDeep && scaledWidth && scaledHeight) { // 纵向 D pathList.push(createDoubleArrow(scaledDeep, scaledWidth + scaledHeight + scaledWidth / 2, scaledDeep / 2, scales)); pathList.push(createText(scaledWidth + scaledHeight + scaledWidth / 2 + 10, scaledDeep / 2, 10 * scales, "D")); // 横向 L pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledDeep / 2, scales)); pathList.push(createText(scaledWidth / 2, scaledDeep / 2 + 10, 10 * scales, "L")); // W pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledWidth + scaledHeight / 2, scaledDeep * 0.3, scales)); pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep * 0.3 + 10, 10 * scales, "W")); } pathList.forEach(x => { g.appendChild(x); }); svg.appendChild(g); } else if (Number(svgType) === 3) { // 双折盒 const rectangles = [ { x: 0, y: 0, width: scaledHeight, height: scaledDeep }, { x: 0 + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep }, { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledHeight, height: scaledDeep }, ]; rectangles.forEach(rect => { g.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); }); svg.appendChild(g); let pathList = []; // 上方盒舌 if (sfhs?.type && sfhs.type === "1009") { const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = sfhs; // 通用函数：添加矩形层（支持单双数量、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledHeight - totalLength) / 2 + numOffset, y: -totalWidth + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledHeight - totalLength * 2) / 2 - numOffset / 2, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledHeight - totalLength * 2) / 2 + numOffset / 2 + halfLength, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; const addLayers = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledHeight - totalLength) / 2 + numOffset + scaledWidth + scaledHeight, y: -totalWidth + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledHeight - totalLength * 2) / 2 - numOffset / 2 + scaledWidth + scaledHeight, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledHeight - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledWidth + scaledHeight, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); addLayers({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayers({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); // 将 group 添加到 svg svg.appendChild(g); } else { pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, 0, 0)); pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth + scaledHeight, 0)); if (sfhs?.type && dSFHS) { pathList.push(createText(scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); pathList.push(createText(scaledWidth + scaledHeight + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); } } // 下方盒舌 if (xfhs?.type && xfhs.type === "2009") { const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = xfhs; // 通用函数：添加矩形层（支持单双数量、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidBottom : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledHeight - totalLength) / 2 + numOffset, y: scaledDeep - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledHeight - totalLength * 2) / 2 - numOffset / 2, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledHeight - totalLength * 2) / 2 + numOffset / 2 + halfLength, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; const addLayers = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidBottom : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledHeight - totalLength) / 2 + numOffset + scaledWidth + scaledHeight, y: scaledDeep - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledHeight - totalLength * 2) / 2 - numOffset / 2 + scaledWidth + scaledHeight, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledHeight - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledWidth + scaledHeight, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); addLayers({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayers({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); // 将 group 添加到 svg svg.appendChild(g); } else { pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, 0, scaledDeep)); pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth + scaledHeight, scaledDeep)); if (xfhs?.type && dXFHS) { pathList.push(createText(scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dXFHS)); pathList.push(createText(scaledWidth + scaledHeight + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dXFHS)); } } // 左边贴边 if (zbtb?.type === "8009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = zbtb; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoids : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: -totalLength - yExtraOffset, y: (scaledDeep - totalWidth) / 2 + numOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; const halfWidth = totalWidth * 2; rectangles = [ { x: -totalLength - yExtraOffset, y: (scaledDeep - halfWidth) / 2 - numOffset / 2, width: halfLength, height: totalWidth, }, { x: -totalLength - yExtraOffset, y: (scaledDeep - halfWidth) / 2 + numOffset / 2 + totalWidth, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: Number(sLength) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0, dSFHS * scale, dXFHS * scale)); if (zbtb?.type && dZTBW) { pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW)); } } // 右边贴边 if (ybtb?.type === "9009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = ybtb; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidRight : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: scaledWidth + scaledHeight * 2 + yExtraOffset, y: (scaledDeep - totalWidth) / 2 + numOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; const halfWidth = totalWidth * 2; rectangles = [ { x: scaledWidth + scaledHeight * 2 + yExtraOffset, y: (scaledDeep - halfWidth) / 2 - numOffset / 2, width: halfLength, height: totalWidth, }, { x: scaledWidth + scaledHeight * 2 + yExtraOffset, y: (scaledDeep - halfWidth) / 2 + numOffset / 2 + totalWidth, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: Number(sLength) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth + scaledHeight * 2, 0, dSFHS * scale, dXFHS * scale)); if (zbtb?.type && dYTBW) { pathList.push(createText(scaledWidth + scaledHeight * 2 + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW)); } } // 左下部件- if (zxbj?.type && zxbj?.type === "4009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = zxbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidBottom : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset + scaledHeight, y: scaledDeep - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2 + scaledHeight, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledHeight, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, scaledHeight, scaledDeep)); if ((zxbj?.type === "4001" && zxbj?.value) || (zxbj?.type === "4006" && zxbj?.value) || (zxbj?.type === "4007" && zxbj?.value)) { pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2 - 4, 10 * scales, dZXCW)); } else if (zxbj?.type === "4004" && zxbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); pathList.push( createText(scaledHeight + scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W") ); pathList.push(createText(scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW)); } else if (zxbj?.type === "4005" && zxbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); pathList.push(createText(scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); pathList.push(createText(scaledHeight + scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); } else if (zxbj?.type && dZXCW) { pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); } } // 右上部件 if (ysbj?.type && ysbj?.type === "6009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = ysbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset + scaledHeight, y: -totalWidth + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2 + scaledHeight, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledHeight, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledHeight, 0)); if ((ysbj?.type === "6001" && ysbj?.value) || (ysbj?.type === "6006" && ysbj?.value) || (ysbj?.type === "6007" && ysbj?.value)) { pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); pathList.push(createText(scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2, 10 * scales, dYSCW)); } else if (ysbj?.type === "6004" && ysbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); pathList.push(createText(scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); pathList.push(createText(scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW)); } else if (ysbj?.type === "6005" && ysbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales)); pathList.push(createText(scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); pathList.push(createText(scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); } else if (ysbj?.type && dYSCW) { pathList.push(createText(scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); } } if (scaledDeep && scaledWidth && scaledHeight) { // 纵向 D pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledWidth + scaledHeight / 2, scaledDeep / 2, scales)); pathList.push(createText(scaledHeight + scaledWidth + scaledHeight / 2 + 10, scaledDeep / 2, 10 * scales, "D")); // 横向 L pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledHeight + scaledWidth / 2, scaledDeep / 2, scales)); pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep / 2 + 10, 10 * scales, "L")); // W pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledHeight / 2, scaledDeep * 0.3, scales)); pathList.push(createText(scaledHeight / 2, scaledDeep * 0.3 + 10, 10 * scales, "W")); } pathList.forEach(x => { g.appendChild(x); }); svg.appendChild(g); } else if (Number(svgType) === 4) { // 天地盒 g.appendChild(createFullTelescope(scaledWidth, scaledHeight, scaledDeep, 0, 0)); svg.appendChild(g); // createFullTelescope let pathList = []; // 上方盒舌 if (sfhs?.type && sfhs.type === "1009") { const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = sfhs; // 通用函数：添加矩形层（支持单双数量、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledDeep - totalLength) / 2 + numOffset - scaledDeep, y: -totalWidth + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledDeep - totalLength * 2) / 2 - numOffset / 2 - scaledDeep, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledDeep - totalLength * 2) / 2 + numOffset / 2 + halfLength - scaledDeep, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; const addLayers = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledDeep - totalLength) / 2 + numOffset + scaledWidth, y: -totalWidth + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledDeep - totalLength * 2) / 2 - numOffset / 2 + scaledWidth, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledDeep - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledWidth, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); addLayers({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayers({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); // 将 group 添加到 svg svg.appendChild(g); } else { pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledDeep, -dSFHS * scale, -scaledDeep, 0)); pathList.push(createUpperBoxTongueLeft(sfhs?.type, -scaledDeep, -dSFHS * scale, scaledWidth + scaledDeep, 0)); if (sfhs?.type && dSFHS) { pathList.push(createText(-scaledDeep / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); pathList.push(createText(scaledWidth + scaledDeep / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); } } // 下方盒舌 if (xfhs?.type && xfhs.type === "2009") { const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = xfhs; // 通用函数：添加矩形层（支持单双数量、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidBottom : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledDeep - totalLength) / 2 + numOffset - scaledDeep, y: scaledHeight - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledDeep - totalLength * 2) / 2 - numOffset / 2 - scaledDeep, y: scaledHeight - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledDeep - totalLength * 2) / 2 + numOffset / 2 + halfLength - scaledDeep, y: scaledHeight - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; const addLayers = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidBottom : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledDeep - totalLength) / 2 + numOffset + scaledWidth, y: scaledHeight - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledDeep - totalLength * 2) / 2 - numOffset / 2 + scaledWidth, y: scaledHeight - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledDeep - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledWidth, y: scaledHeight - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); addLayers({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayers({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); // 将 group 添加到 svg svg.appendChild(g); } else { pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledDeep, dXFHS * scale, -scaledDeep, scaledHeight)); pathList.push(createUpperBoxTongueLeft(xfhs?.type, -scaledDeep, dXFHS * scale, scaledDeep + scaledWidth, scaledHeight)); if (xfhs?.type && dXFHS) { pathList.push(createText(-scaledDeep / 2, scaledHeight + (dXFHS / 2 - 5) * scales, 10 * scales, dXFHS)); pathList.push(createText(scaledWidth + scaledDeep / 2, scaledHeight + (dXFHS / 2 - 5) * scales, 10 * scales, dXFHS)); } } // 上方部件 if (zsbj?.type && zsbj?.type === "3009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = zsbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset, y: -totalWidth - scaledDeep + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2, y: -totalWidth - scaledDeep + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2 + halfLength, y: -totalWidth - scaledDeep + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledDeep, -dZSCW * scale, 0, -scaledDeep)); if ((zsbj?.type === "3001" && zsbj?.value) || (zsbj?.type === "3006" && zsbj?.value) || (zsbj?.type === "3007" && zsbj?.value)) { pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.2, -scaledDeep - scaledDeep / 2, scales)); pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledDeep - scaledDeep / 2, 10 * scales, "D")); // 插位值 pathList.push(createText(scaledWidth / 2, -scaledDeep * 2 - dZSCW / 2 + 4, 10 * scales, dZSCW)); } else if (zsbj?.type === "3002" && dZSCW) { pathList.push(createText(scaledWidth / 2, -scaledDeep - dZSCW / 2 + 4, 10 * scales, dZSCW)); } else if (zsbj?.type === "3003" && dZSCW) { pathList.push(createText(scaledWidth / 2, -scaledDeep - dZSCW / 2 + 4, 10 * scales, dZSCW)); } else if (zsbj?.type === "3004" && zsbj?.value) { pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.2, -scaledDeep - scaledDeep / 2, scales)); pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight - scaledDeep / 2, 10 * scales, "D")); pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.85, -(scaledDeep * 2 + scaledDeep / 2), scales)); pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledDeep * 2 + scaledDeep / 2), 10 * scales, "D")); pathList.push(createText(scaledWidth * 0.3, -(scaledDeep * 3) - dZSCW / 2 + 4, 10 * scales, dZSCW)); } else if (zsbj?.type === "3005" && zsbj?.value) { pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.1, -scaledDeep - scaledDeep / 2, scales)); pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledDeep - scaledDeep / 2, 10 * scales, "D")); pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.8, -(scaledDeep * 2 + scaledDeep / 2), scales)); pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledDeep * 2 + scaledDeep / 2), 10 * scales, "D")); } else if (zsbj?.type && dZSCW) { pathList.push(createText(scaledWidth / 2, -scaledDeep - dZSCW / 2 + 4, 10 * scales, dZSCW)); } } // 左边部件 if (zxbj?.type && zxbj?.type === "4009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = zxbj; const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoids : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: -totalLength - yExtraOffset - scaledDeep, y: (scaledHeight - totalWidth) / 2 + numOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; const halfWidth = totalWidth * 2; rectangles = [ { x: -totalLength - yExtraOffset - scaledDeep, y: (scaledHeight - halfWidth) / 2 - numOffset / 2, width: halfLength, height: totalWidth, }, { x: -totalLength - yExtraOffset - scaledDeep, y: (scaledHeight - halfWidth) / 2 + numOffset / 2 + totalWidth, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: Number(sLength) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createFull(zxbj?.type, scaledHeight, -scaledDeep, -dZXCW, -scaledDeep, 0)); if ((zxbj?.type === "4001" && dZXCW) || (zxbj?.type === "4006" && dZXCW) || (zxbj?.type === "4007" && dZXCW)) { pathList.push(createHorizontalDoubleArrow(scaledDeep, -scaledDeep - scaledDeep / 2, scaledHeight * 0.8, scales)); pathList.push(createText(-scaledDeep - scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); pathList.push(createText(-scaledDeep - scaledDeep - dZXCW / 2, scaledHeight * 0.5, 10 * scales, dZXCW)); } else if (zxbj?.type === "4004") { pathList.push(createHorizontalDoubleArrow(scaledDeep, -scaledDeep - scaledDeep / 2, scaledHeight * 0.8, scales)); pathList.push(createText(-scaledDeep - scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); pathList.push(createHorizontalDoubleArrow(scaledDeep, -scaledDeep - scaledDeep - scaledDeep / 2, scaledHeight * 0.8, scales)); pathList.push(createText(-scaledDeep - scaledDeep - scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); pathList.push(createText(-scaledDeep - scaledDeep - scaledDeep - dZXCW / 2, scaledHeight * 0.2, 10 * scales, dZXCW)); } else if (zxbj?.type === "4005" && dZXCW) { pathList.push(createHorizontalDoubleArrow(scaledDeep, -scaledDeep - scaledDeep / 2, scaledHeight * 0.8, scales)); pathList.push(createText(-scaledDeep - scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); pathList.push(createHorizontalDoubleArrow(scaledDeep, -scaledDeep - scaledDeep - scaledDeep / 2, scaledHeight * 0.8, scales)); pathList.push(createText(-scaledDeep - scaledDeep - scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); } else { pathList.push(createText(-scaledDeep - dZXCW / 2, scaledHeight * 0.5, 10 * scales, dZXCW)); } } // 右边 if (ysbj?.type && ysbj?.type === "6009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = ybtb; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidRight : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: scaledWidth + scaledDeep + yExtraOffset, y: (scaledHeight - totalWidth) / 2 + numOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; const halfWidth = totalWidth * 2; rectangles = [ { x: scaledWidth + scaledDeep + yExtraOffset, y: (scaledHeight - halfWidth) / 2 - numOffset / 2, width: halfLength, height: totalWidth, }, { x: scaledWidth + scaledDeep + yExtraOffset, y: (scaledHeight - halfWidth) / 2 + numOffset / 2 + totalWidth, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: Number(sLength) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createFull(ysbj?.type, scaledHeight, scaledDeep, dYSCW, scaledWidth + scaledDeep, 0)); if ((ysbj?.type === "6001" && dYSCW) || (ysbj?.type === "6006" && dYSCW) || (ysbj?.type === "6007" && dYSCW)) { pathList.push(createHorizontalDoubleArrow(scaledDeep, scaledWidth + scaledDeep + scaledDeep / 2, scaledHeight * 0.8, scales)); pathList.push(createText(scaledWidth + scaledDeep + scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); pathList.push(createText(scaledWidth + scaledDeep + scaledDeep + dYSCW / 2, scaledHeight * 0.5, 10 * scales, dYSCW)); } else if (ysbj?.type === "6004" && dYSCW) { pathList.push(createHorizontalDoubleArrow(scaledDeep, scaledWidth + scaledDeep + scaledDeep / 2, scaledHeight * 0.8, scales)); pathList.push(createText(scaledWidth + scaledDeep + scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); pathList.push(createHorizontalDoubleArrow(scaledDeep, scaledWidth + scaledDeep + scaledDeep + scaledDeep / 2, scaledHeight * 0.8, scales)); pathList.push(createText(scaledWidth + scaledDeep + scaledDeep + scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); pathList.push(createText(scaledWidth + scaledDeep + scaledDeep + scaledDeep + dYSCW / 2, scaledHeight * 0.2, 10 * scales, dYSCW)); } else if (zxbj?.type === "4005" && dYSCW) { pathList.push(createHorizontalDoubleArrow(scaledDeep, scaledWidth + scaledDeep + scaledDeep / 2, scaledHeight * 0.8, scales)); pathList.push(createText(scaledWidth + scaledDeep + scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); pathList.push(createHorizontalDoubleArrow(scaledDeep, scaledWidth + scaledDeep + scaledDeep + scaledDeep / 2, scaledHeight * 0.8, scales)); pathList.push(createText(scaledWidth + scaledDeep + scaledDeep + scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); } else { pathList.push(createText(scaledWidth + scaledDeep + dYSCW / 2, scaledHeight * 0.5, 10 * scales, dYSCW)); } } // 下方部件 if (yxbj?.type && yxbj?.type === "7009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = yxbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidBottom : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset, y: scaledHeight + scaledDeep - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2, y: scaledHeight + scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2, y: scaledHeight + scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledDeep, dYXCW * scale, 0, scaledHeight + scaledDeep)); if ((yxbj?.type === "7001" && yxbj?.value) || (yxbj?.type === "7006" && yxbj?.value) || (yxbj?.type === "7007" && yxbj?.value)) { pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.2, scaledHeight + scaledDeep + scaledDeep / 2, scales)); pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledHeight + scaledDeep + scaledDeep / 2, 10 * scales, "D")); // 插位值 pathList.push(createText(scaledWidth / 2, scaledHeight + scaledDeep * 2 + dYXCW / 2 - 5, 10 * scales, dYXCW)); } else if (yxbj?.type === "7004" && yxbj?.value) { pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.2, scaledHeight + scaledDeep + scaledDeep / 2, scales)); pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledHeight + scaledDeep + scaledDeep / 2, 10 * scales, "D")); pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.85, scaledHeight + scaledDeep * 2 + scaledDeep / 2, scales)); pathList.push(createText(scaledWidth * 0.85 + 10 * scales, scaledHeight + scaledDeep * 2 + scaledDeep / 2, 10 * scales, "D")); pathList.push(createText(scaledWidth * 0.3, scaledHeight + scaledDeep * 3 + dYXCW / 2 - 5, 10 * scales, dYXCW)); } else if (yxbj?.type === "7005" && yxbj?.value) { pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.1, scaledHeight + scaledDeep + scaledDeep / 2, scales)); pathList.push(createText(scaledWidth * 0.1 + 10 * scales, scaledHeight + scaledDeep + scaledDeep / 2, 10 * scales, "D")); pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.8, scaledHeight + scaledDeep * 2 + scaledDeep / 2, scales)); pathList.push(createText(scaledWidth * 0.8 + 10 * scales, scaledHeight + scaledDeep * 2 + scaledDeep / 2, 10 * scales, "D")); } else if (dYXCW && yxbj?.type) { pathList.push(createText(scaledWidth / 2, scaledHeight + scaledDeep + dYXCW / 2 - 5, 10 * scales, dYXCW)); } } if (scaledDeep && scaledWidth && scaledHeight) { // 纵向 D pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledHeight / 2, scales)); pathList.push(createText(scaledWidth * 0.2 + 10, scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.7, -scaledDeep / 2, scales)); pathList.push(createText(scaledWidth * 0.7 + 10, -scaledDeep / 2, 10 * scales, "D")); // 横向 L pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledHeight * 0.8, scales)); pathList.push(createText(scaledWidth / 2, scaledHeight * 0.8 + 10, 10 * scales, "L")); // W pathList.push(createHorizontalDoubleArrow(scaledDeep, -scaledDeep / 2, scaledHeight * 0.3, scales)); pathList.push(createText(-scaledDeep / 2, scaledHeight * 0.3 + 10, 10 * scales, "D")); } pathList.forEach(x => { g.appendChild(x); }); svg.appendChild(g); } else if (Number(svgType) === 5) { const rectangles = [ { x: 0, y: 0, width: scaledHeight, height: scaledWidth }, { x: 0 + scaledHeight, y: 0, width: scaledDeep, height: scaledWidth }, { x: 0 + scaledHeight + scaledDeep, y: 0, width: scaledHeight, height: scaledWidth }, { x: 0 + scaledHeight * 2 + scaledDeep, y: 0, width: scaledDeep, height: scaledWidth }, ]; rectangles.forEach(rect => { g.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); }); svg.appendChild(g); let pathList = []; // 上方盒舌 if (sfhs?.type && sfhs.type === "1009") { const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = sfhs; // 通用函数：添加矩形层（支持单双数量、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledHeight - totalLength) / 2 + numOffset, y: -totalWidth + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledHeight - totalLength * 2) / 2 - numOffset / 2, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledHeight - totalLength * 2) / 2 + numOffset / 2 + halfLength, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; const addLayers = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledHeight - totalLength) / 2 + numOffset + scaledWidth + scaledHeight, y: -totalWidth + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledHeight - totalLength * 2) / 2 - numOffset / 2 + scaledWidth + scaledHeight, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledHeight - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledWidth + scaledHeight, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); addLayers({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayers({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); // 将 group 添加到 svg svg.appendChild(g); } else { pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledDeep, -dSFHS * scale, scaledHeight, 0)); pathList.push(createUpperBoxTongueLeft(sfhs?.type, -scaledDeep, -dSFHS * scale, scaledHeight * 2 + scaledDeep * 2, 0)); if (sfhs?.type && dSFHS) { pathList.push(createText(scaledHeight + scaledDeep / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); pathList.push(createText(scaledHeight * 2 + scaledDeep + scaledDeep / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); } } // 下方盒舌 if (xfhs?.type && xfhs.type === "2009") { const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = xfhs; // 通用函数：添加矩形层（支持单双数量、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidBottom : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledHeight - totalLength) / 2 + numOffset, y: scaledDeep - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledHeight - totalLength * 2) / 2 - numOffset / 2, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledHeight - totalLength * 2) / 2 + numOffset / 2 + halfLength, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; const addLayers = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidBottom : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledHeight - totalLength) / 2 + numOffset + scaledWidth + scaledHeight, y: scaledDeep - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledHeight - totalLength * 2) / 2 - numOffset / 2 + scaledWidth + scaledHeight, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledHeight - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledWidth + scaledHeight, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); addLayers({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（y 多一个偏移）=== addLayers({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // 在 s 层下方 }); // 将 group 添加到 svg svg.appendChild(g); } else { pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledDeep, dXFHS * scale, scaledHeight, scaledWidth)); pathList.push(createUpperBoxTongueLeft(xfhs?.type, -scaledDeep, dXFHS * scale, scaledHeight * 2 + scaledDeep * 2, scaledWidth)); if (xfhs?.type && dXFHS) { pathList.push(createText(scaledHeight + scaledDeep / 2, scaledWidth + (dXFHS / 2) * scales, 10 * scales, dXFHS)); pathList.push(createText(scaledHeight * 2 + scaledDeep + scaledDeep / 2, scaledWidth + (dXFHS / 2) * scales, 10 * scales, dXFHS)); } } // 左边贴边 if (zbtb?.type === "8009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = zbtb; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoids : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: -totalLength - yExtraOffset, y: (scaledDeep - totalWidth) / 2 + numOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; const halfWidth = totalWidth * 2; rectangles = [ { x: -totalLength - yExtraOffset, y: (scaledDeep - halfWidth) / 2 - numOffset / 2, width: halfLength, height: totalWidth, }, { x: -totalLength - yExtraOffset, y: (scaledDeep - halfWidth) / 2 + numOffset / 2 + totalWidth, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: Number(sLength) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createTrapezoidLeft(zbtb?.type, scaledWidth, -dZTBW * scale, 0, 0, dSFHS * scale, dXFHS * scale)); if (zbtb?.type && dZTBW) { pathList.push(createText(-dZTBW * 0.4, scaledWidth / 2, 10 * scales, dZTBW)); } } // 右边贴边 if (ybtb?.type === "9009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = ybtb; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidRight : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: scaledWidth * 2 + scaledHeight * 2 + yExtraOffset, y: (scaledDeep - totalWidth) / 2 + numOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; const halfWidth = totalWidth * 2; rectangles = [ { x: scaledWidth * 2 + scaledHeight * 2 + yExtraOffset, y: (scaledDeep - halfWidth) / 2 - numOffset / 2, width: halfLength, height: totalWidth, }, { x: scaledWidth * 2 + scaledHeight * 2 + yExtraOffset, y: (scaledDeep - halfWidth) / 2 + numOffset / 2 + totalWidth, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: Number(sLength) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push( createTrapezoidRight(ybtb?.type, scaledWidth, dYTBW * scale, scaledHeight * 2 + scaledDeep * 2, 0, dSFHS * scale, dXFHS * scale) ); if (ybtb?.type && dYTBW) { pathList.push(createText(scaledHeight * 2 + scaledDeep * 2 + dYTBW * 0.4, scaledWidth / 2, 10 * scales, dYTBW)); } } // 左上部件 if (zsbj?.type && zsbj?.type === "3009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = zsbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset + scaledHeight, y: -totalWidth + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2 + scaledHeight, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledHeight, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createDynamicTopLeft(zsbj?.type, scaledHeight, -scaledDeep, -dZSCW * scale, 0, 0)); if ((zsbj?.type === "3001" && zsbj?.value) || (zsbj?.type === "3006" && zsbj?.value) || (zsbj?.type === "3007" && zsbj?.value)) { pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.2, -scaledDeep / 2, scales)); pathList.push(createText(scaledHeight * 0.2 + 10 * scales, -scaledDeep / 2, 10 * scales, "D")); // 插位值 pathList.push(createText(scaledHeight / 2, -scaledDeep - dZSCW / 2 + 4, 10 * scales, dZSCW)); } else if (zsbj?.type === "3002" && dZSCW) { pathList.push(createText(scaledHeight / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW)); } else if (zsbj?.type === "3003" && dZSCW) { pathList.push(createText(scaledHeight / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW)); } else if (zsbj?.type === "3004" && zsbj?.value) { pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.2, -scaledDeep / 2, scales)); pathList.push(createText(scaledHeight * 0.2 + 10 * scales, -scaledDeep / 2, 10 * scales, "D")); pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.85, -(scaledDeep + scaledDeep / 2), scales)); pathList.push(createText(scaledHeight * 0.85 + 10 * scales, -(scaledDeep + scaledDeep / 2), 10 * scales, "D")); pathList.push(createText(scaledHeight * 0.3, -(scaledDeep * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW)); } else if (zsbj?.type === "3005" && zsbj?.value) { pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.1, -scaledDeep / 2, scales)); pathList.push(createText(scaledHeight * 0.1 + 10 * scales, -scaledDeep / 2, 10 * scales, "D")); pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.8, -(scaledDeep + scaledDeep / 2), scales)); pathList.push(createText(scaledHeight * 0.8 + 10 * scales, -(scaledDeep + scaledHeight / 2), 10 * scales, "D")); } else if (zsbj?.type && dZSCW) { pathList.push(createText(scaledHeight / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW)); } } // 右上部件 if (ysbj?.type && ysbj?.type === "6009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = ysbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset + scaledHeight * 2 + scaledWidth, y: -totalWidth + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2 + scaledHeight * 2 + scaledWidth, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledHeight * 2 + scaledWidth, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createDynamicTopLeft(ysbj?.type, scaledHeight, -scaledDeep, -dYSCW * scale, scaledHeight + scaledDeep, 0)); if ((ysbj?.type === "6001" && ysbj?.value) || (ysbj?.type === "6006" && ysbj?.value) || (ysbj?.type === "6007" && ysbj?.value)) { pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.2, -scaledDeep / 2, scales)); pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.2 + 10 * scales, -scaledDeep / 2, 10 * scales, "D")); pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.5, -scaledDeep - dYSCW / 2, 10 * scales, dYSCW)); } else if (ysbj?.type === "6002" && dYSCW) { pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); } else if (ysbj?.type === "6003" && dYSCW) { pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); } else if (ysbj?.type === "6004" && ysbj?.value) { pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.2, -scaledDeep / 2, scales)); pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.2 + 10 * scales, -scaledDeep / 2, 10 * scales, "D")); pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.85, -(scaledDeep + scaledDeep / 2), scales)); pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.85 + 10 * scales, -(scaledDeep + scaledDeep / 2), 10 * scales, "D")); pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.3, -(scaledDeep * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW)); } else if (ysbj?.type === "6005" && ysbj?.value) { pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.1, -scaledDeep / 2, scales)); pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.1 + 10 * scales, -scaledDeep / 2, 10 * scales, "D")); pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.8, -(scaledDeep + scaledDeep / 2), scales)); pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.8 + 10 * scales, -(scaledDeep + scaledDeep / 2), 10 * scales, "D")); } else if (ysbj?.type && dYSCW) { pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); } } // 左下部件- if (!(hdzj && hdzj.type)) { if (zxbj?.type && zxbj?.type === "4009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = zxbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidBottom : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset + scaledHeight, y: scaledDeep - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2 + scaledHeight, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledHeight, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createDynamicTopLeft(zxbj?.type, scaledHeight, scaledDeep, dZXCW * scale, 0, scaledWidth)); if ((zxbj?.type === "4001" && zxbj?.value) || (zxbj?.type === "4006" && zxbj?.value) || (zxbj?.type === "4007" && zxbj?.value)) { pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.2, scaledWidth + scaledDeep / 2, scales)); pathList.push(createText(scaledHeight * 0.2 + 10 * scales, scaledWidth + scaledDeep / 2, 10 * scales, "D")); pathList.push(createText(scaledHeight / 2, scaledWidth + scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); } else if (zxbj?.type === "4002" && dZXCW) { pathList.push(createText(scaledHeight / 2, scaledWidth + dZXCW / 2 - 4, 10 * scales, dZXCW)); } else if (zxbj?.type === "4003" && dZXCW) { pathList.push(createText(scaledHeight / 2, scaledWidth + dZXCW / 2 - 4, 10 * scales, dZXCW)); } else if (zxbj?.type === "4004" && zxbj?.value) { pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.2, scaledWidth + scaledDeep / 2, scales)); pathList.push(createText(scaledHeight * 0.2 + 10 * scales, scaledWidth + scaledDeep / 2, 10 * scales, "D")); pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.85, scaledWidth + (scaledDeep + scaledDeep / 2), scales)); pathList.push(createText(scaledHeight * 0.85 + 10 * scales, scaledHeight + (scaledWidth + scaledWidth / 2), 10 * scales, "D")); pathList.push(createText(scaledHeight * 0.3, scaledWidth + scaledDeep * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW)); } else if (zxbj?.type === "4005" && zxbj?.value) { pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.1, scaledWidth + scaledDeep / 2, scales)); pathList.push(createText(scaledHeight * 0.1 + 10 * scales, scaledWidth + scaledDeep / 2, 10 * scales, "D")); pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.8, scaledWidth + (scaledDeep + scaledDeep / 2), scales)); pathList.push(createText(scaledHeight * 0.8 + 10 * scales, scaledWidth + (scaledDeep + scaledDeep / 2), 10 * scales, "D")); } else if (zxbj?.type && dZXCW) { pathList.push(createText(scaledHeight / 2, scaledWidth + dZXCW / 2 - 4, 10 * scales, dZXCW)); } } } if (!(hdzj && hdzj.type)) { if (yxbj?.type && yxbj?.type === "7009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = yxbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidBottom : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset + scaledHeight * 2 + scaledWidth, y: scaledDeep - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2 + scaledHeight * 2 + scaledWidth, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2 + halfLength + scaledHeight * 2 + scaledWidth, y: scaledDeep - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createDynamicTopLeft(yxbj?.type, scaledHeight, scaledDeep, dYXCW * scale, scaledHeight + scaledDeep, scaledWidth)); if ((yxbj?.type === "7001" && yxbj?.value) || (yxbj?.type === "7006" && yxbj?.value) || (yxbj?.type === "7007" && yxbj?.value)) { pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.2, scaledWidth + scaledDeep / 2, scales)); pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.2 + 10 * scales, scaledWidth + scaledDeep / 2, 10 * scales, "D")); pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.5, scaledWidth + scaledDeep + dYXCW / 2, 10 * scales, dYXCW)); } else if (yxbj?.type === "7004" && yxbj?.value) { pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledDeep * 0.2, scaledWidth + scaledDeep / 2, scales)); pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.2 - 10 * scales, scaledWidth + scaledDeep / 2, 10 * scales, "D")); pathList.push( createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.85, scaledWidth + (scaledDeep + scaledDeep / 2), scales) ); pathList.push( createText(scaledHeight + scaledDeep + scaledHeight * 0.85 + 10 * scales, scaledWidth + (scaledDeep + scaledDeep / 2), 10 * scales, "D") ); pathList.push( createText(scaledHeight + scaledDeep + scaledHeight * 0.3, scaledWidth + scaledDeep * 2 + dYXCW / 2 - 4, 10 * scales, dYXCW) ); } else if (yxbj?.type === "7005" && yxbj?.value) { pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.1, scaledWidth + scaledDeep / 2, scales)); pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.1 + 10 * scales, scaledWidth + scaledDeep / 2, 10 * scales, "D")); pathList.push( createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.8, scaledWidth + (scaledDeep + scaledDeep / 2), scales) ); pathList.push( createText(scaledHeight + scaledDeep + scaledHeight * 0.8 + 10 * scales, scaledWidth + (scaledDeep + scaledDeep / 2), 10 * scales, "D") ); } else if (dYXCW && yxbj?.type) { pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.5, scaledWidth + dYXCW / 2 - 4, 10 * scales, dYXCW)); } } } // 右下部件 // 纵向 L if (scaledDeep && scaledWidth && scaledHeight) { pathList.push(createDoubleArrow(scaledWidth, scaledHeight * 0.8, scaledWidth / 2, scales)); pathList.push(createText(scaledHeight * 0.8 - 10 * scales, scaledWidth / 2, 10 * scales, "L")); // 横向 L pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledHeight / 2, scaledWidth * 0.3, scales)); pathList.push(createText(scaledHeight / 2, scaledWidth * 0.3 + 10 * scales, 10 * scales, "W")); // W pathList.push(createHorizontalDoubleArrow(scaledDeep, scaledHeight + scaledDeep / 2, scaledWidth * 0.5, scale)); pathList.push(createText(scaledHeight + scaledDeep / 2, scaledWidth * 0.5 + 10 * scales, 10 * scales, "D")); } pathList.forEach(x => { g.appendChild(x); }); svg.appendChild(g); // g.setAttribute('transform', `rotate(90, ${viewBoxWidth/2}, ${viewBoxHeight/2})`); } else if (Number(svgType) === 6) { const rectangles = [{ x: 0, y: 0, width: scaledHeight, height: scaledWidth }]; rectangles.forEach(rect => { g.appendChild(createPathElements(rect.x, rect.y, rect.width, rect.height)); }); svg.appendChild(g); } else if (Number(svgType) === 7) { const rectangles = [{ x: 0, y: 0, width: scaledWidth, height: scaledHeight }]; rectangles.forEach(rect => { g.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); }); // svg.appendChild(g); let pathList = []; // 左上部件 if (zsbj?.type && zsbj?.type === "3009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = zsbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoid : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset, y: -totalWidth + yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2 + halfLength, y: -totalWidth + yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0)); if ((zsbj?.type === "3001" && zsbj?.value) || (zsbj?.type === "3006" && zsbj?.value) || (zsbj?.type === "3007" && zsbj?.value)) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); pathList.push(createText(scaledWidth / 2, -scaledHeight - dZSCW / 2 + 4, 10 * scales, dZSCW)); } else if (zsbj?.type === "3004" && zsbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); pathList.push(createText(scaledWidth * 0.3, -(scaledHeight * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW)); } else if (zsbj?.type === "3005" && zsbj?.value) { pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, -scaledHeight / 2, scales)); pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); } else if (zsbj?.type && dZSCW) { pathList.push(createText(scaledWidth / 2, -(dZSCW / 2 - 5), 10 * scales, dZSCW)); } } // 右下部件 if (yxbj?.type && yxbj?.type === "7009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = yxbj; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidBottom : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: (scaledWidth - totalLength) / 2 + numOffset, y: scaledHeight - yExtraOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; rectangles = [ { x: (scaledWidth - totalLength * 2) / 2 - numOffset / 2, y: scaledHeight - yExtraOffset, width: halfLength, height: totalWidth, }, { x: (scaledWidth - totalLength * 2) / 2 + numOffset / 2, y: scaledHeight - yExtraOffset, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: -Number(sWidth) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW * scale, 0, scaledHeight)); } // 右边 if (ysbj?.type && ysbj?.type === "6009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = ybtb; // 通用函数：添加一层矩形（支持单双、矩形/梯形） const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoidRight : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: scaledWidth + yExtraOffset, y: (scaledHeight - totalWidth) / 2 + numOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; const halfWidth = totalWidth * 2; rectangles = [ { x: scaledWidth + yExtraOffset, y: (scaledHeight - halfWidth) / 2 - numOffset / 2, width: halfLength, height: totalWidth, }, { x: scaledWidth + yExtraOffset, y: (scaledHeight - halfWidth) / 2 + numOffset / 2 + totalWidth, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: Number(sLength) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createFull(ysbj?.type, scaledWidth, scaledHeight, dYSCW * scale, scaledWidth, 0)); } // 左边 if (zxbj?.type && zxbj?.type === "4009") { // 先放层1的盒型 const { sType, sLength, sWidth, sOffset, sQuantity, cType, cLength, cWidth, cOffset, cQuantity } = zxbj; const addLayer = params => { const { type = null, length, width, offset, quantity, isTrapezoid, yExtraOffset = 0 } = params; if (type === null) return; if (!quantity) return; const numQuantity = Number(quantity); const totalLength = Number(length) * scale; const totalWidth = Number(width) * scale; const numOffset = Number(offset) * scale; // 选择绘制函数 const createFunc = isTrapezoid ? createPathElementTrapezoids : createPathElements; let rectangles = []; if (numQuantity === 1) { rectangles = [ { x: -totalLength - yExtraOffset, y: (scaledHeight - totalWidth) / 2 + numOffset, width: totalLength, height: totalWidth, }, ]; } else if (numQuantity === 2) { const halfLength = totalLength; const halfWidth = totalWidth * 2; rectangles = [ { x: -totalLength - yExtraOffset, y: (scaledHeight - halfWidth) / 2 - numOffset / 2, width: halfLength, height: totalWidth, }, { x: -totalLength - yExtraOffset, y: (scaledHeight - halfWidth) / 2 + numOffset / 2 + totalWidth, width: halfLength, height: totalWidth, }, ]; } rectangles.forEach(rect => { g.appendChild(createFunc(rect.x, rect.y, rect.width, rect.height)); }); }; // === 绘制 sType 层 === addLayer({ type: sType, length: sLength, width: sWidth, offset: sOffset, quantity: sQuantity, isTrapezoid: Number(sType) !== 0, }); // === 绘制 cType 层（在 s 层下方）=== addLayer({ type: cType, length: cLength, width: cWidth, offset: cOffset, quantity: cQuantity, isTrapezoid: Number(cType) !== 0, yExtraOffset: Number(sLength) * scale, // sWidth 的偏移 }); // 将分组添加到 SVG svg.appendChild(g); } else { pathList.push(createFull(zxbj?.type, scaledWidth, -scaledHeight, -dZXCW * scale, 0, 0)); } pathList.forEach(x => { g.appendChild(x); }); svg.appendChild(g); } else if (Number(svgType) === 8) { const scaleHeadLength = headLength * scale; const scaleHeadWidth = headWidth * scale; const scaleOrderLength = orderLength * scale; const scaleOrderWidth = orderWidth * scale; // 获取他的偏移距离 const leftOffect = boxList.find(x => x.sName === "左偏移")?.value || 0; const rightOffect = boxList.find(x => x.sName === "右偏移")?.value || 0; const rectangles = [{ x: 0, y: 0, width: scaleHeadLength, height: scaleHeadWidth }]; rectangles.forEach(rect => { g.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); }); const rectanglesLeft = [ { x: scaleHeadLength / 2 - scaleOrderLength - Number(leftOffect), y: scaleHeadWidth, width: scaleOrderLength, height: scaleOrderWidth }, ]; rectanglesLeft.forEach(rect => { g.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); }); const rectanglesRight = [{ x: scaleHeadLength / 2 + Number(rightOffect), y: scaleHeadWidth, width: scaleOrderLength, height: scaleOrderWidth }]; rectanglesRight.forEach(rect => { g.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); }); // 处理双盒的插位组件 let pathList = []; // 获取左上 const scw = boxList.find(x => x.sName === "上插位组件"); const zscw = boxList.find(x => x.sName === "左上插位组件"); const yscw = boxList.find(x => x.sName === "右上插位组件"); const zcw = boxList.find(x => x.sName === "左插位组件"); const ycw = boxList.find(x => x.sName === "右插位组件"); const zxcw = boxList.find(x => x.sName === "左下插位组件"); const yxcw = boxList.find(x => x.sName === "右下插位组件"); const dSCW = scw?.value; const dZSCW = zscw?.value; const dYSCW = yscw?.value; const dZCW = zcw?.value; const dYCW = ycw?.value; const dZXCW = zxcw?.value; const dYXCW = yxcw?.value; // 上插位 pathList.push(createDynamicTopLeft(scw?.type, scaleHeadLength, -scaleHeadWidth, -dSCW * scale, 0, 0)); if ((scw?.type === "11001" && scw?.value) || (scw?.type === "11006" && scw?.value) || (scw?.type === "11007" && scw?.value)) { pathList.push(createDoubleArrow(scaleHeadWidth, scaleHeadWidth * 0.2, -scaleHeadWidth / 2, scales)); pathList.push(createText(scaleHeadWidth * 0.2 + 10 * scales, -scaleHeadWidth / 2, 10 * scales, "dSHK")); pathList.push(createText(scaleHeadLength / 2, -scaleHeadWidth - dSCW / 2 + 4, 10 * scales, dSCW)); } else if (scw?.type === "11004" && scw?.value) { pathList.push(createDoubleArrow(scaleHeadWidth, scaleHeadLength * 0.2, -scaleHeadWidth / 2, scales)); pathList.push(createText(scaleHeadLength * 0.2 + 10 * scales, -scaleHeadWidth / 2, 10 * scales, "dSHK")); pathList.push(createDoubleArrow(scaleHeadWidth, scaleHeadLength * 0.85, -(scaleHeadWidth + scaleHeadWidth / 2), scales)); pathList.push(createText(scaleHeadLength * 0.5 + 10 * scales, -(scaleHeadWidth + scaleHeadWidth / 2), 10 * scales, "dSHK")); pathList.push(createText(scaleHeadLength * 0.3, -(scaleHeadWidth * 2), 10 * scales, dSCW)); } else if (scw?.type === "11005" && scw?.value) { pathList.push(createDoubleArrow(scaleHeadWidth, scaleHeadLength * 0.1, -scaleHeadWidth / 2, scales)); pathList.push(createText(scaleHeadLength * 0.1 + 10 * scales, -scaleHeadWidth / 2, 10 * scales, "dSHK")); pathList.push(createDoubleArrow(scaleHeadWidth, scaleHeadLength * 0.8, -(scaleHeadWidth + scaleHeadWidth / 2), scales)); pathList.push(createText(scaleHeadLength * 0.8 + 10 * scales, -(scaleHeadWidth + scaleHeadWidth / 2), 10 * scales, "dSHK")); pathList.push(createText(scaleHeadLength * 0.8 + 10 * scales, -(scaleHeadWidth + scaleHeadWidth / 2), 10 * scales, "dSHK")); } else if (scw?.type && dSCW) { pathList.push(createText(scaleHeadLength / 2, -(dSCW / 2 - 5), 10 * scales, dSCW)); } // 左上插位 pathList.push(createFull(zscw?.type, scaleHeadWidth, -scaleHeadWidth, -dZSCW * scale, 0, 0)); // 左插位 pathList.push( createFull( zcw?.type, scaleOrderWidth, -scaleOrderWidth, -dZCW * scale, scaleHeadLength / 2 - scaleOrderLength - Number(leftOffect), scaleHeadWidth ) ); // 左下 pathList.push( createDynamicTopLeft( zxcw?.type, scaleOrderLength, scaleOrderWidth, dZXCW * scale, scaleHeadLength / 2 - scaleOrderLength - Number(leftOffect), scaleHeadWidth + scaleOrderWidth ) ); // 右上 pathList.push(createFull(yscw?.type, scaleHeadWidth, scaleHeadWidth, dYSCW * scale, scaleHeadLength, 0)); // 右插位 pathList.push( createFull( ycw?.type, scaleOrderWidth, scaleOrderWidth, dYCW * scale, scaleHeadLength / 2 + Number(rightOffect) + scaleOrderLength, scaleHeadWidth ) ); // 右下 pathList.push( createDynamicTopLeft( yxcw?.type, scaleOrderLength, scaleOrderWidth, dYXCW * scale, scaleHeadLength / 2 + Number(rightOffect), scaleHeadWidth + scaleOrderWidth ) ); if (scaleHeadLength && scaleHeadWidth) { pathList.push(createDoubleArrow(scaleHeadWidth, scaleHeadLength * 0.8, scaleHeadWidth / 2, scales)); pathList.push(createText(scaleHeadLength * 0.8 - 10 * scales, scaleHeadWidth / 2, 10 * scales, "dSHK")); pathList.push(createHorizontalDoubleArrow(scaleHeadLength, scaleHeadLength / 2, scaleHeadWidth * 0.7, scales)); pathList.push(createText(scaleHeadWidth / 2, scaleHeadLength * 0.3 + 10 * scales, 10 * scales, "dSHC")); } if (scaleOrderLength && scaleOrderWidth) { pathList.push(createDoubleArrow(scaleOrderWidth, scaleOrderLength * 0.6 - leftOffect, scaleHeadWidth + scaleOrderWidth / 2, scales)); pathList.push(createText(scaleOrderLength * 0.8 - 10 * scales - leftOffect, scaleHeadWidth + scaleOrderWidth / 2, 10 * scales, "dCHK")); pathList.push( createHorizontalDoubleArrow(scaleOrderLength, scaleOrderLength / 2 - leftOffect, scaleHeadWidth + scaleOrderWidth * 0.7, scales) ); pathList.push(createText(scaleOrderWidth / 2 - leftOffect, scaleHeadWidth + scaleOrderLength * 0.8 * scales, 10 * scales, "dCHC")); } pathList.forEach(x => { g.appendChild(x); }); svg.appendChild(g); } else if (Number(svgType) === 9) { svg.appendChild(drawCup(boxLength, boxWidth, boxHeight, g)); const result = calculateCupUnfoldDimensions(boxLength, boxWidth, boxHeight) // if (props.showNew !== 0) { const w = result.width const h = result.height svg.setAttribute('viewBox', `${result.points.outerLeft.x} ${result.points.topCenter.y} ${w} ${h}`); svg.setAttribute("width", `${dSvgBoxWidth ? dSvgBoxWidth : 500}px`); svg.setAttribute("height", `${dSvgBoxHeight ? dSvgBoxHeight : 250}px`); // } } }; function calculateCupUnfoldDimensions(D, d, h) { const R1 = D / 2; // 上口半径 const R2 = d / 2; // 底部半径 // 1. 计算母线长 l const deltaR = R1 - R2; const l = Math.sqrt(deltaR * deltaR + h * h); // 2. 计算外半径 R 和内半径 r const R = (R1 * l) / deltaR; // 外半径 const r = R - l; // 内半径 // 3. 计算圆心角 θ（弧度） const theta_rad = (2 * Math.PI * R1) / R; const halfTheta = theta_rad / 2; // 4. 计算弦长（水平宽度） const chord = 2 * R * Math.sin(halfTheta); // 5. 展开图垂直高度 const y_top = -R; // 外弧中点（最高点） const y_inner_end = -r * Math.cos(halfTheta); const verticalHeight = y_inner_end - y_top; // ✅ 新增：计算关键点坐标（以圆心为原点，y 向上为正） // 注意：数学坐标系中，角度从 x 轴开始逆时针，但我们希望顶部在 y 轴负方向 // 所以我们把角度偏移 -90°（即 -π/2），让 0° 指向正上方 const angleOffset = -Math.PI / 2; // 使 0° 指向顶部 const points = { outerCenter: { x: R * Math.cos(halfTheta + angleOffset), y: R * Math.sin(halfTheta + angleOffset) }, outerLeft: { x: R * Math.cos(-halfTheta + angleOffset), y: R * Math.sin(-halfTheta + angleOffset) }, outerRight: { x: R * Math.cos(halfTheta + angleOffset), y: R * Math.sin(halfTheta + angleOffset) }, innerLeft: { x: r * Math.cos(-halfTheta + angleOffset), y: r * Math.sin(-halfTheta + angleOffset) }, innerRight: { x: r * Math.cos(halfTheta + angleOffset), y: r * Math.sin(halfTheta + angleOffset) }, // 也可以计算顶部中点（0° 方向） topCenter: { x: 0, y: -R // 正上方 }, bottomLeft: { x: -chord / 2, y: -r * Math.cos(halfTheta) }, bottomRight: { x: chord / 2, y: -r * Math.cos(halfTheta) } }; // 如果你需要用于 SVG（y 向下为正），可以转换 const pointsForSVG = Object.keys(points).reduce((acc, key) => { acc[key] = { x: points[key].x, y: -points[key].y // 反转 y 轴 }; return acc; }, {}); return { width: chord, height: verticalHeight, R, r, l, theta_deg: (theta_rad * 180) / Math.PI, points, // 数学坐标系（y 向上） pointsForSVG, // SVG 坐标系（y 向下） chord, verticalHeight }; } // 计算头部偏移 const topOffect = (list, length, width, height, props) => { const val = list.filter(x => x.type); const sfhs = val.find(x => x.sName === "上方盒舌"); const zscw = val.find(x => x.sName === "左(上)插位组件"); const yscw = val.find(x => x.sName === "右(上)插位组件"); const { boxBodyList, showNew } = props let box if (showNew === 0) { if (!(boxBodyList && boxBodyList.length)) return box = list.find(x => x.sName?.trim() === boxBodyList[0].showName) || null } else { box = list.find(x => x.sName === "盒身") || null } const svg = Number(box?.type); if (svg === 6) return 0; const dZ = Number(zscw?.value) || 0; const dY = Number(yscw?.value) || 0; if (svg === 8) { const getTopValue = (scw, width) => { if (!scw || !scw.type) return 0; const scwValue = Number(scw.value) || 0; const type = Number(scw.type); switch (type) { case 11001: return width + scwValue; case 11002: case 11003: return scwValue; case 11004: return scwValue + width * 2; case 11005: return width * 2; case 11006: case 11007: return scwValue + width; default: return 0; } }; // 使用示例 const scw = val.find(x => x.sName === "上插位组件"); const topValue = getTopValue(scw, width); return isNaN(topValue) ? 0 : topValue; } const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006", "3007", "4007", "6007", "7007"]; const four = ["6004", "3004", "4004", "7004"]; const five = ["6005", "3005", "4005", "7005"]; const coef = box?.type === "5" ? height : width; const pick = (cw, d) => { const t = cw?.type; if (five.includes(t)) return 2 * coef; if (four.includes(t)) return 2 * coef + d; if (one.includes(t)) return coef + d; if (t && t.includes("09")) { return Number(cw.sWidth) + Number(cw.cWidth); } return d; }; let top = 0; if (zscw?.type && yscw?.type) { const z = pick(zscw, dZ); const y = pick(yscw, dY); top = Math.max(z, y, sfhs?.value || 0); } else if (yscw?.type) { top = Math.max(pick(yscw, dY), sfhs?.value || 0); } else if (zscw?.type) { top = Math.max(pick(zscw, dZ), sfhs?.value || 0); } else { const t = sfhs?.type; if (t && t.includes("09")) { return Number(sfhs.sWidth) + Number(sfhs.cWidth); } top = sfhs?.value || 0; } if (svg === 4) top = Number(top) + Number(height); return isNaN(top) ? 0 : Number(top); }; const bottomOffect = (list, length, width, height, props) => { const val = list.filter(x => x.type); const sfhs = val.find(x => x.sName === "下方盒舌"); const zscw = val.find(x => x.sName === "左(下)插位组件"); const yscw = val.find(x => x.sName === "右(下)插位组件"); const hdzj = val.find(x => x.sName === "盒底组件"); const { boxBodyList, showNew } = props let box if (showNew === 0) { if (!(boxBodyList && boxBodyList.length)) return box = list.find(x => x.sName?.trim() === boxBodyList[0].showName) || null } else { box = list.find(x => x.sName === "盒身") || null } const svg = Number(box?.type); if (svg === 6) return 0; if (hdzj?.type) return Number(hdzj.value); const dZ = Number(zscw?.value) || 0; const dY = Number(yscw?.value) || 0; if (svg === 8) { const zxcw = val.find(x => x.sName === "左下插位组件"); const yxcw = val.find(x => x.sName === "右下插位组件"); const calculateTopValue = (component, baseWidth) => { if (!component || !component.type) return 0; const componentValue = Number(component.value) || 0; switch (Number(component.type)) { case 14001: case 16001: return baseWidth + componentValue; case 14002: case 14003: case 16002: case 16003: return componentValue; case 14004: case 16004: return componentValue + baseWidth * 2; case 14005: case 16005: return baseWidth * 2; case 14006: case 14007: case 16006: case 16007: return componentValue + baseWidth; default: return 0; } }; const leftTopValue = calculateTopValue(zxcw, width); const rightTopValue = calculateTopValue(yxcw, width); return Math.max(leftTopValue, rightTopValue); } const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006", "3007", "4007", "6007", "7007"]; const four = ["6004", "3004", "4004", "7004"]; const five = ["6005", "3005", "4005", "7005"]; const coef = box?.type === "5" ? height : width; const pick = (cw, d) => { const t = cw?.type; if (five.includes(t)) return 2 * coef; if (four.includes(t)) return 2 * coef + d; if (one.includes(t)) return coef + d; if (t && t.includes("09")) { return Number(cw.sWidth) + Number(cw.cWidth); } return d; }; let top = 0; if (zscw?.type && yscw?.type) { const z = pick(zscw, dZ); const y = pick(yscw, dY); top = Math.max(z, y, sfhs?.value || 0); } else if (yscw?.type) { top = Math.max(pick(yscw, dY), sfhs?.value || 0); } else if (zscw?.type) { top = Math.max(pick(zscw, dZ), sfhs?.value || 0); } else { const t = sfhs?.type; if (t && t.includes("09")) { return Number(sfhs.sWidth) + Number(sfhs.cWidth); } top = sfhs?.value || 0; } if (svg === 4) top = Number(top) + Number(height); return isNaN(top) ? 0 : top; }; // 将角度转换为弧度 const degToRad = (degrees) => { return degrees * (Math.PI / 180); } // 将弧度转换为角度 const radToDeg = (radians) => { return radians * (180 / Math.PI); } const drawCup = (w, h, d, g) => { const R1 = w / 2; const R2 = h / 2; const H = d; // 1. 计算基础参数 const l = Math.sqrt(Math.pow(R1 - R2, 2) + Math.pow(H, 2)); // 斜高 const R = (R1 * l) / (R1 - R2); // 扇形外弧半径 const r = R - l; // 扇形内弧半径 const theta_rad = (2 * Math.PI * R1) / R; // 圆心角（弧度） const theta_deg = radToDeg(theta_rad); // 圆心角（度） // 2. 计算SVG路径关键点坐标 // 外弧起点和终点 (相对于新的坐标系) const x1_outer = R * Math.sin(-theta_rad / 2); // 使用 sin 对应 x const y1_outer = -R * Math.cos(-theta_rad / 2); // 使用 -cos 对应 y，使其开口向上 const x2_outer = R * Math.sin(theta_rad / 2); const y2_outer = -R * Math.cos(theta_rad / 2); // 内弧起点和终点 (现在与外弧圆心角相同) const x1_inner = r * Math.sin(-theta_rad / 2); const y1_inner = -r * Math.cos(-theta_rad / 2); const x2_inner = r * Math.sin(theta_rad / 2); const y2_inner = -r * Math.cos(theta_rad / 2); // 3. 计算主展开形状SVG路径 // 大扇形外弧路径 (逆时针) const isLargeArcOuter = theta_deg > 180 ? 1 : 0; const outerArcPath = `M ${x1_outer} ${y1_outer} A ${R} ${R} 0 ${isLargeArcOuter} 1 ${x2_outer} ${y2_outer}`; // 连接到内弧终点的直线 const lineToInnerEnd = `L ${x2_inner} ${y2_inner}`; // 内弧路径 (顺时针) const isLargeArcInner = theta_deg > 180 ? 1 : 0; // 内弧圆心角与外弧相同 const innerArcPath = `A ${r} ${r} 0 ${isLargeArcInner} 0 ${x1_inner} ${y1_inner}`; // 连接回外弧起点的直线并闭合 const lineToOuterStartClose = `L ${x1_outer} ${y1_outer} Z`; // 4. 组合路径数据 const pathData = `${outerArcPath} ${lineToInnerEnd} ${innerArcPath} ${lineToOuterStartClose}`; // 5. 创建SVG Path元素 const svgNS = "http://www.w3.org/2000/svg"; const pathElement = document.createElementNS(svgNS, 'path'); pathElement.setAttribute('d', pathData); pathElement.setAttribute('fill', 'transparent'); pathElement.setAttribute('stroke', '#7588B9'); pathElement.setAttribute('stroke-width', '1'); pathElement.setAttribute('id', 'cupPath'); g.appendChild(pathElement); return pathElement; } const calculateCupDimensionsAndStart = (w, h, d) => { const R1 = w / 2; const R2 = h / 2; const H = d; // 输入验证 if (isNaN(R1) || isNaN(R2) || isNaN(H) || R1 <= R2 || R1 <= 0 || R2 < 0 || H <= 0) { console.error("calculateCupDimensionsAndStart: 请输入有效的参数：R1 > R2 >= 0, H > 0"); return null; } // 1. 计算基础参数 const l = Math.sqrt(Math.pow(R1 - R2, 2) + Math.pow(H, 2)); // 斜高 const R = (R1 * l) / (R1 - R2); // 扇形外弧半径 const r = R - l; // 扇形内弧半径 const theta_rad = (2 * Math.PI * R1) / R; // 圆心角（弧度） // 2. 计算SVG路径关键点坐标 // 外弧起点和终点 (相对于新的坐标系) // 起始点是路径的第一个点 const startX = R * Math.sin(-theta_rad / 2); // 使用 sin 对应 x const startY = -R * Math.cos(-theta_rad / 2); // 使用 -cos 对应 y，使其开口向上 const x2_outer = R * Math.sin(theta_rad / 2); const y2_outer = -R * Math.cos(theta_rad / 2); // 内弧起点和终点 (现在与外弧圆心角相同) const x1_inner = r * Math.sin(-theta_rad / 2); const y1_inner = -r * Math.cos(-theta_rad / 2); const x2_inner = r * Math.sin(theta_rad / 2); const y2_inner = -r * Math.cos(theta_rad / 2); // 3. 计算起始点到原点 (0,0) 的距离 const startDistance = Math.sqrt(startX * startX + startY * startY); // 4. 确定所有点的边界框 (Bounding Box) 以计算总宽度和高度 const allX = [startX, x2_outer, x1_inner, x2_inner]; const allY = [startY, y2_outer, y1_inner, y2_inner]; const minX = Math.min(...allX); const maxX = Math.max(...allX); const minY = Math.min(...allY); const maxY = Math.max(...allY); const width = maxX - minX; const height = maxY - minY; return { width, height, startX, startY, startDistance }; }; // 上方盒舌左边 const createUpperBoxTongueLeft = (upperBoxTongueType, width, height, offsetX, offsetY) => { if (!height) return createNoneProject(); // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 let data = {}; switch (upperBoxTongueType) { case "1001": data = createLineWeltTop(width, height, offsetX, offsetY); break; case "1002": data = createIsoscelesTrapezoidWeltTop(width, height, offsetX, offsetY); break; case "1003": data = createTrapezoidWeltTop(width, height, offsetX, offsetY); break; case "1004": data = createFoldWeltTop(width, height, offsetX, offsetY); break; case "1005": data = createRoundedCornersWeltTop(width, height, offsetX, offsetY); break; case "2001": data = createLineWeltTop(width, height, offsetX, offsetY); break; case "2002": data = createIsoscelesTrapezoidWeltTop(width, height, offsetX, offsetY); break; case "2003": data = createTrapezoidWeltTop(width, height, offsetX, offsetY); break; case "2004": data = createFoldWeltTop(width, height, offsetX, offsetY); break; case "2005": data = createRoundedCornersWeltTop(width, height, offsetX, offsetY); break; default: data = createNoneProject(); break; } return data; }; // 右上方盒舌 const createUpperBoxTongueRight = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => { if (!size) return createNoneProject(); // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 let data = {}; switch (upperBoxTongueType) { case "1001": data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2); break; case 1: data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2); break; default: data = createNoneProject(); break; } return data; }; // 右上方盒舌 const createBottomBoxTongueRight = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => { if (!size) return createNoneProject(); // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 let data = {}; switch (upperBoxTongueType) { case 0: data = createTopTongue(-deep, offsetX, offsetY, size, -2, 5, 0, true); break; case 1: data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2); break; default: data = createNoneProject(); break; } return data; }; const createBottomBoxTongueLeft = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => { if (!size) return createNoneProject(); // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 let data = {}; switch (upperBoxTongueType) { case 0: data = createTopTongue(deep, offsetX, offsetY, size, 2, 5, 1, false); break; case 1: data = createTopTongueType1(deep, offsetX, offsetY, -size, 3, 2); break; default: data = createNoneProject(); break; } return data; }; // 左边贴位 const createTrapezoidLeft = (trapezoidLeftType, height, size, offsetX, offsetY, dSFHS, dXFHS) => { if (!size) return createNoneProject(); let data = {}; switch (trapezoidLeftType) { case "8001": data = createWelt(height, size, offsetX, offsetY); break; case "8002": data = createWelt1(height, size, offsetX, offsetY); break; case "8003": data = createWelt2(height, size, offsetX, offsetY); break; case "8004": data = createWelt3(height, size, offsetX, offsetY); break; case "8005": data = createWelt4(height, size, offsetX, offsetY, dSFHS, dXFHS); break; default: data = createNoneProject(); break; } return data; }; // 右边贴位 const createTrapezoidRight = (trapezoidLeftType, height, size, offsetX, offsetY, dSFHS, dXFHS) => { if (!size) return createNoneProject(); let data = {}; switch (trapezoidLeftType) { case "9001": data = createWelt(height, size, offsetX, offsetY); break; case "9002": data = createWelt1(height, size, offsetX, offsetY); break; case "9003": data = createWelt2Right(height, size, offsetX, offsetY); break; case "9004": data = createWelt3Right(height, size, offsetX, offsetY); break; case "9005": data = createWelt4Right(height, size, offsetX, offsetY, dSFHS, dXFHS); break; default: data = createNoneProject(); break; } return data; }; // 左上部件 const createDynamicTopLeft = (trapezoidLeftType, width, height, size, offsetX, offsetY) => { if (!size) return createNoneProject(); let data = {}; const suffix = trapezoidLeftType?.slice(-2); switch (suffix) { case "01": data = createBoxComponentNew(width, height, size, offsetX, offsetY); break; case "02": data = createBoxComponentNew1(width, height, size, offsetX, offsetY); break; case "03": data = createBoxComponentNew2(width, height, size, offsetX, offsetY); break; case "04": data = createBoxComponentNew3(width, height, size, offsetX, offsetY); break; case "05": data = createBoxComponentNew4(width, height, size, offsetX, offsetY); break; case "06": data = createBoxComponentNew5(width, height, size, offsetX, offsetY); break; case "07": data = createBoxComponentNew6(width, height, size, offsetX, offsetY); break; case "4001": data = createBoxComponentNew(width, height, size, offsetX, offsetY); break; case "4002": data = createBoxComponentNew1(width, height, size, offsetX, offsetY); break; case "4003": data = createBoxComponentNew2(width, height, size, offsetX, offsetY); break; case "4004": data = createBoxComponentNew3(width, height, size, offsetX, offsetY); break; case "4005": data = createBoxComponentNew4(width, height, size, offsetX, offsetY); break; case "4006": data = createBoxComponentNew5(width, height, size, offsetX, offsetY); break; case "4007": data = createBoxComponentNew6(width, height, size, offsetX, offsetY); break; case "6001": data = createBoxComponentNew(width, height, size, offsetX, offsetY); break; case "6002": data = createBoxComponentNew1(width, height, size, offsetX, offsetY); break; case "6003": data = createBoxComponentNew2(width, height, size, offsetX, offsetY); break; case "6004": data = createBoxComponentNew3(width, height, size, offsetX, offsetY); break; case "6005": data = createBoxComponentNew4(width, height, size, offsetX, offsetY); break; case "6006": data = createBoxComponentNew5(width, height, size, offsetX, offsetY); break; case "6007": data = createBoxComponentNew6(width, height, size, offsetX, offsetY); break; case "7001": data = createBoxComponentNew(width, height, size, offsetX, offsetY); break; case "7002": data = createBoxComponentNew1(width, height, size, offsetX, offsetY); break; case "7003": data = createBoxComponentNew2(width, height, size, offsetX, offsetY); break; case "7004": data = createBoxComponentNew3(width, height, size, offsetX, offsetY); break; case "7005": data = createBoxComponentNew4(width, height, size, offsetX, offsetY); break; case "7006": data = createBoxComponentNew5(width, height, size, offsetX, offsetY); break; case "7007": data = createBoxComponentNew6(width, height, size, offsetX, offsetY); break; default: data = createNoneProject(); break; } return data; }; // 右上部件 const createDynamicTopRight = (trapezoidLeftType, width, height, size, offsetX, offsetY) => { if (!size) return createNoneProject(); let data = {}; switch (trapezoidLeftType) { case "6001": data = createBoxComponentNew(width, height, size, offsetX, offsetY); break; case 1: break; default: data = createNoneProject(); break; } return data; }; // 盒底组件 特殊的盒底组件 const createBoxBottomComponent = (trapezoidLeftType, width, deep, size, offsetX, offsetY) => { let data = {}; const suffix = trapezoidLeftType?.slice(-2); switch (suffix) { case "01": data = createRightAngleBoxBottomComponent(width, deep, size, offsetX, offsetY); break; case "02": data = createBoxBottomComponent1(width, deep, size, offsetX, offsetY); break; case "03": data = createBoxBottomComponent2(width, deep, size, offsetX, offsetY); break; case "04": data = createBoxBottomComponent3(width, deep, size, offsetX, offsetY); break; case "05": data = createBoxBottomComponent4(width, deep, size, offsetX, offsetY); break; case "06": data = createBoxBottomComponent5(width, deep, size, offsetX, offsetY); break; case "07": data = createBoxBottomComponent6(width, deep, size, offsetX, offsetY); break; default: data = createNoneProject(); break; } return data; }; // 天地盒部件 const createFull = (trapezoidLeftType, width, deep, size, offsetX, offsetY) => { if (!size) return createNoneProject(); const suffix = trapezoidLeftType?.slice(-2); switch (suffix) { case "01": // 4001,10001,12001,13001,15001,6001 return createBoxComponentNewFull(width, deep, size, offsetX, offsetY); case "02": // 4002,10002,11002,12002,13002,15002,6002 return createBoxComponentNewFull1(width, size, offsetX, offsetY); case "03": // 4003,6003 return createBoxComponentNewFull2(width, size, offsetX, offsetY); case "04": // 4004,6004 return createBoxComponentNewFul3(width, deep, size, offsetX, offsetY); case "05": // 4005,6005 return createBoxComponentNewFul4(width, deep, size, offsetX, offsetY); case "06": // 4006,6006 return createBoxComponentNewFul5(width, deep, size, offsetX, offsetY); case "07": // 4007,6007 return createBoxComponentNewFul6(width, deep, size, offsetX, offsetY); default: return createNoneProject(); } }; return (
); }; export default SvgBox;