[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96%; --secondary-foreground: 222.2 84% 4.9%; --muted: 210 40% 96%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96%; --accent-foreground: 222.2 84% 4.9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* 自定义样式 */ .tab-trigger-active { @apply bg-blue-50 text-blue-700 border-b-2 border-blue-700; } /* 表格样式优化 */ table { @apply border-collapse; } table th { @apply bg-slate-50 font-semibold; } table tr:hover { @apply bg-slate-50/50; } /* 卡片阴影优化 */ .card { @apply shadow-sm border border-slate-200; } /* 按钮样式优化 */ .btn-primary { @apply bg-blue-600 hover:bg-blue-700 text-white; } .btn-danger { @apply bg-red-600 hover:bg-red-700 text-white; } /* 状态徽章样式 */ .badge-success { @apply bg-green-100 text-green-800; } .badge-warning { @apply bg-orange-100 text-orange-800; } .badge-danger { @apply bg-red-100 text-red-800; } /* 响应式优化 */ @media (max-width: 768px) { .container { @apply px-4; } .grid-responsive { @apply grid-cols-1; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "四川省危化协会应急管理CRM系统", description: "Sichuan Chemical Emergency Management CRM System", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Users, FileText, AlertTriangle, CheckCircle, Clock, TrendingUp, Shield, BookOpen, Bell, BarChart3, Building2, } from "lucide-react" export default function Dashboard() { const [activeTab, setActiveTab] = useState("overview") const stats = [ { title: "在册人员", value: "1,247", change: "+12", changeType: "increase", icon: Users, color: "text-blue-600", }, { title: "有效证件", value: "3,891", change: "+45", changeType: "increase", icon: FileText, color: "text-green-600", }, { title: "即将过期", value: "23", change: "-5", changeType: "decrease", icon: Clock, color: "text-orange-600", }, { title: "应急事件", value: "2", change: "0", changeType: "neutral", icon: AlertTriangle, color: "text-red-600", }, ] const recentAlerts = [ { id: 1, type: "证件过期", message: "张三的危化品操作证将于7天后过期", time: "2小时前", priority: "high", }, { id: 2, type: "培训提醒", message: "安全生产培训班将于明日开始", time: "4小时前", priority: "medium", }, { id: 3, type: "合规检查", message: "月度合规检查报告已生成", time: "1天前", priority: "low", }, ] const upcomingTraining = [ { name: "危化品安全操作培训", date: "2024-01-15", participants: 45, status: "即将开始", }, { name: "应急响应演练", date: "2024-01-20", participants: 120, status: "报名中", }, { name: "法规更新培训", date: "2024-01-25", participants: 80, status: "筹备中", }, ] return (

{/* Header */}

四川省危化协会应急管理CRM系统

Sichuan Chemical Emergency Management CRM System

管理员

最后登录: 2024-01-08 09:30

{/* Navigation */}

总览客情管理公司档案人员管理证件管理培训管理应急响应合规监控

{/* Main Content */}

{/* Stats Cards */}

{stats.map((stat, index) => ( {stat.title}

{stat.value}

较上月 {stat.change}

))}

{/* Recent Alerts */} 最新提醒系统自动生成的重要提醒信息 {recentAlerts.map((alert) => (

{alert.type} {alert.time}

{alert.message}

))} {/* Upcoming Training */} 即将开始的培训近期培训计划安排 {upcomingTraining.map((training, index) => (

{training.name}

{training.date} · {training.participants}人参与

{training.status}

))}

{/* Compliance Overview */} 合规状态概览各类证件合规情况统计

危化品操作证 95%

安全管理证 88%

应急救援证 92%

) } // Personnel Management Component function PersonnelManagement() { const [currentPage, setCurrentPage] = useState(1) const [pageSize, setPageSize] = useState(10) // Generate more personnel data const allPersonnel = [ { id: "001", name: "张三", department: "安全管理部", position: "安全主管", phone: "138****1234", certificates: 5, status: "在职", }, { id: "002", name: "李四", department: "生产部", position: "操作员", phone: "139****5678", certificates: 3, status: "在职", }, { id: "003", name: "王五", department: "应急救援队", position: "队长", phone: "137****9012", certificates: 7, status: "在职", }, { id: "004", name: "赵六", department: "技术部", position: "工程师", phone: "136****3456", certificates: 4, status: "在职", }, { id: "005", name: "钱七", department: "质检部", position: "质检员", phone: "135****7890", certificates: 2, status: "在职", }, { id: "006", name: "孙八", department: "安全管理部", position: "安全员", phone: "134****2345", certificates: 6, status: "在职", }, { id: "007", name: "周九", department: "生产部", position: "班长", phone: "133****6789", certificates: 5, status: "在职", }, { id: "008", name: "吴十", department: "维修部", position: "维修工", phone: "132****0123", certificates: 3, status: "在职", }, { id: "009", name: "郑十一", department: "仓储部", position: "仓管员", phone: "131****4567", certificates: 2, status: "在职", }, { id: "010", name: "王十二", department: "运输部", position: "司机", phone: "130****8901", certificates: 4, status: "在职", }, { id: "011", name: "李十三", department: "环保部", position: "环保员", phone: "129****2345", certificates: 3, status: "在职", }, { id: "012", name: "张十四", department: "消防队", position: "消防员", phone: "128****6789", certificates: 8, status: "在职", }, { id: "013", name: "刘十五", department: "化验室", position: "化验员", phone: "127****0123", certificates: 5, status: "在职", }, { id: "014", name: "陈十六", department: "设备部", position: "设备工程师", phone: "126****4567", certificates: 6, status: "在职", }, { id: "015", name: "杨十七", department: "电气部", position: "电工", phone: "125****8901", certificates: 4, status: "在职", }, ] const totalCount = allPersonnel.length const totalPages = Math.ceil(totalCount / pageSize) const startIndex = (currentPage - 1) * pageSize const endIndex = startIndex + pageSize const currentPersonnel = allPersonnel.slice(startIndex, endIndex) const handlePageChange = (page: number) => { setCurrentPage(page) } const handlePageSizeChange = (size: number) => { setPageSize(size) setCurrentPage(1) } return (

人员管理

人员档案管理组织内所有人员的基本信息和证件状态

{currentPersonnel.map((person) => ( ))}

工号	姓名	部门	职位	联系电话	证件数量	状态	操作
{person.id}	{person.name}	{person.department}	{person.position}	{person.phone}	{person.certificates}个	{person.status}

{/* Pagination */}

共计 {totalCount} 条数据

{Array.from({ length: Math.min(5, totalPages) }, (_, i) => { const page = i + 1 return ( ) })} {totalPages > 5 && ( <> ... )}

) } // Certificate Management Component function CertificateManagement() { const [currentPage, setCurrentPage] = useState(1) const [pageSize, setPageSize] = useState(10) const allCertificates = [ { id: "C001", name: "危化品操作证", holder: "张三", issueDate: "2023-01-15", expiryDate: "2025-01-15", status: "有效", authority: "应急管理局", }, { id: "C002", name: "安全管理证", holder: "李四", issueDate: "2022-06-20", expiryDate: "2024-06-20", status: "即将过期", authority: "安监局", }, { id: "C003", name: "应急救援证", holder: "王五", issueDate: "2023-03-10", expiryDate: "2026-03-10", status: "有效", authority: "消防局", }, { id: "C004", name: "特种设备操作证", holder: "赵六", issueDate: "2023-05-12", expiryDate: "2025-05-12", status: "有效", authority: "质监局", }, { id: "C005", name: "电工操作证", holder: "钱七", issueDate: "2022-08-15", expiryDate: "2024-08-15", status: "即将过期", authority: "安监局", }, { id: "C006", name: "焊工操作证", holder: "孙八", issueDate: "2023-02-20", expiryDate: "2025-02-20", status: "有效", authority: "质监局", }, { id: "C007", name: "危化品运输证", holder: "周九", issueDate: "2023-04-18", expiryDate: "2025-04-18", status: "有效", authority: "交通局", }, { id: "C008", name: "安全员证", holder: "吴十", issueDate: "2022-12-10", expiryDate: "2024-12-10", status: "有效", authority: "建设局", }, { id: "C009", name: "消防员证", holder: "郑十一", issueDate: "2023-06-25", expiryDate: "2026-06-25", status: "有效", authority: "消防局", }, { id: "C010", name: "化验员证", holder: "王十二", issueDate: "2022-09-30", expiryDate: "2024-09-30", status: "即将过期", authority: "质监局", }, { id: "C011", name: "环保员证", holder: "李十三", issueDate: "2023-07-08", expiryDate: "2025-07-08", status: "有效", authority: "环保局", }, { id: "C012", name: "叉车操作证", holder: "张十四", issueDate: "2023-01-22", expiryDate: "2025-01-22", status: "有效", authority: "质监局", }, { id: "C013", name: "起重机操作证", holder: "刘十五", issueDate: "2022-11-15", expiryDate: "2024-11-15", status: "有效", authority: "质监局", }, { id: "C014", name: "压力容器操作证", holder: "陈十六", issueDate: "2023-03-28", expiryDate: "2025-03-28", status: "有效", authority: "质监局", }, { id: "C015", name: "制冷工证", holder: "杨十七", issueDate: "2022-10-12", expiryDate: "2024-10-12", status: "有效", authority: "人社局", }, ] const totalCount = allCertificates.length const totalPages = Math.ceil(totalCount / pageSize) const startIndex = (currentPage - 1) * pageSize const endIndex = startIndex + pageSize const currentCertificates = allCertificates.slice(startIndex, endIndex) const handlePageChange = (page: number) => { setCurrentPage(page) } const handlePageSizeChange = (size: number) => { setPageSize(size) setCurrentPage(1) } return (

