Commit 43cccc63bfede68aec215a56052830fa2c6b15b8
1 parent
3ddcff4b
样式调整
Showing
24 changed files
with
7109 additions
and
71 deletions
src/components/Common/BoxDesign/createAirplaneBox.js
0 → 100644
| 1 | +/* eslint-disable */ | |
| 2 | +// 创建飞机盒盒身 | |
| 3 | +const boxContent = (width, height, offsetX, offsetY) => { | |
| 4 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 5 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + width} ${offsetY + height} L ${offsetX + | |
| 6 | + width} ${offsetY} L ${offsetX} ${offsetY} Z`; | |
| 7 | + svg.setAttribute("d", d); | |
| 8 | + svg.setAttribute("fill", "transparent"); | |
| 9 | + svg.setAttribute("stroke", "#333"); | |
| 10 | + svg.setAttribute("stroke-width", "1"); | |
| 11 | + svg.setAttribute("stroke-dasharray", "3.8"); // 添加虚线效果 | |
| 12 | + return svg; | |
| 13 | +}; | |
| 14 | +// 创建飞机盒上盒部件 | |
| 15 | +const createBoxTop = (width, height, offsetX, offsetY, outerWidth) => { | |
| 16 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 17 | + const d = `M ${offsetX} ${offsetY} L ${width} ${offsetY} A ${height} ${height} 0 0 1 ${width + outerWidth} ${offsetX} L ${offsetX - | |
| 18 | + outerWidth} ${offsetY + height} A ${height} ${height} 0 0 1 ${offsetX} ${offsetY}`; | |
| 19 | + svg.setAttribute("d", d); | |
| 20 | + svg.setAttribute("fill", "transparent"); | |
| 21 | + svg.setAttribute("stroke", "#333"); | |
| 22 | + svg.setAttribute("stroke-width", "1"); | |
| 23 | + return svg; | |
| 24 | +}; | |
| 25 | +// 创建飞机左上部件 | |
| 26 | +const createBoxLeftTop = (width, height, offsetX, offsetY, isLeft) => { | |
| 27 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 28 | + const d = `M ${offsetX} ${offsetY} L ${offsetX - width + (isLeft ? 5 : -5)} ${offsetY + 5} A 10 10 0 0 ${isLeft ? 0 : 1} ${offsetX - | |
| 29 | + width} ${offsetY + 15} L ${offsetX - width} ${offsetY + height - 15} | |
| 30 | + A 10 10 0 0 ${isLeft ? 0 : 1} ${offsetX - width + (isLeft ? 5 : -5)} ${offsetY + height - 5} L ${offsetX} ${offsetY + height}`; | |
| 31 | + svg.setAttribute("d", d); | |
| 32 | + svg.setAttribute("fill", "transparent"); | |
| 33 | + svg.setAttribute("stroke", "#333"); | |
| 34 | + svg.setAttribute("stroke-width", "1"); | |
| 35 | + return svg; | |
| 36 | +}; | |
| 37 | +const createBoxDown = (width, height, offsetX, offsetY) => { | |
| 38 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 39 | + const d = `M ${offsetX} ${offsetY} L ${offsetX - width} ${offsetY} L ${offsetX - width} ${offsetY + height} L ${offsetX} ${offsetY + height}`; | |
| 40 | + svg.setAttribute("d", d); | |
| 41 | + svg.setAttribute("fill", "transparent"); | |
| 42 | + svg.setAttribute("stroke", "#333"); | |
| 43 | + svg.setAttribute("stroke-width", "1"); | |
| 44 | + return svg; | |
| 45 | +}; | |
| 46 | +const createBoxComponent = (D, d1, dD, height, offsetX, offsetY, outerHeight) => { | |
| 47 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 48 | + // const h = height - 8; | |
| 49 | + // 短脚尺寸 | |
| 50 | + const dJj = height * 0.05; | |
| 51 | + const dD1 = 5; | |
| 52 | + // 计算突出的高度 | |
| 53 | + const dTW1 = (height / 2) * 0.1; | |
| 54 | + const dTW2 = (height / 2) * 0.2; | |
| 55 | + const dTW = height / 2 - dTW2 * 2 - dTW1; | |
| 56 | + const d = `M ${offsetX} ${offsetY} | |
| 57 | + L ${offsetX - D} ${offsetY} | |
| 58 | + L ${offsetX - D} ${offsetY + height} | |
| 59 | + L ${offsetX - D} ${offsetY} | |
| 60 | + L ${offsetX - D - outerHeight} ${offsetY + dTW1} | |
| 61 | + L ${offsetX - D - outerHeight} ${offsetY + height - dTW1} | |
| 62 | + L ${offsetX - D - outerHeight} ${offsetY + dTW1} | |
| 63 | + L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1} | |
| 64 | + L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 - 2} | |
| 65 | + L ${offsetX - D - outerHeight - d1 - dD} ${offsetY + dTW1 + dTW2} | |
| 66 | + L ${offsetX - D - outerHeight - d1 - dD} ${offsetY + dTW1 + dTW2 + dTW - 2} | |
| 67 | + L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW} | |
| 68 | + L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW + dTW2} | |
| 69 | + L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 - 2} | |
| 70 | + L ${offsetX - D - outerHeight - d1 - dD} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2} | |
| 71 | + L ${offsetX - D - outerHeight - d1 - dD} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW - 2} | |
| 72 | + L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW} | |
| 73 | + L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW + dTW2} | |
| 74 | + L ${offsetX - D - outerHeight} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW + dTW2} | |
| 75 | + L ${offsetX - D} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW + dTW2 + dTW1} | |
| 76 | + L ${offsetX} ${offsetY + height} | |
| 77 | + `; | |
| 78 | + svg.setAttribute("d", d); | |
| 79 | + svg.setAttribute("fill", "transparent"); | |
| 80 | + svg.setAttribute("stroke", "#333"); | |
| 81 | + svg.setAttribute("stroke-width", "1"); | |
| 82 | + return svg; | |
| 83 | +}; | |
| 84 | + | |
| 85 | +// 盒身 | |
| 86 | +export const createPathElement = (x, y, width, height, id, wrapperId) => { | |
| 87 | + const d = `M ${x} ${y} L ${x} ${y + height} L ${x + width} ${y + height} L ${x + width} ${y} L ${x} ${y} Z`; | |
| 88 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 89 | + svg.setAttribute("d", d); | |
| 90 | + svg.setAttribute("fill", "transparent"); | |
| 91 | + svg.setAttribute("stroke", "red"); | |
| 92 | + svg.setAttribute("stroke-width", "1"); | |
| 93 | + svg.setAttribute("stroke-dasharray", "4"); // 添加虚线效果 | |
| 94 | + return svg; | |
| 95 | +}; | |
| 96 | + | |
| 97 | +// | |
| 98 | +// 左边斜线贴边 | |
| 99 | +export const createTrapezoid = (height, offsetX, offsetY, size) => { | |
| 100 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 101 | + const d = `M ${offsetX} ${offsetY} L ${offsetX - size} ${offsetY + 2} L ${offsetX - size} ${offsetY + height - 2} L ${offsetX} ${offsetY + height}`; | |
| 102 | + svg.setAttribute("d", d); | |
| 103 | + svg.setAttribute("fill", "transparent"); | |
| 104 | + svg.setAttribute("stroke", "#333"); | |
| 105 | + svg.setAttribute("stroke-width", "1"); | |
| 106 | + return svg; | |
| 107 | +}; | |
| 108 | +// 左上盒舌 盒舌 x轴原点 y轴原点 高度 x轴方向偏移 y轴方向偏移 是否瞬时针 是否镜像 type0 | |
| 109 | +export const createTopTongue = (width, offsetX, offsetY, size, xz, yz, clockwise, isMirror, az, jxY) => { | |
| 110 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 111 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + az} L ${offsetX + xz} ${offsetY - size} L ${offsetX + | |
| 112 | + width - | |
| 113 | + (isMirror ? -(yz * 2) : yz * 2)} ${offsetY - size} | |
| 114 | + A ${yz} ${yz} 0 0 ${clockwise} ${offsetX + width - (isMirror ? -yz : yz)} ${offsetY - size + jxY} L ${offsetX + width} ${offsetY}`; | |
| 115 | + svg.setAttribute("d", d); | |
| 116 | + svg.setAttribute("fill", "transparent"); | |
| 117 | + svg.setAttribute("stroke", "#333"); | |
| 118 | + svg.setAttribute("stroke-width", "1"); | |
| 119 | + return svg; | |
| 120 | +}; | |
| 121 | +// 下边 | |
| 122 | +export const createBottomTongue = (width, offsetX, offsetY, size, xz, yz, clockwise, isMirror, az, jxY) => { | |
| 123 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 124 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + az} L ${offsetX + xz} ${offsetY - size} L ${offsetX + | |
| 125 | + width - | |
| 126 | + (isMirror ? -(yz * 2) : yz * 2)} ${offsetY - size} | |
| 127 | + A ${yz} ${yz} 0 0 ${clockwise} ${offsetX + width - (isMirror ? -yz : yz)} ${offsetY - size + jxY} L ${offsetX + width} ${offsetY}`; | |
| 128 | + svg.setAttribute("d", d); | |
| 129 | + svg.setAttribute("fill", "transparent"); | |
| 130 | + svg.setAttribute("stroke", "#333"); | |
| 131 | + svg.setAttribute("stroke-width", "1"); | |
| 132 | + return svg; | |
| 133 | +}; | |
| 134 | +// 上盒舌类型1 | |
| 135 | +export const createTopTongueType1 = (width, offsetX, offsetY, size, xz, yz) => { | |
| 136 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 137 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + size} L ${offsetX + width - xz + yz} ${offsetY + size} L${offsetX + | |
| 138 | + width} ${offsetY} `; | |
| 139 | + svg.setAttribute("d", d); | |
| 140 | + svg.setAttribute("fill", "transparent"); | |
| 141 | + svg.setAttribute("stroke", "#333"); | |
| 142 | + svg.setAttribute("stroke-width", "1"); | |
| 143 | + return svg; | |
| 144 | +}; | |
| 145 | +export const createDynamicTop = (width, height, deep, offsetX, offsetY, size) => { | |
| 146 | + const isSignNum = Math.sign(deep) === 1 ? 2 : -2; | |
| 147 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 148 | + // 动态生成路径，基于输入参数 | |
| 149 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY - deep - size + isSignNum} A 2 2 0 0 1 ${offsetX + 2} ${offsetY - deep - size} | |
| 150 | + L ${offsetX + width - 2} ${offsetY - deep - size} A 2 2 0 0 1 ${offsetX + width} ${offsetY - deep - size + isSignNum} L ${offsetX + | |
| 151 | + width} ${offsetY - deep} | |
| 152 | + L ${offsetX} ${offsetY - deep} L ${offsetX + width} ${offsetY - deep} L ${offsetX + width} ${offsetY} `; | |
| 153 | + svg.setAttribute("d", d); | |
| 154 | + svg.setAttribute("fill", "transparent"); | |
| 155 | + svg.setAttribute("stroke", "#333"); | |
| 156 | + svg.setAttribute("stroke-width", "1"); | |
| 157 | + return svg; | |
| 158 | +}; | |
| 159 | +const createBottomCy = (width, height, offsetX, offsetY) => { | |
| 160 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 161 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + 2} ${offsetY + height} L ${offsetX + width / 2} ${offsetY + height} | |
| 162 | + L ${offsetX + width} ${offsetY}`; | |
| 163 | + svg.setAttribute("d", d); | |
| 164 | + svg.setAttribute("fill", "transparent"); | |
| 165 | + svg.setAttribute("stroke", "#333"); | |
| 166 | + svg.setAttribute("stroke-width", "1"); | |
| 167 | + return svg; | |
| 168 | +}; | |
| 169 | +const createBottomDh = (width, height, offsetX, offsetY) => { | |
| 170 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 171 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + 5} ${offsetY + height} L ${offsetX + width / 2 - 10} ${offsetY + height} | |
| 172 | + A 10 10 0 0 0 ${offsetX + width / 2} ${offsetY + height - 10} A 5 5 0 0 1 ${offsetX + width / 2 + 5} ${offsetY + height - 10} | |
| 173 | + L ${offsetX + width * 0.75} ${offsetY + height} L ${offsetX + width} ${offsetY + height} L ${offsetX + width} ${offsetY + 5} | |
| 174 | + L ${offsetX + width - 3} ${offsetY + 3} L ${offsetX + width} ${offsetY}`; | |
| 175 | + svg.setAttribute("d", d); | |
| 176 | + svg.setAttribute("fill", "transparent"); | |
| 177 | + svg.setAttribute("stroke", "#333"); | |
| 178 | + svg.setAttribute("stroke-width", "1"); | |
| 179 | + return svg; | |
| 180 | +}; | |
| 181 | +// 添加标注 | |
| 182 | +export const createText = (offsetX, offsetY, size, textContent) => { | |
| 183 | + const text = document.createElementNS("http://www.w3.org/2000/svg", "text"); | |
| 184 | + text.setAttribute("x", offsetX); // 文字水平居中 | |
| 185 | + text.setAttribute("y", offsetY); // 文字垂直居中 | |
| 186 | + text.setAttribute("text-anchor", "middle"); // 文字水平居中 | |
| 187 | + text.setAttribute("dominant-baseline", "middle"); // 文字垂直居中 | |
| 188 | + text.setAttribute("fill", "#333"); // 文字颜色 | |
| 189 | + text.setAttribute("font-size", size); // 文字大小 | |
| 190 | + text.textContent = textContent || "Text"; // 默认文字内容 | |
| 191 | + return text; | |
| 192 | +}; | |
| 193 | +// 竖向双箭头 | |
| 194 | +export const createDoubleArrow = (height, offsetX, offsetY, scale) => { | |
| 195 | + const Y = -3 * (scale ? scale : 1); | |
| 196 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 197 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY - height / 2 - Y} L ${offsetX + Y} ${offsetY - height / 2 - Y} L ${offsetX} ${offsetY - | |
| 198 | + height / 2} | |
| 199 | + L ${offsetX - Y} ${offsetY - height / 2 - Y} L ${offsetX} ${offsetY - height / 2 - Y} L ${offsetX} ${offsetY + height / 2 + Y} L | |
| 200 | + ${offsetX - Y} ${offsetY + height / 2 + Y} L ${offsetX} ${offsetY + height / 2} L ${offsetX + Y} ${offsetY + | |
| 201 | + height / 2 + | |
| 202 | + Y} L ${offsetX} ${offsetY + height / 2 + Y}`; | |
| 203 | + svg.setAttribute("d", d); | |
| 204 | + svg.setAttribute("fill", "#F5AD6C"); | |
| 205 | + svg.setAttribute("stroke", "#F5AD6C"); | |
| 206 | + svg.setAttribute("stroke-width", "1"); | |
| 207 | + | |
| 208 | + return svg; | |
| 209 | +}; | |
| 210 | +// 横向双箭头 | |
| 211 | +export const createHorizontalDoubleArrow = (width, offsetX, offsetY, scale) => { | |
| 212 | + const Y = 3 * (scale ? scale : 1); | |
| 213 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 214 | + const d = `M ${offsetX} ${offsetY} L ${offsetX - width / 2 + Y} ${offsetY} L ${offsetX - width / 2 + Y} ${offsetY - Y} L ${offsetX - | |
| 215 | + width / 2} ${offsetY} | |
| 216 | + L ${offsetX - width / 2 + Y} ${offsetY + Y} L ${offsetX - width / 2 + Y} ${offsetY} L ${offsetX + width / 2 - Y} ${offsetY} L ${offsetX + | |
| 217 | + width / 2 - | |
| 218 | + Y} ${offsetY + Y} L ${offsetX + width / 2} ${offsetY} | |
| 219 | + L ${offsetX + width / 2 - Y} ${offsetY - Y} L ${offsetX + width / 2 - Y} ${offsetY}`; | |
| 220 | + svg.setAttribute("d", d); | |
| 221 | + svg.setAttribute("fill", "#F5AD6C"); | |
| 222 | + svg.setAttribute("stroke", "#F5AD6C"); | |
| 223 | + svg.setAttribute("stroke-width", "1"); | |
| 224 | + return svg; | |
| 225 | +}; | |
| 226 | +// 左右直线贴边 | |
| 227 | +const createLineWelt = (width, height, offsetX, offsetY) => { | |
| 228 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 229 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + width} ${offsetY} L ${offsetX + width} ${offsetY + height} L ${offsetX} ${offsetY + height}`; | |
| 230 | + svg.setAttribute("d", d); | |
| 231 | + svg.setAttribute("fill", "transparent"); | |
| 232 | + svg.setAttribute("stroke", "#333"); | |
| 233 | + svg.setAttribute("stroke-width", "1"); | |
| 234 | + return svg; | |
| 235 | +}; | |
| 236 | + | |
| 237 | +const createLine = (height, offsetX, offsetY) => { | |
| 238 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 239 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height}`; | |
| 240 | + svg.setAttribute("d", d); | |
| 241 | + svg.setAttribute("fill", "transparent"); | |
| 242 | + svg.setAttribute("stroke", "#333"); | |
| 243 | + svg.setAttribute("stroke-width", "1"); | |
| 244 | + svg.setAttribute("stroke-dasharray", "3.8"); // 添加虚线效果 | |
| 245 | + return svg; | |
| 246 | +}; | |
| 247 | +// 没选部件的时候展示空白 | |
| 248 | +export const createNoneProject = () => { | |
| 249 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 250 | + const d = ``; | |
| 251 | + svg.setAttribute("d", d); | |
| 252 | + svg.setAttribute("fill", "transparent"); | |
| 253 | + svg.setAttribute("stroke", "#333"); | |
| 254 | + svg.setAttribute("stroke-width", "1"); | |
| 255 | + return svg; | |
| 256 | +}; | |
| 257 | +// 自动扣抵盒 | |
| 258 | +export function createDeductionBox(slaveRowData) { | |
| 259 | + const pathList = []; | |
| 260 | + const { W, L, D, dg, dc, db } = slaveRowData; | |
| 261 | + const width = L; | |
| 262 | + const height = D; | |
| 263 | + const deep = W; | |
| 264 | + // 盒身 | |
| 265 | + const rectangles = [ | |
| 266 | + { x: 0, y: 0, width: deep, height, id: "ac_path_c795a39_2oj", wrapperId: "3476" }, | |
| 267 | + { x: 0 + deep, y: 0, width: width, height, id: "ac_path_c795a39_2on", wrapperId: "3480" }, | |
| 268 | + { x: 0 + deep + width, y: 0, width: deep, height, id: "ac_path_c795a39_2or", wrapperId: "3484" }, | |
| 269 | + { x: 0 + deep * 2 + width, y: 0, width: width, height, id: "ac_path_c795a39_2ov", wrapperId: "3488" }, | |
| 270 | + ]; | |
| 271 | + rectangles.forEach(rect => { | |
| 272 | + pathList.push(createPathElement(rect.x, rect.y, rect.width, rect.height, rect.id, rect.wrapperId)); | |
| 273 | + }); | |
| 274 | + pathList.push(createTrapezoid(height, deep * 2 + width * 2, 0, -dg)); | |
| 275 | + pathList.push(createTopTongue(deep, 0, 0, db, 2, 5, 1, false)); | |
| 276 | + pathList.push(createTopTongue(-deep, deep * 2 + width, 0, db, -2, 5, 0, true)); | |
| 277 | + pathList.push(createDynamicTop(width, height, deep, deep * 2 + width, 0, dc)); | |
| 278 | + pathList.push(createBottomCy(deep, dc - 10, 0, height)); | |
| 279 | + pathList.push(createBottomCy(deep, dc - 10, deep + width, height)); | |
| 280 | + pathList.push(createBottomDh(width, dc, deep, height)); | |
| 281 | + pathList.push(createBottomDh(width, dc, deep * 2 + width, height)); | |
| 282 | + pathList.push(createHorizontalDoubleArrow(width, deep + width / 2, height * 0.3)); | |
| 283 | + pathList.push(createHorizontalDoubleArrow(deep, deep + width + deep / 2, height * 0.5)); | |
| 284 | + pathList.push(createHorizontalDoubleArrow(dg, deep * 2 + width * 2 + dg / 2, height * 0.5)); | |
| 285 | + pathList.push(createDoubleArrow(db, deep + width + deep * 0.2, -db / 2, -3)); | |
| 286 | + pathList.push(createDoubleArrow(height, deep * 2 + width + width * 0.5, height / 2, -3)); | |
| 287 | + pathList.push(createDoubleArrow(dc, deep * 2 + width + width * 0.5, -deep - dc / 2, -3)); | |
| 288 | + pathList.push(createText(deep + width / 2, height * 0.3 + 15, 14, "L")); | |
| 289 | + pathList.push(createText(deep + width + deep / 2, height * 0.5 + 15, 14, "W")); | |
| 290 | + pathList.push(createText(deep * 2 + width * 2 + dg / 2, height * 0.5 + 15, 14, "g")); | |
| 291 | + pathList.push(createText(deep + width + deep * 0.2 + 8, -db / 2, 14, "b")); | |
| 292 | + pathList.push(createText(deep * 2 + width + width * 0.5 + 8, height / 2, 14, "D")); | |
| 293 | + pathList.push(createText(deep * 2 + width + width * 0.5 + 8, -deep - dc / 2, 14, "c")); | |
| 294 | + return pathList; | |
| 295 | +} | |
| 296 | +// 飞机盒 | |
| 297 | +export function createAirplaneBox(slaveRowData) { | |
| 298 | + const { W, L, D, dF5, dD3, dF, dD1, dTd } = slaveRowData; | |
| 299 | + const pathList = []; | |
| 300 | + const width = L; | |
| 301 | + const height = W; | |
| 302 | + const deep = D; | |
| 303 | + const dD = dTd; | |
| 304 | + // 盒身 | |
| 305 | + const rectangles = [ | |
| 306 | + { x: 0, y: 0, width: width - 8 * 2, height: height }, | |
| 307 | + { x: 0 - 4, y: height, width: width - 4 * 2, height: dD3 }, | |
| 308 | + { x: 0 - 8, y: height + dD3, width: width, height: height }, | |
| 309 | + { x: 0 - 4, y: height + dD3 + height, width: width - 4 * 2, height: dD3 }, | |
| 310 | + ]; | |
| 311 | + pathList.push(createBoxTop(width - 8 * 2, dD3, 0, -dD3, dF5)); | |
| 312 | + pathList.push(createBoxLeftTop(dF5, height, 0, 0, true)); | |
| 313 | + pathList.push(createBoxLeftTop(-dF5, height, width - 8 * 2, 0, false)); | |
| 314 | + pathList.push(createBoxDown(dF, dD3, -4, height)); | |
| 315 | + pathList.push(createBoxDown(-dF, dD3, width - 4 * 2 - 4, height)); | |
| 316 | + pathList.push(createBoxDown(dF, dD3, -4, height * 2 + dD3)); | |
| 317 | + pathList.push(createBoxDown(-dF, dD3, width - 4 * 2 - 4, height * 2 + dD3)); | |
| 318 | + pathList.push(createBoxComponent(deep, dD1, dD, height, 0 - 8, height + dD3, dD)); | |
| 319 | + pathList.push(createBoxComponent(-deep, -dD1, -dD, height, width - 8, height + dD3, -dD)); | |
| 320 | + // 竖向 | |
| 321 | + pathList.push(createDoubleArrow(dD3, L * 0.3, -dD3 / 2, -3)); | |
| 322 | + pathList.push(createText(L * 0.3 + 10, -dD3 / 2, 14, "d3")); | |
| 323 | + pathList.push(createDoubleArrow(height, -15, height + dD3 + height / 2, -3)); | |
| 324 | + pathList.push(createText(-25, height + dD3 + height / 2, 14, "W")); | |
| 325 | + // 横向 | |
| 326 | + pathList.push(createHorizontalDoubleArrow(dF5, -dF5 / 2, height / 2)); | |
| 327 | + pathList.push(createText(-dF5 / 2, height / 2 + 10, 14, "f5")); | |
| 328 | + pathList.push(createHorizontalDoubleArrow(width, width / 2 - 8, dD3 + height + height * 0.2)); | |
| 329 | + pathList.push(createText(width / 2 - 8, dD3 + height + height * 0.2 + 10, 14, "L")); | |
| 330 | + pathList.push(createHorizontalDoubleArrow(deep, width + deep / 2 - 8, dD3 + height + height * 0.2)); | |
| 331 | + pathList.push(createText(width + deep / 2 - 8, dD3 + height + height * 0.2 + 10, 14, "D")); | |
| 332 | + pathList.push(createHorizontalDoubleArrow(dD1, width + deep + dD1 / 2 + dD - 8, dD3 + height + height * 0.2)); | |
| 333 | + pathList.push(createText(width + deep + dD1 / 2 + dD - 8, dD3 + height + height * 0.3 + 6, 14, "d1")); | |
| 334 | + pathList.push(createHorizontalDoubleArrow(dD, width + deep + dD1 + dD / 2 + dD - 8, dD3 + height + height * 0.2)); | |
| 335 | + pathList.push(createText(width + deep + dD1 + dD / 2 + dD - 8, dD3 + height + height * 0.3 + 6, 14, "d")); | |
| 336 | + pathList.push(createHorizontalDoubleArrow(dF, width - 12 + dF / 2, dD3 + height * 2 + dD3 / 2)); | |
| 337 | + pathList.push(createText(width - 12 + dF / 2, dD3 + height * 2 + dD3 / 2 + 10, 14, "f")); | |
| 338 | + rectangles.forEach(x => { | |
| 339 | + pathList.push(boxContent(x.width, x.height, x.x, x.y)); | |
| 340 | + }); | |
| 341 | + | |
| 342 | + return pathList; | |
| 343 | +} | |
| 344 | +// 手提袋 | |
| 345 | +export function createTote(slaveRowData) { | |
| 346 | + const pathList = []; | |
| 347 | + const { W, L, D, dF, dF1, dF2 } = slaveRowData; | |
| 348 | + const rectangles = [ | |
| 349 | + { x: 0, y: 0, width: L, height: D }, | |
| 350 | + { x: L, y: 0, width: W, height: D }, | |
| 351 | + { x: L + W, y: 0, width: L, height: D }, | |
| 352 | + { x: L + W + L, y: 0, width: W, height: D }, | |
| 353 | + ]; | |
| 354 | + rectangles.forEach(x => { | |
| 355 | + pathList.push(boxContent(x.width, x.height, x.x, x.y)); | |
| 356 | + }); | |
| 357 | + pathList.push(createLineWelt(-dF, D, 0, 0)); | |
| 358 | + pathList.push(createLineWeltTop(dF + L * 2 + W * 2, -dF1, -dF, 0)); | |
| 359 | + pathList.push(createLineWeltTop(dF + L * 2 + W * 2, dF2, -dF, D)); | |
| 360 | + pathList.push(createLine(dF1, 0, -dF1)); | |
| 361 | + pathList.push(createLine(dF1, L, -dF1)); | |
| 362 | + pathList.push(createLine(dF2, 0, D)); | |
| 363 | + pathList.push(createLine(dF2, L, D)); | |
| 364 | + pathList.push(createLine(dF1 + D + dF2, L + W / 2, -dF1)); | |
| 365 | + pathList.push(createLine(dF1, L + W, -dF1)); | |
| 366 | + pathList.push(createLine(dF1, L * 2 + W, -dF1)); | |
| 367 | + pathList.push(createLine(dF2, L + W, D)); | |
| 368 | + pathList.push(createLine(dF2, L * 2 + W, D)); | |
| 369 | + pathList.push(createLine(dF1 + D + dF2, L * 2 + W + W / 2, -dF1)); | |
| 370 | + | |
| 371 | + // 横向 | |
| 372 | + pathList.push(createHorizontalDoubleArrow(dF, -dF / 2, D / 2)); | |
| 373 | + pathList.push(createText(-dF / 2, D / 2 + 10, 14, "f")); | |
| 374 | + pathList.push(createHorizontalDoubleArrow(L, L / 2, D / 2, -3)); | |
| 375 | + pathList.push(createText(L / 2, D / 2 + 10, 14, "L")); | |
| 376 | + pathList.push(createHorizontalDoubleArrow(W, L + W / 2, D / 2, -3)); | |
| 377 | + pathList.push(createText(L + W / 2, D / 2 + 10, 14, "W")); | |
| 378 | + // 竖向 | |
| 379 | + pathList.push(createDoubleArrow(dF1, L + W + L / 2, -dF1 / 2, -3)); | |
| 380 | + pathList.push(createText(L + W + L / 2 + 10, -dF1 / 2, 14, "f1")); | |
| 381 | + pathList.push(createDoubleArrow(dF2, L + W + L / 2, D + dF2 / 2, -3)); | |
| 382 | + pathList.push(createText(L + W + L / 2 + 10, D + dF2 / 2, 14, "f2")); | |
| 383 | + pathList.push(createDoubleArrow(D, L + W + 10, D / 2, -3)); | |
| 384 | + pathList.push(createText(L + W + 20, D / 2, 14, "D")); | |
| 385 | + return pathList; | |
| 386 | +} | |
| 387 | +// 普通盒 | |
| 388 | +export function createBoxs(slaveRowData) { | |
| 389 | + const pathList = []; | |
| 390 | + const { W, L, D, dF, dG } = slaveRowData; | |
| 391 | + const rectangles = [ | |
| 392 | + { x: 0, y: 0, width: L, height: D }, | |
| 393 | + { x: L, y: 0, width: W, height: D }, | |
| 394 | + { x: L + W, y: 0, width: L, height: D }, | |
| 395 | + { x: L + W + L, y: 0, width: W, height: D }, | |
| 396 | + ]; | |
| 397 | + rectangles.forEach(x => { | |
| 398 | + pathList.push(boxContent(x.width, x.height, x.x, x.y)); | |
| 399 | + }); | |
| 400 | + pathList.push(createTrapezoid(D, 0, 0, dG)); | |
| 401 | + pathList.push(createLineWeltTop(L * 2 + W * 2, -dF, 0, 0)); | |
| 402 | + pathList.push(createLineWeltTop(L * 2 + W * 2, dF, 0, D)); | |
| 403 | + pathList.push(createLine(dF, L, -dF)); | |
| 404 | + pathList.push(createLine(dF, L + W, -dF)); | |
| 405 | + pathList.push(createLine(dF, L * 2 + W, -dF)); | |
| 406 | + pathList.push(createLine(dF, L, D)); | |
| 407 | + pathList.push(createLine(dF, L + W, D)); | |
| 408 | + pathList.push(createLine(dF, L * 2 + W, D)); | |
| 409 | + | |
| 410 | + pathList.push(createHorizontalDoubleArrow(dG, -dG / 2, D / 2)); | |
| 411 | + pathList.push(createText(-dG / 2, D / 2 + 10, 14, "g")); | |
| 412 | + | |
| 413 | + pathList.push(createHorizontalDoubleArrow(W, L + W / 2, D * 0.7)); | |
| 414 | + pathList.push(createText(L + W / 2, D * 0.7 + 10, 14, "W")); | |
| 415 | + | |
| 416 | + pathList.push(createHorizontalDoubleArrow(L, L + W + L / 2, D / 2)); | |
| 417 | + pathList.push(createText(L + W + L / 2, D / 2 + 10, 14, "L")); | |
| 418 | + | |
| 419 | + pathList.push(createDoubleArrow(D, L + W + L * 0.2, D / 2, -3)); | |
| 420 | + pathList.push(createText(L + W + L * 0.2 + 10, D / 2, 14, "D")); | |
| 421 | + | |
| 422 | + pathList.push(createDoubleArrow(dF, L + W + L * 0.6, -dF / 2, -3)); | |
| 423 | + pathList.push(createText(L + W + L * 0.6 + 10, -dF / 2, 14, "f")); | |
| 424 | + | |
| 425 | + return pathList; | |
| 426 | +} | |
| 427 | +// 天地盖 | |
| 428 | +export function createHeavenBox(slaveRowData) { | |
| 429 | + const pathList = []; | |
| 430 | + const { W, L, D, dF, dF1, dD1, dZBJJ } = slaveRowData; | |
| 431 | + const rectangles = [{ x: 0, y: 0, width: L, height: W }, { x: L + D + dZBJJ + dD1, y: -2, width: L + 4, height: W + 4 }]; | |
| 432 | + rectangles.forEach(x => { | |
| 433 | + pathList.push(boxContent(x.width, x.height, x.x, x.y)); | |
| 434 | + }); | |
| 435 | + pathList.push(createLineWelt(-D, W, 0, 0)); | |
| 436 | + pathList.push(createLineWelt(D, W, L, 0)); | |
| 437 | + pathList.push(createLineWelt(-dD1, W + 4, L + D + dZBJJ + dD1, -2)); | |
| 438 | + pathList.push(createLineWelt(dD1, W + 4, L * 2 + 4 + D + dZBJJ + dD1, -2)); | |
| 439 | + | |
| 440 | + pathList.push(createLineWeltTop(D * 2 + L, -dF, -D, 0)); | |
| 441 | + pathList.push(createLineWeltTop(D * 2 + L, dF, -D, W)); | |
| 442 | + pathList.push(createLineWeltTop(dD1 * 2 + L + 4, -dF1, L + D + dZBJJ, -2)); | |
| 443 | + pathList.push(createLineWeltTop(dD1 * 2 + L + 4, dF1, L + D + dZBJJ, W + 2)); | |
| 444 | + | |
| 445 | + pathList.push(createLine(dF, 0, -dF)); | |
| 446 | + pathList.push(createLine(dF, L, -dF)); | |
| 447 | + pathList.push(createLine(dF1, L + D + dZBJJ + dD1, -dF1 - 2)); | |
| 448 | + pathList.push(createLine(dF1, L + D + dZBJJ + dD1 + L + 4, -dF1 - 2)); | |
| 449 | + pathList.push(createLine(dF, 0, W)); | |
| 450 | + pathList.push(createLine(dF, L, W)); | |
| 451 | + pathList.push(createLine(dF1, L + D + dZBJJ + dD1, W + 2)); | |
| 452 | + pathList.push(createLine(dF1, L + D + dZBJJ + dD1 + L + 4, W + 2)); | |
| 453 | + | |
| 454 | + // 横向标注 | |
| 455 | + pathList.push(createHorizontalDoubleArrow(L, L / 2, W * 0.3)); | |
| 456 | + pathList.push(createText(L / 2, W * 0.3 + 10, 14, "L")); | |
| 457 | + pathList.push(createHorizontalDoubleArrow(D, L + D / 2, W / 2)); | |
| 458 | + pathList.push(createText(L + D / 2, W / 2 + 10, 14, "D")); | |
| 459 | + pathList.push(createHorizontalDoubleArrow(dD1, L + D + dZBJJ + dD1 + L + 4 + dD1 / 2, W / 2)); | |
| 460 | + pathList.push(createText(L + D + dZBJJ + dD1 + L + 4 + dD1 / 2, W / 2 + 10, 14, "d1")); | |
| 461 | + // 竖向 | |
| 462 | + pathList.push(createDoubleArrow(dF, L + D / 2, -dF / 2, -3)); | |
| 463 | + pathList.push(createText(L + D / 2 + 10, -dF / 2, 14, "f")); | |
| 464 | + pathList.push(createDoubleArrow(dF + 2, L + D + dZBJJ + dD1 + L + 4 + dD1 / 2, -dF / 2 - 1, -3)); | |
| 465 | + pathList.push(createText(L + D + dZBJJ + dD1 + L + 4 + dD1 / 2 + 10, -dF / 2, 14, "f1")); | |
| 466 | + return pathList; | |
| 467 | +} | |
| 468 | + | |
| 469 | +// 盘式盒 | |
| 470 | +export function createDiscBox(slaveRowData) { | |
| 471 | + const pathList = []; | |
| 472 | + const { W, L, D, dF, dD1, dTd, dDj } = slaveRowData; | |
| 473 | + const dTW1 = (W / 2) * 0.1; | |
| 474 | + const dTW2 = (W / 2) * 0.2; | |
| 475 | + const dTW = W / 2 - dTW2 * 2 - dTW1; | |
| 476 | + const rectangles = [ | |
| 477 | + { x: 0, y: 0, width: L - 4, height: D }, | |
| 478 | + { x: -2, y: D, width: L, height: W }, | |
| 479 | + { x: 0, y: D + W, width: L - 4, height: D }, | |
| 480 | + { x: -2, y: D + dTW1 + dTW2, width: 5, height: dTW }, | |
| 481 | + { x: L - 7, y: D + dTW1 + dTW2, width: 5, height: dTW }, | |
| 482 | + { x: -2, y: D + W - dTW1 - dTW2 - dTW, width: 5, height: dTW }, | |
| 483 | + { x: L - 7, y: D + W - dTW1 - dTW2 - dTW, width: 5, height: dTW }, | |
| 484 | + ]; | |
| 485 | + rectangles.forEach(x => { | |
| 486 | + pathList.push(boxContent(x.width, x.height, x.x, x.y)); | |
| 487 | + }); | |
| 488 | + pathList.push(createBoxDown(dF, D - 4, 0, 2)); | |
| 489 | + pathList.push(createBoxDown(-dF, D - 4, L - 4, 2)); | |
| 490 | + pathList.push(createBoxDown(dF, D - 4, 0, D + W + 2)); | |
| 491 | + pathList.push(createBoxDown(-dF, D - 4, L - 4, D + W + 2)); | |
| 492 | + pathList.push(createBoxComponent(D, dD1, dTd, W, 0 - 2, D, dDj)); | |
| 493 | + pathList.push(createBoxComponent(-D, -dD1, -dTd, W, L, D, -dDj)); | |
| 494 | + // 横向标注 | |
| 495 | + pathList.push(createHorizontalDoubleArrow(L, (L - 2) / 2, D + W * 0.3)); | |
| 496 | + pathList.push(createText((L - 2) / 2, D + W * 0.3 + 10, 14, "L")); | |
| 497 | + pathList.push(createHorizontalDoubleArrow(D, L + D / 2, D + 10)); | |
| 498 | + pathList.push(createText(L + D / 2, D + 15, 14, "D")); | |
| 499 | + // 竖向 | |
| 500 | + pathList.push(createDoubleArrow(W, -D / 2, D + W / 2, -3)); | |
| 501 | + pathList.push(createText(-D / 2, D + W / 2 + 10, 14, "W")); | |
| 502 | + return pathList; | |
| 503 | +} | |
| 504 | +// 展示盒f1 | |
| 505 | +const createShowBoxF1 = (width, height, offsetX, offsetY, size) => { | |
| 506 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 507 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX - width} ${offsetY + size + 1} L ${offsetX - width} ${offsetY + | |
| 508 | + height} L ${offsetX} ${offsetY + height} Z`; | |
| 509 | + svg.setAttribute("d", d); | |
| 510 | + svg.setAttribute("fill", "transparent"); | |
| 511 | + svg.setAttribute("stroke", "#333"); | |
| 512 | + svg.setAttribute("stroke-width", "1"); | |
| 513 | + return svg; | |
| 514 | +}; | |
| 515 | +// 展示盒机翼 | |
| 516 | +const createShowBoxWing = (width, height, offsetX, offsetY, size) => { | |
| 517 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 518 | + const d = `M ${offsetX} ${offsetY} ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + height} L ${offsetX + width} ${offsetY}`; | |
| 519 | + svg.setAttribute("d", d); | |
| 520 | + svg.setAttribute("fill", "transparent"); | |
| 521 | + svg.setAttribute("stroke", "#333"); | |
| 522 | + svg.setAttribute("stroke-width", "1"); | |
| 523 | + return svg; | |
| 524 | +}; | |
| 525 | +// 展示盒f1 | |
| 526 | +const createShowBoxF2 = (width, height, offsetX, offsetY, size) => { | |
| 527 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 528 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + size} ${offsetY + height + size} | |
| 529 | + L ${offsetX + width} ${offsetY + height + size} L ${offsetX + width} ${offsetY + -size * 2} L ${offsetX} ${offsetY}`; | |
| 530 | + svg.setAttribute("d", d); | |
| 531 | + svg.setAttribute("fill", "transparent"); | |
| 532 | + svg.setAttribute("stroke", "#333"); | |
| 533 | + svg.setAttribute("stroke-width", "1"); | |
| 534 | + return svg; | |
| 535 | +}; | |
| 536 | +// 展示盒 | |
| 537 | +export function createShowBox(slaveRowData) { | |
| 538 | + const pathList = []; | |
| 539 | + const { L, W, D, dD2, dF1, dF2 } = slaveRowData; | |
| 540 | + const rectangles = [{ x: 0, y: 0, width: D, height: W }, { x: D, y: 0, width: L, height: W }, { x: D + L, y: 0, width: dD2, height: W }]; | |
| 541 | + rectangles.forEach(x => { | |
| 542 | + pathList.push(boxContent(x.width, x.height, x.x, x.y)); | |
| 543 | + }); | |
| 544 | + pathList.push(createShowBoxF1(dF1, -D, D, 0, -3)); | |
| 545 | + pathList.push(createShowBoxF1(dF1, D, D, W, 3)); | |
| 546 | + pathList.push(createShowBoxWing(L, -dD2, D, 0, -D)); | |
| 547 | + pathList.push(createShowBoxWing(L, dD2, D, W, D)); | |
| 548 | + pathList.push(createShowBoxF2(dF2, -dD2, D + L, 0, 2)); | |
| 549 | + pathList.push(createShowBoxF2(dF2, dD2, D + L, W, -2)); | |
| 550 | + // 横向标注 | |
| 551 | + pathList.push(createHorizontalDoubleArrow(L, D + L / 2, W * 0.3)); | |
| 552 | + pathList.push(createText(D + L / 2, W * 0.3 + 10, 14, "L")); | |
| 553 | + pathList.push(createHorizontalDoubleArrow(dF1, dF1 / 2, -D / 2)); | |
| 554 | + pathList.push(createText(dF1 / 2, -D / 2 + 10, 14, "f1")); | |
| 555 | + | |
| 556 | + pathList.push(createHorizontalDoubleArrow(D, D / 2, W / 2)); | |
| 557 | + pathList.push(createText(D / 2, W / 2 + 10, 14, "D")); | |
| 558 | + | |
| 559 | + pathList.push(createHorizontalDoubleArrow(dF2, D + L + dF2 / 2, -dD2 / 2)); | |
| 560 | + pathList.push(createText(D + L + dF2 / 2, -dD2 / 2 + 10, 14, "f2")); | |
| 561 | + | |
| 562 | + pathList.push(createHorizontalDoubleArrow(dD2, D + L + dD2 / 2, W / 2)); | |
| 563 | + pathList.push(createText(D + L + dD2 / 2, W / 2 + 10, 14, "D2")); | |
| 564 | + // 竖向 | |
| 565 | + pathList.push(createDoubleArrow(W, D + L * 0.8, W / 2, -3)); | |
| 566 | + pathList.push(createText(D + L * 0.8 + 10, D + W / 2, 14, "W")); | |
| 567 | + return pathList; | |
| 568 | +} | |
| 569 | +// 内衬槽 | |
| 570 | +const createInnerLiningGroove = (width, height, offsetX, offsetY) => { | |
| 571 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 572 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height - width / 2} A ${width / 2} ${width / 2} 0 0 0 ${offsetX - width} ${offsetY + | |
| 573 | + height} L ${offsetX - width} ${offsetY}`; | |
| 574 | + svg.setAttribute("d", d); | |
| 575 | + svg.setAttribute("fill", "transparent"); | |
| 576 | + svg.setAttribute("stroke", "#333"); | |
| 577 | + svg.setAttribute("stroke-width", "1"); | |
| 578 | + return svg; | |
| 579 | +}; | |
| 580 | +// 内衬 | |
| 581 | +export function createLiningBox(slaveRowData) { | |
| 582 | + const pathList = []; | |
| 583 | + const { L, W, D, dCk, dY, dX } = slaveRowData; | |
| 584 | + const rectangles = [{ x: 0, y: 0, width: L, height: D }]; | |
| 585 | + rectangles.forEach(x => { | |
| 586 | + pathList.push(boxContent(x.width, x.height, x.x, x.y)); | |
| 587 | + }); | |
| 588 | + const width = (L - dX * 2) / (dCk - 1); | |
| 589 | + for (let index = 0; index < Number(dCk); index++) { | |
| 590 | + pathList.push(createInnerLiningGroove(3, dY, L - dX - width * index, 0)); | |
| 591 | + } | |
| 592 | + // 横向标注 | |
| 593 | + pathList.push(createHorizontalDoubleArrow(L, L / 2, D * 0.9)); | |
| 594 | + pathList.push(createText(L / 2, D * 0.9 - 10, 14, "L")); | |
| 595 | + pathList.push(createHorizontalDoubleArrow(dX, L - dX / 2, dY / 2)); | |
| 596 | + pathList.push(createText(L - dX / 2, dY / 2 + 10, 14, "x")); | |
| 597 | + // 竖向 | |
| 598 | + pathList.push(createDoubleArrow(D, dX / 2 - 5, D / 2, -3)); | |
| 599 | + pathList.push(createText(dX / 2, D / 2, 12, "D")); | |
| 600 | + return pathList; | |
| 601 | +} | |
| 602 | +const createDiagonalEdging = (width, height, offsetX, offsetY) => { | |
| 603 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 604 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + 5} ${offsetY + height} L ${offsetX + width - 5} ${offsetY + height} L${offsetX + | |
| 605 | + width} ${offsetY}`; | |
| 606 | + svg.setAttribute("d", d); | |
| 607 | + svg.setAttribute("fill", "transparent"); | |
| 608 | + svg.setAttribute("stroke", "#333"); | |
| 609 | + svg.setAttribute("stroke-width", "1"); | |
| 610 | + return svg; | |
| 611 | +}; | |
| 612 | +// 信封 | |
| 613 | +export function createEnvelope(slaveRowData) { | |
| 614 | + const pathList = []; | |
| 615 | + const { L, W, D, dF1, dS1 } = slaveRowData; | |
| 616 | + const rectangles = [{ x: 0, y: 0, width: W, height: L }]; | |
| 617 | + rectangles.forEach(x => { | |
| 618 | + pathList.push(boxContent(x.width, x.height, x.x, x.y)); | |
| 619 | + }); | |
| 620 | + pathList.push(createTrapezoid(L, 0, 0, dS1)); | |
| 621 | + pathList.push(createDiagonalEdging(W, -dF1, 0, 0)); | |
| 622 | + pathList.push(createDiagonalEdging(W, dF1, 0, L)); | |
| 623 | + pathList.push(createLineWelt(W, L, W, 0)); | |
| 624 | + | |
| 625 | + // 横向标注 | |
| 626 | + pathList.push(createHorizontalDoubleArrow(W, W / 2, L * 0.3)); | |
| 627 | + pathList.push(createText(W / 2, D * 0.3 + 10, 14, "W")); | |
| 628 | + pathList.push(createHorizontalDoubleArrow(dS1, -dS1 / 2, L / 2)); | |
| 629 | + pathList.push(createText(-dS1 / 2, L / 2 + 10, 14, "s1")); | |
| 630 | + // 竖向 | |
| 631 | + pathList.push(createDoubleArrow(L, W * 0.8, L / 2, -3)); | |
| 632 | + pathList.push(createText(W * 0.8 + 10, L / 2, 14, "L")); | |
| 633 | + pathList.push(createDoubleArrow(dF1, W * 0.7, L + dF1 / 2, -3)); | |
| 634 | + pathList.push(createText(W * 0.7 + 10, L + dF1 / 2, 14, "f1")); | |
| 635 | + return pathList; | |
| 636 | +} | |
| 637 | +// 抽屉盒 | |
| 638 | +// export function | |
| 639 | +const createSvg = d => { | |
| 640 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 641 | + svg.setAttribute("d", d); | |
| 642 | + svg.setAttribute("fill", "transparent"); | |
| 643 | + svg.setAttribute("stroke", "#7588B9"); | |
| 644 | + svg.setAttribute("stroke-width", "1"); | |
| 645 | + return svg; | |
| 646 | +}; | |
| 647 | +const createDasharraySvg = d => { | |
| 648 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 649 | + svg.setAttribute("d", d); | |
| 650 | + svg.setAttribute("fill", "transparent"); | |
| 651 | + svg.setAttribute("stroke", "#333"); | |
| 652 | + svg.setAttribute("stroke-width", "1"); | |
| 653 | + svg.setAttribute("stroke-dasharray", "4"); | |
| 654 | + return svg; | |
| 655 | +}; | |
| 656 | +// 添加虚线效果 | |
| 657 | +// 上下直线贴边 | |
| 658 | +export const createLineWeltTop = (width, height, offsetX, offsetY) => { | |
| 659 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + width} ${offsetY + height} L ${offsetX + width} ${offsetY}`; | |
| 660 | + return createSvg(d); | |
| 661 | +}; | |
| 662 | + | |
| 663 | +// 上方盒舌等腰梯形 | |
| 664 | +export const createIsoscelesTrapezoidWeltTop = (width, height, offsetX, offsetY) => { | |
| 665 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.1} ${offsetY + height} L ${offsetX + width * 0.9} ${offsetY + height} L ${offsetX + | |
| 666 | + width} ${offsetY}`; | |
| 667 | + return createSvg(d); | |
| 668 | +}; | |
| 669 | +// 盒舌梯形 | |
| 670 | +export const createTrapezoidWeltTop = (width, height, offsetX, offsetY) => { | |
| 671 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.5} ${offsetY + height} L ${offsetX + width * 0.9} ${offsetY + height} L ${offsetX + | |
| 672 | + width} ${offsetY}`; | |
| 673 | + return createSvg(d); | |
| 674 | +}; | |
| 675 | +// 盒舌折叠 | |
| 676 | +export const createFoldWeltTop = (width, height, offsetX, offsetY) => { | |
| 677 | + // 判断高度正负值 | |
| 678 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.1} ${offsetY + height * 0.5} L ${offsetX + width * 0.5} ${offsetY + height * 0.5} | |
| 679 | + L ${offsetX + width * 0.5} ${offsetY + height * 0.9} L ${offsetX + width} ${offsetY + height} L ${offsetX + width} ${offsetY} | |
| 680 | + `; | |
| 681 | + return createSvg(d); | |
| 682 | +}; | |
| 683 | +// 盒舌折叠虚线 | |
| 684 | +export const createFoldWeltTopLine = (width, height, offsetX, offsetY) => { | |
| 685 | + const d = `M ${offsetX} ${offsetY} ${offsetX + width} ${offsetY + height} `; | |
| 686 | + return createDasharraySvg(d); | |
| 687 | +}; | |
| 688 | +// 盒舌圆角 | |
| 689 | +export const createRoundedCornersWeltTop = (width, height, offsetX, offsetY) => { | |
| 690 | + const isNegative = (width > 0 && height > 0) || (width < 0 && height < 0); | |
| 691 | + | |
| 692 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.1} ${offsetY + height * 0.9} L ${offsetX + width} ${offsetY + height} L ${offsetX + | |
| 693 | + width} ${offsetY}`; | |
| 694 | + return createSvg(d); | |
| 695 | +}; | |
| 696 | +// 盒底组件 直角 | |
| 697 | +export const createRightAngleBoxBottomComponent = (width, deep, size, offsetX, offsetY) => { | |
| 698 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + size} L ${offsetX + width} ${offsetY} | |
| 699 | + L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep} ${offsetY} | |
| 700 | + L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY} | |
| 701 | + L ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY + size} L ${offsetX + | |
| 702 | + width + | |
| 703 | + deep + | |
| 704 | + width + | |
| 705 | + deep} ${offsetY}`; | |
| 706 | + return createSvg(d); | |
| 707 | +}; | |
| 708 | +// 盒底组件 5002 | |
| 709 | +export const createBoxBottomComponent1 = (width, deep, size, offsetX, offsetY) => { | |
| 710 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.2} ${offsetY + size * 0.5} L ${offsetX + width * 0.2} ${offsetY + size} L ${offsetX + | |
| 711 | + width * 0.8} ${offsetY + size} L ${offsetX + width * 0.8} ${offsetY + size * 0.5} L ${offsetX + width} ${offsetY} | |
| 712 | + L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + | |
| 713 | + size * 0.5} L ${offsetX + width + deep} ${offsetY} | |
| 714 | + L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width * 0.2} ${offsetY + size} L ${offsetX + | |
| 715 | + width + | |
| 716 | + deep + | |
| 717 | + width * 0.2} ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.8} ${offsetY + size * 0.5} L ${offsetX + | |
| 718 | + width + | |
| 719 | + deep + | |
| 720 | + width * 0.8} ${offsetY + size} | |
| 721 | + L ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY} | |
| 722 | + L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + size * 0.5} L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + | |
| 723 | + size} L ${offsetX + width + deep + width + deep} ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY} | |
| 724 | + `; | |
| 725 | + return createSvg(d); | |
| 726 | +}; | |
| 727 | +// 盒底组件 5003 | |
| 728 | +export const createBoxBottomComponent2 = (width, deep, size, offsetX, offsetY) => { | |
| 729 | + const d = `M ${offsetX} ${offsetY} | |
| 730 | + L ${offsetX + width * 0.2} ${offsetY + size} L ${offsetX + width * 0.8} ${offsetY + size} L ${offsetX + width} ${offsetY} | |
| 731 | + L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + | |
| 732 | + size * 0.5} L ${offsetX + width + deep} ${offsetY} | |
| 733 | + L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width * 0.2} ${offsetY + size} L ${offsetX + | |
| 734 | + width + | |
| 735 | + deep + | |
| 736 | + width * 0.2} ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.8} ${offsetY + size * 0.5} L ${offsetX + | |
| 737 | + width + | |
| 738 | + deep + | |
| 739 | + width * 0.8} ${offsetY + size} ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY} | |
| 740 | + L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + size * 0.5} L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + | |
| 741 | + size} L ${offsetX + width + deep + width + deep} ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY} | |
| 742 | + | |
| 743 | + `; | |
| 744 | + return createSvg(d); | |
| 745 | +}; | |
| 746 | +// 盒底组件 5004 | |
| 747 | +export const createBoxBottomComponent3 = (width, deep, size, offsetX, offsetY) => { | |
| 748 | + const d = `M ${offsetX} ${offsetY} | |
| 749 | + L ${offsetX + width * 0.05} ${offsetY + size} L ${offsetX + width * 0.25} ${offsetY + size} L ${offsetX + width * 0.5} ${offsetY + | |
| 750 | + size * 0.5} L ${offsetX + width * 0.75} ${offsetY + size} L ${offsetX + width * 0.95} ${offsetY + size} L ${offsetX + width} ${offsetY} | |
| 751 | + L ${offsetX + width + deep * 0.1} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + size} L ${offsetX + width + deep} ${offsetY} | |
| 752 | + L ${offsetX + width + deep + width * 0.05} ${offsetY + size} L ${offsetX + width + deep + width * 0.25} ${offsetY + size} L ${offsetX + | |
| 753 | + width + | |
| 754 | + deep + | |
| 755 | + width * 0.5} ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.75} ${offsetY + size} L ${offsetX + | |
| 756 | + width + | |
| 757 | + deep + | |
| 758 | + width * 0.95} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY} | |
| 759 | + L ${offsetX + width * 2 + deep + deep * 0.5} ${offsetY + size} L ${offsetX + width * 2 + deep + deep * 0.9} ${offsetY + size} L ${offsetX + | |
| 760 | + width * 2 + | |
| 761 | + deep + | |
| 762 | + deep} ${offsetY + size} L ${offsetX + width * 2 + deep * 2} ${offsetY} | |
| 763 | + `; | |
| 764 | + return createSvg(d); | |
| 765 | +}; | |
| 766 | +// 盒底组件 5005 | |
| 767 | +export const createBoxBottomComponent4 = (width, deep, size, offsetX, offsetY) => { | |
| 768 | + const d = `M ${offsetX} ${offsetY} | |
| 769 | + L ${offsetX} ${offsetY + size} L ${offsetX + width * 0.3} ${offsetY + size} L ${offsetX + width} ${offsetY} | |
| 770 | + L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep * 0.3} ${offsetY + size} L ${offsetX + width + deep} ${offsetY} | |
| 771 | + L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width * 0.3} ${offsetY + size} L ${offsetX + width * 2 + deep} ${offsetY} | |
| 772 | + L ${offsetX + width * 2 + deep} ${offsetY + size} L ${offsetX + width * 2 + deep + deep * 0.3} ${offsetY + size} L ${offsetX + | |
| 773 | + width * 2 + | |
| 774 | + deep * 2} ${offsetY} | |
| 775 | + `; | |
| 776 | + return createSvg(d); | |
| 777 | +}; // 盒底组件 5006 | |
| 778 | +export const createBoxBottomComponent5 = (width, deep, size, offsetX, offsetY) => { | |
| 779 | + const d = `M ${offsetX} ${offsetY} | |
| 780 | + A ${width * 0.5} ${width * 0.5} 0 0 0 ${offsetX + width} ${offsetY} | |
| 781 | + A ${deep * 0.5} ${deep * 0.5} 0 0 0 ${offsetX + width + deep} ${offsetY} | |
| 782 | + A ${width * 0.5} ${width * 0.5} 0 0 0 ${offsetX + width * 2 + deep} ${offsetY} | |
| 783 | + A ${deep * 0.5} ${deep * 0.5} 0 0 0 ${offsetX + width * 2 + deep * 2} ${offsetY} | |
| 784 | + `; | |
| 785 | + return createSvg(d); | |
| 786 | +}; | |
| 787 | +// 盒底组件 5007 | |
| 788 | +export const createBoxBottomComponent6 = (width, deep, size, offsetX, offsetY) => { | |
| 789 | + const d = `M ${offsetX} ${offsetY} | |
| 790 | + L ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + size} L ${offsetX + width} ${offsetY} | |
| 791 | + L ${offsetX + width + deep * 0.2} ${offsetY + size * 0.7} A ${size * 0.1} ${size * 0.1} 0 0 0 ${offsetX + width + deep * 0.2} ${offsetY + size} | |
| 792 | + L ${offsetX + width + deep * 0.8} ${offsetY + size} A ${size * 0.1} ${size * 0.1} 0 0 0 ${offsetX + width + deep * 0.8} ${offsetY + size * 0.7} | |
| 793 | + L ${offsetX + width + deep} ${offsetY} | |
| 794 | + L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + width + deep} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY} | |
| 795 | + L ${offsetX + width + deep + width + deep * 0.2} ${offsetY + size * 0.7} A ${size * 0.1} ${size * 0.1} 0 0 0 ${offsetX + | |
| 796 | + width + | |
| 797 | + deep + | |
| 798 | + width + | |
| 799 | + deep * 0.2} ${offsetY + size} | |
| 800 | + L ${offsetX + width + deep + width + deep * 0.8} ${offsetY + size} A ${size * 0.1} ${size * 0.1} 0 0 0 ${offsetX + | |
| 801 | + width + | |
| 802 | + deep + | |
| 803 | + width + | |
| 804 | + deep * 0.8} ${offsetY + size * 0.7} | |
| 805 | + L ${offsetX + width + deep + width + deep} ${offsetY} | |
| 806 | + `; | |
| 807 | + return createSvg(d); | |
| 808 | +}; | |
| 809 | +// 部件 | |
| 810 | +export const createBoxComponentNew = (width, deep, size, offsetX, offsetY) => { | |
| 811 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${offsetY + deep} L ${offsetX + width} ${offsetY} | |
| 812 | + L ${offsetX + width} ${offsetY + deep + size} L ${offsetX} ${offsetY + deep + size} L ${offsetX} ${offsetY}`; | |
| 813 | + return createSvg(d); | |
| 814 | +}; | |
| 815 | +// 部件1 | |
| 816 | +export const createBoxComponentNew1 = (width, deep, size, offsetX, offsetY) => { | |
| 817 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + size} L ${offsetX + width} ${offsetY}`; | |
| 818 | + return createSvg(d); | |
| 819 | +}; | |
| 820 | +// 部件2 | |
| 821 | +export const createBoxComponentNew2 = (width, deep, size, offsetX, offsetY) => { | |
| 822 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.4} ${offsetY} L ${offsetX + width * 0.4} ${offsetY + size} L ${offsetX + | |
| 823 | + width * 0.6} ${offsetY + size} L ${offsetX + width * 0.6} ${offsetY} L ${offsetX + width} ${offsetY}`; | |
| 824 | + return createSvg(d); | |
| 825 | +}; | |
| 826 | +// 部件3 | |
| 827 | +export const createBoxComponentNew3 = (width, deep, size, offsetX, offsetY) => { | |
| 828 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep * 2} L ${offsetX + width * 0.2} ${offsetY + deep * 2} L ${offsetX + | |
| 829 | + width * 0.2} ${offsetY + deep * 2 + size} L ${offsetX + width * 0.4} ${offsetY + deep * 2 + size} | |
| 830 | + L ${offsetX + width * 0.4} ${offsetY + deep * 2} L ${offsetX + width * 0.6} ${offsetY + deep * 2} L${offsetX + width * 0.6} ${offsetY + | |
| 831 | + deep * 2 + | |
| 832 | + size} L ${offsetX + width * 0.8} ${offsetY + deep * 2 + size} L ${offsetX + width * 0.8} ${offsetY + deep * 2} | |
| 833 | + L ${offsetX + width} ${offsetY + deep * 2} L ${offsetX + width} ${offsetY + deep} L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${offsetY + | |
| 834 | + deep} ${offsetX + width} ${offsetY}`; | |
| 835 | + return createSvg(d); | |
| 836 | +}; | |
| 837 | +// 部件4 | |
| 838 | +export const createBoxComponentNew4 = (width, deep, size, offsetX, offsetY) => { | |
| 839 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep * 2} L ${offsetX + width} ${offsetY + deep * 2} L ${offsetX + width} ${offsetY + | |
| 840 | + deep} L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${offsetY + deep} L ${offsetX + width} ${offsetY} | |
| 841 | + M ${offsetX + width * 0.3} ${offsetY + deep * 0.8} L ${offsetX + width * 0.3} ${offsetY + deep * 0.6} L ${offsetX + width * 0.7} ${offsetY + | |
| 842 | + deep * 0.6} L ${offsetX + width * 0.7} ${offsetY + deep * 0.8} L ${offsetX + width * 0.3} ${offsetY + deep * 0.8} | |
| 843 | + M ${offsetX + width * 0.3} ${offsetY + deep + deep * 0.8} L ${offsetX + width * 0.3} ${offsetY + deep + deep * 0.6} L ${offsetX + | |
| 844 | + width * 0.7} ${offsetY + deep + deep * 0.6} L ${offsetX + width * 0.7} ${offsetY + deep + deep * 0.8} L ${offsetX + width * 0.3} ${offsetY + | |
| 845 | + deep + | |
| 846 | + deep * 0.8} | |
| 847 | + `; | |
| 848 | + return createSvg(d); | |
| 849 | +}; | |
| 850 | +// 部件4的小组件 | |
| 851 | +export const createBoxComponentNew4_1 = (width, size, offsetX, offsetY) => { | |
| 852 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + size} L ${offsetX + width} ${offsetY}Z`; | |
| 853 | + return createSvg(d); | |
| 854 | +}; | |
| 855 | + | |
| 856 | +// 部件5 | |
| 857 | +export const createBoxComponentNew5 = (width, deep, size, offsetX, offsetY) => { | |
| 858 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${offsetY + deep} | |
| 859 | + L ${offsetX + width} ${offsetY} L ${offsetX + width} ${offsetY + deep} L ${offsetX + width * 0.9} ${offsetY + deep + size} | |
| 860 | + L ${offsetX + width * 0.1} ${offsetY + deep + size} L ${offsetX} ${offsetY + deep} | |
| 861 | + `; | |
| 862 | + return createSvg(d); | |
| 863 | +}; | |
| 864 | +// 贴边1 | |
| 865 | +export const createWelt = (height, size, offsetX, offsetY) => { | |
| 866 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + size * 0.6} ${offsetY} L ${offsetX + size * 0.6} ${offsetY + height} L ${offsetX + | |
| 867 | + size * 0.6} ${offsetY} L ${offsetX + size} ${offsetY + height * 0.1} L ${offsetX + size} ${offsetY + height * 0.9} L ${offsetX + | |
| 868 | + size * 0.6} ${offsetY + height} L ${offsetX} ${offsetY + height}`; | |
| 869 | + return createSvg(d); | |
| 870 | +}; | |
| 871 | +// 贴边1 | |
| 872 | +export const createWelt1 = (height, size, offsetX, offsetY) => { | |
| 873 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY + height * 0.1} L ${offsetX + size} ${offsetY + | |
| 874 | + height * 0.9} L ${offsetX} ${offsetY + height}`; | |
| 875 | + return createSvg(d); | |
| 876 | +}; | |
| 877 | +// 贴边2 | |
| 878 | +export const createWelt2 = (height, size, offsetX, offsetY) => { | |
| 879 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY} A ${size * 0.5} ${size} 0 0 1 ${offsetX + size * 0.5} ${offsetY + | |
| 880 | + size} A ${size * 0.5} ${size} 0 0 1 ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} A ${size * 0.5} ${size} 0 0 1 ${offsetX + | |
| 881 | + size * 0.5} ${offsetY + height + Math.abs(size)} A ${size * 0.5} ${size} 0 0 1 ${offsetX + size} ${offsetY + height} L ${offsetX + | |
| 882 | + size} ${offsetY} L ${offsetX + size} ${offsetY + height} L ${offsetX} ${offsetY + height}`; | |
| 883 | + return createSvg(d); | |
| 884 | +}; | |
| 885 | +export const createWelt2Right = (height, size, offsetX, offsetY) => { | |
| 886 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY} A ${size * 0.5} ${size} 0 0 0 ${offsetX + size * 0.5} ${offsetY - size} A ${size * | |
| 887 | + 0.5} ${size} 0 0 0 ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} A ${size * 0.5} ${size} 0 0 0 ${offsetX + size * 0.5} ${offsetY + | |
| 888 | + height + | |
| 889 | + Math.abs(size)} A ${size * 0.5} ${size} 0 0 0 ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${offsetY} L ${offsetX + size} ${offsetY + | |
| 890 | + height} L ${offsetX} ${offsetY + height}`; | |
| 891 | + return createSvg(d); | |
| 892 | +}; | |
| 893 | +export const createWelt3 = (height, size, offsetX, offsetY) => { | |
| 894 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${offsetY + | |
| 895 | + size * 0.3} L ${offsetX} ${offsetY + size * 0.3} L ${offsetX} ${offsetY}`; | |
| 896 | + return createSvg(d); | |
| 897 | +}; | |
| 898 | +export const createWelt3Right = (height, size, offsetX, offsetY) => { | |
| 899 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${offsetY - | |
| 900 | + size * 0.3} L ${offsetX} ${offsetY - size * 0.3} L ${offsetX} ${offsetY}`; | |
| 901 | + return createSvg(d); | |
| 902 | +}; | |
| 903 | +// 天地盒 | |
| 904 | +export const createFullTelescope = (width, height, deep, offsetX, offsetY) => { | |
| 905 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + width} ${offsetY} L ${offsetX + width} ${offsetY + height} L ${offsetX} ${offsetY + | |
| 906 | + height} L ${offsetX} ${offsetY} | |
| 907 | + L ${offsetX - deep} ${offsetY} L ${offsetX - deep} ${offsetY + height} L ${offsetX} ${offsetY + height} | |
| 908 | + L ${offsetX} ${offsetY + height + deep} L ${offsetX + width} ${offsetY + height + deep} L ${offsetX + width} ${offsetY + height} | |
| 909 | + L ${offsetX + width + deep} ${offsetY + height} L ${offsetX + width + deep} ${offsetY} L ${offsetX + width} ${offsetY} | |
| 910 | + L ${offsetX + width} ${offsetY - deep} L ${offsetX} ${offsetY - deep} L ${offsetX} ${offsetY} | |
| 911 | + `; | |
| 912 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 913 | + svg.setAttribute("d", d); | |
| 914 | + svg.setAttribute("fill", "transparent"); | |
| 915 | + svg.setAttribute("stroke", "red"); | |
| 916 | + svg.setAttribute("stroke-width", "1"); | |
| 917 | + svg.setAttribute("stroke-dasharray", "4"); // 添加虚线效果 | |
| 918 | + return svg; | |
| 919 | +}; | |
| 920 | +// 天地部件1 | |
| 921 | +export const createBoxComponentNewFull = (width, deep, size, offsetX, offsetY) => { | |
| 922 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + deep} ${offsetY} L ${offsetX + deep} ${offsetY + width} L ${offsetX + deep} ${offsetY} | |
| 923 | + L ${offsetX + deep + size} ${offsetY} L ${offsetX + deep + size} ${offsetY + width} L ${offsetX} ${offsetY + width}`; | |
| 924 | + return createSvg(d); | |
| 925 | +}; | |
| 926 | +// 天地部件2 | |
| 927 | +export const createBoxComponentNewFull1 = (width, size, offsetX, offsetY) => { | |
| 928 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY} L ${offsetX + size} ${offsetY + width} L ${offsetX} ${offsetY + width}`; | |
| 929 | + return createSvg(d); | |
| 930 | +}; | |
| 931 | +// 天地部件3 | |
| 932 | +export const createBoxComponentNewFull2 = (width, size, offsetX, offsetY) => { | |
| 933 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + width * 0.4} L ${offsetX + size} ${offsetY + width * 0.4} | |
| 934 | + L ${offsetX + size} ${offsetY + width * 0.6} L ${offsetX} ${offsetY + width * 0.6} L ${offsetX} ${offsetY + width} | |
| 935 | + `; | |
| 936 | + return createSvg(d); | |
| 937 | +}; | |
| 938 | +// 天地部件4 | |
| 939 | +export const createBoxComponentNewFul3 = (width, deep, size, offsetX, offsetY) => { | |
| 940 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + deep} ${offsetY} L ${offsetX + deep} ${offsetY + width} L ${offsetX} ${offsetY + width} | |
| 941 | + L ${offsetX + deep * 2} ${offsetY + width} L ${offsetX + deep * 2} ${offsetY + width * 0.8} L ${offsetX + deep * 2 + size} ${offsetY + width * 0.8} | |
| 942 | + L ${offsetX + deep * 2 + size} ${offsetY + width * 0.6} L ${offsetX + deep * 2} ${offsetY + width * 0.6} | |
| 943 | + L ${offsetX + deep * 2} ${offsetY + width * 0.4} L ${offsetX + deep * 2 + size} ${offsetY + width * 0.4} | |
| 944 | + L ${offsetX + deep * 2 + size} ${offsetY + width * 0.2} L ${offsetX + deep * 2} ${offsetY + width * 0.2} | |
| 945 | + L ${offsetX + deep * 2} ${offsetY} L ${offsetX} ${offsetY} | |
| 946 | + `; | |
| 947 | + return createSvg(d); | |
| 948 | +}; | |
| 949 | +// 天地部件4 | |
| 950 | +export const createBoxComponentNewFul4 = (width, deep, size, offsetX, offsetY) => { | |
| 951 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + deep * 2} ${offsetY} L ${offsetX + deep * 2} ${offsetY + width} L ${offsetX + deep} ${offsetY + | |
| 952 | + width} L ${offsetX + deep} ${offsetY} L ${offsetX + deep} ${offsetY + width} L ${offsetX} ${offsetY + width} | |
| 953 | + M ${offsetX + deep * 0.8} ${offsetY + width * 0.3} L ${offsetX + deep * 0.6} ${offsetY + width * 0.3} L ${offsetX + deep * 0.6} ${offsetY + | |
| 954 | + width * 0.7} L ${offsetX + deep * 0.8} ${offsetY + width * 0.7} L ${offsetX + deep * 0.8} ${offsetY + width * 0.3} | |
| 955 | + M ${offsetX + deep + deep * 0.8} ${offsetY + width * 0.3} L ${offsetX + deep + deep * 0.6} ${offsetY + width * 0.3} L ${offsetX + | |
| 956 | + deep + | |
| 957 | + deep * 0.6} ${offsetY + width * 0.7} L ${offsetX + deep + deep * 0.8} ${offsetY + width * 0.7} L ${offsetX + deep + deep * 0.8} ${offsetY + | |
| 958 | + width * 0.3} | |
| 959 | + `; | |
| 960 | + return createSvg(d); | |
| 961 | +}; | |
| 962 | +// 部件5 | |
| 963 | +export const createBoxComponentNewFul5 = (width, deep, size, offsetX, offsetY) => { | |
| 964 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + deep } ${offsetY} L ${offsetX + deep } ${offsetY + width} | |
| 965 | + L ${offsetX + deep } ${offsetY} L ${offsetX + deep + size} ${offsetY + width * 0.1} L${offsetX + deep+ size} ${offsetY + width * 0.9} | |
| 966 | + L ${offsetX + deep } ${offsetY + width} L ${offsetX} ${offsetY + width} | |
| 967 | + `; | |
| 968 | + return createSvg(d); | |
| 969 | +}; | |
| 0 | 970 | \ No newline at end of file | ... | ... |
src/components/Common/BoxDesign/index.css
0 → 100644
src/components/Common/BoxDesign/index.js
0 → 100644
| 1 | +/* eslint-disable */ | |
| 2 | +import React, { useRef, useState, useEffect } from "react"; | |
| 3 | +import style from "./index.less"; | |
| 4 | +import { | |
| 5 | + createEnvelope, | |
| 6 | + createAirplaneBox, | |
| 7 | + createDeductionBox, | |
| 8 | + createTote, | |
| 9 | + createBoxs, | |
| 10 | + createHeavenBox, | |
| 11 | + createDiscBox, | |
| 12 | + createShowBox, | |
| 13 | + createLiningBox, | |
| 14 | +} from "./createAirplaneBox"; | |
| 15 | +const DynamicSVG = props => { | |
| 16 | + const svgRef = useRef(null); | |
| 17 | + const svgContainerRef = useRef(null); | |
| 18 | + const [boxKey, setBoxKey] = useState(new Date().getTime()); | |
| 19 | + const [currentTranslateX, setCurrentTranslateX] = useState(0); | |
| 20 | + const [currentTranslateY, setCurrentTranslateY] = useState(0); | |
| 21 | + const [currentScale, setCurrentScale] = useState(1); | |
| 22 | + const [positionInfo, setPositionInfo] = useState({ x: 0, y: 0, width: 0, height: 0 }); | |
| 23 | + // 先默认为抵扣盒 | |
| 24 | + const { boxModel } = props; //盒型参数 | |
| 25 | + const { masterData, slaveData, selectedNode } = props.state; // 主数据 | |
| 26 | + const slaveDataDetail = slaveData?.find(item => item.sTreeNodeName === selectedNode.showName && item.sBoxModel === boxModel); | |
| 27 | + const width = Number(masterData?.dLength); | |
| 28 | + const height = Number(masterData?.dHeight); | |
| 29 | + const deep = Number(masterData?.dWidth); | |
| 30 | + // 确认是竖向排列还是横向排列 | |
| 31 | + const L = masterData?.dLength; | |
| 32 | + const W = masterData?.dWidth; | |
| 33 | + const H = masterData?.dHeight; | |
| 34 | + const D = masterData?.dHeight; | |
| 35 | + const variables = { | |
| 36 | + L, | |
| 37 | + W, | |
| 38 | + H, | |
| 39 | + D, | |
| 40 | + ...slaveDataDetail, | |
| 41 | + }; | |
| 42 | + useEffect( | |
| 43 | + () => { | |
| 44 | + const svg = svgRef.current; | |
| 45 | + svg.innerHTML = ""; | |
| 46 | + initSVG(); | |
| 47 | + // 处理 | |
| 48 | + if (slaveDataDetail?.sName.includes("扣抵盒")) { | |
| 49 | + const c = slaveDataDetail?.dc; | |
| 50 | + const g = slaveDataDetail?.dg; | |
| 51 | + const a = slaveDataDetail?.da; | |
| 52 | + createBox(width, height, deep, c, g, a); | |
| 53 | + } else if (slaveDataDetail?.sName.includes("飞机盒")) { | |
| 54 | + const list = createAirplaneBox(variables); | |
| 55 | + if (list && list.length) { | |
| 56 | + const leftWidth = (evaluateFormula(slaveDataDetail.sLengthFormula, variables) + slaveDataDetail.dTd * 2 - L) / 2; | |
| 57 | + initBox(list, leftWidth + 9, slaveDataDetail.dD3, slaveDataDetail.dTd * 2, 0); | |
| 58 | + } | |
| 59 | + } else if (slaveDataDetail?.sName.includes("自动扣底盒")) { | |
| 60 | + const top = slaveDataDetail.dc + W; | |
| 61 | + const list = createDeductionBox(variables); | |
| 62 | + if (list && list.length) { | |
| 63 | + initBox(list, 0, top, 0, 0); | |
| 64 | + } | |
| 65 | + } else if (slaveDataDetail?.sName.includes("手提袋")) { | |
| 66 | + const list = createTote(variables); | |
| 67 | + if (list && list.length) { | |
| 68 | + initBox(list, slaveDataDetail.dF, slaveDataDetail.dF1, 0, 0); | |
| 69 | + } | |
| 70 | + } else if (slaveDataDetail?.sName.includes("普通盒(纸箱)")) { | |
| 71 | + const list = createBoxs(variables); | |
| 72 | + if (list && list.length) { | |
| 73 | + initBox(list, slaveDataDetail.dG, slaveDataDetail.dF, 0, 0); | |
| 74 | + } | |
| 75 | + } else if (slaveDataDetail?.sName.includes("天地盖")) { | |
| 76 | + const list = createHeavenBox(variables); | |
| 77 | + if (list && list.length) { | |
| 78 | + initBox(list, D, slaveDataDetail.dF1 + 2, 4, 4); | |
| 79 | + } | |
| 80 | + } else if (slaveDataDetail?.sName.includes("盘式盒")) { | |
| 81 | + const list = createDiscBox(variables); | |
| 82 | + if (list && list.length) { | |
| 83 | + const left = slaveDataDetail?.dTd + slaveDataDetail?.dD1 + slaveDataDetail?.dDj + D + 2; | |
| 84 | + initBox(list, left, 0, 4, 0); | |
| 85 | + } | |
| 86 | + } else if (slaveDataDetail?.sName.includes("展示盒")) { | |
| 87 | + const list = createShowBox(variables); | |
| 88 | + if (list && list.length) { | |
| 89 | + initBox(list, 0, slaveDataDetail?.dD2, 0, 0); | |
| 90 | + } | |
| 91 | + } else if (slaveDataDetail?.sName.includes("内衬")) { | |
| 92 | + const list = createLiningBox(variables); | |
| 93 | + if (list && list.length) { | |
| 94 | + initBox(list, 0, 0, 0, 0); | |
| 95 | + } | |
| 96 | + } else if (slaveDataDetail?.sName.includes("信封")) { | |
| 97 | + const list = createEnvelope(variables); | |
| 98 | + if (list && list.length) { | |
| 99 | + initBox(list, slaveDataDetail?.dS1, slaveDataDetail?.dF1, 0, 0); | |
| 100 | + } | |
| 101 | + } | |
| 102 | + }, | |
| 103 | + [slaveDataDetail] | |
| 104 | + ); | |
| 105 | + // 动态计算公式值 | |
| 106 | + const evaluateFormula = (formula, variables) => { | |
| 107 | + if (!formula) return 0; // 如果公式为空，返回0 | |
| 108 | + try { | |
| 109 | + // 提取公式中的变量名 | |
| 110 | + const variableNames = formula.match(/\b[a-zA-Z_][a-zA-Z0-9_]*\b/g) || []; | |
| 111 | + // 构建函数参数 | |
| 112 | + const params = variableNames.join(","); | |
| 113 | + // 替换公式中的变量为实际值 | |
| 114 | + const func = new Function(params, `return ${formula}`); | |
| 115 | + // 提取变量值 | |
| 116 | + const args = variableNames.map(name => Number(variables[name]) || 0); | |
| 117 | + // 执行函数并返回结果 | |
| 118 | + return func(...args); | |
| 119 | + } catch (error) { | |
| 120 | + console.error("公式计算错误:", error); | |
| 121 | + return 0; | |
| 122 | + } | |
| 123 | + }; | |
| 124 | + // 盒身 | |
| 125 | + const createPathElement = (x, y, width, height, id, wrapperId) => { | |
| 126 | + const d = `M ${x} ${y} L ${x} ${y + height} L ${x + width} ${y + height} L ${x + width} ${y} L ${x} ${y} Z`; | |
| 127 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 128 | + svg.setAttribute("d", d); | |
| 129 | + svg.setAttribute("fill", "transparent"); | |
| 130 | + svg.setAttribute("stroke", "#333"); | |
| 131 | + svg.setAttribute("stroke-width", "1"); | |
| 132 | + svg.setAttribute("stroke-dasharray", "3.8"); // 添加虚线效果 | |
| 133 | + return svg; | |
| 134 | + }; | |
| 135 | + // 左上部件 | |
| 136 | + const createDynamicTop = (width, height, deep, offsetX, offsetY, size) => { | |
| 137 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 138 | + // 动态生成路径，基于输入参数 | |
| 139 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY - deep - size + 2} A 2 2 0 0 1 ${offsetX + 2} ${offsetY - deep - size} | |
| 140 | + L ${offsetX + width - 2} ${offsetY - deep - size} A 2 2 0 0 1 ${offsetX + width} ${offsetY - deep - size + 2} L ${offsetX + width} ${offsetY - | |
| 141 | + deep} | |
| 142 | + L ${offsetX} ${offsetY - deep} L ${offsetX + width} ${offsetY - deep} L ${offsetX + width} ${offsetY} `; | |
| 143 | + svg.setAttribute("d", d); | |
| 144 | + svg.setAttribute("fill", "transparent"); | |
| 145 | + svg.setAttribute("stroke", "#333"); | |
| 146 | + svg.setAttribute("stroke-width", "1"); | |
| 147 | + return svg; | |
| 148 | + }; | |
| 149 | + // 左边贴边 | |
| 150 | + const createTrapezoid = (width, height, offsetX, offsetY, size) => { | |
| 151 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 152 | + const d = `M ${offsetX} ${offsetY} L ${offsetX - size} ${offsetY + 2} L ${offsetX - size} ${offsetY + height - 2} L ${offsetX} ${offsetY + | |
| 153 | + height}`; | |
| 154 | + svg.setAttribute("d", d); | |
| 155 | + svg.setAttribute("fill", "transparent"); | |
| 156 | + svg.setAttribute("stroke", "#333"); | |
| 157 | + svg.setAttribute("stroke-width", "1"); | |
| 158 | + return svg; | |
| 159 | + }; | |
| 160 | + // 左上盒舌 | |
| 161 | + const createTopTongue = (width, height, deep, offsetX, offsetY, size) => { | |
| 162 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 163 | + const d = `M ${offsetX + width} ${offsetY} L ${offsetX + width + 2} ${offsetY - 2} L ${offsetX + width + 2} ${offsetY - size - 2} | |
| 164 | + L ${offsetX + width + deep - 5} ${offsetY - size - 2} A 2 2 0 0 1 ${offsetX + width + deep - 3} ${offsetY - size} L ${offsetX + | |
| 165 | + width + | |
| 166 | + deep} ${offsetY}`; | |
| 167 | + svg.setAttribute("d", d); | |
| 168 | + svg.setAttribute("fill", "transparent"); | |
| 169 | + svg.setAttribute("stroke", "#333"); | |
| 170 | + svg.setAttribute("stroke-width", "1"); | |
| 171 | + return svg; | |
| 172 | + }; | |
| 173 | + // 右上盒舌 | |
| 174 | + const createTopTongueRight = (width, height, deep, offsetX, offsetY, size) => { | |
| 175 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 176 | + // "M 130 0 L 133 87 A 2 2 0 0 1 135 85 L 158 85 L 158 98 L 160 0 Z" | |
| 177 | + const d = `M ${offsetX} ${offsetY} L ${offsetX + 3} ${offsetY - size + 2} A 2 2 0 0 1 ${offsetX + 5} ${offsetY - size} | |
| 178 | + L ${offsetX + deep - 2} ${offsetY - size} L ${offsetX + deep - 2} ${offsetY - 2} L ${offsetX + deep} ${offsetY} `; | |
| 179 | + svg.setAttribute("d", d); | |
| 180 | + svg.setAttribute("fill", "transparent"); | |
| 181 | + svg.setAttribute("stroke", "#333"); | |
| 182 | + svg.setAttribute("stroke-width", "1"); | |
| 183 | + return svg; | |
| 184 | + }; | |
| 185 | + // 右下盒舌 | |
| 186 | + const createBottomTongueRight = (width, height, deep, offsetX, offsetY, size) => { | |
| 187 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 188 | + // M 130 160 L 132 162 L 132 175 L 156 175 A 2 2 0 0 0 158 173 L 160 160 Z | |
| 189 | + const d = `M ${offsetX} ${offsetY + height} L ${offsetX + 2} ${offsetY + height + 2} L ${offsetX + 2} ${offsetY + height + size} | |
| 190 | + L ${offsetX + deep - 4} ${offsetY + height + size} A 2 2 0 0 0 ${offsetX + deep - 2} ${offsetY + height + size - 2} L ${offsetX + | |
| 191 | + deep} ${offsetY + height} `; | |
| 192 | + svg.setAttribute("d", d); | |
| 193 | + svg.setAttribute("fill", "transparent"); | |
| 194 | + svg.setAttribute("stroke", "#333"); | |
| 195 | + svg.setAttribute("stroke-width", "1"); | |
| 196 | + return svg; | |
| 197 | + }; | |
| 198 | + // 右下部件 | |
| 199 | + const createBottom = (width, height, deep, offsetX, offsetY, size) => { | |
| 200 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 201 | + // "M 90 160 L 90 198 A 2 2 0 0 0 92 200 L 128 200 A 2 2 0 0 0 130 198 L 130 197 L 90 197 L 130 197 L 130 160 Z " | |
| 202 | + const d = `M ${offsetX} ${offsetY + height} L ${offsetX} ${offsetY + height + deep + size - 2} A 2 2 0 0 0 ${offsetX + 2} ${offsetY + | |
| 203 | + height + | |
| 204 | + deep + | |
| 205 | + size} | |
| 206 | + L ${offsetX + width - 2} ${offsetY + height + deep + size} A 2 2 0 0 0 ${offsetX + width} ${offsetY + height + deep + size - 2} | |
| 207 | + L ${offsetX + width} ${offsetY + height + deep} L${offsetX} ${offsetY + height + deep} L${offsetX + width} ${offsetY + | |
| 208 | + height + | |
| 209 | + deep} L ${offsetX + width} ${offsetY + height} | |
| 210 | + `; | |
| 211 | + svg.setAttribute("d", d); | |
| 212 | + svg.setAttribute("fill", "transparent"); | |
| 213 | + svg.setAttribute("stroke", "#333"); | |
| 214 | + svg.setAttribute("stroke-width", "1"); | |
| 215 | + return svg; | |
| 216 | + }; | |
| 217 | + // 左下盒舌 | |
| 218 | + const createBottomTongue = (width, height, deep, offsetX, offsetY, size) => { | |
| 219 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 220 | + // M 90 160 L 88 162 L 88 175 L 64 175 A 2 2 0 0 1 62 173 L 60 160 Z | |
| 221 | + const d = `M ${offsetX} ${offsetY + height} L ${offsetX - 2} ${offsetY + height + 2} L ${offsetX - 2} ${offsetY + height + size} | |
| 222 | + L ${offsetX - deep + 4} ${offsetY + height + size} A 2 2 0 0 1 ${offsetX - deep + 2} ${offsetY + height + size - 2} L ${offsetX - | |
| 223 | + deep} ${offsetY + height} `; | |
| 224 | + svg.setAttribute("d", d); | |
| 225 | + svg.setAttribute("fill", "transparent"); | |
| 226 | + svg.setAttribute("stroke", "#333"); | |
| 227 | + svg.setAttribute("stroke-width", "1"); | |
| 228 | + return svg; | |
| 229 | + }; | |
| 230 | + // 标注 | |
| 231 | + const createArrowWithText = (width, height, deep, offsetX, offsetY, size) => { | |
| 232 | + // 定义箭头标记 | |
| 233 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 234 | + const d = `M ${offsetX + width / 2} ${offsetY - deep + 15} L ${offsetX + width / 2} ${offsetY - deep + 5} L ${offsetX + width / 2 - 5} ${offsetY - | |
| 235 | + deep + | |
| 236 | + 5} | |
| 237 | + L${offsetX + width / 2} ${offsetY - deep} L ${offsetX + width / 2 + 5} ${offsetY - deep + 5} L${offsetX + width / 2} ${offsetY - deep + 5}`; | |
| 238 | + svg.setAttribute("d", d); | |
| 239 | + svg.setAttribute("fill", "#333"); | |
| 240 | + svg.setAttribute("stroke", "#333"); | |
| 241 | + svg.setAttribute("stroke-width", "1"); | |
| 242 | + | |
| 243 | + return svg; | |
| 244 | + }; | |
| 245 | + // 添加标注 | |
| 246 | + const createText = (offsetX, offsetY, size, textContent) => { | |
| 247 | + const text = document.createElementNS("http://www.w3.org/2000/svg", "text"); | |
| 248 | + text.setAttribute("x", offsetX); // 文字水平居中 | |
| 249 | + text.setAttribute("y", offsetY); // 文字垂直居中 | |
| 250 | + text.setAttribute("text-anchor", "middle"); // 文字水平居中 | |
| 251 | + text.setAttribute("dominant-baseline", "middle"); // 文字垂直居中 | |
| 252 | + text.setAttribute("fill", "#333"); // 文字颜色 | |
| 253 | + text.setAttribute("font-size", size); // 文字大小 | |
| 254 | + text.setAttribute("font-weight", "bold"); // 文字加粗 | |
| 255 | + text.textContent = textContent || "Text"; // 默认文字内容 | |
| 256 | + return text; | |
| 257 | + }; | |
| 258 | + // 竖向双箭头 | |
| 259 | + const createDoubleArrow = (height, offsetX, offsetY, Y) => { | |
| 260 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 261 | + const d = `M ${offsetX} ${offsetY} L ${offsetX} ${height - 5} L ${offsetX + 5} ${height - 5} L ${offsetX} ${height} L ${offsetX - 5} ${height - 5} | |
| 262 | + L ${offsetX} ${height - 5} L ${offsetX} ${Y + 5} L ${offsetX + 5} ${Y + 5} L ${offsetX} ${Y} L ${offsetX - 5} ${Y + 5} L ${offsetX} ${Y + 5}`; | |
| 263 | + svg.setAttribute("d", d); | |
| 264 | + svg.setAttribute("fill", "#333"); | |
| 265 | + svg.setAttribute("stroke", "#333"); | |
| 266 | + svg.setAttribute("stroke-width", "1"); | |
| 267 | + | |
| 268 | + return svg; | |
| 269 | + }; | |
| 270 | + // 横向双箭头 | |
| 271 | + const createHorizontalDoubleArrow = (width, offsetX, offsetY) => { | |
| 272 | + const svg = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 273 | + const d = `M ${offsetX} ${offsetY} L ${offsetX - width / 2 + 5} ${offsetY} L ${offsetX - width / 2 + 5} ${offsetY - 5} L ${offsetX - | |
| 274 | + width / 2} ${offsetY} | |
| 275 | + L ${offsetX - width / 2 + 5} ${offsetY + 5} L ${offsetX - width / 2 + 5} ${offsetY} L ${offsetX + width / 2 - 5} ${offsetY} L ${offsetX + | |
| 276 | + width / 2 - | |
| 277 | + 5} ${offsetY + 5} L ${offsetX + width / 2} ${offsetY} | |
| 278 | + L ${offsetX + width / 2 - 5} ${offsetY - 5} L ${offsetX + width / 2 - 5} ${offsetY}`; | |
| 279 | + svg.setAttribute("d", d); | |
| 280 | + svg.setAttribute("fill", "#333"); | |
| 281 | + svg.setAttribute("stroke", "#333"); | |
| 282 | + svg.setAttribute("stroke-width", "1"); | |
| 283 | + return svg; | |
| 284 | + }; | |
| 285 | + // 扣抵盒 | |
| 286 | + const createBox = (width, height, deep, c, g, a) => { | |
| 287 | + let pathList = []; | |
| 288 | + // 四面盒身 | |
| 289 | + const rectangles = [ | |
| 290 | + { x: 0, y: 0, width, height, id: "ac_path_c795a39_2oj", wrapperId: "3476" }, | |
| 291 | + { x: 0 + width, y: 0, width: deep, height, id: "ac_path_c795a39_2on", wrapperId: "3480" }, | |
| 292 | + { x: 0 + width + deep, y: 0, width, height, id: "ac_path_c795a39_2or", wrapperId: "3484" }, | |
| 293 | + { x: 0 + width * 2 + deep, y: 0, width: deep, height, id: "ac_path_c795a39_2ov", wrapperId: "3488" }, | |
| 294 | + ]; | |
| 295 | + const svg = svgRef.current; | |
| 296 | + // 添加梯形 | |
| 297 | + pathList.push(createTrapezoid(width, height, 0, 0, g)); | |
| 298 | + pathList.push(createDynamicTop(width, height, deep, 0, 0, c)); | |
| 299 | + pathList.push(createTopTongue(width, height, deep, 0, 0, a)); | |
| 300 | + pathList.push(createTopTongueRight(width, height, deep, width * 2 + deep + 0, 0, a)); | |
| 301 | + pathList.push(createBottomTongueRight(width, height, deep, width * 2 + deep + 0, 0, a)); | |
| 302 | + pathList.push(createBottom(width, height, deep, 0 + deep + width, 0, c)); // 是否下舌头 | |
| 303 | + pathList.push(createBottomTongue(width, height, deep, 0 + deep + width, 0, a)); | |
| 304 | + // 上边部件贴位标注 | |
| 305 | + pathList.push(createArrowWithText(width, height, deep, 0, 0, a)); | |
| 306 | + pathList.push(createDoubleArrow(height, width + deep + width / 2 - 20, height / 2, 0)); | |
| 307 | + pathList.push(createDoubleArrow(a + height, width * 2 + deep + deep / 2, height + a / 2, height)); | |
| 308 | + pathList.push(createHorizontalDoubleArrow(width, width + deep + width / 2, height / 2 - 20)); | |
| 309 | + pathList.push(createHorizontalDoubleArrow(deep, width + deep / 2, height / 2)); | |
| 310 | + pathList.push(createText(width / 2 + 5, -deep - 5, 14, "c")); | |
| 311 | + pathList.push(createText(width * 2 + deep + deep / 2 + 10, height + a / 2, 14, "a")); | |
| 312 | + pathList.push(createText(-g / 2, height / 2, 14, "g")); | |
| 313 | + pathList.push(createText(width + deep + width / 2 - 10, height / 2, 14, "D")); | |
| 314 | + pathList.push(createText(width + deep + width / 2 + 10, height / 2 - 10, 14, "L")); | |
| 315 | + pathList.push(createText(width + deep / 2, height / 2 + 10, 14, "W")); | |
| 316 | + pathList.forEach(item => { | |
| 317 | + svg.appendChild(item); | |
| 318 | + }); | |
| 319 | + const viewBoxWidth = width * 2 + deep * 2 + g + 2; | |
| 320 | + const viewBoxHeight = height + (deep + c) * 2 + 2; | |
| 321 | + // 更新 SVG 的 viewBox 和尺寸 | |
| 322 | + const svgContainer = svgContainerRef.current; | |
| 323 | + svg.setAttribute("viewBox", `${-g - 1} ${-(deep + c) - 1} ${viewBoxWidth} ${viewBoxHeight}`); | |
| 324 | + svg.setAttribute("width", `${viewBoxWidth}px`); | |
| 325 | + svg.setAttribute("height", `${viewBoxHeight}px`); | |
| 326 | + svgContainer.style.width = `${viewBoxWidth}px`; | |
| 327 | + svgContainer.style.height = `${viewBoxHeight}px`; | |
| 328 | + rectangles.forEach(rect => { | |
| 329 | + const pathElement = createPathElement(rect.x, rect.y, rect.width, rect.height, rect.id, rect.wrapperId); | |
| 330 | + svg.appendChild(pathElement); | |
| 331 | + }); | |
| 332 | + }; | |
| 333 | + const initBox = (list, g, c, width, height) => { | |
| 334 | + const svg = svgRef.current; | |
| 335 | + list.forEach(item => { | |
| 336 | + svg.appendChild(item); | |
| 337 | + }); | |
| 338 | + const viewBoxWidth = evaluateFormula(slaveDataDetail.sLengthFormula, variables) + 1 + width; | |
| 339 | + const viewBoxHeight = evaluateFormula(slaveDataDetail.sWidthFormula, variables) + height; | |
| 340 | + // 更新 SVG 的 viewBox 和尺寸 | |
| 341 | + const svgContainer = svgContainerRef.current; | |
| 342 | + svg.setAttribute("viewBox", `${-g} ${-c} ${viewBoxWidth} ${viewBoxHeight}`); | |
| 343 | + svg.setAttribute("width", `${viewBoxWidth}px`); | |
| 344 | + svg.setAttribute("height", `${viewBoxHeight}px`); | |
| 345 | + svgContainer.style.width = `${viewBoxWidth}px`; | |
| 346 | + svgContainer.style.height = `${viewBoxHeight}px`; | |
| 347 | + }; | |
| 348 | + const initSVG = () => { | |
| 349 | + const svg = svgRef.current; | |
| 350 | + svg.style.transform = `translate(${currentTranslateX}px, ${currentTranslateY}px) scale(${currentScale})`; | |
| 351 | + }; | |
| 352 | + | |
| 353 | + const moveSVG = (translateX, translateY) => { | |
| 354 | + setCurrentTranslateX(currentTranslateX + translateX); | |
| 355 | + setCurrentTranslateY(currentTranslateY + translateY); | |
| 356 | + }; | |
| 357 | + | |
| 358 | + const zoomSVG = scaleChange => { | |
| 359 | + const newScale = currentScale + scaleChange; | |
| 360 | + setCurrentScale(Math.max(0.5, Math.min(3, newScale))); | |
| 361 | + }; | |
| 362 | + | |
| 363 | + const updateSVGTransform = () => { | |
| 364 | + const svg = svgRef.current; | |
| 365 | + svg.style.transform = `translate(${currentTranslateX}px, ${currentTranslateY}px) scale(${currentScale})`; | |
| 366 | + updatePositionInfo(); | |
| 367 | + }; | |
| 368 | + | |
| 369 | + const updatePositionInfo = () => { | |
| 370 | + if (svgRef.current) { | |
| 371 | + const rect = svgRef.current.getBoundingClientRect(); | |
| 372 | + setPositionInfo({ | |
| 373 | + x: rect.x, | |
| 374 | + y: rect.y, | |
| 375 | + width: rect.width, | |
| 376 | + height: rect.height, | |
| 377 | + }); | |
| 378 | + } | |
| 379 | + }; | |
| 380 | + | |
| 381 | + useEffect( | |
| 382 | + () => { | |
| 383 | + updateSVGTransform(); | |
| 384 | + }, | |
| 385 | + [currentTranslateX, currentTranslateY, currentScale] | |
| 386 | + ); | |
| 387 | + | |
| 388 | + // 当 SVG 的位置或大小变化时，更新位置信息 | |
| 389 | + useEffect( | |
| 390 | + () => { | |
| 391 | + updatePositionInfo(); | |
| 392 | + }, | |
| 393 | + [currentTranslateX, currentTranslateY, currentScale, width, height, deep] | |
| 394 | + ); | |
| 395 | + | |
| 396 | + return ( | |
| 397 | + // <div > | |
| 398 | + | |
| 399 | + // {/* <div> | |
| 400 | + // <label htmlFor="height">Height:</label> | |
| 401 | + // <input | |
| 402 | + // type="number" | |
| 403 | + // id="height" | |
| 404 | + // value={height} | |
| 405 | + // min="10" | |
| 406 | + // max="0" | |
| 407 | + // onChange={(e) => {setHeight(parseInt(e.target.value, 10));setBoxKey(new Date().getTime())}} | |
| 408 | + // /> | |
| 409 | + // <label htmlFor="width">Width:</label> | |
| 410 | + // <input | |
| 411 | + // type="number" | |
| 412 | + // id="width" | |
| 413 | + // value={width} | |
| 414 | + // min="10" | |
| 415 | + // max="400" | |
| 416 | + // onChange={(e) => {setWidth(parseInt(e.target.value, 10));setBoxKey(new Date().getTime())}} | |
| 417 | + // /> | |
| 418 | + // <label htmlFor="deep">Deep:</label> | |
| 419 | + // <input | |
| 420 | + // type="number" | |
| 421 | + // id="deep" | |
| 422 | + // value={deep} | |
| 423 | + // min="10" | |
| 424 | + // max="400" | |
| 425 | + // onChange={(e) => {setDeep(parseInt(e.target.value, 10));setBoxKey(new Date().getTime())}} | |
| 426 | + // /> | |
| 427 | + // <label htmlFor="c">C:</label> | |
| 428 | + // <input | |
| 429 | + // type="number" | |
| 430 | + // id="c" | |
| 431 | + // value={c} | |
| 432 | + // min="10" | |
| 433 | + // max="400" | |
| 434 | + // onChange={(e) => setC(parseInt(e.target.value, 10))} | |
| 435 | + // /> | |
| 436 | + // <label htmlFor="deep">g:</label> | |
| 437 | + // <input | |
| 438 | + // type="number" | |
| 439 | + // id="g" | |
| 440 | + // value={g} | |
| 441 | + // min="10" | |
| 442 | + // max="400" | |
| 443 | + // onChange={(e) => setG(parseInt(e.target.value, 10))} | |
| 444 | + // /> | |
| 445 | + // <label htmlFor="a">a:</label> | |
| 446 | + // <input | |
| 447 | + // type="number" | |
| 448 | + // id="a" | |
| 449 | + // value={a} | |
| 450 | + // min="10" | |
| 451 | + // max="400" | |
| 452 | + // onChange={(e) => setA(parseInt(e.target.value, 10))} | |
| 453 | + // /> | |
| 454 | + // </div> */} | |
| 455 | + | |
| 456 | + // </div> | |
| 457 | + <div id="svgContainer" key={boxKey} className={style.svgBox} ref={svgContainerRef}> | |
| 458 | + <svg className={style.svgContainer} id="dynamicSvg" viewBox="0 0 0 0" xmlns="http://www.w3.org/2000/svg" ref={svgRef} /> | |
| 459 | + </div> | |
| 460 | + ); | |
| 461 | +}; | |
| 462 | + | |
| 463 | +export default DynamicSVG; | ... | ... |
src/components/Common/BoxDesign/index.less
0 → 100644
src/components/Common/BoxDesignCompontent/index.css
0 → 100644
| 1 | +.boxBody { | |
| 2 | + width: 100%; | |
| 3 | + height: 100%; | |
| 4 | + position: relative; | |
| 5 | + padding: 10px; | |
| 6 | +} | |
| 7 | +.boxBody .boxTop { | |
| 8 | + display: flex; | |
| 9 | + align-items: center; | |
| 10 | + justify-content: space-around; | |
| 11 | + width: 640px; | |
| 12 | + height: 100px; | |
| 13 | + margin: 0 auto; | |
| 14 | +} | |
| 15 | +.boxBody .boxTop .boxFlex { | |
| 16 | + width: 200px; | |
| 17 | + display: flex; | |
| 18 | + align-items: center; | |
| 19 | + flex-wrap: wrap; | |
| 20 | + flex-direction: column; | |
| 21 | + position: relative; | |
| 22 | +} | |
| 23 | +.boxBody .boxLeft { | |
| 24 | + width: 180px; | |
| 25 | + height: 320px; | |
| 26 | + display: flex; | |
| 27 | + flex-wrap: wrap; | |
| 28 | + flex-direction: column; | |
| 29 | + position: absolute; | |
| 30 | + justify-content: space-between; | |
| 31 | + left: 10px; | |
| 32 | + top: 130px; | |
| 33 | + text-align: center; | |
| 34 | +} | |
| 35 | +.boxBody .boxRight { | |
| 36 | + width: 180px; | |
| 37 | + height: 320px; | |
| 38 | + display: flex; | |
| 39 | + flex-wrap: wrap; | |
| 40 | + justify-content: space-between; | |
| 41 | + flex-direction: column; | |
| 42 | + position: absolute; | |
| 43 | + right: 10px; | |
| 44 | + top: 130px; | |
| 45 | + text-align: center; | |
| 46 | +} | |
| 47 | +.boxBody .boxBottom { | |
| 48 | + width: 500px; | |
| 49 | + height: 380px; | |
| 50 | + position: absolute; | |
| 51 | + top: 130px; | |
| 52 | + left: 50%; | |
| 53 | + transform: translateX(-50%); | |
| 54 | +} | |
| 55 | +.boxBody .boxBottom .svgBox { | |
| 56 | + width: 100%; | |
| 57 | + height: 250px; | |
| 58 | + background-color: #9AFF9A; | |
| 59 | +} | |
| 60 | +.boxBody .boxBottom .content { | |
| 61 | + width: 100%; | |
| 62 | + height: 130px; | |
| 63 | +} | |
| 64 | +.boxBody .boxBottom .content :global .ant-select-selector { | |
| 65 | + color: #333; | |
| 66 | +} | |
| 67 | +.boxBody .boxBottom .content :global .ant-select-selection-item { | |
| 68 | + color: #333 !important; | |
| 69 | + /* 选择框文字颜色 */ | |
| 70 | + padding-left: 50px; | |
| 71 | + line-height: 40px; | |
| 72 | +} | |
| 73 | +.boxBody .boxTitle { | |
| 74 | + background-color: #3399ff; | |
| 75 | + color: #fff; | |
| 76 | + width: 180px; | |
| 77 | + height: 20px; | |
| 78 | + line-height: 20px; | |
| 79 | + text-align: center; | |
| 80 | +} | |
| 81 | +.boxBody :global .mySelects .ant-select-selector { | |
| 82 | + background-color: #99CCFF !important; | |
| 83 | + /* 选择框背景色 */ | |
| 84 | + height: 40px !important; | |
| 85 | + /* 选择框高度 */ | |
| 86 | +} | |
| 87 | +.boxBody :global .mySelects .ant-select-selection-item { | |
| 88 | + color: transparent !important; | |
| 89 | + /* 选择框文字颜色 */ | |
| 90 | +} | |
| 91 | +.boxBody .mySelects { | |
| 92 | + position: relative; | |
| 93 | +} | |
| 94 | +.boxBody .boxInput { | |
| 95 | + display: flex; | |
| 96 | + align-items: center; | |
| 97 | + justify-content: space-between; | |
| 98 | + width: 180px; | |
| 99 | + height: 40px; | |
| 100 | + position: relative; | |
| 101 | +} | |
| 102 | +.boxBody .boxInput :global .ant-input { | |
| 103 | + background-color: #99CCFF !important; | |
| 104 | + /* 输入框背景色 */ | |
| 105 | + border: 1px solid #d9d9d9; | |
| 106 | + height: 40px; | |
| 107 | +} | |
| 108 | +.boxBody .text { | |
| 109 | + background-color: #99CCFF; | |
| 110 | + width: 100%; | |
| 111 | + height: 40px; | |
| 112 | + line-height: 40px; | |
| 113 | + text-align: center; | |
| 114 | + font-size: 10px; | |
| 115 | + margin-right: 1px; | |
| 116 | +} | |
| 117 | +.boxBody .content :global .ant-input { | |
| 118 | + background-color: #EEEEEE !important; | |
| 119 | + /* 输入框背景色 */ | |
| 120 | + height: 40px; | |
| 121 | +} | |
| 122 | +.boxBody .content :global .ant-select-selector { | |
| 123 | + background-color: #EEEEEE !important; | |
| 124 | + /* 选择框背景色 */ | |
| 125 | + height: 40px !important; | |
| 126 | + /* 选择框高度 */ | |
| 127 | +} | |
| 128 | +.boxBody .content .text { | |
| 129 | + background-color: #EEEEEE; | |
| 130 | + margin: 0; | |
| 131 | +} | |
| 132 | +.boxBody .content .boxFlex { | |
| 133 | + display: flex; | |
| 134 | + align-items: center; | |
| 135 | + flex-wrap: wrap; | |
| 136 | + flex-direction: column; | |
| 137 | + width: 500px; | |
| 138 | +} | |
| 139 | +.boxBody .content .boxFlexs { | |
| 140 | + display: flex; | |
| 141 | + align-items: center; | |
| 142 | + width: 500px; | |
| 143 | + justify-content: space-between; | |
| 144 | +} | |
| 145 | +.boxBody .content .boxFlexs .boxInputs { | |
| 146 | + display: flex; | |
| 147 | + align-items: center; | |
| 148 | + flex: 1; | |
| 149 | +} | |
| 150 | +.boxBody .content .boxFlexs .boxInputs :global .ant-input { | |
| 151 | + background-color: #EEEEEE !important; | |
| 152 | + /* 输入框背景色 */ | |
| 153 | + height: 40px; | |
| 154 | +} | |
| 155 | +.boxBody .content .boxInput { | |
| 156 | + width: 100%; | |
| 157 | + position: relative; | |
| 158 | +} | |
| 159 | +.boxBody .content .boxInput .defaultValue { | |
| 160 | + position: absolute; | |
| 161 | + left: 32%; | |
| 162 | + top: 3px; | |
| 163 | + width: 60px; | |
| 164 | + height: 30px; | |
| 165 | + background-color: #EEE; | |
| 166 | + color: #333; | |
| 167 | + line-height: 40px; | |
| 168 | + z-index: 2; | |
| 169 | + text-align: center; | |
| 170 | +} | ... | ... |
src/components/Common/BoxDesignCompontent/index.js
0 → 100644
| 1 | +/* eslint-disable */ | |
| 2 | +import React, { useRef, useState, useEffect } from "react"; | |
| 3 | +import { Select, Button, message, Input, Spin } from "antd"; | |
| 4 | +import { CompressOutlined, ExpandOutlined } from "@ant-design/icons"; | |
| 5 | +import * as commonUtils from "@/utils/utils"; | |
| 6 | +import * as commonFunc from "@/components/Common/commonFunc"; | |
| 7 | +import * as commonBusiness from "@/components/Common/commonBusiness"; | |
| 8 | +import * as commonServices from "@/services/services"; | |
| 9 | +import CommonBase from "@/components/Common/CommonBase"; | |
| 10 | +import AntdDraggableModal from "@/components/Common/AntdDraggableModal"; | |
| 11 | +import CommonViewTable from "@/components/Common/CommonViewTable"; | |
| 12 | +import StaticEditTable from "@/components/Common/CommonTable"; | |
| 13 | +import jsPreviewPdf from "@js-preview/pdf"; | |
| 14 | +import * as commonConfig from "@/utils/config"; | |
| 15 | +import SvgBox from "./svg"; | |
| 16 | +import styles from "./index.less"; | |
| 17 | +const BoxDesignEvent = props => { | |
| 18 | + const addState = {}; | |
| 19 | + const { formData = [], selectData = [], masterData, makeUpPDFRecord = {} } = props; | |
| 20 | + const [tableData, setTableData] = useState({}); | |
| 21 | + const [options, setOptions] = useState([]); | |
| 22 | + const [loading, setLoading] = useState(false); // 加载状态 | |
| 23 | + | |
| 24 | + addState.getSqlOptions = async type => { | |
| 25 | + setLoading(true); | |
| 26 | + const { app, token, makeConfig } = props; | |
| 27 | + // const quickQuoteConfig = config.gdsconfigformslave.find(item => item.sControlName === "BtnQuickQuote") || {}; | |
| 28 | + const { sId } = makeConfig; | |
| 29 | + if (!sId) return; | |
| 30 | + const url = `${commonConfig.server_host}business/getSelectLimit/${sId}?sModelsId=${sId}`; | |
| 31 | + const body = { | |
| 32 | + pageNum: 1, | |
| 33 | + pageSize: 20, | |
| 34 | + sKeyUpFilterName: "", | |
| 35 | + sSqlCondition: { | |
| 36 | + sType: type, | |
| 37 | + }, | |
| 38 | + }; | |
| 39 | + const data = await commonServices.postValueService(token, body, url); | |
| 40 | + if (data) { | |
| 41 | + const option = data.data.dataset.rows; | |
| 42 | + option.sort((a, b) => { | |
| 43 | + if (a.sCode === "") { | |
| 44 | + return -1; // 将 id 为 1 的元素排在前面 | |
| 45 | + } | |
| 46 | + if (b.sCode === "") { | |
| 47 | + return 1; | |
| 48 | + } | |
| 49 | + return 0; // 其他元素保持原顺序 | |
| 50 | + }); | |
| 51 | + setOptions(data.data.dataset.rows); | |
| 52 | + } | |
| 53 | + setLoading(false); | |
| 54 | + }; | |
| 55 | + | |
| 56 | + useEffect( | |
| 57 | + () => { | |
| 58 | + if (!formData.length) return; | |
| 59 | + | |
| 60 | + const data = formData[0].gdsconfigformslave.filter(Item => Item.bVisible); | |
| 61 | + setTableData(data); | |
| 62 | + props.onSaveState(pre => ({ ...pre, data })); | |
| 63 | + }, | |
| 64 | + [formData.length] | |
| 65 | + ); | |
| 66 | + | |
| 67 | + return { | |
| 68 | + ...props, | |
| 69 | + tableData, | |
| 70 | + ...addState, | |
| 71 | + options, | |
| 72 | + loading, | |
| 73 | + }; | |
| 74 | +}; | |
| 75 | +const BoxDesignCompontent = baseProps => { | |
| 76 | + const props = BoxDesignEvent(baseProps); | |
| 77 | + const { onCancel, onOk, title, loading, masterConfig, bFullScreen, tableData, options = [] } = props; | |
| 78 | + const { slaveData = {}, masterData = {} } = props.state; | |
| 79 | + const { boxVisible } = baseProps; | |
| 80 | + const [boxList, setBoxList] = useState([]); | |
| 81 | + const [tableColum, setTableColum] = useState([]); // 盒身类型 | |
| 82 | + const [tableDataList, setTableDataList] = useState([]); // 盒长 | |
| 83 | + const [boxBodyList, setBoxBodyList] = useState([]); // 盒身信息 | |
| 84 | + const [isDefaultValue, setIsDefaultValue] = useState(true); // 是否默认值 | |
| 85 | + const [topBoxList, setTopBoxList] = useState([]); // 盒身信息 | |
| 86 | + const [leftBoxList, setLeftBoxList] = useState([]); // 左边 | |
| 87 | + const [rightBoxList, setRightBoxList] = useState([]); | |
| 88 | + const [boxKey, setBoxKey] = useState(new Date().getTime()); | |
| 89 | + if (!boxVisible) return ""; | |
| 90 | + useEffect( | |
| 91 | + () => { | |
| 92 | + if (tableData && tableData.length) { | |
| 93 | + const newTableColum = tableData.map(item => { | |
| 94 | + return { | |
| 95 | + ...item, | |
| 96 | + isEditable: true, | |
| 97 | + isSelect: false, | |
| 98 | + selectImage: null, | |
| 99 | + value: "", | |
| 100 | + }; | |
| 101 | + }); | |
| 102 | + // const last = newTableColum.pop(); | |
| 103 | + // const newList = [last, ...newTableColum]; | |
| 104 | + const newList = newTableColum.filter( | |
| 105 | + item => item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽") | |
| 106 | + ); | |
| 107 | + const newLists = newTableColum.filter( | |
| 108 | + item => | |
| 109 | + !(item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽") || item.showName.includes("盒身")) | |
| 110 | + ); | |
| 111 | + const bodyList = newTableColum.filter(item => item.showName.includes("盒身")); | |
| 112 | + newLists.forEach(x => { | |
| 113 | + if (x.showName === "盒型类别") { | |
| 114 | + x.showName = "盒型名称"; | |
| 115 | + } | |
| 116 | + }); | |
| 117 | + setTableColum(newLists); | |
| 118 | + setBoxBodyList(bodyList); | |
| 119 | + newList.forEach(item => { | |
| 120 | + let name = ""; | |
| 121 | + if (item.showName === "盒长") { | |
| 122 | + name = item.showName + "(L)"; | |
| 123 | + } else if (item.showName === "盒宽") { | |
| 124 | + name = item.showName + "(W)"; | |
| 125 | + } else if (item.showName === "盒高") { | |
| 126 | + name = item.showName + "(D)"; | |
| 127 | + } | |
| 128 | + item.sName = name; | |
| 129 | + }); | |
| 130 | + setTableDataList(newList); | |
| 131 | + } | |
| 132 | + }, | |
| 133 | + [tableData] | |
| 134 | + ); | |
| 135 | + const titleList = [ | |
| 136 | + "上方盒舌", | |
| 137 | + "盒底组件", | |
| 138 | + "下方盒舌", | |
| 139 | + "左(上)插位组件", | |
| 140 | + "左贴边位", | |
| 141 | + "左(下)插位组件", | |
| 142 | + "右(上)插位组件", | |
| 143 | + "右贴边位", | |
| 144 | + "右(下)插位组件", | |
| 145 | + ]; | |
| 146 | + const titleList1 = [ | |
| 147 | + { name: "上方盒舌", value: "dSFHS" }, | |
| 148 | + { name: "盒底组件", value: "dHDC" }, | |
| 149 | + { name: "下方盒舌", value: "dXFHS" }, | |
| 150 | + { name: "左(上)插位组件", value: "dZSCW" }, | |
| 151 | + { name: "左贴边位", value: "dZTBW" }, | |
| 152 | + { name: "左(下)插位组件", value: "dZXCW" }, | |
| 153 | + { name: "右(上)插位组件", value: "dYSCW" }, | |
| 154 | + { name: "右贴边位", value: "dYTBW" }, | |
| 155 | + { name: "右(下)插位组件", value: "dYXCW" }, | |
| 156 | + ]; | |
| 157 | + const newBoxList = []; | |
| 158 | + | |
| 159 | + // const boxs = titleList.length + tableData.length; | |
| 160 | + tableColum.forEach(item => { | |
| 161 | + titleList.push(item.showName); | |
| 162 | + }); | |
| 163 | + console.log("🚀 ~ tableColum:", tableColum); | |
| 164 | + boxBodyList.forEach(item => { | |
| 165 | + titleList.push(item.showName); | |
| 166 | + }); | |
| 167 | + tableDataList.forEach(item => { | |
| 168 | + titleList.push(item.showName); | |
| 169 | + }); | |
| 170 | + // 盒身信息 | |
| 171 | + titleList.forEach((item, index) => { | |
| 172 | + newBoxList.push({ | |
| 173 | + value: "", | |
| 174 | + sName: item, | |
| 175 | + isEditable: true, | |
| 176 | + isSelect: false, | |
| 177 | + selectValue: null, | |
| 178 | + selectLabel: "", | |
| 179 | + selectImage: null, | |
| 180 | + type: null, | |
| 181 | + show: true, | |
| 182 | + showName: item, // 参数名称 | |
| 183 | + sAssignFormula: null, | |
| 184 | + }); | |
| 185 | + }); | |
| 186 | + // 部件信息 | |
| 187 | + if (slaveData && slaveData.length) { | |
| 188 | + slaveData.forEach((item, index) => { | |
| 189 | + const i = titleList1.findIndex(i => { | |
| 190 | + return i.value === item.sCode; | |
| 191 | + }); | |
| 192 | + if (i !== -1) { | |
| 193 | + const x = newBoxList.findIndex(z => z.sName === titleList1[i].name); | |
| 194 | + newBoxList[x].value = item.iValue; | |
| 195 | + newBoxList[x].type = item.sTypes; | |
| 196 | + newBoxList[x].showName = item.sName; | |
| 197 | + newBoxList[x].selectImage = item.sMakeUpPath; | |
| 198 | + newBoxList[x].sName = titleList1[i].name; | |
| 199 | + newBoxList[x].sAssignFormula = item.sAssignFormula; | |
| 200 | + newBoxList[x].bVisible = item.bVisible; | |
| 201 | + } | |
| 202 | + }); | |
| 203 | + } | |
| 204 | + // 盒身信息 | |
| 205 | + if (masterData) { | |
| 206 | + newBoxList.forEach((item, index) => { | |
| 207 | + if (item.sName === "盒身") { | |
| 208 | + newBoxList[index].value = masterData.sBoxBody; | |
| 209 | + newBoxList[index].selectImage = masterData.sMakeUpPath; | |
| 210 | + newBoxList[index].type = masterData.sTypes; | |
| 211 | + } else if (item.sName === "盒长") { | |
| 212 | + newBoxList[index].value = masterData.dBoxLength; | |
| 213 | + } else if (item.sName === "盒宽") { | |
| 214 | + newBoxList[index].value = masterData.dBoxWidth; | |
| 215 | + } else if (item.sName === "盒高") { | |
| 216 | + newBoxList[index].value = masterData.dBoxHeight; | |
| 217 | + } else if (item.sName === "盒型名称") { | |
| 218 | + newBoxList[index].value = masterData.sName; | |
| 219 | + } | |
| 220 | + }); | |
| 221 | + } | |
| 222 | + // 有数据的时候 盒型设计需要赋值 | |
| 223 | + useEffect( | |
| 224 | + () => { | |
| 225 | + if (newBoxList.length > 0 && !arraysAreEqual(boxList, newBoxList)) { | |
| 226 | + setBoxList(newBoxList); | |
| 227 | + } | |
| 228 | + }, | |
| 229 | + [newBoxList] | |
| 230 | + ); | |
| 231 | + | |
| 232 | + const arraysAreEqual = (arr1, arr2) => { | |
| 233 | + if (arr1.length !== arr2.length) return false; | |
| 234 | + return arr1.every((item, index) => item.sName === arr2[index].sName); | |
| 235 | + }; | |
| 236 | + useEffect( | |
| 237 | + () => { | |
| 238 | + const type = boxList.find(item => item.sName === "盒身")?.type; | |
| 239 | + const updateLists = () => { | |
| 240 | + const topBoxFilter = item => item.sName === "上方盒舌" || item.sName === "盒底组件" || item.sName === "下方盒舌"; | |
| 241 | + | |
| 242 | + const leftBoxFilter = item => item.sName === "左(上)插位组件" || item.sName === "左贴边位" || item.sName === "左(下)插位组件"; | |
| 243 | + | |
| 244 | + const rightBoxFilter = item => item.sName === "右(上)插位组件" || item.sName === "右贴边位" || item.sName === "右(下)插位组件"; | |
| 245 | + | |
| 246 | + if (type === "2" || type === 2 || type === "4" || type === 4 || type === 3 || type === "3" || type === 5 || type === "5") { | |
| 247 | + const box = [...boxList]; | |
| 248 | + box.forEach(x => { | |
| 249 | + x.show = true; | |
| 250 | + }); | |
| 251 | + if (type === "2" || type === 2) { | |
| 252 | + box.forEach(x => x.sName === "盒底组件" && (x.show = false)); | |
| 253 | + } else if (type === "4" || type === 4) { | |
| 254 | + const title = ["盒底组件", "左贴边位", "右贴边位"]; | |
| 255 | + box.forEach(x => title.includes(x.sName) && (x.show = false)); | |
| 256 | + } else if (type === "3" || type === 3) { | |
| 257 | + const title = ["左(上)插位组件", "右(下)插位组件", "盒底组件"]; | |
| 258 | + box.forEach(x => title.includes(x.sName) && (x.show = false)); | |
| 259 | + } else if (type === "5" || type === 5) { | |
| 260 | + const title = ["盒底组件"]; | |
| 261 | + box.forEach(x => title.includes(x.sName) && (x.show = false)); | |
| 262 | + } | |
| 263 | + setTopBoxList(box.filter(topBoxFilter)); | |
| 264 | + setLeftBoxList(box.filter(leftBoxFilter)); | |
| 265 | + if (type === 3 || type === "3") { | |
| 266 | + setRightBoxList(box.filter(rightBoxFilter).reverse()); | |
| 267 | + } else { | |
| 268 | + setRightBoxList(box.filter(rightBoxFilter)); | |
| 269 | + } | |
| 270 | + } else { | |
| 271 | + const box = [...boxList]; | |
| 272 | + box.forEach(x => { | |
| 273 | + x.show = true; | |
| 274 | + }); | |
| 275 | + setTopBoxList(box.filter(topBoxFilter)); | |
| 276 | + setLeftBoxList(box.filter(leftBoxFilter)); | |
| 277 | + setRightBoxList(box.filter(rightBoxFilter)); | |
| 278 | + } | |
| 279 | + }; | |
| 280 | + | |
| 281 | + updateLists(); | |
| 282 | + }, | |
| 283 | + [boxList] | |
| 284 | + ); | |
| 285 | + | |
| 286 | + const handleFocus = (e, index) => { | |
| 287 | + if (boxList && boxList.length) { | |
| 288 | + const updatedBoxList = [...boxList]; | |
| 289 | + updatedBoxList[index].isEditable = true; | |
| 290 | + setBoxList(updatedBoxList); | |
| 291 | + } | |
| 292 | + }; | |
| 293 | + | |
| 294 | + const handleBlur = (e, index) => { | |
| 295 | + if (boxList && boxList.length) { | |
| 296 | + const updatedBoxList = [...boxList]; | |
| 297 | + updatedBoxList[index].isEditable = false; | |
| 298 | + setBoxList(updatedBoxList); | |
| 299 | + } | |
| 300 | + }; | |
| 301 | + | |
| 302 | + const handleChange = (e, index) => { | |
| 303 | + const updatedBoxList = [...boxList]; | |
| 304 | + updatedBoxList[index].value = e.target.value; | |
| 305 | + setBoxList(updatedBoxList); | |
| 306 | + }; | |
| 307 | + | |
| 308 | + const handleChangeName = (e, index) => { | |
| 309 | + const updatedBoxList = [...boxList]; | |
| 310 | + updatedBoxList[index].showName = e.target.value; | |
| 311 | + setBoxList(updatedBoxList); | |
| 312 | + }; | |
| 313 | + | |
| 314 | + const handleSelect = (name, selectConfig, index, type) => { | |
| 315 | + let updatedBoxList = [...boxList]; | |
| 316 | + updatedBoxList[index].type = name; | |
| 317 | + updatedBoxList[index].selectImage = selectConfig.image; | |
| 318 | + // 选择盒身数据全部清空 | |
| 319 | + | |
| 320 | + const typeList = [1, 2, 3, 4]; | |
| 321 | + if (typeList.includes(type)) { | |
| 322 | + const table1 = tableColum.map(x => x.showName); | |
| 323 | + const table2 = boxBodyList.map(x => x.showName); | |
| 324 | + const table3 = tableDataList.map(x => x.showName); | |
| 325 | + const tableTitle = table1.concat(table2, table3); | |
| 326 | + updatedBoxList.forEach((x, i) => { | |
| 327 | + if (i !== index && !tableTitle.includes(x.sName)) { | |
| 328 | + x.value = ""; | |
| 329 | + x.type = null; | |
| 330 | + x.selectValue = null; | |
| 331 | + x.selectImage = null; | |
| 332 | + // x.showName = | |
| 333 | + } | |
| 334 | + }); | |
| 335 | + setIsDefaultValue(false); | |
| 336 | + updatedBoxList[index].value = selectConfig.label; | |
| 337 | + } | |
| 338 | + setBoxList(updatedBoxList); | |
| 339 | + }; | |
| 340 | + const getImage = fileName => { | |
| 341 | + const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&sModelsId=100&token=${props.token}`; | |
| 342 | + return imageUrl; | |
| 343 | + }; | |
| 344 | + // 下来框 | |
| 345 | + const renderOptionWithImage = option => { | |
| 346 | + return ( | |
| 347 | + <Select.Option key={option.sId} value={option.sCode} label={option.sName} image={getImage(option.sMakeUpPath)}> | |
| 348 | + <div style={{ display: "flex", alignItems: "center" }}> | |
| 349 | + {option.sMakeUpPath ? <img src={getImage(option.sMakeUpPath)} alt={option.sName} style={{ width: 24, height: 24, marginRight: 8 }} /> : ""} | |
| 350 | + <span>{option.sName}</span> | |
| 351 | + </div> | |
| 352 | + </Select.Option> | |
| 353 | + ); | |
| 354 | + }; | |
| 355 | + const svgBoxProps = { | |
| 356 | + ...props, | |
| 357 | + boxList, | |
| 358 | + showNew: 0, | |
| 359 | + }; | |
| 360 | + // 计算展长展宽 | |
| 361 | + // 创建盒型 | |
| 362 | + const submit = () => { | |
| 363 | + const newSlaveData = []; | |
| 364 | + // 判断是新增还是修改 | |
| 365 | + | |
| 366 | + // 存储子表数据 | |
| 367 | + boxList.forEach((item, index) => { | |
| 368 | + const i = titleList1.findIndex(i => i.name === item.sName); | |
| 369 | + const slave = slaveData.find(z => z.sCode === titleList1[i]?.value); | |
| 370 | + if (i !== -1) { | |
| 371 | + const data = { | |
| 372 | + ...slaveData[0], | |
| 373 | + handleType: slave ? "update" : "add", | |
| 374 | + sName: item.showName, | |
| 375 | + sCode: titleList1[i].value, | |
| 376 | + iValue: item.value, | |
| 377 | + iOrder: index + 1, | |
| 378 | + iRowNum: index + 1, | |
| 379 | + sId: slave ? slave.sId : commonUtils.createSid(), | |
| 380 | + sMakeUpPath: item.selectImage, | |
| 381 | + sTypes: item.type, | |
| 382 | + bVisible: item.value ? true : false, | |
| 383 | + sParentId: masterData.sId, | |
| 384 | + sAssignFormula: item.sAssignFormula, | |
| 385 | + }; | |
| 386 | + // if (item.value !== "") { | |
| 387 | + newSlaveData.push(data); | |
| 388 | + // } | |
| 389 | + } | |
| 390 | + }); | |
| 391 | + const submitSlaveData = []; | |
| 392 | + slaveData.forEach(item => { | |
| 393 | + const i = newSlaveData.findIndex(x => x.scode === item.code); | |
| 394 | + if (i === -1) { | |
| 395 | + submitSlaveData.push({ ...item, handleType: "del" }); | |
| 396 | + } | |
| 397 | + }); | |
| 398 | + submitSlaveData.concat(newSlaveData); | |
| 399 | + | |
| 400 | + // 处理计算公式 | |
| 401 | + console.log(boxList, "boxList"); | |
| 402 | + // 计算展长公式 sLengthFormula | |
| 403 | + let sLengthFormula = ""; | |
| 404 | + let sWidthFormula = ""; | |
| 405 | + const boxType = boxList.find(item => item.sName === "盒身")?.type; | |
| 406 | + const boxLength = Number(boxList.find(item => item.sName === "盒长")?.value); | |
| 407 | + const boxWidth = Number(boxList.find(item => item.sName === "盒宽")?.value); | |
| 408 | + const boxHeight = Number(boxList.find(item => item.sName === "盒高")?.value); | |
| 409 | + const zxcw = boxList.find(x => x.sName === "左(下)插位组件"); | |
| 410 | + const zscw = boxList.find(x => x.sName === "左(上)插位组件"); | |
| 411 | + const yscw = boxList.find(x => x.sName === "右(上)插位组件"); | |
| 412 | + const yxcw = boxList.find(x => x.sName === "右(下)插位组件"); | |
| 413 | + const zxcwType = zxcw?.type; | |
| 414 | + const zxcwValue = zxcw?.value; | |
| 415 | + const zscwType = zscw?.type; | |
| 416 | + const zscwValue = zscw?.value; | |
| 417 | + const yscwType = yscw?.type; | |
| 418 | + const yscwValue = yscw?.value; | |
| 419 | + const yxcwType = yxcw?.type; | |
| 420 | + const yxcwValue = yxcw?.value; | |
| 421 | + let leftTopValue = 0; | |
| 422 | + let leftTop = ""; | |
| 423 | + let rightTopValue = 0; | |
| 424 | + let rightTop = ""; | |
| 425 | + let leftBottomValue = 0; | |
| 426 | + let leftBottom = ""; | |
| 427 | + let rightBottomValue = 0; | |
| 428 | + let rightBottom = ""; | |
| 429 | + if (boxType && boxType === "1") { | |
| 430 | + // 四面盒 | |
| 431 | + const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value; | |
| 432 | + const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value; | |
| 433 | + sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L * 2 + W * 2" + (ytbw ? " +dYTBW" : ""); | |
| 434 | + | |
| 435 | + if (zxcwType === "4001" || zxcwType === "4006") { | |
| 436 | + leftBottomValue = Number(zxcwValue) + boxHeight; | |
| 437 | + leftBottom = " + dZXCW + W"; | |
| 438 | + } else if (zxcwType === "4002" || zxcwType === "4003") { | |
| 439 | + leftBottomValue = Number(zxcwValue); | |
| 440 | + leftBottom = " + dZXCW"; | |
| 441 | + } else if (zxcwType === "4004") { | |
| 442 | + leftBottomValue = Number(zxcwValue) + boxHeight * 2; | |
| 443 | + leftBottom = " + dZXCW + W * 2"; | |
| 444 | + } else if (zxcwType === "4005") { | |
| 445 | + leftBottomValue = boxHeight * 2; | |
| 446 | + leftBottom = "+ W * 2"; | |
| 447 | + } | |
| 448 | + if (yscwType === "6001" || yscwType === "6006") { | |
| 449 | + rightTopValue = Number(yscwValue) + boxHeight; | |
| 450 | + rightTop = "dYSCW + W + "; | |
| 451 | + } else if (yscwType === "6002" || yscwType === "6003") { | |
| 452 | + rightTopValue = Number(yscwValue); | |
| 453 | + rightTop = "dYSCW + "; | |
| 454 | + } else if (yscwType === "6004") { | |
| 455 | + rightTopValue = Number(yscwValue) + boxHeight * 2; | |
| 456 | + rightTop = "dYSCW + W * 2+ "; | |
| 457 | + } else if (yscwType === "6005") { | |
| 458 | + rightTopValue = boxHeight * 2; | |
| 459 | + rightTop = "W * 2+ "; | |
| 460 | + } | |
| 461 | + if (zscwType === "3001" || zscwType === "3006") { | |
| 462 | + leftTopValue = Number(zscwValue) + boxHeight; | |
| 463 | + leftTop = "dZSCW + W +"; | |
| 464 | + } else if (zscwType === "3002" || zscwType === "3003") { | |
| 465 | + leftTopValue = Number(zscwValue); | |
| 466 | + leftTop = "dZSCW +"; | |
| 467 | + } else if (zscwType === "3004") { | |
| 468 | + leftTopValue = Number(zscwValue) + boxHeight * 2; | |
| 469 | + leftTop = "dZSCW + W * 2 +"; | |
| 470 | + } else if (zscwType === "3005") { | |
| 471 | + leftTopValue = boxHeight * 2; | |
| 472 | + leftTop = "W * 2 +"; | |
| 473 | + } | |
| 474 | + if (yxcwType === "7001" || yxcwType === "7006") { | |
| 475 | + rightBottomValue = Number(yxcwValue) + boxHeight; | |
| 476 | + rightBottom = "+ dYXCW + W"; | |
| 477 | + } else if (yxcwType === "7002" || yxcwType === "7003") { | |
| 478 | + rightBottomValue = Number(yxcwValue); | |
| 479 | + rightBottom = "+ dYXCW "; | |
| 480 | + } else if (yxcwType === "7004") { | |
| 481 | + rightBottomValue = Number(yxcwValue) + boxHeight * 2; | |
| 482 | + rightBottom = "+ dYXCW + W * 2"; | |
| 483 | + } else if (yxcwType === "7005") { | |
| 484 | + rightBottomValue = boxHeight * 2; | |
| 485 | + rightBottom = "+ W * 2"; | |
| 486 | + } | |
| 487 | + sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom); | |
| 488 | + } else if (boxType && boxType === "2") { | |
| 489 | + // 单折 | |
| 490 | + const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value; | |
| 491 | + const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value; | |
| 492 | + sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L * 2 + W" + (ytbw ? " +dYTBW" : ""); | |
| 493 | + if (zxcwType === "4001" || zxcwType === "4006") { | |
| 494 | + leftBottomValue = Number(zxcwValue) + boxHeight; | |
| 495 | + leftBottom = " + dZXCW + W"; | |
| 496 | + } else if (zxcwType === "4002" || zxcwType === "4003") { | |
| 497 | + leftBottomValue = Number(zxcwValue); | |
| 498 | + leftBottom = " + dZXCW"; | |
| 499 | + } else if (zxcwType === "4004") { | |
| 500 | + leftBottomValue = Number(zxcwValue) + boxHeight * 2; | |
| 501 | + leftBottom = " + dZXCW + W * 2"; | |
| 502 | + } else if (zxcwType === "4005") { | |
| 503 | + leftBottomValue = boxHeight * 2; | |
| 504 | + leftBottom = "+ W * 2"; | |
| 505 | + } | |
| 506 | + if (yscwType === "6001" || yscwType === "6006") { | |
| 507 | + rightTopValue = Number(yscwValue) + boxHeight; | |
| 508 | + rightTop = "dYSCW + W + "; | |
| 509 | + } else if (yscwType === "6002" || yscwType === "6003") { | |
| 510 | + rightTopValue = Number(yscwValue); | |
| 511 | + rightTop = "dYSCW + "; | |
| 512 | + } else if (yscwType === "6004") { | |
| 513 | + rightTopValue = Number(yscwValue) + boxHeight * 2; | |
| 514 | + rightTop = "dYSCW + W * 2+ "; | |
| 515 | + } else if (yscwType === "6005") { | |
| 516 | + rightTopValue = boxHeight * 2; | |
| 517 | + rightTop = "W * 2+ "; | |
| 518 | + } | |
| 519 | + if (zscwType === "3001" || zscwType === "3006") { | |
| 520 | + leftTopValue = Number(zscwValue) + boxHeight; | |
| 521 | + leftTop = "dZSCW + W +"; | |
| 522 | + } else if (zscwType === "3002" || zscwType === "3003") { | |
| 523 | + leftTopValue = Number(zscwValue); | |
| 524 | + leftTop = "dZSCW +"; | |
| 525 | + } else if (zscwType === "3004") { | |
| 526 | + leftTopValue = Number(zscwValue) + boxHeight * 2; | |
| 527 | + leftTop = "dZSCW + W * 2 +"; | |
| 528 | + } else if (zscwType === "3005") { | |
| 529 | + leftTopValue = boxHeight * 2; | |
| 530 | + leftTop = "W * 2 +"; | |
| 531 | + } | |
| 532 | + if (yxcwType === "7001" || yxcwType === "7006") { | |
| 533 | + rightBottomValue = Number(yxcwValue) + boxHeight; | |
| 534 | + rightBottom = "+ dYXCW + W"; | |
| 535 | + } else if (yxcwType === "7002" || yxcwType === "7003") { | |
| 536 | + rightBottomValue = Number(yxcwValue); | |
| 537 | + rightBottom = "+ dYXCW "; | |
| 538 | + } else if (yxcwType === "7004") { | |
| 539 | + rightBottomValue = Number(yxcwValue) + boxHeight * 2; | |
| 540 | + rightBottom = "+ dYXCW + W * 2"; | |
| 541 | + } else if (yxcwType === "7005") { | |
| 542 | + rightBottomValue = boxHeight * 2; | |
| 543 | + rightBottom = "+ W * 2"; | |
| 544 | + } | |
| 545 | + sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom); | |
| 546 | + } else if (boxType && boxType === "3") { | |
| 547 | + const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value; | |
| 548 | + const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value; | |
| 549 | + sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L + W * 2" + (ytbw ? " +dYTBW" : ""); | |
| 550 | + if (zxcwType === "4001" || zxcwType === "4006") { | |
| 551 | + leftBottomValue = Number(zxcwValue) + boxHeight; | |
| 552 | + leftBottom = " + dZXCW + W"; | |
| 553 | + } else if (zxcwType === "4002" || zxcwType === "4003") { | |
| 554 | + leftBottomValue = Number(zxcwValue); | |
| 555 | + leftBottom = " + dZXCW"; | |
| 556 | + } else if (zxcwType === "4004") { | |
| 557 | + leftBottomValue = Number(zxcwValue) + boxHeight * 2; | |
| 558 | + leftBottom = " + dZXCW + W * 2"; | |
| 559 | + } else if (zxcwType === "4005") { | |
| 560 | + leftBottomValue = boxHeight * 2; | |
| 561 | + leftBottom = "+ W * 2"; | |
| 562 | + } | |
| 563 | + if (yscwType === "6001" || yscwType === "6006") { | |
| 564 | + rightTopValue = Number(yscwValue) + boxHeight; | |
| 565 | + rightTop = "dYSCW + W + "; | |
| 566 | + } else if (yscwType === "6002" || yscwType === "6003") { | |
| 567 | + rightTopValue = Number(yscwValue); | |
| 568 | + rightTop = "dYSCW + "; | |
| 569 | + } else if (yscwType === "6004") { | |
| 570 | + rightTopValue = Number(yscwValue) + boxHeight * 2; | |
| 571 | + rightTop = "dYSCW + W * 2+ "; | |
| 572 | + } else if (yscwType === "6005") { | |
| 573 | + rightTopValue = boxHeight * 2; | |
| 574 | + rightTop = "W * 2+ "; | |
| 575 | + } | |
| 576 | + if (zscwType === "3001" || zscwType === "3006") { | |
| 577 | + leftTopValue = Number(zscwValue) + boxHeight; | |
| 578 | + leftTop = "dZSCW + W +"; | |
| 579 | + } else if (zscwType === "3002" || zscwType === "3003") { | |
| 580 | + leftTopValue = Number(zscwValue); | |
| 581 | + leftTop = "dZSCW +"; | |
| 582 | + } else if (zscwType === "3004") { | |
| 583 | + leftTopValue = Number(zscwValue) + boxHeight * 2; | |
| 584 | + leftTop = "dZSCW + W * 2 +"; | |
| 585 | + } else if (zscwType === "3005") { | |
| 586 | + leftTopValue = boxHeight * 2; | |
| 587 | + leftTop = "W * 2 +"; | |
| 588 | + } | |
| 589 | + if (yxcwType === "7001" || yxcwType === "7006") { | |
| 590 | + rightBottomValue = Number(yxcwValue) + boxHeight; | |
| 591 | + rightBottom = "+ dYXCW + W"; | |
| 592 | + } else if (yxcwType === "7002" || yxcwType === "7003") { | |
| 593 | + rightBottomValue = Number(yxcwValue); | |
| 594 | + rightBottom = "+ dYXCW "; | |
| 595 | + } else if (yxcwType === "7004") { | |
| 596 | + rightBottomValue = Number(yxcwValue) + boxHeight * 2; | |
| 597 | + rightBottom = "+ dYXCW + W * 2"; | |
| 598 | + } else if (yxcwType === "7005") { | |
| 599 | + rightBottomValue = boxHeight * 2; | |
| 600 | + rightBottom = "+ W * 2"; | |
| 601 | + } | |
| 602 | + sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom); | |
| 603 | + } else if (boxType && boxType === "4") { | |
| 604 | + // 天地盒 | |
| 605 | + const zxcw = boxList.find(x => x.sName === "左(下)插位组件"); | |
| 606 | + const zscw = boxList.find(x => x.sName === "左(上)插位组件"); | |
| 607 | + const yscw = boxList.find(x => x.sName === "右(上)插位组件"); | |
| 608 | + const yxcw = boxList.find(x => x.sName === "右(下)插位组件"); | |
| 609 | + const zxcwType = zxcw?.type; | |
| 610 | + const zxcwValue = zxcw?.value; | |
| 611 | + const zscwType = zscw?.type; | |
| 612 | + const zscwValue = zscw?.value; | |
| 613 | + const yscwType = yscw?.type; | |
| 614 | + const yscwValue = yscw?.value; | |
| 615 | + const yxcwType = yxcw?.type; | |
| 616 | + const yxcwValue = yxcw?.value; | |
| 617 | + let leftValue = ""; | |
| 618 | + let rightValue = ""; | |
| 619 | + let topValue = ""; | |
| 620 | + let bottomValue = ""; | |
| 621 | + if (zxcwType === "4001" || zxcwType === "4006") { | |
| 622 | + // leftValue = leftValue + Number(zxcwValue) + boxHeight * 2; | |
| 623 | + leftValue = "dZXCW + D * 2 +"; | |
| 624 | + } else if (zxcwType === "4002" || zxcwType === "4003") { | |
| 625 | + leftValue = "dZXCW + D +"; | |
| 626 | + } else if (zxcwType === "4004") { | |
| 627 | + leftValue = "dZXCW + D * 3 +"; | |
| 628 | + } else if (zxcwType === "4005") { | |
| 629 | + leftValue = "D * 3 +"; | |
| 630 | + } | |
| 631 | + if (yscwType === "6001" || yscwType === "6006") { | |
| 632 | + rightValue = "+ dYSCW + D * 2"; | |
| 633 | + } else if (yscwType === "6002" || yscwType === "6003") { | |
| 634 | + rightValue = "+ dYSCW + D"; | |
| 635 | + } else if (yscwType === "6004") { | |
| 636 | + rightValue = "+ dYSCW + D * 3"; | |
| 637 | + } else if (yscwType === "6005") { | |
| 638 | + rightValue = " + D * 3"; | |
| 639 | + } | |
| 640 | + if (zscwType === "3001" || zscwType === "3006") { | |
| 641 | + topValue = "dZSCW + D * 2 +"; | |
| 642 | + } else if (zscwType === "3002" || zscwType === "3003") { | |
| 643 | + topValue = "dZSCW + D +"; | |
| 644 | + } else if (zscwType === "3004") { | |
| 645 | + topValue = "dZSCW + D * 3 +"; | |
| 646 | + } else if (zscwType === "3005") { | |
| 647 | + topValue = "D * 3+"; | |
| 648 | + } | |
| 649 | + if (yxcwType === "7001" || yxcwType === "7006") { | |
| 650 | + bottomValue = "+ dYXCW + D * 2"; | |
| 651 | + } else if (yxcwType === "7002" || yxcwType === "7003") { | |
| 652 | + bottomValue = "+ dYXCW + D "; | |
| 653 | + } else if (yxcwType === "7004") { | |
| 654 | + bottomValue = "+ dYXCW + D * 3"; | |
| 655 | + } else if (yxcwType === "7005") { | |
| 656 | + bottomValue = "+ D * 3"; | |
| 657 | + } | |
| 658 | + // viewBoxWidth = Number(boxLength) + leftValue + rightValue; | |
| 659 | + // viewBoxHeight = Number(boxWidth) + topValue + bottomValue; | |
| 660 | + sLengthFormula = leftValue + "L" + rightValue; | |
| 661 | + sWidthFormula = topValue + "W" + bottomValue; | |
| 662 | + } else if (boxType && boxType === "5") { | |
| 663 | + // 飞机盒 | |
| 664 | + const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value; | |
| 665 | + const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value; | |
| 666 | + sLengthFormula = (ztbw ? "dZTBW+ " : "") + "D * 2 + W * 2" + (ytbw ? " +dYTBW" : ""); | |
| 667 | + if (zxcwType === "4001" || zxcwType === "4006") { | |
| 668 | + leftBottomValue = Number(zxcwValue) + boxHeight; | |
| 669 | + leftBottom = " + dZXCW + D"; | |
| 670 | + } else if (zxcwType === "4002" || zxcwType === "4003") { | |
| 671 | + leftBottomValue = Number(zxcwValue); | |
| 672 | + leftBottom = " + dZXCW"; | |
| 673 | + } else if (zxcwType === "4004") { | |
| 674 | + leftBottomValue = Number(zxcwValue) + boxHeight * 2; | |
| 675 | + leftBottom = " + dZXCW + D * 2"; | |
| 676 | + } else if (zxcwType === "4005") { | |
| 677 | + leftBottomValue = boxHeight * 2; | |
| 678 | + leftBottom = "+ D * 2"; | |
| 679 | + } | |
| 680 | + if (yscwType === "6001" || yscwType === "6006") { | |
| 681 | + rightTopValue = Number(yscwValue) + boxHeight; | |
| 682 | + rightTop = "dYSCW + D + "; | |
| 683 | + } else if (yscwType === "6002" || yscwType === "6003") { | |
| 684 | + rightTopValue = Number(yscwValue); | |
| 685 | + rightTop = "dYSCW + "; | |
| 686 | + } else if (yscwType === "6004") { | |
| 687 | + rightTopValue = Number(yscwValue) + boxHeight * 2; | |
| 688 | + rightTop = "dYSCW + D * 2+ "; | |
| 689 | + } else if (yscwType === "6005") { | |
| 690 | + rightTopValue = boxHeight * 2; | |
| 691 | + rightTop = "D * 2+ "; | |
| 692 | + } | |
| 693 | + if (zscwType === "3001" || zscwType === "3006") { | |
| 694 | + leftTopValue = Number(zscwValue) + boxHeight; | |
| 695 | + leftTop = "dZSCW + D +"; | |
| 696 | + } else if (zscwType === "3002" || zscwType === "3003") { | |
| 697 | + leftTopValue = Number(zscwValue); | |
| 698 | + leftTop = "dZSCW +"; | |
| 699 | + } else if (zscwType === "3004") { | |
| 700 | + leftTopValue = Number(zscwValue) + boxHeight * 2; | |
| 701 | + leftTop = "dZSCW + D * 2 +"; | |
| 702 | + } else if (zscwType === "3005") { | |
| 703 | + leftTopValue = boxHeight * 2; | |
| 704 | + leftTop = "D * 2 +"; | |
| 705 | + } | |
| 706 | + if (yxcwType === "7001" || yxcwType === "7006") { | |
| 707 | + rightBottomValue = Number(yxcwValue) + boxHeight; | |
| 708 | + rightBottom = "+ dYXCW + D"; | |
| 709 | + } else if (yxcwType === "7002" || yxcwType === "7003") { | |
| 710 | + rightBottomValue = Number(yxcwValue); | |
| 711 | + rightBottom = "+ dYXCW "; | |
| 712 | + } else if (yxcwType === "7004") { | |
| 713 | + rightBottomValue = Number(yxcwValue) + boxHeight * 2; | |
| 714 | + rightBottom = "+ dYXCW + D * 2"; | |
| 715 | + } else if (yxcwType === "7005") { | |
| 716 | + rightBottomValue = boxHeight * 2; | |
| 717 | + rightBottom = "+ D * 2"; | |
| 718 | + } | |
| 719 | + sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "L" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom); | |
| 720 | + } | |
| 721 | + | |
| 722 | + // 存储盒身数据 主表 | |
| 723 | + const newMasterData = { | |
| 724 | + ...masterData, | |
| 725 | + sBoxBody: boxList.find(item => item.sName === "盒身")?.value || "", | |
| 726 | + dBoxLength: boxList.find(item => item.sName === "盒长")?.value || "", | |
| 727 | + dBoxWidth: boxList.find(item => item.sName === "盒宽")?.value || "", | |
| 728 | + dBoxHeight: boxList.find(item => item.sName === "盒高")?.value || "", | |
| 729 | + sName: boxList.find(item => item.sName === "盒型名称")?.value || "", | |
| 730 | + sMakeUpPath: boxList.find(item => item.sName === "盒身")?.selectImage || "", | |
| 731 | + sTypes: boxList.find(item => item.sName === "盒身")?.type || "", | |
| 732 | + sLengthFormula: sLengthFormula, | |
| 733 | + sWidthFormula: sWidthFormula, | |
| 734 | + }; | |
| 735 | + | |
| 736 | + onOk({ slaveData: newSlaveData, masterData: newMasterData }); // 提交数据 | |
| 737 | + }; | |
| 738 | + const findIndexBySname = name => { | |
| 739 | + const i = boxList.findIndex(x => x.sName === name); | |
| 740 | + return i || 0; | |
| 741 | + }; | |
| 742 | + return ( | |
| 743 | + <AntdDraggableModal | |
| 744 | + width="1000px" | |
| 745 | + height="calc(100vh - 50px)" | |
| 746 | + title={title} | |
| 747 | + visible={boxVisible} | |
| 748 | + onCancel={onCancel} | |
| 749 | + okText="创建" | |
| 750 | + onOk={submit} | |
| 751 | + bodyStyle={{ | |
| 752 | + height: "calc(95vh - 105px)", | |
| 753 | + overflowY: "auto", | |
| 754 | + display: "flex", | |
| 755 | + flexDirection: "column", | |
| 756 | + }} | |
| 757 | + style={{ | |
| 758 | + top: 50, | |
| 759 | + }} | |
| 760 | + > | |
| 761 | + {/* 盒身信息 */} | |
| 762 | + <div className={styles.boxBody} key={boxKey}> | |
| 763 | + <div className={styles.boxTop}> | |
| 764 | + {topBoxList.map((topItem, index) => ( | |
| 765 | + <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}> | |
| 766 | + <div className={styles.boxTitle}>{topItem.sName}</div> | |
| 767 | + {topItem?.selectImage ? ( | |
| 768 | + <img | |
| 769 | + src={topItem?.selectImage} | |
| 770 | + alt={topItem.value} | |
| 771 | + style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }} | |
| 772 | + /> | |
| 773 | + ) : ( | |
| 774 | + "" | |
| 775 | + )} | |
| 776 | + | |
| 777 | + <Select | |
| 778 | + optionLabelProp="label" | |
| 779 | + className="mySelects" | |
| 780 | + style={{ width: 180 }} | |
| 781 | + defaultValue={options.length ? options[0].value : ""} | |
| 782 | + onSelect={(value, option) => handleSelect(value, option, index, 0)} | |
| 783 | + onDropdownVisibleChange={async open => { | |
| 784 | + if (open) { | |
| 785 | + props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions | |
| 786 | + } | |
| 787 | + }} | |
| 788 | + > | |
| 789 | + {!loading ? options.map(option => renderOptionWithImage(option)) : ""} | |
| 790 | + </Select> | |
| 791 | + <div className={styles.boxInput}> | |
| 792 | + {/* <div className={styles.text}>参数：</div> */} | |
| 793 | + <Input | |
| 794 | + value={topItem?.showName} | |
| 795 | + onChange={e => handleChangeName(e, index)} | |
| 796 | + onFocus={e => handleFocus(e, index)} | |
| 797 | + onBlur={e => handleBlur(e, index)} | |
| 798 | + readOnly={!topItem?.isEditable} | |
| 799 | + className={styles.text} | |
| 800 | + /> | |
| 801 | + <Input | |
| 802 | + value={topItem?.value} | |
| 803 | + onChange={e => handleChange(e, index)} | |
| 804 | + onFocus={e => handleFocus(e, index)} | |
| 805 | + onBlur={e => handleBlur(e, index)} | |
| 806 | + readOnly={!topItem?.isEditable} | |
| 807 | + style={{ width: " 80%" }} | |
| 808 | + /> | |
| 809 | + </div> | |
| 810 | + </div> | |
| 811 | + ))} | |
| 812 | + </div> | |
| 813 | + <div className={styles.boxLeft}> | |
| 814 | + {leftBoxList.map((item, index) => ( | |
| 815 | + <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}> | |
| 816 | + <div className={styles.boxTitle}>{titleList[index + 3]}</div> | |
| 817 | + | |
| 818 | + <Select | |
| 819 | + optionLabelProp="label" | |
| 820 | + className="mySelects" | |
| 821 | + style={{ width: 180 }} | |
| 822 | + defaultValue={options.length ? options[0].value : ""} | |
| 823 | + onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)} | |
| 824 | + onDropdownVisibleChange={async open => { | |
| 825 | + if (open) { | |
| 826 | + props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions | |
| 827 | + } | |
| 828 | + }} | |
| 829 | + > | |
| 830 | + {!loading ? options.map(option => renderOptionWithImage(option)) : ""} | |
| 831 | + </Select> | |
| 832 | + <div className={styles.boxInput}> | |
| 833 | + {item?.selectImage ? ( | |
| 834 | + <img | |
| 835 | + src={item?.selectImage} | |
| 836 | + alt={item.value} | |
| 837 | + style={{ | |
| 838 | + width: 40, | |
| 839 | + height: 30, | |
| 840 | + marginRight: 8, | |
| 841 | + position: "absolute", | |
| 842 | + left: 20, | |
| 843 | + top: -35, | |
| 844 | + zIndex: 10, | |
| 845 | + }} | |
| 846 | + /> | |
| 847 | + ) : ( | |
| 848 | + "" | |
| 849 | + )} | |
| 850 | + <Input | |
| 851 | + value={item?.showName} | |
| 852 | + onChange={e => handleChangeName(e, findIndexBySname(item.sName))} | |
| 853 | + onFocus={e => handleFocus(e, findIndexBySname(item.sName))} | |
| 854 | + onBlur={e => handleBlur(e, findIndexBySname(item.sName))} | |
| 855 | + readOnly={!item?.isEditable} | |
| 856 | + className={styles.text} | |
| 857 | + /> | |
| 858 | + <Input | |
| 859 | + value={item?.value} | |
| 860 | + onChange={e => handleChange(e, findIndexBySname(item.sName))} | |
| 861 | + onFocus={e => handleFocus(e, findIndexBySname(item.sName))} | |
| 862 | + onBlur={e => handleBlur(e, findIndexBySname(item.sName))} | |
| 863 | + readOnly={!item?.isEditable} | |
| 864 | + style={{ width: " 80%" }} | |
| 865 | + /> | |
| 866 | + </div> | |
| 867 | + </div> | |
| 868 | + ))} | |
| 869 | + </div> | |
| 870 | + <div className={styles.boxRight}> | |
| 871 | + {rightBoxList.map((item, index) => ( | |
| 872 | + <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}> | |
| 873 | + <div className={styles.boxTitle}>{titleList[findIndexBySname(item.sName)]}</div> | |
| 874 | + | |
| 875 | + <Select | |
| 876 | + optionLabelProp="label" | |
| 877 | + className="mySelects" | |
| 878 | + style={{ width: 180 }} | |
| 879 | + defaultValue={options.length ? options[0].value : ""} | |
| 880 | + onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)} | |
| 881 | + onDropdownVisibleChange={async open => { | |
| 882 | + if (open) { | |
| 883 | + props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions | |
| 884 | + } | |
| 885 | + }} | |
| 886 | + > | |
| 887 | + {!loading ? options.map(option => renderOptionWithImage(option)) : ""} | |
| 888 | + </Select> | |
| 889 | + <div className={styles.boxInput}> | |
| 890 | + {item?.selectImage ? ( | |
| 891 | + <img | |
| 892 | + src={item?.selectImage} | |
| 893 | + alt={item.value} | |
| 894 | + style={{ | |
| 895 | + width: 40, | |
| 896 | + height: 30, | |
| 897 | + marginRight: 8, | |
| 898 | + position: "absolute", | |
| 899 | + left: 20, | |
| 900 | + top: -35, | |
| 901 | + zIndex: 10, | |
| 902 | + }} | |
| 903 | + /> | |
| 904 | + ) : ( | |
| 905 | + "" | |
| 906 | + )} | |
| 907 | + | |
| 908 | + <Input | |
| 909 | + value={item?.showName} | |
| 910 | + onChange={e => handleChangeName(e, findIndexBySname(item.sName))} | |
| 911 | + onFocus={e => handleFocus(e, findIndexBySname(item.sName))} | |
| 912 | + onBlur={e => handleBlur(e, findIndexBySname(item.sName))} | |
| 913 | + readOnly={!item?.isEditable} | |
| 914 | + className={styles.text} | |
| 915 | + /> | |
| 916 | + <Input | |
| 917 | + value={item?.value} | |
| 918 | + onChange={e => handleChange(e, findIndexBySname(item.sName))} | |
| 919 | + onFocus={e => handleFocus(e, findIndexBySname(item.sName))} | |
| 920 | + onBlur={e => handleBlur(e, findIndexBySname(item.sName))} | |
| 921 | + readOnly={!item?.isEditable} | |
| 922 | + style={{ width: " 80%" }} | |
| 923 | + /> | |
| 924 | + </div> | |
| 925 | + </div> | |
| 926 | + ))} | |
| 927 | + </div> | |
| 928 | + <div className={styles.boxBottom}> | |
| 929 | + <div className={styles.svgBox}> | |
| 930 | + <SvgBox {...svgBoxProps} /> | |
| 931 | + </div> | |
| 932 | + <div className={styles.content}> | |
| 933 | + {tableColum && tableColum.length | |
| 934 | + ? tableColum.map((item, index) => { | |
| 935 | + const uniqueIndex = index + 9; | |
| 936 | + return ( | |
| 937 | + <div key={uniqueIndex} className={styles.boxFlex}> | |
| 938 | + <div className={styles.boxInput}> | |
| 939 | + <div className={styles.text} style={{ width: "120px" }}> | |
| 940 | + {item.showName} | |
| 941 | + </div> | |
| 942 | + <Input | |
| 943 | + value={boxList[uniqueIndex]?.value} | |
| 944 | + onChange={e => handleChange(e, uniqueIndex)} | |
| 945 | + onFocus={e => handleFocus(e, uniqueIndex)} | |
| 946 | + onBlur={e => handleBlur(e, uniqueIndex)} | |
| 947 | + readOnly={!boxList[uniqueIndex]?.isEditable} | |
| 948 | + style={{ width: " 80%" }} | |
| 949 | + /> | |
| 950 | + </div> | |
| 951 | + </div> | |
| 952 | + ); | |
| 953 | + }) | |
| 954 | + : ""} | |
| 955 | + {boxBodyList && boxBodyList.length | |
| 956 | + ? boxBodyList.map((item, index) => { | |
| 957 | + const uniqueIndex = index + 9 + tableColum.length; | |
| 958 | + | |
| 959 | + return ( | |
| 960 | + <div key={uniqueIndex} className={styles.boxFlex}> | |
| 961 | + <div className={styles.boxInput}> | |
| 962 | + <div className={styles.text} style={{ width: "120px" }}> | |
| 963 | + {item.showName} | |
| 964 | + </div> | |
| 965 | + {boxList[uniqueIndex]?.selectImage ? ( | |
| 966 | + <img | |
| 967 | + src={boxList[uniqueIndex]?.selectImage} | |
| 968 | + alt={boxList[uniqueIndex].value} | |
| 969 | + style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 120, top: 6, zIndex: 10 }} | |
| 970 | + /> | |
| 971 | + ) : ( | |
| 972 | + "" | |
| 973 | + )} | |
| 974 | + {isDefaultValue ? <div className={styles.defaultValue}>{boxList[uniqueIndex]?.value}</div> : ""} | |
| 975 | + <Select | |
| 976 | + optionLabelProp="label" | |
| 977 | + className="mySelects" | |
| 978 | + style={{ width: "80%" }} | |
| 979 | + defaultValue={boxList[uniqueIndex]?.value} | |
| 980 | + onSelect={(value, option) => handleSelect(value, option, uniqueIndex, 1)} | |
| 981 | + onDropdownVisibleChange={async open => { | |
| 982 | + if (open) { | |
| 983 | + props.getSqlOptions(10); // 盒身 | |
| 984 | + } | |
| 985 | + }} | |
| 986 | + > | |
| 987 | + {!loading ? options.map(option => renderOptionWithImage(option)) : ""} | |
| 988 | + </Select> | |
| 989 | + </div> | |
| 990 | + </div> | |
| 991 | + ); | |
| 992 | + }) | |
| 993 | + : ""} | |
| 994 | + <div className={styles.boxFlexs}> | |
| 995 | + {tableDataList && tableDataList.length | |
| 996 | + ? tableDataList.map((item, index) => { | |
| 997 | + const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length; | |
| 998 | + | |
| 999 | + return ( | |
| 1000 | + <div key={uniqueIndex} className={styles.boxInputs}> | |
| 1001 | + <div className={styles.text}>{item.sName}</div> | |
| 1002 | + <Input | |
| 1003 | + value={boxList[uniqueIndex]?.value} | |
| 1004 | + onChange={e => handleChange(e, uniqueIndex)} | |
| 1005 | + onFocus={e => handleFocus(e, uniqueIndex)} | |
| 1006 | + onBlur={e => handleBlur(e, uniqueIndex)} | |
| 1007 | + readOnly={!boxList[uniqueIndex]?.isEditable} | |
| 1008 | + style={{ width: " 60%" }} | |
| 1009 | + /> | |
| 1010 | + </div> | |
| 1011 | + ); | |
| 1012 | + }) | |
| 1013 | + : ""} | |
| 1014 | + </div> | |
| 1015 | + </div> | |
| 1016 | + </div> | |
| 1017 | + </div> | |
| 1018 | + </AntdDraggableModal> | |
| 1019 | + ); | |
| 1020 | +}; | |
| 1021 | + | |
| 1022 | +export default CommonBase(BoxDesignCompontent); | ... | ... |
src/components/Common/BoxDesignCompontent/index.less
0 → 100644
| 1 | +.boxBody { | |
| 2 | + width: 100%; | |
| 3 | + height: 100%; | |
| 4 | + position: relative; | |
| 5 | + padding: 10px; | |
| 6 | + .boxTop { | |
| 7 | + display: flex; | |
| 8 | + align-items: center; | |
| 9 | + justify-content: space-around; | |
| 10 | + width: 640px; | |
| 11 | + height: 100px; | |
| 12 | + margin: 0 auto; | |
| 13 | + .boxFlex { | |
| 14 | + width: 200px; | |
| 15 | + display: flex; | |
| 16 | + align-items: center; | |
| 17 | + flex-wrap: wrap; | |
| 18 | + flex-direction: column; | |
| 19 | + position: relative; | |
| 20 | + } | |
| 21 | + } | |
| 22 | + .boxLeft { | |
| 23 | + width: 180px; | |
| 24 | + height: 320px; | |
| 25 | + display: flex; | |
| 26 | + flex-wrap: wrap; | |
| 27 | + flex-direction: column; | |
| 28 | + position: absolute; | |
| 29 | + justify-content: space-between; | |
| 30 | + left: 10px; | |
| 31 | + top: 130px; | |
| 32 | + text-align: center; | |
| 33 | + } | |
| 34 | + .boxRight { | |
| 35 | + width: 180px; | |
| 36 | + height: 320px; | |
| 37 | + display: flex; | |
| 38 | + flex-wrap: wrap; | |
| 39 | + justify-content: space-between; | |
| 40 | + flex-direction: column; | |
| 41 | + position: absolute; | |
| 42 | + right: 10px; | |
| 43 | + top: 130px; | |
| 44 | + text-align: center; | |
| 45 | + } | |
| 46 | + .boxBottom{ | |
| 47 | + width: 500px; | |
| 48 | + height: 380px; | |
| 49 | + position: absolute; | |
| 50 | + top: 130px; | |
| 51 | + left: 50%; | |
| 52 | + transform: translateX(-50%); | |
| 53 | + .svgBox{ | |
| 54 | + width: 100%; | |
| 55 | + height: 250px; | |
| 56 | + background-color: #9AFF9A; | |
| 57 | + } | |
| 58 | + .content{ | |
| 59 | + width: 100%; | |
| 60 | + height: 130px; | |
| 61 | + :global{ | |
| 62 | + .ant-select-selector{ | |
| 63 | + // width: 380px !important; /* 选择框宽度 */ | |
| 64 | + color: #333; | |
| 65 | + } | |
| 66 | + .ant-select-selection-item { | |
| 67 | + color: #333 !important; /* 选择框文字颜色 */ | |
| 68 | + padding-left: 50px; | |
| 69 | + line-height: 40px; | |
| 70 | + } | |
| 71 | + | |
| 72 | + } | |
| 73 | + } | |
| 74 | + } | |
| 75 | + .boxTitle{ | |
| 76 | + background-color: #3399ff; | |
| 77 | + color: #fff; | |
| 78 | + width: 180px; | |
| 79 | + height: 20px; | |
| 80 | + line-height: 20px; | |
| 81 | + text-align: center; | |
| 82 | + } | |
| 83 | + :global{ | |
| 84 | + .mySelects .ant-select-selector { | |
| 85 | + background-color: #99CCFF !important; /* 选择框背景色 */ | |
| 86 | + height: 40px !important; /* 选择框高度 */ | |
| 87 | + } | |
| 88 | + .mySelects .ant-select-selection-item { | |
| 89 | + color: transparent !important; /* 选择框文字颜色 */ | |
| 90 | + } | |
| 91 | + | |
| 92 | + } | |
| 93 | + .mySelects { | |
| 94 | + position: relative; | |
| 95 | + } | |
| 96 | + .boxInput{ | |
| 97 | + display: flex; | |
| 98 | + align-items: center; | |
| 99 | + justify-content: space-between; | |
| 100 | + width: 180px; | |
| 101 | + height: 40px; | |
| 102 | + position: relative; | |
| 103 | + :global { | |
| 104 | + .ant-input { | |
| 105 | + background-color: #99CCFF !important; /* 输入框背景色 */ | |
| 106 | + border: 1px solid #d9d9d9; | |
| 107 | + height: 40px; | |
| 108 | + } | |
| 109 | + | |
| 110 | + } | |
| 111 | + } | |
| 112 | + .text{ | |
| 113 | + background-color: #99CCFF; | |
| 114 | + width: 100%; | |
| 115 | + height: 40px; | |
| 116 | + line-height: 40px; | |
| 117 | + text-align: center; | |
| 118 | + font-size: 10px; | |
| 119 | + margin-right: 1px; | |
| 120 | + } | |
| 121 | + .content { | |
| 122 | + :global{ | |
| 123 | + .ant-input { | |
| 124 | + background-color: #EEEEEE !important; /* 输入框背景色 */ | |
| 125 | + height: 40px; | |
| 126 | + } | |
| 127 | + .ant-select-selector { | |
| 128 | + background-color: #EEEEEE !important; /* 选择框背景色 */ | |
| 129 | + height: 40px !important; /* 选择框高度 */ | |
| 130 | + } | |
| 131 | + | |
| 132 | + } | |
| 133 | + .text{ | |
| 134 | + background-color: #EEEEEE ; | |
| 135 | + margin: 0; | |
| 136 | + } | |
| 137 | + .boxFlex { | |
| 138 | + display: flex; | |
| 139 | + align-items: center; | |
| 140 | + flex-wrap: wrap; | |
| 141 | + flex-direction: column; | |
| 142 | + width: 500px; | |
| 143 | + } | |
| 144 | + .boxFlexs{ | |
| 145 | + display: flex; | |
| 146 | + align-items: center; | |
| 147 | + width: 500px; | |
| 148 | + justify-content: space-between; | |
| 149 | + .boxInputs{ | |
| 150 | + display: flex; | |
| 151 | + align-items: center; | |
| 152 | + flex: 1; | |
| 153 | + :global{ | |
| 154 | + .ant-input { | |
| 155 | + background-color: #EEEEEE !important; /* 输入框背景色 */ | |
| 156 | + height: 40px; | |
| 157 | + } | |
| 158 | + } | |
| 159 | + } | |
| 160 | + } | |
| 161 | + .boxInput{ | |
| 162 | + width: 100%; | |
| 163 | + position: relative; | |
| 164 | + .defaultValue{ | |
| 165 | + position: absolute; | |
| 166 | + left: 32%; | |
| 167 | + top: 3px; | |
| 168 | + width: 60px; | |
| 169 | + height: 30px; | |
| 170 | + background-color: #EEE; | |
| 171 | + color: #333; | |
| 172 | + line-height: 40px; | |
| 173 | + z-index: 2; | |
| 174 | + text-align: center; | |
| 175 | + } | |
| 176 | + } | |
| 177 | + } | |
| 178 | +} | ... | ... |
src/components/Common/BoxDesignCompontent/showSvg.js
0 → 100644
| 1 | +/* eslint-disable */ | |
| 2 | +import React, { useRef, useState, useEffect } from "react"; | |
| 3 | +import styles from "./index.less"; | |
| 4 | +import { | |
| 5 | + createPathElement, | |
| 6 | + createTopTongue, | |
| 7 | + createTopTongueType1, | |
| 8 | + createTrapezoid, | |
| 9 | + createDynamicTop, | |
| 10 | + createNoneProject, | |
| 11 | + createLineWeltTop, | |
| 12 | + createIsoscelesTrapezoidWeltTop, | |
| 13 | + createTrapezoidWeltTop, | |
| 14 | + createFoldWeltTop, | |
| 15 | + createFoldWeltTopLine, | |
| 16 | + createRoundedCornersWeltTop, | |
| 17 | + createRightAngleBoxBottomComponent, | |
| 18 | + createBoxBottomComponent1, | |
| 19 | + createBoxBottomComponent2, | |
| 20 | + createBoxBottomComponent3, | |
| 21 | + createBoxBottomComponent4, | |
| 22 | + createBoxBottomComponent5, | |
| 23 | + createBoxBottomComponent6, | |
| 24 | + createBoxComponentNew, | |
| 25 | + createBoxComponentNew1, | |
| 26 | + createBoxComponentNew2, | |
| 27 | + createBoxComponentNew3, | |
| 28 | + createBoxComponentNew4, | |
| 29 | + createBoxComponentNew5, | |
| 30 | + createBoxComponentNew4_1, | |
| 31 | + createWelt, | |
| 32 | + createWelt1, | |
| 33 | + createWelt2, | |
| 34 | + createWelt2Right, | |
| 35 | + createWelt3, | |
| 36 | + createWelt3Right, | |
| 37 | + createText, | |
| 38 | + createDoubleArrow, | |
| 39 | + createHorizontalDoubleArrow, | |
| 40 | +} from "../BoxDesign/createAirplaneBox"; | |
| 41 | +const SvgBox = props => { | |
| 42 | + const svgContainerRef = useRef(null); | |
| 43 | + const svgRef = useRef(null); | |
| 44 | + const [boxKey, setBoxKey] = useState(new Date().getTime()); | |
| 45 | + const { boxList, dSvgBoxWidth, dSvgBoxHeight } = props; | |
| 46 | + const [width, setWidth] = useState(0); | |
| 47 | + const [height, setHeight] = useState(0); | |
| 48 | + const [deep, setDeep] = useState(0); | |
| 49 | + const [svgType, setSvgType] = useState(1); | |
| 50 | + // 盒身 | |
| 51 | + useEffect( | |
| 52 | + () => { | |
| 53 | + setTimeout(() => { | |
| 54 | + const svg = svgRef.current; | |
| 55 | + if (svg) { | |
| 56 | + initSVG(); | |
| 57 | + } | |
| 58 | + }, 0); | |
| 59 | + }, | |
| 60 | + [boxList, svgType] | |
| 61 | + ); | |
| 62 | + | |
| 63 | + // 初始化svg | |
| 64 | + const initSVG = () => { | |
| 65 | + setBoxKey(new Date().getTime()); | |
| 66 | + const svg = svgRef.current; | |
| 67 | + svg.innerHTML = ""; | |
| 68 | + | |
| 69 | + // 获取盒型类型 | |
| 70 | + const svgTypes = boxList.find(x => x.sName === "盒身")?.type || 1; | |
| 71 | + setSvgType(svgTypes); | |
| 72 | + | |
| 73 | + // 获取盒长、盒宽、盒高 | |
| 74 | + const boxLength = Number(boxList.find(x => x.sName === "盒长")?.value) || 0; | |
| 75 | + const boxWidth = Number(boxList.find(x => x.sName === "盒宽")?.value) || 0; | |
| 76 | + const boxHeight = Number(boxList.find(x => x.sName === "盒高")?.value) || 0; | |
| 77 | + | |
| 78 | + setWidth(boxLength); | |
| 79 | + setHeight(boxWidth); | |
| 80 | + setDeep(boxHeight); | |
| 81 | + | |
| 82 | + // 计算视口宽度和高度 | |
| 83 | + const zbtb = boxList.find(x => x.sName === "左贴边位"); | |
| 84 | + const ybtb = boxList.find(x => x.sName === "右贴边位"); | |
| 85 | + const dZTBW = Number(zbtb?.value) || 0; | |
| 86 | + const dYTBW = Number(ybtb?.value) || 0; | |
| 87 | + const sfhs = boxList.find(x => x.sName === "上方盒舌"); | |
| 88 | + const dSFHS = Number(sfhs?.value) || 0; | |
| 89 | + const hdzj = boxList.find(x => x.sName === "盒底组件"); | |
| 90 | + const xfhs = boxList.find(x => x.sName === "下方盒舌"); | |
| 91 | + const dXFHS = Number(xfhs?.value) || 0; | |
| 92 | + const zsbj = boxList.find(x => x.sName === "左(上)插位组件"); | |
| 93 | + const dZSCW = Number(zsbj?.value) || 0; | |
| 94 | + const ysbj = boxList.find(x => x.sName === "右(上)插位组件"); | |
| 95 | + const dYSCW = Number(ysbj?.value) || 0; | |
| 96 | + const zxbj = boxList.find(x => x.sName === "左(下)插位组件"); | |
| 97 | + const dZXCW = Number(zxbj?.value) || 0; | |
| 98 | + const yxbj = boxList.find(x => x.sName === "右(下)插位组件"); | |
| 99 | + const dYXCW = Number(yxbj?.value) || 0; | |
| 100 | + // 根据选择不同的部件 计算尺寸 | |
| 101 | + | |
| 102 | + // const viewBoxWidth = (boxLength * 2 + boxHeight * 2 + dYTBW + dZTBW); | |
| 103 | + let viewBoxWidth = 0; | |
| 104 | + let max = 0; | |
| 105 | + // 展宽 | |
| 106 | + if (boxList && boxList.length) { | |
| 107 | + // 如果存在部件和盒舌 取最大的 | |
| 108 | + const top = topOffect(boxList, boxLength, boxWidth, boxHeight); | |
| 109 | + const bottom = bottomOffect(boxList, boxLength, boxWidth, boxHeight); | |
| 110 | + max = top + bottom + 4; | |
| 111 | + } | |
| 112 | + | |
| 113 | + let viewBoxHeight = Number(boxWidth) + max; | |
| 114 | + if (Number(svgType) === 1) { | |
| 115 | + // 四面盒身 | |
| 116 | + viewBoxWidth = dZTBW + Number(boxLength) * 2 + Number(boxWidth) * 2; | |
| 117 | + } else if (Number(svgType) === 2) { | |
| 118 | + viewBoxWidth = boxLength * 2 + boxWidth + dYTBW + dZTBW; | |
| 119 | + } else if (Number(svgType) === 3) { | |
| 120 | + viewBoxWidth = boxLength + boxWidth * 2 + dYTBW + dZTBW; | |
| 121 | + } else { | |
| 122 | + viewBoxWidth = boxLength + boxHeight + dYTBW + dZTBW; | |
| 123 | + viewBoxHeight = Number(boxWidth) + Number(boxHeight) * 2 + max; | |
| 124 | + } | |
| 125 | + if (!dSvgBoxWidth) { | |
| 126 | + viewBoxWidth = Number(viewBoxWidth) + 200; | |
| 127 | + viewBoxHeight = Number(viewBoxHeight) + 200; | |
| 128 | + } | |
| 129 | + // 计算缩放比例 | |
| 130 | + let scale = 1; | |
| 131 | + const ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight) * scale; | |
| 132 | + svg.setAttribute("viewBox", `${-(zbtb?.value * scale)} ${-ySvg} ${dSvgBoxWidth} ${dSvgBoxHeight}`); | |
| 133 | + svg.setAttribute("width", `${dSvgBoxWidth}px`); | |
| 134 | + svg.setAttribute("height", `${dSvgBoxHeight}px`); | |
| 135 | + svgContainerRef.current.style.width = `${dSvgBoxWidth}px`; | |
| 136 | + svgContainerRef.current.style.height = `${dSvgBoxHeight}px`; | |
| 137 | + | |
| 138 | + const scaledWidth = boxLength * scale; | |
| 139 | + const scaledHeight = boxWidth * scale; | |
| 140 | + const scaledDeep = boxHeight * scale; | |
| 141 | + const scales = dSvgBoxWidth ? scale : 1; | |
| 142 | + // 根据盒型类型生成不同的盒身 四面盒身 | |
| 143 | + if (Number(svgType) === 1) { | |
| 144 | + const rectangles = [ | |
| 145 | + { x: 0, y: 0, width: scaledWidth, height: scaledDeep }, | |
| 146 | + { x: 0 + scaledWidth, y: 0, width: scaledHeight, height: scaledDeep }, | |
| 147 | + { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep }, | |
| 148 | + { x: 0 + scaledWidth * 2 + scaledHeight, y: 0, width: scaledHeight, height: scaledDeep }, | |
| 149 | + ]; | |
| 150 | + rectangles.forEach(rect => { | |
| 151 | + svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); | |
| 152 | + }); | |
| 153 | + | |
| 154 | + let pathList = []; | |
| 155 | + // 上方盒舌 | |
| 156 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth, 0)); | |
| 157 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, -scaledHeight, -dSFHS * scale, scaledWidth * 2 + scaledHeight * 2, 0)); | |
| 158 | + if (sfhs?.type && dSFHS) { | |
| 159 | + pathList.push(createText(scaledWidth + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 160 | + pathList.push(createText(scaledWidth * 2 + scaledHeight + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 161 | + } | |
| 162 | + // if (sfhs?.type === "1004") { | |
| 163 | + // pathList.push(createFoldWeltTopLine(scaledHeight * 0.5, -dSFHS * scale * 0.5, scaledWidth, 0)); | |
| 164 | + // pathList.push(createFoldWeltTopLine(-scaledHeight * 0.5, -dSFHS * scale * 0.5, scaledWidth * 2 + scaledHeight * 2, 0)); | |
| 165 | + // } | |
| 166 | + // if (sfhs?.type === "1005") { | |
| 167 | + // pathList.push(createFoldWeltTopLine(scaledHeight * 0.85, -dSFHS * scale * 0.9, scaledWidth, 0)); | |
| 168 | + // pathList.push(createFoldWeltTopLine(-scaledHeight * 0.85, -dSFHS * scale * 0.9, scaledWidth * 2 + scaledHeight * 2, 0)); | |
| 169 | + // } | |
| 170 | + // 盒底组件 | |
| 171 | + if (hdzj && hdzj.type) { | |
| 172 | + // 盒底组件 | |
| 173 | + pathList.push(createBoxBottomComponent(hdzj?.type, scaledWidth, scaledHeight, Number(hdzj?.value) * scale, 0, scaledDeep)); | |
| 174 | + pathList.push(createText(scaledWidth / 2, scaledDeep + (Number(hdzj?.value) / 2) * scales, 10 * scales, Number(hdzj?.value))); | |
| 175 | + } else { | |
| 176 | + // 下方盒舌 | |
| 177 | + | |
| 178 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth, scaledDeep)); | |
| 179 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, -scaledHeight, dXFHS * scale, scaledWidth * 2 + scaledHeight * 2, scaledDeep)); | |
| 180 | + if (xfhs?.type && dXFHS) { | |
| 181 | + pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 10) * scales, 10 * scales, dXFHS)); | |
| 182 | + pathList.push(createText(scaledWidth * 2 + scaledHeight + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 10) * scales, 10 * scales, dXFHS)); | |
| 183 | + } | |
| 184 | + } | |
| 185 | + | |
| 186 | + // 左边贴边 | |
| 187 | + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); | |
| 188 | + if (zbtb?.type && dZTBW) { | |
| 189 | + pathList.push(createText(-dZTBW * 0.4, scaledDeep / 2, 10 * scales, dZTBW)); | |
| 190 | + } | |
| 191 | + // 右边贴边 | |
| 192 | + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight * 2, 0)); | |
| 193 | + if (ybtb?.type && dYTBW) { | |
| 194 | + pathList.push(createText(scaledWidth * 2 + scaledHeight * 2 + dYTBW * 0.4, scaledDeep / 2, 10 * scales, dYTBW)); | |
| 195 | + } | |
| 196 | + // 左上部件 | |
| 197 | + pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0)); | |
| 198 | + if ((zsbj?.type === "3001" && zsbj?.value )|| (zsbj?.type === "3006" && zsbj?.value)) { | |
| 199 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 200 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 201 | + // 插位值 | |
| 202 | + pathList.push(createText(scaledWidth / 2, -scaledHeight - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 203 | + } else if (zsbj?.type === "3002" && dZSCW) { | |
| 204 | + pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 205 | + } else if (zsbj?.type === "3003" && dZSCW) { | |
| 206 | + pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 207 | + } else if (zsbj?.type === "3004" && zsbj?.value) { | |
| 208 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 209 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 210 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); | |
| 211 | + pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 212 | + pathList.push(createText(scaledWidth * 0.3, -(scaledHeight * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 213 | + } else if (zsbj?.type === "3005" && zsbj?.value) { | |
| 214 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, -scaledHeight / 2, scales)); | |
| 215 | + pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 216 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); | |
| 217 | + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 218 | + } | |
| 219 | + // 右上部件 | |
| 220 | + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0)); | |
| 221 | + if (ysbj?.type === "6001" && ysbj?.value) { | |
| 222 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 223 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 224 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 225 | + } else if (ysbj?.type === "6002" && dYSCW) { | |
| 226 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 227 | + } else if (ysbj?.type === "6003" && dYSCW) { | |
| 228 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 229 | + } else if (ysbj?.type === "6004" && ysbj?.value) { | |
| 230 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 231 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 232 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); | |
| 233 | + pathList.push( | |
| 234 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W") | |
| 235 | + ); | |
| 236 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 237 | + } else if (ysbj?.type === "6005" && ysbj?.value) { | |
| 238 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales)); | |
| 239 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 240 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); | |
| 241 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 242 | + } | |
| 243 | + // 左下部件- | |
| 244 | + if (!(hdzj && hdzj.type)) { | |
| 245 | + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep)); | |
| 246 | + if (zxbj?.type === "4001" && zxbj?.value) { | |
| 247 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 248 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 249 | + pathList.push(createText(scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 250 | + } else if (zxbj?.type === "4002" && dZXCW) { | |
| 251 | + pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 252 | + } else if (zxbj?.type === "4003" && dZXCW) { | |
| 253 | + pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 254 | + } else if (zxbj?.type === "4004" && zxbj?.value) { | |
| 255 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 256 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 257 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 258 | + pathList.push(createText(scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 259 | + pathList.push(createText(scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 260 | + } else if (zxbj?.type === "4005" && zxbj?.value) { | |
| 261 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); | |
| 262 | + pathList.push(createText(scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 263 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 264 | + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 265 | + } | |
| 266 | + } | |
| 267 | + if (!(hdzj && hdzj.type)) { | |
| 268 | + pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW * scale, scaledWidth + scaledHeight, scaledDeep)); | |
| 269 | + if (yxbj?.type === "7001" && yxbj?.value) { | |
| 270 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 271 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 272 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + scaledHeight + dYXCW / 2 - 4, 10 * scales, dYXCW)); | |
| 273 | + } else if (yxbj?.type === "7004" && yxbj?.value) { | |
| 274 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 275 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 - 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 276 | + pathList.push( | |
| 277 | + createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales) | |
| 278 | + ); | |
| 279 | + pathList.push( | |
| 280 | + createText( | |
| 281 | + scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, | |
| 282 | + scaledDeep + (scaledHeight + scaledHeight / 2), | |
| 283 | + 10 * scales, | |
| 284 | + "W" | |
| 285 | + ) | |
| 286 | + ); | |
| 287 | + pathList.push( | |
| 288 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dYXCW / 2 - 4, 10 * scales, dYXCW) | |
| 289 | + ); | |
| 290 | + } else if (yxbj?.type === "7005" && yxbj?.value) { | |
| 291 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); | |
| 292 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 293 | + pathList.push( | |
| 294 | + createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales) | |
| 295 | + ); | |
| 296 | + pathList.push( | |
| 297 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W") | |
| 298 | + ); | |
| 299 | + } else if (dYXCW && yxbj?.type) { | |
| 300 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + dYXCW / 2 - 4, 10 * scales, dYXCW)); | |
| 301 | + } | |
| 302 | + } | |
| 303 | + // 右下部件 | |
| 304 | + | |
| 305 | + // 纵向 D | |
| 306 | + if (scaledDeep && scaledWidth && scaledHeight) { | |
| 307 | + pathList.push(createDoubleArrow(scaledDeep, scaledWidth + scaledHeight + scaledWidth / 2, scaledDeep / 2, scales)); | |
| 308 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth / 2 + 10 * scales, scaledDeep / 2, 10 * scales, "D")); | |
| 309 | + | |
| 310 | + // 横向 L | |
| 311 | + pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledDeep / 2, scales)); | |
| 312 | + pathList.push(createText(scaledWidth / 2, scaledDeep / 2 + 10 * scales, 10 * scales, "L")); | |
| 313 | + // W | |
| 314 | + pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledWidth + scaledHeight / 2, scaledDeep * 0.3, scale)); | |
| 315 | + pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep * 0.3 + 10 * scales, 10 * scales, "W")); | |
| 316 | + } | |
| 317 | + pathList.forEach(x => { | |
| 318 | + svg.appendChild(x); | |
| 319 | + }); | |
| 320 | + } else if (Number(svgType) === 2) { | |
| 321 | + // 单折盒身 | |
| 322 | + const rectangles = [ | |
| 323 | + { x: 0, y: 0, width: scaledWidth, height: scaledDeep }, | |
| 324 | + { x: 0 + scaledWidth, y: 0, width: scaledHeight, height: scaledDeep }, | |
| 325 | + { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep }, | |
| 326 | + ]; | |
| 327 | + rectangles.forEach(rect => { | |
| 328 | + svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); | |
| 329 | + }); | |
| 330 | + let pathList = []; | |
| 331 | + // 上方盒舌 | |
| 332 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth, 0)); | |
| 333 | + if (sfhs?.type && dSFHS) { | |
| 334 | + pathList.push(createText(scaledWidth + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 335 | + } | |
| 336 | + // 下方盒舌 | |
| 337 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth, scaledDeep)); | |
| 338 | + if (xfhs?.type && dXFHS) { | |
| 339 | + pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 340 | + } | |
| 341 | + // 左边贴边 | |
| 342 | + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); | |
| 343 | + if (zbtb?.type && dZTBW) { | |
| 344 | + pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW)); | |
| 345 | + } | |
| 346 | + // 右边贴边 | |
| 347 | + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight, 0)); | |
| 348 | + if (zbtb?.type && dYTBW) { | |
| 349 | + pathList.push(createText(scaledWidth * 2 + scaledHeight + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW)); | |
| 350 | + } | |
| 351 | + // 左上部件 | |
| 352 | + pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0)); | |
| 353 | + if ((zsbj?.type === "3001" && zsbj?.value )|| (zsbj?.type === "3006" && zsbj?.value)) { | |
| 354 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 355 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 356 | + pathList.push(createText(scaledWidth / 2, -scaledHeight - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 357 | + } else if (zsbj?.type === "3004" && zsbj?.value) { | |
| 358 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 359 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 360 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); | |
| 361 | + pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 362 | + pathList.push(createText(scaledWidth * 0.3, -(scaledHeight * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 363 | + } else if (zsbj?.type === "3005" && zsbj?.value) { | |
| 364 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, -scaledHeight / 2, scales)); | |
| 365 | + pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 366 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); | |
| 367 | + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 368 | + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 369 | + } else if (zsbj?.type && dZSCW) { | |
| 370 | + pathList.push(createText(scaledWidth / 2, -(dZSCW / 2 - 5), 10 * scales, dZSCW)); | |
| 371 | + } | |
| 372 | + // 右上部件 | |
| 373 | + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0)); | |
| 374 | + if (ysbj?.type === "6001" && ysbj?.value) { | |
| 375 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 376 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 377 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 378 | + } else if (ysbj?.type === "6004" && ysbj?.value) { | |
| 379 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 380 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 381 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); | |
| 382 | + pathList.push( | |
| 383 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W") | |
| 384 | + ); | |
| 385 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 386 | + } else if (ysbj?.type === "6005" && ysbj?.value) { | |
| 387 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales)); | |
| 388 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 389 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); | |
| 390 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 391 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 392 | + } else if (ysbj?.type && dYSCW) { | |
| 393 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 394 | + } | |
| 395 | + // 左下部件- | |
| 396 | + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep)); | |
| 397 | + if (zxbj?.type === "4001" && zxbj?.value) { | |
| 398 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 399 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 400 | + pathList.push(createText(scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 401 | + } else if (zxbj?.type === "4004" && zxbj?.value) { | |
| 402 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 403 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 404 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 405 | + pathList.push(createText(scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 406 | + pathList.push(createText(scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 407 | + } else if (zxbj?.type === "4005" && zxbj?.value) { | |
| 408 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); | |
| 409 | + pathList.push(createText(scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 410 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 411 | + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 412 | + } else if (zxbj?.type && dZXCW) { | |
| 413 | + pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 414 | + } | |
| 415 | + // 右下部件 | |
| 416 | + pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW, scaledWidth + scaledHeight, scaledDeep)); | |
| 417 | + if (yxbj?.type === "7001" && yxbj?.value) { | |
| 418 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 419 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 420 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + scaledHeight + dYXCW / 2 - 4, 10 * scales, dYXCW)); | |
| 421 | + } else if (yxbj?.type === "7004" && yxbj?.value) { | |
| 422 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 423 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 - 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 424 | + pathList.push( | |
| 425 | + createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales) | |
| 426 | + ); | |
| 427 | + pathList.push( | |
| 428 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W") | |
| 429 | + ); | |
| 430 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dYXCW / 2 - 4, 10 * scales, dYXCW)); | |
| 431 | + } else if (yxbj?.type === "7005" && yxbj?.value) { | |
| 432 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); | |
| 433 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 434 | + pathList.push( | |
| 435 | + createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales) | |
| 436 | + ); | |
| 437 | + pathList.push( | |
| 438 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scale, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scale, "W") | |
| 439 | + ); | |
| 440 | + } else if (dYXCW && yxbj?.type) { | |
| 441 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + dYXCW / 2 - 4, 10 * scales, dYXCW)); | |
| 442 | + } | |
| 443 | + if (scaledDeep && scaledWidth && scaledHeight) { | |
| 444 | + // 纵向 D | |
| 445 | + pathList.push(createDoubleArrow(scaledDeep, scaledWidth + scaledHeight + scaledWidth / 2, scaledDeep / 2, scales)); | |
| 446 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth / 2 + 10, scaledDeep / 2, 10 * scales, "D")); | |
| 447 | + | |
| 448 | + // 横向 L | |
| 449 | + pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledDeep / 2, scales)); | |
| 450 | + pathList.push(createText(scaledWidth / 2, scaledDeep / 2 + 10, 10 * scales, "L")); | |
| 451 | + // W | |
| 452 | + pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledWidth + scaledHeight / 2, scaledDeep * 0.3, scales)); | |
| 453 | + pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep * 0.3 + 10, 10 * scales, "W")); | |
| 454 | + } | |
| 455 | + | |
| 456 | + pathList.forEach(x => { | |
| 457 | + svg.appendChild(x); | |
| 458 | + }); | |
| 459 | + } else if (Number(svgType) === 3) { | |
| 460 | + // 双折盒 | |
| 461 | + const rectangles = [ | |
| 462 | + { x: 0, y: 0, width: scaledHeight, height: scaledDeep }, | |
| 463 | + { x: 0 + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep }, | |
| 464 | + { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledHeight, height: scaledDeep }, | |
| 465 | + ]; | |
| 466 | + rectangles.forEach(rect => { | |
| 467 | + svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); | |
| 468 | + }); | |
| 469 | + let pathList = []; | |
| 470 | + // 上方盒舌 | |
| 471 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, 0, 0)); | |
| 472 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth + scaledHeight, 0)); | |
| 473 | + if (sfhs?.type && dSFHS) { | |
| 474 | + pathList.push(createText(scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 475 | + pathList.push(createText(scaledWidth + scaledHeight + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 476 | + } | |
| 477 | + // 下方盒舌 | |
| 478 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, 0, scaledDeep)); | |
| 479 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth + scaledHeight, scaledDeep)); | |
| 480 | + if (xfhs?.type && dXFHS) { | |
| 481 | + pathList.push(createText(scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dXFHS)); | |
| 482 | + pathList.push(createText(scaledWidth + scaledHeight + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dXFHS)); | |
| 483 | + } | |
| 484 | + // 左边贴边 | |
| 485 | + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); | |
| 486 | + if (zbtb?.type && dZTBW) { | |
| 487 | + pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW)); | |
| 488 | + } | |
| 489 | + // 右边贴边 | |
| 490 | + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth + scaledHeight * 2, 0)); | |
| 491 | + if (zbtb?.type && dYTBW) { | |
| 492 | + pathList.push(createText(scaledWidth + scaledHeight * 2 + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW)); | |
| 493 | + } | |
| 494 | + // 左下部件- | |
| 495 | + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, scaledHeight, scaledDeep)); | |
| 496 | + if (zxbj?.type === "4001" && zxbj?.value) { | |
| 497 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 498 | + pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 499 | + pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 500 | + pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 501 | + } else if (zxbj?.type === "4004" && zxbj?.value) { | |
| 502 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 503 | + pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 504 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 505 | + pathList.push(createText(scaledHeight + scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 506 | + pathList.push(createText(scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 507 | + } else if (zxbj?.type === "4005" && zxbj?.value) { | |
| 508 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); | |
| 509 | + pathList.push(createText(scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 510 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 511 | + pathList.push(createText(scaledHeight + scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 512 | + } else if (zxbj?.type && dZXCW) { | |
| 513 | + pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 514 | + } | |
| 515 | + // 右上部件 | |
| 516 | + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledHeight, 0)); | |
| 517 | + if (ysbj?.type === "6001" && ysbj?.value) { | |
| 518 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 519 | + pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 520 | + pathList.push(createText(scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 521 | + } else if (ysbj?.type === "6004" && ysbj?.value) { | |
| 522 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 523 | + pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 524 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); | |
| 525 | + pathList.push(createText(scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 526 | + pathList.push(createText(scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 527 | + } else if (ysbj?.type === "6005" && ysbj?.value) { | |
| 528 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales)); | |
| 529 | + pathList.push(createText(scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 530 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); | |
| 531 | + pathList.push(createText(scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 532 | + } else if (ysbj?.type && dYSCW) { | |
| 533 | + pathList.push(createText(scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 534 | + } | |
| 535 | + | |
| 536 | + if (scaledDeep && scaledWidth && scaledHeight) { | |
| 537 | + // 纵向 D | |
| 538 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledWidth + scaledHeight / 2, scaledDeep / 2, scales)); | |
| 539 | + pathList.push(createText(scaledHeight + scaledWidth + scaledHeight / 2 + 10, scaledDeep / 2, 10 * scales, "D")); | |
| 540 | + | |
| 541 | + // 横向 L | |
| 542 | + pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledHeight + scaledWidth / 2, scaledDeep / 2, scales)); | |
| 543 | + pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep / 2 + 10, 10 * scales, "L")); | |
| 544 | + // W | |
| 545 | + pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledHeight / 2, scaledDeep * 0.3, scales)); | |
| 546 | + pathList.push(createText(scaledHeight / 2, scaledDeep * 0.3 + 10, 10 * scales, "W")); | |
| 547 | + } | |
| 548 | + | |
| 549 | + pathList.forEach(x => { | |
| 550 | + svg.appendChild(x); | |
| 551 | + }); | |
| 552 | + } else { | |
| 553 | + svg.appendChild(createFullTelescope(scaledWidth, scaledHeight, scaledDeep, 0, 0)); | |
| 554 | + // createFullTelescope | |
| 555 | + let pathList = []; | |
| 556 | + if (scaledDeep && scaledWidth && scaledHeight) { | |
| 557 | + // 纵向 D | |
| 558 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledHeight / 2, scales)); | |
| 559 | + pathList.push(createText(scaledWidth * 0.2 + 10, scaledHeight / 2, 10 * scales, "W")); | |
| 560 | + | |
| 561 | + // 横向 L | |
| 562 | + pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledHeight * 0.8, scales)); | |
| 563 | + pathList.push(createText(scaledWidth / 2, scaledHeight * 0.8 + 10, 10 * scales, "L")); | |
| 564 | + // W | |
| 565 | + pathList.push(createHorizontalDoubleArrow(scaledDeep, -scaledDeep / 2, scaledHeight * 0.3, scales)); | |
| 566 | + pathList.push(createText(-scaledDeep / 2, scaledHeight * 0.3 + 10, 10 * scales, "D")); | |
| 567 | + } | |
| 568 | + pathList.forEach(x => { | |
| 569 | + svg.appendChild(x); | |
| 570 | + }); | |
| 571 | + } | |
| 572 | + }; | |
| 573 | + // 计算头部偏移 | |
| 574 | + const topOffect = (list, length, width, height) => { | |
| 575 | + // 判断code | |
| 576 | + const valueList = list.filter(x => x.type !== ("" || null)); | |
| 577 | + // const titleList = ['上方盒舌','左(上)插位组件','右(上)插位组件'] | |
| 578 | + const sfhs = valueList.find(x => x.sName === "上方盒舌"); | |
| 579 | + const zscw = valueList.find(x => x.sName === "左(上)插位组件"); | |
| 580 | + const yscw = valueList.find(x => x.sName === "右(上)插位组件"); | |
| 581 | + let top = 0; | |
| 582 | + const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006"]; | |
| 583 | + const four = ["6004", "3004", "4004", "7004"]; | |
| 584 | + const five = ["6005", "3005", "4005", "7005"]; | |
| 585 | + const dYSCW = Number(yscw?.value) || 0; | |
| 586 | + const dZSCW = Number(zscw?.value) || 0; | |
| 587 | + // 如果存在插位就不计算盒舌 | |
| 588 | + if (zscw?.type && yscw?.type) { | |
| 589 | + const max = Math.max(dZSCW, dYSCW); | |
| 590 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 591 | + top = width * 2; | |
| 592 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 593 | + top = width * 2 + max; | |
| 594 | + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { | |
| 595 | + top = width + max; | |
| 596 | + } else { | |
| 597 | + top = max; | |
| 598 | + } | |
| 599 | + } else if (yscw?.type) { | |
| 600 | + const max = dYSCW; | |
| 601 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 602 | + top = width * 2; | |
| 603 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 604 | + top = width * 2 + max; | |
| 605 | + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { | |
| 606 | + top = width + max; | |
| 607 | + } else { | |
| 608 | + top = max; | |
| 609 | + } | |
| 610 | + } else if (zscw?.type) { | |
| 611 | + const max = dZSCW; | |
| 612 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 613 | + top = width * 2; | |
| 614 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 615 | + top = width * 2 + max; | |
| 616 | + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { | |
| 617 | + top = width + max; | |
| 618 | + } else { | |
| 619 | + top = max; | |
| 620 | + } | |
| 621 | + } else { | |
| 622 | + top = sfhs?.value; | |
| 623 | + } | |
| 624 | + return isNaN(top) ? 0 : top; | |
| 625 | + }; | |
| 626 | + const bottomOffect = (list, length, width, height) => { | |
| 627 | + // 判断code | |
| 628 | + const valueList = list.filter(x => x.type !== ("" || null)); | |
| 629 | + // const titleList = ['上方盒舌','左(上)插位组件','右(上)插位组件'] | |
| 630 | + const sfhs = valueList.find(x => x.sName === "下方盒舌"); | |
| 631 | + const zscw = valueList.find(x => x.sName === "左(下)插位组件"); | |
| 632 | + const yscw = valueList.find(x => x.sName === "右(下)插位组件"); | |
| 633 | + const hdzj = valueList.find(x => x.sName === "盒底组件"); | |
| 634 | + // 将找到的对象放入数组中，并过滤掉 undefined 值 | |
| 635 | + // 使用 reduce 方法比较 value 属性，找出最大的对象 | |
| 636 | + let top = 0; | |
| 637 | + const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006"]; | |
| 638 | + const four = ["6004", "3004", "4004", "7004"]; | |
| 639 | + const five = ["6005", "3005", "4005", "7005"]; | |
| 640 | + const dYSCW = Number(yscw?.value) || 0; | |
| 641 | + const dZSCW = Number(zscw?.value) || 0; | |
| 642 | + if (hdzj?.type) { | |
| 643 | + return Number(hdzj?.value); | |
| 644 | + } | |
| 645 | + if (zscw?.type && yscw?.type) { | |
| 646 | + const max = Math.max(dZSCW, dYSCW); | |
| 647 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 648 | + top = width * 2; | |
| 649 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 650 | + top = width * 2 + max; | |
| 651 | + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { | |
| 652 | + top = width + max; | |
| 653 | + } else { | |
| 654 | + top = max; | |
| 655 | + } | |
| 656 | + } else if (yscw?.type) { | |
| 657 | + const max = dYSCW; | |
| 658 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 659 | + top = width * 2; | |
| 660 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 661 | + top = width * 2 + max; | |
| 662 | + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { | |
| 663 | + top = width + max; | |
| 664 | + } else { | |
| 665 | + top = max; | |
| 666 | + } | |
| 667 | + } else if (zscw?.type) { | |
| 668 | + const max = dZSCW; | |
| 669 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 670 | + top = width * 2; | |
| 671 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 672 | + top = width * 2 + max; | |
| 673 | + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { | |
| 674 | + top = width + max; | |
| 675 | + } else { | |
| 676 | + top = max; | |
| 677 | + } | |
| 678 | + } else { | |
| 679 | + top = sfhs?.value; | |
| 680 | + } | |
| 681 | + // if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 682 | + // top = width * 2; | |
| 683 | + // } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 684 | + // if (dZSCW && dYSCW) { | |
| 685 | + // const max = Math.max(dZSCW, dYSCW); | |
| 686 | + // top = width * 2 + max; | |
| 687 | + // } else if (dZSCW && !dYSCW) { | |
| 688 | + // top = width * 2 + dZSCW; | |
| 689 | + // } else if (!dZSCW && dYSCW) { | |
| 690 | + // top = width * 2 + dYSCW; | |
| 691 | + // } | |
| 692 | + // } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { | |
| 693 | + // if (dZSCW && dYSCW) { | |
| 694 | + // const max = Math.max(dZSCW, dYSCW); | |
| 695 | + // top = width + max; | |
| 696 | + // } else if (dZSCW && !dYSCW) { | |
| 697 | + // top = width + dZSCW; | |
| 698 | + // } else if (!dZSCW && dYSCW) { | |
| 699 | + // top = width + dYSCW; | |
| 700 | + // } | |
| 701 | + // } else { | |
| 702 | + // if (dZSCW && !dYSCW) { | |
| 703 | + // top = Number(dZSCW); | |
| 704 | + // } else if (!dZSCW && dYSCW) { | |
| 705 | + // top = Number(dYSCW); | |
| 706 | + // } else { | |
| 707 | + // top = Number(sfhs?.value); | |
| 708 | + // } | |
| 709 | + // } | |
| 710 | + | |
| 711 | + return isNaN(top) ? 0 : top; | |
| 712 | + }; | |
| 713 | + // 上方盒舌左边 | |
| 714 | + const createUpperBoxTongueLeft = (upperBoxTongueType, width, height, offsetX, offsetY) => { | |
| 715 | + if (!height) return createNoneProject(); | |
| 716 | + // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 | |
| 717 | + let data = {}; | |
| 718 | + switch (upperBoxTongueType) { | |
| 719 | + case "1001": | |
| 720 | + data = createLineWeltTop(width, height, offsetX, offsetY); | |
| 721 | + break; | |
| 722 | + case "1002": | |
| 723 | + data = createIsoscelesTrapezoidWeltTop(width, height, offsetX, offsetY); | |
| 724 | + break; | |
| 725 | + case "1003": | |
| 726 | + data = createTrapezoidWeltTop(width, height, offsetX, offsetY); | |
| 727 | + break; | |
| 728 | + case "1004": | |
| 729 | + data = createFoldWeltTop(width, height, offsetX, offsetY); | |
| 730 | + break; | |
| 731 | + case "1005": | |
| 732 | + data = createRoundedCornersWeltTop(width, height, offsetX, offsetY); | |
| 733 | + break; | |
| 734 | + case "2001": | |
| 735 | + data = createLineWeltTop(width, height, offsetX, offsetY); | |
| 736 | + break; | |
| 737 | + case "2002": | |
| 738 | + data = createIsoscelesTrapezoidWeltTop(width, height, offsetX, offsetY); | |
| 739 | + break; | |
| 740 | + case "2003": | |
| 741 | + data = createTrapezoidWeltTop(width, height, offsetX, offsetY); | |
| 742 | + break; | |
| 743 | + case "2004": | |
| 744 | + data = createFoldWeltTop(width, height, offsetX, offsetY); | |
| 745 | + break; | |
| 746 | + case "2005": | |
| 747 | + data = createRoundedCornersWeltTop(width, height, offsetX, offsetY); | |
| 748 | + break; | |
| 749 | + default: | |
| 750 | + data = createNoneProject(); | |
| 751 | + break; | |
| 752 | + } | |
| 753 | + return data; | |
| 754 | + }; | |
| 755 | + // 右上方盒舌 | |
| 756 | + const createUpperBoxTongueRight = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => { | |
| 757 | + if (!size) return createNoneProject(); | |
| 758 | + // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 | |
| 759 | + let data = {}; | |
| 760 | + switch (upperBoxTongueType) { | |
| 761 | + case "1001": | |
| 762 | + data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2); | |
| 763 | + break; | |
| 764 | + case 1: | |
| 765 | + data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2); | |
| 766 | + break; | |
| 767 | + default: | |
| 768 | + data = createNoneProject(); | |
| 769 | + break; | |
| 770 | + } | |
| 771 | + return data; | |
| 772 | + }; | |
| 773 | + // 右上方盒舌 | |
| 774 | + const createBottomBoxTongueRight = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => { | |
| 775 | + if (!size) return createNoneProject(); | |
| 776 | + // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 | |
| 777 | + let data = {}; | |
| 778 | + switch (upperBoxTongueType) { | |
| 779 | + case 0: | |
| 780 | + data = createTopTongue(-deep, offsetX, offsetY, size, -2, 5, 0, true); | |
| 781 | + break; | |
| 782 | + case 1: | |
| 783 | + data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2); | |
| 784 | + break; | |
| 785 | + default: | |
| 786 | + data = createNoneProject(); | |
| 787 | + break; | |
| 788 | + } | |
| 789 | + return data; | |
| 790 | + }; | |
| 791 | + const createBottomBoxTongueLeft = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => { | |
| 792 | + if (!size) return createNoneProject(); | |
| 793 | + // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 | |
| 794 | + let data = {}; | |
| 795 | + switch (upperBoxTongueType) { | |
| 796 | + case 0: | |
| 797 | + data = createTopTongue(deep, offsetX, offsetY, size, 2, 5, 1, false); | |
| 798 | + break; | |
| 799 | + case 1: | |
| 800 | + data = createTopTongueType1(deep, offsetX, offsetY, -size, 3, 2); | |
| 801 | + break; | |
| 802 | + default: | |
| 803 | + data = createNoneProject(); | |
| 804 | + break; | |
| 805 | + } | |
| 806 | + return data; | |
| 807 | + }; | |
| 808 | + | |
| 809 | + // 左边贴位 | |
| 810 | + const createTrapezoidLeft = (trapezoidLeftType, height, size, offsetX, offsetY) => { | |
| 811 | + if (!size) return createNoneProject(); | |
| 812 | + let data = {}; | |
| 813 | + switch (trapezoidLeftType) { | |
| 814 | + case "8001": | |
| 815 | + data = createWelt(height, size, offsetX, offsetY); | |
| 816 | + break; | |
| 817 | + case "8002": | |
| 818 | + data = createWelt1(height, size, offsetX, offsetY); | |
| 819 | + break; | |
| 820 | + case "8003": | |
| 821 | + data = createWelt2(height, size, offsetX, offsetY); | |
| 822 | + break; | |
| 823 | + case "8004": | |
| 824 | + data = createWelt3(height, size, offsetX, offsetY); | |
| 825 | + break; | |
| 826 | + default: | |
| 827 | + data = createNoneProject(); | |
| 828 | + break; | |
| 829 | + } | |
| 830 | + return data; | |
| 831 | + }; | |
| 832 | + // 右边贴位 | |
| 833 | + const createTrapezoidRight = (trapezoidLeftType, height, size, offsetX, offsetY) => { | |
| 834 | + if (!size) return createNoneProject(); | |
| 835 | + let data = {}; | |
| 836 | + switch (trapezoidLeftType) { | |
| 837 | + case "9001": | |
| 838 | + data = createWelt(height, size, offsetX, offsetY); | |
| 839 | + break; | |
| 840 | + case "9002": | |
| 841 | + data = createWelt1(height, size, offsetX, offsetY); | |
| 842 | + break; | |
| 843 | + case "9003": | |
| 844 | + data = createWelt2Right(height, size, offsetX, offsetY); | |
| 845 | + break; | |
| 846 | + case "9004": | |
| 847 | + data = createWelt3Right(height, size, offsetX, offsetY); | |
| 848 | + break; | |
| 849 | + default: | |
| 850 | + data = createNoneProject(); | |
| 851 | + break; | |
| 852 | + } | |
| 853 | + return data; | |
| 854 | + }; | |
| 855 | + // 左上部件 | |
| 856 | + const createDynamicTopLeft = (trapezoidLeftType, width, height, size, offsetX, offsetY) => { | |
| 857 | + if (!size) return createNoneProject(); | |
| 858 | + let data = {}; | |
| 859 | + switch (trapezoidLeftType) { | |
| 860 | + case "3001": | |
| 861 | + data = createBoxComponentNew(width, height, size, offsetX, offsetY); | |
| 862 | + break; | |
| 863 | + case "3002": | |
| 864 | + data = createBoxComponentNew1(width, height, size, offsetX, offsetY); | |
| 865 | + break; | |
| 866 | + case "3003": | |
| 867 | + data = createBoxComponentNew2(width, height, size, offsetX, offsetY); | |
| 868 | + break; | |
| 869 | + case "3004": | |
| 870 | + data = createBoxComponentNew3(width, height, size, offsetX, offsetY); | |
| 871 | + break; | |
| 872 | + case "3005": | |
| 873 | + data = createBoxComponentNew4(width, height, size, offsetX, offsetY); | |
| 874 | + break; | |
| 875 | + case "3006": | |
| 876 | + data = createBoxComponentNew5(width, height, size, offsetX, offsetY); | |
| 877 | + break; | |
| 878 | + case "4001": | |
| 879 | + data = createBoxComponentNew(width, height, size, offsetX, offsetY); | |
| 880 | + break; | |
| 881 | + case "4002": | |
| 882 | + data = createBoxComponentNew1(width, height, size, offsetX, offsetY); | |
| 883 | + break; | |
| 884 | + case "4003": | |
| 885 | + data = createBoxComponentNew2(width, height, size, offsetX, offsetY); | |
| 886 | + break; | |
| 887 | + case "4004": | |
| 888 | + data = createBoxComponentNew3(width, height, size, offsetX, offsetY); | |
| 889 | + break; | |
| 890 | + case "4005": | |
| 891 | + data = createBoxComponentNew4(width, height, size, offsetX, offsetY); | |
| 892 | + break; | |
| 893 | + case "4006": | |
| 894 | + data = createBoxComponentNew5(width, height, size, offsetX, offsetY); | |
| 895 | + break; | |
| 896 | + case "6001": | |
| 897 | + data = createBoxComponentNew(width, height, size, offsetX, offsetY); | |
| 898 | + break; | |
| 899 | + case "6002": | |
| 900 | + data = createBoxComponentNew1(width, height, size, offsetX, offsetY); | |
| 901 | + break; | |
| 902 | + case "6003": | |
| 903 | + data = createBoxComponentNew2(width, height, size, offsetX, offsetY); | |
| 904 | + break; | |
| 905 | + case "6004": | |
| 906 | + data = createBoxComponentNew3(width, height, size, offsetX, offsetY); | |
| 907 | + break; | |
| 908 | + case "6005": | |
| 909 | + data = createBoxComponentNew4(width, height, size, offsetX, offsetY); | |
| 910 | + break; | |
| 911 | + case "6006": | |
| 912 | + data = createBoxComponentNew5(width, height, size, offsetX, offsetY); | |
| 913 | + break; | |
| 914 | + case "7001": | |
| 915 | + data = createBoxComponentNew(width, height, size, offsetX, offsetY); | |
| 916 | + break; | |
| 917 | + case "7002": | |
| 918 | + data = createBoxComponentNew1(width, height, size, offsetX, offsetY); | |
| 919 | + break; | |
| 920 | + case "7003": | |
| 921 | + data = createBoxComponentNew2(width, height, size, offsetX, offsetY); | |
| 922 | + break; | |
| 923 | + case "7004": | |
| 924 | + data = createBoxComponentNew3(width, height, size, offsetX, offsetY); | |
| 925 | + break; | |
| 926 | + case "7005": | |
| 927 | + data = createBoxComponentNew4(width, height, size, offsetX, offsetY); | |
| 928 | + break; | |
| 929 | + case "7006": | |
| 930 | + data = createBoxComponentNew5(width, height, size, offsetX, offsetY); | |
| 931 | + break; | |
| 932 | + default: | |
| 933 | + data = createNoneProject(); | |
| 934 | + break; | |
| 935 | + } | |
| 936 | + return data; | |
| 937 | + }; | |
| 938 | + // 右上部件 | |
| 939 | + const createDynamicTopRight = (trapezoidLeftType, width, height, size, offsetX, offsetY) => { | |
| 940 | + if (!size) return createNoneProject(); | |
| 941 | + let data = {}; | |
| 942 | + switch (trapezoidLeftType) { | |
| 943 | + case "6001": | |
| 944 | + data = createBoxComponentNew(width, height, size, offsetX, offsetY); | |
| 945 | + break; | |
| 946 | + case 1: | |
| 947 | + break; | |
| 948 | + default: | |
| 949 | + data = createNoneProject(); | |
| 950 | + break; | |
| 951 | + } | |
| 952 | + return data; | |
| 953 | + }; | |
| 954 | + // 盒底组件 特殊的盒底组件 | |
| 955 | + const createBoxBottomComponent = (trapezoidLeftType, width, deep, size, offsetX, offsetY) => { | |
| 956 | + let data = {}; | |
| 957 | + switch (trapezoidLeftType) { | |
| 958 | + case "5001": | |
| 959 | + data = createRightAngleBoxBottomComponent(width, deep, size, offsetX, offsetY); | |
| 960 | + break; | |
| 961 | + case "5002": | |
| 962 | + data = createBoxBottomComponent1(width, deep, size, offsetX, offsetY); | |
| 963 | + break; | |
| 964 | + case "5003": | |
| 965 | + data = createBoxBottomComponent2(width, deep, size, offsetX, offsetY); | |
| 966 | + break; | |
| 967 | + case "5004": | |
| 968 | + data = createBoxBottomComponent3(width, deep, size, offsetX, offsetY); | |
| 969 | + break; | |
| 970 | + case "5005": | |
| 971 | + data = createBoxBottomComponent4(width, deep, size, offsetX, offsetY); | |
| 972 | + break; | |
| 973 | + case "5006": | |
| 974 | + data = createBoxBottomComponent5(width, deep, size, offsetX, offsetY); | |
| 975 | + break; | |
| 976 | + case "5007": | |
| 977 | + data = createBoxBottomComponent6(width, deep, size, offsetX, offsetY); | |
| 978 | + break; | |
| 979 | + default: | |
| 980 | + data = createNoneProject(); | |
| 981 | + break; | |
| 982 | + } | |
| 983 | + return data; | |
| 984 | + }; | |
| 985 | + return ( | |
| 986 | + <div | |
| 987 | + id="svgContainer" | |
| 988 | + key={boxKey} | |
| 989 | + ref={svgContainerRef} | |
| 990 | + style={{ | |
| 991 | + width: "100%", | |
| 992 | + height: "100%", | |
| 993 | + margin: "0 auto", | |
| 994 | + }} | |
| 995 | + > | |
| 996 | + <svg | |
| 997 | + className={styles.svgContainer} | |
| 998 | + id="dynamicSvg" | |
| 999 | + xmlns="http://www.w3.org/2000/svg" | |
| 1000 | + ref={svgRef} | |
| 1001 | + viewBox="0 0 400 300" | |
| 1002 | + preserveAspectRatio="xMidYMid meet" | |
| 1003 | + width="100%" | |
| 1004 | + height="100%" | |
| 1005 | + /> | |
| 1006 | + </div> | |
| 1007 | + ); | |
| 1008 | +}; | |
| 1009 | + | |
| 1010 | +export default SvgBox; | ... | ... |
src/components/Common/BoxDesignCompontent/svg.js
0 → 100644
| 1 | +/* eslint-disable */ | |
| 2 | +import React, { useRef, useState, useEffect } from "react"; | |
| 3 | +import styles from "./index.less"; | |
| 4 | +import { | |
| 5 | + createPathElement, | |
| 6 | + createTopTongue, | |
| 7 | + createTopTongueType1, | |
| 8 | + createTrapezoid, | |
| 9 | + createDynamicTop, | |
| 10 | + createNoneProject, | |
| 11 | + createLineWeltTop, | |
| 12 | + createIsoscelesTrapezoidWeltTop, | |
| 13 | + createTrapezoidWeltTop, | |
| 14 | + createFoldWeltTop, | |
| 15 | + createFoldWeltTopLine, | |
| 16 | + createRoundedCornersWeltTop, | |
| 17 | + createRightAngleBoxBottomComponent, | |
| 18 | + createBoxBottomComponent1, | |
| 19 | + createBoxBottomComponent2, | |
| 20 | + createBoxBottomComponent3, | |
| 21 | + createBoxBottomComponent4, | |
| 22 | + createBoxBottomComponent5, | |
| 23 | + createBoxBottomComponent6, | |
| 24 | + createBoxComponentNew, | |
| 25 | + createBoxComponentNew1, | |
| 26 | + createBoxComponentNew2, | |
| 27 | + createBoxComponentNew3, | |
| 28 | + createBoxComponentNew4, | |
| 29 | + createBoxComponentNew5, | |
| 30 | + createBoxComponentNew4_1, | |
| 31 | + createWelt, | |
| 32 | + createWelt1, | |
| 33 | + createWelt2, | |
| 34 | + createWelt2Right, | |
| 35 | + createWelt3, | |
| 36 | + createWelt3Right, | |
| 37 | + createText, | |
| 38 | + createDoubleArrow, | |
| 39 | + createHorizontalDoubleArrow, | |
| 40 | + createFullTelescope, | |
| 41 | + createBoxComponentNewFull, | |
| 42 | + createBoxComponentNewFull1, | |
| 43 | + createBoxComponentNewFull2, | |
| 44 | + createBoxComponentNewFul3, | |
| 45 | + createBoxComponentNewFul4, | |
| 46 | + createBoxComponentNewFul5, | |
| 47 | +} from "../BoxDesign/createAirplaneBox"; | |
| 48 | +const SvgBox = props => { | |
| 49 | + const svgContainerRef = useRef(null); | |
| 50 | + const svgRef = useRef(null); | |
| 51 | + const [boxKey, setBoxKey] = useState(new Date().getTime()); | |
| 52 | + const { boxList, dSvgBoxWidth, dSvgBoxHeight, iFAngle } = props; | |
| 53 | + const [width, setWidth] = useState(0); | |
| 54 | + const [height, setHeight] = useState(0); | |
| 55 | + const [deep, setDeep] = useState(0); | |
| 56 | + const [svgType, setSvgType] = useState(1); | |
| 57 | + // 盒身 | |
| 58 | + useEffect( | |
| 59 | + () => { | |
| 60 | + setTimeout(() => { | |
| 61 | + const svg = svgRef.current; | |
| 62 | + if (svg) { | |
| 63 | + initSVG(); | |
| 64 | + } | |
| 65 | + }, 0); | |
| 66 | + }, | |
| 67 | + [boxList, svgType] | |
| 68 | + ); | |
| 69 | + | |
| 70 | + // 初始化svg | |
| 71 | + const initSVG = () => { | |
| 72 | + setBoxKey(new Date().getTime()); | |
| 73 | + const svg = svgRef.current; | |
| 74 | + const g = document.createElementNS("http://www.w3.org/2000/svg", "g"); // 创建 <g> | |
| 75 | + | |
| 76 | + svg.innerHTML = ""; | |
| 77 | + | |
| 78 | + // 获取盒型类型 | |
| 79 | + const svgTypes = boxList.find(x => x.sName === "盒身")?.type || 1; | |
| 80 | + setSvgType(svgTypes); | |
| 81 | + | |
| 82 | + // 获取盒长、盒宽、盒高 | |
| 83 | + const boxLength = Number(boxList.find(x => x.sName === "盒长")?.value) || 0; | |
| 84 | + const boxWidth = Number(boxList.find(x => x.sName === "盒宽")?.value) || 0; | |
| 85 | + const boxHeight = Number(boxList.find(x => x.sName === "盒高")?.value) || 0; | |
| 86 | + setWidth(boxLength); | |
| 87 | + setHeight(boxWidth); | |
| 88 | + setDeep(boxHeight); | |
| 89 | + | |
| 90 | + // 计算视口宽度和高度 | |
| 91 | + const zbtb = boxList.find(x => x.sName === "左贴边位"); | |
| 92 | + const ybtb = boxList.find(x => x.sName === "右贴边位"); | |
| 93 | + const dZTBW = Number(zbtb?.value) || 0; | |
| 94 | + const dYTBW = Number(ybtb?.value) || 0; | |
| 95 | + const sfhs = boxList.find(x => x.sName === "上方盒舌"); | |
| 96 | + const dSFHS = Number(sfhs?.value) || 0; | |
| 97 | + const hdzj = boxList.find(x => x.sName === "盒底组件"); | |
| 98 | + const xfhs = boxList.find(x => x.sName === "下方盒舌"); | |
| 99 | + const dXFHS = Number(xfhs?.value) || 0; | |
| 100 | + const zsbj = boxList.find(x => x.sName === "左(上)插位组件"); | |
| 101 | + const dZSCW = Number(zsbj?.value) || 0; | |
| 102 | + const ysbj = boxList.find(x => x.sName === "右(上)插位组件"); | |
| 103 | + const dYSCW = Number(ysbj?.value) || 0; | |
| 104 | + const zxbj = boxList.find(x => x.sName === "左(下)插位组件"); | |
| 105 | + const dZXCW = Number(zxbj?.value) || 0; | |
| 106 | + const yxbj = boxList.find(x => x.sName === "右(下)插位组件"); | |
| 107 | + const dYXCW = Number(yxbj?.value) || 0; | |
| 108 | + // 根据选择不同的部件 计算尺寸 | |
| 109 | + | |
| 110 | + // const viewBoxWidth = (boxLength * 2 + boxHeight * 2 + dYTBW + dZTBW); | |
| 111 | + let viewBoxWidth = 0; | |
| 112 | + | |
| 113 | + let max = 0; | |
| 114 | + // 展宽 | |
| 115 | + if (boxList && boxList.length) { | |
| 116 | + // 如果存在部件和盒舌 取最大的 | |
| 117 | + const top = topOffect(boxList, boxLength, boxWidth, boxHeight); | |
| 118 | + const bottom = bottomOffect(boxList, boxLength, boxWidth, boxHeight); | |
| 119 | + max = Number(top) + Number(bottom); | |
| 120 | + } | |
| 121 | + | |
| 122 | + let viewBoxHeight = Number(boxHeight) + max; | |
| 123 | + if (Number(svgType) === 1) { | |
| 124 | + // 四面盒身 | |
| 125 | + viewBoxWidth = dZTBW + Number(boxLength) * 2 + Number(boxWidth) * 2; | |
| 126 | + } else if (Number(svgType) === 2) { | |
| 127 | + viewBoxWidth = boxLength * 2 + boxWidth + dYTBW + dZTBW; | |
| 128 | + } else if (Number(svgType) === 3) { | |
| 129 | + viewBoxWidth = boxLength + boxWidth * 2 + dYTBW + dZTBW; | |
| 130 | + } else if (Number(svgType) === 4) { | |
| 131 | + // 天地盒 | |
| 132 | + | |
| 133 | + const zxcw = boxList.find(x => x.sName === "左(下)插位组件"); | |
| 134 | + const zscw = boxList.find(x => x.sName === "左(上)插位组件"); | |
| 135 | + const yscw = boxList.find(x => x.sName === "右(上)插位组件"); | |
| 136 | + const yxcw = boxList.find(x => x.sName === "右(下)插位组件"); | |
| 137 | + const zxcwType = zxcw?.type; | |
| 138 | + const zxcwValue = zxcw?.value; | |
| 139 | + const zscwType = zscw?.type; | |
| 140 | + const zscwValue = zscw?.value; | |
| 141 | + const yscwType = yscw?.type; | |
| 142 | + const yscwValue = yscw?.value; | |
| 143 | + const yxcwType = yxcw?.type; | |
| 144 | + const yxcwValue = yxcw?.value; | |
| 145 | + let leftValue = 0; | |
| 146 | + let rightValue = 0; | |
| 147 | + let topValue = 0; | |
| 148 | + let bottomValue = 0; | |
| 149 | + if (zxcwType === "4001" || zxcwType === "4006") { | |
| 150 | + leftValue = leftValue + Number(zxcwValue) + boxHeight * 2; | |
| 151 | + } else if (zxcwType === "4002" || zxcwType === "4003") { | |
| 152 | + leftValue = leftValue + Number(zxcwValue) + boxHeight; | |
| 153 | + } else if (zxcwType === "4004") { | |
| 154 | + leftValue = leftValue + Number(zxcwValue) + boxHeight * 3; | |
| 155 | + } else if (zxcwType === "4005") { | |
| 156 | + leftValue = boxHeight * 3; | |
| 157 | + } | |
| 158 | + if (yscwType === "6001" || yscwType === "6006") { | |
| 159 | + rightValue = rightValue + Number(yscwValue) + boxHeight * 2; | |
| 160 | + } else if (yscwType === "6002" || yscwType === "6003") { | |
| 161 | + rightValue = rightValue + Number(yscwValue) + boxHeight; | |
| 162 | + } else if (yscwType === "6004") { | |
| 163 | + rightValue = rightValue + Number(yscwValue) + boxHeight * 3; | |
| 164 | + } else if (yscwType === "6005") { | |
| 165 | + rightValue = boxHeight * 3; | |
| 166 | + } | |
| 167 | + if (zscwType === "3001" || zscwType === "3006") { | |
| 168 | + topValue = topValue + Number(zscwValue) + boxHeight * 2; | |
| 169 | + } else if (zscwType === "3002" || zscwType === "3003") { | |
| 170 | + topValue = topValue + Number(zscwValue) + boxHeight; | |
| 171 | + } else if (zscwType === "3004") { | |
| 172 | + topValue = topValue + Number(zscwValue) + boxHeight * 3; | |
| 173 | + } else if (zscwType === "3005") { | |
| 174 | + topValue = boxHeight * 3; | |
| 175 | + } | |
| 176 | + if (yxcwType === "7001" || yxcwType === "7006") { | |
| 177 | + bottomValue = bottomValue + Number(yxcwValue) + boxHeight * 2; | |
| 178 | + } else if (yxcwType === "7002" || yxcwType === "7003") { | |
| 179 | + bottomValue = bottomValue + Number(yxcwValue) + boxHeight; | |
| 180 | + } else if (yxcwType === "7004") { | |
| 181 | + bottomValue = bottomValue + Number(yxcwValue) + boxHeight * 3; | |
| 182 | + } else if (yxcwType === "7005") { | |
| 183 | + bottomValue = boxHeight * 3; | |
| 184 | + } | |
| 185 | + viewBoxWidth = Number(boxLength) + leftValue + rightValue; | |
| 186 | + viewBoxHeight = Number(boxWidth) + topValue + bottomValue; | |
| 187 | + } else if (Number(svgType) === 5) { | |
| 188 | + viewBoxWidth = (boxHeight + boxWidth) * 2 + dYTBW + dZTBW; | |
| 189 | + viewBoxHeight = boxLength + max; | |
| 190 | + } | |
| 191 | + // 计算缩放比例 | |
| 192 | + let scale = 1; | |
| 193 | + if (props.showNew === 0) { | |
| 194 | + if (viewBoxWidth > (dSvgBoxWidth ? dSvgBoxWidth : 500) || viewBoxHeight > (dSvgBoxHeight ? dSvgBoxHeight : 250)) { | |
| 195 | + const widthScale = (dSvgBoxWidth ? dSvgBoxWidth : 500) / viewBoxWidth; | |
| 196 | + const heightScale = (dSvgBoxHeight ? dSvgBoxHeight : 250) / viewBoxHeight; | |
| 197 | + scale = Math.min(widthScale, heightScale); | |
| 198 | + let ySvg = dSvgBoxHeight | |
| 199 | + ? topOffect(boxList, boxLength, boxWidth, boxHeight) * scale | |
| 200 | + : topOffect(boxList, boxLength, boxWidth, boxHeight) * scale; | |
| 201 | + const bottom = bottomOffect(boxList, boxLength, boxWidth, boxHeight); | |
| 202 | + if (Number(svgType) === 4) { | |
| 203 | + ySvg = ySvg + boxHeight * scale; | |
| 204 | + } | |
| 205 | + ySvg = ySvg + 50 * scale; | |
| 206 | + svg.setAttribute( | |
| 207 | + "viewBox", | |
| 208 | + `${-(zbtb?.value * scale)} ${dSvgBoxWidth ? (dSvgBoxWidth === 100 ? -ySvg : 0) : -ySvg} ${dSvgBoxWidth ? dSvgBoxWidth + ySvg : 500} ${ | |
| 209 | + dSvgBoxHeight ? dSvgBoxHeight - ySvg - bottom * scale : 250 + ySvg | |
| 210 | + }` | |
| 211 | + ); | |
| 212 | + svg.setAttribute("width", `${dSvgBoxWidth ? dSvgBoxWidth : 500}px`); | |
| 213 | + svg.setAttribute("height", `${dSvgBoxHeight ? dSvgBoxHeight : 250}px`); | |
| 214 | + svgContainerRef.current.style.width = `${dSvgBoxWidth ? dSvgBoxWidth : 500}px`; | |
| 215 | + svgContainerRef.current.style.height = `${dSvgBoxHeight ? dSvgBoxHeight : 250}px`; | |
| 216 | + } else { | |
| 217 | + scale = 0.6; | |
| 218 | + let ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight) * scale; | |
| 219 | + if (Number(svgType) === 4) { | |
| 220 | + ySvg = ySvg + boxHeight; | |
| 221 | + } | |
| 222 | + ySvg = ySvg + 50 * scale; | |
| 223 | + svg.setAttribute( | |
| 224 | + "viewBox", | |
| 225 | + `${-(dSvgBoxWidth ? zbtb?.value : viewBoxWidth / 2)} ${dSvgBoxWidth ? -0 : -ySvg} ${dSvgBoxWidth ? dSvgBoxWidth : 500} ${ | |
| 226 | + dSvgBoxHeight ? dSvgBoxHeight : 250 | |
| 227 | + }` | |
| 228 | + ); | |
| 229 | + svg.setAttribute("width", `${dSvgBoxWidth ? dSvgBoxWidth : 500}px`); | |
| 230 | + svg.setAttribute("height", `${dSvgBoxHeight ? dSvgBoxHeight : 250}px`); | |
| 231 | + svgContainerRef.current.style.width = `${dSvgBoxWidth ? dSvgBoxWidth : 500}px`; | |
| 232 | + svgContainerRef.current.style.height = `${dSvgBoxHeight ? dSvgBoxHeight : 250}px`; | |
| 233 | + } | |
| 234 | + } else if (props.showNew === 1) { | |
| 235 | + let ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight) * scale; | |
| 236 | + let leftSize = 0; | |
| 237 | + let topSize = 0; | |
| 238 | + if (Number(svgType) === 4) { | |
| 239 | + const zxcw = boxList.find(x => x.sName === "左(下)插位组件"); | |
| 240 | + const zxcwType = zxcw?.type; | |
| 241 | + const zxcwValue = zxcw?.value; | |
| 242 | + if (zxcwType === "4001" || zxcwType === "4006") { | |
| 243 | + leftSize = Number(zxcwValue) + boxHeight * 2; | |
| 244 | + } else if (zxcwType === "4002" || zxcwType === "4003") { | |
| 245 | + leftSize = Number(zxcwValue) + boxHeight; | |
| 246 | + } else if (zxcwType === "4004") { | |
| 247 | + leftSize = Number(zxcwValue) + boxHeight * 3; | |
| 248 | + } else if (zxcwType === "4005") { | |
| 249 | + leftSize = Number(zxcwValue) + boxHeight * 3; | |
| 250 | + } | |
| 251 | + const zscw = boxList.find(x => x.sName === "左(上)插位组件"); | |
| 252 | + const zscwType = zscw?.type; | |
| 253 | + const zscwValue = zscw?.value; | |
| 254 | + if (zscwType === "3001" || zscwType === "3006") { | |
| 255 | + topSize = Number(zscwValue) + boxHeight * 2; | |
| 256 | + } else if (zscwType === "3002" || zscwType === "3003") { | |
| 257 | + topSize = Number(zscwValue) + boxHeight; | |
| 258 | + } else if (zscwType === "3004") { | |
| 259 | + topSize = Number(zscwValue) + boxHeight * 3; | |
| 260 | + } else if (zscwType === "3005") { | |
| 261 | + topSize = Number(zscwValue) + boxHeight * 3; | |
| 262 | + } | |
| 263 | + ySvg = topSize; | |
| 264 | + } else { | |
| 265 | + leftSize = zbtb?.value; | |
| 266 | + } | |
| 267 | + svg.setAttribute("viewBox", `${-(leftSize * scale)} ${-ySvg} ${viewBoxWidth} ${viewBoxHeight}`); | |
| 268 | + svg.setAttribute("width", `${viewBoxWidth}px`); | |
| 269 | + svg.setAttribute("height", `${viewBoxHeight}px`); | |
| 270 | + svgContainerRef.current.style.width = `${viewBoxWidth}px`; | |
| 271 | + svgContainerRef.current.style.height = `${viewBoxHeight}px`; | |
| 272 | + const scaleX = (dSvgBoxWidth ? dSvgBoxWidth : 450) / viewBoxWidth; | |
| 273 | + const scaleY = (dSvgBoxHeight ? dSvgBoxHeight : 200) / viewBoxHeight; | |
| 274 | + svgContainerRef.current.style.transform = `scale(${scaleX >= 1 ? 1 : scaleX}, ${scaleY >= 1 ? 1 : scaleY})`; | |
| 275 | + svgContainerRef.current.style.transformOrigin = "top left"; | |
| 276 | + svgContainerRef.current.style.paddingTop = dSvgBoxWidth ? "0" : "25px"; | |
| 277 | + } else if (props.showNew === 2) { | |
| 278 | + // g.setAttribute("transform", `rotate(${iFAngle, dSvgBoxWidth/2,dSvgBoxHeight*2})`); | |
| 279 | + let ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight) * scale; | |
| 280 | + let leftSize = 0; | |
| 281 | + let topSize = 0; | |
| 282 | + if (Number(svgType) === 4) { | |
| 283 | + const zxcw = boxList.find(x => x.sName === "左(下)插位组件"); | |
| 284 | + const zxcwType = zxcw?.type; | |
| 285 | + const zxcwValue = zxcw?.value; | |
| 286 | + if (zxcwType === "4001" || zxcwType === "4006") { | |
| 287 | + leftSize = Number(zxcwValue) + boxHeight * 2; | |
| 288 | + } else if (zxcwType === "4002" || zxcwType === "4003") { | |
| 289 | + leftSize = Number(zxcwValue) + boxHeight; | |
| 290 | + } else if (zxcwType === "4004") { | |
| 291 | + leftSize = Number(zxcwValue) + boxHeight * 3; | |
| 292 | + } else if (zxcwType === "4005") { | |
| 293 | + leftSize = Number(zxcwValue) + boxHeight * 3; | |
| 294 | + } | |
| 295 | + const zscw = boxList.find(x => x.sName === "左(上)插位组件"); | |
| 296 | + const zscwType = zscw?.type; | |
| 297 | + const zscwValue = zscw?.value; | |
| 298 | + if (zscwType === "3001" || zscwType === "3006") { | |
| 299 | + topSize = Number(zscwValue) + boxHeight * 2; | |
| 300 | + } else if (zscwType === "3002" || zscwType === "3003") { | |
| 301 | + topSize = Number(zscwValue) + boxHeight; | |
| 302 | + } else if (zscwType === "3004") { | |
| 303 | + topSize = Number(zscwValue) + boxHeight * 3; | |
| 304 | + } else if (zscwType === "3005") { | |
| 305 | + topSize = Number(zscwValue) + boxHeight * 3; | |
| 306 | + } | |
| 307 | + ySvg = topSize; | |
| 308 | + } else { | |
| 309 | + leftSize = zbtb?.value; | |
| 310 | + } | |
| 311 | + svg.setAttribute("viewBox", `${-(leftSize * scale)} ${-ySvg} ${dSvgBoxWidth} ${dSvgBoxHeight}`); | |
| 312 | + svg.setAttribute("width", `${dSvgBoxWidth}px`); | |
| 313 | + svg.setAttribute("height", `${dSvgBoxHeight}px`); | |
| 314 | + svgContainerRef.current.style.width = `${dSvgBoxWidth}px`; | |
| 315 | + svgContainerRef.current.style.height = `${dSvgBoxHeight}px`; | |
| 316 | + } | |
| 317 | + const scaledWidth = boxLength * scale; | |
| 318 | + const scaledHeight = boxWidth * scale; | |
| 319 | + const scaledDeep = boxHeight * scale; | |
| 320 | + const scales = dSvgBoxWidth ? scale : 1; | |
| 321 | + // 根据盒型类型生成不同的盒身 四面盒身 | |
| 322 | + if (Number(svgType) === 1) { | |
| 323 | + const rectangles = [ | |
| 324 | + { x: 0, y: 0, width: scaledWidth, height: scaledDeep }, | |
| 325 | + { x: 0 + scaledWidth, y: 0, width: scaledHeight, height: scaledDeep }, | |
| 326 | + { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep }, | |
| 327 | + { x: 0 + scaledWidth * 2 + scaledHeight, y: 0, width: scaledHeight, height: scaledDeep }, | |
| 328 | + ]; | |
| 329 | + rectangles.forEach(rect => { | |
| 330 | + g.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); | |
| 331 | + }); | |
| 332 | + svg.appendChild(g); | |
| 333 | + | |
| 334 | + let pathList = []; | |
| 335 | + // 上方盒舌 | |
| 336 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth, 0)); | |
| 337 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, -scaledHeight, -dSFHS * scale, scaledWidth * 2 + scaledHeight * 2, 0)); | |
| 338 | + if (sfhs?.type && dSFHS) { | |
| 339 | + pathList.push(createText(scaledWidth + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 340 | + pathList.push(createText(scaledWidth * 2 + scaledHeight + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 341 | + } | |
| 342 | + // 盒底组件 | |
| 343 | + if (hdzj && hdzj.type) { | |
| 344 | + // 盒底组件 | |
| 345 | + pathList.push(createBoxBottomComponent(hdzj?.type, scaledWidth, scaledHeight, Number(hdzj?.value) * scale, 0, scaledDeep)); | |
| 346 | + pathList.push(createText(scaledWidth / 2, scaledDeep + (Number(hdzj?.value) / 2) * scales, 10 * scales, Number(hdzj?.value))); | |
| 347 | + } else { | |
| 348 | + // 下方盒舌 | |
| 349 | + | |
| 350 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth, scaledDeep)); | |
| 351 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, -scaledHeight, dXFHS * scale, scaledWidth * 2 + scaledHeight * 2, scaledDeep)); | |
| 352 | + if (xfhs?.type && dXFHS) { | |
| 353 | + pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 10) * scales, 10 * scales, dXFHS)); | |
| 354 | + pathList.push(createText(scaledWidth * 2 + scaledHeight + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 10) * scales, 10 * scales, dXFHS)); | |
| 355 | + } | |
| 356 | + } | |
| 357 | + | |
| 358 | + // 左边贴边 | |
| 359 | + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); | |
| 360 | + if (zbtb?.type && dZTBW) { | |
| 361 | + pathList.push(createText(-dZTBW * 0.4, scaledDeep / 2, 10 * scales, dZTBW)); | |
| 362 | + } | |
| 363 | + // 右边贴边 | |
| 364 | + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight * 2, 0)); | |
| 365 | + if (ybtb?.type && dYTBW) { | |
| 366 | + pathList.push(createText(scaledWidth * 2 + scaledHeight * 2 + dYTBW * 0.4, scaledDeep / 2, 10 * scales, dYTBW)); | |
| 367 | + } | |
| 368 | + // 左上部件 | |
| 369 | + pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0)); | |
| 370 | + if ((zsbj?.type === "3001" && zsbj?.value) || (zsbj?.type === "3006" && zsbj?.value)) { | |
| 371 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 372 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 373 | + // 插位值 | |
| 374 | + pathList.push(createText(scaledWidth / 2, -scaledHeight - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 375 | + } else if (zsbj?.type === "3002" && dZSCW) { | |
| 376 | + pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 377 | + } else if (zsbj?.type === "3003" && dZSCW) { | |
| 378 | + pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 379 | + } else if (zsbj?.type === "3004" && zsbj?.value) { | |
| 380 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 381 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 382 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); | |
| 383 | + pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 384 | + pathList.push(createText(scaledWidth * 0.3, -(scaledHeight * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 385 | + } else if (zsbj?.type === "3005" && zsbj?.value) { | |
| 386 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, -scaledHeight / 2, scales)); | |
| 387 | + pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 388 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); | |
| 389 | + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 390 | + } | |
| 391 | + // 右上部件 | |
| 392 | + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0)); | |
| 393 | + if ((ysbj?.type === "6001" && ysbj?.value) || (ysbj?.type === "6006" && ysbj?.value)) { | |
| 394 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 395 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 396 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2, 10 * scales, dYSCW)); | |
| 397 | + } else if (ysbj?.type === "6002" && dYSCW) { | |
| 398 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 399 | + } else if (ysbj?.type === "6003" && dYSCW) { | |
| 400 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 401 | + } else if (ysbj?.type === "6004" && ysbj?.value) { | |
| 402 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 403 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 404 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); | |
| 405 | + pathList.push( | |
| 406 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W") | |
| 407 | + ); | |
| 408 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 409 | + } else if (ysbj?.type === "6005" && ysbj?.value) { | |
| 410 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales)); | |
| 411 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 412 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); | |
| 413 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 414 | + } | |
| 415 | + // 左下部件- | |
| 416 | + | |
| 417 | + if (!(hdzj && hdzj.type)) { | |
| 418 | + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep)); | |
| 419 | + if ((zxbj?.type === "4001" && zxbj?.value) || (zxbj?.type === "4006" && zxbj?.value)) { | |
| 420 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 421 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 422 | + pathList.push(createText(scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 423 | + } else if (zxbj?.type === "4002" && dZXCW) { | |
| 424 | + pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 425 | + } else if (zxbj?.type === "4003" && dZXCW) { | |
| 426 | + pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 427 | + } else if (zxbj?.type === "4004" && zxbj?.value) { | |
| 428 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 429 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 430 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 431 | + pathList.push(createText(scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 432 | + pathList.push(createText(scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 433 | + } else if (zxbj?.type === "4005" && zxbj?.value) { | |
| 434 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); | |
| 435 | + pathList.push(createText(scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 436 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 437 | + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 438 | + } | |
| 439 | + } | |
| 440 | + if (!(hdzj && hdzj.type)) { | |
| 441 | + pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW * scale, scaledWidth + scaledHeight, scaledDeep)); | |
| 442 | + if ((yxbj?.type === "7001" && yxbj?.value) || (yxbj?.type === "7006" && yxbj?.value)) { | |
| 443 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 444 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 445 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + scaledHeight + dYXCW / 2, 10 * scales, dYXCW)); | |
| 446 | + } else if (yxbj?.type === "7004" && yxbj?.value) { | |
| 447 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 448 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 - 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 449 | + pathList.push( | |
| 450 | + createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales) | |
| 451 | + ); | |
| 452 | + pathList.push( | |
| 453 | + createText( | |
| 454 | + scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, | |
| 455 | + scaledDeep + (scaledHeight + scaledHeight / 2), | |
| 456 | + 10 * scales, | |
| 457 | + "W" | |
| 458 | + ) | |
| 459 | + ); | |
| 460 | + pathList.push( | |
| 461 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dYXCW / 2 - 4, 10 * scales, dYXCW) | |
| 462 | + ); | |
| 463 | + } else if (yxbj?.type === "7005" && yxbj?.value) { | |
| 464 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); | |
| 465 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 466 | + pathList.push( | |
| 467 | + createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales) | |
| 468 | + ); | |
| 469 | + pathList.push( | |
| 470 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W") | |
| 471 | + ); | |
| 472 | + } else if (dYXCW && yxbj?.type) { | |
| 473 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + dYXCW / 2 - 4, 10 * scales, dYXCW)); | |
| 474 | + } | |
| 475 | + } | |
| 476 | + // 右下部件 | |
| 477 | + | |
| 478 | + // 纵向 D | |
| 479 | + if (scaledDeep && scaledWidth && scaledHeight) { | |
| 480 | + pathList.push(createDoubleArrow(scaledDeep, scaledWidth + scaledHeight + scaledWidth / 2, scaledDeep / 2, scales)); | |
| 481 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth / 2 + 10 * scales, scaledDeep / 2, 10 * scales, "D")); | |
| 482 | + | |
| 483 | + // 横向 L | |
| 484 | + pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledDeep / 2, scales)); | |
| 485 | + pathList.push(createText(scaledWidth / 2, scaledDeep / 2 + 10 * scales, 10 * scales, "L")); | |
| 486 | + // W | |
| 487 | + pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledWidth + scaledHeight / 2, scaledDeep * 0.3, scale)); | |
| 488 | + pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep * 0.3 + 10 * scales, 10 * scales, "W")); | |
| 489 | + } | |
| 490 | + pathList.forEach(x => { | |
| 491 | + g.appendChild(x); | |
| 492 | + }); | |
| 493 | + svg.appendChild(g); | |
| 494 | + } else if (Number(svgType) === 2) { | |
| 495 | + // 单折盒身 | |
| 496 | + const rectangles = [ | |
| 497 | + { x: 0, y: 0, width: scaledWidth, height: scaledDeep }, | |
| 498 | + { x: 0 + scaledWidth, y: 0, width: scaledHeight, height: scaledDeep }, | |
| 499 | + { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep }, | |
| 500 | + ]; | |
| 501 | + rectangles.forEach(rect => { | |
| 502 | + g.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); | |
| 503 | + }); | |
| 504 | + svg.appendChild(g); | |
| 505 | + let pathList = []; | |
| 506 | + // 上方盒舌 | |
| 507 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth, 0)); | |
| 508 | + if (sfhs?.type && dSFHS) { | |
| 509 | + pathList.push(createText(scaledWidth + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 510 | + } | |
| 511 | + // 下方盒舌 | |
| 512 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth, scaledDeep)); | |
| 513 | + if (xfhs?.type && dXFHS) { | |
| 514 | + pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 515 | + } | |
| 516 | + // 左边贴边 | |
| 517 | + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); | |
| 518 | + if (zbtb?.type && dZTBW) { | |
| 519 | + pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW)); | |
| 520 | + } | |
| 521 | + // 右边贴边 | |
| 522 | + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight, 0)); | |
| 523 | + if (zbtb?.type && dYTBW) { | |
| 524 | + pathList.push(createText(scaledWidth * 2 + scaledHeight + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW)); | |
| 525 | + } | |
| 526 | + // 左上部件 | |
| 527 | + pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0)); | |
| 528 | + if ((zsbj?.type === "3001" && zsbj?.value) || (zsbj?.type === "3006" && zsbj?.value)) { | |
| 529 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 530 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 531 | + pathList.push(createText(scaledWidth / 2, -scaledHeight - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 532 | + } else if (zsbj?.type === "3004" && zsbj?.value) { | |
| 533 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 534 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 535 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); | |
| 536 | + pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 537 | + pathList.push(createText(scaledWidth * 0.3, -(scaledHeight * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 538 | + } else if (zsbj?.type === "3005" && zsbj?.value) { | |
| 539 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, -scaledHeight / 2, scales)); | |
| 540 | + pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 541 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); | |
| 542 | + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 543 | + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 544 | + } else if (zsbj?.type && dZSCW) { | |
| 545 | + pathList.push(createText(scaledWidth / 2, -(dZSCW / 2 - 5), 10 * scales, dZSCW)); | |
| 546 | + } | |
| 547 | + // 右上部件 | |
| 548 | + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0)); | |
| 549 | + if ((ysbj?.type === "6001" && ysbj?.value) || (ysbj?.type === "6006" && ysbj?.value)) { | |
| 550 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 551 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 552 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2, 10 * scales, dYSCW)); | |
| 553 | + } else if (ysbj?.type === "6004" && ysbj?.value) { | |
| 554 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 555 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 556 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); | |
| 557 | + pathList.push( | |
| 558 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W") | |
| 559 | + ); | |
| 560 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 561 | + } else if (ysbj?.type === "6005" && ysbj?.value) { | |
| 562 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales)); | |
| 563 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 564 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); | |
| 565 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 566 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 567 | + } else if (ysbj?.type && dYSCW) { | |
| 568 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 569 | + } | |
| 570 | + // 左下部件- | |
| 571 | + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep)); | |
| 572 | + if ((zxbj?.type === "4001" && zxbj?.value) || (zxbj?.type === "4006" && zxbj?.value)) { | |
| 573 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 574 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 575 | + pathList.push(createText(scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2, 10 * scales, dZXCW)); | |
| 576 | + } else if (zxbj?.type === "4004" && zxbj?.value) { | |
| 577 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 578 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 579 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 580 | + pathList.push(createText(scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 581 | + pathList.push(createText(scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 582 | + } else if (zxbj?.type === "4005" && zxbj?.value) { | |
| 583 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); | |
| 584 | + pathList.push(createText(scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 585 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 586 | + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 587 | + } else if (zxbj?.type && dZXCW) { | |
| 588 | + pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 589 | + } | |
| 590 | + // 右下部件 | |
| 591 | + pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW, scaledWidth + scaledHeight, scaledDeep)); | |
| 592 | + if ((yxbj?.type === "7001" && yxbj?.value) || (yxbj?.type === "7006" && yxbj?.value)) { | |
| 593 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 594 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 595 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + scaledHeight + dYXCW / 2 - 4, 10 * scales, dYXCW)); | |
| 596 | + } else if (yxbj?.type === "7004" && yxbj?.value) { | |
| 597 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 598 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 - 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 599 | + pathList.push( | |
| 600 | + createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales) | |
| 601 | + ); | |
| 602 | + pathList.push( | |
| 603 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W") | |
| 604 | + ); | |
| 605 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dYXCW / 2 - 4, 10 * scales, dYXCW)); | |
| 606 | + } else if (yxbj?.type === "7005" && yxbj?.value) { | |
| 607 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); | |
| 608 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 609 | + pathList.push( | |
| 610 | + createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales) | |
| 611 | + ); | |
| 612 | + pathList.push( | |
| 613 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scale, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scale, "W") | |
| 614 | + ); | |
| 615 | + } else if (dYXCW && yxbj?.type) { | |
| 616 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + dYXCW / 2 - 4, 10 * scales, dYXCW)); | |
| 617 | + } | |
| 618 | + if (scaledDeep && scaledWidth && scaledHeight) { | |
| 619 | + // 纵向 D | |
| 620 | + pathList.push(createDoubleArrow(scaledDeep, scaledWidth + scaledHeight + scaledWidth / 2, scaledDeep / 2, scales)); | |
| 621 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth / 2 + 10, scaledDeep / 2, 10 * scales, "D")); | |
| 622 | + | |
| 623 | + // 横向 L | |
| 624 | + pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledDeep / 2, scales)); | |
| 625 | + pathList.push(createText(scaledWidth / 2, scaledDeep / 2 + 10, 10 * scales, "L")); | |
| 626 | + // W | |
| 627 | + pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledWidth + scaledHeight / 2, scaledDeep * 0.3, scales)); | |
| 628 | + pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep * 0.3 + 10, 10 * scales, "W")); | |
| 629 | + } | |
| 630 | + | |
| 631 | + pathList.forEach(x => { | |
| 632 | + g.appendChild(x); | |
| 633 | + }); | |
| 634 | + svg.appendChild(g); | |
| 635 | + } else if (Number(svgType) === 3) { | |
| 636 | + // 双折盒 | |
| 637 | + const rectangles = [ | |
| 638 | + { x: 0, y: 0, width: scaledHeight, height: scaledDeep }, | |
| 639 | + { x: 0 + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep }, | |
| 640 | + { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledHeight, height: scaledDeep }, | |
| 641 | + ]; | |
| 642 | + rectangles.forEach(rect => { | |
| 643 | + g.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); | |
| 644 | + }); | |
| 645 | + svg.appendChild(g); | |
| 646 | + let pathList = []; | |
| 647 | + // 上方盒舌 | |
| 648 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, 0, 0)); | |
| 649 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth + scaledHeight, 0)); | |
| 650 | + if (sfhs?.type && dSFHS) { | |
| 651 | + pathList.push(createText(scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 652 | + pathList.push(createText(scaledWidth + scaledHeight + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 653 | + } | |
| 654 | + // 下方盒舌 | |
| 655 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, 0, scaledDeep)); | |
| 656 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth + scaledHeight, scaledDeep)); | |
| 657 | + if (xfhs?.type && dXFHS) { | |
| 658 | + pathList.push(createText(scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dXFHS)); | |
| 659 | + pathList.push(createText(scaledWidth + scaledHeight + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dXFHS)); | |
| 660 | + } | |
| 661 | + // 左边贴边 | |
| 662 | + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); | |
| 663 | + if (zbtb?.type && dZTBW) { | |
| 664 | + pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW)); | |
| 665 | + } | |
| 666 | + // 右边贴边 | |
| 667 | + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth + scaledHeight * 2, 0)); | |
| 668 | + if (zbtb?.type && dYTBW) { | |
| 669 | + pathList.push(createText(scaledWidth + scaledHeight * 2 + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW)); | |
| 670 | + } | |
| 671 | + // 左下部件- | |
| 672 | + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, scaledHeight, scaledDeep)); | |
| 673 | + if ((zxbj?.type === "4001" && zxbj?.value) || (zxbj?.type === "4006" && zxbj?.value)) { | |
| 674 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 675 | + pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 676 | + pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 677 | + pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 678 | + } else if (zxbj?.type === "4004" && zxbj?.value) { | |
| 679 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 680 | + pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 681 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 682 | + pathList.push(createText(scaledHeight + scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 683 | + pathList.push(createText(scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 684 | + } else if (zxbj?.type === "4005" && zxbj?.value) { | |
| 685 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); | |
| 686 | + pathList.push(createText(scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 687 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 688 | + pathList.push(createText(scaledHeight + scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 689 | + } else if (zxbj?.type && dZXCW) { | |
| 690 | + pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 691 | + } | |
| 692 | + // 右上部件 | |
| 693 | + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledHeight, 0)); | |
| 694 | + if ((ysbj?.type === "6001" && ysbj?.value) || (ysbj?.type === "6006" && ysbj?.value)) { | |
| 695 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 696 | + pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 697 | + pathList.push(createText(scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2, 10 * scales, dYSCW)); | |
| 698 | + } else if (ysbj?.type === "6004" && ysbj?.value) { | |
| 699 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 700 | + pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 701 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); | |
| 702 | + pathList.push(createText(scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 703 | + pathList.push(createText(scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 704 | + } else if (ysbj?.type === "6005" && ysbj?.value) { | |
| 705 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales)); | |
| 706 | + pathList.push(createText(scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 707 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); | |
| 708 | + pathList.push(createText(scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 709 | + } else if (ysbj?.type && dYSCW) { | |
| 710 | + pathList.push(createText(scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 711 | + } | |
| 712 | + | |
| 713 | + if (scaledDeep && scaledWidth && scaledHeight) { | |
| 714 | + // 纵向 D | |
| 715 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledWidth + scaledHeight / 2, scaledDeep / 2, scales)); | |
| 716 | + pathList.push(createText(scaledHeight + scaledWidth + scaledHeight / 2 + 10, scaledDeep / 2, 10 * scales, "D")); | |
| 717 | + | |
| 718 | + // 横向 L | |
| 719 | + pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledHeight + scaledWidth / 2, scaledDeep / 2, scales)); | |
| 720 | + pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep / 2 + 10, 10 * scales, "L")); | |
| 721 | + // W | |
| 722 | + pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledHeight / 2, scaledDeep * 0.3, scales)); | |
| 723 | + pathList.push(createText(scaledHeight / 2, scaledDeep * 0.3 + 10, 10 * scales, "W")); | |
| 724 | + } | |
| 725 | + | |
| 726 | + pathList.forEach(x => { | |
| 727 | + g.appendChild(x); | |
| 728 | + }); | |
| 729 | + svg.appendChild(g); | |
| 730 | + } else if (Number(svgType) === 4) { | |
| 731 | + g.appendChild(createFullTelescope(scaledWidth, scaledHeight, scaledDeep, 0, 0)); | |
| 732 | + svg.appendChild(g); | |
| 733 | + // createFullTelescope | |
| 734 | + let pathList = []; | |
| 735 | + // 上方盒舌 | |
| 736 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledDeep, -dSFHS * scale, -scaledDeep, 0)); | |
| 737 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, -scaledDeep, -dSFHS * scale, scaledWidth + scaledDeep, 0)); | |
| 738 | + if (sfhs?.type && dSFHS) { | |
| 739 | + pathList.push(createText(-scaledDeep / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 740 | + pathList.push(createText(scaledWidth + scaledDeep / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 741 | + } | |
| 742 | + // 下方盒舌 | |
| 743 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledDeep, dXFHS * scale, -scaledDeep, scaledHeight)); | |
| 744 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, -scaledDeep, dXFHS * scale, scaledDeep + scaledWidth, scaledHeight)); | |
| 745 | + if (xfhs?.type && dXFHS) { | |
| 746 | + pathList.push(createText(-scaledDeep / 2, scaledHeight + (dXFHS / 2 - 5) * scales, 10 * scales, dXFHS)); | |
| 747 | + pathList.push(createText(scaledWidth + scaledDeep / 2, scaledHeight + (dXFHS / 2 - 5) * scales, 10 * scales, dXFHS)); | |
| 748 | + } | |
| 749 | + // 上方部件 | |
| 750 | + pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledDeep, -dZSCW * scale, 0, -scaledDeep)); | |
| 751 | + if ((zsbj?.type === "3001" && zsbj?.value) || (zsbj?.type === "3006" && zsbj?.value)) { | |
| 752 | + pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.2, -scaledDeep - scaledDeep / 2, scales)); | |
| 753 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledDeep - scaledDeep / 2, 10 * scales, "D")); | |
| 754 | + // 插位值 | |
| 755 | + pathList.push(createText(scaledWidth / 2, -scaledDeep * 2 - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 756 | + } else if (zsbj?.type === "3002" && dZSCW) { | |
| 757 | + pathList.push(createText(scaledWidth / 2, -scaledDeep - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 758 | + } else if (zsbj?.type === "3003" && dZSCW) { | |
| 759 | + pathList.push(createText(scaledWidth / 2, -scaledDeep - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 760 | + } else if (zsbj?.type === "3004" && zsbj?.value) { | |
| 761 | + pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.2, -scaledDeep - scaledDeep / 2, scales)); | |
| 762 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight - scaledDeep / 2, 10 * scales, "D")); | |
| 763 | + | |
| 764 | + pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.85, -(scaledDeep * 2 + scaledDeep / 2), scales)); | |
| 765 | + pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledDeep * 2 + scaledDeep / 2), 10 * scales, "D")); | |
| 766 | + | |
| 767 | + pathList.push(createText(scaledWidth * 0.3, -(scaledDeep * 3) - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 768 | + } else if (zsbj?.type === "3005" && zsbj?.value) { | |
| 769 | + pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.1, -scaledDeep - scaledDeep / 2, scales)); | |
| 770 | + pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledDeep - scaledDeep / 2, 10 * scales, "D")); | |
| 771 | + pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.8, -(scaledDeep * 2 + scaledDeep / 2), scales)); | |
| 772 | + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledDeep * 2 + scaledDeep / 2), 10 * scales, "D")); | |
| 773 | + } | |
| 774 | + // 左边部件 | |
| 775 | + pathList.push(createFull(zxbj?.type, scaledHeight, -scaledDeep, -dZXCW, -scaledDeep, 0)); | |
| 776 | + if ((zxbj?.type === "4001" && dZXCW) || (zxbj?.type === "4006" && dZXCW)) { | |
| 777 | + pathList.push(createHorizontalDoubleArrow(scaledDeep, -scaledDeep - scaledDeep / 2, scaledHeight * 0.8, scales)); | |
| 778 | + pathList.push(createText(-scaledDeep - scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); | |
| 779 | + pathList.push(createText(-scaledDeep - scaledDeep - dZXCW / 2, scaledHeight * 0.5, 10 * scales, dZXCW)); | |
| 780 | + } else if (zxbj?.type === "4004") { | |
| 781 | + pathList.push(createHorizontalDoubleArrow(scaledDeep, -scaledDeep - scaledDeep / 2, scaledHeight * 0.8, scales)); | |
| 782 | + pathList.push(createText(-scaledDeep - scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); | |
| 783 | + pathList.push(createHorizontalDoubleArrow(scaledDeep, -scaledDeep - scaledDeep - scaledDeep / 2, scaledHeight * 0.8, scales)); | |
| 784 | + pathList.push(createText(-scaledDeep - scaledDeep - scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); | |
| 785 | + | |
| 786 | + pathList.push(createText(-scaledDeep - scaledDeep - scaledDeep - dZXCW / 2, scaledHeight * 0.2, 10 * scales, dZXCW)); | |
| 787 | + } else if (zxbj?.type === "4005" && dZXCW) { | |
| 788 | + pathList.push(createHorizontalDoubleArrow(scaledDeep, -scaledDeep - scaledDeep / 2, scaledHeight * 0.8, scales)); | |
| 789 | + pathList.push(createText(-scaledDeep - scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); | |
| 790 | + pathList.push(createHorizontalDoubleArrow(scaledDeep, -scaledDeep - scaledDeep - scaledDeep / 2, scaledHeight * 0.8, scales)); | |
| 791 | + pathList.push(createText(-scaledDeep - scaledDeep - scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); | |
| 792 | + } else { | |
| 793 | + pathList.push(createText(-scaledDeep - dZXCW / 2, scaledHeight * 0.5, 10 * scales, dZXCW)); | |
| 794 | + } | |
| 795 | + // 右边 | |
| 796 | + pathList.push(createFull(ysbj?.type, scaledHeight, scaledDeep, dYSCW, scaledWidth + scaledDeep, 0)); | |
| 797 | + if ((ysbj?.type === "6001" && dYSCW) || (ysbj?.type === "6006" && dYSCW)) { | |
| 798 | + pathList.push(createHorizontalDoubleArrow(scaledDeep, scaledWidth + scaledDeep + scaledDeep / 2, scaledHeight * 0.8, scales)); | |
| 799 | + pathList.push(createText(scaledWidth + scaledDeep + scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); | |
| 800 | + pathList.push(createText(scaledWidth + scaledDeep + scaledDeep + dYSCW / 2, scaledHeight * 0.5, 10 * scales, dYSCW)); | |
| 801 | + } else if (ysbj?.type === "6004" && dYSCW) { | |
| 802 | + pathList.push(createHorizontalDoubleArrow(scaledDeep, scaledWidth + scaledDeep + scaledDeep / 2, scaledHeight * 0.8, scales)); | |
| 803 | + pathList.push(createText(scaledWidth + scaledDeep + scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); | |
| 804 | + pathList.push(createHorizontalDoubleArrow(scaledDeep, scaledWidth + scaledDeep + scaledDeep + scaledDeep / 2, scaledHeight * 0.8, scales)); | |
| 805 | + pathList.push(createText(scaledWidth + scaledDeep + scaledDeep + scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); | |
| 806 | + pathList.push(createText(scaledWidth + scaledDeep + scaledDeep + scaledDeep + dYSCW / 2, scaledHeight * 0.2, 10 * scales, dYSCW)); | |
| 807 | + } else if (zxbj?.type === "4005" && dYSCW) { | |
| 808 | + pathList.push(createHorizontalDoubleArrow(scaledDeep, scaledWidth + scaledDeep + scaledDeep / 2, scaledHeight * 0.8, scales)); | |
| 809 | + pathList.push(createText(scaledWidth + scaledDeep + scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); | |
| 810 | + pathList.push(createHorizontalDoubleArrow(scaledDeep, scaledWidth + scaledDeep + scaledDeep + scaledDeep / 2, scaledHeight * 0.8, scales)); | |
| 811 | + pathList.push(createText(scaledWidth + scaledDeep + scaledDeep + scaledDeep / 2, scaledHeight * 0.8 + 5, 10 * scales, "D")); | |
| 812 | + } else { | |
| 813 | + pathList.push(createText(scaledWidth + scaledDeep + dYSCW / 2, scaledHeight * 0.5, 10 * scales, dYSCW)); | |
| 814 | + } | |
| 815 | + // 下方部件 | |
| 816 | + pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledDeep, dYXCW * scale, 0, scaledHeight + scaledDeep)); | |
| 817 | + if ((yxbj?.type === "7001" && yxbj?.value) || (yxbj?.type === "7006" && yxbj?.value)) { | |
| 818 | + pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.2, scaledHeight + scaledDeep + scaledDeep / 2, scales)); | |
| 819 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledHeight + scaledDeep + scaledDeep / 2, 10 * scales, "D")); | |
| 820 | + // 插位值 | |
| 821 | + pathList.push(createText(scaledWidth / 2, scaledHeight + scaledDeep * 2 + dYXCW / 2 - 5, 10 * scales, dYXCW)); | |
| 822 | + } else if (yxbj?.type === "7004" && yxbj?.value) { | |
| 823 | + pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.2, scaledHeight + scaledDeep + scaledDeep / 2, scales)); | |
| 824 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledHeight + scaledDeep + scaledDeep / 2, 10 * scales, "D")); | |
| 825 | + | |
| 826 | + pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.85, scaledHeight + scaledDeep * 2 + scaledDeep / 2, scales)); | |
| 827 | + pathList.push(createText(scaledWidth * 0.85 + 10 * scales, scaledHeight + scaledDeep * 2 + scaledDeep / 2, 10 * scales, "D")); | |
| 828 | + | |
| 829 | + pathList.push(createText(scaledWidth * 0.3, scaledHeight + scaledDeep * 3 + dYXCW / 2 - 5, 10 * scales, dYXCW)); | |
| 830 | + } else if (yxbj?.type === "7005" && yxbj?.value) { | |
| 831 | + pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.1, scaledHeight + scaledDeep + scaledDeep / 2, scales)); | |
| 832 | + pathList.push(createText(scaledWidth * 0.1 + 10 * scales, scaledHeight + scaledDeep + scaledDeep / 2, 10 * scales, "D")); | |
| 833 | + pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.8, scaledHeight + scaledDeep * 2 + scaledDeep / 2, scales)); | |
| 834 | + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, scaledHeight + scaledDeep * 2 + scaledDeep / 2, 10 * scales, "D")); | |
| 835 | + } else if (dYXCW && yxbj?.type) { | |
| 836 | + pathList.push(createText(scaledWidth / 2, scaledHeight + scaledDeep + dYXCW / 2 - 5, 10 * scales, dYXCW)); | |
| 837 | + } | |
| 838 | + | |
| 839 | + if (scaledDeep && scaledWidth && scaledHeight) { | |
| 840 | + // 纵向 D | |
| 841 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledHeight / 2, scales)); | |
| 842 | + pathList.push(createText(scaledWidth * 0.2 + 10, scaledHeight / 2, 10 * scales, "W")); | |
| 843 | + pathList.push(createDoubleArrow(scaledDeep, scaledWidth * 0.7, -scaledDeep / 2, scales)); | |
| 844 | + pathList.push(createText(scaledWidth * 0.7 + 10, -scaledDeep / 2, 10 * scales, "D")); | |
| 845 | + | |
| 846 | + // 横向 L | |
| 847 | + pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledHeight * 0.8, scales)); | |
| 848 | + pathList.push(createText(scaledWidth / 2, scaledHeight * 0.8 + 10, 10 * scales, "L")); | |
| 849 | + // W | |
| 850 | + pathList.push(createHorizontalDoubleArrow(scaledDeep, -scaledDeep / 2, scaledHeight * 0.3, scales)); | |
| 851 | + pathList.push(createText(-scaledDeep / 2, scaledHeight * 0.3 + 10, 10 * scales, "D")); | |
| 852 | + } | |
| 853 | + pathList.forEach(x => { | |
| 854 | + g.appendChild(x); | |
| 855 | + }); | |
| 856 | + svg.appendChild(g); | |
| 857 | + } else if (Number(svgType) === 5) { | |
| 858 | + const rectangles = [ | |
| 859 | + { x: 0, y: 0, width: scaledHeight, height: scaledWidth }, | |
| 860 | + { x: 0 + scaledHeight, y: 0, width: scaledDeep, height: scaledWidth }, | |
| 861 | + { x: 0 + scaledHeight + scaledDeep, y: 0, width: scaledHeight, height: scaledWidth }, | |
| 862 | + { x: 0 + scaledHeight * 2 + scaledDeep, y: 0, width: scaledDeep, height: scaledWidth }, | |
| 863 | + ]; | |
| 864 | + rectangles.forEach(rect => { | |
| 865 | + g.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); | |
| 866 | + }); | |
| 867 | + svg.appendChild(g); | |
| 868 | + let pathList = []; | |
| 869 | + // 上方盒舌 | |
| 870 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledDeep, -dSFHS * scale, scaledHeight, 0)); | |
| 871 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, -scaledDeep, -dSFHS * scale, scaledHeight * 2 + scaledDeep * 2, 0)); | |
| 872 | + if (sfhs?.type && dSFHS) { | |
| 873 | + pathList.push(createText(scaledHeight + scaledDeep / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 874 | + pathList.push(createText(scaledHeight * 2 + scaledDeep + scaledDeep / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 875 | + } | |
| 876 | + // 下方盒舌 | |
| 877 | + | |
| 878 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledDeep, dXFHS * scale, scaledHeight, scaledWidth)); | |
| 879 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, -scaledDeep, dXFHS * scale, scaledHeight * 2 + scaledDeep * 2, scaledWidth)); | |
| 880 | + if (xfhs?.type && dXFHS) { | |
| 881 | + pathList.push(createText(scaledHeight + scaledDeep / 2, scaledWidth + (dXFHS / 2) * scales, 10 * scales, dXFHS)); | |
| 882 | + pathList.push(createText(scaledHeight * 2 + scaledDeep + scaledDeep / 2, scaledWidth + (dXFHS / 2) * scales, 10 * scales, dXFHS)); | |
| 883 | + } | |
| 884 | + | |
| 885 | + // 左边贴边 | |
| 886 | + pathList.push(createTrapezoidLeft(zbtb?.type, scaledWidth, -dZTBW * scale, 0, 0)); | |
| 887 | + if (zbtb?.type && dZTBW) { | |
| 888 | + pathList.push(createText(-dZTBW * 0.4, scaledWidth / 2, 10 * scales, dZTBW)); | |
| 889 | + } | |
| 890 | + // 右边贴边 | |
| 891 | + pathList.push(createTrapezoidRight(ybtb?.type, scaledWidth, dYTBW * scale, scaledHeight * 2 + scaledDeep * 2, 0)); | |
| 892 | + if (ybtb?.type && dYTBW) { | |
| 893 | + pathList.push(createText(scaledHeight * 2 + scaledDeep * 2 + dYTBW * 0.4, scaledWidth / 2, 10 * scales, dYTBW)); | |
| 894 | + } | |
| 895 | + // 左上部件 | |
| 896 | + pathList.push(createDynamicTopLeft(zsbj?.type, scaledHeight, -scaledDeep, -dZSCW * scale, 0, 0)); | |
| 897 | + if ((zsbj?.type === "3001" && zsbj?.value) || (zsbj?.type === "3006" && zsbj?.value)) { | |
| 898 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.2, -scaledDeep / 2, scales)); | |
| 899 | + pathList.push(createText(scaledHeight * 0.2 + 10 * scales, -scaledDeep / 2, 10 * scales, "D")); | |
| 900 | + // 插位值 | |
| 901 | + pathList.push(createText(scaledHeight / 2, -scaledDeep - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 902 | + } else if (zsbj?.type === "3002" && dZSCW) { | |
| 903 | + pathList.push(createText(scaledHeight / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 904 | + } else if (zsbj?.type === "3003" && dZSCW) { | |
| 905 | + pathList.push(createText(scaledHeight / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 906 | + } else if (zsbj?.type === "3004" && zsbj?.value) { | |
| 907 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.2, -scaledDeep / 2, scales)); | |
| 908 | + pathList.push(createText(scaledHeight * 0.2 + 10 * scales, -scaledDeep / 2, 10 * scales, "D")); | |
| 909 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.85, -(scaledDeep + scaledDeep / 2), scales)); | |
| 910 | + pathList.push(createText(scaledHeight * 0.85 + 10 * scales, -(scaledDeep + scaledDeep / 2), 10 * scales, "D")); | |
| 911 | + pathList.push(createText(scaledHeight * 0.3, -(scaledDeep * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 912 | + } else if (zsbj?.type === "3005" && zsbj?.value) { | |
| 913 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.1, -scaledDeep / 2, scales)); | |
| 914 | + pathList.push(createText(scaledHeight * 0.1 + 10 * scales, -scaledDeep / 2, 10 * scales, "D")); | |
| 915 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.8, -(scaledDeep + scaledDeep / 2), scales)); | |
| 916 | + pathList.push(createText(scaledHeight * 0.8 + 10 * scales, -(scaledDeep + scaledHeight / 2), 10 * scales, "D")); | |
| 917 | + } | |
| 918 | + // 右上部件 | |
| 919 | + pathList.push(createDynamicTopLeft(ysbj?.type, scaledHeight, -scaledDeep, -dYSCW * scale, scaledHeight + scaledDeep, 0)); | |
| 920 | + if ((ysbj?.type === "6001" && ysbj?.value) || (ysbj?.type === "6006" && ysbj?.value)) { | |
| 921 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.2, -scaledDeep / 2, scales)); | |
| 922 | + pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.2 + 10 * scales, -scaledDeep / 2, 10 * scales, "D")); | |
| 923 | + pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.5, -scaledDeep - dYSCW / 2, 10 * scales, dYSCW)); | |
| 924 | + } else if (ysbj?.type === "6002" && dYSCW) { | |
| 925 | + pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 926 | + } else if (ysbj?.type === "6003" && dYSCW) { | |
| 927 | + pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 928 | + } else if (ysbj?.type === "6004" && ysbj?.value) { | |
| 929 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.2, -scaledDeep / 2, scales)); | |
| 930 | + pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.2 + 10 * scales, -scaledDeep / 2, 10 * scales, "D")); | |
| 931 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.85, -(scaledDeep + scaledDeep / 2), scales)); | |
| 932 | + pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.85 + 10 * scales, -(scaledDeep + scaledDeep / 2), 10 * scales, "D")); | |
| 933 | + pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.3, -(scaledDeep * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 934 | + } else if (ysbj?.type === "6005" && ysbj?.value) { | |
| 935 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.1, -scaledDeep / 2, scales)); | |
| 936 | + pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.1 + 10 * scales, -scaledDeep / 2, 10 * scales, "D")); | |
| 937 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.8, -(scaledDeep + scaledDeep / 2), scales)); | |
| 938 | + pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.8 + 10 * scales, -(scaledDeep + scaledDeep / 2), 10 * scales, "D")); | |
| 939 | + } | |
| 940 | + // 左下部件- | |
| 941 | + | |
| 942 | + if (!(hdzj && hdzj.type)) { | |
| 943 | + pathList.push(createDynamicTopLeft(zxbj?.type, scaledHeight, scaledDeep, dZXCW * scale, 0, scaledWidth)); | |
| 944 | + if ((zxbj?.type === "4001" && zxbj?.value) || (zxbj?.type === "4006" && zxbj?.value)) { | |
| 945 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.2, scaledWidth + scaledDeep / 2, scales)); | |
| 946 | + pathList.push(createText(scaledHeight * 0.2 + 10 * scales, scaledWidth + scaledDeep / 2, 10 * scales, "D")); | |
| 947 | + pathList.push(createText(scaledHeight / 2, scaledWidth + scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 948 | + } else if (zxbj?.type === "4002" && dZXCW) { | |
| 949 | + pathList.push(createText(scaledHeight / 2, scaledWidth + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 950 | + } else if (zxbj?.type === "4003" && dZXCW) { | |
| 951 | + pathList.push(createText(scaledHeight / 2, scaledWidth + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 952 | + } else if (zxbj?.type === "4004" && zxbj?.value) { | |
| 953 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.2, scaledWidth + scaledDeep / 2, scales)); | |
| 954 | + pathList.push(createText(scaledHeight * 0.2 + 10 * scales, scaledWidth + scaledDeep / 2, 10 * scales, "D")); | |
| 955 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.85, scaledWidth + (scaledDeep + scaledDeep / 2), scales)); | |
| 956 | + pathList.push(createText(scaledHeight * 0.85 + 10 * scales, scaledHeight + (scaledWidth + scaledWidth / 2), 10 * scales, "D")); | |
| 957 | + pathList.push(createText(scaledHeight * 0.3, scaledWidth + scaledDeep * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 958 | + } else if (zxbj?.type === "4005" && zxbj?.value) { | |
| 959 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.1, scaledWidth + scaledDeep / 2, scales)); | |
| 960 | + pathList.push(createText(scaledHeight * 0.1 + 10 * scales, scaledWidth + scaledDeep / 2, 10 * scales, "D")); | |
| 961 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight * 0.8, scaledWidth + (scaledDeep + scaledDeep / 2), scales)); | |
| 962 | + pathList.push(createText(scaledHeight * 0.8 + 10 * scales, scaledWidth + (scaledDeep + scaledDeep / 2), 10 * scales, "D")); | |
| 963 | + } | |
| 964 | + } | |
| 965 | + if (!(hdzj && hdzj.type)) { | |
| 966 | + pathList.push(createDynamicTopLeft(yxbj?.type, scaledHeight, scaledDeep, dYXCW * scale, scaledHeight + scaledDeep, scaledWidth)); | |
| 967 | + if ((yxbj?.type === "7001" && yxbj?.value) || (yxbj?.type === "7006" && yxbj?.value)) { | |
| 968 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.2, scaledWidth + scaledDeep / 2, scales)); | |
| 969 | + pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.2 + 10 * scales, scaledWidth + scaledDeep / 2, 10 * scales, "D")); | |
| 970 | + pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.5, scaledWidth + scaledDeep + dYXCW / 2, 10 * scales, dYXCW)); | |
| 971 | + } else if (yxbj?.type === "7004" && yxbj?.value) { | |
| 972 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledDeep * 0.2, scaledWidth + scaledDeep / 2, scales)); | |
| 973 | + pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.2 - 10 * scales, scaledWidth + scaledDeep / 2, 10 * scales, "D")); | |
| 974 | + pathList.push( | |
| 975 | + createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.85, scaledWidth + (scaledDeep + scaledDeep / 2), scales) | |
| 976 | + ); | |
| 977 | + pathList.push( | |
| 978 | + createText(scaledHeight + scaledDeep + scaledHeight * 0.85 + 10 * scales, scaledWidth + (scaledDeep + scaledDeep / 2), 10 * scales, "D") | |
| 979 | + ); | |
| 980 | + pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.3, scaledWidth + scaledDeep * 2 + dYXCW / 2 - 4, 10 * scales, dYXCW)); | |
| 981 | + } else if (yxbj?.type === "7005" && yxbj?.value) { | |
| 982 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.1, scaledWidth + scaledDeep / 2, scales)); | |
| 983 | + pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.1 + 10 * scales, scaledWidth + scaledDeep / 2, 10 * scales, "D")); | |
| 984 | + pathList.push( | |
| 985 | + createDoubleArrow(scaledDeep, scaledHeight + scaledDeep + scaledHeight * 0.8, scaledWidth + (scaledDeep + scaledDeep / 2), scales) | |
| 986 | + ); | |
| 987 | + pathList.push( | |
| 988 | + createText(scaledHeight + scaledDeep + scaledHeight * 0.8 + 10 * scales, scaledWidth + (scaledDeep + scaledDeep / 2), 10 * scales, "D") | |
| 989 | + ); | |
| 990 | + } else if (dYXCW && yxbj?.type) { | |
| 991 | + pathList.push(createText(scaledHeight + scaledDeep + scaledHeight * 0.5, scaledWidth + dYXCW / 2 - 4, 10 * scales, dYXCW)); | |
| 992 | + } | |
| 993 | + } | |
| 994 | + // 右下部件 | |
| 995 | + | |
| 996 | + // 纵向 L | |
| 997 | + if (scaledDeep && scaledWidth && scaledHeight) { | |
| 998 | + pathList.push(createDoubleArrow(scaledWidth, scaledHeight * 0.8, scaledWidth / 2, scales)); | |
| 999 | + pathList.push(createText(scaledHeight * 0.8 - 10 * scales, scaledWidth / 2, 10 * scales, "L")); | |
| 1000 | + | |
| 1001 | + // 横向 L | |
| 1002 | + pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledHeight / 2, scaledWidth * 0.3, scales)); | |
| 1003 | + pathList.push(createText(scaledHeight / 2, scaledWidth * 0.3 + 10 * scales, 10 * scales, "W")); | |
| 1004 | + // W | |
| 1005 | + pathList.push(createHorizontalDoubleArrow(scaledDeep, scaledHeight + scaledDeep / 2, scaledWidth * 0.5, scale)); | |
| 1006 | + pathList.push(createText(scaledHeight + scaledDeep / 2, scaledWidth * 0.5 + 10 * scales, 10 * scales, "D")); | |
| 1007 | + } | |
| 1008 | + pathList.forEach(x => { | |
| 1009 | + g.appendChild(x); | |
| 1010 | + }); | |
| 1011 | + svg.appendChild(g); | |
| 1012 | + // g.setAttribute('transform', `rotate(90, ${viewBoxWidth/2}, ${viewBoxHeight/2})`); | |
| 1013 | + } | |
| 1014 | + }; | |
| 1015 | + // 计算头部偏移 | |
| 1016 | + const topOffect = (list, length, width, height) => { | |
| 1017 | + // 判断code | |
| 1018 | + const valueList = list.filter(x => x.type !== ("" || null)); | |
| 1019 | + // const titleList = ['上方盒舌','左(上)插位组件','右(上)插位组件'] | |
| 1020 | + const sfhs = valueList.find(x => x.sName === "上方盒舌"); | |
| 1021 | + const zscw = valueList.find(x => x.sName === "左(上)插位组件"); | |
| 1022 | + const yscw = valueList.find(x => x.sName === "右(上)插位组件"); | |
| 1023 | + const svgType = valueList.find(x => x.sName === "盒身")?.type; | |
| 1024 | + let top = 0; | |
| 1025 | + const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006"]; | |
| 1026 | + const four = ["6004", "3004", "4004", "7004"]; | |
| 1027 | + const five = ["6005", "3005", "4005", "7005"]; | |
| 1028 | + const dYSCW = Number(yscw?.value) || 0; | |
| 1029 | + const dZSCW = Number(zscw?.value) || 0; | |
| 1030 | + // 如果存在插位就不计算盒舌 | |
| 1031 | + if (zscw?.type && yscw?.type) { | |
| 1032 | + const max = Math.max(dZSCW, dYSCW); | |
| 1033 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 1034 | + top = svgType === "5" ? height * 2 : width * 2; | |
| 1035 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 1036 | + const z = four.includes(zscw?.type) ? (svgType === "5" ? height * 2 + dZSCW : width * 2 + dZSCW) : dZSCW; | |
| 1037 | + const y = four.includes(yscw?.type) ? (svgType === "5" ? height * 2 + dYSCW : width * 2 + dYSCW) : dYSCW; | |
| 1038 | + const max = Math.max(z, y); | |
| 1039 | + if (max > sfhs?.value) { | |
| 1040 | + top = max; | |
| 1041 | + } else { | |
| 1042 | + top = sfhs?.value; | |
| 1043 | + } | |
| 1044 | + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { | |
| 1045 | + const z = one.includes(zscw?.type) ? (svgType === "5" ? height + dZSCW : width + dZSCW) : dZSCW; | |
| 1046 | + const y = one.includes(yscw?.type) ? (svgType === "5" ? height + dYSCW : width + dYSCW) : dYSCW; | |
| 1047 | + const max = Math.max(z, y); | |
| 1048 | + if (max > sfhs?.value) { | |
| 1049 | + top = max; | |
| 1050 | + } else { | |
| 1051 | + top = sfhs?.value; | |
| 1052 | + } | |
| 1053 | + } else { | |
| 1054 | + top = max; | |
| 1055 | + } | |
| 1056 | + } else if (yscw?.type) { | |
| 1057 | + const max = dYSCW; | |
| 1058 | + if ( | |
| 1059 | + five.includes(zscw?.type) || | |
| 1060 | + five.includes(yscw?.type) || | |
| 1061 | + (four.includes(zscw?.type) || four.includes(yscw?.type)) || | |
| 1062 | + (one.includes(zscw?.type) || one.includes(yscw?.type)) | |
| 1063 | + ) { | |
| 1064 | + const coefficient = svgType === "5" ? height : width; | |
| 1065 | + let addValue = 0; | |
| 1066 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 1067 | + addValue = 2 * coefficient; | |
| 1068 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 1069 | + addValue = 2 * coefficient + max; | |
| 1070 | + } else { | |
| 1071 | + addValue = coefficient + max; | |
| 1072 | + } | |
| 1073 | + top = addValue > sfhs?.value ? addValue : sfhs?.value; | |
| 1074 | + } else { | |
| 1075 | + top = addValue > sfhs?.value ? max : sfhs?.value; | |
| 1076 | + } | |
| 1077 | + } else if (zscw?.type) { | |
| 1078 | + const max = dZSCW; | |
| 1079 | + if ( | |
| 1080 | + five.includes(zscw?.type) || | |
| 1081 | + five.includes(yscw?.type) || | |
| 1082 | + (four.includes(zscw?.type) || four.includes(yscw?.type)) || | |
| 1083 | + (one.includes(zscw?.type) || one.includes(yscw?.type)) | |
| 1084 | + ) { | |
| 1085 | + const coefficient = svgType === "5" ? height : width; | |
| 1086 | + let addValue = 0; | |
| 1087 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 1088 | + addValue = 2 * coefficient; | |
| 1089 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 1090 | + addValue = 2 * coefficient + max; | |
| 1091 | + } else { | |
| 1092 | + addValue = coefficient + max; | |
| 1093 | + } | |
| 1094 | + top = addValue > sfhs?.value ? addValue : sfhs?.value; | |
| 1095 | + } else { | |
| 1096 | + top = max > sfhs?.value ? max : sfhs?.value; | |
| 1097 | + } | |
| 1098 | + } else { | |
| 1099 | + top = sfhs?.value; | |
| 1100 | + } | |
| 1101 | + // 处理天地盒默认加上高 | |
| 1102 | + if (Number(svgType) === 4) { | |
| 1103 | + top = top + height; | |
| 1104 | + } | |
| 1105 | + return isNaN(top) ? 0 : top; | |
| 1106 | + }; | |
| 1107 | + const bottomOffect = (list, length, width, height) => { | |
| 1108 | + // 判断code | |
| 1109 | + const valueList = list.filter(x => x.type !== ("" || null)); | |
| 1110 | + // const titleList = ['上方盒舌','左(上)插位组件','右(上)插位组件'] | |
| 1111 | + const sfhs = valueList.find(x => x.sName === "下方盒舌"); | |
| 1112 | + const zscw = valueList.find(x => x.sName === "左(下)插位组件"); | |
| 1113 | + const yscw = valueList.find(x => x.sName === "右(下)插位组件"); | |
| 1114 | + const hdzj = valueList.find(x => x.sName === "盒底组件"); | |
| 1115 | + const svgType = valueList.find(x => x.sName === "盒身")?.type; | |
| 1116 | + // 将找到的对象放入数组中，并过滤掉 undefined 值 | |
| 1117 | + // 使用 reduce 方法比较 value 属性，找出最大的对象 | |
| 1118 | + let top = 0; | |
| 1119 | + const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006"]; | |
| 1120 | + const four = ["6004", "3004", "4004", "7004"]; | |
| 1121 | + const five = ["6005", "3005", "4005", "7005"]; | |
| 1122 | + const dYSCW = Number(yscw?.value) || 0; | |
| 1123 | + const dZSCW = Number(zscw?.value) || 0; | |
| 1124 | + if (hdzj?.type) { | |
| 1125 | + return Number(hdzj?.value); | |
| 1126 | + } | |
| 1127 | + if (zscw?.type && yscw?.type) { | |
| 1128 | + const max = Math.max(dZSCW, dYSCW); | |
| 1129 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 1130 | + top = svgType === "5" ? height * 2 : width * 2; | |
| 1131 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 1132 | + const z = four.includes(zscw?.type) ? (svgType === "5" ? height * 2 + dZSCW : width * 2 + dZSCW) : dZSCW; | |
| 1133 | + const y = four.includes(yscw?.type) ? (svgType === "5" ? height * 2 + dYSCW : width * 2 + dYSCW) : dYSCW; | |
| 1134 | + const max = Math.max(z, y); | |
| 1135 | + if (max > sfhs?.value) { | |
| 1136 | + top = max; | |
| 1137 | + } else { | |
| 1138 | + top = sfhs?.value; | |
| 1139 | + } | |
| 1140 | + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { | |
| 1141 | + const z = one.includes(zscw?.type) ? (svgType === "5" ? height + dZSCW : width + dZSCW) : dZSCW; | |
| 1142 | + const y = one.includes(yscw?.type) ? (svgType === "5" ? height + dYSCW : width + dYSCW) : dYSCW; | |
| 1143 | + const max = Math.max(z, y); | |
| 1144 | + if (max > sfhs?.value) { | |
| 1145 | + top = max; | |
| 1146 | + } else { | |
| 1147 | + top = sfhs?.value; | |
| 1148 | + } | |
| 1149 | + } else { | |
| 1150 | + top = max; | |
| 1151 | + } | |
| 1152 | + } else if (yscw?.type) { | |
| 1153 | + const max = dYSCW; | |
| 1154 | + if ( | |
| 1155 | + five.includes(zscw?.type) || | |
| 1156 | + five.includes(yscw?.type) || | |
| 1157 | + (four.includes(zscw?.type) || four.includes(yscw?.type)) || | |
| 1158 | + (one.includes(zscw?.type) || one.includes(yscw?.type)) | |
| 1159 | + ) { | |
| 1160 | + const coefficient = svgType === "5" ? height : width; | |
| 1161 | + let addValue = 0; | |
| 1162 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 1163 | + addValue = 2 * coefficient; | |
| 1164 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 1165 | + addValue = 2 * coefficient + max; | |
| 1166 | + } else { | |
| 1167 | + addValue = coefficient + max; | |
| 1168 | + } | |
| 1169 | + top = addValue > sfhs?.value ? addValue : sfhs?.value; | |
| 1170 | + } else { | |
| 1171 | + top = addValue > sfhs?.value ? max : sfhs?.value; | |
| 1172 | + } | |
| 1173 | + } else if (zscw?.type) { | |
| 1174 | + const max = dZSCW; | |
| 1175 | + if ( | |
| 1176 | + five.includes(zscw?.type) || | |
| 1177 | + five.includes(yscw?.type) || | |
| 1178 | + (four.includes(zscw?.type) || four.includes(yscw?.type)) || | |
| 1179 | + (one.includes(zscw?.type) || one.includes(yscw?.type)) | |
| 1180 | + ) { | |
| 1181 | + const coefficient = svgType === "5" ? height : width; | |
| 1182 | + let addValue = 0; | |
| 1183 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 1184 | + addValue = 2 * coefficient; | |
| 1185 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 1186 | + addValue = 2 * coefficient + max; | |
| 1187 | + } else { | |
| 1188 | + addValue = coefficient + max; | |
| 1189 | + } | |
| 1190 | + top = addValue > sfhs?.value ? addValue : sfhs?.value; | |
| 1191 | + } else { | |
| 1192 | + top = max > sfhs?.value ? max : sfhs?.value; | |
| 1193 | + } | |
| 1194 | + } else { | |
| 1195 | + top = sfhs?.value; | |
| 1196 | + } | |
| 1197 | + // if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 1198 | + // top = width * 2; | |
| 1199 | + // } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 1200 | + // if (dZSCW && dYSCW) { | |
| 1201 | + // const max = Math.max(dZSCW, dYSCW); | |
| 1202 | + // top = width * 2 + max; | |
| 1203 | + // } else if (dZSCW && !dYSCW) { | |
| 1204 | + // top = width * 2 + dZSCW; | |
| 1205 | + // } else if (!dZSCW && dYSCW) { | |
| 1206 | + // top = width * 2 + dYSCW; | |
| 1207 | + // } | |
| 1208 | + // } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { | |
| 1209 | + // if (dZSCW && dYSCW) { | |
| 1210 | + // const max = Math.max(dZSCW, dYSCW); | |
| 1211 | + // top = width + max; | |
| 1212 | + // } else if (dZSCW && !dYSCW) { | |
| 1213 | + // top = width + dZSCW; | |
| 1214 | + // } else if (!dZSCW && dYSCW) { | |
| 1215 | + // top = width + dYSCW; | |
| 1216 | + // } | |
| 1217 | + // } else { | |
| 1218 | + // if (dZSCW && !dYSCW) { | |
| 1219 | + // top = Number(dZSCW); | |
| 1220 | + // } else if (!dZSCW && dYSCW) { | |
| 1221 | + // top = Number(dYSCW); | |
| 1222 | + // } else { | |
| 1223 | + // top = Number(sfhs?.value); | |
| 1224 | + // } | |
| 1225 | + // } | |
| 1226 | + // 处理天地盒默认加上高 | |
| 1227 | + if (Number(svgType) === 4) { | |
| 1228 | + top = top + height; | |
| 1229 | + } | |
| 1230 | + return isNaN(top) ? 0 : top; | |
| 1231 | + }; | |
| 1232 | + // 上方盒舌左边 | |
| 1233 | + const createUpperBoxTongueLeft = (upperBoxTongueType, width, height, offsetX, offsetY) => { | |
| 1234 | + if (!height) return createNoneProject(); | |
| 1235 | + // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 | |
| 1236 | + let data = {}; | |
| 1237 | + switch (upperBoxTongueType) { | |
| 1238 | + case "1001": | |
| 1239 | + data = createLineWeltTop(width, height, offsetX, offsetY); | |
| 1240 | + break; | |
| 1241 | + case "1002": | |
| 1242 | + data = createIsoscelesTrapezoidWeltTop(width, height, offsetX, offsetY); | |
| 1243 | + break; | |
| 1244 | + case "1003": | |
| 1245 | + data = createTrapezoidWeltTop(width, height, offsetX, offsetY); | |
| 1246 | + break; | |
| 1247 | + case "1004": | |
| 1248 | + data = createFoldWeltTop(width, height, offsetX, offsetY); | |
| 1249 | + break; | |
| 1250 | + case "1005": | |
| 1251 | + data = createRoundedCornersWeltTop(width, height, offsetX, offsetY); | |
| 1252 | + break; | |
| 1253 | + case "2001": | |
| 1254 | + data = createLineWeltTop(width, height, offsetX, offsetY); | |
| 1255 | + break; | |
| 1256 | + case "2002": | |
| 1257 | + data = createIsoscelesTrapezoidWeltTop(width, height, offsetX, offsetY); | |
| 1258 | + break; | |
| 1259 | + case "2003": | |
| 1260 | + data = createTrapezoidWeltTop(width, height, offsetX, offsetY); | |
| 1261 | + break; | |
| 1262 | + case "2004": | |
| 1263 | + data = createFoldWeltTop(width, height, offsetX, offsetY); | |
| 1264 | + break; | |
| 1265 | + case "2005": | |
| 1266 | + data = createRoundedCornersWeltTop(width, height, offsetX, offsetY); | |
| 1267 | + break; | |
| 1268 | + default: | |
| 1269 | + data = createNoneProject(); | |
| 1270 | + break; | |
| 1271 | + } | |
| 1272 | + return data; | |
| 1273 | + }; | |
| 1274 | + // 右上方盒舌 | |
| 1275 | + const createUpperBoxTongueRight = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => { | |
| 1276 | + if (!size) return createNoneProject(); | |
| 1277 | + // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 | |
| 1278 | + let data = {}; | |
| 1279 | + switch (upperBoxTongueType) { | |
| 1280 | + case "1001": | |
| 1281 | + data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2); | |
| 1282 | + break; | |
| 1283 | + case 1: | |
| 1284 | + data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2); | |
| 1285 | + break; | |
| 1286 | + default: | |
| 1287 | + data = createNoneProject(); | |
| 1288 | + break; | |
| 1289 | + } | |
| 1290 | + return data; | |
| 1291 | + }; | |
| 1292 | + // 右上方盒舌 | |
| 1293 | + const createBottomBoxTongueRight = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => { | |
| 1294 | + if (!size) return createNoneProject(); | |
| 1295 | + // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 | |
| 1296 | + let data = {}; | |
| 1297 | + switch (upperBoxTongueType) { | |
| 1298 | + case 0: | |
| 1299 | + data = createTopTongue(-deep, offsetX, offsetY, size, -2, 5, 0, true); | |
| 1300 | + break; | |
| 1301 | + case 1: | |
| 1302 | + data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2); | |
| 1303 | + break; | |
| 1304 | + default: | |
| 1305 | + data = createNoneProject(); | |
| 1306 | + break; | |
| 1307 | + } | |
| 1308 | + return data; | |
| 1309 | + }; | |
| 1310 | + const createBottomBoxTongueLeft = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => { | |
| 1311 | + if (!size) return createNoneProject(); | |
| 1312 | + // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 | |
| 1313 | + let data = {}; | |
| 1314 | + switch (upperBoxTongueType) { | |
| 1315 | + case 0: | |
| 1316 | + data = createTopTongue(deep, offsetX, offsetY, size, 2, 5, 1, false); | |
| 1317 | + break; | |
| 1318 | + case 1: | |
| 1319 | + data = createTopTongueType1(deep, offsetX, offsetY, -size, 3, 2); | |
| 1320 | + break; | |
| 1321 | + default: | |
| 1322 | + data = createNoneProject(); | |
| 1323 | + break; | |
| 1324 | + } | |
| 1325 | + return data; | |
| 1326 | + }; | |
| 1327 | + | |
| 1328 | + // 左边贴位 | |
| 1329 | + const createTrapezoidLeft = (trapezoidLeftType, height, size, offsetX, offsetY) => { | |
| 1330 | + if (!size) return createNoneProject(); | |
| 1331 | + let data = {}; | |
| 1332 | + switch (trapezoidLeftType) { | |
| 1333 | + case "8001": | |
| 1334 | + data = createWelt(height, size, offsetX, offsetY); | |
| 1335 | + break; | |
| 1336 | + case "8002": | |
| 1337 | + data = createWelt1(height, size, offsetX, offsetY); | |
| 1338 | + break; | |
| 1339 | + case "8003": | |
| 1340 | + data = createWelt2(height, size, offsetX, offsetY); | |
| 1341 | + break; | |
| 1342 | + case "8004": | |
| 1343 | + data = createWelt3(height, size, offsetX, offsetY); | |
| 1344 | + break; | |
| 1345 | + default: | |
| 1346 | + data = createNoneProject(); | |
| 1347 | + break; | |
| 1348 | + } | |
| 1349 | + return data; | |
| 1350 | + }; | |
| 1351 | + // 右边贴位 | |
| 1352 | + const createTrapezoidRight = (trapezoidLeftType, height, size, offsetX, offsetY) => { | |
| 1353 | + if (!size) return createNoneProject(); | |
| 1354 | + let data = {}; | |
| 1355 | + switch (trapezoidLeftType) { | |
| 1356 | + case "9001": | |
| 1357 | + data = createWelt(height, size, offsetX, offsetY); | |
| 1358 | + break; | |
| 1359 | + case "9002": | |
| 1360 | + data = createWelt1(height, size, offsetX, offsetY); | |
| 1361 | + break; | |
| 1362 | + case "9003": | |
| 1363 | + data = createWelt2Right(height, size, offsetX, offsetY); | |
| 1364 | + break; | |
| 1365 | + case "9004": | |
| 1366 | + data = createWelt3Right(height, size, offsetX, offsetY); | |
| 1367 | + break; | |
| 1368 | + default: | |
| 1369 | + data = createNoneProject(); | |
| 1370 | + break; | |
| 1371 | + } | |
| 1372 | + return data; | |
| 1373 | + }; | |
| 1374 | + // 左上部件 | |
| 1375 | + const createDynamicTopLeft = (trapezoidLeftType, width, height, size, offsetX, offsetY) => { | |
| 1376 | + if (!size) return createNoneProject(); | |
| 1377 | + let data = {}; | |
| 1378 | + switch (trapezoidLeftType) { | |
| 1379 | + case "3001": | |
| 1380 | + data = createBoxComponentNew(width, height, size, offsetX, offsetY); | |
| 1381 | + break; | |
| 1382 | + case "3002": | |
| 1383 | + data = createBoxComponentNew1(width, height, size, offsetX, offsetY); | |
| 1384 | + break; | |
| 1385 | + case "3003": | |
| 1386 | + data = createBoxComponentNew2(width, height, size, offsetX, offsetY); | |
| 1387 | + break; | |
| 1388 | + case "3004": | |
| 1389 | + data = createBoxComponentNew3(width, height, size, offsetX, offsetY); | |
| 1390 | + break; | |
| 1391 | + case "3005": | |
| 1392 | + data = createBoxComponentNew4(width, height, size, offsetX, offsetY); | |
| 1393 | + break; | |
| 1394 | + case "3006": | |
| 1395 | + data = createBoxComponentNew5(width, height, size, offsetX, offsetY); | |
| 1396 | + break; | |
| 1397 | + case "4001": | |
| 1398 | + data = createBoxComponentNew(width, height, size, offsetX, offsetY); | |
| 1399 | + break; | |
| 1400 | + case "4002": | |
| 1401 | + data = createBoxComponentNew1(width, height, size, offsetX, offsetY); | |
| 1402 | + break; | |
| 1403 | + case "4003": | |
| 1404 | + data = createBoxComponentNew2(width, height, size, offsetX, offsetY); | |
| 1405 | + break; | |
| 1406 | + case "4004": | |
| 1407 | + data = createBoxComponentNew3(width, height, size, offsetX, offsetY); | |
| 1408 | + break; | |
| 1409 | + case "4005": | |
| 1410 | + data = createBoxComponentNew4(width, height, size, offsetX, offsetY); | |
| 1411 | + break; | |
| 1412 | + case "4006": | |
| 1413 | + data = createBoxComponentNew5(width, height, size, offsetX, offsetY); | |
| 1414 | + break; | |
| 1415 | + case "6001": | |
| 1416 | + data = createBoxComponentNew(width, height, size, offsetX, offsetY); | |
| 1417 | + break; | |
| 1418 | + case "6002": | |
| 1419 | + data = createBoxComponentNew1(width, height, size, offsetX, offsetY); | |
| 1420 | + break; | |
| 1421 | + case "6003": | |
| 1422 | + data = createBoxComponentNew2(width, height, size, offsetX, offsetY); | |
| 1423 | + break; | |
| 1424 | + case "6004": | |
| 1425 | + data = createBoxComponentNew3(width, height, size, offsetX, offsetY); | |
| 1426 | + break; | |
| 1427 | + case "6005": | |
| 1428 | + data = createBoxComponentNew4(width, height, size, offsetX, offsetY); | |
| 1429 | + break; | |
| 1430 | + case "6006": | |
| 1431 | + data = createBoxComponentNew5(width, height, size, offsetX, offsetY); | |
| 1432 | + break; | |
| 1433 | + case "7001": | |
| 1434 | + data = createBoxComponentNew(width, height, size, offsetX, offsetY); | |
| 1435 | + break; | |
| 1436 | + case "7002": | |
| 1437 | + data = createBoxComponentNew1(width, height, size, offsetX, offsetY); | |
| 1438 | + break; | |
| 1439 | + case "7003": | |
| 1440 | + data = createBoxComponentNew2(width, height, size, offsetX, offsetY); | |
| 1441 | + break; | |
| 1442 | + case "7004": | |
| 1443 | + data = createBoxComponentNew3(width, height, size, offsetX, offsetY); | |
| 1444 | + break; | |
| 1445 | + case "7005": | |
| 1446 | + data = createBoxComponentNew4(width, height, size, offsetX, offsetY); | |
| 1447 | + break; | |
| 1448 | + case "7006": | |
| 1449 | + data = createBoxComponentNew5(width, height, size, offsetX, offsetY); | |
| 1450 | + break; | |
| 1451 | + default: | |
| 1452 | + data = createNoneProject(); | |
| 1453 | + break; | |
| 1454 | + } | |
| 1455 | + return data; | |
| 1456 | + }; | |
| 1457 | + // 右上部件 | |
| 1458 | + const createDynamicTopRight = (trapezoidLeftType, width, height, size, offsetX, offsetY) => { | |
| 1459 | + if (!size) return createNoneProject(); | |
| 1460 | + let data = {}; | |
| 1461 | + switch (trapezoidLeftType) { | |
| 1462 | + case "6001": | |
| 1463 | + data = createBoxComponentNew(width, height, size, offsetX, offsetY); | |
| 1464 | + break; | |
| 1465 | + case 1: | |
| 1466 | + break; | |
| 1467 | + default: | |
| 1468 | + data = createNoneProject(); | |
| 1469 | + break; | |
| 1470 | + } | |
| 1471 | + return data; | |
| 1472 | + }; | |
| 1473 | + // 盒底组件 特殊的盒底组件 | |
| 1474 | + const createBoxBottomComponent = (trapezoidLeftType, width, deep, size, offsetX, offsetY) => { | |
| 1475 | + let data = {}; | |
| 1476 | + switch (trapezoidLeftType) { | |
| 1477 | + case "5001": | |
| 1478 | + data = createRightAngleBoxBottomComponent(width, deep, size, offsetX, offsetY); | |
| 1479 | + break; | |
| 1480 | + case "5002": | |
| 1481 | + data = createBoxBottomComponent1(width, deep, size, offsetX, offsetY); | |
| 1482 | + break; | |
| 1483 | + case "5003": | |
| 1484 | + data = createBoxBottomComponent2(width, deep, size, offsetX, offsetY); | |
| 1485 | + break; | |
| 1486 | + case "5004": | |
| 1487 | + data = createBoxBottomComponent3(width, deep, size, offsetX, offsetY); | |
| 1488 | + break; | |
| 1489 | + case "5005": | |
| 1490 | + data = createBoxBottomComponent4(width, deep, size, offsetX, offsetY); | |
| 1491 | + break; | |
| 1492 | + case "5006": | |
| 1493 | + data = createBoxBottomComponent5(width, deep, size, offsetX, offsetY); | |
| 1494 | + break; | |
| 1495 | + case "5007": | |
| 1496 | + data = createBoxBottomComponent6(width, deep, size, offsetX, offsetY); | |
| 1497 | + break; | |
| 1498 | + default: | |
| 1499 | + data = createNoneProject(); | |
| 1500 | + break; | |
| 1501 | + } | |
| 1502 | + return data; | |
| 1503 | + }; | |
| 1504 | + | |
| 1505 | + // 天地盒部件 | |
| 1506 | + const createFull = (trapezoidLeftType, width, deep, size, offsetX, offsetY) => { | |
| 1507 | + let data = {}; | |
| 1508 | + if (!size) return createNoneProject(); | |
| 1509 | + switch (trapezoidLeftType) { | |
| 1510 | + case "4001": | |
| 1511 | + data = createBoxComponentNewFull(width, deep, size, offsetX, offsetY); | |
| 1512 | + break; | |
| 1513 | + case "4002": | |
| 1514 | + data = createBoxComponentNewFull1(width, size, offsetX, offsetY); | |
| 1515 | + break; | |
| 1516 | + case "4003": | |
| 1517 | + data = createBoxComponentNewFull2(width, size, offsetX, offsetY); | |
| 1518 | + break; | |
| 1519 | + case "4004": | |
| 1520 | + data = createBoxComponentNewFul3(width, deep, size, offsetX, offsetY); | |
| 1521 | + break; | |
| 1522 | + case "4005": | |
| 1523 | + data = createBoxComponentNewFul4(width, deep, size, offsetX, offsetY); | |
| 1524 | + break; | |
| 1525 | + case "4006": | |
| 1526 | + data = createBoxComponentNewFul5(width, deep, size, offsetX, offsetY); | |
| 1527 | + break; | |
| 1528 | + case "6001": | |
| 1529 | + data = createBoxComponentNewFull(width, deep, size, offsetX, offsetY); | |
| 1530 | + break; | |
| 1531 | + case "6002": | |
| 1532 | + data = createBoxComponentNewFull1(width, size, offsetX, offsetY); | |
| 1533 | + break; | |
| 1534 | + case "6003": | |
| 1535 | + data = createBoxComponentNewFull2(width, size, offsetX, offsetY); | |
| 1536 | + break; | |
| 1537 | + case "6004": | |
| 1538 | + data = createBoxComponentNewFul3(width, deep, size, offsetX, offsetY); | |
| 1539 | + break; | |
| 1540 | + case "6005": | |
| 1541 | + data = createBoxComponentNewFul4(width, deep, size, offsetX, offsetY); | |
| 1542 | + break; | |
| 1543 | + case "6006": | |
| 1544 | + data = createBoxComponentNewFul5(width, deep, size, offsetX, offsetY); | |
| 1545 | + break; | |
| 1546 | + default: | |
| 1547 | + data = createNoneProject(); | |
| 1548 | + break; | |
| 1549 | + } | |
| 1550 | + return data; | |
| 1551 | + }; | |
| 1552 | + return ( | |
| 1553 | + <div | |
| 1554 | + id="svgContainer" | |
| 1555 | + key={boxKey} | |
| 1556 | + ref={svgContainerRef} | |
| 1557 | + style={{ | |
| 1558 | + width: "100%", | |
| 1559 | + height: "100%", | |
| 1560 | + margin: "0 auto", | |
| 1561 | + }} | |
| 1562 | + > | |
| 1563 | + <svg | |
| 1564 | + className={styles.svgContainer} | |
| 1565 | + id="dynamicSvg" | |
| 1566 | + xmlns="http://www.w3.org/2000/svg" | |
| 1567 | + ref={svgRef} | |
| 1568 | + viewBox="0 0 400 300" | |
| 1569 | + preserveAspectRatio="xMidYMid meet" | |
| 1570 | + width="100%" | |
| 1571 | + height="100%" | |
| 1572 | + /> | |
| 1573 | + </div> | |
| 1574 | + ); | |
| 1575 | +}; | |
| 1576 | + | |
| 1577 | +export default SvgBox; | ... | ... |
src/components/Common/BoxDesignCompontent/svg1.js
0 → 100644
| 1 | +/* eslint-disable */ | |
| 2 | +import React, { useRef, useState, useEffect } from "react"; | |
| 3 | +import styles from "./index.less"; | |
| 4 | +import { | |
| 5 | + createPathElement, | |
| 6 | + createTopTongue, | |
| 7 | + createTopTongueType1, | |
| 8 | + createTrapezoid, | |
| 9 | + createDynamicTop, | |
| 10 | + createNoneProject, | |
| 11 | + createLineWeltTop, | |
| 12 | + createIsoscelesTrapezoidWeltTop, | |
| 13 | + createTrapezoidWeltTop, | |
| 14 | + createFoldWeltTop, | |
| 15 | + createFoldWeltTopLine, | |
| 16 | + createRoundedCornersWeltTop, | |
| 17 | + createRightAngleBoxBottomComponent, | |
| 18 | + createBoxBottomComponent1, | |
| 19 | + createBoxBottomComponent2, | |
| 20 | + createBoxBottomComponent3, | |
| 21 | + createBoxBottomComponent4, | |
| 22 | + createBoxBottomComponent5, | |
| 23 | + createBoxBottomComponent6, | |
| 24 | + createBoxComponentNew, | |
| 25 | + createBoxComponentNew1, | |
| 26 | + createBoxComponentNew2, | |
| 27 | + createBoxComponentNew3, | |
| 28 | + createBoxComponentNew4, | |
| 29 | + createBoxComponentNew5, | |
| 30 | + createBoxComponentNew4_1, | |
| 31 | + createWelt, | |
| 32 | + createWelt1, | |
| 33 | + createWelt2, | |
| 34 | + createWelt2Right, | |
| 35 | + createWelt3, | |
| 36 | + createWelt3Right, | |
| 37 | + createText, | |
| 38 | + createDoubleArrow, | |
| 39 | + createHorizontalDoubleArrow, | |
| 40 | + createFullTelescope, | |
| 41 | +} from "../BoxDesign/createAirplaneBox"; | |
| 42 | +const SvgBox = props => { | |
| 43 | + const svgContainerRef = useRef(null); | |
| 44 | + const svgRef = useRef(null); | |
| 45 | + const [boxKey, setBoxKey] = useState(new Date().getTime()); | |
| 46 | + const { boxList, dSvgBoxWidth, dSvgBoxHeight } = props; | |
| 47 | + const [width, setWidth] = useState(0); | |
| 48 | + const [height, setHeight] = useState(0); | |
| 49 | + const [deep, setDeep] = useState(0); | |
| 50 | + const [svgType, setSvgType] = useState(1); | |
| 51 | + // 盒身 | |
| 52 | + useEffect( | |
| 53 | + () => { | |
| 54 | + setTimeout(() => { | |
| 55 | + initSVG(); | |
| 56 | + }, 0); | |
| 57 | + }, | |
| 58 | + [boxList, svgType] | |
| 59 | + ); | |
| 60 | + | |
| 61 | + // 初始化svg | |
| 62 | + const initSVG = () => { | |
| 63 | + setBoxKey(new Date().getTime()); | |
| 64 | + const svg = svgRef.current; | |
| 65 | + svg.innerHTML = ""; | |
| 66 | + | |
| 67 | + // 获取盒型类型 | |
| 68 | + const svgTypes = boxList.find(x => x.sName === "盒身")?.type || 1; | |
| 69 | + setSvgType(svgTypes); | |
| 70 | + | |
| 71 | + // 获取盒长、盒宽、盒高 | |
| 72 | + const boxLength = Number(boxList.find(x => x.sName === "盒长")?.value) || 0; | |
| 73 | + const boxWidth = Number(boxList.find(x => x.sName === "盒宽")?.value) || 0; | |
| 74 | + const boxHeight = Number(boxList.find(x => x.sName === "盒高")?.value) || 0; | |
| 75 | + | |
| 76 | + setWidth(boxLength); | |
| 77 | + setHeight(boxWidth); | |
| 78 | + setDeep(boxHeight); | |
| 79 | + | |
| 80 | + // 计算视口宽度和高度 | |
| 81 | + const zbtb = boxList.find(x => x.sName === "左贴边位"); | |
| 82 | + const ybtb = boxList.find(x => x.sName === "右贴边位"); | |
| 83 | + const dZTBW = Number(zbtb?.value) || 0; | |
| 84 | + const dYTBW = Number(ybtb?.value) || 0; | |
| 85 | + const sfhs = boxList.find(x => x.sName === "上方盒舌"); | |
| 86 | + const dSFHS = Number(sfhs?.value) || 0; | |
| 87 | + const hdzj = boxList.find(x => x.sName === "盒底组件"); | |
| 88 | + const xfhs = boxList.find(x => x.sName === "下方盒舌"); | |
| 89 | + const dXFHS = Number(xfhs?.value) || 0; | |
| 90 | + const zsbj = boxList.find(x => x.sName === "左(上)插位组件"); | |
| 91 | + const dZSCW = Number(zsbj?.value) || 0; | |
| 92 | + const ysbj = boxList.find(x => x.sName === "右(上)插位组件"); | |
| 93 | + const dYSCW = Number(ysbj?.value) || 0; | |
| 94 | + const zxbj = boxList.find(x => x.sName === "左(下)插位组件"); | |
| 95 | + const dZXCW = Number(zxbj?.value) || 0; | |
| 96 | + const yxbj = boxList.find(x => x.sName === "右(下)插位组件"); | |
| 97 | + const dYXCW = Number(yxbj?.value) || 0; | |
| 98 | + // 根据选择不同的部件 计算尺寸 | |
| 99 | + | |
| 100 | + // const viewBoxWidth = (boxLength * 2 + boxHeight * 2 + dYTBW + dZTBW); | |
| 101 | + let viewBoxWidth = 0; | |
| 102 | + | |
| 103 | + let max = 0; | |
| 104 | + // 展宽 | |
| 105 | + if (boxList && boxList.length) { | |
| 106 | + // 如果存在部件和盒舌 取最大的 | |
| 107 | + const top = topOffect(boxList, boxLength, boxWidth, boxHeight); | |
| 108 | + const bottom = bottomOffect(boxList, boxLength, boxWidth, boxHeight); | |
| 109 | + max = top + bottom; | |
| 110 | + } | |
| 111 | + | |
| 112 | + let viewBoxHeight = Number(boxHeight) + max; | |
| 113 | + if (Number(svgType) === 1) { | |
| 114 | + // 四面盒身 | |
| 115 | + viewBoxWidth = dZTBW + Number(boxLength) * 2 + Number(boxWidth) * 2; | |
| 116 | + } else if (Number(svgType) === 2) { | |
| 117 | + viewBoxWidth = boxLength * 2 + boxWidth + dYTBW + dZTBW; | |
| 118 | + } else if (Number(svgType) === 3) { | |
| 119 | + viewBoxWidth = boxLength + boxWidth * 2 + dYTBW + dZTBW; | |
| 120 | + } else { | |
| 121 | + viewBoxWidth = boxLength + boxHeight + dYTBW + dZTBW; | |
| 122 | + viewBoxHeight = Number(boxWidth) + Number(boxHeight) * 2 + max; | |
| 123 | + } | |
| 124 | + // 计算缩放比例 | |
| 125 | + let scale = 1; | |
| 126 | + const ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight) * scale; | |
| 127 | + svg.setAttribute("viewBox", `${-(zbtb?.value * scale)} ${-ySvg} ${viewBoxWidth} ${viewBoxHeight}`); | |
| 128 | + svg.setAttribute("width", `${viewBoxWidth}px`); | |
| 129 | + svg.setAttribute("height", `${viewBoxHeight}px`); | |
| 130 | + svgContainerRef.current.style.width = `${viewBoxWidth}px`; | |
| 131 | + svgContainerRef.current.style.height = `${viewBoxHeight}px`; | |
| 132 | + const scaleX = (dSvgBoxWidth ? dSvgBoxWidth : 450) / viewBoxWidth; | |
| 133 | + const scaleY = (dSvgBoxHeight ? dSvgBoxHeight : 200) / viewBoxHeight; | |
| 134 | + svgContainerRef.current.style.transform = `scale(${scaleX >= 1 ? 1 : scaleX}, ${scaleY >= 1 ? 1 : scaleY})`; | |
| 135 | + svgContainerRef.current.style.transformOrigin = "top left"; | |
| 136 | + svgContainerRef.current.style.paddingTop = dSvgBoxWidth ? "0" : "25px"; | |
| 137 | + const scaledWidth = boxLength * scale; | |
| 138 | + const scaledHeight = boxWidth * scale; | |
| 139 | + const scaledDeep = boxHeight * scale; | |
| 140 | + const scales = dSvgBoxWidth ? scale : 1; | |
| 141 | + // 根据盒型类型生成不同的盒身 四面盒身 | |
| 142 | + if (Number(svgType) === 1) { | |
| 143 | + const rectangles = [ | |
| 144 | + { x: 0, y: 0, width: scaledWidth, height: scaledDeep }, | |
| 145 | + { x: 0 + scaledWidth, y: 0, width: scaledHeight, height: scaledDeep }, | |
| 146 | + { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep }, | |
| 147 | + { x: 0 + scaledWidth * 2 + scaledHeight, y: 0, width: scaledHeight, height: scaledDeep }, | |
| 148 | + ]; | |
| 149 | + rectangles.forEach(rect => { | |
| 150 | + svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); | |
| 151 | + }); | |
| 152 | + | |
| 153 | + let pathList = []; | |
| 154 | + // 上方盒舌 | |
| 155 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth, 0)); | |
| 156 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, -scaledHeight, -dSFHS * scale, scaledWidth * 2 + scaledHeight * 2, 0)); | |
| 157 | + if (sfhs?.type && dSFHS) { | |
| 158 | + pathList.push(createText(scaledWidth + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 159 | + pathList.push(createText(scaledWidth * 2 + scaledHeight + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 160 | + } | |
| 161 | + // if (sfhs?.type === "1004") { | |
| 162 | + // pathList.push(createFoldWeltTopLine(scaledHeight * 0.5, -dSFHS * scale * 0.5, scaledWidth, 0)); | |
| 163 | + // pathList.push(createFoldWeltTopLine(-scaledHeight * 0.5, -dSFHS * scale * 0.5, scaledWidth * 2 + scaledHeight * 2, 0)); | |
| 164 | + // } | |
| 165 | + // if (sfhs?.type === "1005") { | |
| 166 | + // pathList.push(createFoldWeltTopLine(scaledHeight * 0.85, -dSFHS * scale * 0.9, scaledWidth, 0)); | |
| 167 | + // pathList.push(createFoldWeltTopLine(-scaledHeight * 0.85, -dSFHS * scale * 0.9, scaledWidth * 2 + scaledHeight * 2, 0)); | |
| 168 | + // } | |
| 169 | + // 盒底组件 | |
| 170 | + if (hdzj && hdzj.type) { | |
| 171 | + // 盒底组件 | |
| 172 | + pathList.push(createBoxBottomComponent(hdzj?.type, scaledWidth, scaledHeight, Number(hdzj?.value) * scale, 0, scaledDeep)); | |
| 173 | + pathList.push(createText(scaledWidth / 2, scaledDeep + (Number(hdzj?.value) / 2) * scales, 10 * scales, Number(hdzj?.value))); | |
| 174 | + } else { | |
| 175 | + // 下方盒舌 | |
| 176 | + | |
| 177 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth, scaledDeep)); | |
| 178 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, -scaledHeight, dXFHS * scale, scaledWidth * 2 + scaledHeight * 2, scaledDeep)); | |
| 179 | + if (xfhs?.type && dXFHS) { | |
| 180 | + pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 10) * scales, 10 * scales, dXFHS)); | |
| 181 | + pathList.push(createText(scaledWidth * 2 + scaledHeight + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 10) * scales, 10 * scales, dXFHS)); | |
| 182 | + } | |
| 183 | + } | |
| 184 | + | |
| 185 | + // 左边贴边 | |
| 186 | + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); | |
| 187 | + if (zbtb?.type && dZTBW) { | |
| 188 | + pathList.push(createText(-dZTBW * 0.4, scaledDeep / 2, 10 * scales, dZTBW)); | |
| 189 | + } | |
| 190 | + // 右边贴边 | |
| 191 | + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight * 2, 0)); | |
| 192 | + if (ybtb?.type && dYTBW) { | |
| 193 | + pathList.push(createText(scaledWidth * 2 + scaledHeight * 2 + dYTBW * 0.4, scaledDeep / 2, 10 * scales, dYTBW)); | |
| 194 | + } | |
| 195 | + // 左上部件 | |
| 196 | + pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0)); | |
| 197 | + if ((zsbj?.type === "3001" && zsbj?.value )|| (zsbj?.type === "3006" && zsbj?.value)) { | |
| 198 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 199 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 200 | + // 插位值 | |
| 201 | + pathList.push(createText(scaledWidth / 2, -scaledHeight - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 202 | + } else if (zsbj?.type === "3002" && dZSCW) { | |
| 203 | + pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 204 | + } else if (zsbj?.type === "3003" && dZSCW) { | |
| 205 | + pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 206 | + } else if (zsbj?.type === "3004" && zsbj?.value) { | |
| 207 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 208 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 209 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); | |
| 210 | + pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 211 | + pathList.push(createText(scaledWidth * 0.3, -(scaledHeight * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 212 | + } else if (zsbj?.type === "3005" && zsbj?.value) { | |
| 213 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, -scaledHeight / 2, scales)); | |
| 214 | + pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 215 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); | |
| 216 | + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 217 | + } | |
| 218 | + // 右上部件 | |
| 219 | + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0)); | |
| 220 | + if (ysbj?.type === "6001" && ysbj?.value) { | |
| 221 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 222 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 223 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 224 | + } else if (ysbj?.type === "6002" && dYSCW) { | |
| 225 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 226 | + } else if (ysbj?.type === "6003" && dYSCW) { | |
| 227 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 228 | + } else if (ysbj?.type === "6004" && ysbj?.value) { | |
| 229 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 230 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 231 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); | |
| 232 | + pathList.push( | |
| 233 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W") | |
| 234 | + ); | |
| 235 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 236 | + } else if (ysbj?.type === "6005" && ysbj?.value) { | |
| 237 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales)); | |
| 238 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 239 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); | |
| 240 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 241 | + } | |
| 242 | + // 左下部件- | |
| 243 | + if (!(hdzj && hdzj.type)) { | |
| 244 | + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep)); | |
| 245 | + if (zxbj?.type === "4001" && zxbj?.value) { | |
| 246 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 247 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 248 | + pathList.push(createText(scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 249 | + } else if (zxbj?.type === "4002" && dZXCW) { | |
| 250 | + pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 251 | + } else if (zxbj?.type === "4003" && dZXCW) { | |
| 252 | + pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 253 | + } else if (zxbj?.type === "4004" && zxbj?.value) { | |
| 254 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 255 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 256 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 257 | + pathList.push(createText(scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 258 | + pathList.push(createText(scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 259 | + } else if (zxbj?.type === "4005" && zxbj?.value) { | |
| 260 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); | |
| 261 | + pathList.push(createText(scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 262 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 263 | + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 264 | + } | |
| 265 | + pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW * scale, scaledWidth + scaledHeight, scaledDeep)); | |
| 266 | + if (yxbj?.type === "7001" && yxbj?.value) { | |
| 267 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 268 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 269 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + scaledHeight + dYXCW / 2 - 4, 10 * scales, dYXCW)); | |
| 270 | + } else if (yxbj?.type === "7004" && yxbj?.value) { | |
| 271 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 272 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 - 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 273 | + pathList.push( | |
| 274 | + createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales) | |
| 275 | + ); | |
| 276 | + pathList.push( | |
| 277 | + createText( | |
| 278 | + scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, | |
| 279 | + scaledDeep + (scaledHeight + scaledHeight / 2), | |
| 280 | + 10 * scales, | |
| 281 | + "W" | |
| 282 | + ) | |
| 283 | + ); | |
| 284 | + pathList.push( | |
| 285 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dYXCW / 2 - 4, 10 * scales, dYXCW) | |
| 286 | + ); | |
| 287 | + } else if (yxbj?.type === "7005" && yxbj?.value) { | |
| 288 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); | |
| 289 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 290 | + pathList.push( | |
| 291 | + createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales) | |
| 292 | + ); | |
| 293 | + pathList.push( | |
| 294 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W") | |
| 295 | + ); | |
| 296 | + } else if (dYXCW && yxbj?.type) { | |
| 297 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + dYXCW / 2 - 4, 10 * scales, dYXCW)); | |
| 298 | + } | |
| 299 | + } | |
| 300 | + | |
| 301 | + // 右下部件 | |
| 302 | + | |
| 303 | + // 纵向 D | |
| 304 | + if (scaledDeep && scaledWidth && scaledHeight) { | |
| 305 | + pathList.push(createDoubleArrow(scaledDeep, scaledWidth + scaledHeight + scaledWidth / 2, scaledDeep / 2, scales)); | |
| 306 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth / 2 + 10 * scales, scaledDeep / 2, 10 * scales, "D")); | |
| 307 | + | |
| 308 | + // 横向 L | |
| 309 | + pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledDeep / 2, scales)); | |
| 310 | + pathList.push(createText(scaledWidth / 2, scaledDeep / 2 + 10 * scales, 10 * scales, "L")); | |
| 311 | + // W | |
| 312 | + pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledWidth + scaledHeight / 2, scaledDeep * 0.3, scale)); | |
| 313 | + pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep * 0.3 + 10 * scales, 10 * scales, "W")); | |
| 314 | + } | |
| 315 | + pathList.forEach(x => { | |
| 316 | + svg.appendChild(x); | |
| 317 | + }); | |
| 318 | + } else if (Number(svgType) === 2) { | |
| 319 | + // 单折盒身 | |
| 320 | + const rectangles = [ | |
| 321 | + { x: 0, y: 0, width: scaledWidth, height: scaledDeep }, | |
| 322 | + { x: 0 + scaledWidth, y: 0, width: scaledHeight, height: scaledDeep }, | |
| 323 | + { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep }, | |
| 324 | + ]; | |
| 325 | + rectangles.forEach(rect => { | |
| 326 | + svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); | |
| 327 | + }); | |
| 328 | + let pathList = []; | |
| 329 | + // 上方盒舌 | |
| 330 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth, 0)); | |
| 331 | + if (sfhs?.type && dSFHS) { | |
| 332 | + pathList.push(createText(scaledWidth + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 333 | + } | |
| 334 | + // 下方盒舌 | |
| 335 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth, scaledDeep)); | |
| 336 | + if (xfhs?.type && dXFHS) { | |
| 337 | + pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 338 | + } | |
| 339 | + // 左边贴边 | |
| 340 | + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); | |
| 341 | + if (zbtb?.type && dZTBW) { | |
| 342 | + pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW)); | |
| 343 | + } | |
| 344 | + // 右边贴边 | |
| 345 | + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight, 0)); | |
| 346 | + if (zbtb?.type && dYTBW) { | |
| 347 | + pathList.push(createText(scaledWidth * 2 + scaledHeight + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW)); | |
| 348 | + } | |
| 349 | + // 左上部件 | |
| 350 | + pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0)); | |
| 351 | + if ((zsbj?.type === "3001" && zsbj?.value )|| (zsbj?.type === "3006" && zsbj?.value)) { | |
| 352 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 353 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 354 | + pathList.push(createText(scaledWidth / 2, -scaledHeight - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 355 | + } else if (zsbj?.type === "3004" && zsbj?.value) { | |
| 356 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 357 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 358 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); | |
| 359 | + pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 360 | + pathList.push(createText(scaledWidth * 0.3, -(scaledHeight * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW)); | |
| 361 | + } else if (zsbj?.type === "3005" && zsbj?.value) { | |
| 362 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, -scaledHeight / 2, scales)); | |
| 363 | + pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 364 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); | |
| 365 | + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 366 | + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 367 | + } else if (zsbj?.type && dZSCW) { | |
| 368 | + pathList.push(createText(scaledWidth / 2, -(dZSCW / 2 - 5), 10 * scales, dZSCW)); | |
| 369 | + } | |
| 370 | + // 右上部件 | |
| 371 | + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0)); | |
| 372 | + if (ysbj?.type === "6001" && ysbj?.value) { | |
| 373 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 374 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 375 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 376 | + } else if (ysbj?.type === "6004" && ysbj?.value) { | |
| 377 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 378 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 379 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); | |
| 380 | + pathList.push( | |
| 381 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W") | |
| 382 | + ); | |
| 383 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 384 | + } else if (ysbj?.type === "6005" && ysbj?.value) { | |
| 385 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales)); | |
| 386 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 387 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); | |
| 388 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 389 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 390 | + } else if (ysbj?.type && dYSCW) { | |
| 391 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 392 | + } | |
| 393 | + // 左下部件- | |
| 394 | + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep)); | |
| 395 | + if (zxbj?.type === "4001" && zxbj?.value) { | |
| 396 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 397 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 398 | + pathList.push(createText(scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 399 | + } else if (zxbj?.type === "4004" && zxbj?.value) { | |
| 400 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 401 | + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 402 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 403 | + pathList.push(createText(scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 404 | + pathList.push(createText(scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 405 | + } else if (zxbj?.type === "4005" && zxbj?.value) { | |
| 406 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); | |
| 407 | + pathList.push(createText(scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 408 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 409 | + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 410 | + } else if (zxbj?.type && dZXCW) { | |
| 411 | + pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 412 | + } | |
| 413 | + // 右下部件 | |
| 414 | + pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW, scaledWidth + scaledHeight, scaledDeep)); | |
| 415 | + if (yxbj?.type === "7001" && yxbj?.value) { | |
| 416 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 417 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 418 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + scaledHeight + dYXCW / 2 - 4, 10 * scales, dYXCW)); | |
| 419 | + } else if (yxbj?.type === "7004" && yxbj?.value) { | |
| 420 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 421 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 - 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 422 | + pathList.push( | |
| 423 | + createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales) | |
| 424 | + ); | |
| 425 | + pathList.push( | |
| 426 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W") | |
| 427 | + ); | |
| 428 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dYXCW / 2 - 4, 10 * scales, dYXCW)); | |
| 429 | + } else if (yxbj?.type === "7005" && yxbj?.value) { | |
| 430 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); | |
| 431 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 432 | + pathList.push( | |
| 433 | + createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales) | |
| 434 | + ); | |
| 435 | + pathList.push( | |
| 436 | + createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scale, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scale, "W") | |
| 437 | + ); | |
| 438 | + } else if (dYXCW && yxbj?.type) { | |
| 439 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + dYXCW / 2 - 4, 10 * scales, dYXCW)); | |
| 440 | + } | |
| 441 | + if (scaledDeep && scaledWidth && scaledHeight) { | |
| 442 | + // 纵向 D | |
| 443 | + pathList.push(createDoubleArrow(scaledDeep, scaledWidth + scaledHeight + scaledWidth / 2, scaledDeep / 2, scales)); | |
| 444 | + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth / 2 + 10, scaledDeep / 2, 10 * scales, "D")); | |
| 445 | + | |
| 446 | + // 横向 L | |
| 447 | + pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledDeep / 2, scales)); | |
| 448 | + pathList.push(createText(scaledWidth / 2, scaledDeep / 2 + 10, 10 * scales, "L")); | |
| 449 | + // W | |
| 450 | + pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledWidth + scaledHeight / 2, scaledDeep * 0.3, scales)); | |
| 451 | + pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep * 0.3 + 10, 10 * scales, "W")); | |
| 452 | + } | |
| 453 | + | |
| 454 | + pathList.forEach(x => { | |
| 455 | + svg.appendChild(x); | |
| 456 | + }); | |
| 457 | + } else if (Number(svgType) === 3) { | |
| 458 | + // 双折盒 | |
| 459 | + const rectangles = [ | |
| 460 | + { x: 0, y: 0, width: scaledHeight, height: scaledDeep }, | |
| 461 | + { x: 0 + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep }, | |
| 462 | + { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledHeight, height: scaledDeep }, | |
| 463 | + ]; | |
| 464 | + rectangles.forEach(rect => { | |
| 465 | + svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); | |
| 466 | + }); | |
| 467 | + let pathList = []; | |
| 468 | + // 上方盒舌 | |
| 469 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, 0, 0)); | |
| 470 | + pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth + scaledHeight, 0)); | |
| 471 | + if (sfhs?.type && dSFHS) { | |
| 472 | + pathList.push(createText(scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 473 | + pathList.push(createText(scaledWidth + scaledHeight + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS)); | |
| 474 | + } | |
| 475 | + // 下方盒舌 | |
| 476 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, 0, scaledDeep)); | |
| 477 | + pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth + scaledHeight, scaledDeep)); | |
| 478 | + if (xfhs?.type && dXFHS) { | |
| 479 | + pathList.push(createText(scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dXFHS)); | |
| 480 | + pathList.push(createText(scaledWidth + scaledHeight + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dXFHS)); | |
| 481 | + } | |
| 482 | + // 左边贴边 | |
| 483 | + pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0)); | |
| 484 | + if (zbtb?.type && dZTBW) { | |
| 485 | + pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW)); | |
| 486 | + } | |
| 487 | + // 右边贴边 | |
| 488 | + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth + scaledHeight * 2, 0)); | |
| 489 | + if (zbtb?.type && dYTBW) { | |
| 490 | + pathList.push(createText(scaledWidth + scaledHeight * 2 + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW)); | |
| 491 | + } | |
| 492 | + // 左下部件- | |
| 493 | + pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, scaledHeight, scaledDeep)); | |
| 494 | + if (zxbj?.type === "4001" && zxbj?.value) { | |
| 495 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 496 | + pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 497 | + pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 498 | + pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 499 | + } else if (zxbj?.type === "4004" && zxbj?.value) { | |
| 500 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); | |
| 501 | + pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 502 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 503 | + pathList.push(createText(scaledHeight + scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 504 | + pathList.push(createText(scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 505 | + } else if (zxbj?.type === "4005" && zxbj?.value) { | |
| 506 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); | |
| 507 | + pathList.push(createText(scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); | |
| 508 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales)); | |
| 509 | + pathList.push(createText(scaledHeight + scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 510 | + } else if (zxbj?.type && dZXCW) { | |
| 511 | + pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW)); | |
| 512 | + } | |
| 513 | + // 右上部件 | |
| 514 | + pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledHeight, 0)); | |
| 515 | + if (ysbj?.type === "6001" && ysbj?.value) { | |
| 516 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 517 | + pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 518 | + pathList.push(createText(scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 519 | + } else if (ysbj?.type === "6004" && ysbj?.value) { | |
| 520 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales)); | |
| 521 | + pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 522 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); | |
| 523 | + pathList.push(createText(scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 524 | + pathList.push(createText(scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 525 | + } else if (ysbj?.type === "6005" && ysbj?.value) { | |
| 526 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales)); | |
| 527 | + pathList.push(createText(scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); | |
| 528 | + pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); | |
| 529 | + pathList.push(createText(scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); | |
| 530 | + } else if (ysbj?.type && dYSCW) { | |
| 531 | + pathList.push(createText(scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW)); | |
| 532 | + } | |
| 533 | + | |
| 534 | + if (scaledDeep && scaledWidth && scaledHeight) { | |
| 535 | + // 纵向 D | |
| 536 | + pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledWidth + scaledHeight / 2, scaledDeep / 2, scales)); | |
| 537 | + pathList.push(createText(scaledHeight + scaledWidth + scaledHeight / 2 + 10, scaledDeep / 2, 10 * scales, "D")); | |
| 538 | + | |
| 539 | + // 横向 L | |
| 540 | + pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledHeight + scaledWidth / 2, scaledDeep / 2, scales)); | |
| 541 | + pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep / 2 + 10, 10 * scales, "L")); | |
| 542 | + // W | |
| 543 | + pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledHeight / 2, scaledDeep * 0.3, scales)); | |
| 544 | + pathList.push(createText(scaledHeight / 2, scaledDeep * 0.3 + 10, 10 * scales, "W")); | |
| 545 | + } | |
| 546 | + | |
| 547 | + pathList.forEach(x => { | |
| 548 | + svg.appendChild(x); | |
| 549 | + }); | |
| 550 | + } else { | |
| 551 | + svg.appendChild(createFullTelescope(scaledWidth, scaledHeight, scaledDeep, 0, 0)); | |
| 552 | + // createFullTelescope | |
| 553 | + let pathList = []; | |
| 554 | + if (scaledDeep && scaledWidth && scaledHeight) { | |
| 555 | + // 纵向 D | |
| 556 | + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledHeight / 2, scales)); | |
| 557 | + pathList.push(createText(scaledWidth * 0.2 + 10, scaledHeight / 2, 10 * scales, "W")); | |
| 558 | + | |
| 559 | + // 横向 L | |
| 560 | + pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledHeight * 0.8, scales)); | |
| 561 | + pathList.push(createText(scaledWidth / 2, scaledHeight * 0.8 + 10, 10 * scales, "L")); | |
| 562 | + // W | |
| 563 | + pathList.push(createHorizontalDoubleArrow(scaledDeep, -scaledDeep / 2, scaledHeight * 0.3, scales)); | |
| 564 | + pathList.push(createText(-scaledDeep / 2, scaledHeight * 0.3 + 10, 10 * scales, "D")); | |
| 565 | + } | |
| 566 | + pathList.forEach(x => { | |
| 567 | + svg.appendChild(x); | |
| 568 | + }); | |
| 569 | + } | |
| 570 | + }; | |
| 571 | + // 计算头部偏移 | |
| 572 | + const topOffect = (list, length, width, height) => { | |
| 573 | + // 判断code | |
| 574 | + const valueList = list.filter(x => x.type !== ("" || null)); | |
| 575 | + // const titleList = ['上方盒舌','左(上)插位组件','右(上)插位组件'] | |
| 576 | + const sfhs = valueList.find(x => x.sName === "上方盒舌"); | |
| 577 | + const zscw = valueList.find(x => x.sName === "左(上)插位组件"); | |
| 578 | + const yscw = valueList.find(x => x.sName === "右(上)插位组件"); | |
| 579 | + let top = 0; | |
| 580 | + const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006"]; | |
| 581 | + const four = ["6004", "3004", "4004", "7004"]; | |
| 582 | + const five = ["6005", "3005", "4005", "7005"]; | |
| 583 | + const dYSCW = Number(yscw?.value) || 0; | |
| 584 | + const dZSCW = Number(zscw?.value) || 0; | |
| 585 | + // 如果存在插位就不计算盒舌 | |
| 586 | + if (zscw?.type && yscw?.type) { | |
| 587 | + const max = Math.max(dZSCW, dYSCW); | |
| 588 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 589 | + top = width * 2; | |
| 590 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 591 | + top = width * 2 + max; | |
| 592 | + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { | |
| 593 | + top = width + max; | |
| 594 | + } else { | |
| 595 | + top = max; | |
| 596 | + } | |
| 597 | + } else if (yscw?.type) { | |
| 598 | + const max = dYSCW; | |
| 599 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 600 | + top = width * 2; | |
| 601 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 602 | + top = width * 2 + max; | |
| 603 | + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { | |
| 604 | + top = width + max; | |
| 605 | + } else { | |
| 606 | + top = max; | |
| 607 | + } | |
| 608 | + } else if (zscw?.type) { | |
| 609 | + const max = dZSCW; | |
| 610 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 611 | + top = width * 2; | |
| 612 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 613 | + top = width * 2 + max; | |
| 614 | + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { | |
| 615 | + top = width + max; | |
| 616 | + } else { | |
| 617 | + top = max; | |
| 618 | + } | |
| 619 | + } else { | |
| 620 | + top = sfhs?.value; | |
| 621 | + } | |
| 622 | + return isNaN(top) ? 0 : top; | |
| 623 | + }; | |
| 624 | + const bottomOffect = (list, length, width, height) => { | |
| 625 | + // 判断code | |
| 626 | + const valueList = list.filter(x => x.type !== ("" || null)); | |
| 627 | + // const titleList = ['上方盒舌','左(上)插位组件','右(上)插位组件'] | |
| 628 | + const sfhs = valueList.find(x => x.sName === "下方盒舌"); | |
| 629 | + const zscw = valueList.find(x => x.sName === "左(下)插位组件"); | |
| 630 | + const yscw = valueList.find(x => x.sName === "右(下)插位组件"); | |
| 631 | + const hdzj = valueList.find(x => x.sName === "盒底组件"); | |
| 632 | + // 将找到的对象放入数组中，并过滤掉 undefined 值 | |
| 633 | + // 使用 reduce 方法比较 value 属性，找出最大的对象 | |
| 634 | + let top = 0; | |
| 635 | + const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006"]; | |
| 636 | + const four = ["6004", "3004", "4004", "7004"]; | |
| 637 | + const five = ["6005", "3005", "4005", "7005"]; | |
| 638 | + const dYSCW = Number(yscw?.value) || 0; | |
| 639 | + const dZSCW = Number(zscw?.value) || 0; | |
| 640 | + if (hdzj?.type) { | |
| 641 | + return Number(hdzj?.value); | |
| 642 | + } | |
| 643 | + if (zscw?.type && yscw?.type) { | |
| 644 | + const max = Math.max(dZSCW, dYSCW); | |
| 645 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 646 | + top = width * 2; | |
| 647 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 648 | + top = width * 2 + max; | |
| 649 | + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { | |
| 650 | + top = width + max; | |
| 651 | + } else { | |
| 652 | + top = max; | |
| 653 | + } | |
| 654 | + } else if (yscw?.type) { | |
| 655 | + const max = dYSCW; | |
| 656 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 657 | + top = width * 2; | |
| 658 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 659 | + top = width * 2 + max; | |
| 660 | + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { | |
| 661 | + top = width + max; | |
| 662 | + } else { | |
| 663 | + top = max; | |
| 664 | + } | |
| 665 | + } else if (zscw?.type) { | |
| 666 | + const max = dZSCW; | |
| 667 | + if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 668 | + top = width * 2; | |
| 669 | + } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 670 | + top = width * 2 + max; | |
| 671 | + } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { | |
| 672 | + top = width + max; | |
| 673 | + } else { | |
| 674 | + top = max; | |
| 675 | + } | |
| 676 | + } else { | |
| 677 | + top = sfhs?.value; | |
| 678 | + } | |
| 679 | + // if (five.includes(zscw?.type) || five.includes(yscw?.type)) { | |
| 680 | + // top = width * 2; | |
| 681 | + // } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) { | |
| 682 | + // if (dZSCW && dYSCW) { | |
| 683 | + // const max = Math.max(dZSCW, dYSCW); | |
| 684 | + // top = width * 2 + max; | |
| 685 | + // } else if (dZSCW && !dYSCW) { | |
| 686 | + // top = width * 2 + dZSCW; | |
| 687 | + // } else if (!dZSCW && dYSCW) { | |
| 688 | + // top = width * 2 + dYSCW; | |
| 689 | + // } | |
| 690 | + // } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) { | |
| 691 | + // if (dZSCW && dYSCW) { | |
| 692 | + // const max = Math.max(dZSCW, dYSCW); | |
| 693 | + // top = width + max; | |
| 694 | + // } else if (dZSCW && !dYSCW) { | |
| 695 | + // top = width + dZSCW; | |
| 696 | + // } else if (!dZSCW && dYSCW) { | |
| 697 | + // top = width + dYSCW; | |
| 698 | + // } | |
| 699 | + // } else { | |
| 700 | + // if (dZSCW && !dYSCW) { | |
| 701 | + // top = Number(dZSCW); | |
| 702 | + // } else if (!dZSCW && dYSCW) { | |
| 703 | + // top = Number(dYSCW); | |
| 704 | + // } else { | |
| 705 | + // top = Number(sfhs?.value); | |
| 706 | + // } | |
| 707 | + // } | |
| 708 | + | |
| 709 | + return isNaN(top) ? 0 : top; | |
| 710 | + }; | |
| 711 | + // 上方盒舌左边 | |
| 712 | + const createUpperBoxTongueLeft = (upperBoxTongueType, width, height, offsetX, offsetY) => { | |
| 713 | + if (!height) return createNoneProject(); | |
| 714 | + // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 | |
| 715 | + let data = {}; | |
| 716 | + switch (upperBoxTongueType) { | |
| 717 | + case "1001": | |
| 718 | + data = createLineWeltTop(width, height, offsetX, offsetY); | |
| 719 | + break; | |
| 720 | + case "1002": | |
| 721 | + data = createIsoscelesTrapezoidWeltTop(width, height, offsetX, offsetY); | |
| 722 | + break; | |
| 723 | + case "1003": | |
| 724 | + data = createTrapezoidWeltTop(width, height, offsetX, offsetY); | |
| 725 | + break; | |
| 726 | + case "1004": | |
| 727 | + data = createFoldWeltTop(width, height, offsetX, offsetY); | |
| 728 | + break; | |
| 729 | + case "1005": | |
| 730 | + data = createRoundedCornersWeltTop(width, height, offsetX, offsetY); | |
| 731 | + break; | |
| 732 | + case "2001": | |
| 733 | + data = createLineWeltTop(width, height, offsetX, offsetY); | |
| 734 | + break; | |
| 735 | + case "2002": | |
| 736 | + data = createIsoscelesTrapezoidWeltTop(width, height, offsetX, offsetY); | |
| 737 | + break; | |
| 738 | + case "2003": | |
| 739 | + data = createTrapezoidWeltTop(width, height, offsetX, offsetY); | |
| 740 | + break; | |
| 741 | + case "2004": | |
| 742 | + data = createFoldWeltTop(width, height, offsetX, offsetY); | |
| 743 | + break; | |
| 744 | + case "2005": | |
| 745 | + data = createRoundedCornersWeltTop(width, height, offsetX, offsetY); | |
| 746 | + break; | |
| 747 | + default: | |
| 748 | + data = createNoneProject(); | |
| 749 | + break; | |
| 750 | + } | |
| 751 | + return data; | |
| 752 | + }; | |
| 753 | + // 右上方盒舌 | |
| 754 | + const createUpperBoxTongueRight = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => { | |
| 755 | + if (!size) return createNoneProject(); | |
| 756 | + // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 | |
| 757 | + let data = {}; | |
| 758 | + switch (upperBoxTongueType) { | |
| 759 | + case "1001": | |
| 760 | + data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2); | |
| 761 | + break; | |
| 762 | + case 1: | |
| 763 | + data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2); | |
| 764 | + break; | |
| 765 | + default: | |
| 766 | + data = createNoneProject(); | |
| 767 | + break; | |
| 768 | + } | |
| 769 | + return data; | |
| 770 | + }; | |
| 771 | + // 右上方盒舌 | |
| 772 | + const createBottomBoxTongueRight = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => { | |
| 773 | + if (!size) return createNoneProject(); | |
| 774 | + // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 | |
| 775 | + let data = {}; | |
| 776 | + switch (upperBoxTongueType) { | |
| 777 | + case 0: | |
| 778 | + data = createTopTongue(-deep, offsetX, offsetY, size, -2, 5, 0, true); | |
| 779 | + break; | |
| 780 | + case 1: | |
| 781 | + data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2); | |
| 782 | + break; | |
| 783 | + default: | |
| 784 | + data = createNoneProject(); | |
| 785 | + break; | |
| 786 | + } | |
| 787 | + return data; | |
| 788 | + }; | |
| 789 | + const createBottomBoxTongueLeft = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => { | |
| 790 | + if (!size) return createNoneProject(); | |
| 791 | + // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 | |
| 792 | + let data = {}; | |
| 793 | + switch (upperBoxTongueType) { | |
| 794 | + case 0: | |
| 795 | + data = createTopTongue(deep, offsetX, offsetY, size, 2, 5, 1, false); | |
| 796 | + break; | |
| 797 | + case 1: | |
| 798 | + data = createTopTongueType1(deep, offsetX, offsetY, -size, 3, 2); | |
| 799 | + break; | |
| 800 | + default: | |
| 801 | + data = createNoneProject(); | |
| 802 | + break; | |
| 803 | + } | |
| 804 | + return data; | |
| 805 | + }; | |
| 806 | + | |
| 807 | + // 左边贴位 | |
| 808 | + const createTrapezoidLeft = (trapezoidLeftType, height, size, offsetX, offsetY) => { | |
| 809 | + if (!size) return createNoneProject(); | |
| 810 | + let data = {}; | |
| 811 | + switch (trapezoidLeftType) { | |
| 812 | + case "8001": | |
| 813 | + data = createWelt(height, size, offsetX, offsetY); | |
| 814 | + break; | |
| 815 | + case "8002": | |
| 816 | + data = createWelt1(height, size, offsetX, offsetY); | |
| 817 | + break; | |
| 818 | + case "8003": | |
| 819 | + data = createWelt2(height, size, offsetX, offsetY); | |
| 820 | + break; | |
| 821 | + case "8004": | |
| 822 | + data = createWelt3(height, size, offsetX, offsetY); | |
| 823 | + break; | |
| 824 | + default: | |
| 825 | + data = createNoneProject(); | |
| 826 | + break; | |
| 827 | + } | |
| 828 | + return data; | |
| 829 | + }; | |
| 830 | + // 右边贴位 | |
| 831 | + const createTrapezoidRight = (trapezoidLeftType, height, size, offsetX, offsetY) => { | |
| 832 | + if (!size) return createNoneProject(); | |
| 833 | + let data = {}; | |
| 834 | + switch (trapezoidLeftType) { | |
| 835 | + case "9001": | |
| 836 | + data = createWelt(height, size, offsetX, offsetY); | |
| 837 | + break; | |
| 838 | + case "9002": | |
| 839 | + data = createWelt1(height, size, offsetX, offsetY); | |
| 840 | + break; | |
| 841 | + case "9003": | |
| 842 | + data = createWelt2Right(height, size, offsetX, offsetY); | |
| 843 | + break; | |
| 844 | + case "9004": | |
| 845 | + data = createWelt3Right(height, size, offsetX, offsetY); | |
| 846 | + break; | |
| 847 | + default: | |
| 848 | + data = createNoneProject(); | |
| 849 | + break; | |
| 850 | + } | |
| 851 | + return data; | |
| 852 | + }; | |
| 853 | + // 左上部件 | |
| 854 | + const createDynamicTopLeft = (trapezoidLeftType, width, height, size, offsetX, offsetY) => { | |
| 855 | + if (!size) return createNoneProject(); | |
| 856 | + let data = {}; | |
| 857 | + switch (trapezoidLeftType) { | |
| 858 | + case "3001": | |
| 859 | + data = createBoxComponentNew(width, height, size, offsetX, offsetY); | |
| 860 | + break; | |
| 861 | + case "3002": | |
| 862 | + data = createBoxComponentNew1(width, height, size, offsetX, offsetY); | |
| 863 | + break; | |
| 864 | + case "3003": | |
| 865 | + data = createBoxComponentNew2(width, height, size, offsetX, offsetY); | |
| 866 | + break; | |
| 867 | + case "3004": | |
| 868 | + data = createBoxComponentNew3(width, height, size, offsetX, offsetY); | |
| 869 | + break; | |
| 870 | + case "3005": | |
| 871 | + data = createBoxComponentNew4(width, height, size, offsetX, offsetY); | |
| 872 | + break; | |
| 873 | + case "3006": | |
| 874 | + data = createBoxComponentNew5(width, height, size, offsetX, offsetY); | |
| 875 | + break; | |
| 876 | + case "4001": | |
| 877 | + data = createBoxComponentNew(width, height, size, offsetX, offsetY); | |
| 878 | + break; | |
| 879 | + case "4002": | |
| 880 | + data = createBoxComponentNew1(width, height, size, offsetX, offsetY); | |
| 881 | + break; | |
| 882 | + case "4003": | |
| 883 | + data = createBoxComponentNew2(width, height, size, offsetX, offsetY); | |
| 884 | + break; | |
| 885 | + case "4004": | |
| 886 | + data = createBoxComponentNew3(width, height, size, offsetX, offsetY); | |
| 887 | + break; | |
| 888 | + case "4005": | |
| 889 | + data = createBoxComponentNew4(width, height, size, offsetX, offsetY); | |
| 890 | + break; | |
| 891 | + case "4006": | |
| 892 | + data = createBoxComponentNew5(width, height, size, offsetX, offsetY); | |
| 893 | + break; | |
| 894 | + case "6001": | |
| 895 | + data = createBoxComponentNew(width, height, size, offsetX, offsetY); | |
| 896 | + break; | |
| 897 | + case "6002": | |
| 898 | + data = createBoxComponentNew1(width, height, size, offsetX, offsetY); | |
| 899 | + break; | |
| 900 | + case "6003": | |
| 901 | + data = createBoxComponentNew2(width, height, size, offsetX, offsetY); | |
| 902 | + break; | |
| 903 | + case "6004": | |
| 904 | + data = createBoxComponentNew3(width, height, size, offsetX, offsetY); | |
| 905 | + break; | |
| 906 | + case "6005": | |
| 907 | + data = createBoxComponentNew4(width, height, size, offsetX, offsetY); | |
| 908 | + break; | |
| 909 | + case "6006": | |
| 910 | + data = createBoxComponentNew5(width, height, size, offsetX, offsetY); | |
| 911 | + break; | |
| 912 | + case "7001": | |
| 913 | + data = createBoxComponentNew(width, height, size, offsetX, offsetY); | |
| 914 | + break; | |
| 915 | + case "7002": | |
| 916 | + data = createBoxComponentNew1(width, height, size, offsetX, offsetY); | |
| 917 | + break; | |
| 918 | + case "7003": | |
| 919 | + data = createBoxComponentNew2(width, height, size, offsetX, offsetY); | |
| 920 | + break; | |
| 921 | + case "7004": | |
| 922 | + data = createBoxComponentNew3(width, height, size, offsetX, offsetY); | |
| 923 | + break; | |
| 924 | + case "7005": | |
| 925 | + data = createBoxComponentNew4(width, height, size, offsetX, offsetY); | |
| 926 | + break; | |
| 927 | + case "7006": | |
| 928 | + data = createBoxComponentNew5(width, height, size, offsetX, offsetY); | |
| 929 | + break; | |
| 930 | + default: | |
| 931 | + data = createNoneProject(); | |
| 932 | + break; | |
| 933 | + } | |
| 934 | + return data; | |
| 935 | + }; | |
| 936 | + // 右上部件 | |
| 937 | + const createDynamicTopRight = (trapezoidLeftType, width, height, size, offsetX, offsetY) => { | |
| 938 | + if (!size) return createNoneProject(); | |
| 939 | + let data = {}; | |
| 940 | + switch (trapezoidLeftType) { | |
| 941 | + case "6001": | |
| 942 | + data = createBoxComponentNew(width, height, size, offsetX, offsetY); | |
| 943 | + break; | |
| 944 | + case 1: | |
| 945 | + break; | |
| 946 | + default: | |
| 947 | + data = createNoneProject(); | |
| 948 | + break; | |
| 949 | + } | |
| 950 | + return data; | |
| 951 | + }; | |
| 952 | + // 盒底组件 特殊的盒底组件 | |
| 953 | + const createBoxBottomComponent = (trapezoidLeftType, width, deep, size, offsetX, offsetY) => { | |
| 954 | + let data = {}; | |
| 955 | + switch (trapezoidLeftType) { | |
| 956 | + case "5001": | |
| 957 | + data = createRightAngleBoxBottomComponent(width, deep, size, offsetX, offsetY); | |
| 958 | + break; | |
| 959 | + case "5002": | |
| 960 | + data = createBoxBottomComponent1(width, deep, size, offsetX, offsetY); | |
| 961 | + break; | |
| 962 | + case "5003": | |
| 963 | + data = createBoxBottomComponent2(width, deep, size, offsetX, offsetY); | |
| 964 | + break; | |
| 965 | + case "5004": | |
| 966 | + data = createBoxBottomComponent3(width, deep, size, offsetX, offsetY); | |
| 967 | + break; | |
| 968 | + case "5005": | |
| 969 | + data = createBoxBottomComponent4(width, deep, size, offsetX, offsetY); | |
| 970 | + break; | |
| 971 | + case "5006": | |
| 972 | + data = createBoxBottomComponent5(width, deep, size, offsetX, offsetY); | |
| 973 | + break; | |
| 974 | + case "5007": | |
| 975 | + data = createBoxBottomComponent6(width, deep, size, offsetX, offsetY); | |
| 976 | + break; | |
| 977 | + default: | |
| 978 | + data = createNoneProject(); | |
| 979 | + break; | |
| 980 | + } | |
| 981 | + return data; | |
| 982 | + }; | |
| 983 | + return ( | |
| 984 | + <div | |
| 985 | + id="svgContainer" | |
| 986 | + key={boxKey} | |
| 987 | + ref={svgContainerRef} | |
| 988 | + style={{ | |
| 989 | + width: "100%", | |
| 990 | + height: "100%", | |
| 991 | + margin: "0 auto", | |
| 992 | + }} | |
| 993 | + > | |
| 994 | + <svg | |
| 995 | + className={styles.svgContainer} | |
| 996 | + id="dynamicSvg" | |
| 997 | + xmlns="http://www.w3.org/2000/svg" | |
| 998 | + ref={svgRef} | |
| 999 | + viewBox="0 0 400 300" | |
| 1000 | + preserveAspectRatio="xMidYMid meet" | |
| 1001 | + width="100%" | |
| 1002 | + height="100%" | |
| 1003 | + /> | |
| 1004 | + </div> | |
| 1005 | + ); | |
| 1006 | +}; | |
| 1007 | + | |
| 1008 | +export default SvgBox; | ... | ... |
src/components/Common/CommonBase.js
| ... | ... | @@ -44,7 +44,6 @@ export default (ChildComponent) => { |
| 44 | 44 | window.addEventListener('beforeunload', this.beforeunload); |
| 45 | 45 | window.addEventListener('unload', this.unload); |
| 46 | 46 | window.addEventListener('keydown', this.handleF9KeyPress); |
| 47 | - console.log('sSrcModelsId', this.state.sSrcModelsId); | |
| 48 | 47 | } |
| 49 | 48 | |
| 50 | 49 | async componentWillMount() { |
| ... | ... | @@ -662,7 +661,6 @@ export default (ChildComponent) => { |
| 662 | 661 | let sCopyToConfigMaster = {}; |
| 663 | 662 | if(commonUtils.isNotEmptyArr(sCopyToConfigField) && commonUtils.isNotEmptyArr(tableConfig)) { |
| 664 | 663 | sCopyToConfigMaster = tableConfig.gdsconfigformslave.filter(item => item.sControlName === sCopyToConfigField); |
| 665 | - console.log(sCopyToConfigMaster, sCopyToConfigMaster); | |
| 666 | 664 | if(commonUtils.isNotEmptyArr(sCopyToConfigMaster)) { |
| 667 | 665 | const sCopyToConfigMasterAssignField= sCopyToConfigMaster[0].sAssignField; |
| 668 | 666 | const newCopyTo = {}; |
| ... | ... | @@ -2915,7 +2913,6 @@ export default (ChildComponent) => { |
| 2915 | 2913 | if (commonUtils.isNotEmptyObject(sRulesJson) && commonUtils.isJSON(sRulesJson)) { |
| 2916 | 2914 | const sRulesObjArr = JSON.parse(sRulesJson); |
| 2917 | 2915 | if (Array.isArray(sRulesObjArr) && commonUtils.isNotEmptyArr(sRulesObjArr)) { |
| 2918 | - console.log('sRulesObjArr:', sRulesObjArr); | |
| 2919 | 2916 | sRulesObjArr.forEach((sRulesObj) => { |
| 2920 | 2917 | const { |
| 2921 | 2918 | showColumn, hideColumn, condition, tbName, sConfigName, |
| ... | ... | @@ -3118,7 +3115,6 @@ export default (ChildComponent) => { |
| 3118 | 3115 | } |
| 3119 | 3116 | const url = `${commonConfig.server_host}procedureCall/doGenericProcedureCall?sModelsId=${sModelsId}`; |
| 3120 | 3117 | const dataReturn = (await commonServices.postValueService(app.token, value, url)).data; |
| 3121 | - console.log('dataReturn', dataReturn); | |
| 3122 | 3118 | if (dataReturn.code === 1) { |
| 3123 | 3119 | if (commonUtils.isNotEmptyArr(slaveDataOld)) { |
| 3124 | 3120 | slaveDataOld.forEach((item) => { |
| ... | ... | @@ -3269,7 +3265,6 @@ export default (ChildComponent) => { |
| 3269 | 3265 | if (commonUtils.isNotEmptyArr(allReturnMap.masterData) && Array.isArray(allReturnMap.masterData)) { |
| 3270 | 3266 | allReturnMap.masterData = allReturnMap.masterData[0]; |
| 3271 | 3267 | } |
| 3272 | - console.log('allReturnMap:', allReturnMap); | |
| 3273 | 3268 | this.setState({ ...allReturnMap }); |
| 3274 | 3269 | } |
| 3275 | 3270 | } else { | ... | ... |
src/components/Common/CommonComponent/index.js
| ... | ... | @@ -37,6 +37,7 @@ import Areas from '@/assets/areas.json'; |
| 37 | 37 | import commonConfig from '@/utils/config'; |
| 38 | 38 | import { VirtualKeyboard } from '@/oee/common/oeeKeyBoard';// 虚拟软键盘 |
| 39 | 39 | import 'braft-editor/dist/output.css'; |
| 40 | +import SvgBox from '../BoxDesignCompontent/svg'; | |
| 40 | 41 | |
| 41 | 42 | const FormItem = Form.Item; |
| 42 | 43 | const { Option } = Select; |
| ... | ... | @@ -230,16 +231,6 @@ export default class CommonComponent extends Component { |
| 230 | 231 | JSON.stringify(nextProps.showConfig) !== JSON.stringify(showConfig)); |
| 231 | 232 | } |
| 232 | 233 | |
| 233 | - componentDidUpdate() { | |
| 234 | - const { dataValue, searchValue } = this.state; | |
| 235 | - if (dataValue === '' && searchValue) { | |
| 236 | - // eslint-disable-next-line | |
| 237 | - this.setState({ | |
| 238 | - searchValue: '', | |
| 239 | - }); | |
| 240 | - } | |
| 241 | - } | |
| 242 | - | |
| 243 | 234 | componentWillUnmount() { |
| 244 | 235 | this.mounted = false; |
| 245 | 236 | document.removeEventListener('mousedown', this.handleSelectClick); |
| ... | ... | @@ -436,6 +427,8 @@ export default class CommonComponent extends Component { |
| 436 | 427 | this.props.onFieldDoubleClick(this.props.record, this.state.dataValue, this.props.showConfig, this.props.name); |
| 437 | 428 | } else if (commonUtils.isNotEmptyObject(sMemo) && sMemo.indexOf('sAssignField') > -1) { /* 赋值字段 变量设置双击弹出 */ |
| 438 | 429 | this.props.onFieldDoubleClick(this.state.dataValue, this.props.showConfig, this.props.name); |
| 430 | + } else if (commonUtils.isNotEmptyObject(sMemo) && sMemo.indexOf('sInstruct') > -1) { /* 赋值字段 变量设置双击弹出 */ | |
| 431 | + this.props.onFieldDoubleClick(this.state.dataValue, this.props.showConfig, this.props.name); | |
| 439 | 432 | } |
| 440 | 433 | } |
| 441 | 434 | |
| ... | ... | @@ -1091,7 +1084,6 @@ export default class CommonComponent extends Component { |
| 1091 | 1084 | }, |
| 1092 | 1085 | }; |
| 1093 | 1086 | }; |
| 1094 | - | |
| 1095 | 1087 | /** 获取innerinput控件1 */ |
| 1096 | 1088 | getInnerInput = (innerInputProps) => { |
| 1097 | 1089 | const { |
| ... | ... | @@ -1103,6 +1095,124 @@ export default class CommonComponent extends Component { |
| 1103 | 1095 | if (sName === 'sIcon') { |
| 1104 | 1096 | return (<><Upload {...this.getUploadProps()}>{this.getUploadContents()}</Upload><Button {...this.getUploadButtonProps()}>X</Button></>); |
| 1105 | 1097 | } |
| 1098 | + if (sName === 'sPackPath') { | |
| 1099 | + const uploadProps = { | |
| 1100 | + listType: 'picture-card', | |
| 1101 | + className: 'avatar-uploader', | |
| 1102 | + action: `${commonConfig.server_host}file/uploadLogo?sLogoName=logo${sName}${this.props.record.sName}`, | |
| 1103 | + disabled: !this.props.enabled, | |
| 1104 | + onChange: (info) => { | |
| 1105 | + const { fileList } = info; | |
| 1106 | + const file = fileList[fileList.length - 1]; | |
| 1107 | + const { status, response } = file; | |
| 1108 | + if (status === 'done') { | |
| 1109 | + if (response && response.code === 1) { | |
| 1110 | + const imageUrlNew = `${commonConfig.server_host}file/downloadLogo?sLogoName=logo${sName}${this.props.record.sName}&date=${new Date().getTime()}`; | |
| 1111 | + if (sName === 'sPackPath') { | |
| 1112 | + // this.setState({ sPackPath: imageUrlNew }); | |
| 1113 | + this.props.onChange(this.props.name, sName, { sPackPath: imageUrlNew }, this.props.sId, []); | |
| 1114 | + } else { | |
| 1115 | + // this.setState({ sPackDetailPath: imageUrlNew }); | |
| 1116 | + this.props.onChange(this.props.name, sName, { sPackDetailPath: imageUrlNew }, this.props.sId, []); | |
| 1117 | + } | |
| 1118 | + } else if (response && response.code === -1) { | |
| 1119 | + message.error(response.msg); | |
| 1120 | + } | |
| 1121 | + } | |
| 1122 | + }, | |
| 1123 | + accept: 'image/*', | |
| 1124 | + showUploadList: false, | |
| 1125 | + openFileDialogOnClick: this.props.enabled, | |
| 1126 | + }; | |
| 1127 | + const imageUrl = sName === 'sPackPath' ? this.props.record.sPackPath : this.props.record.sPackDetailPath; | |
| 1128 | + return ( | |
| 1129 | + <div> | |
| 1130 | + <Upload | |
| 1131 | + {...uploadProps} | |
| 1132 | + > | |
| 1133 | + {imageUrl ? ( | |
| 1134 | + <Image | |
| 1135 | + key={imageUrl} | |
| 1136 | + src={imageUrl} | |
| 1137 | + alt="avatar" | |
| 1138 | + style={{ width: '100%' }} | |
| 1139 | + preview={!this.props.enabled} | |
| 1140 | + /> | |
| 1141 | + ) : ( | |
| 1142 | + <div> | |
| 1143 | + <div | |
| 1144 | + style={{ marginTop: 8 }} | |
| 1145 | + > | |
| 1146 | + 上传 | |
| 1147 | + </div> | |
| 1148 | + </div> | |
| 1149 | + )} | |
| 1150 | + </Upload> | |
| 1151 | + </div> | |
| 1152 | + ); | |
| 1153 | + } | |
| 1154 | + if (sName === 'sPackDetailPath') { | |
| 1155 | + const boxList = []; | |
| 1156 | + const tables = [ | |
| 1157 | + { name: '盒型类别', value: this.props.record.sBoxType, type: null }, | |
| 1158 | + { name: '盒身', value: this.props.record.sBoxBody, type: this.props.record.sTypes }, | |
| 1159 | + { name: '盒长', value: this.props.record.dBoxLength, type: null }, | |
| 1160 | + { name: '盒宽', value: this.props.record.dBoxWidth, type: null }, | |
| 1161 | + { name: '盒高', value: this.props.record.dBoxHeight, type: null }, | |
| 1162 | + ]; | |
| 1163 | + const { slaveData = [] } = this.props; | |
| 1164 | + const titleList1 = [ | |
| 1165 | + { name: '上方盒舌', value: 'dSFHS' }, | |
| 1166 | + { name: '盒底组件', value: 'dHDC' }, | |
| 1167 | + { name: '下方盒舌', value: 'dXFHS' }, | |
| 1168 | + { name: '左(上)插位组件', value: 'dZSCW' }, | |
| 1169 | + { name: '左贴边位', value: 'dZTBW' }, | |
| 1170 | + { name: '左(下)插位组件', value: 'dZXCW' }, | |
| 1171 | + { name: '右(上)插位组件', value: 'dYSCW' }, | |
| 1172 | + { name: '右贴边位', value: 'dYTBW' }, | |
| 1173 | + { name: '右(下)插位组件', value: 'dYXCW' }, | |
| 1174 | + ]; | |
| 1175 | + slaveData.forEach((x) => { | |
| 1176 | + boxList.push({ | |
| 1177 | + value: x.iValue, | |
| 1178 | + sName: titleList1.find(item => item.value === x.sCode)?.name || '', | |
| 1179 | + isEditable: true, | |
| 1180 | + isSelect: false, | |
| 1181 | + selectValue: null, | |
| 1182 | + selectLabel: '', | |
| 1183 | + selectImage: null, | |
| 1184 | + type: x.sTypes || null, | |
| 1185 | + show: true, | |
| 1186 | + showName: x.sName, // 参数名称 | |
| 1187 | + }); | |
| 1188 | + }); | |
| 1189 | + tables.forEach((x) => { | |
| 1190 | + boxList.push({ | |
| 1191 | + value: x.value, | |
| 1192 | + sName: x.name, | |
| 1193 | + isEditable: true, | |
| 1194 | + isSelect: false, | |
| 1195 | + selectValue: null, | |
| 1196 | + selectLabel: '', | |
| 1197 | + selectImage: null, | |
| 1198 | + type: x.type || null, | |
| 1199 | + show: true, | |
| 1200 | + showName: x.name, // 参数名称 | |
| 1201 | + }); | |
| 1202 | + }); | |
| 1203 | + const svgProps = { | |
| 1204 | + ...this.props, | |
| 1205 | + boxList, | |
| 1206 | + dSvgBoxWidth: 100, | |
| 1207 | + dSvgBoxHeight: 100, | |
| 1208 | + showNew: 1, | |
| 1209 | + }; | |
| 1210 | + return ( | |
| 1211 | + <div style={{ width: '100px', height: '100px' }}> | |
| 1212 | + <SvgBox {...svgProps} /> | |
| 1213 | + </div> | |
| 1214 | + ); | |
| 1215 | + } | |
| 1106 | 1216 | if (this.props.showConfig.sName && this.props.showConfig.sName.toLowerCase().includes('fullmemo')) { |
| 1107 | 1217 | const row = commonUtils.isNotEmptyNumber(this.props.showConfig.iRowValue) ? this.props.showConfig.iRowValue : 1; |
| 1108 | 1218 | const minHeight = (row * 20) + 6 + 4 + 2; |
| ... | ... | @@ -1149,7 +1259,6 @@ export default class CommonComponent extends Component { |
| 1149 | 1259 | return <InputA {...innerInputProps} />; |
| 1150 | 1260 | } |
| 1151 | 1261 | }; |
| 1152 | - | |
| 1153 | 1262 | // 获取innerinput控件后面的按钮 |
| 1154 | 1263 | getInnerButton = () => { |
| 1155 | 1264 | const props = { |
| ... | ... | @@ -1560,12 +1669,16 @@ export default class CommonComponent extends Component { |
| 1560 | 1669 | obj.onDoubleClick = this.onDoubleClick; |
| 1561 | 1670 | } else { /* 普通文本输入框 */ |
| 1562 | 1671 | obj = this.getTextInnerInputPropsMaster(); |
| 1672 | + if (this.props?.showConfig?.sName === 'sInstruct') { | |
| 1673 | + obj.onDoubleClick = this.onDoubleClick; | |
| 1674 | + } | |
| 1563 | 1675 | } |
| 1564 | 1676 | } else if (this.firstDataIndex === 'c') { /* 地址联动框(联动下拉类型c) */ |
| 1565 | 1677 | obj = this.getAddressInnerInputPropsMaster(); |
| 1566 | 1678 | } |
| 1567 | 1679 | obj.onKeyDown = this.onKeyDown; |
| 1568 | 1680 | obj.onKeyUp = this.onKeyUp; |
| 1681 | + obj.onBlur = this.onBlur; | |
| 1569 | 1682 | if (this.props.allowClear) { |
| 1570 | 1683 | obj.allowClear = this.props.allowClear; /* 带移除图标 */ |
| 1571 | 1684 | } |
| ... | ... | @@ -2026,7 +2139,9 @@ export default class CommonComponent extends Component { |
| 2026 | 2139 | return triggerNode; |
| 2027 | 2140 | } |
| 2028 | 2141 | } |
| 2029 | - | |
| 2142 | + handleCancel = () => { | |
| 2143 | + this.state.previewOpen = false; | |
| 2144 | + } | |
| 2030 | 2145 | handleSelectClick = () => { |
| 2031 | 2146 | if (this.bInputIn) { |
| 2032 | 2147 | this.setState({ bDropDownOpen: true }); |
| ... | ... | @@ -2165,7 +2280,7 @@ export default class CommonComponent extends Component { |
| 2165 | 2280 | /* 下拉新增单独处理 */ |
| 2166 | 2281 | const dEmptyValue = this.props.showConfig.sName === 'dMachineLength' || this.props.showConfig.sName === 'dMachineWidth' ? newValue : null; /* 设置数值型为空值时 数据置为0 或空值 */ |
| 2167 | 2282 | let value = this.firstDataIndex === 's' && !this.props.textArea && commonUtils.isEmpty(newValue) ? newValue.replace('--', '') : |
| 2168 | - this.firstDataIndex === 't' ? dateString : (this.firstDataIndex === 'd' || this.firstDataIndex === 'i') && commonUtils.isEmpty(newValue) ? dEmptyValue : newValue; | |
| 2283 | + ['t', 'm'].includes(this.firstDataIndex) ? dateString : (this.firstDataIndex === 'd' || this.firstDataIndex === 'i') && commonUtils.isEmpty(newValue) ? dEmptyValue : newValue; | |
| 2169 | 2284 | value = this.props.showConfig.bMultipleChoice ? value.toString() : value; |
| 2170 | 2285 | // if (value === 0) { |
| 2171 | 2286 | // setTimeout(() => { |
| ... | ... | @@ -2190,9 +2305,16 @@ export default class CommonComponent extends Component { |
| 2190 | 2305 | } |
| 2191 | 2306 | /* 回带值声明 */ |
| 2192 | 2307 | const returnValue = {}; |
| 2193 | - const { searchValue, searchDropDownData, dropDownData } = this.state; | |
| 2194 | - const dropDownDataNew = commonUtils.isEmptyArr(searchValue) ? dropDownData : searchDropDownData; | |
| 2195 | - | |
| 2308 | + const { | |
| 2309 | + searchValue, searchDropDownData, dropDownData, selectTableData, | |
| 2310 | + } = this.state; | |
| 2311 | + let dropDownDataNew = []; | |
| 2312 | + /* 如果是表格下拉的话 */ | |
| 2313 | + if (commonUtils.isNotEmptyStr(this.props.showConfig?.sTableTitleSql) && this.props.showConfig?.iVisCount > 1) { | |
| 2314 | + dropDownDataNew = commonUtils.isEmptyArr(selectTableData) ? dropDownData : selectTableData; | |
| 2315 | + } else { | |
| 2316 | + dropDownDataNew = commonUtils.isEmptyArr(searchValue) ? dropDownData : searchDropDownData; | |
| 2317 | + } | |
| 2196 | 2318 | const getTValue = (value) => { |
| 2197 | 2319 | const { sDateFormat = 'YYYY-MM-DD' } = this.props.showConfig; |
| 2198 | 2320 | |
| ... | ... | @@ -2343,6 +2465,9 @@ export default class CommonComponent extends Component { |
| 2343 | 2465 | if (dMachine) { |
| 2344 | 2466 | if (!/^\d+(\.\d+)?(\*\d+(\.\d+)?)?$/.test(newValue)) { |
| 2345 | 2467 | newValue = ''; |
| 2468 | + setTimeout(() => { | |
| 2469 | + this.setState({ searchValue: '' }); | |
| 2470 | + }, 1200); | |
| 2346 | 2471 | } |
| 2347 | 2472 | } |
| 2348 | 2473 | 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 { |
| 2456 | 2581 | if (!this.completeFlag) { |
| 2457 | 2582 | const addState = {}; |
| 2458 | 2583 | addState[this.props.showConfig.sName] = undefined; |
| 2584 | + this.props.onChange(this.props.name, this.props.showConfig.sName, { ...returnValue, ...addState }, this.props.sId, dropDownDataNew); | |
| 2459 | 2585 | setTimeout(() => { |
| 2460 | - this.props.onChange(this.props.name, this.props.showConfig.sName, { ...returnValue, ...addState }, this.props.sId, dropDownDataNew); | |
| 2461 | - }, 0); | |
| 2586 | + this.props.onChange(this.props.name, this.props.showConfig.sName, returnValue, this.props.sId, dropDownDataNew); | |
| 2587 | + }, 200); | |
| 2462 | 2588 | } |
| 2463 | 2589 | this.completeFlag = false; |
| 2590 | + } else { | |
| 2591 | + this.props.onChange(this.props.name, this.props.showConfig.sName, returnValue, this.props.sId, dropDownDataNew); | |
| 2464 | 2592 | } |
| 2465 | - // setTimeout(() => { | |
| 2466 | - // this.props.onChange(this.props.name, this.props.showConfig.sName, returnValue, this.props.sId, dropDownDataNew); | |
| 2467 | - // }, 50); | |
| 2468 | - this.props.onChange(this.props.name, this.props.showConfig.sName, returnValue, this.props.sId, dropDownDataNew); | |
| 2469 | 2593 | |
| 2470 | 2594 | clearTimeout(this.onChangeTimer); |
| 2471 | 2595 | this.onChangeTimer = setTimeout(() => { | ... | ... |
src/components/Common/CommonNewBill.js
| ... | ... | @@ -2517,7 +2517,7 @@ const BillComponent = Form.create({ |
| 2517 | 2517 | <div> |
| 2518 | 2518 | <Avatar src={props.imgSrc} /> |
| 2519 | 2519 | </div> |
| 2520 | - <Tabs activeKey={props.currentTab} onChange={props.onTabChange} className={styles.slaveTabs} tabBarStyle={{ margin: '0 8px' }} > | |
| 2520 | + <Tabs activeKey={props.currentTab} onChange={props.onTabChange} className={styles.slaveTabs} tabBarStyle={{ margin: '0 8px' }} type="card"> | |
| 2521 | 2521 | { |
| 2522 | 2522 | commonUtils.isNotEmptyArr(diliverConfigTypeArr1) ? |
| 2523 | 2523 | diliverConfigTypeArr1.map((item) => { | ... | ... |
src/components/Common/CommonTable/index.css
0 → 100644
| 1 | +.subForm { | |
| 2 | + margin-bottom: 10px; | |
| 3 | + position: relative; | |
| 4 | +} | |
| 5 | +.subForm .extraAction { | |
| 6 | + position: absolute; | |
| 7 | + top: -30px; | |
| 8 | + right: 0; | |
| 9 | +} | |
| 10 | +.subForm .extraAction .del { | |
| 11 | + background: #fd674a; | |
| 12 | + border: 1px solid #fd674a; | |
| 13 | +} | |
| 14 | +.subForm .extraAction .del:hover { | |
| 15 | + color: #fff; | |
| 16 | + border: 1px solid #fb795f !important; | |
| 17 | + background: #fb795f !important; | |
| 18 | +} | |
| 19 | +.subForm .summaryCell { | |
| 20 | + color: red; | |
| 21 | + font-weight: bold; | |
| 22 | + white-space: nowrap; | |
| 23 | + /* 合计不换行 */ | |
| 24 | + overflow: hidden; | |
| 25 | + /*超出部分隐藏*/ | |
| 26 | + text-overflow: ellipsis; | |
| 27 | + /*超出部分文字以...显示*/ | |
| 28 | + display: block; | |
| 29 | +} | |
| 30 | +.subForm .summaryCellTotal { | |
| 31 | + color: black; | |
| 32 | + font-weight: bold; | |
| 33 | +} | |
| 34 | +.disabledProup .iconAdd i:hover:before { | |
| 35 | + color: rgba(0, 0, 0, 0.43); | |
| 36 | +} | |
| 37 | +.disabledProup .editSelect > div:hover { | |
| 38 | + border-color: transparent !important; | |
| 39 | + background: transparent !important; | |
| 40 | +} | |
| 41 | +.disabledProup .editSelect > div:hover span { | |
| 42 | + color: rgba(0, 0, 0, 0.25); | |
| 43 | +} | |
| 44 | +.disabledProup .editSelect > div > div > div { | |
| 45 | + color: #000 !important; | |
| 46 | +} | |
| 47 | +.disabledProup .inputNum input:hover { | |
| 48 | + border: 2px solid transparent !important; | |
| 49 | + background: transparent !important; | |
| 50 | +} | |
| 51 | +.disabledProup input[disabled]:hover { | |
| 52 | + background: none !important; | |
| 53 | +} | |
| 54 | +.disabledProup .tableDataPicker input:hover { | |
| 55 | + border: 1px solid #e6d8d8 !important; | |
| 56 | +} | |
| 57 | +.disabledProup :global .ant-table-scroll > div:last-child, | |
| 58 | +.proup :global .ant-table-scroll > div:last-child { | |
| 59 | + position: relative; | |
| 60 | +} | |
| 61 | +:global .react-resizable { | |
| 62 | + position: relative; | |
| 63 | + background-clip: padding-box; | |
| 64 | +} | |
| 65 | +:global .react-resizable-handle { | |
| 66 | + position: absolute; | |
| 67 | + width: 10px; | |
| 68 | + height: 100%; | |
| 69 | + bottom: 0; | |
| 70 | + right: -5px; | |
| 71 | + cursor: col-resize; | |
| 72 | + z-index: 1; | |
| 73 | +} | |
| 74 | +:global th[bnotresize] .react-resizable-handle { | |
| 75 | + cursor: default; | |
| 76 | +} | |
| 77 | +:global .tableNoPadding .ant-table-row td { | |
| 78 | + padding: 0 !important; | |
| 79 | +} | |
| 80 | +:global .vlist-td-display { | |
| 81 | + display: none; | |
| 82 | +} | |
| 83 | +:global .virtuallist > table > tbody > tr:nth-of-type(2) .vlist-td-display { | |
| 84 | + display: table-cell; | |
| 85 | +} | |
| 86 | +.tdCell .fastSearchBtn { | |
| 87 | + position: absolute; | |
| 88 | + top: 0; | |
| 89 | + right: 0; | |
| 90 | + background-color: #fff7e6; | |
| 91 | + display: none; | |
| 92 | +} | |
| 93 | +.tdCell .fastSearchBtn:hover { | |
| 94 | + color: #2f54eb; | |
| 95 | + zoom: 1.1; | |
| 96 | +} | |
| 97 | +.tdCell:hover .fastSearchBtn { | |
| 98 | + display: block; | |
| 99 | +} | |
| 100 | +.colorInfo { | |
| 101 | + display: flex; | |
| 102 | + flex-wrap: wrap; | |
| 103 | + font-size: 10px; | |
| 104 | +} | |
| 105 | +.moveLine { | |
| 106 | + position: absolute; | |
| 107 | + bottom: 0; | |
| 108 | + left: 0; | |
| 109 | + width: 100%; | |
| 110 | + height: 2px; | |
| 111 | + border: 2px dashed #448ef7; | |
| 112 | + z-index: 2; | |
| 113 | + cursor: ns-resize; | |
| 114 | + opacity: 0; | |
| 115 | +} | |
| 116 | +.moveLine:hover { | |
| 117 | + opacity: 1; | |
| 118 | +} | |
| 119 | +.moveLine:active { | |
| 120 | + border-color: #72c240; | |
| 121 | +} | |
| 122 | +:global .xlyCommonTable .ant-table-cell .changeClassName .ant-form-item { | |
| 123 | + margin-bottom: 0px !important; | |
| 124 | +} | ... | ... |
src/components/Common/CommonTable/index.less
| ... | ... | @@ -10,20 +10,20 @@ |
| 10 | 10 | border: 1px solid #fd674a; |
| 11 | 11 | &:hover { |
| 12 | 12 | color: #fff; |
| 13 | - border: 1px solid #fb795f!important; | |
| 14 | - background: #fb795f!important; | |
| 13 | + border: 1px solid #fb795f !important; | |
| 14 | + background: #fb795f !important; | |
| 15 | 15 | } |
| 16 | 16 | } |
| 17 | 17 | } |
| 18 | - .summaryCell{ | |
| 18 | + .summaryCell { | |
| 19 | 19 | color: red; |
| 20 | 20 | font-weight: bold; |
| 21 | - white-space:nowrap; /* 合计不换行 */ | |
| 22 | - overflow: hidden;/*超出部分隐藏*/ | |
| 23 | - text-overflow:ellipsis;/*超出部分文字以...显示*/ | |
| 21 | + white-space: nowrap; /* 合计不换行 */ | |
| 22 | + overflow: hidden; /*超出部分隐藏*/ | |
| 23 | + text-overflow: ellipsis; /*超出部分文字以...显示*/ | |
| 24 | 24 | display: block; |
| 25 | 25 | } |
| 26 | - .summaryCellTotal{ | |
| 26 | + .summaryCellTotal { | |
| 27 | 27 | color: black; |
| 28 | 28 | font-weight: bold; |
| 29 | 29 | } |
| ... | ... | @@ -33,34 +33,35 @@ |
| 33 | 33 | color: rgba(0, 0, 0, 0.43); |
| 34 | 34 | } |
| 35 | 35 | .editSelect > div:hover { |
| 36 | - border-color: transparent!important; | |
| 37 | - background: transparent!important; | |
| 36 | + border-color: transparent !important; | |
| 37 | + background: transparent !important; | |
| 38 | 38 | } |
| 39 | 39 | .editSelect > div:hover span { |
| 40 | 40 | color: rgba(0, 0, 0, 0.25); |
| 41 | 41 | } |
| 42 | 42 | .editSelect > div > div > div { |
| 43 | - color: #000!important; | |
| 43 | + color: #000 !important; | |
| 44 | 44 | } |
| 45 | 45 | .inputNum input:hover { |
| 46 | - border: 2px solid transparent!important; | |
| 47 | - background: transparent!important; | |
| 46 | + border: 2px solid transparent !important; | |
| 47 | + background: transparent !important; | |
| 48 | 48 | } |
| 49 | 49 | input[disabled]:hover { |
| 50 | - background: none!important; | |
| 50 | + background: none !important; | |
| 51 | 51 | } |
| 52 | 52 | .tableDataPicker input:hover { |
| 53 | - border: 1px solid #e6d8d8!important; | |
| 53 | + border: 1px solid #e6d8d8 !important; | |
| 54 | 54 | } |
| 55 | 55 | } |
| 56 | -.disabledProup, .proup { | |
| 56 | +.disabledProup, | |
| 57 | +.proup { | |
| 57 | 58 | :global { |
| 58 | 59 | .ant-table-scroll > div:last-child { |
| 59 | 60 | position: relative; |
| 60 | 61 | } |
| 61 | - | |
| 62 | 62 | } |
| 63 | 63 | } |
| 64 | + | |
| 64 | 65 | :global { |
| 65 | 66 | .react-resizable { |
| 66 | 67 | position: relative; |
| ... | ... | @@ -75,12 +76,12 @@ |
| 75 | 76 | cursor: col-resize; |
| 76 | 77 | z-index: 1; |
| 77 | 78 | } |
| 78 | - th[bnotresize] .react-resizable-handle{ | |
| 79 | + th[bnotresize] .react-resizable-handle { | |
| 79 | 80 | cursor: default; |
| 80 | 81 | } |
| 81 | 82 | .tableNoPadding { |
| 82 | 83 | .ant-table-row { |
| 83 | - td{ | |
| 84 | + td { | |
| 84 | 85 | padding: 0 !important; |
| 85 | 86 | } |
| 86 | 87 | } |
| ... | ... | @@ -88,7 +89,7 @@ |
| 88 | 89 | .vlist-td-display { |
| 89 | 90 | display: none; |
| 90 | 91 | } |
| 91 | - .virtuallist>table>tbody>tr:nth-of-type(2) { | |
| 92 | + .virtuallist > table > tbody > tr:nth-of-type(2) { | |
| 92 | 93 | .vlist-td-display { |
| 93 | 94 | display: table-cell; |
| 94 | 95 | } |
| ... | ... | @@ -107,17 +108,17 @@ |
| 107 | 108 | zoom: 1.1; |
| 108 | 109 | } |
| 109 | 110 | } |
| 110 | - &:hover { | |
| 111 | + &:hover { | |
| 111 | 112 | .fastSearchBtn { |
| 112 | 113 | display: block; |
| 113 | 114 | } |
| 114 | - } | |
| 115 | + } | |
| 115 | 116 | } |
| 116 | 117 | |
| 117 | 118 | .colorInfo { |
| 118 | - display: flex; | |
| 119 | - flex-wrap: wrap; | |
| 120 | - font-size: 10px; | |
| 119 | + display: flex; | |
| 120 | + flex-wrap: wrap; | |
| 121 | + font-size: 10px; | |
| 121 | 122 | } |
| 122 | 123 | |
| 123 | 124 | .moveLine { |
| ... | ... | @@ -138,4 +139,14 @@ |
| 138 | 139 | &:active { |
| 139 | 140 | border-color: #72c240; |
| 140 | 141 | } |
| 141 | -} | |
| 142 | 142 | \ No newline at end of file |
| 143 | +} | |
| 144 | + | |
| 145 | +:global .xlyCommonTable { | |
| 146 | + .ant-table-cell { | |
| 147 | + .changeClassName { | |
| 148 | + .ant-form-item { | |
| 149 | + margin-bottom: 0px !important; | |
| 150 | + } | |
| 151 | + } | |
| 152 | + } | |
| 153 | +} | ... | ... |
src/components/Common/PersonCenter/PersonCenter.js
| ... | ... | @@ -31,7 +31,7 @@ import OnlineUser from '@/assets/onlineUser.svg'; |
| 31 | 31 | import * as commonServices from '@/services/services'; |
| 32 | 32 | import commonConfig from '../../../utils/config'; |
| 33 | 33 | // import SkinChangeModal from './SkinChangeModal'; |
| 34 | -// import MenuSearchPopovor from './MenuSearchPopovor'; | |
| 34 | +import MenuSearchPopovor from './MenuSearchPopovor'; | |
| 35 | 35 | |
| 36 | 36 | const { TabPane } = Tabs; |
| 37 | 37 | const FormItem = Form.Item; |
| ... | ... | @@ -396,16 +396,16 @@ class PersonCenter extends Component { |
| 396 | 396 | <Popover |
| 397 | 397 | trigger="click" |
| 398 | 398 | destroyTooltipOnHide |
| 399 | - // content={ | |
| 400 | - // <MenuSearchPopovor | |
| 401 | - // menuPanel={menuPanel} | |
| 402 | - // onAddPane={onAddPane} | |
| 403 | - // app={app} | |
| 404 | - // dispatch={dispatch} | |
| 405 | - // updateMenuPanel={this.updateMenuPanel} | |
| 406 | - // onSetMenuSearchPopoverVisible={this.handleSetMenuSearchPopoverVisible} | |
| 407 | - // /> | |
| 408 | - // } | |
| 399 | + content={ | |
| 400 | + <MenuSearchPopovor | |
| 401 | + menuPanel={menuPanel} | |
| 402 | + onAddPane={onAddPane} | |
| 403 | + app={app} | |
| 404 | + dispatch={dispatch} | |
| 405 | + updateMenuPanel={this.updateMenuPanel} | |
| 406 | + onSetMenuSearchPopoverVisible={this.handleSetMenuSearchPopoverVisible} | |
| 407 | + /> | |
| 408 | + } | |
| 409 | 409 | placement="left" |
| 410 | 410 | overlayClassName="sysSearchContent" |
| 411 | 411 | open={menuSearchPopoverVisible} | ... | ... |
src/components/Common/SearchComponent/index.js
| ... | ... | @@ -800,7 +800,7 @@ export default class SearchComponent extends Component { |
| 800 | 800 | |
| 801 | 801 | return ( |
| 802 | 802 | <div key={key} className={styles.addFilterBox}> |
| 803 | - <Space> | |
| 803 | + <Space style={{height:'100%'}}> | |
| 804 | 804 | <div style={{ width: 180 }}> |
| 805 | 805 | <ShowType {...showTypeFirstProps} /> |
| 806 | 806 | </div> | ... | ... |
src/components/Common/SearchComponent/index.less
src/components/Common/ToolBar/ToolBarNew.js
| ... | ... | @@ -1278,6 +1278,8 @@ class ToolBarComponent extends Component { |
| 1278 | 1278 | } |
| 1279 | 1279 | const iIndex = menuData.findIndex(item => item.sName === key || item.sControlName === key); |
| 1280 | 1280 | const { sInstruct: sInstructStr, sChangeType } = (iIndex > -1) ? menuData[iIndex] : {}; |
| 1281 | + console.log( menuData[iIndex]); | |
| 1282 | + | |
| 1281 | 1283 | const sInstruct = commonUtils.convertStrToObj(sInstructStr, {}); |
| 1282 | 1284 | // const { data = [] } = sInstruct; |
| 1283 | 1285 | // console.log('btnConfig', iIndex, sInstruct, data); |
| ... | ... | @@ -1850,6 +1852,7 @@ class ToolBarComponent extends Component { |
| 1850 | 1852 | } else if (key.indexOf('BtnCopyTo') > -1) { /* 复制到 */ // && commonUtils.isNotEmptyStr(e.item.props.sActiveId) |
| 1851 | 1853 | |
| 1852 | 1854 | // if (this.handleFreeDeliver(key)) return; |
| 1855 | + | |
| 1853 | 1856 | this.props.onCopyTo(e.key, e.item.props['data-sactiveid']); |
| 1854 | 1857 | } else if (key.indexOf('BtnCopyFrom') > -1 && commonUtils.isNotEmptyStr(e.item.props['data-sactiveid'])) { /* 复制从 */ |
| 1855 | 1858 | obj = { |
| ... | ... | @@ -2208,8 +2211,10 @@ class ToolBarComponent extends Component { |
| 2208 | 2211 | } |
| 2209 | 2212 | }); |
| 2210 | 2213 | } else if (this.props.onButtonClick !== undefined) { |
| 2214 | + | |
| 2211 | 2215 | this.props.onButtonClick(key); |
| 2212 | 2216 | } |
| 2217 | + | |
| 2213 | 2218 | }; |
| 2214 | 2219 | |
| 2215 | 2220 | // 删除当前pane |
| ... | ... | @@ -2379,7 +2384,6 @@ class ToolBarComponent extends Component { |
| 2379 | 2384 | if(location.pathname.includes('commonList')) { |
| 2380 | 2385 | name = 'slave'; |
| 2381 | 2386 | } |
| 2382 | - console.log('name', name); | |
| 2383 | 2387 | const { [`${name}Config`]: tableConfig } = this.props; |
| 2384 | 2388 | if(commonUtils.isNotEmptyArr(tableConfig)) { |
| 2385 | 2389 | const myTableConfig = JSON.parse(JSON.stringify(tableConfig)); |
| ... | ... | @@ -2850,7 +2854,6 @@ class ToolBarComponent extends Component { |
| 2850 | 2854 | this.props.onSaveState({ sCurrMemoProps }); |
| 2851 | 2855 | } |
| 2852 | 2856 | const sButtonParam = btnConfig.sButtonParam; |
| 2853 | - console.log('11', btnConfig); | |
| 2854 | 2857 | const btn = commonUtils.convertStrToObj(sButtonParam); |
| 2855 | 2858 | const sProName = btn.sproName; |
| 2856 | 2859 | const inParams = []; |
| ... | ... | @@ -2984,7 +2987,6 @@ class ToolBarComponent extends Component { |
| 2984 | 2987 | item.bFilter = slaveFilterCondition; |
| 2985 | 2988 | }); |
| 2986 | 2989 | } |
| 2987 | - console.log('inParams', inParams); | |
| 2988 | 2990 | } |
| 2989 | 2991 | |
| 2990 | 2992 | const iIndex = commonUtils.isNotEmptyObject(btnConfig) ? menuData.findIndex(item => item.sControlName === btnConfig.sControlName) : -1; |
| ... | ... | @@ -3048,7 +3050,6 @@ class ToolBarComponent extends Component { |
| 3048 | 3050 | } |
| 3049 | 3051 | if(commonUtils.isNotEmptyArr(afterInterfaceArr)) { /* 之后调用 */ |
| 3050 | 3052 | const result = await this.handleProcedureCall(btnConfig, sProName, JSON.stringify({ params: inParams, changeValue: sValue, sButtonParam: btn })); |
| 3051 | - console.log('result', result); | |
| 3052 | 3053 | if(result > 0) { /* 只有成功 才能调用接口 -5代表失败 */ |
| 3053 | 3054 | const asyncFunc = async () => { |
| 3054 | 3055 | for (let i = 0; i < afterInterfaceArr.length; i++) { | ... | ... |
src/components/CommonChar/CommonChar.js
0 → 100644
| 1 | +/* eslint-disable object-curly-newline */ | |
| 2 | +import React, { Component } from 'react'; | |
| 3 | +import { Card, Row, Col, Radio } from 'antd-v4'; | |
| 4 | +import baseChar from '@/components/Common/baseChar'; /* 获取图表配置及数据 */ | |
| 5 | +// import { Bar, Columnar, ColumnarGroup, BrokenLine, WaterWave, Gauge, ColumnarStack, PieGroup, Pie, TimeLineGroup, ColorBlock } from '../Charts'; | |
| 6 | +import Bar from '@/components/Charts/Bar'; | |
| 7 | +import Columnar from '@/components/Charts/Columnar'; | |
| 8 | +import ColumnarGroup from '@/components/Charts/ColumnarGroup'; | |
| 9 | +import BrokenLine from '@/components/Charts/BrokenLine'; | |
| 10 | +import WaterWave from '@/components/Charts/WaterWave'; | |
| 11 | +import Gauge from '@/components/Charts/Gauge'; | |
| 12 | +import ColumnarStack from '@/components/Charts/ColumnarStack'; | |
| 13 | +import PieGroup from '@/components/Charts/PieGroup'; | |
| 14 | +import Pie from '@/components/Charts/Pie'; | |
| 15 | +import TimeLineGroup from '@/components/Charts/TimeLineGroup'; | |
| 16 | +import ColorBlock from '@/components/Charts/ColorBlock'; | |
| 17 | +import styles from '@/components/Charts/index.less'; | |
| 18 | +import * as utils from '@/utils/utils'; | |
| 19 | +import CommonList from '@/components/Common/CommonList'; | |
| 20 | + | |
| 21 | +class CommonChar extends Component { | |
| 22 | + constructor(props) { | |
| 23 | + super(props); | |
| 24 | + this.state = { | |
| 25 | + sModelsId: props.sModelsId, | |
| 26 | + charConfigAndData: [], | |
| 27 | + commonChar: styles.commonChar, | |
| 28 | + commonCharPage: styles.commonCharPage, | |
| 29 | + childChar: styles.childChar, | |
| 30 | + }; | |
| 31 | + } | |
| 32 | + | |
| 33 | + componentWillReceiveProps(nextProps) { | |
| 34 | + const { charConfigAndData } = nextProps; | |
| 35 | + this.setState({ charConfigAndData: JSON.parse(JSON.stringify(charConfigAndData)) }); | |
| 36 | + } | |
| 37 | + | |
| 38 | + shouldComponentUpdate(nextProps, nextState) { | |
| 39 | + return JSON.stringify(nextState.charConfigAndData) !== JSON.stringify(this.state.charConfigAndData); | |
| 40 | + } | |
| 41 | + | |
| 42 | + handleChar = (props) => { | |
| 43 | + const { sCharType, child } = props; | |
| 44 | + let content = ''; | |
| 45 | + if (utils.isNotEmptyObject(child)) { | |
| 46 | + child.height = props.iHeight; | |
| 47 | + if (sCharType === 'sBar') { | |
| 48 | + /* 横向条形图 */ | |
| 49 | + content = <Bar {...child} />; | |
| 50 | + } else if (sCharType === 'sColumnar') { | |
| 51 | + /* 纵向条形图 */ | |
| 52 | + content = <Columnar {...child} />; | |
| 53 | + } else if (sCharType === 'sColumnarGroup') { | |
| 54 | + /* 纵向条形图 */ | |
| 55 | + content = <ColumnarGroup {...child} />; | |
| 56 | + } else if (sCharType === 'sBrokenLine') { | |
| 57 | + content = <BrokenLine {...child} />; | |
| 58 | + } else if (sCharType === 'sWaterWave') { | |
| 59 | + content = <WaterWave {...child} />; | |
| 60 | + } else if (sCharType === 'sGauge') { | |
| 61 | + content = <Gauge {...child} />; | |
| 62 | + } else if (sCharType === 'sColumnarStack') { | |
| 63 | + content = <ColumnarStack {...child} />; | |
| 64 | + } else if (sCharType === 'sPieGroup') { | |
| 65 | + content = <PieGroup {...child} />; | |
| 66 | + } else if (sCharType === 'sPie') { | |
| 67 | + content = <Pie {...child} />; | |
| 68 | + } else if (sCharType === 'TimeLineGroup') { | |
| 69 | + content = <TimeLineGroup {...child} />; | |
| 70 | + } else if (sCharType === 'commonList') { | |
| 71 | + content = <CommonList {...child} />; | |
| 72 | + } else if (sCharType === 'ColorBlock') { | |
| 73 | + content = <ColorBlock {...child} />; | |
| 74 | + } | |
| 75 | + } | |
| 76 | + return content; | |
| 77 | + }; | |
| 78 | + | |
| 79 | + handleExtra = (menuTypeId) => { | |
| 80 | + const { charMenu } = this.state; | |
| 81 | + let content = ''; | |
| 82 | + if (charMenu !== undefined && charMenu !== null) { | |
| 83 | + const index = charMenu.findIndex(item => item.sId === menuTypeId); | |
| 84 | + if (index > -1) { | |
| 85 | + const { childConfig, radioType } = charMenu[index]; | |
| 86 | + const props = { ...this.state, index }; | |
| 87 | + content = ( | |
| 88 | + <Radio.Group value={radioType} onChange={e => this.handleChangeType(e, props)}> | |
| 89 | + { | |
| 90 | + childConfig.map((item) => { | |
| 91 | + const { sTypeValue, showName, sId } = item; | |
| 92 | + return ( | |
| 93 | + <Radio.Button value={sTypeValue} key={sId}>{showName}</Radio.Button> | |
| 94 | + ); | |
| 95 | + }) | |
| 96 | + } | |
| 97 | + </Radio.Group>); | |
| 98 | + } | |
| 99 | + } | |
| 100 | + return content; | |
| 101 | + }; | |
| 102 | + | |
| 103 | + handleChangeType = (e, props) => { | |
| 104 | + const { charMenu, charConfigAndData, index } = props; | |
| 105 | + const { childConfig } = charMenu[index]; | |
| 106 | + const radioType = e.target.value; /* 更改后的菜单 */ | |
| 107 | + charMenu[index].radioType = radioType; | |
| 108 | + this.setState({ charMenu }); | |
| 109 | + const each = charConfigAndData[index]; /* 当前图表的配置 */ | |
| 110 | + const child = childConfig.filter(item => item.sType === 'searchType' && item.sTypeValue === radioType); | |
| 111 | + if (utils.isNotEmptyArr(child)) { | |
| 112 | + const { sName } = child[0]; | |
| 113 | + each.sSqlCondition = { | |
| 114 | + [sName]: radioType, | |
| 115 | + }; | |
| 116 | + } | |
| 117 | + this.props.onEachChar(each); | |
| 118 | + }; | |
| 119 | + | |
| 120 | + render() { | |
| 121 | + const { commonChar, commonCharPage, childChar, sModelsId } = this.state; | |
| 122 | + let { charConfigAndData } = this.state; | |
| 123 | + if (sModelsId !== null && sModelsId !== undefined && sModelsId.toString() === '11811781131121915101184660940') { | |
| 124 | + charConfigAndData = []; | |
| 125 | + return ( | |
| 126 | + <Row className={commonChar} gutter={[24, 24]} span="24" style={{ maxHeight: '100vh', overflowY: 'auto' }}> | |
| 127 | + { | |
| 128 | + charConfigAndData.map((itemChar) => { | |
| 129 | + const { showName, sId, iWidth, iOrder, childConfig } = itemChar; | |
| 130 | + const extra = utils.isNotEmptyArr(childConfig) ? this.handleExtra(sId) : null; | |
| 131 | + return ( | |
| 132 | + <Col span={iWidth} key={sId} order={iOrder}> | |
| 133 | + <Card className={`${childChar} commonCharContainer`} title={showName} extra={extra}> | |
| 134 | + {this.handleChar(itemChar)} | |
| 135 | + </Card> | |
| 136 | + </Col> | |
| 137 | + ); | |
| 138 | + }) | |
| 139 | + } | |
| 140 | + </Row> | |
| 141 | + ); | |
| 142 | + } else { | |
| 143 | + return ( | |
| 144 | + <Row type="flex" className={this.props.indexCenter ? commonChar : `${commonChar} ${commonCharPage}`} gutter={[24, 24]} style={{ maxHeight: '100vh', overflowY: 'auto' }}> | |
| 145 | + { | |
| 146 | + charConfigAndData.map((itemChar) => { | |
| 147 | + const { showName, sId, iWidth, iOrder, childConfig } = itemChar; | |
| 148 | + const extra = utils.isNotEmptyArr(childConfig) ? this.handleExtra(sId) : null; | |
| 149 | + return ( | |
| 150 | + <Col span={iWidth} key={sId} order={iOrder}> | |
| 151 | + <Card className={`${childChar} commonCcommonCharContainerhar`} title={showName} extra={extra}> | |
| 152 | + {this.handleChar(itemChar)} | |
| 153 | + </Card> | |
| 154 | + </Col> | |
| 155 | + ); | |
| 156 | + }) | |
| 157 | + } | |
| 158 | + </Row> | |
| 159 | + ); | |
| 160 | + } | |
| 161 | + } | |
| 162 | +} | |
| 163 | + | |
| 164 | +export default baseChar(CommonChar); | ... | ... |
src/components/CommonChar/CommonRollChar.js
0 → 100644
| 1 | +/* eslint-disable object-curly-newline */ | |
| 2 | +import React, { Component } from 'react'; | |
| 3 | +import { Card, Row, Col, Radio } from 'antd-v4'; | |
| 4 | +import baseChar from '../Common/baseChar'; /* 获取图表配置及数据 */ | |
| 5 | +import styles from '../Charts/index.less'; | |
| 6 | +import * as commonUtils from '../../utils/utils'; | |
| 7 | +import CommonList from '../Common/CommonList'; | |
| 8 | +import Bar from '../Charts/Bar'; | |
| 9 | +import Columnar from '../Charts/Columnar'; | |
| 10 | +import ColumnarGroup from '../Charts/ColumnarGroup'; | |
| 11 | +import BrokenLine from '../Charts/BrokenLine'; | |
| 12 | +import WaterWave from '../Charts/WaterWave'; | |
| 13 | +import Gauge from '../Charts/Gauge'; | |
| 14 | +import ColumnarStack from '../Charts/ColumnarStack'; | |
| 15 | +import PieGroup from '../Charts/PieGroup'; | |
| 16 | +import Pie from '../Charts/Pie'; | |
| 17 | +import TimeLineGroup from '../Charts/TimeLineGroup'; | |
| 18 | +import ColorBlock from '../Charts/ColorBlock'; | |
| 19 | + | |
| 20 | + | |
| 21 | +class CommonRollChar extends Component { | |
| 22 | + constructor(props) { | |
| 23 | + super(props); | |
| 24 | + this.state = { | |
| 25 | + ...props, | |
| 26 | + commonChar: styles.commonChar, | |
| 27 | + childChar: styles.childChar, | |
| 28 | + }; | |
| 29 | + } | |
| 30 | + | |
| 31 | + componentWillMount() { | |
| 32 | + this.timer = setInterval(() => { | |
| 33 | + const pageNum = commonUtils.isEmpty(this.props.pageNum) ? 2 : this.props.pageNum + 1; | |
| 34 | + this.props.onGetData({ ...this.props }, pageNum); | |
| 35 | + }, 10000); | |
| 36 | + } | |
| 37 | + | |
| 38 | + componentWillReceiveProps(nextProps) { | |
| 39 | + this.setState({ ...nextProps }); | |
| 40 | + } | |
| 41 | + handleChar = (props) => { | |
| 42 | + const { sCharType, child, iHeight } = props; | |
| 43 | + let content = ''; | |
| 44 | + if (commonUtils.isNotEmptyObject(child)) { | |
| 45 | + child.height = props.iHeight; | |
| 46 | + if (sCharType === 'sBar') { | |
| 47 | + /* 横向条形图 */ | |
| 48 | + content = <Bar {...child} />; | |
| 49 | + } else if (sCharType === 'sColumnar') { | |
| 50 | + /* 纵向条形图 */ | |
| 51 | + content = <Columnar {...child} />; | |
| 52 | + } else if (sCharType === 'sColumnarGroup') { | |
| 53 | + /* 纵向条形图 */ | |
| 54 | + content = <ColumnarGroup {...child} />; | |
| 55 | + } else if (sCharType === 'sBrokenLine') { | |
| 56 | + content = <BrokenLine {...child} />; | |
| 57 | + } else if (sCharType === 'sWaterWave') { | |
| 58 | + content = <WaterWave {...child} />; | |
| 59 | + } else if (sCharType === 'sGauge') { | |
| 60 | + content = <Gauge {...child} />; | |
| 61 | + } else if (sCharType === 'sColumnarStack') { | |
| 62 | + content = <ColumnarStack {...child} />; | |
| 63 | + } else if (sCharType === 'sPieGroup') { | |
| 64 | + content = <PieGroup {...child} />; | |
| 65 | + } else if (sCharType === 'sPie') { | |
| 66 | + content = <Pie {...child} />; | |
| 67 | + } else if (sCharType === 'TimeLineGroup') { | |
| 68 | + content = <TimeLineGroup {...child} />; | |
| 69 | + } else if (sCharType === 'ColorBlock') { | |
| 70 | + content = <ColorBlock {...child} />; | |
| 71 | + } | |
| 72 | + } else if (sCharType === 'commonList') { | |
| 73 | + const listProps = { ...this.props, ...child, formRoute: 'commonList', isSmall: true, iHeight, sModelsId: props.sActiveId, pageNum: this.state.pageNum, onToFirst: this.props.onToFirst }; | |
| 74 | + content = <div className="commonRollChar"><CommonList {...listProps} /></div>; | |
| 75 | + } | |
| 76 | + return content; | |
| 77 | + }; | |
| 78 | + | |
| 79 | + handleExtra = (menuTypeId) => { | |
| 80 | + const { charMenu } = this.state; | |
| 81 | + let content = ''; | |
| 82 | + const index = charMenu.findIndex(item => item.sId === menuTypeId); | |
| 83 | + if (index > -1) { | |
| 84 | + const { childConfig, radioType } = charMenu[index]; | |
| 85 | + const props = { ...this.state, index }; | |
| 86 | + content = ( | |
| 87 | + <Radio.Group value={radioType} onChange={e => this.handleChangeType(e, props)}> | |
| 88 | + { | |
| 89 | + childConfig.map((item) => { | |
| 90 | + const { sTypeValue, showName, sId } = item; | |
| 91 | + return ( | |
| 92 | + <Radio.Button value={sTypeValue} key={sId}>{showName}</Radio.Button> | |
| 93 | + ); | |
| 94 | + }) | |
| 95 | + } | |
| 96 | + </Radio.Group>); | |
| 97 | + } | |
| 98 | + return content; | |
| 99 | + }; | |
| 100 | + | |
| 101 | + handleChangeType = (e, props) => { | |
| 102 | + const { charMenu, charConfigAndData, index } = props; | |
| 103 | + const { childConfig } = charMenu[index]; | |
| 104 | + const radioType = e.target.value; /* 更改后的菜单 */ | |
| 105 | + charMenu[index].radioType = radioType; | |
| 106 | + this.setState({ charMenu }); | |
| 107 | + const each = charConfigAndData[index]; /* 当前图表的配置 */ | |
| 108 | + const child = childConfig.filter(item => item.sType === 'searchType' && item.sTypeValue === radioType); | |
| 109 | + if (commonUtils.isNotEmptyArr(child)) { | |
| 110 | + const { sName } = child[0]; | |
| 111 | + each.sSqlCondition = { | |
| 112 | + [sName]: radioType, | |
| 113 | + }; | |
| 114 | + } | |
| 115 | + this.props.onEachChar(each); | |
| 116 | + }; | |
| 117 | + | |
| 118 | + render() { | |
| 119 | + const { charConfigAndData, commonChar, childChar, sModelsId } = this.state; | |
| 120 | + if (sModelsId !== null && sModelsId !== undefined && sModelsId.toString() === '11811781131121915101184660940') { | |
| 121 | + return ( | |
| 122 | + <Col className={commonChar} gutter={24} span="24" style={{ maxHeight: '700px', overflowY: 'auto' }}> | |
| 123 | + { | |
| 124 | + charConfigAndData.map((itemChar) => { | |
| 125 | + const { showName, sId, iWidth, iOrder, childConfig } = itemChar; | |
| 126 | + const extra = commonUtils.isNotEmptyArr(childConfig) ? this.handleExtra(sId) : null; | |
| 127 | + return ( | |
| 128 | + <Col span={iWidth} key={sId} order={iOrder}> | |
| 129 | + <Card id="commonChar" className={childChar} title={showName} extra={extra}> | |
| 130 | + {this.handleChar(itemChar)} | |
| 131 | + </Card> | |
| 132 | + </Col> | |
| 133 | + ); | |
| 134 | + }) | |
| 135 | + } | |
| 136 | + </Col> | |
| 137 | + ); | |
| 138 | + } else { | |
| 139 | + return ( | |
| 140 | + <Row type="flex" className={commonChar} gutter={24} style={{ maxHeight: '700px' }}> | |
| 141 | + { | |
| 142 | + charConfigAndData.map((itemChar) => { | |
| 143 | + const { showName, sId, iWidth, iOrder, childConfig } = itemChar; | |
| 144 | + const extra = commonUtils.isNotEmptyArr(childConfig) ? this.handleExtra(sId) : null; | |
| 145 | + return ( | |
| 146 | + <Col span={iWidth} key={sId} order={iOrder}> | |
| 147 | + <Card id="commonChar" className={childChar} title={showName} extra={extra}> | |
| 148 | + {this.handleChar(itemChar)} | |
| 149 | + </Card> | |
| 150 | + </Col> | |
| 151 | + ); | |
| 152 | + }) | |
| 153 | + } | |
| 154 | + </Row> | |
| 155 | + ); | |
| 156 | + } | |
| 157 | + } | |
| 158 | +} | |
| 159 | + | |
| 160 | +export default baseChar(CommonRollChar); | ... | ... |
src/components/Tab/index.less
src/routes/commonChar/commonChar.js
0 → 100644
| 1 | +import React from 'react'; | |
| 2 | +import { connect } from 'umi'; | |
| 3 | +import CommonCharComponent from '../../components/CommonChar/CommonChar'; | |
| 4 | + | |
| 5 | +function CommonChar({ dispatch, app, content }) { | |
| 6 | + const commonChar = { | |
| 7 | + app, | |
| 8 | + content, | |
| 9 | + dispatch, | |
| 10 | + }; | |
| 11 | + | |
| 12 | + return ( | |
| 13 | + <CommonCharComponent {...commonChar} /> | |
| 14 | + ); | |
| 15 | +} | |
| 16 | + | |
| 17 | +export default connect(({ app, content }) => | |
| 18 | + ({ app, content }))(CommonChar); | ... | ... |
src/routes/commonChar/commonRollChar.js
0 → 100644
| 1 | +import React from 'react'; | |
| 2 | +import { connect } from 'umi'; | |
| 3 | +import CommonRollCharComponent from '../../components/CommonChar/CommonRollChar'; | |
| 4 | + | |
| 5 | +function CommonRollChar({ | |
| 6 | + dispatch, app, content, location, | |
| 7 | +}) { | |
| 8 | + const commonRollChar = { | |
| 9 | + app, | |
| 10 | + content, | |
| 11 | + dispatch, | |
| 12 | + routing: location, | |
| 13 | + sModelsId: '101251240115015960989066790', | |
| 14 | + }; | |
| 15 | + | |
| 16 | + return ( | |
| 17 | + <CommonRollCharComponent {...commonRollChar} /> | |
| 18 | + ); | |
| 19 | +} | |
| 20 | + | |
| 21 | +export default connect(({ app, content }) => | |
| 22 | + ({ app, content }))(CommonRollChar); | ... | ... |