adspecs 0.1.12

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

@@ -0,0 +1,821 @@
+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;