diff --git a/src/components/Common/BoxDesign/createAirplaneBox.js b/src/components/Common/BoxDesign/createAirplaneBox.js new file mode 100644 index 0000000..0fa3924 --- /dev/null +++ b/src/components/Common/BoxDesign/createAirplaneBox.js @@ -0,0 +1,969 @@ +/* eslint-disable */ +// 创建飞机盒盒身 +const boxContent = (width, height, offsetX, offsetY) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + width} ${offsetY + height} L ${offsetX + + width} ${offsetY} L ${offsetX} ${offsetY} Z`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + svg.setAttribute("stroke-dasharray", "3.8"); // 添加虚线效果 + return svg; +}; +// 创建飞机盒上盒部件 +const createBoxTop = (width, height, offsetX, offsetY, outerWidth) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${width} ${offsetY} A ${height} ${height} 0 0 1 ${width + outerWidth} ${offsetX} L ${offsetX - + outerWidth} ${offsetY + height} A ${height} ${height} 0 0 1 ${offsetX} ${offsetY}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +// 创建飞机左上部件 +const createBoxLeftTop = (width, height, offsetX, offsetY, isLeft) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX - width + (isLeft ? 5 : -5)} ${offsetY + 5} A 10 10 0 0 ${isLeft ? 0 : 1} ${offsetX - + width} ${offsetY + 15} L ${offsetX - width} ${offsetY + height - 15} + A 10 10 0 0 ${isLeft ? 0 : 1} ${offsetX - width + (isLeft ? 5 : -5)} ${offsetY + height - 5} L ${offsetX} ${offsetY + height}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +const createBoxDown = (width, height, offsetX, offsetY) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX - width} ${offsetY} L ${offsetX - width} ${offsetY + height} L ${offsetX} ${offsetY + height}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +const createBoxComponent = (D, d1, dD, height, offsetX, offsetY, outerHeight) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + // const h = height - 8; + // 短脚尺寸 + const dJj = height * 0.05; + const dD1 = 5; + // 计算突出的高度 + const dTW1 = (height / 2) * 0.1; + const dTW2 = (height / 2) * 0.2; + const dTW = height / 2 - dTW2 * 2 - dTW1; + const d = `M ${offsetX} ${offsetY} + L ${offsetX - D} ${offsetY} + L ${offsetX - D} ${offsetY + height} + L ${offsetX - D} ${offsetY} + L ${offsetX - D - outerHeight} ${offsetY + dTW1} + L ${offsetX - D - outerHeight} ${offsetY + height - dTW1} + L ${offsetX - D - outerHeight} ${offsetY + dTW1} + L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1} + L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 - 2} + L ${offsetX - D - outerHeight - d1 - dD} ${offsetY + dTW1 + dTW2} + L ${offsetX - D - outerHeight - d1 - dD} ${offsetY + dTW1 + dTW2 + dTW - 2} + L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW} + L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW + dTW2} + L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 - 2} + L ${offsetX - D - outerHeight - d1 - dD} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2} + L ${offsetX - D - outerHeight - d1 - dD} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW - 2} + L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW} + L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW + dTW2} + L ${offsetX - D - outerHeight} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW + dTW2} + L ${offsetX - D} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW + dTW2 + dTW1} + L ${offsetX} ${offsetY + height} + `; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; + +// 盒身 +export const createPathElement = (x, y, width, height, id, wrapperId) => { + const d = `M ${x} ${y} L ${x} ${y + height} L ${x + width} ${y + height} L ${x + width} ${y} L ${x} ${y} Z`; + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "red"); + svg.setAttribute("stroke-width", "1"); + svg.setAttribute("stroke-dasharray", "4"); // 添加虚线效果 + return svg; +}; + +// +// 左边斜线贴边 +export const createTrapezoid = (height, offsetX, offsetY, size) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX - size} ${offsetY + 2} L ${offsetX - size} ${offsetY + height - 2} L ${offsetX} ${offsetY + height}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +// 左上盒舌 盒舌 x轴原点 y轴原点 高度 x轴方向偏移 y轴方向偏移 是否瞬时针 是否镜像 type0 +export const createTopTongue = (width, offsetX, offsetY, size, xz, yz, clockwise, isMirror, az, jxY) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + az} L ${offsetX + xz} ${offsetY - size} L ${offsetX + + width - + (isMirror ? -(yz * 2) : yz * 2)} ${offsetY - size} + A ${yz} ${yz} 0 0 ${clockwise} ${offsetX + width - (isMirror ? -yz : yz)} ${offsetY - size + jxY} L ${offsetX + width} ${offsetY}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +// 下边 +export const createBottomTongue = (width, offsetX, offsetY, size, xz, yz, clockwise, isMirror, az, jxY) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + az} L ${offsetX + xz} ${offsetY - size} L ${offsetX + + width - + (isMirror ? -(yz * 2) : yz * 2)} ${offsetY - size} + A ${yz} ${yz} 0 0 ${clockwise} ${offsetX + width - (isMirror ? -yz : yz)} ${offsetY - size + jxY} L ${offsetX + width} ${offsetY}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +// 上盒舌类型1 +export const createTopTongueType1 = (width, offsetX, offsetY, size, xz, yz) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + size} L ${offsetX + width - xz + yz} ${offsetY + size} L${offsetX + + width} ${offsetY} `; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +export const createDynamicTop = (width, height, deep, offsetX, offsetY, size) => { + const isSignNum = Math.sign(deep) === 1 ? 2 : -2; + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + // 动态生成路径，基于输入参数 + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY - deep - size + isSignNum} A 2 2 0 0 1 ${offsetX + 2} ${offsetY - deep - size} + L ${offsetX + width - 2} ${offsetY - deep - size} A 2 2 0 0 1 ${offsetX + width} ${offsetY - deep - size + isSignNum} L ${offsetX + + width} ${offsetY - deep} + L ${offsetX} ${offsetY - deep} L ${offsetX + width} ${offsetY - deep} L ${offsetX + width} ${offsetY} `; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +const createBottomCy = (width, height, offsetX, offsetY) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX + 2} ${offsetY + height} L ${offsetX + width / 2} ${offsetY + height} + L ${offsetX + width} ${offsetY}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +const createBottomDh = (width, height, offsetX, offsetY) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX + 5} ${offsetY + height} L ${offsetX + width / 2 - 10} ${offsetY + height} + A 10 10 0 0 0 ${offsetX + width / 2} ${offsetY + height - 10} A 5 5 0 0 1 ${offsetX + width / 2 + 5} ${offsetY + height - 10} + L ${offsetX + width * 0.75} ${offsetY + height} L ${offsetX + width} ${offsetY + height} L ${offsetX + width} ${offsetY + 5} + L ${offsetX + width - 3} ${offsetY + 3} L ${offsetX + width} ${offsetY}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +// 添加标注 +export const createText = (offsetX, offsetY, size, textContent) => { + const text = document.createElementNS("http://www.w3.org/2000/svg", "text"); + text.setAttribute("x", offsetX); // 文字水平居中 + text.setAttribute("y", offsetY); // 文字垂直居中 + text.setAttribute("text-anchor", "middle"); // 文字水平居中 + text.setAttribute("dominant-baseline", "middle"); // 文字垂直居中 + text.setAttribute("fill", "#333"); // 文字颜色 + text.setAttribute("font-size", size); // 文字大小 + text.textContent = textContent || "Text"; // 默认文字内容 + return text; +}; +// 竖向双箭头 +export const createDoubleArrow = (height, offsetX, offsetY, scale) => { + const Y = -3 * (scale ? scale : 1); + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY - height / 2 - Y} L ${offsetX + Y} ${offsetY - height / 2 - Y} L ${offsetX} ${offsetY - + height / 2} + L ${offsetX - Y} ${offsetY - height / 2 - Y} L ${offsetX} ${offsetY - height / 2 - Y} L ${offsetX} ${offsetY + height / 2 + Y} L + ${offsetX - Y} ${offsetY + height / 2 + Y} L ${offsetX} ${offsetY + height / 2} L ${offsetX + Y} ${offsetY + + height / 2 + + Y} L ${offsetX} ${offsetY + height / 2 + Y}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "#F5AD6C"); + svg.setAttribute("stroke", "#F5AD6C"); + svg.setAttribute("stroke-width", "1"); + + return svg; +}; +// 横向双箭头 +export const createHorizontalDoubleArrow = (width, offsetX, offsetY, scale) => { + const Y = 3 * (scale ? scale : 1); + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX - width / 2 + Y} ${offsetY} L ${offsetX - width / 2 + Y} ${offsetY - Y} L ${offsetX - + width / 2} ${offsetY} + L ${offsetX - width / 2 + Y} ${offsetY + Y} L ${offsetX - width / 2 + Y} ${offsetY} L ${offsetX + width / 2 - Y} ${offsetY} L ${offsetX + + width / 2 - + Y} ${offsetY + Y} L ${offsetX + width / 2} ${offsetY} + L ${offsetX + width / 2 - Y} ${offsetY - Y} L ${offsetX + width / 2 - Y} ${offsetY}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "#F5AD6C"); + svg.setAttribute("stroke", "#F5AD6C"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +// 左右直线贴边 +const createLineWelt = (width, height, offsetX, offsetY) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX + width} ${offsetY} L ${offsetX + width} ${offsetY + height} L ${offsetX} ${offsetY + height}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; + +const createLine = (height, offsetX, offsetY) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + svg.setAttribute("stroke-dasharray", "3.8"); // 添加虚线效果 + return svg; +}; +// 没选部件的时候展示空白 +export const createNoneProject = () => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = ``; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +// 自动扣抵盒 +export function createDeductionBox(slaveRowData) { + const pathList = []; + const { W, L, D, dg, dc, db } = slaveRowData; + const width = L; + const height = D; + const deep = W; + // 盒身 + const rectangles = [ + { x: 0, y: 0, width: deep, height, id: "ac_path_c795a39_2oj", wrapperId: "3476" }, + { x: 0 + deep, y: 0, width: width, height, id: "ac_path_c795a39_2on", wrapperId: "3480" }, + { x: 0 + deep + width, y: 0, width: deep, height, id: "ac_path_c795a39_2or", wrapperId: "3484" }, + { x: 0 + deep * 2 + width, y: 0, width: width, height, id: "ac_path_c795a39_2ov", wrapperId: "3488" }, + ]; + rectangles.forEach(rect => { + pathList.push(createPathElement(rect.x, rect.y, rect.width, rect.height, rect.id, rect.wrapperId)); + }); + pathList.push(createTrapezoid(height, deep * 2 + width * 2, 0, -dg)); + pathList.push(createTopTongue(deep, 0, 0, db, 2, 5, 1, false)); + pathList.push(createTopTongue(-deep, deep * 2 + width, 0, db, -2, 5, 0, true)); + pathList.push(createDynamicTop(width, height, deep, deep * 2 + width, 0, dc)); + pathList.push(createBottomCy(deep, dc - 10, 0, height)); + pathList.push(createBottomCy(deep, dc - 10, deep + width, height)); + pathList.push(createBottomDh(width, dc, deep, height)); + pathList.push(createBottomDh(width, dc, deep * 2 + width, height)); + pathList.push(createHorizontalDoubleArrow(width, deep + width / 2, height * 0.3)); + pathList.push(createHorizontalDoubleArrow(deep, deep + width + deep / 2, height * 0.5)); + pathList.push(createHorizontalDoubleArrow(dg, deep * 2 + width * 2 + dg / 2, height * 0.5)); + pathList.push(createDoubleArrow(db, deep + width + deep * 0.2, -db / 2, -3)); + pathList.push(createDoubleArrow(height, deep * 2 + width + width * 0.5, height / 2, -3)); + pathList.push(createDoubleArrow(dc, deep * 2 + width + width * 0.5, -deep - dc / 2, -3)); + pathList.push(createText(deep + width / 2, height * 0.3 + 15, 14, "L")); + pathList.push(createText(deep + width + deep / 2, height * 0.5 + 15, 14, "W")); + pathList.push(createText(deep * 2 + width * 2 + dg / 2, height * 0.5 + 15, 14, "g")); + pathList.push(createText(deep + width + deep * 0.2 + 8, -db / 2, 14, "b")); + pathList.push(createText(deep * 2 + width + width * 0.5 + 8, height / 2, 14, "D")); + pathList.push(createText(deep * 2 + width + width * 0.5 + 8, -deep - dc / 2, 14, "c")); + return pathList; +} +// 飞机盒 +export function createAirplaneBox(slaveRowData) { + const { W, L, D, dF5, dD3, dF, dD1, dTd } = slaveRowData; + const pathList = []; + const width = L; + const height = W; + const deep = D; + const dD = dTd; + // 盒身 + const rectangles = [ + { x: 0, y: 0, width: width - 8 * 2, height: height }, + { x: 0 - 4, y: height, width: width - 4 * 2, height: dD3 }, + { x: 0 - 8, y: height + dD3, width: width, height: height }, + { x: 0 - 4, y: height + dD3 + height, width: width - 4 * 2, height: dD3 }, + ]; + pathList.push(createBoxTop(width - 8 * 2, dD3, 0, -dD3, dF5)); + pathList.push(createBoxLeftTop(dF5, height, 0, 0, true)); + pathList.push(createBoxLeftTop(-dF5, height, width - 8 * 2, 0, false)); + pathList.push(createBoxDown(dF, dD3, -4, height)); + pathList.push(createBoxDown(-dF, dD3, width - 4 * 2 - 4, height)); + pathList.push(createBoxDown(dF, dD3, -4, height * 2 + dD3)); + pathList.push(createBoxDown(-dF, dD3, width - 4 * 2 - 4, height * 2 + dD3)); + pathList.push(createBoxComponent(deep, dD1, dD, height, 0 - 8, height + dD3, dD)); + pathList.push(createBoxComponent(-deep, -dD1, -dD, height, width - 8, height + dD3, -dD)); + // 竖向 + pathList.push(createDoubleArrow(dD3, L * 0.3, -dD3 / 2, -3)); + pathList.push(createText(L * 0.3 + 10, -dD3 / 2, 14, "d3")); + pathList.push(createDoubleArrow(height, -15, height + dD3 + height / 2, -3)); + pathList.push(createText(-25, height + dD3 + height / 2, 14, "W")); + // 横向 + pathList.push(createHorizontalDoubleArrow(dF5, -dF5 / 2, height / 2)); + pathList.push(createText(-dF5 / 2, height / 2 + 10, 14, "f5")); + pathList.push(createHorizontalDoubleArrow(width, width / 2 - 8, dD3 + height + height * 0.2)); + pathList.push(createText(width / 2 - 8, dD3 + height + height * 0.2 + 10, 14, "L")); + pathList.push(createHorizontalDoubleArrow(deep, width + deep / 2 - 8, dD3 + height + height * 0.2)); + pathList.push(createText(width + deep / 2 - 8, dD3 + height + height * 0.2 + 10, 14, "D")); + pathList.push(createHorizontalDoubleArrow(dD1, width + deep + dD1 / 2 + dD - 8, dD3 + height + height * 0.2)); + pathList.push(createText(width + deep + dD1 / 2 + dD - 8, dD3 + height + height * 0.3 + 6, 14, "d1")); + pathList.push(createHorizontalDoubleArrow(dD, width + deep + dD1 + dD / 2 + dD - 8, dD3 + height + height * 0.2)); + pathList.push(createText(width + deep + dD1 + dD / 2 + dD - 8, dD3 + height + height * 0.3 + 6, 14, "d")); + pathList.push(createHorizontalDoubleArrow(dF, width - 12 + dF / 2, dD3 + height * 2 + dD3 / 2)); + pathList.push(createText(width - 12 + dF / 2, dD3 + height * 2 + dD3 / 2 + 10, 14, "f")); + rectangles.forEach(x => { + pathList.push(boxContent(x.width, x.height, x.x, x.y)); + }); + + return pathList; +} +// 手提袋 +export function createTote(slaveRowData) { + const pathList = []; + const { W, L, D, dF, dF1, dF2 } = slaveRowData; + const rectangles = [ + { x: 0, y: 0, width: L, height: D }, + { x: L, y: 0, width: W, height: D }, + { x: L + W, y: 0, width: L, height: D }, + { x: L + W + L, y: 0, width: W, height: D }, + ]; + rectangles.forEach(x => { + pathList.push(boxContent(x.width, x.height, x.x, x.y)); + }); + pathList.push(createLineWelt(-dF, D, 0, 0)); + pathList.push(createLineWeltTop(dF + L * 2 + W * 2, -dF1, -dF, 0)); + pathList.push(createLineWeltTop(dF + L * 2 + W * 2, dF2, -dF, D)); + pathList.push(createLine(dF1, 0, -dF1)); + pathList.push(createLine(dF1, L, -dF1)); + pathList.push(createLine(dF2, 0, D)); + pathList.push(createLine(dF2, L, D)); + pathList.push(createLine(dF1 + D + dF2, L + W / 2, -dF1)); + pathList.push(createLine(dF1, L + W, -dF1)); + pathList.push(createLine(dF1, L * 2 + W, -dF1)); + pathList.push(createLine(dF2, L + W, D)); + pathList.push(createLine(dF2, L * 2 + W, D)); + pathList.push(createLine(dF1 + D + dF2, L * 2 + W + W / 2, -dF1)); + + // 横向 + pathList.push(createHorizontalDoubleArrow(dF, -dF / 2, D / 2)); + pathList.push(createText(-dF / 2, D / 2 + 10, 14, "f")); + pathList.push(createHorizontalDoubleArrow(L, L / 2, D / 2, -3)); + pathList.push(createText(L / 2, D / 2 + 10, 14, "L")); + pathList.push(createHorizontalDoubleArrow(W, L + W / 2, D / 2, -3)); + pathList.push(createText(L + W / 2, D / 2 + 10, 14, "W")); + // 竖向 + pathList.push(createDoubleArrow(dF1, L + W + L / 2, -dF1 / 2, -3)); + pathList.push(createText(L + W + L / 2 + 10, -dF1 / 2, 14, "f1")); + pathList.push(createDoubleArrow(dF2, L + W + L / 2, D + dF2 / 2, -3)); + pathList.push(createText(L + W + L / 2 + 10, D + dF2 / 2, 14, "f2")); + pathList.push(createDoubleArrow(D, L + W + 10, D / 2, -3)); + pathList.push(createText(L + W + 20, D / 2, 14, "D")); + return pathList; +} +// 普通盒 +export function createBoxs(slaveRowData) { + const pathList = []; + const { W, L, D, dF, dG } = slaveRowData; + const rectangles = [ + { x: 0, y: 0, width: L, height: D }, + { x: L, y: 0, width: W, height: D }, + { x: L + W, y: 0, width: L, height: D }, + { x: L + W + L, y: 0, width: W, height: D }, + ]; + rectangles.forEach(x => { + pathList.push(boxContent(x.width, x.height, x.x, x.y)); + }); + pathList.push(createTrapezoid(D, 0, 0, dG)); + pathList.push(createLineWeltTop(L * 2 + W * 2, -dF, 0, 0)); + pathList.push(createLineWeltTop(L * 2 + W * 2, dF, 0, D)); + pathList.push(createLine(dF, L, -dF)); + pathList.push(createLine(dF, L + W, -dF)); + pathList.push(createLine(dF, L * 2 + W, -dF)); + pathList.push(createLine(dF, L, D)); + pathList.push(createLine(dF, L + W, D)); + pathList.push(createLine(dF, L * 2 + W, D)); + + pathList.push(createHorizontalDoubleArrow(dG, -dG / 2, D / 2)); + pathList.push(createText(-dG / 2, D / 2 + 10, 14, "g")); + + pathList.push(createHorizontalDoubleArrow(W, L + W / 2, D * 0.7)); + pathList.push(createText(L + W / 2, D * 0.7 + 10, 14, "W")); + + pathList.push(createHorizontalDoubleArrow(L, L + W + L / 2, D / 2)); + pathList.push(createText(L + W + L / 2, D / 2 + 10, 14, "L")); + + pathList.push(createDoubleArrow(D, L + W + L * 0.2, D / 2, -3)); + pathList.push(createText(L + W + L * 0.2 + 10, D / 2, 14, "D")); + + pathList.push(createDoubleArrow(dF, L + W + L * 0.6, -dF / 2, -3)); + pathList.push(createText(L + W + L * 0.6 + 10, -dF / 2, 14, "f")); + + return pathList; +} +// 天地盖 +export function createHeavenBox(slaveRowData) { + const pathList = []; + const { W, L, D, dF, dF1, dD1, dZBJJ } = slaveRowData; + const rectangles = [{ x: 0, y: 0, width: L, height: W }, { x: L + D + dZBJJ + dD1, y: -2, width: L + 4, height: W + 4 }]; + rectangles.forEach(x => { + pathList.push(boxContent(x.width, x.height, x.x, x.y)); + }); + pathList.push(createLineWelt(-D, W, 0, 0)); + pathList.push(createLineWelt(D, W, L, 0)); + pathList.push(createLineWelt(-dD1, W + 4, L + D + dZBJJ + dD1, -2)); + pathList.push(createLineWelt(dD1, W + 4, L * 2 + 4 + D + dZBJJ + dD1, -2)); + + pathList.push(createLineWeltTop(D * 2 + L, -dF, -D, 0)); + pathList.push(createLineWeltTop(D * 2 + L, dF, -D, W)); + pathList.push(createLineWeltTop(dD1 * 2 + L + 4, -dF1, L + D + dZBJJ, -2)); + pathList.push(createLineWeltTop(dD1 * 2 + L + 4, dF1, L + D + dZBJJ, W + 2)); + + pathList.push(createLine(dF, 0, -dF)); + pathList.push(createLine(dF, L, -dF)); + pathList.push(createLine(dF1, L + D + dZBJJ + dD1, -dF1 - 2)); + pathList.push(createLine(dF1, L + D + dZBJJ + dD1 + L + 4, -dF1 - 2)); + pathList.push(createLine(dF, 0, W)); + pathList.push(createLine(dF, L, W)); + pathList.push(createLine(dF1, L + D + dZBJJ + dD1, W + 2)); + pathList.push(createLine(dF1, L + D + dZBJJ + dD1 + L + 4, W + 2)); + + // 横向标注 + pathList.push(createHorizontalDoubleArrow(L, L / 2, W * 0.3)); + pathList.push(createText(L / 2, W * 0.3 + 10, 14, "L")); + pathList.push(createHorizontalDoubleArrow(D, L + D / 2, W / 2)); + pathList.push(createText(L + D / 2, W / 2 + 10, 14, "D")); + pathList.push(createHorizontalDoubleArrow(dD1, L + D + dZBJJ + dD1 + L + 4 + dD1 / 2, W / 2)); + pathList.push(createText(L + D + dZBJJ + dD1 + L + 4 + dD1 / 2, W / 2 + 10, 14, "d1")); + // 竖向 + pathList.push(createDoubleArrow(dF, L + D / 2, -dF / 2, -3)); + pathList.push(createText(L + D / 2 + 10, -dF / 2, 14, "f")); + pathList.push(createDoubleArrow(dF + 2, L + D + dZBJJ + dD1 + L + 4 + dD1 / 2, -dF / 2 - 1, -3)); + pathList.push(createText(L + D + dZBJJ + dD1 + L + 4 + dD1 / 2 + 10, -dF / 2, 14, "f1")); + return pathList; +} + +// 盘式盒 +export function createDiscBox(slaveRowData) { + const pathList = []; + const { W, L, D, dF, dD1, dTd, dDj } = slaveRowData; + const dTW1 = (W / 2) * 0.1; + const dTW2 = (W / 2) * 0.2; + const dTW = W / 2 - dTW2 * 2 - dTW1; + const rectangles = [ + { x: 0, y: 0, width: L - 4, height: D }, + { x: -2, y: D, width: L, height: W }, + { x: 0, y: D + W, width: L - 4, height: D }, + { x: -2, y: D + dTW1 + dTW2, width: 5, height: dTW }, + { x: L - 7, y: D + dTW1 + dTW2, width: 5, height: dTW }, + { x: -2, y: D + W - dTW1 - dTW2 - dTW, width: 5, height: dTW }, + { x: L - 7, y: D + W - dTW1 - dTW2 - dTW, width: 5, height: dTW }, + ]; + rectangles.forEach(x => { + pathList.push(boxContent(x.width, x.height, x.x, x.y)); + }); + pathList.push(createBoxDown(dF, D - 4, 0, 2)); + pathList.push(createBoxDown(-dF, D - 4, L - 4, 2)); + pathList.push(createBoxDown(dF, D - 4, 0, D + W + 2)); + pathList.push(createBoxDown(-dF, D - 4, L - 4, D + W + 2)); + pathList.push(createBoxComponent(D, dD1, dTd, W, 0 - 2, D, dDj)); + pathList.push(createBoxComponent(-D, -dD1, -dTd, W, L, D, -dDj)); + // 横向标注 + pathList.push(createHorizontalDoubleArrow(L, (L - 2) / 2, D + W * 0.3)); + pathList.push(createText((L - 2) / 2, D + W * 0.3 + 10, 14, "L")); + pathList.push(createHorizontalDoubleArrow(D, L + D / 2, D + 10)); + pathList.push(createText(L + D / 2, D + 15, 14, "D")); + // 竖向 + pathList.push(createDoubleArrow(W, -D / 2, D + W / 2, -3)); + pathList.push(createText(-D / 2, D + W / 2 + 10, 14, "W")); + return pathList; +} +// 展示盒f1 +const createShowBoxF1 = (width, height, offsetX, offsetY, size) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX - width} ${offsetY + size + 1} L ${offsetX - width} ${offsetY + + height} L ${offsetX} ${offsetY + height} Z`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +// 展示盒机翼 +const createShowBoxWing = (width, height, offsetX, offsetY, size) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + height} L ${offsetX + width} ${offsetY}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +// 展示盒f1 +const createShowBoxF2 = (width, height, offsetX, offsetY, size) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + size} ${offsetY + height + size} + L ${offsetX + width} ${offsetY + height + size} L ${offsetX + width} ${offsetY + -size * 2} L ${offsetX} ${offsetY}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +// 展示盒 +export function createShowBox(slaveRowData) { + const pathList = []; + const { L, W, D, dD2, dF1, dF2 } = slaveRowData; + const rectangles = [{ x: 0, y: 0, width: D, height: W }, { x: D, y: 0, width: L, height: W }, { x: D + L, y: 0, width: dD2, height: W }]; + rectangles.forEach(x => { + pathList.push(boxContent(x.width, x.height, x.x, x.y)); + }); + pathList.push(createShowBoxF1(dF1, -D, D, 0, -3)); + pathList.push(createShowBoxF1(dF1, D, D, W, 3)); + pathList.push(createShowBoxWing(L, -dD2, D, 0, -D)); + pathList.push(createShowBoxWing(L, dD2, D, W, D)); + pathList.push(createShowBoxF2(dF2, -dD2, D + L, 0, 2)); + pathList.push(createShowBoxF2(dF2, dD2, D + L, W, -2)); + // 横向标注 + pathList.push(createHorizontalDoubleArrow(L, D + L / 2, W * 0.3)); + pathList.push(createText(D + L / 2, W * 0.3 + 10, 14, "L")); + pathList.push(createHorizontalDoubleArrow(dF1, dF1 / 2, -D / 2)); + pathList.push(createText(dF1 / 2, -D / 2 + 10, 14, "f1")); + + pathList.push(createHorizontalDoubleArrow(D, D / 2, W / 2)); + pathList.push(createText(D / 2, W / 2 + 10, 14, "D")); + + pathList.push(createHorizontalDoubleArrow(dF2, D + L + dF2 / 2, -dD2 / 2)); + pathList.push(createText(D + L + dF2 / 2, -dD2 / 2 + 10, 14, "f2")); + + pathList.push(createHorizontalDoubleArrow(dD2, D + L + dD2 / 2, W / 2)); + pathList.push(createText(D + L + dD2 / 2, W / 2 + 10, 14, "D2")); + // 竖向 + pathList.push(createDoubleArrow(W, D + L * 0.8, W / 2, -3)); + pathList.push(createText(D + L * 0.8 + 10, D + W / 2, 14, "W")); + return pathList; +} +// 内衬槽 +const createInnerLiningGroove = (width, height, offsetX, offsetY) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height - width / 2} A ${width / 2} ${width / 2} 0 0 0 ${offsetX - width} ${offsetY + + height} L ${offsetX - width} ${offsetY}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +// 内衬 +export function createLiningBox(slaveRowData) { + const pathList = []; + const { L, W, D, dCk, dY, dX } = slaveRowData; + const rectangles = [{ x: 0, y: 0, width: L, height: D }]; + rectangles.forEach(x => { + pathList.push(boxContent(x.width, x.height, x.x, x.y)); + }); + const width = (L - dX * 2) / (dCk - 1); + for (let index = 0; index < Number(dCk); index++) { + pathList.push(createInnerLiningGroove(3, dY, L - dX - width * index, 0)); + } + // 横向标注 + pathList.push(createHorizontalDoubleArrow(L, L / 2, D * 0.9)); + pathList.push(createText(L / 2, D * 0.9 - 10, 14, "L")); + pathList.push(createHorizontalDoubleArrow(dX, L - dX / 2, dY / 2)); + pathList.push(createText(L - dX / 2, dY / 2 + 10, 14, "x")); + // 竖向 + pathList.push(createDoubleArrow(D, dX / 2 - 5, D / 2, -3)); + pathList.push(createText(dX / 2, D / 2, 12, "D")); + return pathList; +} +const createDiagonalEdging = (width, height, offsetX, offsetY) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX + 5} ${offsetY + height} L ${offsetX + width - 5} ${offsetY + height} L${offsetX + + width} ${offsetY}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +// 信封 +export function createEnvelope(slaveRowData) { + const pathList = []; + const { L, W, D, dF1, dS1 } = slaveRowData; + const rectangles = [{ x: 0, y: 0, width: W, height: L }]; + rectangles.forEach(x => { + pathList.push(boxContent(x.width, x.height, x.x, x.y)); + }); + pathList.push(createTrapezoid(L, 0, 0, dS1)); + pathList.push(createDiagonalEdging(W, -dF1, 0, 0)); + pathList.push(createDiagonalEdging(W, dF1, 0, L)); + pathList.push(createLineWelt(W, L, W, 0)); + + // 横向标注 + pathList.push(createHorizontalDoubleArrow(W, W / 2, L * 0.3)); + pathList.push(createText(W / 2, D * 0.3 + 10, 14, "W")); + pathList.push(createHorizontalDoubleArrow(dS1, -dS1 / 2, L / 2)); + pathList.push(createText(-dS1 / 2, L / 2 + 10, 14, "s1")); + // 竖向 + pathList.push(createDoubleArrow(L, W * 0.8, L / 2, -3)); + pathList.push(createText(W * 0.8 + 10, L / 2, 14, "L")); + pathList.push(createDoubleArrow(dF1, W * 0.7, L + dF1 / 2, -3)); + pathList.push(createText(W * 0.7 + 10, L + dF1 / 2, 14, "f1")); + return pathList; +} +// 抽屉盒 +// export function +const createSvg = d => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#7588B9"); + svg.setAttribute("stroke-width", "1"); + return svg; +}; +const createDasharraySvg = d => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + svg.setAttribute("stroke-dasharray", "4"); + return svg; +}; +// 添加虚线效果 +// 上下直线贴边 +export const createLineWeltTop = (width, height, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + width} ${offsetY + height} L ${offsetX + width} ${offsetY}`; + return createSvg(d); +}; + +// 上方盒舌等腰梯形 +export const createIsoscelesTrapezoidWeltTop = (width, height, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.1} ${offsetY + height} L ${offsetX + width * 0.9} ${offsetY + height} L ${offsetX + + width} ${offsetY}`; + return createSvg(d); +}; +// 盒舌梯形 +export const createTrapezoidWeltTop = (width, height, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.5} ${offsetY + height} L ${offsetX + width * 0.9} ${offsetY + height} L ${offsetX + + width} ${offsetY}`; + return createSvg(d); +}; +// 盒舌折叠 +export const createFoldWeltTop = (width, height, offsetX, offsetY) => { + // 判断高度正负值 + const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.1} ${offsetY + height * 0.5} L ${offsetX + width * 0.5} ${offsetY + height * 0.5} + L ${offsetX + width * 0.5} ${offsetY + height * 0.9} L ${offsetX + width} ${offsetY + height} L ${offsetX + width} ${offsetY} + `; + return createSvg(d); +}; +// 盒舌折叠虚线 +export const createFoldWeltTopLine = (width, height, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} ${offsetX + width} ${offsetY + height} `; + return createDasharraySvg(d); +}; +// 盒舌圆角 +export const createRoundedCornersWeltTop = (width, height, offsetX, offsetY) => { + const isNegative = (width > 0 && height > 0) || (width < 0 && height < 0); + + const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.1} ${offsetY + height * 0.9} L ${offsetX + width} ${offsetY + height} L ${offsetX + + width} ${offsetY}`; + return createSvg(d); +}; +// 盒底组件 直角 +export const createRightAngleBoxBottomComponent = (width, deep, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + size} L ${offsetX + width} ${offsetY} + L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep} ${offsetY} + L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY} + L ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY + size} L ${offsetX + + width + + deep + + width + + deep} ${offsetY}`; + return createSvg(d); +}; +// 盒底组件 5002 +export const createBoxBottomComponent1 = (width, deep, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.2} ${offsetY + size * 0.5} L ${offsetX + width * 0.2} ${offsetY + size} L ${offsetX + + width * 0.8} ${offsetY + size} L ${offsetX + width * 0.8} ${offsetY + size * 0.5} L ${offsetX + width} ${offsetY} + L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + + size * 0.5} L ${offsetX + width + deep} ${offsetY} + L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width * 0.2} ${offsetY + size} L ${offsetX + + width + + deep + + width * 0.2} ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.8} ${offsetY + size * 0.5} L ${offsetX + + width + + deep + + width * 0.8} ${offsetY + size} + L ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY} + L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + size * 0.5} L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + + size} L ${offsetX + width + deep + width + deep} ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY} + `; + return createSvg(d); +}; +// 盒底组件 5003 +export const createBoxBottomComponent2 = (width, deep, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} + L ${offsetX + width * 0.2} ${offsetY + size} L ${offsetX + width * 0.8} ${offsetY + size} L ${offsetX + width} ${offsetY} + L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + + size * 0.5} L ${offsetX + width + deep} ${offsetY} + L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width * 0.2} ${offsetY + size} L ${offsetX + + width + + deep + + width * 0.2} ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.8} ${offsetY + size * 0.5} L ${offsetX + + width + + deep + + width * 0.8} ${offsetY + size} ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY} + L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + size * 0.5} L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + + size} L ${offsetX + width + deep + width + deep} ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY} + + `; + return createSvg(d); +}; +// 盒底组件 5004 +export const createBoxBottomComponent3 = (width, deep, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} + L ${offsetX + width * 0.05} ${offsetY + size} L ${offsetX + width * 0.25} ${offsetY + size} L ${offsetX + width * 0.5} ${offsetY + + size * 0.5} L ${offsetX + width * 0.75} ${offsetY + size} L ${offsetX + width * 0.95} ${offsetY + size} L ${offsetX + width} ${offsetY} + L ${offsetX + width + deep * 0.1} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + size} L ${offsetX + width + deep} ${offsetY} + L ${offsetX + width + deep + width * 0.05} ${offsetY + size} L ${offsetX + width + deep + width * 0.25} ${offsetY + size} L ${offsetX + + width + + deep + + width * 0.5} ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.75} ${offsetY + size} L ${offsetX + + width + + deep + + width * 0.95} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY} + L ${offsetX + width * 2 + deep + deep * 0.5} ${offsetY + size} L ${offsetX + width * 2 + deep + deep * 0.9} ${offsetY + size} L ${offsetX + + width * 2 + + deep + + deep} ${offsetY + size} L ${offsetX + width * 2 + deep * 2} ${offsetY} + `; + return createSvg(d); +}; +// 盒底组件 5005 +export const createBoxBottomComponent4 = (width, deep, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} + L ${offsetX} ${offsetY + size} L ${offsetX + width * 0.3} ${offsetY + size} L ${offsetX + width} ${offsetY} + L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep * 0.3} ${offsetY + size} L ${offsetX + width + deep} ${offsetY} + L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width * 0.3} ${offsetY + size} L ${offsetX + width * 2 + deep} ${offsetY} + L ${offsetX + width * 2 + deep} ${offsetY + size} L ${offsetX + width * 2 + deep + deep * 0.3} ${offsetY + size} L ${offsetX + + width * 2 + + deep * 2} ${offsetY} + `; + return createSvg(d); +}; // 盒底组件 5006 +export const createBoxBottomComponent5 = (width, deep, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} + A ${width * 0.5} ${width * 0.5} 0 0 0 ${offsetX + width} ${offsetY} + A ${deep * 0.5} ${deep * 0.5} 0 0 0 ${offsetX + width + deep} ${offsetY} + A ${width * 0.5} ${width * 0.5} 0 0 0 ${offsetX + width * 2 + deep} ${offsetY} + A ${deep * 0.5} ${deep * 0.5} 0 0 0 ${offsetX + width * 2 + deep * 2} ${offsetY} + `; + return createSvg(d); +}; +// 盒底组件 5007 +export const createBoxBottomComponent6 = (width, deep, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} + L ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + size} L ${offsetX + width} ${offsetY} + L ${offsetX + width + deep * 0.2} ${offsetY + size * 0.7} A ${size * 0.1} ${size * 0.1} 0 0 0 ${offsetX + width + deep * 0.2} ${offsetY + size} + L ${offsetX + width + deep * 0.8} ${offsetY + size} A ${size * 0.1} ${size * 0.1} 0 0 0 ${offsetX + width + deep * 0.8} ${offsetY + size * 0.7} + L ${offsetX + width + deep} ${offsetY} + L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + width + deep} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY} + L ${offsetX + width + deep + width + deep * 0.2} ${offsetY + size * 0.7} A ${size * 0.1} ${size * 0.1} 0 0 0 ${offsetX + + width + + deep + + width + + deep * 0.2} ${offsetY + size} + L ${offsetX + width + deep + width + deep * 0.8} ${offsetY + size} A ${size * 0.1} ${size * 0.1} 0 0 0 ${offsetX + + width + + deep + + width + + deep * 0.8} ${offsetY + size * 0.7} + L ${offsetX + width + deep + width + deep} ${offsetY} + `; + return createSvg(d); +}; +// 部件 +export const createBoxComponentNew = (width, deep, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${offsetY + deep} L ${offsetX + width} ${offsetY} + L ${offsetX + width} ${offsetY + deep + size} L ${offsetX} ${offsetY + deep + size} L ${offsetX} ${offsetY}`; + return createSvg(d); +}; +// 部件1 +export const createBoxComponentNew1 = (width, deep, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + size} L ${offsetX + width} ${offsetY}`; + return createSvg(d); +}; +// 部件2 +export const createBoxComponentNew2 = (width, deep, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.4} ${offsetY} L ${offsetX + width * 0.4} ${offsetY + size} L ${offsetX + + width * 0.6} ${offsetY + size} L ${offsetX + width * 0.6} ${offsetY} L ${offsetX + width} ${offsetY}`; + return createSvg(d); +}; +// 部件3 +export const createBoxComponentNew3 = (width, deep, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep * 2} L ${offsetX + width * 0.2} ${offsetY + deep * 2} L ${offsetX + + width * 0.2} ${offsetY + deep * 2 + size} L ${offsetX + width * 0.4} ${offsetY + deep * 2 + size} + L ${offsetX + width * 0.4} ${offsetY + deep * 2} L ${offsetX + width * 0.6} ${offsetY + deep * 2} L${offsetX + width * 0.6} ${offsetY + + deep * 2 + + size} L ${offsetX + width * 0.8} ${offsetY + deep * 2 + size} L ${offsetX + width * 0.8} ${offsetY + deep * 2} + L ${offsetX + width} ${offsetY + deep * 2} L ${offsetX + width} ${offsetY + deep} L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${offsetY + + deep} ${offsetX + width} ${offsetY}`; + return createSvg(d); +}; +// 部件4 +export const createBoxComponentNew4 = (width, deep, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep * 2} L ${offsetX + width} ${offsetY + deep * 2} L ${offsetX + width} ${offsetY + + deep} L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${offsetY + deep} L ${offsetX + width} ${offsetY} + M ${offsetX + width * 0.3} ${offsetY + deep * 0.8} L ${offsetX + width * 0.3} ${offsetY + deep * 0.6} L ${offsetX + width * 0.7} ${offsetY + + deep * 0.6} L ${offsetX + width * 0.7} ${offsetY + deep * 0.8} L ${offsetX + width * 0.3} ${offsetY + deep * 0.8} + M ${offsetX + width * 0.3} ${offsetY + deep + deep * 0.8} L ${offsetX + width * 0.3} ${offsetY + deep + deep * 0.6} L ${offsetX + + width * 0.7} ${offsetY + deep + deep * 0.6} L ${offsetX + width * 0.7} ${offsetY + deep + deep * 0.8} L ${offsetX + width * 0.3} ${offsetY + + deep + + deep * 0.8} + `; + return createSvg(d); +}; +// 部件4的小组件 +export const createBoxComponentNew4_1 = (width, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + size} L ${offsetX + width} ${offsetY}Z`; + return createSvg(d); +}; + +// 部件5 +export const createBoxComponentNew5 = (width, deep, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${offsetY + deep} + L ${offsetX + width} ${offsetY} L ${offsetX + width} ${offsetY + deep} L ${offsetX + width * 0.9} ${offsetY + deep + size} + L ${offsetX + width * 0.1} ${offsetY + deep + size} L ${offsetX} ${offsetY + deep} + `; + return createSvg(d); +}; +// 贴边1 +export const createWelt = (height, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX + size * 0.6} ${offsetY} L ${offsetX + size * 0.6} ${offsetY + height} L ${offsetX + + size * 0.6} ${offsetY} L ${offsetX + size} ${offsetY + height * 0.1} L ${offsetX + size} ${offsetY + height * 0.9} L ${offsetX + + size * 0.6} ${offsetY + height} L ${offsetX} ${offsetY + height}`; + return createSvg(d); +}; +// 贴边1 +export const createWelt1 = (height, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY + height * 0.1} L ${offsetX + size} ${offsetY + + height * 0.9} L ${offsetX} ${offsetY + height}`; + return createSvg(d); +}; +// 贴边2 +export const createWelt2 = (height, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY} A ${size * 0.5} ${size} 0 0 1 ${offsetX + size * 0.5} ${offsetY + + size} A ${size * 0.5} ${size} 0 0 1 ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} A ${size * 0.5} ${size} 0 0 1 ${offsetX + + size * 0.5} ${offsetY + height + Math.abs(size)} A ${size * 0.5} ${size} 0 0 1 ${offsetX + size} ${offsetY + height} L ${offsetX + + size} ${offsetY} L ${offsetX + size} ${offsetY + height} L ${offsetX} ${offsetY + height}`; + return createSvg(d); +}; +export const createWelt2Right = (height, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY} A ${size * 0.5} ${size} 0 0 0 ${offsetX + size * 0.5} ${offsetY - size} A ${size * + 0.5} ${size} 0 0 0 ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} A ${size * 0.5} ${size} 0 0 0 ${offsetX + size * 0.5} ${offsetY + + height + + Math.abs(size)} A ${size * 0.5} ${size} 0 0 0 ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${offsetY} L ${offsetX + size} ${offsetY + + height} L ${offsetX} ${offsetY + height}`; + return createSvg(d); +}; +export const createWelt3 = (height, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${offsetY + + size * 0.3} L ${offsetX} ${offsetY + size * 0.3} L ${offsetX} ${offsetY}`; + return createSvg(d); +}; +export const createWelt3Right = (height, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${offsetY - + size * 0.3} L ${offsetX} ${offsetY - size * 0.3} L ${offsetX} ${offsetY}`; + return createSvg(d); +}; +// 天地盒 +export const createFullTelescope = (width, height, deep, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX + width} ${offsetY} L ${offsetX + width} ${offsetY + height} L ${offsetX} ${offsetY + + height} L ${offsetX} ${offsetY} + L ${offsetX - deep} ${offsetY} L ${offsetX - deep} ${offsetY + height} L ${offsetX} ${offsetY + height} + L ${offsetX} ${offsetY + height + deep} L ${offsetX + width} ${offsetY + height + deep} L ${offsetX + width} ${offsetY + height} + L ${offsetX + width + deep} ${offsetY + height} L ${offsetX + width + deep} ${offsetY} L ${offsetX + width} ${offsetY} + L ${offsetX + width} ${offsetY - deep} L ${offsetX} ${offsetY - deep} L ${offsetX} ${offsetY} + `; + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "red"); + svg.setAttribute("stroke-width", "1"); + svg.setAttribute("stroke-dasharray", "4"); // 添加虚线效果 + return svg; +}; +// 天地部件1 +export const createBoxComponentNewFull = (width, deep, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX + deep} ${offsetY} L ${offsetX + deep} ${offsetY + width} L ${offsetX + deep} ${offsetY} + L ${offsetX + deep + size} ${offsetY} L ${offsetX + deep + size} ${offsetY + width} L ${offsetX} ${offsetY + width}`; + return createSvg(d); +}; +// 天地部件2 +export const createBoxComponentNewFull1 = (width, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY} L ${offsetX + size} ${offsetY + width} L ${offsetX} ${offsetY + width}`; + return createSvg(d); +}; +// 天地部件3 +export const createBoxComponentNewFull2 = (width, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + width * 0.4} L ${offsetX + size} ${offsetY + width * 0.4} + L ${offsetX + size} ${offsetY + width * 0.6} L ${offsetX} ${offsetY + width * 0.6} L ${offsetX} ${offsetY + width} + `; + return createSvg(d); +}; +// 天地部件4 +export const createBoxComponentNewFul3 = (width, deep, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX + deep} ${offsetY} L ${offsetX + deep} ${offsetY + width} L ${offsetX} ${offsetY + width} + L ${offsetX + deep * 2} ${offsetY + width} L ${offsetX + deep * 2} ${offsetY + width * 0.8} L ${offsetX + deep * 2 + size} ${offsetY + width * 0.8} + L ${offsetX + deep * 2 + size} ${offsetY + width * 0.6} L ${offsetX + deep * 2} ${offsetY + width * 0.6} + L ${offsetX + deep * 2} ${offsetY + width * 0.4} L ${offsetX + deep * 2 + size} ${offsetY + width * 0.4} + L ${offsetX + deep * 2 + size} ${offsetY + width * 0.2} L ${offsetX + deep * 2} ${offsetY + width * 0.2} + L ${offsetX + deep * 2} ${offsetY} L ${offsetX} ${offsetY} + `; + return createSvg(d); +}; +// 天地部件4 +export const createBoxComponentNewFul4 = (width, deep, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX + deep * 2} ${offsetY} L ${offsetX + deep * 2} ${offsetY + width} L ${offsetX + deep} ${offsetY + + width} L ${offsetX + deep} ${offsetY} L ${offsetX + deep} ${offsetY + width} L ${offsetX} ${offsetY + width} + M ${offsetX + deep * 0.8} ${offsetY + width * 0.3} L ${offsetX + deep * 0.6} ${offsetY + width * 0.3} L ${offsetX + deep * 0.6} ${offsetY + + width * 0.7} L ${offsetX + deep * 0.8} ${offsetY + width * 0.7} L ${offsetX + deep * 0.8} ${offsetY + width * 0.3} + M ${offsetX + deep + deep * 0.8} ${offsetY + width * 0.3} L ${offsetX + deep + deep * 0.6} ${offsetY + width * 0.3} L ${offsetX + + deep + + deep * 0.6} ${offsetY + width * 0.7} L ${offsetX + deep + deep * 0.8} ${offsetY + width * 0.7} L ${offsetX + deep + deep * 0.8} ${offsetY + + width * 0.3} + `; + return createSvg(d); +}; +// 部件5 +export const createBoxComponentNewFul5 = (width, deep, size, offsetX, offsetY) => { + const d = `M ${offsetX} ${offsetY} L ${offsetX + deep } ${offsetY} L ${offsetX + deep } ${offsetY + width} + L ${offsetX + deep } ${offsetY} L ${offsetX + deep + size} ${offsetY + width * 0.1} L${offsetX + deep+ size} ${offsetY + width * 0.9} + L ${offsetX + deep } ${offsetY + width} L ${offsetX} ${offsetY + width} + `; + return createSvg(d); +}; \ No newline at end of file diff --git a/src/components/Common/BoxDesign/index.css b/src/components/Common/BoxDesign/index.css new file mode 100644 index 0000000..6e09516 --- /dev/null +++ b/src/components/Common/BoxDesign/index.css @@ -0,0 +1,11 @@ +.svgBox { + width: 145px; + height: 130px; + overflow: hidden; +} +.svgContainer { + width: 100%; + height: 100%; + object-fit: contain; + /* 确保 SVG 保持比例 */ +} diff --git a/src/components/Common/BoxDesign/index.js b/src/components/Common/BoxDesign/index.js new file mode 100644 index 0000000..add7cd0 --- /dev/null +++ b/src/components/Common/BoxDesign/index.js @@ -0,0 +1,463 @@ +/* eslint-disable */ +import React, { useRef, useState, useEffect } from "react"; +import style from "./index.less"; +import { + createEnvelope, + createAirplaneBox, + createDeductionBox, + createTote, + createBoxs, + createHeavenBox, + createDiscBox, + createShowBox, + createLiningBox, +} from "./createAirplaneBox"; +const DynamicSVG = props => { + const svgRef = useRef(null); + const svgContainerRef = useRef(null); + const [boxKey, setBoxKey] = useState(new Date().getTime()); + const [currentTranslateX, setCurrentTranslateX] = useState(0); + const [currentTranslateY, setCurrentTranslateY] = useState(0); + const [currentScale, setCurrentScale] = useState(1); + const [positionInfo, setPositionInfo] = useState({ x: 0, y: 0, width: 0, height: 0 }); + // 先默认为抵扣盒 + const { boxModel } = props; //盒型参数 + const { masterData, slaveData, selectedNode } = props.state; // 主数据 + const slaveDataDetail = slaveData?.find(item => item.sTreeNodeName === selectedNode.showName && item.sBoxModel === boxModel); + const width = Number(masterData?.dLength); + const height = Number(masterData?.dHeight); + const deep = Number(masterData?.dWidth); + // 确认是竖向排列还是横向排列 + const L = masterData?.dLength; + const W = masterData?.dWidth; + const H = masterData?.dHeight; + const D = masterData?.dHeight; + const variables = { + L, + W, + H, + D, + ...slaveDataDetail, + }; + useEffect( + () => { + const svg = svgRef.current; + svg.innerHTML = ""; + initSVG(); + // 处理 + if (slaveDataDetail?.sName.includes("扣抵盒")) { + const c = slaveDataDetail?.dc; + const g = slaveDataDetail?.dg; + const a = slaveDataDetail?.da; + createBox(width, height, deep, c, g, a); + } else if (slaveDataDetail?.sName.includes("飞机盒")) { + const list = createAirplaneBox(variables); + if (list && list.length) { + const leftWidth = (evaluateFormula(slaveDataDetail.sLengthFormula, variables) + slaveDataDetail.dTd * 2 - L) / 2; + initBox(list, leftWidth + 9, slaveDataDetail.dD3, slaveDataDetail.dTd * 2, 0); + } + } else if (slaveDataDetail?.sName.includes("自动扣底盒")) { + const top = slaveDataDetail.dc + W; + const list = createDeductionBox(variables); + if (list && list.length) { + initBox(list, 0, top, 0, 0); + } + } else if (slaveDataDetail?.sName.includes("手提袋")) { + const list = createTote(variables); + if (list && list.length) { + initBox(list, slaveDataDetail.dF, slaveDataDetail.dF1, 0, 0); + } + } else if (slaveDataDetail?.sName.includes("普通盒(纸箱)")) { + const list = createBoxs(variables); + if (list && list.length) { + initBox(list, slaveDataDetail.dG, slaveDataDetail.dF, 0, 0); + } + } else if (slaveDataDetail?.sName.includes("天地盖")) { + const list = createHeavenBox(variables); + if (list && list.length) { + initBox(list, D, slaveDataDetail.dF1 + 2, 4, 4); + } + } else if (slaveDataDetail?.sName.includes("盘式盒")) { + const list = createDiscBox(variables); + if (list && list.length) { + const left = slaveDataDetail?.dTd + slaveDataDetail?.dD1 + slaveDataDetail?.dDj + D + 2; + initBox(list, left, 0, 4, 0); + } + } else if (slaveDataDetail?.sName.includes("展示盒")) { + const list = createShowBox(variables); + if (list && list.length) { + initBox(list, 0, slaveDataDetail?.dD2, 0, 0); + } + } else if (slaveDataDetail?.sName.includes("内衬")) { + const list = createLiningBox(variables); + if (list && list.length) { + initBox(list, 0, 0, 0, 0); + } + } else if (slaveDataDetail?.sName.includes("信封")) { + const list = createEnvelope(variables); + if (list && list.length) { + initBox(list, slaveDataDetail?.dS1, slaveDataDetail?.dF1, 0, 0); + } + } + }, + [slaveDataDetail] + ); + // 动态计算公式值 + const evaluateFormula = (formula, variables) => { + if (!formula) return 0; // 如果公式为空，返回0 + try { + // 提取公式中的变量名 + const variableNames = formula.match(/\b[a-zA-Z_][a-zA-Z0-9_]*\b/g) || []; + // 构建函数参数 + const params = variableNames.join(","); + // 替换公式中的变量为实际值 + const func = new Function(params, `return ${formula}`); + // 提取变量值 + const args = variableNames.map(name => Number(variables[name]) || 0); + // 执行函数并返回结果 + return func(...args); + } catch (error) { + console.error("公式计算错误:", error); + return 0; + } + }; + // 盒身 + const createPathElement = (x, y, width, height, id, wrapperId) => { + const d = `M ${x} ${y} L ${x} ${y + height} L ${x + width} ${y + height} L ${x + width} ${y} L ${x} ${y} Z`; + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + svg.setAttribute("stroke-dasharray", "3.8"); // 添加虚线效果 + return svg; + }; + // 左上部件 + const createDynamicTop = (width, height, deep, offsetX, offsetY, size) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + // 动态生成路径，基于输入参数 + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY - deep - size + 2} A 2 2 0 0 1 ${offsetX + 2} ${offsetY - deep - size} + L ${offsetX + width - 2} ${offsetY - deep - size} A 2 2 0 0 1 ${offsetX + width} ${offsetY - deep - size + 2} L ${offsetX + width} ${offsetY - + deep} + L ${offsetX} ${offsetY - deep} L ${offsetX + width} ${offsetY - deep} L ${offsetX + width} ${offsetY} `; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; + }; + // 左边贴边 + const createTrapezoid = (width, height, offsetX, offsetY, size) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX - size} ${offsetY + 2} L ${offsetX - size} ${offsetY + height - 2} L ${offsetX} ${offsetY + + height}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; + }; + // 左上盒舌 + const createTopTongue = (width, height, deep, offsetX, offsetY, size) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX + width} ${offsetY} L ${offsetX + width + 2} ${offsetY - 2} L ${offsetX + width + 2} ${offsetY - size - 2} + L ${offsetX + width + deep - 5} ${offsetY - size - 2} A 2 2 0 0 1 ${offsetX + width + deep - 3} ${offsetY - size} L ${offsetX + + width + + deep} ${offsetY}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; + }; + // 右上盒舌 + const createTopTongueRight = (width, height, deep, offsetX, offsetY, size) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + // "M 130 0 L 133 87 A 2 2 0 0 1 135 85 L 158 85 L 158 98 L 160 0 Z" + const d = `M ${offsetX} ${offsetY} L ${offsetX + 3} ${offsetY - size + 2} A 2 2 0 0 1 ${offsetX + 5} ${offsetY - size} + L ${offsetX + deep - 2} ${offsetY - size} L ${offsetX + deep - 2} ${offsetY - 2} L ${offsetX + deep} ${offsetY} `; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; + }; + // 右下盒舌 + const createBottomTongueRight = (width, height, deep, offsetX, offsetY, size) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + // M 130 160 L 132 162 L 132 175 L 156 175 A 2 2 0 0 0 158 173 L 160 160 Z + const d = `M ${offsetX} ${offsetY + height} L ${offsetX + 2} ${offsetY + height + 2} L ${offsetX + 2} ${offsetY + height + size} + L ${offsetX + deep - 4} ${offsetY + height + size} A 2 2 0 0 0 ${offsetX + deep - 2} ${offsetY + height + size - 2} L ${offsetX + + deep} ${offsetY + height} `; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; + }; + // 右下部件 + const createBottom = (width, height, deep, offsetX, offsetY, size) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + // "M 90 160 L 90 198 A 2 2 0 0 0 92 200 L 128 200 A 2 2 0 0 0 130 198 L 130 197 L 90 197 L 130 197 L 130 160 Z " + const d = `M ${offsetX} ${offsetY + height} L ${offsetX} ${offsetY + height + deep + size - 2} A 2 2 0 0 0 ${offsetX + 2} ${offsetY + + height + + deep + + size} + L ${offsetX + width - 2} ${offsetY + height + deep + size} A 2 2 0 0 0 ${offsetX + width} ${offsetY + height + deep + size - 2} + L ${offsetX + width} ${offsetY + height + deep} L${offsetX} ${offsetY + height + deep} L${offsetX + width} ${offsetY + + height + + deep} L ${offsetX + width} ${offsetY + height} + `; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; + }; + // 左下盒舌 + const createBottomTongue = (width, height, deep, offsetX, offsetY, size) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + // M 90 160 L 88 162 L 88 175 L 64 175 A 2 2 0 0 1 62 173 L 60 160 Z + const d = `M ${offsetX} ${offsetY + height} L ${offsetX - 2} ${offsetY + height + 2} L ${offsetX - 2} ${offsetY + height + size} + L ${offsetX - deep + 4} ${offsetY + height + size} A 2 2 0 0 1 ${offsetX - deep + 2} ${offsetY + height + size - 2} L ${offsetX - + deep} ${offsetY + height} `; + svg.setAttribute("d", d); + svg.setAttribute("fill", "transparent"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; + }; + // 标注 + const createArrowWithText = (width, height, deep, offsetX, offsetY, size) => { + // 定义箭头标记 + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX + width / 2} ${offsetY - deep + 15} L ${offsetX + width / 2} ${offsetY - deep + 5} L ${offsetX + width / 2 - 5} ${offsetY - + deep + + 5} + L${offsetX + width / 2} ${offsetY - deep} L ${offsetX + width / 2 + 5} ${offsetY - deep + 5} L${offsetX + width / 2} ${offsetY - deep + 5}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "#333"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + + return svg; + }; + // 添加标注 + const createText = (offsetX, offsetY, size, textContent) => { + const text = document.createElementNS("http://www.w3.org/2000/svg", "text"); + text.setAttribute("x", offsetX); // 文字水平居中 + text.setAttribute("y", offsetY); // 文字垂直居中 + text.setAttribute("text-anchor", "middle"); // 文字水平居中 + text.setAttribute("dominant-baseline", "middle"); // 文字垂直居中 + text.setAttribute("fill", "#333"); // 文字颜色 + text.setAttribute("font-size", size); // 文字大小 + text.setAttribute("font-weight", "bold"); // 文字加粗 + text.textContent = textContent || "Text"; // 默认文字内容 + return text; + }; + // 竖向双箭头 + const createDoubleArrow = (height, offsetX, offsetY, Y) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${height - 5} L ${offsetX + 5} ${height - 5} L ${offsetX} ${height} L ${offsetX - 5} ${height - 5} + L ${offsetX} ${height - 5} L ${offsetX} ${Y + 5} L ${offsetX + 5} ${Y + 5} L ${offsetX} ${Y} L ${offsetX - 5} ${Y + 5} L ${offsetX} ${Y + 5}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "#333"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + + return svg; + }; + // 横向双箭头 + const createHorizontalDoubleArrow = (width, offsetX, offsetY) => { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const d = `M ${offsetX} ${offsetY} L ${offsetX - width / 2 + 5} ${offsetY} L ${offsetX - width / 2 + 5} ${offsetY - 5} L ${offsetX - + width / 2} ${offsetY} + L ${offsetX - width / 2 + 5} ${offsetY + 5} L ${offsetX - width / 2 + 5} ${offsetY} L ${offsetX + width / 2 - 5} ${offsetY} L ${offsetX + + width / 2 - + 5} ${offsetY + 5} L ${offsetX + width / 2} ${offsetY} + L ${offsetX + width / 2 - 5} ${offsetY - 5} L ${offsetX + width / 2 - 5} ${offsetY}`; + svg.setAttribute("d", d); + svg.setAttribute("fill", "#333"); + svg.setAttribute("stroke", "#333"); + svg.setAttribute("stroke-width", "1"); + return svg; + }; + // 扣抵盒 + const createBox = (width, height, deep, c, g, a) => { + let pathList = []; + // 四面盒身 + const rectangles = [ + { x: 0, y: 0, width, height, id: "ac_path_c795a39_2oj", wrapperId: "3476" }, + { x: 0 + width, y: 0, width: deep, height, id: "ac_path_c795a39_2on", wrapperId: "3480" }, + { x: 0 + width + deep, y: 0, width, height, id: "ac_path_c795a39_2or", wrapperId: "3484" }, + { x: 0 + width * 2 + deep, y: 0, width: deep, height, id: "ac_path_c795a39_2ov", wrapperId: "3488" }, + ]; + const svg = svgRef.current; + // 添加梯形 + pathList.push(createTrapezoid(width, height, 0, 0, g)); + pathList.push(createDynamicTop(width, height, deep, 0, 0, c)); + pathList.push(createTopTongue(width, height, deep, 0, 0, a)); + pathList.push(createTopTongueRight(width, height, deep, width * 2 + deep + 0, 0, a)); + pathList.push(createBottomTongueRight(width, height, deep, width * 2 + deep + 0, 0, a)); + pathList.push(createBottom(width, height, deep, 0 + deep + width, 0, c)); // 是否下舌头 + pathList.push(createBottomTongue(width, height, deep, 0 + deep + width, 0, a)); + // 上边部件贴位标注 + pathList.push(createArrowWithText(width, height, deep, 0, 0, a)); + pathList.push(createDoubleArrow(height, width + deep + width / 2 - 20, height / 2, 0)); + pathList.push(createDoubleArrow(a + height, width * 2 + deep + deep / 2, height + a / 2, height)); + pathList.push(createHorizontalDoubleArrow(width, width + deep + width / 2, height / 2 - 20)); + pathList.push(createHorizontalDoubleArrow(deep, width + deep / 2, height / 2)); + pathList.push(createText(width / 2 + 5, -deep - 5, 14, "c")); + pathList.push(createText(width * 2 + deep + deep / 2 + 10, height + a / 2, 14, "a")); + pathList.push(createText(-g / 2, height / 2, 14, "g")); + pathList.push(createText(width + deep + width / 2 - 10, height / 2, 14, "D")); + pathList.push(createText(width + deep + width / 2 + 10, height / 2 - 10, 14, "L")); + pathList.push(createText(width + deep / 2, height / 2 + 10, 14, "W")); + pathList.forEach(item => { + svg.appendChild(item); + }); + const viewBoxWidth = width * 2 + deep * 2 + g + 2; + const viewBoxHeight = height + (deep + c) * 2 + 2; + // 更新 SVG 的 viewBox 和尺寸 + const svgContainer = svgContainerRef.current; + svg.setAttribute("viewBox", `${-g - 1} ${-(deep + c) - 1} ${viewBoxWidth} ${viewBoxHeight}`); + svg.setAttribute("width", `${viewBoxWidth}px`); + svg.setAttribute("height", `${viewBoxHeight}px`); + svgContainer.style.width = `${viewBoxWidth}px`; + svgContainer.style.height = `${viewBoxHeight}px`; + rectangles.forEach(rect => { + const pathElement = createPathElement(rect.x, rect.y, rect.width, rect.height, rect.id, rect.wrapperId); + svg.appendChild(pathElement); + }); + }; + const initBox = (list, g, c, width, height) => { + const svg = svgRef.current; + list.forEach(item => { + svg.appendChild(item); + }); + const viewBoxWidth = evaluateFormula(slaveDataDetail.sLengthFormula, variables) + 1 + width; + const viewBoxHeight = evaluateFormula(slaveDataDetail.sWidthFormula, variables) + height; + // 更新 SVG 的 viewBox 和尺寸 + const svgContainer = svgContainerRef.current; + svg.setAttribute("viewBox", `${-g} ${-c} ${viewBoxWidth} ${viewBoxHeight}`); + svg.setAttribute("width", `${viewBoxWidth}px`); + svg.setAttribute("height", `${viewBoxHeight}px`); + svgContainer.style.width = `${viewBoxWidth}px`; + svgContainer.style.height = `${viewBoxHeight}px`; + }; + const initSVG = () => { + const svg = svgRef.current; + svg.style.transform = `translate(${currentTranslateX}px, ${currentTranslateY}px) scale(${currentScale})`; + }; + + const moveSVG = (translateX, translateY) => { + setCurrentTranslateX(currentTranslateX + translateX); + setCurrentTranslateY(currentTranslateY + translateY); + }; + + const zoomSVG = scaleChange => { + const newScale = currentScale + scaleChange; + setCurrentScale(Math.max(0.5, Math.min(3, newScale))); + }; + + const updateSVGTransform = () => { + const svg = svgRef.current; + svg.style.transform = `translate(${currentTranslateX}px, ${currentTranslateY}px) scale(${currentScale})`; + updatePositionInfo(); + }; + + const updatePositionInfo = () => { + if (svgRef.current) { + const rect = svgRef.current.getBoundingClientRect(); + setPositionInfo({ + x: rect.x, + y: rect.y, + width: rect.width, + height: rect.height, + }); + } + }; + + useEffect( + () => { + updateSVGTransform(); + }, + [currentTranslateX, currentTranslateY, currentScale] + ); + + // 当 SVG 的位置或大小变化时，更新位置信息 + useEffect( + () => { + updatePositionInfo(); + }, + [currentTranslateX, currentTranslateY, currentScale, width, height, deep] + ); + + return ( + //
+ + // {/*
+ // + // {setHeight(parseInt(e.target.value, 10));setBoxKey(new Date().getTime())}} + // /> + // + // {setWidth(parseInt(e.target.value, 10));setBoxKey(new Date().getTime())}} + // /> + // + // {setDeep(parseInt(e.target.value, 10));setBoxKey(new Date().getTime())}} + // /> + // + // setC(parseInt(e.target.value, 10))} + // /> + // + // setG(parseInt(e.target.value, 10))} + // /> + // + // setA(parseInt(e.target.value, 10))} + // /> + //
*/} + + //
+
+ +
+ ); +}; + +export default DynamicSVG; diff --git a/src/components/Common/BoxDesign/index.less b/src/components/Common/BoxDesign/index.less new file mode 100644 index 0000000..131ee46 --- /dev/null +++ b/src/components/Common/BoxDesign/index.less @@ -0,0 +1,10 @@ +.svgBox{ + width: 145px; + height: 130px; + overflow: hidden; +} +.svgContainer { + width: 100%; + height: 100%; + object-fit: contain; /* 确保 SVG 保持比例 */ +} \ No newline at end of file diff --git a/src/components/Common/BoxDesignCompontent/index.css b/src/components/Common/BoxDesignCompontent/index.css new file mode 100644 index 0000000..e067416 --- /dev/null +++ b/src/components/Common/BoxDesignCompontent/index.css @@ -0,0 +1,170 @@ +.boxBody { + width: 100%; + height: 100%; + position: relative; + padding: 10px; +} +.boxBody .boxTop { + display: flex; + align-items: center; + justify-content: space-around; + width: 640px; + height: 100px; + margin: 0 auto; +} +.boxBody .boxTop .boxFlex { + width: 200px; + display: flex; + align-items: center; + flex-wrap: wrap; + flex-direction: column; + position: relative; +} +.boxBody .boxLeft { + width: 180px; + height: 320px; + display: flex; + flex-wrap: wrap; + flex-direction: column; + position: absolute; + justify-content: space-between; + left: 10px; + top: 130px; + text-align: center; +} +.boxBody .boxRight { + width: 180px; + height: 320px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + flex-direction: column; + position: absolute; + right: 10px; + top: 130px; + text-align: center; +} +.boxBody .boxBottom { + width: 500px; + height: 380px; + position: absolute; + top: 130px; + left: 50%; + transform: translateX(-50%); +} +.boxBody .boxBottom .svgBox { + width: 100%; + height: 250px; + background-color: #9AFF9A; +} +.boxBody .boxBottom .content { + width: 100%; + height: 130px; +} +.boxBody .boxBottom .content :global .ant-select-selector { + color: #333; +} +.boxBody .boxBottom .content :global .ant-select-selection-item { + color: #333 !important; + /* 选择框文字颜色 */ + padding-left: 50px; + line-height: 40px; +} +.boxBody .boxTitle { + background-color: #3399ff; + color: #fff; + width: 180px; + height: 20px; + line-height: 20px; + text-align: center; +} +.boxBody :global .mySelects .ant-select-selector { + background-color: #99CCFF !important; + /* 选择框背景色 */ + height: 40px !important; + /* 选择框高度 */ +} +.boxBody :global .mySelects .ant-select-selection-item { + color: transparent !important; + /* 选择框文字颜色 */ +} +.boxBody .mySelects { + position: relative; +} +.boxBody .boxInput { + display: flex; + align-items: center; + justify-content: space-between; + width: 180px; + height: 40px; + position: relative; +} +.boxBody .boxInput :global .ant-input { + background-color: #99CCFF !important; + /* 输入框背景色 */ + border: 1px solid #d9d9d9; + height: 40px; +} +.boxBody .text { + background-color: #99CCFF; + width: 100%; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 10px; + margin-right: 1px; +} +.boxBody .content :global .ant-input { + background-color: #EEEEEE !important; + /* 输入框背景色 */ + height: 40px; +} +.boxBody .content :global .ant-select-selector { + background-color: #EEEEEE !important; + /* 选择框背景色 */ + height: 40px !important; + /* 选择框高度 */ +} +.boxBody .content .text { + background-color: #EEEEEE; + margin: 0; +} +.boxBody .content .boxFlex { + display: flex; + align-items: center; + flex-wrap: wrap; + flex-direction: column; + width: 500px; +} +.boxBody .content .boxFlexs { + display: flex; + align-items: center; + width: 500px; + justify-content: space-between; +} +.boxBody .content .boxFlexs .boxInputs { + display: flex; + align-items: center; + flex: 1; +} +.boxBody .content .boxFlexs .boxInputs :global .ant-input { + background-color: #EEEEEE !important; + /* 输入框背景色 */ + height: 40px; +} +.boxBody .content .boxInput { + width: 100%; + position: relative; +} +.boxBody .content .boxInput .defaultValue { + position: absolute; + left: 32%; + top: 3px; + width: 60px; + height: 30px; + background-color: #EEE; + color: #333; + line-height: 40px; + z-index: 2; + text-align: center; +} diff --git a/src/components/Common/BoxDesignCompontent/index.js b/src/components/Common/BoxDesignCompontent/index.js new file mode 100644 index 0000000..2528e45 --- /dev/null +++ b/src/components/Common/BoxDesignCompontent/index.js @@ -0,0 +1,1022 @@ +/* eslint-disable */ +import React, { useRef, useState, useEffect } from "react"; +import { Select, Button, message, Input, Spin } from "antd"; +import { CompressOutlined, ExpandOutlined } from "@ant-design/icons"; +import * as commonUtils from "@/utils/utils"; +import * as commonFunc from "@/components/Common/commonFunc"; +import * as commonBusiness from "@/components/Common/commonBusiness"; +import * as commonServices from "@/services/services"; +import CommonBase from "@/components/Common/CommonBase"; +import AntdDraggableModal from "@/components/Common/AntdDraggableModal"; +import CommonViewTable from "@/components/Common/CommonViewTable"; +import StaticEditTable from "@/components/Common/CommonTable"; +import jsPreviewPdf from "@js-preview/pdf"; +import * as commonConfig from "@/utils/config"; +import SvgBox from "./svg"; +import styles from "./index.less"; +const BoxDesignEvent = props => { + const addState = {}; + const { formData = [], selectData = [], masterData, makeUpPDFRecord = {} } = props; + const [tableData, setTableData] = useState({}); + const [options, setOptions] = useState([]); + const [loading, setLoading] = useState(false); // 加载状态 + + addState.getSqlOptions = async type => { + setLoading(true); + const { app, token, makeConfig } = props; + // const quickQuoteConfig = config.gdsconfigformslave.find(item => item.sControlName === "BtnQuickQuote") || {}; + const { sId } = makeConfig; + if (!sId) return; + const url = `${commonConfig.server_host}business/getSelectLimit/${sId}?sModelsId=${sId}`; + const body = { + pageNum: 1, + pageSize: 20, + sKeyUpFilterName: "", + sSqlCondition: { + sType: type, + }, + }; + const data = await commonServices.postValueService(token, body, url); + if (data) { + const option = data.data.dataset.rows; + option.sort((a, b) => { + if (a.sCode === "") { + return -1; // 将 id 为 1 的元素排在前面 + } + if (b.sCode === "") { + return 1; + } + return 0; // 其他元素保持原顺序 + }); + setOptions(data.data.dataset.rows); + } + setLoading(false); + }; + + useEffect( + () => { + if (!formData.length) return; + + const data = formData[0].gdsconfigformslave.filter(Item => Item.bVisible); + setTableData(data); + props.onSaveState(pre => ({ ...pre, data })); + }, + [formData.length] + ); + + return { + ...props, + tableData, + ...addState, + options, + loading, + }; +}; +const BoxDesignCompontent = baseProps => { + const props = BoxDesignEvent(baseProps); + const { onCancel, onOk, title, loading, masterConfig, bFullScreen, tableData, options = [] } = props; + const { slaveData = {}, masterData = {} } = props.state; + const { boxVisible } = baseProps; + const [boxList, setBoxList] = useState([]); + const [tableColum, setTableColum] = useState([]); // 盒身类型 + const [tableDataList, setTableDataList] = useState([]); // 盒长 + const [boxBodyList, setBoxBodyList] = useState([]); // 盒身信息 + const [isDefaultValue, setIsDefaultValue] = useState(true); // 是否默认值 + const [topBoxList, setTopBoxList] = useState([]); // 盒身信息 + const [leftBoxList, setLeftBoxList] = useState([]); // 左边 + const [rightBoxList, setRightBoxList] = useState([]); + const [boxKey, setBoxKey] = useState(new Date().getTime()); + if (!boxVisible) return ""; + useEffect( + () => { + if (tableData && tableData.length) { + const newTableColum = tableData.map(item => { + return { + ...item, + isEditable: true, + isSelect: false, + selectImage: null, + value: "", + }; + }); + // const last = newTableColum.pop(); + // const newList = [last, ...newTableColum]; + const newList = newTableColum.filter( + item => item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽") + ); + const newLists = newTableColum.filter( + item => + !(item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽") || item.showName.includes("盒身")) + ); + const bodyList = newTableColum.filter(item => item.showName.includes("盒身")); + newLists.forEach(x => { + if (x.showName === "盒型类别") { + x.showName = "盒型名称"; + } + }); + setTableColum(newLists); + setBoxBodyList(bodyList); + newList.forEach(item => { + let name = ""; + if (item.showName === "盒长") { + name = item.showName + "(L)"; + } else if (item.showName === "盒宽") { + name = item.showName + "(W)"; + } else if (item.showName === "盒高") { + name = item.showName + "(D)"; + } + item.sName = name; + }); + setTableDataList(newList); + } + }, + [tableData] + ); + const titleList = [ + "上方盒舌", + "盒底组件", + "下方盒舌", + "左(上)插位组件", + "左贴边位", + "左(下)插位组件", + "右(上)插位组件", + "右贴边位", + "右(下)插位组件", + ]; + const titleList1 = [ + { name: "上方盒舌", value: "dSFHS" }, + { name: "盒底组件", value: "dHDC" }, + { name: "下方盒舌", value: "dXFHS" }, + { name: "左(上)插位组件", value: "dZSCW" }, + { name: "左贴边位", value: "dZTBW" }, + { name: "左(下)插位组件", value: "dZXCW" }, + { name: "右(上)插位组件", value: "dYSCW" }, + { name: "右贴边位", value: "dYTBW" }, + { name: "右(下)插位组件", value: "dYXCW" }, + ]; + const newBoxList = []; + + // const boxs = titleList.length + tableData.length; + tableColum.forEach(item => { + titleList.push(item.showName); + }); + console.log("🚀 ~ tableColum:", tableColum); + boxBodyList.forEach(item => { + titleList.push(item.showName); + }); + tableDataList.forEach(item => { + titleList.push(item.showName); + }); + // 盒身信息 + titleList.forEach((item, index) => { + newBoxList.push({ + value: "", + sName: item, + isEditable: true, + isSelect: false, + selectValue: null, + selectLabel: "", + selectImage: null, + type: null, + show: true, + showName: item, // 参数名称 + sAssignFormula: null, + }); + }); + // 部件信息 + if (slaveData && slaveData.length) { + slaveData.forEach((item, index) => { + const i = titleList1.findIndex(i => { + return i.value === item.sCode; + }); + if (i !== -1) { + const x = newBoxList.findIndex(z => z.sName === titleList1[i].name); + newBoxList[x].value = item.iValue; + newBoxList[x].type = item.sTypes; + newBoxList[x].showName = item.sName; + newBoxList[x].selectImage = item.sMakeUpPath; + newBoxList[x].sName = titleList1[i].name; + newBoxList[x].sAssignFormula = item.sAssignFormula; + newBoxList[x].bVisible = item.bVisible; + } + }); + } + // 盒身信息 + if (masterData) { + newBoxList.forEach((item, index) => { + if (item.sName === "盒身") { + newBoxList[index].value = masterData.sBoxBody; + newBoxList[index].selectImage = masterData.sMakeUpPath; + newBoxList[index].type = masterData.sTypes; + } else if (item.sName === "盒长") { + newBoxList[index].value = masterData.dBoxLength; + } else if (item.sName === "盒宽") { + newBoxList[index].value = masterData.dBoxWidth; + } else if (item.sName === "盒高") { + newBoxList[index].value = masterData.dBoxHeight; + } else if (item.sName === "盒型名称") { + newBoxList[index].value = masterData.sName; + } + }); + } + // 有数据的时候 盒型设计需要赋值 + useEffect( + () => { + if (newBoxList.length > 0 && !arraysAreEqual(boxList, newBoxList)) { + setBoxList(newBoxList); + } + }, + [newBoxList] + ); + + const arraysAreEqual = (arr1, arr2) => { + if (arr1.length !== arr2.length) return false; + return arr1.every((item, index) => item.sName === arr2[index].sName); + }; + useEffect( + () => { + const type = boxList.find(item => item.sName === "盒身")?.type; + const updateLists = () => { + const topBoxFilter = item => item.sName === "上方盒舌" || item.sName === "盒底组件" || item.sName === "下方盒舌"; + + const leftBoxFilter = item => item.sName === "左(上)插位组件" || item.sName === "左贴边位" || item.sName === "左(下)插位组件"; + + const rightBoxFilter = item => item.sName === "右(上)插位组件" || item.sName === "右贴边位" || item.sName === "右(下)插位组件"; + + if (type === "2" || type === 2 || type === "4" || type === 4 || type === 3 || type === "3" || type === 5 || type === "5") { + const box = [...boxList]; + box.forEach(x => { + x.show = true; + }); + if (type === "2" || type === 2) { + box.forEach(x => x.sName === "盒底组件" && (x.show = false)); + } else if (type === "4" || type === 4) { + const title = ["盒底组件", "左贴边位", "右贴边位"]; + box.forEach(x => title.includes(x.sName) && (x.show = false)); + } else if (type === "3" || type === 3) { + const title = ["左(上)插位组件", "右(下)插位组件", "盒底组件"]; + box.forEach(x => title.includes(x.sName) && (x.show = false)); + } else if (type === "5" || type === 5) { + const title = ["盒底组件"]; + box.forEach(x => title.includes(x.sName) && (x.show = false)); + } + setTopBoxList(box.filter(topBoxFilter)); + setLeftBoxList(box.filter(leftBoxFilter)); + if (type === 3 || type === "3") { + setRightBoxList(box.filter(rightBoxFilter).reverse()); + } else { + setRightBoxList(box.filter(rightBoxFilter)); + } + } else { + const box = [...boxList]; + box.forEach(x => { + x.show = true; + }); + setTopBoxList(box.filter(topBoxFilter)); + setLeftBoxList(box.filter(leftBoxFilter)); + setRightBoxList(box.filter(rightBoxFilter)); + } + }; + + updateLists(); + }, + [boxList] + ); + + const handleFocus = (e, index) => { + if (boxList && boxList.length) { + const updatedBoxList = [...boxList]; + updatedBoxList[index].isEditable = true; + setBoxList(updatedBoxList); + } + }; + + const handleBlur = (e, index) => { + if (boxList && boxList.length) { + const updatedBoxList = [...boxList]; + updatedBoxList[index].isEditable = false; + setBoxList(updatedBoxList); + } + }; + + const handleChange = (e, index) => { + const updatedBoxList = [...boxList]; + updatedBoxList[index].value = e.target.value; + setBoxList(updatedBoxList); + }; + + const handleChangeName = (e, index) => { + const updatedBoxList = [...boxList]; + updatedBoxList[index].showName = e.target.value; + setBoxList(updatedBoxList); + }; + + const handleSelect = (name, selectConfig, index, type) => { + let updatedBoxList = [...boxList]; + updatedBoxList[index].type = name; + updatedBoxList[index].selectImage = selectConfig.image; + // 选择盒身数据全部清空 + + const typeList = [1, 2, 3, 4]; + if (typeList.includes(type)) { + const table1 = tableColum.map(x => x.showName); + const table2 = boxBodyList.map(x => x.showName); + const table3 = tableDataList.map(x => x.showName); + const tableTitle = table1.concat(table2, table3); + updatedBoxList.forEach((x, i) => { + if (i !== index && !tableTitle.includes(x.sName)) { + x.value = ""; + x.type = null; + x.selectValue = null; + x.selectImage = null; + // x.showName = + } + }); + setIsDefaultValue(false); + updatedBoxList[index].value = selectConfig.label; + } + setBoxList(updatedBoxList); + }; + const getImage = fileName => { + const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&sModelsId=100&token=${props.token}`; + return imageUrl; + }; + // 下来框 + const renderOptionWithImage = option => { + return ( + +
+ {option.sMakeUpPath ? {option.sName} : ""} + {option.sName} +
+ + ); + }; + const svgBoxProps = { + ...props, + boxList, + showNew: 0, + }; + // 计算展长展宽 + // 创建盒型 + const submit = () => { + const newSlaveData = []; + // 判断是新增还是修改 + + // 存储子表数据 + boxList.forEach((item, index) => { + const i = titleList1.findIndex(i => i.name === item.sName); + const slave = slaveData.find(z => z.sCode === titleList1[i]?.value); + if (i !== -1) { + const data = { + ...slaveData[0], + handleType: slave ? "update" : "add", + sName: item.showName, + sCode: titleList1[i].value, + iValue: item.value, + iOrder: index + 1, + iRowNum: index + 1, + sId: slave ? slave.sId : commonUtils.createSid(), + sMakeUpPath: item.selectImage, + sTypes: item.type, + bVisible: item.value ? true : false, + sParentId: masterData.sId, + sAssignFormula: item.sAssignFormula, + }; + // if (item.value !== "") { + newSlaveData.push(data); + // } + } + }); + const submitSlaveData = []; + slaveData.forEach(item => { + const i = newSlaveData.findIndex(x => x.scode === item.code); + if (i === -1) { + submitSlaveData.push({ ...item, handleType: "del" }); + } + }); + submitSlaveData.concat(newSlaveData); + + // 处理计算公式 + console.log(boxList, "boxList"); + // 计算展长公式 sLengthFormula + let sLengthFormula = ""; + let sWidthFormula = ""; + const boxType = boxList.find(item => item.sName === "盒身")?.type; + const boxLength = Number(boxList.find(item => item.sName === "盒长")?.value); + const boxWidth = Number(boxList.find(item => item.sName === "盒宽")?.value); + const boxHeight = Number(boxList.find(item => item.sName === "盒高")?.value); + const zxcw = boxList.find(x => x.sName === "左(下)插位组件"); + const zscw = boxList.find(x => x.sName === "左(上)插位组件"); + const yscw = boxList.find(x => x.sName === "右(上)插位组件"); + const yxcw = boxList.find(x => x.sName === "右(下)插位组件"); + const zxcwType = zxcw?.type; + const zxcwValue = zxcw?.value; + const zscwType = zscw?.type; + const zscwValue = zscw?.value; + const yscwType = yscw?.type; + const yscwValue = yscw?.value; + const yxcwType = yxcw?.type; + const yxcwValue = yxcw?.value; + let leftTopValue = 0; + let leftTop = ""; + let rightTopValue = 0; + let rightTop = ""; + let leftBottomValue = 0; + let leftBottom = ""; + let rightBottomValue = 0; + let rightBottom = ""; + if (boxType && boxType === "1") { + // 四面盒 + const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value; + const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value; + sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L * 2 + W * 2" + (ytbw ? " +dYTBW" : ""); + + if (zxcwType === "4001" || zxcwType === "4006") { + leftBottomValue = Number(zxcwValue) + boxHeight; + leftBottom = " + dZXCW + W"; + } else if (zxcwType === "4002" || zxcwType === "4003") { + leftBottomValue = Number(zxcwValue); + leftBottom = " + dZXCW"; + } else if (zxcwType === "4004") { + leftBottomValue = Number(zxcwValue) + boxHeight * 2; + leftBottom = " + dZXCW + W * 2"; + } else if (zxcwType === "4005") { + leftBottomValue = boxHeight * 2; + leftBottom = "+ W * 2"; + } + if (yscwType === "6001" || yscwType === "6006") { + rightTopValue = Number(yscwValue) + boxHeight; + rightTop = "dYSCW + W + "; + } else if (yscwType === "6002" || yscwType === "6003") { + rightTopValue = Number(yscwValue); + rightTop = "dYSCW + "; + } else if (yscwType === "6004") { + rightTopValue = Number(yscwValue) + boxHeight * 2; + rightTop = "dYSCW + W * 2+ "; + } else if (yscwType === "6005") { + rightTopValue = boxHeight * 2; + rightTop = "W * 2+ "; + } + if (zscwType === "3001" || zscwType === "3006") { + leftTopValue = Number(zscwValue) + boxHeight; + leftTop = "dZSCW + W +"; + } else if (zscwType === "3002" || zscwType === "3003") { + leftTopValue = Number(zscwValue); + leftTop = "dZSCW +"; + } else if (zscwType === "3004") { + leftTopValue = Number(zscwValue) + boxHeight * 2; + leftTop = "dZSCW + W * 2 +"; + } else if (zscwType === "3005") { + leftTopValue = boxHeight * 2; + leftTop = "W * 2 +"; + } + if (yxcwType === "7001" || yxcwType === "7006") { + rightBottomValue = Number(yxcwValue) + boxHeight; + rightBottom = "+ dYXCW + W"; + } else if (yxcwType === "7002" || yxcwType === "7003") { + rightBottomValue = Number(yxcwValue); + rightBottom = "+ dYXCW "; + } else if (yxcwType === "7004") { + rightBottomValue = Number(yxcwValue) + boxHeight * 2; + rightBottom = "+ dYXCW + W * 2"; + } else if (yxcwType === "7005") { + rightBottomValue = boxHeight * 2; + rightBottom = "+ W * 2"; + } + sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom); + } else if (boxType && boxType === "2") { + // 单折 + const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value; + const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value; + sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L * 2 + W" + (ytbw ? " +dYTBW" : ""); + if (zxcwType === "4001" || zxcwType === "4006") { + leftBottomValue = Number(zxcwValue) + boxHeight; + leftBottom = " + dZXCW + W"; + } else if (zxcwType === "4002" || zxcwType === "4003") { + leftBottomValue = Number(zxcwValue); + leftBottom = " + dZXCW"; + } else if (zxcwType === "4004") { + leftBottomValue = Number(zxcwValue) + boxHeight * 2; + leftBottom = " + dZXCW + W * 2"; + } else if (zxcwType === "4005") { + leftBottomValue = boxHeight * 2; + leftBottom = "+ W * 2"; + } + if (yscwType === "6001" || yscwType === "6006") { + rightTopValue = Number(yscwValue) + boxHeight; + rightTop = "dYSCW + W + "; + } else if (yscwType === "6002" || yscwType === "6003") { + rightTopValue = Number(yscwValue); + rightTop = "dYSCW + "; + } else if (yscwType === "6004") { + rightTopValue = Number(yscwValue) + boxHeight * 2; + rightTop = "dYSCW + W * 2+ "; + } else if (yscwType === "6005") { + rightTopValue = boxHeight * 2; + rightTop = "W * 2+ "; + } + if (zscwType === "3001" || zscwType === "3006") { + leftTopValue = Number(zscwValue) + boxHeight; + leftTop = "dZSCW + W +"; + } else if (zscwType === "3002" || zscwType === "3003") { + leftTopValue = Number(zscwValue); + leftTop = "dZSCW +"; + } else if (zscwType === "3004") { + leftTopValue = Number(zscwValue) + boxHeight * 2; + leftTop = "dZSCW + W * 2 +"; + } else if (zscwType === "3005") { + leftTopValue = boxHeight * 2; + leftTop = "W * 2 +"; + } + if (yxcwType === "7001" || yxcwType === "7006") { + rightBottomValue = Number(yxcwValue) + boxHeight; + rightBottom = "+ dYXCW + W"; + } else if (yxcwType === "7002" || yxcwType === "7003") { + rightBottomValue = Number(yxcwValue); + rightBottom = "+ dYXCW "; + } else if (yxcwType === "7004") { + rightBottomValue = Number(yxcwValue) + boxHeight * 2; + rightBottom = "+ dYXCW + W * 2"; + } else if (yxcwType === "7005") { + rightBottomValue = boxHeight * 2; + rightBottom = "+ W * 2"; + } + sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom); + } else if (boxType && boxType === "3") { + const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value; + const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value; + sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L + W * 2" + (ytbw ? " +dYTBW" : ""); + if (zxcwType === "4001" || zxcwType === "4006") { + leftBottomValue = Number(zxcwValue) + boxHeight; + leftBottom = " + dZXCW + W"; + } else if (zxcwType === "4002" || zxcwType === "4003") { + leftBottomValue = Number(zxcwValue); + leftBottom = " + dZXCW"; + } else if (zxcwType === "4004") { + leftBottomValue = Number(zxcwValue) + boxHeight * 2; + leftBottom = " + dZXCW + W * 2"; + } else if (zxcwType === "4005") { + leftBottomValue = boxHeight * 2; + leftBottom = "+ W * 2"; + } + if (yscwType === "6001" || yscwType === "6006") { + rightTopValue = Number(yscwValue) + boxHeight; + rightTop = "dYSCW + W + "; + } else if (yscwType === "6002" || yscwType === "6003") { + rightTopValue = Number(yscwValue); + rightTop = "dYSCW + "; + } else if (yscwType === "6004") { + rightTopValue = Number(yscwValue) + boxHeight * 2; + rightTop = "dYSCW + W * 2+ "; + } else if (yscwType === "6005") { + rightTopValue = boxHeight * 2; + rightTop = "W * 2+ "; + } + if (zscwType === "3001" || zscwType === "3006") { + leftTopValue = Number(zscwValue) + boxHeight; + leftTop = "dZSCW + W +"; + } else if (zscwType === "3002" || zscwType === "3003") { + leftTopValue = Number(zscwValue); + leftTop = "dZSCW +"; + } else if (zscwType === "3004") { + leftTopValue = Number(zscwValue) + boxHeight * 2; + leftTop = "dZSCW + W * 2 +"; + } else if (zscwType === "3005") { + leftTopValue = boxHeight * 2; + leftTop = "W * 2 +"; + } + if (yxcwType === "7001" || yxcwType === "7006") { + rightBottomValue = Number(yxcwValue) + boxHeight; + rightBottom = "+ dYXCW + W"; + } else if (yxcwType === "7002" || yxcwType === "7003") { + rightBottomValue = Number(yxcwValue); + rightBottom = "+ dYXCW "; + } else if (yxcwType === "7004") { + rightBottomValue = Number(yxcwValue) + boxHeight * 2; + rightBottom = "+ dYXCW + W * 2"; + } else if (yxcwType === "7005") { + rightBottomValue = boxHeight * 2; + rightBottom = "+ W * 2"; + } + sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom); + } else if (boxType && boxType === "4") { + // 天地盒 + const zxcw = boxList.find(x => x.sName === "左(下)插位组件"); + const zscw = boxList.find(x => x.sName === "左(上)插位组件"); + const yscw = boxList.find(x => x.sName === "右(上)插位组件"); + const yxcw = boxList.find(x => x.sName === "右(下)插位组件"); + const zxcwType = zxcw?.type; + const zxcwValue = zxcw?.value; + const zscwType = zscw?.type; + const zscwValue = zscw?.value; + const yscwType = yscw?.type; + const yscwValue = yscw?.value; + const yxcwType = yxcw?.type; + const yxcwValue = yxcw?.value; + let leftValue = ""; + let rightValue = ""; + let topValue = ""; + let bottomValue = ""; + if (zxcwType === "4001" || zxcwType === "4006") { + // leftValue = leftValue + Number(zxcwValue) + boxHeight * 2; + leftValue = "dZXCW + D * 2 +"; + } else if (zxcwType === "4002" || zxcwType === "4003") { + leftValue = "dZXCW + D +"; + } else if (zxcwType === "4004") { + leftValue = "dZXCW + D * 3 +"; + } else if (zxcwType === "4005") { + leftValue = "D * 3 +"; + } + if (yscwType === "6001" || yscwType === "6006") { + rightValue = "+ dYSCW + D * 2"; + } else if (yscwType === "6002" || yscwType === "6003") { + rightValue = "+ dYSCW + D"; + } else if (yscwType === "6004") { + rightValue = "+ dYSCW + D * 3"; + } else if (yscwType === "6005") { + rightValue = " + D * 3"; + } + if (zscwType === "3001" || zscwType === "3006") { + topValue = "dZSCW + D * 2 +"; + } else if (zscwType === "3002" || zscwType === "3003") { + topValue = "dZSCW + D +"; + } else if (zscwType === "3004") { + topValue = "dZSCW + D * 3 +"; + } else if (zscwType === "3005") { + topValue = "D * 3+"; + } + if (yxcwType === "7001" || yxcwType === "7006") { + bottomValue = "+ dYXCW + D * 2"; + } else if (yxcwType === "7002" || yxcwType === "7003") { + bottomValue = "+ dYXCW + D "; + } else if (yxcwType === "7004") { + bottomValue = "+ dYXCW + D * 3"; + } else if (yxcwType === "7005") { + bottomValue = "+ D * 3"; + } + // viewBoxWidth = Number(boxLength) + leftValue + rightValue; + // viewBoxHeight = Number(boxWidth) + topValue + bottomValue; + sLengthFormula = leftValue + "L" + rightValue; + sWidthFormula = topValue + "W" + bottomValue; + } else if (boxType && boxType === "5") { + // 飞机盒 + const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value; + const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value; + sLengthFormula = (ztbw ? "dZTBW+ " : "") + "D * 2 + W * 2" + (ytbw ? " +dYTBW" : ""); + if (zxcwType === "4001" || zxcwType === "4006") { + leftBottomValue = Number(zxcwValue) + boxHeight; + leftBottom = " + dZXCW + D"; + } else if (zxcwType === "4002" || zxcwType === "4003") { + leftBottomValue = Number(zxcwValue); + leftBottom = " + dZXCW"; + } else if (zxcwType === "4004") { + leftBottomValue = Number(zxcwValue) + boxHeight * 2; + leftBottom = " + dZXCW + D * 2"; + } else if (zxcwType === "4005") { + leftBottomValue = boxHeight * 2; + leftBottom = "+ D * 2"; + } + if (yscwType === "6001" || yscwType === "6006") { + rightTopValue = Number(yscwValue) + boxHeight; + rightTop = "dYSCW + D + "; + } else if (yscwType === "6002" || yscwType === "6003") { + rightTopValue = Number(yscwValue); + rightTop = "dYSCW + "; + } else if (yscwType === "6004") { + rightTopValue = Number(yscwValue) + boxHeight * 2; + rightTop = "dYSCW + D * 2+ "; + } else if (yscwType === "6005") { + rightTopValue = boxHeight * 2; + rightTop = "D * 2+ "; + } + if (zscwType === "3001" || zscwType === "3006") { + leftTopValue = Number(zscwValue) + boxHeight; + leftTop = "dZSCW + D +"; + } else if (zscwType === "3002" || zscwType === "3003") { + leftTopValue = Number(zscwValue); + leftTop = "dZSCW +"; + } else if (zscwType === "3004") { + leftTopValue = Number(zscwValue) + boxHeight * 2; + leftTop = "dZSCW + D * 2 +"; + } else if (zscwType === "3005") { + leftTopValue = boxHeight * 2; + leftTop = "D * 2 +"; + } + if (yxcwType === "7001" || yxcwType === "7006") { + rightBottomValue = Number(yxcwValue) + boxHeight; + rightBottom = "+ dYXCW + D"; + } else if (yxcwType === "7002" || yxcwType === "7003") { + rightBottomValue = Number(yxcwValue); + rightBottom = "+ dYXCW "; + } else if (yxcwType === "7004") { + rightBottomValue = Number(yxcwValue) + boxHeight * 2; + rightBottom = "+ dYXCW + D * 2"; + } else if (yxcwType === "7005") { + rightBottomValue = boxHeight * 2; + rightBottom = "+ D * 2"; + } + sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "L" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom); + } + + // 存储盒身数据 主表 + const newMasterData = { + ...masterData, + sBoxBody: boxList.find(item => item.sName === "盒身")?.value || "", + dBoxLength: boxList.find(item => item.sName === "盒长")?.value || "", + dBoxWidth: boxList.find(item => item.sName === "盒宽")?.value || "", + dBoxHeight: boxList.find(item => item.sName === "盒高")?.value || "", + sName: boxList.find(item => item.sName === "盒型名称")?.value || "", + sMakeUpPath: boxList.find(item => item.sName === "盒身")?.selectImage || "", + sTypes: boxList.find(item => item.sName === "盒身")?.type || "", + sLengthFormula: sLengthFormula, + sWidthFormula: sWidthFormula, + }; + + onOk({ slaveData: newSlaveData, masterData: newMasterData }); // 提交数据 + }; + const findIndexBySname = name => { + const i = boxList.findIndex(x => x.sName === name); + return i || 0; + }; + return ( + + {/* 盒身信息 */} +
+
+ {topBoxList.map((topItem, index) => ( +
+
{topItem.sName}
+ {topItem?.selectImage ? ( + {topItem.value} + ) : ( + "" + )} + + +
+ {/*
参数：
*/} + handleChangeName(e, index)} + onFocus={e => handleFocus(e, index)} + onBlur={e => handleBlur(e, index)} + readOnly={!topItem?.isEditable} + className={styles.text} + /> + handleChange(e, index)} + onFocus={e => handleFocus(e, index)} + onBlur={e => handleBlur(e, index)} + readOnly={!topItem?.isEditable} + style={{ width: " 80%" }} + /> +
+
+ ))} +
+
+ {leftBoxList.map((item, index) => ( +
+
{titleList[index + 3]}
+ + +
+ {item?.selectImage ? ( + {item.value} + ) : ( + "" + )} + handleChangeName(e, findIndexBySname(item.sName))} + onFocus={e => handleFocus(e, findIndexBySname(item.sName))} + onBlur={e => handleBlur(e, findIndexBySname(item.sName))} + readOnly={!item?.isEditable} + className={styles.text} + /> + handleChange(e, findIndexBySname(item.sName))} + onFocus={e => handleFocus(e, findIndexBySname(item.sName))} + onBlur={e => handleBlur(e, findIndexBySname(item.sName))} + readOnly={!item?.isEditable} + style={{ width: " 80%" }} + /> +
+
+ ))} +
+
+ {rightBoxList.map((item, index) => ( +
+
{titleList[findIndexBySname(item.sName)]}
+ + +
+ {item?.selectImage ? ( + {item.value} + ) : ( + "" + )} + + handleChangeName(e, findIndexBySname(item.sName))} + onFocus={e => handleFocus(e, findIndexBySname(item.sName))} + onBlur={e => handleBlur(e, findIndexBySname(item.sName))} + readOnly={!item?.isEditable} + className={styles.text} + /> + handleChange(e, findIndexBySname(item.sName))} + onFocus={e => handleFocus(e, findIndexBySname(item.sName))} + onBlur={e => handleBlur(e, findIndexBySname(item.sName))} + readOnly={!item?.isEditable} + style={{ width: " 80%" }} + /> +
+
+ ))} +
+
+
+ +
+
+ {tableColum && tableColum.length + ? tableColum.map((item, index) => { + const uniqueIndex = index + 9; + return ( +
+
+
+ {item.showName} +
+ handleChange(e, uniqueIndex)} + onFocus={e => handleFocus(e, uniqueIndex)} + onBlur={e => handleBlur(e, uniqueIndex)} + readOnly={!boxList[uniqueIndex]?.isEditable} + style={{ width: " 80%" }} + /> +
+
+ ); + }) + : ""} + {boxBodyList && boxBodyList.length + ? boxBodyList.map((item, index) => { + const uniqueIndex = index + 9 + tableColum.length; + + return ( +
+
+
+ {item.showName} +
+ {boxList[uniqueIndex]?.selectImage ? ( + {boxList[uniqueIndex].value} + ) : ( + "" + )} + {isDefaultValue ?
{boxList[uniqueIndex]?.value}
: ""} + +
+
+ ); + }) + : ""} +
+ {tableDataList && tableDataList.length + ? tableDataList.map((item, index) => { + const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length; + + return ( +
+
{item.sName}
+ handleChange(e, uniqueIndex)} + onFocus={e => handleFocus(e, uniqueIndex)} + onBlur={e => handleBlur(e, uniqueIndex)} + readOnly={!boxList[uniqueIndex]?.isEditable} + style={{ width: " 60%" }} + /> +
+ ); + }) + : ""} +
+
+
+
+ + ); +}; + +export default CommonBase(BoxDesignCompontent); diff --git a/src/components/Common/BoxDesignCompontent/index.less b/src/components/Common/BoxDesignCompontent/index.less new file mode 100644 index 0000000..c767155 --- /dev/null +++ b/src/components/Common/BoxDesignCompontent/index.less @@ -0,0 +1,178 @@ +.boxBody { + width: 100%; + height: 100%; + position: relative; + padding: 10px; + .boxTop { + display: flex; + align-items: center; + justify-content: space-around; + width: 640px; + height: 100px; + margin: 0 auto; + .boxFlex { + width: 200px; + display: flex; + align-items: center; + flex-wrap: wrap; + flex-direction: column; + position: relative; + } + } + .boxLeft { + width: 180px; + height: 320px; + display: flex; + flex-wrap: wrap; + flex-direction: column; + position: absolute; + justify-content: space-between; + left: 10px; + top: 130px; + text-align: center; + } + .boxRight { + width: 180px; + height: 320px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + flex-direction: column; + position: absolute; + right: 10px; + top: 130px; + text-align: center; + } + .boxBottom{ + width: 500px; + height: 380px; + position: absolute; + top: 130px; + left: 50%; + transform: translateX(-50%); + .svgBox{ + width: 100%; + height: 250px; + background-color: #9AFF9A; + } + .content{ + width: 100%; + height: 130px; + :global{ + .ant-select-selector{ + // width: 380px !important; /* 选择框宽度 */ + color: #333; + } + .ant-select-selection-item { + color: #333 !important; /* 选择框文字颜色 */ + padding-left: 50px; + line-height: 40px; + } + + } + } + } + .boxTitle{ + background-color: #3399ff; + color: #fff; + width: 180px; + height: 20px; + line-height: 20px; + text-align: center; + } + :global{ + .mySelects .ant-select-selector { + background-color: #99CCFF !important; /* 选择框背景色 */ + height: 40px !important; /* 选择框高度 */ + } + .mySelects .ant-select-selection-item { + color: transparent !important; /* 选择框文字颜色 */ + } + + } + .mySelects { + position: relative; + } + .boxInput{ + display: flex; + align-items: center; + justify-content: space-between; + width: 180px; + height: 40px; + position: relative; + :global { + .ant-input { + background-color: #99CCFF !important; /* 输入框背景色 */ + border: 1px solid #d9d9d9; + height: 40px; + } + + } + } + .text{ + background-color: #99CCFF; + width: 100%; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 10px; + margin-right: 1px; + } + .content { + :global{ + .ant-input { + background-color: #EEEEEE !important; /* 输入框背景色 */ + height: 40px; + } + .ant-select-selector { + background-color: #EEEEEE !important; /* 选择框背景色 */ + height: 40px !important; /* 选择框高度 */ + } + + } + .text{ + background-color: #EEEEEE ; + margin: 0; + } + .boxFlex { + display: flex; + align-items: center; + flex-wrap: wrap; + flex-direction: column; + width: 500px; + } + .boxFlexs{ + display: flex; + align-items: center; + width: 500px; + justify-content: space-between; + .boxInputs{ + display: flex; + align-items: center; + flex: 1; + :global{ + .ant-input { + background-color: #EEEEEE !important; /* 输入框背景色 */ + height: 40px; + } + } + } + } + .boxInput{ + width: 100%; + position: relative; + .defaultValue{ + position: absolute; + left: 32%; + top: 3px; + width: 60px; + height: 30px; + background-color: #EEE; + color: #333; + line-height: 40px; + z-index: 2; + text-align: center; + } + } + } +} diff --git a/src/components/Common/BoxDesignCompontent/showSvg.js b/src/components/Common/BoxDesignCompontent/showSvg.js new file mode 100644 index 0000000..ddcefc9 --- /dev/null +++ b/src/components/Common/BoxDesignCompontent/showSvg.js @@ -0,0 +1,1010 @@ +/* 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, + createRoundedCornersWeltTop, + createRightAngleBoxBottomComponent, + createBoxBottomComponent1, + createBoxBottomComponent2, + createBoxBottomComponent3, + createBoxBottomComponent4, + createBoxBottomComponent5, + createBoxBottomComponent6, + createBoxComponentNew, + createBoxComponentNew1, + createBoxComponentNew2, + createBoxComponentNew3, + createBoxComponentNew4, + createBoxComponentNew5, + createBoxComponentNew4_1, + createWelt, + createWelt1, + createWelt2, + createWelt2Right, + createWelt3, + createWelt3Right, + createText, + createDoubleArrow, + createHorizontalDoubleArrow, +} 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 } = 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; + svg.innerHTML = ""; + + // 获取盒型类型 + const svgTypes = boxList.find(x => x.sName === "盒身")?.type || 1; + setSvgType(svgTypes); + + // 获取盒长、盒宽、盒高 + const boxLength = Number(boxList.find(x => x.sName === "盒长")?.value) || 0; + const boxWidth = Number(boxList.find(x => x.sName === "盒宽")?.value) || 0; + const boxHeight = Number(boxList.find(x => x.sName === "盒高")?.value) || 0; + + setWidth(boxLength); + setHeight(boxWidth); + setDeep(boxHeight); + + // 计算视口宽度和高度 + 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); + const bottom = bottomOffect(boxList, boxLength, boxWidth, boxHeight); + max = top + bottom + 4; + } + + let viewBoxHeight = Number(boxWidth) + max; + if (Number(svgType) === 1) { + // 四面盒身 + viewBoxWidth = dZTBW + Number(boxLength) * 2 + Number(boxWidth) * 2; + } else if (Number(svgType) === 2) { + viewBoxWidth = boxLength * 2 + boxWidth + dYTBW + dZTBW; + } else if (Number(svgType) === 3) { + viewBoxWidth = boxLength + boxWidth * 2 + dYTBW + dZTBW; + } else { + viewBoxWidth = boxLength + boxHeight + dYTBW + dZTBW; + viewBoxHeight = Number(boxWidth) + Number(boxHeight) * 2 + max; + } + if (!dSvgBoxWidth) { + viewBoxWidth = Number(viewBoxWidth) + 200; + viewBoxHeight = Number(viewBoxHeight) + 200; + } + // 计算缩放比例 + let scale = 1; + const ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight) * scale; + svg.setAttribute("viewBox", `${-(zbtb?.value * scale)} ${-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 => { + svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); + }); + + let pathList = []; + // 上方盒舌 + 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 (sfhs?.type === "1004") { + // pathList.push(createFoldWeltTopLine(scaledHeight * 0.5, -dSFHS * scale * 0.5, scaledWidth, 0)); + // pathList.push(createFoldWeltTopLine(-scaledHeight * 0.5, -dSFHS * scale * 0.5, scaledWidth * 2 + scaledHeight * 2, 0)); + // } + // if (sfhs?.type === "1005") { + // pathList.push(createFoldWeltTopLine(scaledHeight * 0.85, -dSFHS * scale * 0.9, scaledWidth, 0)); + // pathList.push(createFoldWeltTopLine(-scaledHeight * 0.85, -dSFHS * scale * 0.9, scaledWidth * 2 + scaledHeight * 2, 0)); + // } + // 盒底组件 + 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 { + // 下方盒舌 + + 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)); + } + } + + // 左边贴边 + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); + if (zbtb?.type && dZTBW) { + pathList.push(createText(-dZTBW * 0.4, scaledDeep / 2, 10 * scales, dZTBW)); + } + // 右边贴边 + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight * 2, 0)); + if (ybtb?.type && dYTBW) { + pathList.push(createText(scaledWidth * 2 + scaledHeight * 2 + dYTBW * 0.4, scaledDeep / 2, 10 * scales, dYTBW)); + } + // 左上部件 + pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0)); + if ((zsbj?.type === "3001" && zsbj?.value )|| (zsbj?.type === "3006" && zsbj?.value)) { + 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")); + } + // 右上部件 + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0)); + if (ysbj?.type === "6001" && 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 + 4, 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")); + } + // 左下部件- + if (!(hdzj && hdzj.type)) { + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep)); + if (zxbj?.type === "4001" && 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")); + } + } + if (!(hdzj && hdzj.type)) { + pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW * scale, scaledWidth + scaledHeight, scaledDeep)); + if (yxbj?.type === "7001" && 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 * 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 => { + svg.appendChild(x); + }); + } 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 => { + svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); + }); + let pathList = []; + // 上方盒舌 + 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)); + } + // 下方盒舌 + 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)); + } + // 左边贴边 + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); + if (zbtb?.type && dZTBW) { + pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW)); + } + // 右边贴边 + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight, 0)); + if (zbtb?.type && dYTBW) { + pathList.push(createText(scaledWidth * 2 + scaledHeight + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW)); + } + // 左上部件 + pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0)); + if ((zsbj?.type === "3001" && zsbj?.value )|| (zsbj?.type === "3006" && zsbj?.value)) { + 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)); + } + // 右上部件 + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0)); + if (ysbj?.type === "6001" && 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 + 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")); + 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)); + } + // 左下部件- + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep)); + if (zxbj?.type === "4001" && 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 === "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)); + } + // 右下部件 + pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW, scaledWidth + scaledHeight, scaledDeep)); + if (yxbj?.type === "7001" && 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 => { + svg.appendChild(x); + }); + } 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 => { + svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); + }); + let pathList = []; + // 上方盒舌 + 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)); + } + // 下方盒舌 + 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)); + } + // 左边贴边 + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); + if (zbtb?.type && dZTBW) { + pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW)); + } + // 右边贴边 + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth + scaledHeight * 2, 0)); + if (zbtb?.type && dYTBW) { + pathList.push(createText(scaledWidth + scaledHeight * 2 + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW)); + } + // 左下部件- + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, scaledHeight, scaledDeep)); + if (zxbj?.type === "4001" && 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)); + } + // 右上部件 + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledHeight, 0)); + if (ysbj?.type === "6001" && 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 + 4, 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 => { + svg.appendChild(x); + }); + } else { + svg.appendChild(createFullTelescope(scaledWidth, scaledHeight, scaledDeep, 0, 0)); + // createFullTelescope + let pathList = []; + 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")); + + // 横向 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 => { + svg.appendChild(x); + }); + } + }; + // 计算头部偏移 + const topOffect = (list, length, width, height) => { + // 判断code + const valueList = list.filter(x => x.type !== ("" || null)); + // const titleList = ['上方盒舌','左(上)插位组件','右(上)插位组件'] + const sfhs = valueList.find(x => x.sName === "上方盒舌"); + const zscw = valueList.find(x => x.sName === "左(上)插位组件"); + const yscw = valueList.find(x => x.sName === "右(上)插位组件"); + let top = 0; + const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006"]; + const four = ["6004", "3004", "4004", "7004"]; + const five = ["6005", "3005", "4005", "7005"]; + const dYSCW = Number(yscw?.value) || 0; + const dZSCW = Number(zscw?.value) || 0; + // 如果存在插位就不计算盒舌 + if (zscw?.type && yscw?.type) { + const max = Math.max(dZSCW, dYSCW); + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + top = width * 2; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + top = width * 2 + max; + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { + top = width + max; + } else { + top = max; + } + } else if (yscw?.type) { + const max = dYSCW; + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + top = width * 2; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + top = width * 2 + max; + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { + top = width + max; + } else { + top = max; + } + } else if (zscw?.type) { + const max = dZSCW; + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + top = width * 2; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + top = width * 2 + max; + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { + top = width + max; + } else { + top = max; + } + } else { + top = sfhs?.value; + } + return isNaN(top) ? 0 : top; + }; + const bottomOffect = (list, length, width, height) => { + // 判断code + const valueList = list.filter(x => x.type !== ("" || null)); + // const titleList = ['上方盒舌','左(上)插位组件','右(上)插位组件'] + const sfhs = valueList.find(x => x.sName === "下方盒舌"); + const zscw = valueList.find(x => x.sName === "左(下)插位组件"); + const yscw = valueList.find(x => x.sName === "右(下)插位组件"); + const hdzj = valueList.find(x => x.sName === "盒底组件"); + // 将找到的对象放入数组中，并过滤掉 undefined 值 + // 使用 reduce 方法比较 value 属性，找出最大的对象 + let top = 0; + const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006"]; + const four = ["6004", "3004", "4004", "7004"]; + const five = ["6005", "3005", "4005", "7005"]; + const dYSCW = Number(yscw?.value) || 0; + const dZSCW = Number(zscw?.value) || 0; + if (hdzj?.type) { + return Number(hdzj?.value); + } + if (zscw?.type && yscw?.type) { + const max = Math.max(dZSCW, dYSCW); + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + top = width * 2; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + top = width * 2 + max; + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { + top = width + max; + } else { + top = max; + } + } else if (yscw?.type) { + const max = dYSCW; + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + top = width * 2; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + top = width * 2 + max; + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { + top = width + max; + } else { + top = max; + } + } else if (zscw?.type) { + const max = dZSCW; + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + top = width * 2; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + top = width * 2 + max; + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { + top = width + max; + } else { + top = max; + } + } else { + top = sfhs?.value; + } + // if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + // top = width * 2; + // } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + // if (dZSCW && dYSCW) { + // const max = Math.max(dZSCW, dYSCW); + // top = width * 2 + max; + // } else if (dZSCW && !dYSCW) { + // top = width * 2 + dZSCW; + // } else if (!dZSCW && dYSCW) { + // top = width * 2 + dYSCW; + // } + // } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { + // if (dZSCW && dYSCW) { + // const max = Math.max(dZSCW, dYSCW); + // top = width + max; + // } else if (dZSCW && !dYSCW) { + // top = width + dZSCW; + // } else if (!dZSCW && dYSCW) { + // top = width + dYSCW; + // } + // } else { + // if (dZSCW && !dYSCW) { + // top = Number(dZSCW); + // } else if (!dZSCW && dYSCW) { + // top = Number(dYSCW); + // } else { + // top = Number(sfhs?.value); + // } + // } + + return isNaN(top) ? 0 : top; + }; + // 上方盒舌左边 + 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) => { + 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; + default: + data = createNoneProject(); + break; + } + return data; + }; + // 右边贴位 + const createTrapezoidRight = (trapezoidLeftType, height, size, offsetX, offsetY) => { + 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; + default: + data = createNoneProject(); + break; + } + return data; + }; + // 左上部件 + const createDynamicTopLeft = (trapezoidLeftType, width, height, size, offsetX, offsetY) => { + if (!size) return createNoneProject(); + let data = {}; + switch (trapezoidLeftType) { + case "3001": + data = createBoxComponentNew(width, height, size, offsetX, offsetY); + break; + case "3002": + data = createBoxComponentNew1(width, height, size, offsetX, offsetY); + break; + case "3003": + data = createBoxComponentNew2(width, height, size, offsetX, offsetY); + break; + case "3004": + data = createBoxComponentNew3(width, height, size, offsetX, offsetY); + break; + case "3005": + data = createBoxComponentNew4(width, height, size, offsetX, offsetY); + break; + case "3006": + data = createBoxComponentNew5(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 "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 "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; + 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 = {}; + switch (trapezoidLeftType) { + case "5001": + data = createRightAngleBoxBottomComponent(width, deep, size, offsetX, offsetY); + break; + case "5002": + data = createBoxBottomComponent1(width, deep, size, offsetX, offsetY); + break; + case "5003": + data = createBoxBottomComponent2(width, deep, size, offsetX, offsetY); + break; + case "5004": + data = createBoxBottomComponent3(width, deep, size, offsetX, offsetY); + break; + case "5005": + data = createBoxBottomComponent4(width, deep, size, offsetX, offsetY); + break; + case "5006": + data = createBoxBottomComponent5(width, deep, size, offsetX, offsetY); + break; + case "5007": + data = createBoxBottomComponent6(width, deep, size, offsetX, offsetY); + break; + default: + data = createNoneProject(); + break; + } + return data; + }; + return ( +
+ +
+ ); +}; + +export default SvgBox; diff --git a/src/components/Common/BoxDesignCompontent/svg.js b/src/components/Common/BoxDesignCompontent/svg.js new file mode 100644 index 0000000..595c31a --- /dev/null +++ b/src/components/Common/BoxDesignCompontent/svg.js @@ -0,0 +1,1577 @@ +/* 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, + createRoundedCornersWeltTop, + createRightAngleBoxBottomComponent, + createBoxBottomComponent1, + createBoxBottomComponent2, + createBoxBottomComponent3, + createBoxBottomComponent4, + createBoxBottomComponent5, + createBoxBottomComponent6, + createBoxComponentNew, + createBoxComponentNew1, + createBoxComponentNew2, + createBoxComponentNew3, + createBoxComponentNew4, + createBoxComponentNew5, + createBoxComponentNew4_1, + createWelt, + createWelt1, + createWelt2, + createWelt2Right, + createWelt3, + createWelt3Right, + createText, + createDoubleArrow, + createHorizontalDoubleArrow, + createFullTelescope, + createBoxComponentNewFull, + createBoxComponentNewFull1, + createBoxComponentNewFull2, + createBoxComponentNewFul3, + createBoxComponentNewFul4, + createBoxComponentNewFul5, +} 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 } = 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 = ""; + + // 获取盒型类型 + const svgTypes = boxList.find(x => x.sName === "盒身")?.type || 1; + setSvgType(svgTypes); + + // 获取盒长、盒宽、盒高 + const boxLength = Number(boxList.find(x => x.sName === "盒长")?.value) || 0; + const boxWidth = Number(boxList.find(x => x.sName === "盒宽")?.value) || 0; + const boxHeight = Number(boxList.find(x => x.sName === "盒高")?.value) || 0; + setWidth(boxLength); + setHeight(boxWidth); + setDeep(boxHeight); + + // 计算视口宽度和高度 + 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); + const bottom = bottomOffect(boxList, boxLength, boxWidth, boxHeight); + max = Number(top) + Number(bottom); + } + + let viewBoxHeight = Number(boxHeight) + max; + if (Number(svgType) === 1) { + // 四面盒身 + viewBoxWidth = dZTBW + Number(boxLength) * 2 + Number(boxWidth) * 2; + } else if (Number(svgType) === 2) { + viewBoxWidth = boxLength * 2 + boxWidth + dYTBW + dZTBW; + } else if (Number(svgType) === 3) { + viewBoxWidth = boxLength + boxWidth * 2 + dYTBW + dZTBW; + } 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") { + 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") { + 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") { + 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") { + 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; + } else if (Number(svgType) === 5) { + viewBoxWidth = (boxHeight + boxWidth) * 2 + dYTBW + dZTBW; + viewBoxHeight = boxLength + max; + } + // 计算缩放比例 + 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) * scale + : topOffect(boxList, boxLength, boxWidth, boxHeight) * scale; + const bottom = bottomOffect(boxList, boxLength, boxWidth, boxHeight); + if (Number(svgType) === 4) { + ySvg = ySvg + boxHeight * scale; + } + ySvg = ySvg + 50 * scale; + svg.setAttribute( + "viewBox", + `${-(zbtb?.value * 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.6; + let ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight) * scale; + if (Number(svgType) === 4) { + ySvg = ySvg + boxHeight; + } + ySvg = ySvg + 50 * scale; + svg.setAttribute( + "viewBox", + `${-(dSvgBoxWidth ? zbtb?.value : viewBoxWidth / 2)} ${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) * 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 { + leftSize = zbtb?.value; + } + svg.setAttribute("viewBox", `${-(leftSize * scale)} ${-ySvg} ${viewBoxWidth} ${viewBoxHeight}`); + 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"; + } else if (props.showNew === 2) { + // g.setAttribute("transform", `rotate(${iFAngle, dSvgBoxWidth/2,dSvgBoxHeight*2})`); + let ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight) * 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 { + leftSize = zbtb?.value; + } + svg.setAttribute("viewBox", `${-(leftSize * scale)} ${-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 = []; + // 上方盒舌 + 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 { + // 下方盒舌 + + 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)); + } + } + + // 左边贴边 + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); + if (zbtb?.type && dZTBW) { + pathList.push(createText(-dZTBW * 0.4, scaledDeep / 2, 10 * scales, dZTBW)); + } + // 右边贴边 + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight * 2, 0)); + if (ybtb?.type && dYTBW) { + pathList.push(createText(scaledWidth * 2 + scaledHeight * 2 + dYTBW * 0.4, scaledDeep / 2, 10 * scales, dYTBW)); + } + // 左上部件 + pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0)); + if ((zsbj?.type === "3001" && zsbj?.value) || (zsbj?.type === "3006" && zsbj?.value)) { + 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")); + } + // 右上部件 + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0)); + if ((ysbj?.type === "6001" && ysbj?.value) || (ysbj?.type === "6006" && 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")); + } + // 左下部件- + + if (!(hdzj && hdzj.type)) { + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep)); + if ((zxbj?.type === "4001" && zxbj?.value) || (zxbj?.type === "4006" && 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")); + } + } + if (!(hdzj && hdzj.type)) { + pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW * scale, scaledWidth + scaledHeight, scaledDeep)); + if ((yxbj?.type === "7001" && yxbj?.value) || (yxbj?.type === "7006" && 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 = []; + // 上方盒舌 + 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)); + } + // 下方盒舌 + 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)); + } + // 左边贴边 + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); + if (zbtb?.type && dZTBW) { + pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW)); + } + // 右边贴边 + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight, 0)); + if (zbtb?.type && dYTBW) { + pathList.push(createText(scaledWidth * 2 + scaledHeight + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW)); + } + // 左上部件 + pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0)); + if ((zsbj?.type === "3001" && zsbj?.value) || (zsbj?.type === "3006" && zsbj?.value)) { + 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)); + } + // 右上部件 + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0)); + if ((ysbj?.type === "6001" && ysbj?.value) || (ysbj?.type === "6006" && 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)); + } + // 左下部件- + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep)); + if ((zxbj?.type === "4001" && zxbj?.value) || (zxbj?.type === "4006" && 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)); + } + // 右下部件 + pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW, scaledWidth + scaledHeight, scaledDeep)); + if ((yxbj?.type === "7001" && yxbj?.value) || (yxbj?.type === "7006" && 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 = []; + // 上方盒舌 + 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)); + } + // 下方盒舌 + 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)); + } + // 左边贴边 + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); + if (zbtb?.type && dZTBW) { + pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW)); + } + // 右边贴边 + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth + scaledHeight * 2, 0)); + if (zbtb?.type && dYTBW) { + pathList.push(createText(scaledWidth + scaledHeight * 2 + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW)); + } + // 左下部件- + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, scaledHeight, scaledDeep)); + if ((zxbj?.type === "4001" && zxbj?.value) || (zxbj?.type === "4006" && 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)); + } + // 右上部件 + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledHeight, 0)); + if ((ysbj?.type === "6001" && ysbj?.value) || (ysbj?.type === "6006" && 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 = []; + // 上方盒舌 + 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)); + } + // 下方盒舌 + 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)); + } + // 上方部件 + pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledDeep, -dZSCW * scale, 0, -scaledDeep)); + if ((zsbj?.type === "3001" && zsbj?.value) || (zsbj?.type === "3006" && 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")); + } + // 左边部件 + pathList.push(createFull(zxbj?.type, scaledHeight, -scaledDeep, -dZXCW, -scaledDeep, 0)); + if ((zxbj?.type === "4001" && dZXCW) || (zxbj?.type === "4006" && 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)); + } + // 右边 + pathList.push(createFull(ysbj?.type, scaledHeight, scaledDeep, dYSCW, scaledWidth + scaledDeep, 0)); + if ((ysbj?.type === "6001" && dYSCW) || (ysbj?.type === "6006" && 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)); + } + // 下方部件 + pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledDeep, dYXCW * scale, 0, scaledHeight + scaledDeep)); + if ((yxbj?.type === "7001" && yxbj?.value) || (yxbj?.type === "7006" && 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 = []; + // 上方盒舌 + 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)); + } + // 下方盒舌 + + 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)); + } + + // 左边贴边 + pathList.push(createTrapezoidLeft(zbtb?.type, scaledWidth, -dZTBW * scale, 0, 0)); + if (zbtb?.type && dZTBW) { + pathList.push(createText(-dZTBW * 0.4, scaledWidth / 2, 10 * scales, dZTBW)); + } + // 右边贴边 + pathList.push(createTrapezoidRight(ybtb?.type, scaledWidth, dYTBW * scale, scaledHeight * 2 + scaledDeep * 2, 0)); + if (ybtb?.type && dYTBW) { + pathList.push(createText(scaledHeight * 2 + scaledDeep * 2 + dYTBW * 0.4, scaledWidth / 2, 10 * scales, dYTBW)); + } + // 左上部件 + pathList.push(createDynamicTopLeft(zsbj?.type, scaledHeight, -scaledDeep, -dZSCW * scale, 0, 0)); + if ((zsbj?.type === "3001" && zsbj?.value) || (zsbj?.type === "3006" && 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")); + } + // 右上部件 + pathList.push(createDynamicTopLeft(ysbj?.type, scaledHeight, -scaledDeep, -dYSCW * scale, scaledHeight + scaledDeep, 0)); + if ((ysbj?.type === "6001" && ysbj?.value) || (ysbj?.type === "6006" && 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")); + } + // 左下部件- + + if (!(hdzj && hdzj.type)) { + pathList.push(createDynamicTopLeft(zxbj?.type, scaledHeight, scaledDeep, dZXCW * scale, 0, scaledWidth)); + if ((zxbj?.type === "4001" && zxbj?.value) || (zxbj?.type === "4006" && 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")); + } + } + if (!(hdzj && hdzj.type)) { + pathList.push(createDynamicTopLeft(yxbj?.type, scaledHeight, scaledDeep, dYXCW * scale, scaledHeight + scaledDeep, scaledWidth)); + if ((yxbj?.type === "7001" && yxbj?.value) || (yxbj?.type === "7006" && 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})`); + } + }; + // 计算头部偏移 + const topOffect = (list, length, width, height) => { + // 判断code + const valueList = list.filter(x => x.type !== ("" || null)); + // const titleList = ['上方盒舌','左(上)插位组件','右(上)插位组件'] + const sfhs = valueList.find(x => x.sName === "上方盒舌"); + const zscw = valueList.find(x => x.sName === "左(上)插位组件"); + const yscw = valueList.find(x => x.sName === "右(上)插位组件"); + const svgType = valueList.find(x => x.sName === "盒身")?.type; + let top = 0; + const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006"]; + const four = ["6004", "3004", "4004", "7004"]; + const five = ["6005", "3005", "4005", "7005"]; + const dYSCW = Number(yscw?.value) || 0; + const dZSCW = Number(zscw?.value) || 0; + // 如果存在插位就不计算盒舌 + if (zscw?.type && yscw?.type) { + const max = Math.max(dZSCW, dYSCW); + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + top = svgType === "5" ? height * 2 : width * 2; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + const z = four.includes(zscw?.type) ? (svgType === "5" ? height * 2 + dZSCW : width * 2 + dZSCW) : dZSCW; + const y = four.includes(yscw?.type) ? (svgType === "5" ? height * 2 + dYSCW : width * 2 + dYSCW) : dYSCW; + const max = Math.max(z, y); + if (max > sfhs?.value) { + top = max; + } else { + top = sfhs?.value; + } + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { + const z = one.includes(zscw?.type) ? (svgType === "5" ? height + dZSCW : width + dZSCW) : dZSCW; + const y = one.includes(yscw?.type) ? (svgType === "5" ? height + dYSCW : width + dYSCW) : dYSCW; + const max = Math.max(z, y); + if (max > sfhs?.value) { + top = max; + } else { + top = sfhs?.value; + } + } else { + top = max; + } + } else if (yscw?.type) { + const max = dYSCW; + if ( + five.includes(zscw?.type) || + five.includes(yscw?.type) || + (four.includes(zscw?.type) || four.includes(yscw?.type)) || + (one.includes(zscw?.type) || one.includes(yscw?.type)) + ) { + const coefficient = svgType === "5" ? height : width; + let addValue = 0; + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + addValue = 2 * coefficient; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + addValue = 2 * coefficient + max; + } else { + addValue = coefficient + max; + } + top = addValue > sfhs?.value ? addValue : sfhs?.value; + } else { + top = addValue > sfhs?.value ? max : sfhs?.value; + } + } else if (zscw?.type) { + const max = dZSCW; + if ( + five.includes(zscw?.type) || + five.includes(yscw?.type) || + (four.includes(zscw?.type) || four.includes(yscw?.type)) || + (one.includes(zscw?.type) || one.includes(yscw?.type)) + ) { + const coefficient = svgType === "5" ? height : width; + let addValue = 0; + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + addValue = 2 * coefficient; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + addValue = 2 * coefficient + max; + } else { + addValue = coefficient + max; + } + top = addValue > sfhs?.value ? addValue : sfhs?.value; + } else { + top = max > sfhs?.value ? max : sfhs?.value; + } + } else { + top = sfhs?.value; + } + // 处理天地盒默认加上高 + if (Number(svgType) === 4) { + top = top + height; + } + return isNaN(top) ? 0 : top; + }; + const bottomOffect = (list, length, width, height) => { + // 判断code + const valueList = list.filter(x => x.type !== ("" || null)); + // const titleList = ['上方盒舌','左(上)插位组件','右(上)插位组件'] + const sfhs = valueList.find(x => x.sName === "下方盒舌"); + const zscw = valueList.find(x => x.sName === "左(下)插位组件"); + const yscw = valueList.find(x => x.sName === "右(下)插位组件"); + const hdzj = valueList.find(x => x.sName === "盒底组件"); + const svgType = valueList.find(x => x.sName === "盒身")?.type; + // 将找到的对象放入数组中，并过滤掉 undefined 值 + // 使用 reduce 方法比较 value 属性，找出最大的对象 + let top = 0; + const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006"]; + const four = ["6004", "3004", "4004", "7004"]; + const five = ["6005", "3005", "4005", "7005"]; + const dYSCW = Number(yscw?.value) || 0; + const dZSCW = Number(zscw?.value) || 0; + if (hdzj?.type) { + return Number(hdzj?.value); + } + if (zscw?.type && yscw?.type) { + const max = Math.max(dZSCW, dYSCW); + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + top = svgType === "5" ? height * 2 : width * 2; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + const z = four.includes(zscw?.type) ? (svgType === "5" ? height * 2 + dZSCW : width * 2 + dZSCW) : dZSCW; + const y = four.includes(yscw?.type) ? (svgType === "5" ? height * 2 + dYSCW : width * 2 + dYSCW) : dYSCW; + const max = Math.max(z, y); + if (max > sfhs?.value) { + top = max; + } else { + top = sfhs?.value; + } + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { + const z = one.includes(zscw?.type) ? (svgType === "5" ? height + dZSCW : width + dZSCW) : dZSCW; + const y = one.includes(yscw?.type) ? (svgType === "5" ? height + dYSCW : width + dYSCW) : dYSCW; + const max = Math.max(z, y); + if (max > sfhs?.value) { + top = max; + } else { + top = sfhs?.value; + } + } else { + top = max; + } + } else if (yscw?.type) { + const max = dYSCW; + if ( + five.includes(zscw?.type) || + five.includes(yscw?.type) || + (four.includes(zscw?.type) || four.includes(yscw?.type)) || + (one.includes(zscw?.type) || one.includes(yscw?.type)) + ) { + const coefficient = svgType === "5" ? height : width; + let addValue = 0; + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + addValue = 2 * coefficient; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + addValue = 2 * coefficient + max; + } else { + addValue = coefficient + max; + } + top = addValue > sfhs?.value ? addValue : sfhs?.value; + } else { + top = addValue > sfhs?.value ? max : sfhs?.value; + } + } else if (zscw?.type) { + const max = dZSCW; + if ( + five.includes(zscw?.type) || + five.includes(yscw?.type) || + (four.includes(zscw?.type) || four.includes(yscw?.type)) || + (one.includes(zscw?.type) || one.includes(yscw?.type)) + ) { + const coefficient = svgType === "5" ? height : width; + let addValue = 0; + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + addValue = 2 * coefficient; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + addValue = 2 * coefficient + max; + } else { + addValue = coefficient + max; + } + top = addValue > sfhs?.value ? addValue : sfhs?.value; + } else { + top = max > sfhs?.value ? max : sfhs?.value; + } + } else { + top = sfhs?.value; + } + // if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + // top = width * 2; + // } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + // if (dZSCW && dYSCW) { + // const max = Math.max(dZSCW, dYSCW); + // top = width * 2 + max; + // } else if (dZSCW && !dYSCW) { + // top = width * 2 + dZSCW; + // } else if (!dZSCW && dYSCW) { + // top = width * 2 + dYSCW; + // } + // } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { + // if (dZSCW && dYSCW) { + // const max = Math.max(dZSCW, dYSCW); + // top = width + max; + // } else if (dZSCW && !dYSCW) { + // top = width + dZSCW; + // } else if (!dZSCW && dYSCW) { + // top = width + dYSCW; + // } + // } else { + // if (dZSCW && !dYSCW) { + // top = Number(dZSCW); + // } else if (!dZSCW && dYSCW) { + // top = Number(dYSCW); + // } else { + // top = Number(sfhs?.value); + // } + // } + // 处理天地盒默认加上高 + if (Number(svgType) === 4) { + top = top + height; + } + return isNaN(top) ? 0 : top; + }; + // 上方盒舌左边 + 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) => { + 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; + default: + data = createNoneProject(); + break; + } + return data; + }; + // 右边贴位 + const createTrapezoidRight = (trapezoidLeftType, height, size, offsetX, offsetY) => { + 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; + default: + data = createNoneProject(); + break; + } + return data; + }; + // 左上部件 + const createDynamicTopLeft = (trapezoidLeftType, width, height, size, offsetX, offsetY) => { + if (!size) return createNoneProject(); + let data = {}; + switch (trapezoidLeftType) { + case "3001": + data = createBoxComponentNew(width, height, size, offsetX, offsetY); + break; + case "3002": + data = createBoxComponentNew1(width, height, size, offsetX, offsetY); + break; + case "3003": + data = createBoxComponentNew2(width, height, size, offsetX, offsetY); + break; + case "3004": + data = createBoxComponentNew3(width, height, size, offsetX, offsetY); + break; + case "3005": + data = createBoxComponentNew4(width, height, size, offsetX, offsetY); + break; + case "3006": + data = createBoxComponentNew5(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 "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 "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; + 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 = {}; + switch (trapezoidLeftType) { + case "5001": + data = createRightAngleBoxBottomComponent(width, deep, size, offsetX, offsetY); + break; + case "5002": + data = createBoxBottomComponent1(width, deep, size, offsetX, offsetY); + break; + case "5003": + data = createBoxBottomComponent2(width, deep, size, offsetX, offsetY); + break; + case "5004": + data = createBoxBottomComponent3(width, deep, size, offsetX, offsetY); + break; + case "5005": + data = createBoxBottomComponent4(width, deep, size, offsetX, offsetY); + break; + case "5006": + data = createBoxBottomComponent5(width, deep, size, offsetX, offsetY); + break; + case "5007": + data = createBoxBottomComponent6(width, deep, size, offsetX, offsetY); + break; + default: + data = createNoneProject(); + break; + } + return data; + }; + + // 天地盒部件 + const createFull = (trapezoidLeftType, width, deep, size, offsetX, offsetY) => { + let data = {}; + if (!size) return createNoneProject(); + switch (trapezoidLeftType) { + case "4001": + data = createBoxComponentNewFull(width, deep, size, offsetX, offsetY); + break; + case "4002": + data = createBoxComponentNewFull1(width, size, offsetX, offsetY); + break; + case "4003": + data = createBoxComponentNewFull2(width, size, offsetX, offsetY); + break; + case "4004": + data = createBoxComponentNewFul3(width, deep, size, offsetX, offsetY); + break; + case "4005": + data = createBoxComponentNewFul4(width, deep, size, offsetX, offsetY); + break; + case "4006": + data = createBoxComponentNewFul5(width, deep, size, offsetX, offsetY); + break; + case "6001": + data = createBoxComponentNewFull(width, deep, size, offsetX, offsetY); + break; + case "6002": + data = createBoxComponentNewFull1(width, size, offsetX, offsetY); + break; + case "6003": + data = createBoxComponentNewFull2(width, size, offsetX, offsetY); + break; + case "6004": + data = createBoxComponentNewFul3(width, deep, size, offsetX, offsetY); + break; + case "6005": + data = createBoxComponentNewFul4(width, deep, size, offsetX, offsetY); + break; + case "6006": + data = createBoxComponentNewFul5(width, deep, size, offsetX, offsetY); + break; + default: + data = createNoneProject(); + break; + } + return data; + }; + return ( +
+ +
+ ); +}; + +export default SvgBox; diff --git a/src/components/Common/BoxDesignCompontent/svg1.js b/src/components/Common/BoxDesignCompontent/svg1.js new file mode 100644 index 0000000..df4bccf --- /dev/null +++ b/src/components/Common/BoxDesignCompontent/svg1.js @@ -0,0 +1,1008 @@ +/* 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, + createRoundedCornersWeltTop, + createRightAngleBoxBottomComponent, + createBoxBottomComponent1, + createBoxBottomComponent2, + createBoxBottomComponent3, + createBoxBottomComponent4, + createBoxBottomComponent5, + createBoxBottomComponent6, + createBoxComponentNew, + createBoxComponentNew1, + createBoxComponentNew2, + createBoxComponentNew3, + createBoxComponentNew4, + createBoxComponentNew5, + createBoxComponentNew4_1, + createWelt, + createWelt1, + createWelt2, + createWelt2Right, + createWelt3, + createWelt3Right, + createText, + createDoubleArrow, + createHorizontalDoubleArrow, + createFullTelescope, +} 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 } = props; + const [width, setWidth] = useState(0); + const [height, setHeight] = useState(0); + const [deep, setDeep] = useState(0); + const [svgType, setSvgType] = useState(1); + // 盒身 + useEffect( + () => { + setTimeout(() => { + initSVG(); + }, 0); + }, + [boxList, svgType] + ); + + // 初始化svg + const initSVG = () => { + setBoxKey(new Date().getTime()); + const svg = svgRef.current; + svg.innerHTML = ""; + + // 获取盒型类型 + const svgTypes = boxList.find(x => x.sName === "盒身")?.type || 1; + setSvgType(svgTypes); + + // 获取盒长、盒宽、盒高 + const boxLength = Number(boxList.find(x => x.sName === "盒长")?.value) || 0; + const boxWidth = Number(boxList.find(x => x.sName === "盒宽")?.value) || 0; + const boxHeight = Number(boxList.find(x => x.sName === "盒高")?.value) || 0; + + setWidth(boxLength); + setHeight(boxWidth); + setDeep(boxHeight); + + // 计算视口宽度和高度 + 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); + const bottom = bottomOffect(boxList, boxLength, boxWidth, boxHeight); + max = top + bottom; + } + + let viewBoxHeight = Number(boxHeight) + max; + if (Number(svgType) === 1) { + // 四面盒身 + viewBoxWidth = dZTBW + Number(boxLength) * 2 + Number(boxWidth) * 2; + } else if (Number(svgType) === 2) { + viewBoxWidth = boxLength * 2 + boxWidth + dYTBW + dZTBW; + } else if (Number(svgType) === 3) { + viewBoxWidth = boxLength + boxWidth * 2 + dYTBW + dZTBW; + } else { + viewBoxWidth = boxLength + boxHeight + dYTBW + dZTBW; + viewBoxHeight = Number(boxWidth) + Number(boxHeight) * 2 + max; + } + // 计算缩放比例 + let scale = 1; + const ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight) * scale; + svg.setAttribute("viewBox", `${-(zbtb?.value * scale)} ${-ySvg} ${viewBoxWidth} ${viewBoxHeight}`); + 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"; + 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 => { + svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); + }); + + let pathList = []; + // 上方盒舌 + 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 (sfhs?.type === "1004") { + // pathList.push(createFoldWeltTopLine(scaledHeight * 0.5, -dSFHS * scale * 0.5, scaledWidth, 0)); + // pathList.push(createFoldWeltTopLine(-scaledHeight * 0.5, -dSFHS * scale * 0.5, scaledWidth * 2 + scaledHeight * 2, 0)); + // } + // if (sfhs?.type === "1005") { + // pathList.push(createFoldWeltTopLine(scaledHeight * 0.85, -dSFHS * scale * 0.9, scaledWidth, 0)); + // pathList.push(createFoldWeltTopLine(-scaledHeight * 0.85, -dSFHS * scale * 0.9, scaledWidth * 2 + scaledHeight * 2, 0)); + // } + // 盒底组件 + 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 { + // 下方盒舌 + + 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)); + } + } + + // 左边贴边 + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); + if (zbtb?.type && dZTBW) { + pathList.push(createText(-dZTBW * 0.4, scaledDeep / 2, 10 * scales, dZTBW)); + } + // 右边贴边 + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight * 2, 0)); + if (ybtb?.type && dYTBW) { + pathList.push(createText(scaledWidth * 2 + scaledHeight * 2 + dYTBW * 0.4, scaledDeep / 2, 10 * scales, dYTBW)); + } + // 左上部件 + pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0)); + if ((zsbj?.type === "3001" && zsbj?.value )|| (zsbj?.type === "3006" && zsbj?.value)) { + 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")); + } + // 右上部件 + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0)); + if (ysbj?.type === "6001" && 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 + 4, 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")); + } + // 左下部件- + if (!(hdzj && hdzj.type)) { + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep)); + if (zxbj?.type === "4001" && 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")); + } + pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW * scale, scaledWidth + scaledHeight, scaledDeep)); + if (yxbj?.type === "7001" && 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 * 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 => { + svg.appendChild(x); + }); + } 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 => { + svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); + }); + let pathList = []; + // 上方盒舌 + 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)); + } + // 下方盒舌 + 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)); + } + // 左边贴边 + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); + if (zbtb?.type && dZTBW) { + pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW)); + } + // 右边贴边 + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight, 0)); + if (zbtb?.type && dYTBW) { + pathList.push(createText(scaledWidth * 2 + scaledHeight + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW)); + } + // 左上部件 + pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0)); + if ((zsbj?.type === "3001" && zsbj?.value )|| (zsbj?.type === "3006" && zsbj?.value)) { + 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)); + } + // 右上部件 + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0)); + if (ysbj?.type === "6001" && 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 + 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")); + 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)); + } + // 左下部件- + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep)); + if (zxbj?.type === "4001" && 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 === "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)); + } + // 右下部件 + pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW, scaledWidth + scaledHeight, scaledDeep)); + if (yxbj?.type === "7001" && 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 => { + svg.appendChild(x); + }); + } 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 => { + svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); + }); + let pathList = []; + // 上方盒舌 + 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)); + } + // 下方盒舌 + 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)); + } + // 左边贴边 + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); + if (zbtb?.type && dZTBW) { + pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW)); + } + // 右边贴边 + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth + scaledHeight * 2, 0)); + if (zbtb?.type && dYTBW) { + pathList.push(createText(scaledWidth + scaledHeight * 2 + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW)); + } + // 左下部件- + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, scaledHeight, scaledDeep)); + if (zxbj?.type === "4001" && 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)); + } + // 右上部件 + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledHeight, 0)); + if (ysbj?.type === "6001" && 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 + 4, 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 => { + svg.appendChild(x); + }); + } else { + svg.appendChild(createFullTelescope(scaledWidth, scaledHeight, scaledDeep, 0, 0)); + // createFullTelescope + let pathList = []; + 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")); + + // 横向 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 => { + svg.appendChild(x); + }); + } + }; + // 计算头部偏移 + const topOffect = (list, length, width, height) => { + // 判断code + const valueList = list.filter(x => x.type !== ("" || null)); + // const titleList = ['上方盒舌','左(上)插位组件','右(上)插位组件'] + const sfhs = valueList.find(x => x.sName === "上方盒舌"); + const zscw = valueList.find(x => x.sName === "左(上)插位组件"); + const yscw = valueList.find(x => x.sName === "右(上)插位组件"); + let top = 0; + const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006"]; + const four = ["6004", "3004", "4004", "7004"]; + const five = ["6005", "3005", "4005", "7005"]; + const dYSCW = Number(yscw?.value) || 0; + const dZSCW = Number(zscw?.value) || 0; + // 如果存在插位就不计算盒舌 + if (zscw?.type && yscw?.type) { + const max = Math.max(dZSCW, dYSCW); + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + top = width * 2; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + top = width * 2 + max; + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { + top = width + max; + } else { + top = max; + } + } else if (yscw?.type) { + const max = dYSCW; + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + top = width * 2; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + top = width * 2 + max; + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { + top = width + max; + } else { + top = max; + } + } else if (zscw?.type) { + const max = dZSCW; + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + top = width * 2; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + top = width * 2 + max; + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { + top = width + max; + } else { + top = max; + } + } else { + top = sfhs?.value; + } + return isNaN(top) ? 0 : top; + }; + const bottomOffect = (list, length, width, height) => { + // 判断code + const valueList = list.filter(x => x.type !== ("" || null)); + // const titleList = ['上方盒舌','左(上)插位组件','右(上)插位组件'] + const sfhs = valueList.find(x => x.sName === "下方盒舌"); + const zscw = valueList.find(x => x.sName === "左(下)插位组件"); + const yscw = valueList.find(x => x.sName === "右(下)插位组件"); + const hdzj = valueList.find(x => x.sName === "盒底组件"); + // 将找到的对象放入数组中，并过滤掉 undefined 值 + // 使用 reduce 方法比较 value 属性，找出最大的对象 + let top = 0; + const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006"]; + const four = ["6004", "3004", "4004", "7004"]; + const five = ["6005", "3005", "4005", "7005"]; + const dYSCW = Number(yscw?.value) || 0; + const dZSCW = Number(zscw?.value) || 0; + if (hdzj?.type) { + return Number(hdzj?.value); + } + if (zscw?.type && yscw?.type) { + const max = Math.max(dZSCW, dYSCW); + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + top = width * 2; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + top = width * 2 + max; + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { + top = width + max; + } else { + top = max; + } + } else if (yscw?.type) { + const max = dYSCW; + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + top = width * 2; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + top = width * 2 + max; + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { + top = width + max; + } else { + top = max; + } + } else if (zscw?.type) { + const max = dZSCW; + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + top = width * 2; + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + top = width * 2 + max; + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { + top = width + max; + } else { + top = max; + } + } else { + top = sfhs?.value; + } + // if (five.includes(zscw?.type) || five.includes(yscw?.type)) { + // top = width * 2; + // } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { + // if (dZSCW && dYSCW) { + // const max = Math.max(dZSCW, dYSCW); + // top = width * 2 + max; + // } else if (dZSCW && !dYSCW) { + // top = width * 2 + dZSCW; + // } else if (!dZSCW && dYSCW) { + // top = width * 2 + dYSCW; + // } + // } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { + // if (dZSCW && dYSCW) { + // const max = Math.max(dZSCW, dYSCW); + // top = width + max; + // } else if (dZSCW && !dYSCW) { + // top = width + dZSCW; + // } else if (!dZSCW && dYSCW) { + // top = width + dYSCW; + // } + // } else { + // if (dZSCW && !dYSCW) { + // top = Number(dZSCW); + // } else if (!dZSCW && dYSCW) { + // top = Number(dYSCW); + // } else { + // top = Number(sfhs?.value); + // } + // } + + return isNaN(top) ? 0 : top; + }; + // 上方盒舌左边 + 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) => { + 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; + default: + data = createNoneProject(); + break; + } + return data; + }; + // 右边贴位 + const createTrapezoidRight = (trapezoidLeftType, height, size, offsetX, offsetY) => { + 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; + default: + data = createNoneProject(); + break; + } + return data; + }; + // 左上部件 + const createDynamicTopLeft = (trapezoidLeftType, width, height, size, offsetX, offsetY) => { + if (!size) return createNoneProject(); + let data = {}; + switch (trapezoidLeftType) { + case "3001": + data = createBoxComponentNew(width, height, size, offsetX, offsetY); + break; + case "3002": + data = createBoxComponentNew1(width, height, size, offsetX, offsetY); + break; + case "3003": + data = createBoxComponentNew2(width, height, size, offsetX, offsetY); + break; + case "3004": + data = createBoxComponentNew3(width, height, size, offsetX, offsetY); + break; + case "3005": + data = createBoxComponentNew4(width, height, size, offsetX, offsetY); + break; + case "3006": + data = createBoxComponentNew5(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 "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 "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; + 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 = {}; + switch (trapezoidLeftType) { + case "5001": + data = createRightAngleBoxBottomComponent(width, deep, size, offsetX, offsetY); + break; + case "5002": + data = createBoxBottomComponent1(width, deep, size, offsetX, offsetY); + break; + case "5003": + data = createBoxBottomComponent2(width, deep, size, offsetX, offsetY); + break; + case "5004": + data = createBoxBottomComponent3(width, deep, size, offsetX, offsetY); + break; + case "5005": + data = createBoxBottomComponent4(width, deep, size, offsetX, offsetY); + break; + case "5006": + data = createBoxBottomComponent5(width, deep, size, offsetX, offsetY); + break; + case "5007": + data = createBoxBottomComponent6(width, deep, size, offsetX, offsetY); + break; + default: + data = createNoneProject(); + break; + } + return data; + }; + return ( +
+ +
+ ); +}; + +export default SvgBox; diff --git a/src/components/Common/CommonBase.js b/src/components/Common/CommonBase.js index e34052f..9826031 100644 --- a/src/components/Common/CommonBase.js +++ b/src/components/Common/CommonBase.js @@ -44,7 +44,6 @@ export default (ChildComponent) => { window.addEventListener('beforeunload', this.beforeunload); window.addEventListener('unload', this.unload); window.addEventListener('keydown', this.handleF9KeyPress); - console.log('sSrcModelsId', this.state.sSrcModelsId); } async componentWillMount() { @@ -662,7 +661,6 @@ export default (ChildComponent) => { let sCopyToConfigMaster = {}; if(commonUtils.isNotEmptyArr(sCopyToConfigField) && commonUtils.isNotEmptyArr(tableConfig)) { sCopyToConfigMaster = tableConfig.gdsconfigformslave.filter(item => item.sControlName === sCopyToConfigField); - console.log(sCopyToConfigMaster, sCopyToConfigMaster); if(commonUtils.isNotEmptyArr(sCopyToConfigMaster)) { const sCopyToConfigMasterAssignField= sCopyToConfigMaster[0].sAssignField; const newCopyTo = {}; @@ -2915,7 +2913,6 @@ export default (ChildComponent) => { if (commonUtils.isNotEmptyObject(sRulesJson) && commonUtils.isJSON(sRulesJson)) { const sRulesObjArr = JSON.parse(sRulesJson); if (Array.isArray(sRulesObjArr) && commonUtils.isNotEmptyArr(sRulesObjArr)) { - console.log('sRulesObjArr:', sRulesObjArr); sRulesObjArr.forEach((sRulesObj) => { const { showColumn, hideColumn, condition, tbName, sConfigName, @@ -3118,7 +3115,6 @@ export default (ChildComponent) => { } const url = `${commonConfig.server_host}procedureCall/doGenericProcedureCall?sModelsId=${sModelsId}`; const dataReturn = (await commonServices.postValueService(app.token, value, url)).data; - console.log('dataReturn', dataReturn); if (dataReturn.code === 1) { if (commonUtils.isNotEmptyArr(slaveDataOld)) { slaveDataOld.forEach((item) => { @@ -3269,7 +3265,6 @@ export default (ChildComponent) => { if (commonUtils.isNotEmptyArr(allReturnMap.masterData) && Array.isArray(allReturnMap.masterData)) { allReturnMap.masterData = allReturnMap.masterData[0]; } - console.log('allReturnMap:', allReturnMap); this.setState({ ...allReturnMap }); } } else { diff --git a/src/components/Common/CommonComponent/index.js b/src/components/Common/CommonComponent/index.js index b894ba3..7d02053 100644 --- a/src/components/Common/CommonComponent/index.js +++ b/src/components/Common/CommonComponent/index.js @@ -37,6 +37,7 @@ import Areas from '@/assets/areas.json'; import commonConfig from '@/utils/config'; import { VirtualKeyboard } from '@/oee/common/oeeKeyBoard';// 虚拟软键盘 import 'braft-editor/dist/output.css'; +import SvgBox from '../BoxDesignCompontent/svg'; const FormItem = Form.Item; const { Option } = Select; @@ -230,16 +231,6 @@ export default class CommonComponent extends Component { JSON.stringify(nextProps.showConfig) !== JSON.stringify(showConfig)); } - componentDidUpdate() { - const { dataValue, searchValue } = this.state; - if (dataValue === '' && searchValue) { - // eslint-disable-next-line - this.setState({ - searchValue: '', - }); - } - } - componentWillUnmount() { this.mounted = false; document.removeEventListener('mousedown', this.handleSelectClick); @@ -436,6 +427,8 @@ export default class CommonComponent extends Component { this.props.onFieldDoubleClick(this.props.record, this.state.dataValue, this.props.showConfig, this.props.name); } else if (commonUtils.isNotEmptyObject(sMemo) && sMemo.indexOf('sAssignField') > -1) { /* 赋值字段 变量设置双击弹出 */ this.props.onFieldDoubleClick(this.state.dataValue, this.props.showConfig, this.props.name); + } else if (commonUtils.isNotEmptyObject(sMemo) && sMemo.indexOf('sInstruct') > -1) { /* 赋值字段 变量设置双击弹出 */ + this.props.onFieldDoubleClick(this.state.dataValue, this.props.showConfig, this.props.name); } } @@ -1091,7 +1084,6 @@ export default class CommonComponent extends Component { }, }; }; - /** 获取innerinput控件1 */ getInnerInput = (innerInputProps) => { const { @@ -1103,6 +1095,124 @@ export default class CommonComponent extends Component { if (sName === 'sIcon') { return (<>{this.getUploadContents()}); } + if (sName === 'sPackPath') { + const uploadProps = { + listType: 'picture-card', + className: 'avatar-uploader', + action: `${commonConfig.server_host}file/uploadLogo?sLogoName=logo${sName}${this.props.record.sName}`, + disabled: !this.props.enabled, + onChange: (info) => { + const { fileList } = info; + const file = fileList[fileList.length - 1]; + const { status, response } = file; + if (status === 'done') { + if (response && response.code === 1) { + const imageUrlNew = `${commonConfig.server_host}file/downloadLogo?sLogoName=logo${sName}${this.props.record.sName}&date=${new Date().getTime()}`; + if (sName === 'sPackPath') { + // this.setState({ sPackPath: imageUrlNew }); + this.props.onChange(this.props.name, sName, { sPackPath: imageUrlNew }, this.props.sId, []); + } else { + // this.setState({ sPackDetailPath: imageUrlNew }); + this.props.onChange(this.props.name, sName, { sPackDetailPath: imageUrlNew }, this.props.sId, []); + } + } else if (response && response.code === -1) { + message.error(response.msg); + } + } + }, + accept: 'image/*', + showUploadList: false, + openFileDialogOnClick: this.props.enabled, + }; + const imageUrl = sName === 'sPackPath' ? this.props.record.sPackPath : this.props.record.sPackDetailPath; + return ( +
+ + {imageUrl ? ( + avatar + ) : ( +
+
+ 上传 +
+
+ )} + +
+ ); + } + if (sName === 'sPackDetailPath') { + const boxList = []; + const tables = [ + { name: '盒型类别', value: this.props.record.sBoxType, type: null }, + { name: '盒身', value: this.props.record.sBoxBody, type: this.props.record.sTypes }, + { name: '盒长', value: this.props.record.dBoxLength, type: null }, + { name: '盒宽', value: this.props.record.dBoxWidth, type: null }, + { name: '盒高', value: this.props.record.dBoxHeight, type: null }, + ]; + const { slaveData = [] } = this.props; + const titleList1 = [ + { name: '上方盒舌', value: 'dSFHS' }, + { name: '盒底组件', value: 'dHDC' }, + { name: '下方盒舌', value: 'dXFHS' }, + { name: '左(上)插位组件', value: 'dZSCW' }, + { name: '左贴边位', value: 'dZTBW' }, + { name: '左(下)插位组件', value: 'dZXCW' }, + { name: '右(上)插位组件', value: 'dYSCW' }, + { name: '右贴边位', value: 'dYTBW' }, + { name: '右(下)插位组件', value: 'dYXCW' }, + ]; + slaveData.forEach((x) => { + boxList.push({ + value: x.iValue, + sName: titleList1.find(item => item.value === x.sCode)?.name || '', + isEditable: true, + isSelect: false, + selectValue: null, + selectLabel: '', + selectImage: null, + type: x.sTypes || null, + show: true, + showName: x.sName, // 参数名称 + }); + }); + tables.forEach((x) => { + boxList.push({ + value: x.value, + sName: x.name, + isEditable: true, + isSelect: false, + selectValue: null, + selectLabel: '', + selectImage: null, + type: x.type || null, + show: true, + showName: x.name, // 参数名称 + }); + }); + const svgProps = { + ...this.props, + boxList, + dSvgBoxWidth: 100, + dSvgBoxHeight: 100, + showNew: 1, + }; + return ( +
+ +
+ ); + } if (this.props.showConfig.sName && this.props.showConfig.sName.toLowerCase().includes('fullmemo')) { const row = commonUtils.isNotEmptyNumber(this.props.showConfig.iRowValue) ? this.props.showConfig.iRowValue : 1; const minHeight = (row * 20) + 6 + 4 + 2; @@ -1149,7 +1259,6 @@ export default class CommonComponent extends Component { return ; } }; - // 获取innerinput控件后面的按钮 getInnerButton = () => { const props = { @@ -1560,12 +1669,16 @@ export default class CommonComponent extends Component { obj.onDoubleClick = this.onDoubleClick; } else { /* 普通文本输入框 */ obj = this.getTextInnerInputPropsMaster(); + if (this.props?.showConfig?.sName === 'sInstruct') { + obj.onDoubleClick = this.onDoubleClick; + } } } else if (this.firstDataIndex === 'c') { /* 地址联动框(联动下拉类型c) */ obj = this.getAddressInnerInputPropsMaster(); } obj.onKeyDown = this.onKeyDown; obj.onKeyUp = this.onKeyUp; + obj.onBlur = this.onBlur; if (this.props.allowClear) { obj.allowClear = this.props.allowClear; /* 带移除图标 */ } @@ -2026,7 +2139,9 @@ export default class CommonComponent extends Component { return triggerNode; } } - + handleCancel = () => { + this.state.previewOpen = false; + } handleSelectClick = () => { if (this.bInputIn) { this.setState({ bDropDownOpen: true }); @@ -2165,7 +2280,7 @@ export default class CommonComponent extends Component { /* 下拉新增单独处理 */ const dEmptyValue = this.props.showConfig.sName === 'dMachineLength' || this.props.showConfig.sName === 'dMachineWidth' ? newValue : null; /* 设置数值型为空值时 数据置为0 或空值 */ let value = this.firstDataIndex === 's' && !this.props.textArea && commonUtils.isEmpty(newValue) ? newValue.replace('--', '') : - this.firstDataIndex === 't' ? dateString : (this.firstDataIndex === 'd' || this.firstDataIndex === 'i') && commonUtils.isEmpty(newValue) ? dEmptyValue : newValue; + ['t', 'm'].includes(this.firstDataIndex) ? dateString : (this.firstDataIndex === 'd' || this.firstDataIndex === 'i') && commonUtils.isEmpty(newValue) ? dEmptyValue : newValue; value = this.props.showConfig.bMultipleChoice ? value.toString() : value; // if (value === 0) { // setTimeout(() => { @@ -2190,9 +2305,16 @@ export default class CommonComponent extends Component { } /* 回带值声明 */ const returnValue = {}; - const { searchValue, searchDropDownData, dropDownData } = this.state; - const dropDownDataNew = commonUtils.isEmptyArr(searchValue) ? dropDownData : searchDropDownData; - + const { + searchValue, searchDropDownData, dropDownData, selectTableData, + } = this.state; + let dropDownDataNew = []; + /* 如果是表格下拉的话 */ + if (commonUtils.isNotEmptyStr(this.props.showConfig?.sTableTitleSql) && this.props.showConfig?.iVisCount > 1) { + dropDownDataNew = commonUtils.isEmptyArr(selectTableData) ? dropDownData : selectTableData; + } else { + dropDownDataNew = commonUtils.isEmptyArr(searchValue) ? dropDownData : searchDropDownData; + } const getTValue = (value) => { const { sDateFormat = 'YYYY-MM-DD' } = this.props.showConfig; @@ -2343,6 +2465,9 @@ export default class CommonComponent extends Component { if (dMachine) { if (!/^\d+(\.\d+)?(\*\d+(\.\d+)?)?$/.test(newValue)) { newValue = ''; + setTimeout(() => { + this.setState({ searchValue: '' }); + }, 1200); } } const dEmptyValue = this.props.showConfig.sName === 'dMachineLength' || this.props.showConfig.sName === 'dMachineWidth' ? newValue : 0; /* 设置数值型为空值时 数据置为0 或空值 */ @@ -2456,16 +2581,15 @@ export default class CommonComponent extends Component { if (!this.completeFlag) { const addState = {}; addState[this.props.showConfig.sName] = undefined; + this.props.onChange(this.props.name, this.props.showConfig.sName, { ...returnValue, ...addState }, this.props.sId, dropDownDataNew); setTimeout(() => { - this.props.onChange(this.props.name, this.props.showConfig.sName, { ...returnValue, ...addState }, this.props.sId, dropDownDataNew); - }, 0); + this.props.onChange(this.props.name, this.props.showConfig.sName, returnValue, this.props.sId, dropDownDataNew); + }, 200); } this.completeFlag = false; + } else { + this.props.onChange(this.props.name, this.props.showConfig.sName, returnValue, this.props.sId, dropDownDataNew); } - // setTimeout(() => { - // this.props.onChange(this.props.name, this.props.showConfig.sName, returnValue, this.props.sId, dropDownDataNew); - // }, 50); - this.props.onChange(this.props.name, this.props.showConfig.sName, returnValue, this.props.sId, dropDownDataNew); clearTimeout(this.onChangeTimer); this.onChangeTimer = setTimeout(() => { diff --git a/src/components/Common/CommonNewBill.js b/src/components/Common/CommonNewBill.js index 02a0bf3..92e00fc 100644 --- a/src/components/Common/CommonNewBill.js +++ b/src/components/Common/CommonNewBill.js @@ -2517,7 +2517,7 @@ const BillComponent = Form.create({
- + { commonUtils.isNotEmptyArr(diliverConfigTypeArr1) ? diliverConfigTypeArr1.map((item) => { diff --git a/src/components/Common/CommonTable/index.css b/src/components/Common/CommonTable/index.css new file mode 100644 index 0000000..ac239a5 --- /dev/null +++ b/src/components/Common/CommonTable/index.css @@ -0,0 +1,124 @@ +.subForm { + margin-bottom: 10px; + position: relative; +} +.subForm .extraAction { + position: absolute; + top: -30px; + right: 0; +} +.subForm .extraAction .del { + background: #fd674a; + border: 1px solid #fd674a; +} +.subForm .extraAction .del:hover { + color: #fff; + border: 1px solid #fb795f !important; + background: #fb795f !important; +} +.subForm .summaryCell { + color: red; + font-weight: bold; + white-space: nowrap; + /* 合计不换行 */ + overflow: hidden; + /*超出部分隐藏*/ + text-overflow: ellipsis; + /*超出部分文字以...显示*/ + display: block; +} +.subForm .summaryCellTotal { + color: black; + font-weight: bold; +} +.disabledProup .iconAdd i:hover:before { + color: rgba(0, 0, 0, 0.43); +} +.disabledProup .editSelect > div:hover { + border-color: transparent !important; + background: transparent !important; +} +.disabledProup .editSelect > div:hover span { + color: rgba(0, 0, 0, 0.25); +} +.disabledProup .editSelect > div > div > div { + color: #000 !important; +} +.disabledProup .inputNum input:hover { + border: 2px solid transparent !important; + background: transparent !important; +} +.disabledProup input[disabled]:hover { + background: none !important; +} +.disabledProup .tableDataPicker input:hover { + border: 1px solid #e6d8d8 !important; +} +.disabledProup :global .ant-table-scroll > div:last-child, +.proup :global .ant-table-scroll > div:last-child { + position: relative; +} +:global .react-resizable { + position: relative; + background-clip: padding-box; +} +:global .react-resizable-handle { + position: absolute; + width: 10px; + height: 100%; + bottom: 0; + right: -5px; + cursor: col-resize; + z-index: 1; +} +:global th[bnotresize] .react-resizable-handle { + cursor: default; +} +:global .tableNoPadding .ant-table-row td { + padding: 0 !important; +} +:global .vlist-td-display { + display: none; +} +:global .virtuallist > table > tbody > tr:nth-of-type(2) .vlist-td-display { + display: table-cell; +} +.tdCell .fastSearchBtn { + position: absolute; + top: 0; + right: 0; + background-color: #fff7e6; + display: none; +} +.tdCell .fastSearchBtn:hover { + color: #2f54eb; + zoom: 1.1; +} +.tdCell:hover .fastSearchBtn { + display: block; +} +.colorInfo { + display: flex; + flex-wrap: wrap; + font-size: 10px; +} +.moveLine { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 2px; + border: 2px dashed #448ef7; + z-index: 2; + cursor: ns-resize; + opacity: 0; +} +.moveLine:hover { + opacity: 1; +} +.moveLine:active { + border-color: #72c240; +} +:global .xlyCommonTable .ant-table-cell .changeClassName .ant-form-item { + margin-bottom: 0px !important; +} diff --git a/src/components/Common/CommonTable/index.less b/src/components/Common/CommonTable/index.less index 1513909..1e38d84 100644 --- a/src/components/Common/CommonTable/index.less +++ b/src/components/Common/CommonTable/index.less @@ -10,20 +10,20 @@ border: 1px solid #fd674a; &:hover { color: #fff; - border: 1px solid #fb795f!important; - background: #fb795f!important; + border: 1px solid #fb795f !important; + background: #fb795f !important; } } } - .summaryCell{ + .summaryCell { color: red; font-weight: bold; - white-space:nowrap; /* 合计不换行 */ - overflow: hidden;/*超出部分隐藏*/ - text-overflow:ellipsis;/*超出部分文字以...显示*/ + white-space: nowrap; /* 合计不换行 */ + overflow: hidden; /*超出部分隐藏*/ + text-overflow: ellipsis; /*超出部分文字以...显示*/ display: block; } - .summaryCellTotal{ + .summaryCellTotal { color: black; font-weight: bold; } @@ -33,34 +33,35 @@ color: rgba(0, 0, 0, 0.43); } .editSelect > div:hover { - border-color: transparent!important; - background: transparent!important; + border-color: transparent !important; + background: transparent !important; } .editSelect > div:hover span { color: rgba(0, 0, 0, 0.25); } .editSelect > div > div > div { - color: #000!important; + color: #000 !important; } .inputNum input:hover { - border: 2px solid transparent!important; - background: transparent!important; + border: 2px solid transparent !important; + background: transparent !important; } input[disabled]:hover { - background: none!important; + background: none !important; } .tableDataPicker input:hover { - border: 1px solid #e6d8d8!important; + border: 1px solid #e6d8d8 !important; } } -.disabledProup, .proup { +.disabledProup, +.proup { :global { .ant-table-scroll > div:last-child { position: relative; } - } } + :global { .react-resizable { position: relative; @@ -75,12 +76,12 @@ cursor: col-resize; z-index: 1; } - th[bnotresize] .react-resizable-handle{ + th[bnotresize] .react-resizable-handle { cursor: default; } .tableNoPadding { .ant-table-row { - td{ + td { padding: 0 !important; } } @@ -88,7 +89,7 @@ .vlist-td-display { display: none; } - .virtuallist>table>tbody>tr:nth-of-type(2) { + .virtuallist > table > tbody > tr:nth-of-type(2) { .vlist-td-display { display: table-cell; } @@ -107,17 +108,17 @@ zoom: 1.1; } } - &:hover { + &:hover { .fastSearchBtn { display: block; } - } + } } .colorInfo { - display: flex; - flex-wrap: wrap; - font-size: 10px; + display: flex; + flex-wrap: wrap; + font-size: 10px; } .moveLine { @@ -138,4 +139,14 @@ &:active { border-color: #72c240; } -} \ No newline at end of file +} + +:global .xlyCommonTable { + .ant-table-cell { + .changeClassName { + .ant-form-item { + margin-bottom: 0px !important; + } + } + } +} diff --git a/src/components/Common/PersonCenter/PersonCenter.js b/src/components/Common/PersonCenter/PersonCenter.js index 680464d..7d87071 100644 --- a/src/components/Common/PersonCenter/PersonCenter.js +++ b/src/components/Common/PersonCenter/PersonCenter.js @@ -31,7 +31,7 @@ import OnlineUser from '@/assets/onlineUser.svg'; import * as commonServices from '@/services/services'; import commonConfig from '../../../utils/config'; // import SkinChangeModal from './SkinChangeModal'; -// import MenuSearchPopovor from './MenuSearchPopovor'; +import MenuSearchPopovor from './MenuSearchPopovor'; const { TabPane } = Tabs; const FormItem = Form.Item; @@ -396,16 +396,16 @@ class PersonCenter extends Component { - // } + content={ + + } placement="left" overlayClassName="sysSearchContent" open={menuSearchPopoverVisible} diff --git a/src/components/Common/SearchComponent/index.js b/src/components/Common/SearchComponent/index.js index 8f0167a..02771ca 100644 --- a/src/components/Common/SearchComponent/index.js +++ b/src/components/Common/SearchComponent/index.js @@ -800,7 +800,7 @@ export default class SearchComponent extends Component { return (
- +
diff --git a/src/components/Common/SearchComponent/index.less b/src/components/Common/SearchComponent/index.less index 24577a5..742b0c4 100644 --- a/src/components/Common/SearchComponent/index.less +++ b/src/components/Common/SearchComponent/index.less @@ -3,7 +3,7 @@ position: relative; background: #fff; margin: 0 10px; - padding: 8px 8px 3px 8px; + padding: 10px 8px 3px 8px; z-index: 20; .clear_both(); .solutionList{ diff --git a/src/components/Common/ToolBar/ToolBarNew.js b/src/components/Common/ToolBar/ToolBarNew.js index 391ae79..aac011e 100644 --- a/src/components/Common/ToolBar/ToolBarNew.js +++ b/src/components/Common/ToolBar/ToolBarNew.js @@ -1278,6 +1278,8 @@ class ToolBarComponent extends Component { } const iIndex = menuData.findIndex(item => item.sName === key || item.sControlName === key); const { sInstruct: sInstructStr, sChangeType } = (iIndex > -1) ? menuData[iIndex] : {}; + console.log( menuData[iIndex]); + const sInstruct = commonUtils.convertStrToObj(sInstructStr, {}); // const { data = [] } = sInstruct; // console.log('btnConfig', iIndex, sInstruct, data); @@ -1850,6 +1852,7 @@ class ToolBarComponent extends Component { } else if (key.indexOf('BtnCopyTo') > -1) { /* 复制到 */ // && commonUtils.isNotEmptyStr(e.item.props.sActiveId) // if (this.handleFreeDeliver(key)) return; + this.props.onCopyTo(e.key, e.item.props['data-sactiveid']); } else if (key.indexOf('BtnCopyFrom') > -1 && commonUtils.isNotEmptyStr(e.item.props['data-sactiveid'])) { /* 复制从 */ obj = { @@ -2208,8 +2211,10 @@ class ToolBarComponent extends Component { } }); } else if (this.props.onButtonClick !== undefined) { + this.props.onButtonClick(key); } + }; // 删除当前pane @@ -2379,7 +2384,6 @@ class ToolBarComponent extends Component { if(location.pathname.includes('commonList')) { name = 'slave'; } - console.log('name', name); const { [`${name}Config`]: tableConfig } = this.props; if(commonUtils.isNotEmptyArr(tableConfig)) { const myTableConfig = JSON.parse(JSON.stringify(tableConfig)); @@ -2850,7 +2854,6 @@ class ToolBarComponent extends Component { this.props.onSaveState({ sCurrMemoProps }); } const sButtonParam = btnConfig.sButtonParam; - console.log('11', btnConfig); const btn = commonUtils.convertStrToObj(sButtonParam); const sProName = btn.sproName; const inParams = []; @@ -2984,7 +2987,6 @@ class ToolBarComponent extends Component { item.bFilter = slaveFilterCondition; }); } - console.log('inParams', inParams); } const iIndex = commonUtils.isNotEmptyObject(btnConfig) ? menuData.findIndex(item => item.sControlName === btnConfig.sControlName) : -1; @@ -3048,7 +3050,6 @@ class ToolBarComponent extends Component { } if(commonUtils.isNotEmptyArr(afterInterfaceArr)) { /* 之后调用 */ const result = await this.handleProcedureCall(btnConfig, sProName, JSON.stringify({ params: inParams, changeValue: sValue, sButtonParam: btn })); - console.log('result', result); if(result > 0) { /* 只有成功 才能调用接口 -5代表失败 */ const asyncFunc = async () => { for (let i = 0; i < afterInterfaceArr.length; i++) { diff --git a/src/components/CommonChar/CommonChar.js b/src/components/CommonChar/CommonChar.js new file mode 100644 index 0000000..2c8716c --- /dev/null +++ b/src/components/CommonChar/CommonChar.js @@ -0,0 +1,164 @@ +/* eslint-disable object-curly-newline */ +import React, { Component } from 'react'; +import { Card, Row, Col, Radio } from 'antd-v4'; +import baseChar from '@/components/Common/baseChar'; /* 获取图表配置及数据 */ +// import { Bar, Columnar, ColumnarGroup, BrokenLine, WaterWave, Gauge, ColumnarStack, PieGroup, Pie, TimeLineGroup, ColorBlock } from '../Charts'; +import Bar from '@/components/Charts/Bar'; +import Columnar from '@/components/Charts/Columnar'; +import ColumnarGroup from '@/components/Charts/ColumnarGroup'; +import BrokenLine from '@/components/Charts/BrokenLine'; +import WaterWave from '@/components/Charts/WaterWave'; +import Gauge from '@/components/Charts/Gauge'; +import ColumnarStack from '@/components/Charts/ColumnarStack'; +import PieGroup from '@/components/Charts/PieGroup'; +import Pie from '@/components/Charts/Pie'; +import TimeLineGroup from '@/components/Charts/TimeLineGroup'; +import ColorBlock from '@/components/Charts/ColorBlock'; +import styles from '@/components/Charts/index.less'; +import * as utils from '@/utils/utils'; +import CommonList from '@/components/Common/CommonList'; + +class CommonChar extends Component { + constructor(props) { + super(props); + this.state = { + sModelsId: props.sModelsId, + charConfigAndData: [], + commonChar: styles.commonChar, + commonCharPage: styles.commonCharPage, + childChar: styles.childChar, + }; + } + + componentWillReceiveProps(nextProps) { + const { charConfigAndData } = nextProps; + this.setState({ charConfigAndData: JSON.parse(JSON.stringify(charConfigAndData)) }); + } + + shouldComponentUpdate(nextProps, nextState) { + return JSON.stringify(nextState.charConfigAndData) !== JSON.stringify(this.state.charConfigAndData); + } + + handleChar = (props) => { + const { sCharType, child } = props; + let content = ''; + if (utils.isNotEmptyObject(child)) { + child.height = props.iHeight; + if (sCharType === 'sBar') { + /* 横向条形图 */ + content = ; + } else if (sCharType === 'sColumnar') { + /* 纵向条形图 */ + content = ; + } else if (sCharType === 'sColumnarGroup') { + /* 纵向条形图 */ + content = ; + } else if (sCharType === 'sBrokenLine') { + content = ; + } else if (sCharType === 'sWaterWave') { + content = ; + } else if (sCharType === 'sGauge') { + content = ; + } else if (sCharType === 'sColumnarStack') { + content = ; + } else if (sCharType === 'sPieGroup') { + content = ; + } else if (sCharType === 'sPie') { + content = ; + } else if (sCharType === 'TimeLineGroup') { + content = ; + } else if (sCharType === 'commonList') { + content = ; + } else if (sCharType === 'ColorBlock') { + content = ; + } + } + return content; + }; + + handleExtra = (menuTypeId) => { + const { charMenu } = this.state; + let content = ''; + if (charMenu !== undefined && charMenu !== null) { + const index = charMenu.findIndex(item => item.sId === menuTypeId); + if (index > -1) { + const { childConfig, radioType } = charMenu[index]; + const props = { ...this.state, index }; + content = ( + this.handleChangeType(e, props)}> + { + childConfig.map((item) => { + const { sTypeValue, showName, sId } = item; + return ( + {showName} + ); + }) + } + ); + } + } + return content; + }; + + handleChangeType = (e, props) => { + const { charMenu, charConfigAndData, index } = props; + const { childConfig } = charMenu[index]; + const radioType = e.target.value; /* 更改后的菜单 */ + charMenu[index].radioType = radioType; + this.setState({ charMenu }); + const each = charConfigAndData[index]; /* 当前图表的配置 */ + const child = childConfig.filter(item => item.sType === 'searchType' && item.sTypeValue === radioType); + if (utils.isNotEmptyArr(child)) { + const { sName } = child[0]; + each.sSqlCondition = { + [sName]: radioType, + }; + } + this.props.onEachChar(each); + }; + + render() { + const { commonChar, commonCharPage, childChar, sModelsId } = this.state; + let { charConfigAndData } = this.state; + if (sModelsId !== null && sModelsId !== undefined && sModelsId.toString() === '11811781131121915101184660940') { + charConfigAndData = []; + return ( + + { + charConfigAndData.map((itemChar) => { + const { showName, sId, iWidth, iOrder, childConfig } = itemChar; + const extra = utils.isNotEmptyArr(childConfig) ? this.handleExtra(sId) : null; + return ( + + + {this.handleChar(itemChar)} + + + ); + }) + } + + ); + } else { + return ( + + { + charConfigAndData.map((itemChar) => { + const { showName, sId, iWidth, iOrder, childConfig } = itemChar; + const extra = utils.isNotEmptyArr(childConfig) ? this.handleExtra(sId) : null; + return ( + + + {this.handleChar(itemChar)} + + + ); + }) + } + + ); + } + } +} + +export default baseChar(CommonChar); diff --git a/src/components/CommonChar/CommonRollChar.js b/src/components/CommonChar/CommonRollChar.js new file mode 100644 index 0000000..c1e6456 --- /dev/null +++ b/src/components/CommonChar/CommonRollChar.js @@ -0,0 +1,160 @@ +/* eslint-disable object-curly-newline */ +import React, { Component } from 'react'; +import { Card, Row, Col, Radio } from 'antd-v4'; +import baseChar from '../Common/baseChar'; /* 获取图表配置及数据 */ +import styles from '../Charts/index.less'; +import * as commonUtils from '../../utils/utils'; +import CommonList from '../Common/CommonList'; +import Bar from '../Charts/Bar'; +import Columnar from '../Charts/Columnar'; +import ColumnarGroup from '../Charts/ColumnarGroup'; +import BrokenLine from '../Charts/BrokenLine'; +import WaterWave from '../Charts/WaterWave'; +import Gauge from '../Charts/Gauge'; +import ColumnarStack from '../Charts/ColumnarStack'; +import PieGroup from '../Charts/PieGroup'; +import Pie from '../Charts/Pie'; +import TimeLineGroup from '../Charts/TimeLineGroup'; +import ColorBlock from '../Charts/ColorBlock'; + + +class CommonRollChar extends Component { + constructor(props) { + super(props); + this.state = { + ...props, + commonChar: styles.commonChar, + childChar: styles.childChar, + }; + } + + componentWillMount() { + this.timer = setInterval(() => { + const pageNum = commonUtils.isEmpty(this.props.pageNum) ? 2 : this.props.pageNum + 1; + this.props.onGetData({ ...this.props }, pageNum); + }, 10000); + } + + componentWillReceiveProps(nextProps) { + this.setState({ ...nextProps }); + } + handleChar = (props) => { + const { sCharType, child, iHeight } = props; + let content = ''; + if (commonUtils.isNotEmptyObject(child)) { + child.height = props.iHeight; + if (sCharType === 'sBar') { + /* 横向条形图 */ + content = ; + } else if (sCharType === 'sColumnar') { + /* 纵向条形图 */ + content = ; + } else if (sCharType === 'sColumnarGroup') { + /* 纵向条形图 */ + content = ; + } else if (sCharType === 'sBrokenLine') { + content = ; + } else if (sCharType === 'sWaterWave') { + content = ; + } else if (sCharType === 'sGauge') { + content = ; + } else if (sCharType === 'sColumnarStack') { + content = ; + } else if (sCharType === 'sPieGroup') { + content = ; + } else if (sCharType === 'sPie') { + content = ; + } else if (sCharType === 'TimeLineGroup') { + content = ; + } else if (sCharType === 'ColorBlock') { + content = ; + } + } else if (sCharType === 'commonList') { + const listProps = { ...this.props, ...child, formRoute: 'commonList', isSmall: true, iHeight, sModelsId: props.sActiveId, pageNum: this.state.pageNum, onToFirst: this.props.onToFirst }; + content =
; + } + return content; + }; + + handleExtra = (menuTypeId) => { + const { charMenu } = this.state; + let content = ''; + const index = charMenu.findIndex(item => item.sId === menuTypeId); + if (index > -1) { + const { childConfig, radioType } = charMenu[index]; + const props = { ...this.state, index }; + content = ( + this.handleChangeType(e, props)}> + { + childConfig.map((item) => { + const { sTypeValue, showName, sId } = item; + return ( + {showName} + ); + }) + } + ); + } + return content; + }; + + handleChangeType = (e, props) => { + const { charMenu, charConfigAndData, index } = props; + const { childConfig } = charMenu[index]; + const radioType = e.target.value; /* 更改后的菜单 */ + charMenu[index].radioType = radioType; + this.setState({ charMenu }); + const each = charConfigAndData[index]; /* 当前图表的配置 */ + const child = childConfig.filter(item => item.sType === 'searchType' && item.sTypeValue === radioType); + if (commonUtils.isNotEmptyArr(child)) { + const { sName } = child[0]; + each.sSqlCondition = { + [sName]: radioType, + }; + } + this.props.onEachChar(each); + }; + + render() { + const { charConfigAndData, commonChar, childChar, sModelsId } = this.state; + if (sModelsId !== null && sModelsId !== undefined && sModelsId.toString() === '11811781131121915101184660940') { + return ( + + { + charConfigAndData.map((itemChar) => { + const { showName, sId, iWidth, iOrder, childConfig } = itemChar; + const extra = commonUtils.isNotEmptyArr(childConfig) ? this.handleExtra(sId) : null; + return ( + + + {this.handleChar(itemChar)} + + + ); + }) + } + + ); + } else { + return ( + + { + charConfigAndData.map((itemChar) => { + const { showName, sId, iWidth, iOrder, childConfig } = itemChar; + const extra = commonUtils.isNotEmptyArr(childConfig) ? this.handleExtra(sId) : null; + return ( + + + {this.handleChar(itemChar)} + + + ); + }) + } + + ); + } + } +} + +export default baseChar(CommonRollChar); diff --git a/src/components/Tab/index.less b/src/components/Tab/index.less index a91a224..0188635 100644 --- a/src/components/Tab/index.less +++ b/src/components/Tab/index.less @@ -63,6 +63,7 @@ border: none; background: none; transition: unset; + color: #fff; &:hover{ color: #fff; } diff --git a/src/routes/commonChar/commonChar.js b/src/routes/commonChar/commonChar.js new file mode 100644 index 0000000..4d739c7 --- /dev/null +++ b/src/routes/commonChar/commonChar.js @@ -0,0 +1,18 @@ +import React from 'react'; +import { connect } from 'umi'; +import CommonCharComponent from '../../components/CommonChar/CommonChar'; + +function CommonChar({ dispatch, app, content }) { + const commonChar = { + app, + content, + dispatch, + }; + + return ( + + ); +} + +export default connect(({ app, content }) => + ({ app, content }))(CommonChar); diff --git a/src/routes/commonChar/commonRollChar.js b/src/routes/commonChar/commonRollChar.js new file mode 100644 index 0000000..9208453 --- /dev/null +++ b/src/routes/commonChar/commonRollChar.js @@ -0,0 +1,22 @@ +import React from 'react'; +import { connect } from 'umi'; +import CommonRollCharComponent from '../../components/CommonChar/CommonRollChar'; + +function CommonRollChar({ + dispatch, app, content, location, +}) { + const commonRollChar = { + app, + content, + dispatch, + routing: location, + sModelsId: '101251240115015960989066790', + }; + + return ( + + ); +} + +export default connect(({ app, content }) => + ({ app, content }))(CommonRollChar);