| | |
|---|
| | | "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'; |
|---|
| | | import Image from 'next/image'; |
|---|
| | | import DataPreviewDialog from '@/components/DataPreviewDialog'; |
|---|
| | | |
|---|
| | | // 导入场景数据 |
|---|
| | | const defaultServices = [ |
|---|
| | | { |
|---|
| | | title: '插单2.0', |
|---|
| | | description: '智能评估需求插单对产能，原材料和交付服务的影响，提升客户满意度', |
|---|
| | | imageUrl: '/images/xuqiu.jpg', |
|---|
| | | chatbotId: 'zO9YQDEHdIApG9zC', |
|---|
| | | background: '在生产计划执行过程中，常常会遇到紧急订单需要插单的情况。AI系统可以快速评估插单对现有生产计划的影响，并提供最优的插单方案。', |
|---|
| | | instructions: '请提供需要插单的订单信息，包括产品类型、数量和期望交付时间，AI助手将为您分析可行性并给出具体的插单建议。' |
|---|
| | | 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助手将基于历史数据和实时状态，为您提供最优的补料方案和建议。', |
|---|
| | | dataDescription: '本场景通过整合MES、SCADA、WMS等系统的实时数据，结合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: 'DfH4cIzujVGvn5iR', |
|---|
| | | chatbotId: 'RhMYLHI1SZNiX4kl', |
|---|
| | | background: '在生产计划执行过程中，常常会遇到紧急订单需要插单的情况。AI系统可以快速评估插单对现有生产计划的影响，并提供最优的插单方案。', |
|---|
| | | instructions: '请提供需要插单的订单信息，包括产品类型、数量和期望交付时间，AI助手将为您分析可行性并给出具体的插单建议。' |
|---|
| | | instructions: '请提供需要插单的订单信息，包括产品类型、数量和期望交付时间，AI助手将为您分析可行性并给出具体的插单建议。', |
|---|
| | | dataDescription: '本场景通过整合ERP、MES等系统的实时数据，结合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: '科沃斯销售推荐小助手', |
|---|
| | | description: '智能化产品推荐提升导购效率', |
|---|
| | | imageUrl: '/images/robot.jpg', |
|---|
| | | chatbotId: 'sUAviPXvcEIw3oQC', |
|---|
| | | title: '插单2.0', |
|---|
| | | description: '智能评估需求插单对产能，原材料和交付服务的影响，提升客户满意度', |
|---|
| | | imageUrl: '/images/chadan2.jpg', |
|---|
| | | chatbotId: 'zO9YQDEHdIApG9zC', |
|---|
| | | background: '在生产计划执行过程中，常常会遇到紧急订单需要插单的情况。AI系统可以快速评估插单对现有生产计划的影响，并提供最优的插单方案。', |
|---|
| | | instructions: '请提供需要插单的订单信息，包括产品类型、数量和期望交付时间，AI助手将为您分析可行性并给出具体的插单建议。', |
|---|
| | | dataDescription: '本场景通过整合ERP、MES等系统的实时数据，结合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: '库存管理知识库问答', |
|---|
| | | description: '库存知识，提供专业的供应链库存知识问答', |
|---|
| | | imageUrl: '/images/know.jpg', |
|---|
| | | chatbotId: 'pDDfkU9HyBl2gzXx', |
|---|
| | | 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([initialScene]); |
|---|
| | | const [selectedScene, setSelectedScene] = useState(initialScene); |
|---|
| | | const [iframeKey, setIframeKey] = useState(0); |
|---|
| | | const [token, setToken] = useState<string | null>(null); |
|---|
| | | |
|---|
| | | useEffect(() => { |
|---|
| | | // Get token from localStorage |
|---|
| | | const storedToken = localStorage.getItem('token'); |
|---|
| | | setToken(storedToken); |
|---|
| | | }, []); |
|---|
| | | |
|---|
| | | // 切换场景时重新加载iframe |
|---|
| | | const handleSceneChange = (scene: typeof services[0]) => { |
|---|
| | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | {/* 滚动内容区 */} |
|---|
| | | <div className="flex-1 overflow-y-auto px-4 [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-[#E5E6EB] [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-[#C9CDD4]"> |
|---|
| | | <div className="space-y-3 py-4"> |
|---|
| | | <div className="flex-1 overflow-y-auto"> |
|---|
| | | {/* 场景列表 */} |
|---|
| | | <div className="px-4 py-2 space-y-3"> |
|---|
| | | {services.map((scene) => ( |
|---|
| | | <motion.div |
|---|
| | | key={scene.chatbotId} |
|---|
| | |
|---|
| | | )} |
|---|
| | | <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> |
|---|
| | |
|---|
| | | </motion.div> |
|---|
| | | ))} |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | {/* 场景信息展示区域 */} |
|---|
| | | <div className="p-4 space-y-4"> |
|---|
| | | {/* 场景背景 */} |
|---|
| | | <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 gap-2 mb-2"> |
|---|
| | | <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|---|
| | | <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /> |
|---|
| | | </svg> |
|---|
| | | <h3 className="text-sm font-medium text-gray-700">场景背景</h3> |
|---|
| | | </div> |
|---|
| | | <p className="text-gray-600 text-sm leading-relaxed"> |
|---|
| | | {selectedScene.background} |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | {/* 使用说明 */} |
|---|
| | | <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 gap-2 mb-2"> |
|---|
| | | <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|---|
| | | <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /> |
|---|
| | | </svg> |
|---|
| | | <h3 className="text-sm font-medium text-gray-700">使用说明</h3> |
|---|
| | | </div> |
|---|
| | | <p className="text-gray-600 text-sm leading-relaxed"> |
|---|
| | | {selectedScene.instructions} |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | {/* 数据说明 - 只在补料和插单场景显示 */} |
|---|
| | | {(selectedScene.chatbotId === 'JELkWpPLHQfRNhEH' || |
|---|
| | | selectedScene.chatbotId === 'RhMYLHI1SZNiX4kl' || |
|---|
| | | 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"> |
|---|
| | | <div className="flex items-center gap-2"> |
|---|
| | | <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|---|
| | | <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2 1 3 3 3h10c2 0 3-1 3-3V7c0-2-1-3-3-3H7C5 4 4 5 4 7z M9 11h6 M12 8v6" /> |
|---|
| | | </svg> |
|---|
| | | <h3 className="text-sm font-medium text-gray-700">数据说明</h3> |
|---|
| | | </div> |
|---|
| | | <button |
|---|
| | | onClick={() => setShowDataPreview(true)} |
|---|
| | | className="p-1.5 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-all duration-300" |
|---|
| | | title="查看演示数据" |
|---|
| | | > |
|---|
| | | <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|---|
| | | <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> |
|---|
| | | </svg> |
|---|
| | | </button> |
|---|
| | | </div> |
|---|
| | | <p className="text-gray-600 text-sm leading-relaxed"> |
|---|
| | | {selectedScene.dataDescription || '本场景所使用的数据均为模拟数据，仅用于演示目的。在实际应用中，将根据您的具体需求使用真实数据进行分析和处理。'} |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <DataPreviewDialog |
|---|
| | | isOpen={showDataPreview} |
|---|
| | | onClose={() => setShowDataPreview(false)} |
|---|
| | | markdownContent={selectedScene.exampleData || ''} |
|---|
| | | sceneType={selectedScene.chatbotId === 'JELkWpPLHQfRNhEH' ? 'buliao' : |
|---|
| | | selectedScene.chatbotId === 'SCPanoramaInsight' ? 'panorama' : 'chadan'} |
|---|
| | | /> |
|---|
| | | </> |
|---|
| | | )} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | {/* 聊天窗口 */} |
|---|
| | | <div className="flex-1 relative [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-[#E5E6EB] [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-[#C9CDD4]"> |
|---|
| | | <AnimatePresence mode="wait"> |
|---|
| | | <motion.div |
|---|
| | | key={iframeKey} |
|---|
| | | className="absolute inset-0" |
|---|
| | | initial={{ opacity: 0, scale: 0.98 }} |
|---|
| | | animate={{ opacity: 1, scale: 1 }} |
|---|
| | | exit={{ opacity: 0, scale: 1.02 }} |
|---|
| | | transition={{ duration: 0.3 }} |
|---|
| | | > |
|---|
| | | <iframe |
|---|
| | | src={`http://121.43.139.99/chatbot/${selectedScene.chatbotId}`} |
|---|
| | | className="w-full h-full" |
|---|
| | | style={{ border: 'none' }} |
|---|
| | | allow="microphone" |
|---|
| | | /> |
|---|
| | | </motion.div> |
|---|
| | | </AnimatePresence> |
|---|
| | | <div className="flex-1 relative"> |
|---|
| | | <iframe |
|---|
| | | key={iframeKey} |
|---|
| | | className="w-full h-full rounded-lg" |
|---|
| | | src={`http://121.43.139.99:7000/chatbot/${selectedScene.chatbotId}${token ? `?token=${token}` : ''}`} |
|---|
| | | frameBorder="0" |
|---|
| | | allow="microphone" |
|---|
| | | ></iframe> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
