页面调整优化

hongjli

2025-06-05 05e55761058e2089e81fb93dd4000dc3f42f40b3

 src/app/ai-scene/chat/page.tsx

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

import { useState, useEffect } from 'react';
import { useState, useEffect, Suspense } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useSearchParams } from 'next/navigation';
import { useRouter } from 'next/navigation';
@@ -207,18 +207,120 @@
| S5 | 1005 | 16673976114@163.com |
`
  },
  {
    title: '供应链全景洞察',
    description: '通过AI Agent与APS的深度协同，将插单响应从"被动救火"升级为"预测-决策-执行"三位一体的智能运营模式，助力新能源业务增长。',
    imageUrl: '/images/333.png',
    chatbotId: 'SCPanoramaInsight',
    background: `供应链全景洞察系统是新一代智能供应链管理平台的核心引擎。该AI系统能够解决传统供应链管理中的四大关键问题：

**生产计划与产能影响评估：**
- 实时监控生产线状态，动态评估产能利用率
- 基于历史数据和实时订单，智能预测生产瓶颈
- 自动调整生产计划，最大化产能利用效率
- 提供多场景生产计划对比分析，辅助决策制定

**供应协同能力评估：**
- 实时追踪供应商交付状态，评估供应风险
- 智能分析供应商绩效，提供供应商优化建议
- 预测原材料需求，提前启动采购流程
- 构建供应链网络韧性模型，提升抗风险能力

**交付履约风险评估：**
- 基于订单、库存、生产进度进行综合风险评估
- 提前识别潜在延期风险，制定应对预案
- 实时跟踪交付进度，确保客户满意度
- 建立客户预期管理机制，提升服务体验

**成本与财务影响评估：**
- 全链路成本追踪，精确计算各环节成本构成
- 动态成本优化建议，降低整体运营成本
- 财务影响预测分析，支持商业决策
- ROI评估模型，量化改进措施的财务效益`,
    instructions: `您可以通过以下方式与供应链全景洞察系统互动：

**场景一：插单影响分析**
提供新订单信息，系统将从四个维度评估插单可行性和影响。

**场景二：生产计划优化**
描述当前生产状况，获取智能优化建议和风险预警。

**场景三：供应链风险评估**
输入供应商或原材料信息，获取供应风险分析和应对策略。

**场景四：成本优化分析**
提供成本相关数据，获取成本优化建议和财务影响评估。

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

| 订单号 | 产品型号 | 数量 | 客户名称 | 预期交付日期 | 优先级 | 订单金额 |
| :--: | :--: | :--: | :--: | :--: | :--: | :--: |
| SO20250201001 | NEV-Battery-A | 500 | 比亚迪 | 2025-02-15 | 高 | 2,500,000 |
| 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系统)

| 物料编码 | 物料名称 | 当前库存 | 安全库存 | 在途数量 | 预计到货时间 | 库位 |
| :--: | :--: | :--: | :--: | :--: | :--: | :--: |
| MAT001 | 锂电池芯 | 1,200 | 500 | 800 | 2025-02-10 | A区-01 |
| MAT002 | 电机定子 | 350 | 200 | 150 | 2025-02-12 | B区-02 |
| MAT003 | 控制芯片 | 180 | 100 | 200 | 2025-02-15 | C区-03 |
| MAT004 | 充电模块 | 95 | 50 | 100 | 2025-02-18 | D区-04 |

### 供应商绩效数据

| 供应商名称 | 供应物料 | 按时交付率 | 质量合格率 | 价格竞争力 | 风险等级 |
| :--: | :--: | :--: | :--: | :--: | :--: |
| 宁德时代 | 锂电池芯 | 95% | 99.5% | 高 | 低 |
| 汇川技术 | 电机定子 | 88% | 98.2% | 中 | 中 |
| 地平线 | 控制芯片 | 92% | 99.8% | 中 | 低 |
| 特来电 | 充电模块 | 85% | 97.5% | 高 | 中 |

### 产能数据

| 生产线 | 日产能 | 当前利用率 | 瓶颈工序 | 可调配产能 | 维护计划 |
| :--: | :--: | :--: | :--: | :--: | :--: |
| 产线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 |
`
  },
];

export default function AISceneChatPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AISceneChatContent />
    </Suspense>
  );
}

function AISceneChatContent() {
  const searchParams = useSearchParams();
  const sceneId = searchParams.get('scene');
  const sceneId = searchParams.get('scene') || searchParams.get('chatbotId');
  const router = useRouter();
  const [showDataPreview, setShowDataPreview] = useState(false);
  
  // 根据URL参数找到对应的场景
  const initialScene = defaultServices.find(s => s.chatbotId === sceneId) || defaultServices[0];
  
  // 修改为使用完整的场景数据
  const [services] = useState([defaultServices.find(s => s.chatbotId === sceneId) || defaultServices[0]]);
  const [services] = useState([initialScene]);
  const [selectedScene, setSelectedScene] = useState(initialScene);
  const [iframeKey, setIframeKey] = useState(0);
  const [token, setToken] = useState<string | null>(null);
@@ -316,9 +418,11 @@
                  )}
                  <div className="flex items-center relative z-10">
                    <div className="w-8 h-8 rounded-lg overflow-hidden mr-3 relative flex-shrink-0">
                      <img 
                      <Image 
                        src={scene.imageUrl} 
                        alt={scene.title}
                        width={32}
                        height={32}
                        className="w-full h-full object-cover transform transition-transform duration-700 group-hover:scale-110"
                      />
                      <div className="absolute inset-0 bg-gradient-to-br from-black/20 to-transparent"></div>
@@ -384,7 +488,8 @@
            {/* 数据说明 - 只在补料和插单场景显示 */}
            {(selectedScene.chatbotId === 'JELkWpPLHQfRNhEH' || 
              selectedScene.chatbotId === 'RhMYLHI1SZNiX4kl' ||
              selectedScene.chatbotId === 'zO9YQDEHdIApG9zC') && (
              selectedScene.chatbotId === 'zO9YQDEHdIApG9zC' ||
              selectedScene.chatbotId === 'SCPanoramaInsight') && (
              <>
                <div className="bg-gray-50 rounded-lg p-4 border border-gray-100 hover:border-gray-200 transition-colors duration-300 shadow-sm">
                  <div className="flex items-center justify-between mb-2">
@@ -413,7 +518,8 @@
                  isOpen={showDataPreview}
                  onClose={() => setShowDataPreview(false)}
                  markdownContent={selectedScene.exampleData || ''}
                  sceneType={selectedScene.chatbotId === 'JELkWpPLHQfRNhEH' ? 'buliao' : 'chadan'}
                  sceneType={selectedScene.chatbotId === 'JELkWpPLHQfRNhEH' ? 'buliao' : 
                           selectedScene.chatbotId === 'SCPanoramaInsight' ? 'panorama' : 'chadan'}
                />
              </>
            )}