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