证件管理

证件档案管理所有人员的安全证件和资质证书

{currentCertificates.map((cert) => ( ))}

证件编号	证件名称	持证人	颁发日期	到期日期	颁发机构	状态	操作
{cert.id}	{cert.name}	{cert.holder}	{cert.issueDate}	{cert.expiryDate}	{cert.authority}	{cert.status}

{/* Pagination */}

共计 {totalCount} 条数据

{Array.from({ length: Math.min(5, totalPages) }, (_, i) => { const page = i + 1 return ( ) })} {totalPages > 5 && ( <> ... )}

) } // Training Management Component function TrainingManagement() { return (

培训管理

培训计划即将开始的培训课程

危化品安全操作培训

2024-01-15 09:00 - 17:00

讲师: 专家组 | 地点: 培训中心A厅

报名人数: 45/50 即将开始

应急响应演练

2024-01-20 14:00 - 18:00

讲师: 应急专家 | 地点: 演练场地

报名人数: 120/150 报名中

培训记录最近完成的培训统计

法规更新培训

完成时间: 2024-01-05

98%通过率

80人参与

消防安全培训

完成时间: 2023-12-28

95%通过率

65人参与

) } // Emergency Response Component function EmergencyResponse() { return (

应急响应

当前事件正在处理的应急事件

