"use client"; 
 | 
  
 | 
import { useState } from 'react'; 
 | 
import Card from '@/components/Card'; 
 | 
import SceneIntroDialog from '@/components/SceneIntroDialog'; 
 | 
import { motion } from 'framer-motion'; 
 | 
  
 | 
const services = [ 
 | 
  { 
 | 
    title: '库存管理知识库问答', 
 | 
    description: '库存知识,提供专业的供应链库存知识问答', 
 | 
    imageUrl: '/images/know.jpg', 
 | 
    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 [isIntroOpen, setIsIntroOpen] = useState(false); 
 | 
  const [selectedScene, setSelectedScene] = useState(services[0]); 
 | 
  
 | 
  const handleCardClick = (service: typeof services[0]) => { 
 | 
    setSelectedScene(service); 
 | 
    setIsIntroOpen(true); 
 | 
  }; 
 | 
  
 | 
  return ( 
 | 
    <> 
 | 
      <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"> 
 | 
            <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> 
 | 
              </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)} 
 | 
                /> 
 | 
              ))} 
 | 
            </div> 
 | 
          </div> 
 | 
        </div> 
 | 
         
 | 
        <SceneIntroDialog 
 | 
          isOpen={isIntroOpen} 
 | 
          onClose={() => setIsIntroOpen(false)} 
 | 
          scene={selectedScene} 
 | 
        /> 
 | 
      </div> 
 | 
    </> 
 | 
  ); 
 | 
}  
 |