优化

hongjli

2025-04-11 a1b82d09dfd63d9caa82276bb359d23b1c206cb3

 src/app/ai-scene/page.tsx

@@ -2,76 +2,268 @@

import { useState } from 'react';
import Card from '@/components/Card';
import ChatDialog from '@/components/ChatDialog';
import Navbar from '@/components/layout/Navbar';
import SceneIntroDialog from '@/components/SceneIntroDialog';
import { motion } from 'framer-motion';

const services = [
  {
    title: '补料',
    description: '智能动态分析产线，工位的缺料情况，降低停线风险',
    imageUrl: '/images/kanban.jpg',
    chatbotId: 'JELkWpPLHQfRNhEH'
  },
  {
    title: '插单',
    description: '智能评估需求插单对产能，原材料和交付服务的影响，提升客户满意度',
    imageUrl: '/images/xuqiu.jpg',
    chatbotId: 'DfH4cIzujVGvn5iR'
  },
  {
    title: '科沃斯销售推荐小助手',
    description: '智能化产品推荐提升导购效率',
    imageUrl: '/images/robot.jpg',
    chatbotId: 'sUAviPXvcEIw3oQC'
  },
  {
    title: '库存管理知识库问答',
    description: '库存知识，提供专业的供应链库存知识问答',
    imageUrl: '/images/know.jpg',
    chatbotId: 'pDDfkU9HyBl2gzXx'
    chatbotId: 'pDDfkU9HyBl2gzXx',
    background: '高效的库存管理需要丰富的专业知识和经验。AI知识库整合了大量供应链和库存管理的专业知识，可以快速解答各类库存管理问题。',
    instructions: '您可以询问任何与库存管理相关的问题，包括库存策略、成本控制、周转率优化等，AI助手将为您提供专业的解答和建议。'
  },
  {
    title: '扫地机器人销售推荐小助手',
    description: '智能化产品推荐提升导购效率',
    imageUrl: '/images/robot.jpg',
    chatbotId: 'sUAviPXvcEIw3oQC',
    background: '面对不同客户的个性化需求，如何准确推荐合适的产品是提升销售效率的关键。AI助手基于深度学习算法，能够精准分析客户需求，提供个性化的产品推荐。',
    instructions: '您可以描述客户的具体需求和偏好，AI助手将根据这些信息，为您推荐最适合的产品，并提供专业的产品介绍和销售建议。'
  },
  {
    title: '补料',
    description: '智能动态分析产线，工位的缺料情况，降低停线风险',
    imageUrl: '/images/kanban.jpg',
    chatbotId: 'JELkWpPLHQfRNhEH',
    background: '在生产线运行过程中，及时发现并解决缺料问题是保证生产效率的关键。AI系统通过实时监控和分析，帮助您提前预警可能的缺料风险，优化补料计划。',
    instructions: '您可以描述具体的生产线情况和缺料问题，AI助手将基于历史数据和实时状态，为您提供最优的补料方案和建议。',
    exampleData: `
### 生产产品P时，详细工位的物料需求信息

| 工位 | 原材料需求 | 原材料消耗速率 | 生产的产品 | 产线名 |
| :--: | :--: | :--: | :--: | :--: |
| 1 | A1 | 2/小时 | P | 产线1 |
| 2 | A2 | 1/小时 | P | 产线1 |
| 3 | A3 | 2/小时 | P | 产线1 |
| 4 | A4 | 4/小时 | P | 产线1 |
| 5 | A5 | 5/小时 | P | 产线1 |
| 6 | - | - | P | 产线1 |
| 7 | A7 | 3/小时 | P | 产线1 |
| 8 | - | - | P | 产线1 |
| 9 | A9 | 3/小时 | P | 产线1 |

### 可以通过集成线边库存获取（IOT，传感器，ERP系统等），人工目视发现缺料或者物料较少时，人为触发（飞书，微信等IM工具上输入/语音，XX工位，XX物料缺料）
### 当前产线现场库存量

| 原材料 | 数量 | 产线名 |
| :--: | :--: | :--: |
| A1 | 10 | 产线1 |
| A2 | 10 | 产线1 |
| A3 | 10 | 产线1 |
| A4 | 10 | 产线1 |
| A5 | 10 | 产线1 |
| A6 | 10 | 产线1 |
| A7 | 10 | 产线1 |
| A8 | 10 | 产线1 |
| A9 | 10 | 产线1 |

### 需要通过ERP/WMS获取数据，若无法获取ERP/WMS系统数据，可直接由人工呼叫具体补货数量，生成仓库补货看板
### 当前原材料库中，存放库位和库存量

| 原材料 | 库位 | 数量 |
| :--: | :--: | :--: |
| A1 | 3-2 | 100 |
| A2 | 3-1 | 100 |
| A3 | 1-1 | 100 |
| A4 | 1-2 | 100 |
| A5 | 2-1 | 100 |
| A7 | 2-2 | 100 |
| A9 | 4-1 | 100 |
`
  },
  {
    title: '插单1.0',
    description: '智能评估需求插单对产能，原材料和交付服务的影响，提升客户满意度',
    imageUrl: '/images/xuqiu.jpg',
    chatbotId: 'RhMYLHI1SZNiX4kl',
    background: '在生产计划执行过程中，常常会遇到紧急订单需要插单的情况。AI系统可以快速评估插单对现有生产计划的影响，并提供最优的插单方案。',
    instructions: '请提供需要插单的订单信息，包括产品类型、数量和期望交付时间，AI助手将为您分析可行性并给出具体的插单建议。',
    exampleData: `
### 基础数据：产品：A，B，C
### A, B, C的BOM

| 产品 | 物料 | 物料单位用量 |
| :--: | :--: | :--: |
| A | 1001 | 1 |
| A | 1002 | 3 |
| A | 1003 | 3 |
| B | 1001 | 1 |
| B | 1002 | 2 |
| B | 1004 | 3 |
| C | 1005 | 1 |
| C | 1002 | 3 |
| C | 1003 | 2 |

### 需求数据

| 产品 | 需求数量 | 需求日期 | 需求单号 | 客户 | 单价 |
| :--: | :--: | :--: | :--: | :--: | :--: |
| A | 1000 | 2/2/2025 | A1001 | 中石油 | 100.0 |
| A | 200 | 3/2/2025 | A1002 | 中建二局 | 95.0 |
| A | 500 | 5/2/2025 | A1003 | 宝武集团 | 90.0 |
| B | 2000 | 3/2/2025 | B1001 | 中石油 | 95.0 |
| B | 300 | 4/2/2025 | B1002 | 中建二局 | 90.0 |
| B | 100 | 7/2/2025 | B1003 | 宝武集团 | 100.0 |
| C | 800 | 4/2/2025 | C1001 | 中石油 | 85.0 |
| C | 600 | 7/2/2025 | C1002 | 中建二局 | 90.0 |
| C | 400 | 8/2/2025 | C1003 | 宝武集团 | 90.0 |

### 假设当前日期是2月1日，计划开始日期是2月2日，当前有一个插单需求：

| 产品 | 需求数量 | 需求日期 | 需求单号 | 客户 | 单价 |
| :--: | :--: | :--: | :--: | :--: | :--: |
| A | 200 | 5/2/2025 | D1001 | 中石油 | 100.0 |

### 已有采购订单

| 供应商名称 | 物料 | 采购订单号 | 预计到货日期 | 采购数量 |
| :--: | :--: | :--: | :--: | :--: |
| S1 | 1001 | PO1 | 2/2/2025 | 2000 |
| S2 | 1002 | PO2 | 2/2/2025 | 1000 |
| S3 | 1003 | PO3 | 2/2/2025 | 1000 |
| S4 | 1004 | PO4 | 2/2/2025 | 800 |
| S5 | 1005 | PO5 | 2/2/2025 | 800 |

### 供应商列表

| 供应商名称 | 物料 | 联系方式 |
| :--: | :--: | :--: |
| S1 | 1001 | chenqinghonghs@163.com |
| S2 | 1002 | chenqinghonghs@163.com |
| S3 | 1003 | chenqinghonghs@163.com |
| S4 | 1004 | chenqinghonghs@163.com |
| S5 | 1005 | 16673976114@163.com |
`
  },
  {
    title: '插单2.0',
    description: '智能评估需求插单对产能，原材料和交付服务的影响，提升客户满意度',
    imageUrl: '/images/chadan2.jpg',
    chatbotId: 'zO9YQDEHdIApG9zC',
    background: '在生产计划执行过程中，常常会遇到紧急订单需要插单的情况。AI系统可以快速评估插单对现有生产计划的影响，并提供最优的插单方案。',
    instructions: '请提供需要插单的订单信息，包括产品类型、数量和期望交付时间，AI助手将为您分析可行性并给出具体的插单建议。',
    exampleData: `
### 基础数据：产品：A，B，C
### A, B, C的BOM

| 产品 | 物料 | 物料单位用量 |
| :--: | :--: | :--: |
| A | 1001 | 1 |
| A | 1002 | 3 |
| A | 1003 | 3 |
| B | 1001 | 1 |
| B | 1002 | 2 |
| B | 1004 | 3 |
| C | 1005 | 1 |
| C | 1002 | 3 |
| C | 1003 | 2 |

### 需求数据

| 产品 | 需求数量 | 需求日期 | 需求单号 | 客户 | 单价 |
| :--: | :--: | :--: | :--: | :--: | :--: |
| A | 1000 | 2/2/2025 | A1001 | 中石油 | 100.0 |
| A | 200 | 3/2/2025 | A1002 | 中建二局 | 95.0 |
| A | 500 | 5/2/2025 | A1003 | 宝武集团 | 90.0 |
| B | 2000 | 3/2/2025 | B1001 | 中石油 | 95.0 |
| B | 300 | 4/2/2025 | B1002 | 中建二局 | 90.0 |
| B | 100 | 7/2/2025 | B1003 | 宝武集团 | 100.0 |
| C | 800 | 4/2/2025 | C1001 | 中石油 | 85.0 |
| C | 600 | 7/2/2025 | C1002 | 中建二局 | 90.0 |
| C | 400 | 8/2/2025 | C1003 | 宝武集团 | 90.0 |

### 假设当前日期是2月1日，计划开始日期是2月2日，当前有一个插单需求：

| 产品 | 需求数量 | 需求日期 | 需求单号 | 客户 | 单价 |
| :--: | :--: | :--: | :--: | :--: | :--: |
| A | 200 | 5/2/2025 | D1001 | 中石油 | 100.0 |

### 已有采购订单

| 供应商名称 | 物料 | 采购订单号 | 预计到货日期 | 采购数量 |
| :--: | :--: | :--: | :--: | :--: |
| S1 | 1001 | PO1 | 2/2/2025 | 2000 |
| S2 | 1002 | PO2 | 2/2/2025 | 1000 |
| S3 | 1003 | PO3 | 2/2/2025 | 1000 |
| S4 | 1004 | PO4 | 2/2/2025 | 800 |
| S5 | 1005 | PO5 | 2/2/2025 | 800 |

### 供应商列表

| 供应商名称 | 物料 | 联系方式 |
| :--: | :--: | :--: |
| S1 | 1001 | chenqinghonghs@163.com |
| S2 | 1002 | chenqinghonghs@163.com |
| S3 | 1003 | chenqinghonghs@163.com |
| S4 | 1004 | chenqinghonghs@163.com |
| S5 | 1005 | 16673976114@163.com |
`
  }
];