化学品泄漏事故

地点: 成都市高新区某化工厂

报告时间: 2024-01-08 14:30

紧急

设备故障预警

地点: 绵阳市某石化企业

报告时间: 2024-01-08 16:15

中等

应急资源可调用的应急人员和设备

应急专家 12人在线

救援队员 45人待命

应急车辆 8辆可用

防护设备库存充足

) } // Compliance Monitoring Component function ComplianceMonitoring() { return (

合规监控

证件过期提醒需要及时续期的证件

张三 - 危化品操作证

7天后过期

紧急

李四 - 安全管理证

15天后过期

提醒

王五 - 应急救援证

30天后过期

注意

合规统计整体合规情况分析

总体合规率 92%

1,247

有效证件

即将过期

) } // Customer Management Component function CustomerManagement() { const [currentPage, setCurrentPage] = useState(1) const [pageSize, setPageSize] = useState(10) const allVisitRecords = [ { id: "V001", month: "2024-01", visitor: "四川危化协会-安全监管部-张安全(zhanganquan)", visitedCompany: "成都石化有限公司统一社会信用代码: 91510100MA61234567", safetyIssue: "储罐区域安全隐患", type: "安全检查", contactPerson: "李经理-安全总监", status: "已完成", }, { id: "V002", month: "2024-01", visitor: "四川危化协会-应急管理部-王应急(wangyingji)", visitedCompany: "绵阳化工集团统一社会信用代码: 91510700MA62345678", safetyIssue: "-", type: "应急演练", contactPerson: "赵主任-应急负责人", status: "进行中", }, { id: "V003", month: "2024-01", visitor: "四川危化协会-技术服务部-刘技术(liujishu)", visitedCompany: "德阳精细化工统一社会信用代码: 91510600MA63456789", safetyIssue: "-", type: "技术指导", contactPerson: "陈工程师-技术总工", status: "已完成", }, { id: "V004", month: "2024-01", visitor: "四川危化协会-安全监管部-李监管(lijiangguan)", visitedCompany: "泸州化学工业园统一社会信用代码: 91510500MA64567890", safetyIssue: "管道老化问题", type: "安全检查", contactPerson: "王厂长-生产负责人", status: "待跟进", }, { id: "V005", month: "2024-01", visitor: "四川危化协会-应急管理部-陈应急(chenyingji)", visitedCompany: "宜宾石化企业统一社会信用代码: 91511500MA65678901", safetyIssue: "-", type: "应急演练", contactPerson: "张主管-应急专员", status: "已完成", }, { id: "V006", month: "2024-01", visitor: "四川危化协会-技术服务部-杨技术(yangjishu)", visitedCompany: "南充化工有限公司统一社会信用代码: 91511300MA66789012", safetyIssue: "-", type: "技术指导", contactPerson: "刘总工-技术负责人", status: "进行中", }, { id: "V007", month: "2024-01", visitor: "四川危化协会-安全监管部-周安全(zhouanquan)", visitedCompany: "达州危化品储运统一社会信用代码: 91511700MA67890123", safetyIssue: "仓储安全管理不规范", type: "安全检查", contactPerson: "吴经理-仓储主管", status: "已完成", }, { id: "V008", month: "2024-01", visitor: "四川危化协会-应急管理部-马应急(mayingji)", visitedCompany: "广安石油化工统一社会信用代码: 91511600MA68901234", safetyIssue: "-", type: "应急演练", contactPerson: "孙主任-安全主任", status: "待跟进", }, { id: "V009", month: "2024-01", visitor: "四川危化协会-技术服务部-赵技术(zhaojishu)", visitedCompany: "巴中化学制品厂统一社会信用代码: 91511900MA69012345", safetyIssue: "-", type: "技术指导", contactPerson: "钱工程师-研发总监", status: "已完成", }, { id: "V010", month: "2024-01", visitor: "四川危化协会-安全监管部-孙监管(sunjiangguan)", visitedCompany: "资阳精细化工园统一社会信用代码: 91512000MA70123456", safetyIssue: "废料处理不当", type: "安全检查", contactPerson: "郑主管-环保负责人", status: "进行中", }, { id: "V011", month: "2023-12", visitor: "四川危化协会-应急管理部-吴应急(wuyingji)", visitedCompany: "眉山化工集团统一社会信用代码: 91511400MA71234567", safetyIssue: "-", type: "应急演练", contactPerson: "周队长-应急队长", status: "已完成", }, { id: "V012", month: "2023-12", visitor: "四川危化协会-技术服务部-郑技术(zhengjishu)", visitedCompany: "乐山石化工业统一社会信用代码: 91511100MA72345678", safetyIssue: "-", type: "技术指导", contactPerson: "王技术员-工艺工程师", status: "已完成", }, { id: "V013", month: "2023-12", visitor: "四川危化协会-安全监管部-王监管(wangjiangguan)", visitedCompany: "内江化学原料厂统一社会信用代码: 91511000MA73456789", safetyIssue: "消防设施不完善", type: "安全检查", contactPerson: "李主任-消防负责人", status: "已完成", }, { id: "V014", month: "2023-12", visitor: "四川危化协会-应急管理部-刘应急(liuyingji)", visitedCompany: "自贡盐化工业统一社会信用代码: 91510300MA74567890", safetyIssue: "-", type: "应急演练", contactPerson: "张副总-安全副总", status: "已完成", }, { id: "V015", month: "2023-12", visitor: "四川危化协会-技术服务部-陈技术(chenjishu)", visitedCompany: "攀枝花钢铁化工统一社会信用代码: 91510400MA75678901", safetyIssue: "-", type: "技术指导", contactPerson: "赵总工-首席工程师", status: "已完成", }, ] const totalCount = allVisitRecords.length const totalPages = Math.ceil(totalCount / pageSize) const startIndex = (currentPage - 1) * pageSize const endIndex = startIndex + pageSize const currentRecords = allVisitRecords.slice(startIndex, endIndex) const handlePageChange = (page: number) => { setCurrentPage(page) } const handlePageSizeChange = (size: number) => { setPageSize(size) setCurrentPage(1) } return (

