adspecs 0.1.18 → 0.1.19

package/references/antd-front-demo/src/pages/aps/plan/components/CuttingPlanVisualization.tsx

@@ -1,821 +0,0 @@
-import { useMemo } from 'react';
-import { Card, Tag, Space, Typography, Row, Col, Statistic } from 'antd';
-import { useTranslation } from 'react-i18next';
-import type { PlanDetailVO, SmallCoilVO } from '@/types/aps/plan';
-
-const { Text } = Typography;
-
-interface CuttingPlanVisualizationProps {
-  plan: PlanDetailVO;
-}
-
-interface Region {
-  index: number;
-  startY: number;   // 沿母卷长度方向（Y 轴）的起始位置
-  endY: number;     // 沿母卷长度方向（Y 轴）的结束位置
-  length: number;
-  verticalCuts: number[];
-  strips: Strip[];
-}
-
-interface Strip {
-  x: number;        // 沿母卷宽度方向（X 轴）的起始位置
-  width: number;    // 窄条宽度（沿 X 轴）
-  smallCoil?: SmallCoilVO;
-  isWasteEdge: boolean;
-}
-
-// 订单颜色映射（全局缓存）
-const ORDER_COLORS: Record<string, string> = {};
-const COLOR_PALETTE = [
-  '#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1',
-  '#13c2c2', '#eb2f96', '#fa8c16', '#a0d911', '#2f54eb',
-];
-let colorIndex = 0;
-
-function getOrderColor(orderId: string | undefined): string {
-  if (!orderId) return '#bfbfbf';
-  if (!ORDER_COLORS[orderId]) {
-    ORDER_COLORS[orderId] = COLOR_PALETTE[colorIndex % COLOR_PALETTE.length];
-    colorIndex++;
-  }
-  return ORDER_COLORS[orderId];
-}
-
-// 区域背景色（浅色）
-const REGION_BG_COLORS = [
-  'rgba(24, 144, 255, 0.06)',
-  'rgba(82, 196, 26, 0.06)',
-  'rgba(250, 173, 20, 0.06)',
-  'rgba(114, 46, 209, 0.06)',
-  'rgba(19, 194, 194, 0.06)',
-];
-
-const CuttingPlanVisualization: React.FC<CuttingPlanVisualizationProps> = ({ plan }) => {
-  const { t } = useTranslation('aps/plan');
-
-  // 必须在 useMemo 之前声明，因为 useMemo 内部引用了 coilWidth
-  const coilWidth = plan.coilWidth || 1500;
-
-  const visualizationData = useMemo(() => {
-    // 解析竖切切点（每个区域一组）—— 竖切沿母卷宽度方向切割
-    const verticalCutsByRegion = plan.verticalCuts.split(';').map(s =>
-      s.split(',').map(n => parseFloat(n.trim())).filter(n => !isNaN(n))
-    );
-
-    // 解析横切切点 —— 横切沿母卷长度方向切割，将母卷分为多个区域
-    const horizontalCuts = plan.horizontalCuts
-      ? plan.horizontalCuts.split(',').map(n => parseFloat(n.trim())).filter(n => !isNaN(n))
-      : [];
-
-    // 工艺参数（假设值）
-    const headWaste = 100; // 废头 mm
-    const tailWaste = 100; // 废尾 mm
-    const cutHeadLength = 200; // 切头 mm
-
-    // 构建区域数据（竖向布局：区域沿 Y 轴排列）
-    const regions: Region[] = [];
-    let currentY = headWaste; // 从废头之后开始
-
-    for (let i = 0; i < verticalCutsByRegion.length; i++) {
-      const verticalCuts = verticalCutsByRegion[i];
-
-      // 计算区域结束位置（长度方向）
-      let regionEndY: number;
-      if (i < horizontalCuts.length) {
-        regionEndY = horizontalCuts[i];
-      } else {
-        // 最后一个区域，根据小卷长度估算
-        const regionCoils = plan.smallCoils.filter(sc => sc.region === i + 1);
-        const avgLength = regionCoils.length > 0
-          ? regionCoils.reduce((sum, sc) => sum + sc.length, 0) / regionCoils.length
-          : 100000;
-        regionEndY = currentY + avgLength;
-      }
-
-      const regionLength = regionEndY - currentY;
-
-      // 构建窄条（竖切沿宽度方向，窄条在 X 轴上排列）
-      const strips: Strip[] = [];
-
-      // 左废边：从母卷左边缘(0)到第一个竖切切点
-      const leftWasteWidth = verticalCuts[0];
-      strips.push({
-        x: 0,
-        width: leftWasteWidth,
-        isWasteEdge: true,
-      });
-
-      // 有效窄条：相邻竖切切点之间的所有窄条
-      for (let j = 0; j < verticalCuts.length - 1; j++) {
-        const x = verticalCuts[j];
-        const stripWidth = verticalCuts[j + 1] - x;
-
-        // 查找对应的小卷
-        const smallCoil = plan.smallCoils.find(sc =>
-          sc.region === i + 1 &&
-          Math.abs(sc.width - stripWidth) < 1
-        );
-
-        strips.push({ x, width: stripWidth, smallCoil, isWasteEdge: false });
-      }
-
-      // 右侧区域：从最后一个竖切切点到母卷右边缘
-      const lastCutPos = verticalCuts[verticalCuts.length - 1];
-      const rightAreaWidth = coilWidth - lastCutPos;
-
-      // 判断右侧是废边还是未分配区域
-      // 如果宽度 <= 参数A（假设 10mm），则认为是右废边
-      const EDGE_WASTE_THRESHOLD = 15; // 废边宽度阈值
-      const isRightWaste = rightAreaWidth <= EDGE_WASTE_THRESHOLD;
-
-      if (isRightWaste) {
-        // 右废边
-        strips.push({
-          x: lastCutPos,
-          width: rightAreaWidth,
-          isWasteEdge: true,
-        });
-      } else {
-        // 未分配区域（右侧剩余宽度）
-        strips.push({
-          x: lastCutPos,
-          width: rightAreaWidth,
-          smallCoil: undefined,
-          isWasteEdge: false,
-        });
-      }
-
-      regions.push({
-        index: i,
-        startY: currentY,
-        endY: regionEndY,
-        length: regionLength,
-        verticalCuts,
-        strips,
-      });
-
-      currentY = regionEndY;
-
-      // 添加切头（除最后一个区域外）
-      if (i < verticalCutsByRegion.length - 1) {
-        currentY += cutHeadLength;
-      }
-    }
-
-    const totalLength = currentY + tailWaste;
-
-    return {
-      regions,
-      horizontalCuts,
-      headWaste,
-      tailWaste,
-      cutHeadLength,
-      totalLength,
-    };
-  }, [plan, coilWidth]);
-
-  // SVG 参数 —— 竖向布局
-
-  // 竖向布局：X 轴 = 母卷宽度方向，Y 轴 = 母卷长度方向
-  const containerWidth = 800; // viewBox 宽度
-  const padding = { top: 50, right: 80, bottom: 50, left: 50 };
-
-  // X 方向缩放（宽度方向）
-  const availableWidth = containerWidth - padding.left - padding.right;
-  const scaleX = availableWidth / coilWidth;
-  const drawingWidth = coilWidth * scaleX;
-
-  // Y 方向缩放（长度方向）—— 使用较小的缩放比，保持合理高度
-  // 目标：总长度映射到约 500px
-  const targetDrawingHeight = 500;
-  const scaleY = targetDrawingHeight / visualizationData.totalLength;
-  const drawingHeight = visualizationData.totalLength * scaleY;
-
-  const svgHeight = drawingHeight + padding.top + padding.bottom;
-  const offsetX = padding.left;
-  const offsetY = padding.top;
-
-  // 获取订单列表（用于图例）
-  const orderList = useMemo(() => {
-    const orders = new Set<string>();
-    plan.smallCoils.forEach(sc => {
-      if (sc.orderId) orders.add(sc.orderId);
-    });
-    return Array.from(orders).sort();
-  }, [plan.smallCoils]);
-
-  // 统计信息
-  const stats = useMemo(() => {
-    const assignedCoils = plan.smallCoils.filter(sc => sc.orderId);
-    const unassignedCoils = plan.smallCoils.filter(sc => !sc.orderId);
-    const totalWeight = plan.smallCoils.reduce((sum, sc) => sum + sc.weight, 0);
-    const assignedWeight = assignedCoils.reduce((sum, sc) => sum + sc.weight, 0);
-
-    return {
-      totalCoils: plan.smallCoils.length,
-      assignedCoils: assignedCoils.length,
-      unassignedCoils: unassignedCoils.length,
-      totalWeight,
-      assignedWeight,
-      assignmentRate: totalWeight > 0 ? (assignedWeight / totalWeight * 100) : 0,
-    };
-  }, [plan.smallCoils]);
-
-  return (
-    <Card title={t('visualization')} style={{ marginTop: 16 }}>
-      <Space direction="vertical" style={{ width: '100%' }} size="large">
-        {/* 统计信息 */}
-        <Row gutter={16}>
-          <Col span={4}>
-            <Statistic title={t('coilId')} value={plan.coilId} styles={{ content: { fontSize: 16 } }} />
-          </Col>
-          <Col span={4}>
-            <Statistic title={t('coilWidth')} value={coilWidth} suffix="mm" styles={{ content: { fontSize: 16 } }} />
-          </Col>
-          <Col span={4}>
-            <Statistic title={t('coilWeight')} value={plan.coilWeight} suffix="吨" styles={{ content: { fontSize: 16 } }} />
-          </Col>
-          <Col span={3}>
-            <Statistic title={t('totalCuts')} value={plan.totalCuts} suffix="刀" styles={{ content: { fontSize: 16 } }} />
-          </Col>
-          <Col span={3}>
-            <Statistic
-              title={t('theoreticalUtilization')}
-              value={plan.theoreticalUtilization}
-              suffix="%"
-              precision={2}
-              styles={{ content: { fontSize: 16, color: '#52c41a' } }}
-            />
-          </Col>
-          <Col span={3}>
-            <Statistic
-              title="分配率"
-              value={stats.assignmentRate}
-              suffix="%"
-              precision={1}
-              styles={{ content: { fontSize: 16, color: stats.assignmentRate >= 90 ? '#52c41a' : '#faad14' } }}
-            />
-          </Col>
-          <Col span={3}>
-            <Statistic
-              title="小卷数"
-              value={stats.totalCoils}
-              suffix={`(${stats.assignedCoils}/${stats.unassignedCoils})`}
-              styles={{ content: { fontSize: 16 } }}
-            />
-          </Col>
-        </Row>
-
-        {/* SVG 竖向平面图 */}
-        <div style={{
-          width: '96%',
-          margin: '0 auto',
-          overflowY: 'auto',
-          background: '#fafafa',
-          padding: 16,
-          borderRadius: 4,
-          border: '1px solid #f0f0f0',
-        }}>
-          <svg
-            viewBox={`0 0 ${containerWidth} ${svgHeight}`}
-            width="100%"
-            style={{ display: 'block' }}
-          >
-            {/* 定义箭头标记 */}
-            <defs>
-              <marker id="arrowL" markerWidth="8" markerHeight="8" refX="0" refY="3" orient="auto">
-                <path d="M8,0 L0,3 L8,6" fill="#666" />
-              </marker>
-              <marker id="arrowR" markerWidth="8" markerHeight="8" refX="8" refY="3" orient="auto">
-                <path d="M0,0 L8,3 L0,6" fill="#666" />
-              </marker>
-              <marker id="arrowU" markerWidth="8" markerHeight="8" refX="3" refY="0" orient="auto">
-                <path d="M0,8 L3,0 L6,8" fill="#666" />
-              </marker>
-              <marker id="arrowD" markerWidth="8" markerHeight="8" refX="3" refY="8" orient="auto">
-                <path d="M0,0 L3,8 L6,0" fill="#666" />
-              </marker>
-            </defs>
-
-            {/* 母卷轮廓 */}
-            <rect
-              x={offsetX}
-              y={offsetY}
-              width={drawingWidth}
-              height={drawingHeight}
-              fill="#fff"
-              stroke="#333"
-              strokeWidth={2}
-            />
-
-            {/* ===== 废头区域（顶部） ===== */}
-            <rect
-              x={offsetX}
-              y={offsetY}
-              width={drawingWidth}
-              height={visualizationData.headWaste * scaleY}
-              fill="#f0f0f0"
-              stroke="#999"
-              strokeWidth={1}
-              strokeDasharray="5,5"
-            />
-            <text
-              x={offsetX + drawingWidth / 2}
-              y={offsetY + (visualizationData.headWaste * scaleY) / 2 - 5}
-              textAnchor="middle"
-              dominantBaseline="middle"
-              fontSize={10}
-              fill="#666"
-              fontWeight="bold"
-            >
-              废头
-            </text>
-            <text
-              x={offsetX + drawingWidth / 2}
-              y={offsetY + (visualizationData.headWaste * scaleY) / 2 + 8}
-              textAnchor="middle"
-              dominantBaseline="middle"
-              fontSize={9}
-              fill="#999"
-            >
-              {visualizationData.headWaste}mm
-            </text>
-
-            {/* ===== 废尾区域（底部） ===== */}
-            <rect
-              x={offsetX}
-              y={offsetY + drawingHeight - visualizationData.tailWaste * scaleY}
-              width={drawingWidth}
-              height={visualizationData.tailWaste * scaleY}
-              fill="#f0f0f0"
-              stroke="#999"
-              strokeWidth={1}
-              strokeDasharray="5,5"
-            />
-            <text
-              x={offsetX + drawingWidth / 2}
-              y={offsetY + drawingHeight - (visualizationData.tailWaste * scaleY) / 2 - 5}
-              textAnchor="middle"
-              dominantBaseline="middle"
-              fontSize={10}
-              fill="#666"
-              fontWeight="bold"
-            >
-              废尾
-            </text>
-            <text
-              x={offsetX + drawingWidth / 2}
-              y={offsetY + drawingHeight - (visualizationData.tailWaste * scaleY) / 2 + 8}
-              textAnchor="middle"
-              dominantBaseline="middle"
-              fontSize={9}
-              fill="#999"
-            >
-              {visualizationData.tailWaste}mm
-            </text>
-
-            {/* ===== 绘制各区域 ===== */}
-            {visualizationData.regions.map((region) => {
-              const regionY = offsetY + region.startY * scaleY;
-              const regionH = region.length * scaleY;
-              const bgColor = REGION_BG_COLORS[region.index % REGION_BG_COLORS.length];
-
-              return (
-                <g key={region.index}>
-                  {/* 区域背景 */}
-                  <rect
-                    x={offsetX}
-                    y={regionY}
-                    width={drawingWidth}
-                    height={regionH}
-                    fill={bgColor}
-                    stroke="none"
-                  />
-
-                  {/* 区域标签（左侧） */}
-                  <rect
-                    x={offsetX - 36}
-                    y={regionY + regionH / 2 - 10}
-                    width={30}
-                    height={20}
-                    fill="#1890ff"
-                    rx={3}
-                  />
-                  <text
-                    x={offsetX - 21}
-                    y={regionY + regionH / 2}
-                    textAnchor="middle"
-                    dominantBaseline="middle"
-                    fontSize={11}
-                    fill="#fff"
-                    fontWeight="bold"
-                  >
-                    R{region.index + 1}
-                  </text>
-
-                  {/* 区域长度标注（右侧） */}
-                  <text
-                    x={offsetX + drawingWidth + 8}
-                    y={regionY + regionH / 2}
-                    textAnchor="start"
-                    dominantBaseline="middle"
-                    fontSize={9}
-                    fill="#666"
-                  >
-                    {Math.round(region.length)}mm
-                  </text>
-
-                  {/* ===== 绘制窄条（沿 X 轴排列） ===== */}
-                  {region.strips.map((strip, stripIndex) => {
-                    const stripX = offsetX + strip.x * scaleX;
-                    const stripW = strip.width * scaleX;
-
-                    if (strip.isWasteEdge) {
-                      // 废边（左/右两侧）
-                      return (
-                        <g key={`waste-${stripIndex}`}>
-                          <rect
-                            x={stripX}
-                            y={regionY}
-                            width={stripW}
-                            height={regionH}
-                            fill="#e8e8e8"
-                            stroke="#bbb"
-                            strokeWidth={0.5}
-                            strokeDasharray="3,3"
-                          />
-                          {stripW > 12 && (
-                            <text
-                              x={stripX + stripW / 2}
-                              y={regionY + regionH / 2}
-                              textAnchor="middle"
-                              dominantBaseline="middle"
-                              fontSize={8}
-                              fill="#999"
-                              transform={`rotate(-90, ${stripX + stripW / 2}, ${regionY + regionH / 2})`}
-                            >
-                              废边 {strip.width}mm
-                            </text>
-                          )}
-                        </g>
-                      );
-                    } else {
-                      // 有效窄条
-                      const hasOrder = !!strip.smallCoil?.orderId;
-                      const color = hasOrder ? getOrderColor(strip.smallCoil!.orderId) : '#91caff';
-                      const showLabel = stripW > 20;
-                      const showDetail = stripW > 40 && regionH > 30;
-
-                      return (
-                        <g key={`strip-${stripIndex}`}>
-                          <rect
-                            x={stripX}
-                            y={regionY}
-                            width={stripW}
-                            height={regionH}
-                            fill={color}
-                            fillOpacity={hasOrder ? 0.35 : 0.25}
-                            stroke={color}
-                            strokeWidth={hasOrder ? 1.5 : 1}
-                            strokeDasharray={hasOrder ? 'none' : '4,2'}
-                          />
-                          {/* 窄条宽度标注 */}
-                          {showLabel && (
-                            <text
-                              x={stripX + stripW / 2}
-                              y={regionY + regionH / 2 - (showDetail ? 6 : 0)}
-                              textAnchor="middle"
-                              dominantBaseline="middle"
-                              fontSize={9}
-                              fill="#333"
-                              fontWeight="bold"
-                            >
-                              {strip.width}mm
-                            </text>
-                          )}
-                          {/* 订单标注 */}
-                          {hasOrder && showDetail && (
-                            <text
-                              x={stripX + stripW / 2}
-                              y={regionY + regionH / 2 + 8}
-                              textAnchor="middle"
-                              dominantBaseline="middle"
-                              fontSize={8}
-                              fill="#333"
-                            >
-                              {strip.smallCoil!.orderId}
-                            </text>
-                          )}
-                        </g>
-                      );
-                    }
-                  })}
-
-                  {/* ===== 竖切切点标注（沿 X 轴，垂直线） ===== */}
-                  {region.verticalCuts.map((cutPos, cutIndex) => {
-                    const cutX = offsetX + cutPos * scaleX;
-                    return (
-                      <g key={`vcut-${cutIndex}`}>
-                        {/* 竖切线（垂直线） */}
-                        <line
-                          x1={cutX}
-                          y1={regionY}
-                          x2={cutX}
-                          y2={regionY + regionH}
-                          stroke="#1890ff"
-                          strokeWidth={1}
-                          strokeDasharray="4,2"
-                          opacity={0.6}
-                        />
-                      </g>
-                    );
-                  })}
-
-                  {/* ===== 横切线（区域分隔线，水平线） ===== */}
-                  {region.index > 0 && (
-                    <g>
-                      <line
-                        x1={offsetX - 6}
-                        y1={regionY}
-                        x2={offsetX + drawingWidth + 6}
-                        y2={regionY}
-                        stroke="#f5222d"
-                        strokeWidth={2.5}
-                        strokeDasharray="6,3"
-                      />
-                      {/* 横切标记 */}
-                      <circle cx={offsetX - 6} cy={regionY} r={3} fill="#f5222d" />
-                      <circle cx={offsetX + drawingWidth + 6} cy={regionY} r={3} fill="#f5222d" />
-                      {/* 横切位置标注 */}
-                      {visualizationData.horizontalCuts[region.index - 1] !== undefined && (
-                        <text
-                          x={offsetX + drawingWidth + 45}
-                          y={regionY}
-                          textAnchor="start"
-                          dominantBaseline="middle"
-                          fontSize={8}
-                          fill="#f5222d"
-                          fontWeight="bold"
-                        >
-                          H{region.index}:{visualizationData.horizontalCuts[region.index - 1]}
-                        </text>
-                      )}
-                      {/* 切头标注 */}
-                      {visualizationData.cutHeadLength > 0 && (
-                        <>
-                          <rect
-                            x={offsetX}
-                            y={regionY - visualizationData.cutHeadLength * scaleY}
-                            width={drawingWidth}
-                            height={visualizationData.cutHeadLength * scaleY}
-                            fill="#fff1f0"
-                            stroke="#ffa39e"
-                            strokeWidth={0.5}
-                            strokeDasharray="3,3"
-                          />
-                          {visualizationData.cutHeadLength * scaleY > 12 && (
-                            <text
-                              x={offsetX + drawingWidth / 2}
-                              y={regionY - (visualizationData.cutHeadLength * scaleY) / 2}
-                              textAnchor="middle"
-                              dominantBaseline="middle"
-                              fontSize={8}
-                              fill="#f5222d"
-                            >
-                              切头 {visualizationData.cutHeadLength}mm
-                            </text>
-                          )}
-                        </>
-                      )}
-                    </g>
-                  )}
-                </g>
-              );
-            })}
-
-            {/* ===== 宽度尺寸标注（X 轴方向，底部） ===== */}
-            <line
-              x1={offsetX}
-              y1={offsetY + drawingHeight + 25}
-              x2={offsetX + drawingWidth}
-              y2={offsetY + drawingHeight + 25}
-              stroke="#666"
-              strokeWidth={1.5}
-              markerStart="url(#arrowL)"
-              markerEnd="url(#arrowR)"
-            />
-            <line
-              x1={offsetX}
-              y1={offsetY + drawingHeight + 20}
-              x2={offsetX}
-              y2={offsetY + drawingHeight + 30}
-              stroke="#666"
-              strokeWidth={1.5}
-            />
-            <line
-              x1={offsetX + drawingWidth}
-              y1={offsetY + drawingHeight + 20}
-              x2={offsetX + drawingWidth}
-              y2={offsetY + drawingHeight + 30}
-              stroke="#666"
-              strokeWidth={1.5}
-            />
-            <text
-              x={offsetX + drawingWidth / 2}
-              y={offsetY + drawingHeight + 38}
-              textAnchor="middle"
-              fontSize={11}
-              fill="#333"
-              fontWeight="bold"
-            >
-              宽度 {coilWidth} mm
-            </text>
-
-            {/* ===== 长度尺寸标注（Y 轴方向，右侧） ===== */}
-            <line
-              x1={offsetX + drawingWidth + 20}
-              y1={offsetY}
-              x2={offsetX + drawingWidth + 20}
-              y2={offsetY + drawingHeight}
-              stroke="#666"
-              strokeWidth={1.5}
-              markerStart="url(#arrowU)"
-              markerEnd="url(#arrowD)"
-            />
-            <line
-              x1={offsetX + drawingWidth + 15}
-              y1={offsetY}
-              x2={offsetX + drawingWidth + 25}
-              y2={offsetY}
-              stroke="#666"
-              strokeWidth={1.5}
-            />
-            <line
-              x1={offsetX + drawingWidth + 15}
-              y1={offsetY + drawingHeight}
-              x2={offsetX + drawingWidth + 25}
-              y2={offsetY + drawingHeight}
-              stroke="#666"
-              strokeWidth={1.5}
-            />
-            <text
-              x={offsetX + drawingWidth + 35}
-              y={offsetY + drawingHeight / 2}
-              textAnchor="middle"
-              dominantBaseline="middle"
-              fontSize={11}
-              fill="#333"
-              fontWeight="bold"
-              transform={`rotate(90, ${offsetX + drawingWidth + 35}, ${offsetY + drawingHeight / 2})`}
-            >
-              长度 {Math.round(visualizationData.totalLength)} mm
-            </text>
-
-            {/* ===== 方向标注 ===== */}
-            <text
-              x={offsetX + drawingWidth / 2}
-              y={offsetY - 15}
-              textAnchor="middle"
-              fontSize={10}
-              fill="#999"
-            >
-              ← 母卷宽度方向 →
-            </text>
-            <text
-              x={offsetX + drawingWidth + 55}
-              y={offsetY + drawingHeight / 2}
-              textAnchor="middle"
-              fontSize={10}
-              fill="#999"
-              transform={`rotate(90, ${offsetX + drawingWidth + 55}, ${offsetY + drawingHeight / 2})`}
-            >
-              ← 母卷长度方向 →
-            </text>
-          </svg>
-        </div>
-
-        {/* 图例 */}
-        <Card size="small" title="图例">
-          <Row gutter={[16, 8]}>
-            <Col span={6}>
-              <Space size={4}>
-                <svg width={24} height={14}>
-                  <line x1={0} y1={7} x2={24} y2={7} stroke="#f5222d" strokeWidth={2.5} strokeDasharray="6,3" />
-                </svg>
-                <Text>横切线（区域分隔）</Text>
-              </Space>
-            </Col>
-            <Col span={6}>
-              <Space size={4}>
-                <svg width={24} height={14}>
-                  <line x1={12} y1={0} x2={12} y2={14} stroke="#1890ff" strokeWidth={1} strokeDasharray="4,2" />
-                </svg>
-                <Text>竖切线（窄条分隔）</Text>
-              </Space>
-            </Col>
-            <Col span={6}>
-              <Space size={4}>
-                <div style={{ width: 24, height: 14, background: '#e8e8e8', border: '1px dashed #999' }} />
-                <Text>废边</Text>
-              </Space>
-            </Col>
-            <Col span={6}>
-              <Space size={4}>
-                <div style={{ width: 24, height: 14, background: '#f0f0f0', border: '1px dashed #999' }} />
-                <Text>废头 / 废尾</Text>
-              </Space>
-            </Col>
-            <Col span={6}>
-              <Space size={4}>
-                <div style={{ width: 24, height: 14, background: '#fff1f0', border: '1px dashed #ffa39e' }} />
-                <Text>切头</Text>
-              </Space>
-            </Col>
-            {orderList.map(orderId => (
-              <Col span={6} key={orderId}>
-                <Space size={4}>
-                  <div
-                    style={{
-                      width: 24,
-                      height: 14,
-                      background: getOrderColor(orderId),
-                      opacity: 0.35,
-                      border: `1.5px solid ${getOrderColor(orderId)}`,
-                    }}
-                  />
-                  <Text>{orderId}</Text>
-                </Space>
-              </Col>
-            ))}
-          </Row>
-        </Card>
-
-        {/* 订单分配详情 */}
-        <Card size="small" title="订单分配详情">
-          <Space wrap>
-            {orderList.map(orderId => {
-              const orderCoils = plan.smallCoils.filter(sc => sc.orderId === orderId);
-              const totalWeight = orderCoils.reduce((sum, sc) => sum + sc.weight, 0);
-              const regions = Array.from(new Set(orderCoils.map(sc => sc.region))).sort();
-              return (
-                <Tag key={orderId} color={getOrderColor(orderId)} style={{ padding: '4px 8px' }}>
-                  <Space size={4}>
-                    <span style={{ fontWeight: 'bold' }}>{orderId}</span>
-                    <span>{orderCoils.length}条</span>
-                    <span>{totalWeight.toFixed(2)}吨</span>
-                    <span style={{ fontSize: 11, color: '#666' }}>
-                      (R{regions.join(',R')})
-                    </span>
-                  </Space>
-                </Tag>
-              );
-            })}
-            {stats.unassignedCoils > 0 && (
-              <Tag style={{ padding: '4px 8px' }}>
-                <Space size={4}>
-                  <span style={{ fontWeight: 'bold' }}>未分配</span>
-                  <span>{stats.unassignedCoils}条</span>
-                  <span>
-                    {plan.smallCoils.filter(sc => !sc.orderId).reduce((sum, sc) => sum + sc.weight, 0).toFixed(2)}吨
-                  </span>
-                </Space>
-              </Tag>
-            )}
-          </Space>
-        </Card>
-
-        {/* 切点汇总 */}
-        <Row gutter={16}>
-          <Col span={12}>
-            <Card size="small" title={`竖切切点 (共 ${plan.verticalCuts.split(';').reduce((sum, s) => sum + s.split(',').length, 0)} 个)`}>
-              <Space wrap size={[8, 8]}>
-                {visualizationData.regions.map((region, idx) => (
-                  <Tag key={idx} color="blue">
-                    R{idx + 1}: [{region.verticalCuts.join(', ')}]
-                  </Tag>
-                ))}
-              </Space>
-            </Card>
-          </Col>
-          <Col span={12}>
-            <Card size="small" title={`横切切点 (共 ${visualizationData.horizontalCuts.length} 个)`}>
-              <Space wrap size={[8, 8]}>
-                {visualizationData.horizontalCuts.map((cut, idx) => (
-                  <Tag key={idx} color="red">
-                    H{idx + 1}: {cut}mm
-                  </Tag>
-                ))}
-                {visualizationData.horizontalCuts.length === 0 && (
-                  <Text type="secondary">无横切</Text>
-                )}
-              </Space>
-            </Card>
-          </Col>
-        </Row>
-      </Space>
-    </Card>
-  );
-};
-
-export default CuttingPlanVisualization;