Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>人力资源审批时效看板</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#3b82f6', | |
| secondary: '#10b981', | |
| danger: '#ef4444', | |
| warning: '#f59e0b', | |
| info: '#06b6d4', | |
| dark: '#1e293b', | |
| light: '#f8fafc', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); | |
| body { | |
| font-family: 'Noto Sans SC', sans-serif; | |
| background-color: #f1f5f9; | |
| } | |
| .card { | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| transition: all 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| background-color: #e2e8f0; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| transition: width 0.6s ease; | |
| } | |
| .timeline-item:not(:last-child)::after { | |
| content: ''; | |
| position: absolute; | |
| left: 19px; | |
| top: 32px; | |
| height: calc(100% - 32px); | |
| width: 2px; | |
| background-color: #e2e8f0; | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="min-h-screen"> | |
| <!-- 顶部导航 --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-users-cog text-primary text-2xl mr-2"></i> | |
| <span class="text-xl font-semibold text-gray-800">人力资源OA系统</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#" class="border-primary text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">审批看板</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">流程管理</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">统计分析</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="user-menu-button" aria-expanded="false" aria-haspopup="true"> | |
| <span class="sr-only">打开用户菜单</span> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像"> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">打开主菜单</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- 主内容区 --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> | |
| <!-- 标题和筛选 --> | |
| <div class="md:flex md:items-center md:justify-between mb-6"> | |
| <div class="flex-1 min-w-0"> | |
| <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate"> | |
| <i class="fas fa-stopwatch mr-2 text-primary"></i>审批流程时效看板 | |
| </h2> | |
| <p class="mt-1 text-sm text-gray-500">实时监控各项人力资源审批流程的处理时效</p> | |
| </div> | |
| <div class="mt-4 flex md:mt-0 md:ml-4"> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-calendar-alt text-gray-400"></i> | |
| </div> | |
| <select class="appearance-none bg-white border border-gray-300 rounded-md py-2 pl-10 pr-8 text-sm focus:outline-none focus:ring-primary focus:border-primary"> | |
| <option>今日</option> | |
| <option selected>本周</option> | |
| <option>本月</option> | |
| <option>本季度</option> | |
| <option>自定义</option> | |
| </select> | |
| </div> | |
| <button type="button" class="ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> | |
| <i class="fas fa-filter mr-2"></i>筛选 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 关键指标卡片 --> | |
| <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6"> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-md p-3"> | |
| <i class="fas fa-file-signature text-blue-600 text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate">平均审批时长</dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900">1.2</div> | |
| <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600"> | |
| <i class="fas fa-arrow-down text-xs"></i> | |
| <span class="sr-only">比上周减少</span>12% | |
| </div> | |
| </dd> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-sm text-gray-500">目标 <span class="font-medium">1.5天</span></div> | |
| <div class="progress-bar mt-1"> | |
| <div class="progress-fill bg-blue-500" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-100 rounded-md p-3"> | |
| <i class="fas fa-check-circle text-green-600 text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate">按时完成率</dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900">92%</div> | |
| <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600"> | |
| <i class="fas fa-arrow-up text-xs"></i> | |
| <span class="sr-only">比上周增加</span>5% | |
| </div> | |
| </dd> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-sm text-gray-500">目标 <span class="font-medium">90%</span></div> | |
| <div class="progress-bar mt-1"> | |
| <div class="progress-fill bg-green-500" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-yellow-100 rounded-md p-3"> | |
| <i class="fas fa-clock text-yellow-600 text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate">超时审批数</dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900">8</div> | |
| <div class="ml-2 flex items-baseline text-sm font-semibold text-red-600"> | |
| <i class="fas fa-arrow-up text-xs"></i> | |
| <span class="sr-only">比上周增加</span>2 | |
| </div> | |
| </dd> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-sm text-gray-500">上周同期 <span class="font-medium">6件</span></div> | |
| <div class="progress-bar mt-1"> | |
| <div class="progress-fill bg-yellow-500" style="width: 40%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-100 rounded-md p-3"> | |
| <i class="fas fa-tasks text-purple-600 text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate">待审批总数</dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900">24</div> | |
| <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600"> | |
| <i class="fas fa-arrow-down text-xs"></i> | |
| <span class="sr-only">比上周减少</span>15% | |
| </div> | |
| </dd> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-sm text-gray-500">上周同期 <span class="font-medium">28件</span></div> | |
| <div class="progress-bar mt-1"> | |
| <div class="progress-fill bg-purple-500" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 图表和流程列表 --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- 时效趋势图 --> | |
| <div class="bg-white shadow rounded-lg p-6 card lg:col-span-2"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-medium text-gray-900"> | |
| <i class="fas fa-chart-line text-primary mr-2"></i>审批时效趋势 | |
| </h3> | |
| <div class="relative"> | |
| <select class="appearance-none bg-white border border-gray-300 rounded-md py-1 pl-3 pr-8 text-sm focus:outline-none focus:ring-primary focus:border-primary"> | |
| <option>按天</option> | |
| <option selected>按周</option> | |
| <option>按月</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="trendChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- 流程类型分布 --> | |
| <div class="bg-white shadow rounded-lg p-6 card"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4"> | |
| <i class="fas fa-chart-pie text-primary mr-2"></i>流程类型分布 | |
| </h3> | |
| <div class="h-64"> | |
| <canvas id="processChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 审批流程列表 --> | |
| <div class="bg-white shadow rounded-lg overflow-hidden card"> | |
| <div class="px-4 py-5 border-b border-gray-200 sm:px-6"> | |
| <div class="-ml-4 -mt-2 flex items-center justify-between flex-wrap sm:flex-nowrap"> | |
| <div class="ml-4 mt-2"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900"> | |
| <i class="fas fa-list-ul text-primary mr-2"></i>审批流程时效详情 | |
| </h3> | |
| </div> | |
| <div class="ml-4 mt-2 flex-shrink-0"> | |
| <button type="button" class="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> | |
| <i class="fas fa-download mr-2"></i>导出数据 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">流程ID</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">流程类型</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请人</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">当前状态</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">已耗时</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">剩余时间</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">进度</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">HR-2023-0582</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">入职审批</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">张明</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">审批中</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.5天</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.5天</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="progress-bar w-24"> | |
| <div class="progress-fill bg-green-500" style="width: 25%"></div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-primary hover:text-blue-700 mr-3"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></a> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">HR-2023-0581</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">转正审批</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">李华</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">部门审批</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.2天</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.8天</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="progress-bar w-24"> | |
| <div class="progress-fill bg-blue-500" style="width: 60%"></div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-primary hover:text-blue-700 mr-3"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></a> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">HR-2023-0580</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">调薪审批</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">王芳</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">HR审核</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.0天</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.0天</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="progress-bar w-24"> | |
| <div class="progress-fill bg-yellow-500" style="width: 67%"></div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-primary hover:text-blue-700 mr-3"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></a> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">HR-2023-0579</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">离职审批</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">赵强</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">即将超时</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.8天</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.2天</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="progress-bar w-24"> | |
| <div class="progress-fill bg-red-500" style="width: 93%"></div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-primary hover:text-blue-700 mr-3"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></a> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">HR-2023-0578</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">请假审批</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">刘伟</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">已完成</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.0天</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0天</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="progress-bar w-24"> | |
| <div class="progress-fill bg-green-500" style="width: 100%"></div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-primary hover:text-blue-700 mr-3"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"> | |
| <div class="flex-1 flex justify-between sm:hidden"> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">上一页</a> | |
| <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">下一页</a> | |
| </div> | |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| 显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">24</span> 条 | |
| </p> | |
| </div> | |
| <div> | |
| <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">上一页</span> | |
| <i class="fas fa-chevron-left"></i> | |
| </a> | |
| <a href="#" aria-current="page" class="z-10 bg-primary border-primary text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium">1</a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a> | |
| <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">5</a> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">下一页</span> | |
| <i class="fas fa-chevron-right"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 流程时间线 --> | |
| <div class="mt-6 bg-white shadow rounded-lg overflow-hidden card"> | |
| <div class="px-4 py-5 border-b border-gray-200 sm:px-6"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900"> | |
| <i class="fas fa-history text-primary mr-2"></i>最近审批时间线 | |
| </h3> | |
| </div> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="space-y-8"> | |
| <div class="timeline-item relative pl-10"> | |
| <div class="absolute left-0 top-0 flex h-6 w-6 items-center justify-center rounded-full bg-green-100"> | |
| <i class="fas fa-check text-green-600 text-xs"></i> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-900">HR-2023-0578 - 请假审批</h4> | |
| <p class="text-sm text-gray-500">已完成审批 · 刘伟 · 1.0天完成</p> | |
| </div> | |
| <time datetime="2023-06-15" class="text-sm text-gray-500">今天 09:30</time> | |
| </div> | |
| </div> | |
| <div class="timeline-item relative pl-10"> | |
| <div class="absolute left-0 top-0 flex h-6 w-6 items-center justify-center rounded-full bg-blue-100"> | |
| <i class="fas fa-user-tie text-blue-600 text-xs"></i> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-900">HR-2023-0580 - 调薪审批</h4> | |
| <p class="text-sm text-gray-500">部门主管审批通过 · 王芳 · 2.0天</p> | |
| </div> | |
| <time datetime="2023-06-14" class="text-sm text-gray-500">昨天 16:45</time> | |
| </div> | |
| </div> | |
| <div class="timeline-item relative pl-10"> | |
| <div class="absolute left-0 top-0 flex h-6 w-6 items-center justify-center rounded-full bg-yellow-100"> | |
| <i class="fas fa-exclamation text-yellow-600 text-xs"></i> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-900">HR-2023-0579 - 离职审批</h4> | |
| <p class="text-sm text-gray-500">HR提醒即将超时 · 赵强 · 2.8天</p> | |
| </div> | |
| <time datetime="2023-06-14" class="text-sm text-gray-500">昨天 14:20</time> | |
| </div> | |
| </div> | |
| <div class="timeline-item relative pl-10"> | |
| <div class="absolute left-0 top-0 flex h-6 w-6 items-center justify-center rounded-full bg-purple-100"> | |
| <i class="fas fa-user-plus text-purple-600 text-xs"></i> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-900">HR-2023-0582 - 入职审批</h4> | |
| <p class="text-sm text-gray-500">新申请提交 · 张明 · 0.5天</p> | |
| </div> | |
| <time datetime="2023-06-14" class="text-sm text-gray-500">昨天 10:15</time> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 底部信息 --> | |
| <footer class="bg-white border-t border-gray-200 mt-8"> | |
| <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8"> | |
| <p class="text-center text-sm text-gray-500">© 2023 人力资源OA系统. 保留所有权利.</p> | |
| </div> | |
| </footer> | |
| <!-- 图表脚本 --> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // 审批时效趋势图 | |
| const trendCtx = document.getElementById('trendChart').getContext('2d'); | |
| const trendChart = new Chart(trendCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'], | |
| datasets: [ | |
| { | |
| label: '平均审批时长(天)', | |
| data: [1.8, 1.6, 1.5, 1.4, 1.3, 1.2], | |
| borderColor: '#3b82f6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.05)', | |
| borderWidth: 2, | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: '目标时长(天)', | |
| data: [1.5, 1.5, 1.5, 1.5, 1.5, 1.5], | |
| borderColor: '#94a3b8', | |
| borderWidth: 1, | |
| borderDash: [5, 5], | |
| pointRadius: 0 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false, | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| title: { | |
| display: true, | |
| text: '天数' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // 流程类型分布图 | |
| const processCtx = document.getElementById('processChart').getContext('2d'); | |
| const processChart = new Chart(processCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['入职审批', '转正审批', '调薪审批', '离职审批', '请假审批', '其他'], | |
| datasets: [{ | |
| data: [15, 12, 8, 6, 25, 10], | |
| backgroundColor: [ | |
| '#3b82f6', | |
| '#10b981', | |
| '#f59e0b', | |
| '#ef4444', | |
| '#8b5cf6', | |
| '#64748b' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| const label = context.label || ''; | |
| const value = context.raw || 0; | |
| const total = context.dataset.data.reduce((a, b) => a + b, 0); | |
| const percentage = Math.round((value / total) * 100); | |
| return `${label}: ${value} (${percentage}%)`; | |
| } | |
| } | |
| } | |
| }, | |
| cutout: '70%' | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=tianzhenMN/oa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |