"use client";
|
|
import { Dialog, Transition } from '@headlessui/react';
|
import { Fragment } from 'react';
|
import ReactMarkdown from 'react-markdown';
|
import remarkGfm from 'remark-gfm';
|
import { motion } from 'framer-motion';
|
|
interface DataPreviewDialogProps {
|
isOpen: boolean;
|
onClose: () => void;
|
markdownContent: string;
|
sceneType?: 'chadan' | 'buliao'; // 添加场景类型属性
|
}
|
|
export default function DataPreviewDialog({
|
isOpen,
|
onClose,
|
markdownContent,
|
sceneType
|
}: DataPreviewDialogProps) {
|
// 根据场景类型获取对应的数据来源说明
|
const getDataSourceDescription = () => {
|
if (sceneType === 'chadan') {
|
return (
|
<div className="space-y-6">
|
<div className="bg-white/50 rounded-lg p-4 backdrop-blur-sm border border-blue-100/50">
|
<div className="flex items-center gap-3 mb-3">
|
<div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" 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" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h8" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 16V8" />
|
</svg>
|
</div>
|
<h4 className="text-lg font-semibold text-blue-900">ERP核心数据</h4>
|
</div>
|
<div className="ml-11">
|
<p className="text-blue-800">BOM、需求、采购订单、供应商列表</p>
|
</div>
|
</div>
|
|
<div className="bg-white/50 rounded-lg p-4 backdrop-blur-sm border border-blue-100/50">
|
<div className="flex items-center gap-3 mb-3">
|
<div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
|
</svg>
|
</div>
|
<h4 className="text-lg font-semibold text-blue-900">外部系统补充</h4>
|
</div>
|
<div className="ml-11">
|
<p className="text-blue-800">插单需求通常由CRM、MES或人工输入触发，其他系统（PLM/SRM/SCM）可能提供补充或源头数据</p>
|
</div>
|
</div>
|
</div>
|
);
|
} else if (sceneType === 'buliao') {
|
return (
|
<div className="space-y-6">
|
<div className="bg-white/50 rounded-lg p-4 backdrop-blur-sm border border-blue-100/50">
|
<div className="flex items-center gap-3 mb-3">
|
<div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
</svg>
|
</div>
|
<h4 className="text-lg font-semibold text-blue-900">工位信息</h4>
|
</div>
|
<div className="ml-11">
|
<p className="text-blue-800">核心来源系统：MES、SCADA</p>
|
</div>
|
</div>
|
|
<div className="bg-white/50 rounded-lg p-4 backdrop-blur-sm border border-blue-100/50">
|
<div className="flex items-center gap-3 mb-3">
|
<div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
</svg>
|
</div>
|
<h4 className="text-lg font-semibold text-blue-900">产线现场库存量</h4>
|
</div>
|
<div className="ml-11">
|
<p className="text-blue-800">核心来源系统：MES、WMS（线边仓）</p>
|
</div>
|
</div>
|
|
<div className="bg-white/50 rounded-lg p-4 backdrop-blur-sm border border-blue-100/50">
|
<div className="flex items-center gap-3 mb-3">
|
<div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
</svg>
|
</div>
|
<h4 className="text-lg font-semibold text-blue-900">原材料库存</h4>
|
</div>
|
<div className="ml-11">
|
<p className="text-blue-800">核心来源系统：ERP、WMS</p>
|
</div>
|
</div>
|
</div>
|
);
|
}
|
return null;
|
};
|
|
return (
|
<Transition appear show={isOpen} as={Fragment}>
|
<Dialog as="div" className="relative z-50" onClose={onClose}>
|
<Transition.Child
|
as={Fragment}
|
enter="ease-out duration-300"
|
enterFrom="opacity-0"
|
enterTo="opacity-100"
|
leave="ease-in duration-200"
|
leaveFrom="opacity-100"
|
leaveTo="opacity-0"
|
>
|
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm" />
|
</Transition.Child>
|
|
<div className="fixed inset-0 overflow-y-auto">
|
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
<Transition.Child
|
as={Fragment}
|
enter="ease-out duration-300"
|
enterFrom="opacity-0 scale-95"
|
enterTo="opacity-100 scale-100"
|
leave="ease-in duration-200"
|
leaveFrom="opacity-100 scale-100"
|
leaveTo="opacity-0 scale-95"
|
>
|
<Dialog.Panel className="w-[800px] h-[600px] transform overflow-hidden rounded-xl bg-white shadow-[0_0_30px_rgba(0,0,0,0.15)] transition-all flex flex-col">
|
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
<Dialog.Title className="text-xl font-semibold text-gray-800 flex items-center">
|
演示数据预览
|
<motion.span
|
className="ml-2 inline-block w-2 h-2 rounded-full bg-[#6ADBFF]"
|
animate={{
|
scale: [1, 1.5, 1],
|
opacity: [0.7, 1, 0.7]
|
}}
|
transition={{
|
duration: 2,
|
repeat: Infinity,
|
ease: "easeInOut"
|
}}
|
/>
|
</Dialog.Title>
|
<button
|
onClick={onClose}
|
className="text-gray-500 hover:text-gray-700 transition-colors duration-300 cursor-pointer"
|
>
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
</svg>
|
</button>
|
</div>
|
<div className="flex-1 overflow-y-auto p-6">
|
<div className="prose max-w-none">
|
<div className="mb-6 p-6 bg-gradient-to-br from-blue-50 to-blue-100/50 rounded-lg border border-blue-100">
|
<h3 className="text-xl font-semibold text-blue-900 mb-4 pb-3 border-b border-blue-200/50 flex items-center gap-2">
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
</svg>
|
数据来源说明
|
</h3>
|
{getDataSourceDescription()}
|
<div className="mt-6 pt-3 border-t border-blue-200/50">
|
<p className="text-blue-800/90 text-sm flex items-center gap-2">
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-blue-600/80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
</svg>
|
注：以下为模拟演示数据，实际使用时将自动对接相关业务系统
|
</p>
|
</div>
|
</div>
|
<ReactMarkdown
|
remarkPlugins={[remarkGfm]}
|
components={{
|
h3: ({ node, ...props }) => (
|
<h3 className="text-lg font-semibold text-gray-800 mt-8 mb-4 pb-2 border-b border-gray-200" {...props} />
|
),
|
table: ({ node, ...props }) => (
|
<div className="overflow-x-auto my-6 rounded-lg border border-gray-200 shadow-sm">
|
<table className="min-w-full divide-y divide-gray-200" {...props} />
|
</div>
|
),
|
thead: ({ node, ...props }) => (
|
<thead className="bg-gray-50" {...props} />
|
),
|
th: ({ node, children, ...props }) => {
|
// 根据表头内容动态调整宽度
|
let className = "px-4 py-3 text-center text-sm font-semibold text-gray-700";
|
|
if (typeof children === 'string') {
|
// 根据表头内容设置合适的宽度类
|
if (children === '工位' || children === '数量' || children === '库位') {
|
className += " w-[15%]";
|
} else if (children === '原材料' || children === '原材料需求' || children === '产线名') {
|
className += " w-[20%]";
|
} else if (children === '原材料消耗速率' || children === '生产的产品') {
|
className += " w-[25%]";
|
}
|
}
|
|
return <th className={className} {...props}>{children}</th>;
|
},
|
td: ({ node, ...props }) => (
|
<td className="px-4 py-3 text-sm text-gray-600 border-t border-gray-200 text-center whitespace-nowrap" {...props} />
|
),
|
tr: ({ node, ...props }) => (
|
<tr className="hover:bg-gray-50 transition-colors duration-150" {...props} />
|
)
|
}}
|
>
|
{markdownContent}
|
</ReactMarkdown>
|
</div>
|
</div>
|
</Dialog.Panel>
|
</Transition.Child>
|
</div>
|
</div>
|
</Dialog>
|
</Transition>
|
);
|
}
|