export default function AIScenePage() {
  const [isChatOpen, setIsChatOpen] = useState(false);
  const [currentChatbot, setCurrentChatbot] = useState('');
  const [isIntroOpen, setIsIntroOpen] = useState(false);
  const [selectedScene, setSelectedScene] = useState(services[0]);

  const handleCardClick = (title: string, chatbotId?: string) => {
    if (chatbotId) {
      setCurrentChatbot(chatbotId);
      setIsChatOpen(true);
    }
  const handleCardClick = (service: typeof services[0]) => {
    setSelectedScene(service);
    setIsIntroOpen(true);
  };

  return (
    <>
      <Navbar />
      <div className="min-h-screen pt-16">
        <div className="flex-1 p-6 md:p-8 bg-gradient-to-b from-[var(--ai-surface)] to-white">
          <div className="max-w-7xl mx-auto">
            <div className="mb-8">
              <h1 className="text-3xl font-bold text-[var(--ai-primary)] mb-2">
            <motion.div 
              className="mb-8"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, ease: "easeOut" }}
            >
              <motion.h1 
                className="text-3xl font-bold text-[var(--ai-primary)] mb-2"
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.5, delay: 0.2 }}
              >
                AI场景模拟
                <span className="ml-2 inline-block w-2 h-2 rounded-full bg-[var(--ai-secondary)] animate-pulse"></span>
              </h1>
              <p className="text-gray-600">选择以下场景，体验人工智能如何解决实际业务问题</p>
              <div className="h-1 w-24 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-accent)] mt-4"></div>
            </div>
              </motion.h1>
              <motion.p 
                className="text-gray-600"
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.5, delay: 0.3 }}
              >
                选择以下场景，体验人工智能如何解决实际业务问题
              </motion.p>
              <motion.div 
                className="h-1 w-24 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-accent)]"
                initial={{ scaleX: 0, opacity: 0 }}
                animate={{ scaleX: 1, opacity: 1 }}
                transition={{ duration: 0.6, delay: 0.4 }}
                style={{ originX: 0 }}
              ></motion.div>
            </motion.div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {services.map((service, index) => (
                <Card
                  key={index}
                  {...service}
                  onClick={() => handleCardClick(service.title, service.chatbotId)}
                  onClick={() => handleCardClick(service)}
                />
              ))}
            </div>
          </div>
        </div>
        <ChatDialog 
          isOpen={isChatOpen} 
          onClose={() => setIsChatOpen(false)}
          chatbotId={currentChatbot}
        
        <SceneIntroDialog
          isOpen={isIntroOpen}
          onClose={() => setIsIntroOpen(false)}
          scene={selectedScene}
        />
      </div>
    </>