页面调整优化

hongjli

2025-06-16 90b3b6329fec3205b845198ca6dc539dcde186c8

 src/app/supply-chain-chat/page.tsx

@@ -1,6 +1,6 @@
'use client';

import { useState, useEffect, useRef, useCallback, useContext, createContext } from 'react';
import { useState, useEffect, useRef, useCallback, useContext, createContext, Suspense } from 'react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import Image from 'next/image';
@@ -83,7 +83,7 @@
提供成本相关数据，获取成本优化建议和财务影响评估。

系统将基于实时数据和AI算法，为您提供专业的分析报告和决策建议。`,
  dataDescription: '本场景整合了OMS、ERP、WMS等多个系统的实时数据，通过AI算法进行深度分析。以下为新能源行业的模拟数据，实际应用中将自动对接企业现有系统。',
  dataDescription: '本场景整合了OMS、WMS等多个系统的实时数据，通过AI算法进行深度分析。以下为新能源行业的模拟数据，实际应用中将自动对接企业现有系统。',
  exampleData: `
### 订单需求数据 (OMS系统)

@@ -93,15 +93,6 @@
| SO20250201002 | NEV-Motor-B | 200 | 蔚来汽车 | 2025-02-20 | 中 | 1,800,000 |
| SO20250201003 | NEV-Controller-C | 300 | 理想汽车 | 2025-02-25 | 高 | 3,200,000 |
| SO20250201004 | NEV-Charger-D | 150 | 小鹏汽车 | 2025-03-01 | 中 | 1,200,000 |

### 生产工单数据 (ERP系统)

| 工单号 | 产品型号 | 计划数量 | 已完成数量 | 生产状态 | 预计完成时间 | 生产线 |
| :--: | :--: | :--: | :--: | :--: | :--: | :--: |
| WO20250201001 | NEV-Battery-A | 600 | 350 | 进行中 | 2025-02-12 | 产线1 |
| WO20250201002 | NEV-Motor-B | 250 | 180 | 进行中 | 2025-02-18 | 产线2 |
| WO20250201003 | NEV-Controller-C | 200 | 50 | 计划中 | 2025-02-22 | 产线3 |
| WO20250201004 | NEV-Charger-D | 100 | 0 | 待排产 | 2025-02-28 | 产线4 |

### 库存数据 (WMS系统)

@@ -121,14 +112,23 @@
| 地平线 | 控制芯片 | 92% | 99.8% | 中 | 低 |
| 特来电 | 充电模块 | 85% | 97.5% | 高 | 中 |

### 产能数据
### 生产计划数据

| 生产线 | 日产能 | 当前利用率 | 瓶颈工序 | 可调配产能 | 维护计划 |
| 计划单ID | 计划单号 | 料号 | 计划数量 | 计划开始日期 | 计划结束日期 |
| :--: | :--: | :--: | :--: | :--: | :--: |
| 产线1 | 50台 | 85% | 组装 | 10台 | 2025-02-20 |
| 产线2 | 30台 | 75% | 测试 | 8台 | 2025-02-25 |
| 产线3 | 40台 | 60% | 焊接 | 15台 | 2025-03-01 |
| 产线4 | 25台 | 45% | 包装 | 12台 | 2025-03-05 |
| PP001 | PLAN20250201001 | TX-001 | 1000.00 | 2025-02-01 | 2025-02-15 |
| PP002 | PLAN20250201002 | TX-002 | 500.00 | 2025-02-05 | 2025-02-20 |
| PP003 | PLAN20250201003 | TX-003 | 750.00 | 2025-02-10 | 2025-02-25 |
| PP004 | PLAN20250201004 | TX-004 | 300.00 | 2025-02-15 | 2025-03-01 |

### 物料主数据

| 工厂代码 | 料号 | 物料描述 | 物料状态 | 物料模型 | 专业归属图号 | 版本 | 默认生产车间 | 是否关键物料 | 是否自制 | 集成日期 | 生效日期 | 失效日期 |
| :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: | :--: |
| PLANT001 | TX-001 | 变速箱壳体 | Active | 标准件 | 机械 | v1.0 | 车间A | 1 | 1 | 2025-01-01 00:00:00 | 2025-01-01 | 2025-12-31 |
| PLANT001 | TX-002 | 电机定子 | Active | 定制件 | 电气 | v2.0 | 车间B | 1 | 0 | 2025-01-02 00:00:00 | 2025-01-02 | 2025-12-31 |
| PLANT002 | TX-003 | 控制芯片 | Active | 标准件 | 电子 | v1.5 | 车间C | 0 | 0 | 2025-01-03 00:00:00 | 2025-01-03 | 2025-12-31 |
| PLANT002 | TX-004 | 充电模块 | Active | 定制件 | 电气 | v2.5 | 车间D | 1 | 1 | 2025-01-04 00:00:00 | 2025-01-04 | 2025-12-31 |
`
};

@@ -492,7 +492,8 @@
  );
}

export default function SupplyChainChatPage() {
// 创建一个独立的组件来处理useSearchParams
function SupplyChainChatContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [apiKey, setApiKey] = useState<string>('');
@@ -1155,12 +1156,12 @@
                <div className="flex flex-col items-center justify-center h-[400px] text-center">
                  <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2-2V7a2 2 0 012-2h2a2 2 0 002-2V3a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 002 2h2a2 2 0 012 2v2a2 2 0 00-2 2h-2a2 2 0 00-2 2v6a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2-2V7a2 2 0 012-2h2a2 2 0 002-2h2a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 002 2h2a2 2 0 012 2v2a2 2 0 00-2 2h-2a2 2 0 00-2 2v6a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                    </svg>
                  </div>
                  <h3 className="text-lg font-medium text-gray-900 mb-2">供应链全景洞察</h3>
                  <p className="text-gray-500 max-w-md">
                    欢迎使用供应链全景洞察系统！您可以咨询插单影响分析、生产计划优化、供应链风险评估等问题。
                    欢迎使用供应链全景洞察系统！您可以咨询生产计划与产能影响、供应协同能力、交付履约风险、成本与财务影响、供应链数据查询、供应链知识咨询等问题。
                  </p>
                </div>
              ) : (
@@ -1410,4 +1411,20 @@
      />
    </div>
  );
}

// 主导出组件，使用Suspense包装原有组件
export default function SupplyChainChatPage() {
  return (
    <Suspense fallback={
      <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white flex items-center justify-center">
        <div className="text-center">
          <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-gray-600">正在加载...</p>
        </div>
      </div>
    }>
      <SupplyChainChatContent />
    </Suspense>
  );
}