客情管理

{/* Search Filters */} 筛选条件

组织架构

走访人

被访企业

走访时间

企业类型

风险等级

状态

{/* Visit Records Table */} 企业走访记录危化企业走访和安全检查记录管理

{currentRecords.map((record) => ( ))}

记录ID	月份	走访人	被访企业	安全问题	类型	企业联系人	状态	操作
{record.id}	{record.month}	{record.visitor}	危化 {record.visitedCompany}	{record.safetyIssue !== "-" ? ( {record.safetyIssue} ) : ( record.safetyIssue )}	{record.type}	{record.contactPerson}	{record.status}

{/* Pagination */}

共计 {totalCount} 条数据

{Array.from({ length: Math.min(5, totalPages) }, (_, i) => { const page = i + 1 return ( ) })} {totalPages > 5 && ( <> ... )}

) } // Company Archive Component function CompanyArchive() { const [currentPage, setCurrentPage] = useState(1) const [pageSize, setPageSize] = useState(10) const allCompanyRecords = [ { companyName: "成都石化有限公司", creditCode: "91510100MA61234567", companyType: "石油化工企业", riskLevel: "重大危险源", legalPerson: "张总(zhangzong)", safetyManager: "李安全(lianquan)", address: "成都市高新区石化园区1号", employeeCount: 450, certCount: 125, lastInspection: "2024-01-05", }, { companyName: "绵阳化工集团", creditCode: "91510700MA62345678", companyType: "精细化工企业", riskLevel: "较大危险源", legalPerson: "王董事长(wangdongshi)", safetyManager: "赵应急(zhaoyingji)", address: "绵阳市涪城区化工园区8号", employeeCount: 320, certCount: 89, lastInspection: "2024-01-03", }, { companyName: "德阳精细化工", creditCode: "91510600MA63456789", companyType: "化学原料企业", riskLevel: "一般危险源", legalPerson: "刘总经理(liuzong)", safetyManager: "陈技术(chenjishu)", address: "德阳市旌阳区工业园区15号", employeeCount: 180, certCount: 52, lastInspection: "2024-01-02", }, { companyName: "泸州化学工业园", creditCode: "91510500MA64567890", companyType: "化学原料企业", riskLevel: "重大危险源", legalPerson: "王厂长(wangchangzhang)", safetyManager: "李主管(lizhuguan)", address: "泸州市龙马潭区化工园区12号", employeeCount: 380, certCount: 98, lastInspection: "2024-01-04", }, { companyName: "宜宾石化企业", creditCode: "91511500MA65678901", companyType: "石油化工企业", riskLevel: "较大危险源", legalPerson: "张主管(zhangzhuguan)", safetyManager: "王专员(wangzhuanyuan)", address: "宜宾市翠屏区石化工业区5号", employeeCount: 290, certCount: 76, lastInspection: "2024-01-01", }, { companyName: "南充化工有限公司", creditCode: "91511300MA66789012", companyType: "精细化工企业", riskLevel: "一般危险源", legalPerson: "刘总工(liuzong)", safetyManager: "陈负责人(chenfuzeren)", address: "南充市顺庆区化工园区18号", employeeCount: 220, certCount: 65, lastInspection: "2023-12-28", }, { companyName: "达州危化品储运", creditCode: "91511700MA67890123", companyType: "危化品储运企业", riskLevel: "较大危险源", legalPerson: "吴经理(wujingli)", safetyManager: "孙主管(sunzhuguan)", address: "达州市通川区物流园区3号", employeeCount: 150, certCount: 45, lastInspection: "2023-12-30", }, { companyName: "广安石油化工", creditCode: "91511600MA68901234", companyType: "石油化工企业", riskLevel: "重大危险源", legalPerson: "孙主任(sunzhuren)", safetyManager: "马安全(maanquan)", address: "广安市广安区石化园区7号", employeeCount: 410, certCount: 112, lastInspection: "2023-12-25", }, { companyName: "巴中化学制品厂", creditCode: "91511900MA69012345", companyType: "化学原料企业", riskLevel: "一般危险源", legalPerson: "钱工程师(qiangongchengshi)", safetyManager: "赵总监(zhaozongjan)", address: "巴中市巴州区工业园区22号", employeeCount: 160, certCount: 48, lastInspection: "2023-12-20", }, { companyName: "资阳精细化工园", creditCode: "91512000MA70123456", companyType: "精细化工企业", riskLevel: "较大危险源", legalPerson: "郑主管(zhengzhuguan)", safetyManager: "周负责人(zhoufuzeren)", address: "资阳市雁江区化工园区11号", employeeCount: 270, certCount: 72, lastInspection: "2023-12-18", }, { companyName: "眉山化工集团", creditCode: "91511400MA71234567", companyType: "石油化工企业", riskLevel: "重大危险源", legalPerson: "周队长(zhouduizhang)", safetyManager: "吴应急(wuyingji)", address: "眉山市东坡区化工园区9号", employeeCount: 520, certCount: 145, lastInspection: "2023-12-15", }, { companyName: "乐山石化工业", creditCode: "91511100MA72345678", companyType: "石油化工企业", riskLevel: "较大危险源", legalPerson: "王技术员(wangjishuyuan)", safetyManager: "郑工程师(zhenggongchengshi)", address: "乐山市市中区石化园区14号", employeeCount: 340, certCount: 92, lastInspection: "2023-12-12", }, { companyName: "内江化学原料厂", creditCode: "91511000MA73456789", companyType: "化学原料企业", riskLevel: "一般危险源", legalPerson: "李主任(lizhuren)", safetyManager: "王监管(wangjiangguan)", address: "内江市东兴区工业园区6号", employeeCount: 190, certCount: 56, lastInspection: "2023-12-10", }, { companyName: "自贡盐化工业", creditCode: "91510300MA74567890", companyType: "化学原料企业", riskLevel: "较大危险源", legalPerson: "张副总(zhangfuzong)", safetyManager: "刘应急(liuyingji)", address: "自贡市自流井区盐化工园区4号", employeeCount: 280, certCount: 78, lastInspection: "2023-12-08", }, { companyName: "攀枝花钢铁化工", creditCode: "91510400MA75678901", companyType: "精细化工企业", riskLevel: "重大危险源", legalPerson: "赵总工(zhaozong)", safetyManager: "陈技术(chenjishu)", address: "攀枝花市东区钢铁化工园区2号", employeeCount: 680, certCount: 198, lastInspection: "2023-12-05", }, ] const totalCount = allCompanyRecords.length const totalPages = Math.ceil(totalCount / pageSize) const startIndex = (currentPage - 1) * pageSize const endIndex = startIndex + pageSize const currentRecords = allCompanyRecords.slice(startIndex, endIndex) const handlePageChange = (page: number) => { setCurrentPage(page) } const handlePageSizeChange = (size: number) => { setPageSize(size) setCurrentPage(1) } return (

公司档案

{/* Search Filters */} 基础查询

企业名称

统一社会信用代码

风险等级

安全负责人

企业类型

所在地区

{/* Company Records Table */} 危化企业档案列表危险化学品企业基本信息管理

{currentRecords.map((record, index) => ( ))}

企业基本信息	企业类型	风险等级	负责人信息	企业地址	人员规模	证件统计	最近检查	操作
{record.companyName} 信用代码: {record.creditCode}	{record.companyType}	{record.riskLevel}	法人: {record.legalPerson} 安全: {record.safetyManager}	{record.address}	{record.employeeCount}人	{record.certCount}个证件	{record.lastInspection}

{/* Pagination */}

共计 {totalCount} 条数据

{Array.from({ length: Math.min(5, totalPages) }, (_, i) => { const page = i + 1 return ( ) })} {totalPages > 5 && ( <> ... )}

) }