| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Performance Pulse Dashboard</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| | |
| | body { |
| | font-family: 'Inter', sans-serif; |
| | background-color: #f8fafc; |
| | } |
| | |
| | .gradient-bg { |
| | background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); |
| | } |
| | |
| | .score-card { |
| | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02); |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .score-card:hover { |
| | transform: translateY(-2px); |
| | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03); |
| | } |
| | |
| | .progress-ring { |
| | transform: rotate(-90deg); |
| | } |
| | |
| | .progress-ring-circle { |
| | transition: stroke-dashoffset 0.5s; |
| | transform-origin: 50% 50%; |
| | } |
| | </style> |
| | </head> |
| | <body class="min-h-screen gradient-bg"> |
| | <div class="container mx-auto px-4 py-8"> |
| | |
| | <header class="mb-8"> |
| | <div class="flex justify-between items-center"> |
| | <div> |
| | <h1 class="text-3xl font-bold text-gray-800">Performance Pulse</h1> |
| | <p class="text-gray-600">实时绩效数据仪表盘</p> |
| | </div> |
| | <div class="flex items-center space-x-4"> |
| | <div class="bg-white rounded-full p-2 shadow-sm"> |
| | <i data-feather="bell" class="text-gray-600"></i> |
| | </div> |
| | <div class="flex items-center"> |
| | <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium"> |
| | 张 |
| | </div> |
| | <span class="ml-2 font-medium text-gray-700">张三</span> |
| | </div> |
| | </div> |
| | </div> |
| | </header> |
| |
|
| | |
| | <main> |
| | |
| | <section class="mb-12"> |
| | <h2 class="text-xl font-semibold text-gray-700 mb-6">综合表现概览</h2> |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| | |
| | <div class="bg-white rounded-xl p-6 score-card"> |
| | <div class="flex justify-between items-start mb-4"> |
| | <h3 class="text-lg font-medium text-gray-700">综合得分</h3> |
| | <div class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full"> |
| | 优秀 |
| | </div> |
| | </div> |
| | <div class="flex items-center justify-center mb-4"> |
| | <div class="relative w-32 h-32"> |
| | <svg class="w-full h-full" viewBox="0 0 100 100"> |
| | <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" /> |
| | <circle class="text-blue-500 progress-ring-circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" |
| | stroke-dasharray="251.2" stroke-dashoffset="44.7" /> |
| | </svg> |
| | <div class="absolute inset-0 flex items-center justify-center"> |
| | <span class="text-3xl font-bold text-gray-800">82.3</span> |
| | </div> |
| | </div> |
| | </div> |
| | <p class="text-center text-gray-600">高于团队平均水平 12.3 分</p> |
| | </div> |
| |
|
| | |
| | <div class="bg-white rounded-xl p-6 score-card"> |
| | <div class="flex justify-between items-start mb-4"> |
| | <h3 class="text-lg font-medium text-gray-700">个人贡献率</h3> |
| | <div class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full"> |
| | 领先 |
| | </div> |
| | </div> |
| | <div class="flex items-center justify-center mb-4"> |
| | <div class="text-5xl font-bold text-gray-800">50.6%</div> |
| | </div> |
| | <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| | <div class="bg-green-500 h-2.5 rounded-full" style="width: 50.6%"></div> |
| | </div> |
| | <p class="text-center text-gray-600 mt-2">团队贡献排名第一</p> |
| | </div> |
| |
|
| | |
| | <div class="bg-white rounded-xl p-6 score-card"> |
| | <div class="flex justify-between items-start mb-4"> |
| | <h3 class="text-lg font-medium text-gray-700">团队排名</h3> |
| | <div class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full"> |
| | 卓越 |
| | </div> |
| | </div> |
| | <div class="flex items-center justify-center mb-4"> |
| | <div class="relative"> |
| | <div class="w-32 h-32 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-full flex items-center justify-center"> |
| | <span class="text-4xl font-bold text-white">#1</span> |
| | </div> |
| | <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-white px-3 py-1 rounded-full shadow-sm"> |
| | <span class="text-sm font-medium text-purple-600">Top Performer</span> |
| | </div> |
| | </div> |
| | </div> |
| | <p class="text-center text-gray-600">领先第二名 8.7 分</p> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section> |
| | <h2 class="text-xl font-semibold text-gray-700 mb-6">三大维度得分</h2> |
| | <div class="bg-white rounded-xl p-6 shadow-sm"> |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| | |
| | <div class="border border-gray-100 rounded-lg p-4"> |
| | <div class="flex justify-between items-center mb-3"> |
| | <h3 class="font-medium text-gray-700">任务执行力</h3> |
| | <span class="text-sm text-gray-500">权重 40%</span> |
| | </div> |
| | <div class="flex items-center mb-2"> |
| | <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| | <div class="bg-blue-500 h-2.5 rounded-full" style="width: 88%"></div> |
| | </div> |
| | <span class="ml-2 text-sm font-medium text-gray-700">88.0</span> |
| | </div> |
| | <p class="text-sm text-gray-500">按时完成率 95%，质量达标率 92%</p> |
| | </div> |
| |
|
| | |
| | <div class="border border-gray-100 rounded-lg p-4"> |
| | <div class="flex justify-between items-center mb-3"> |
| | <h3 class="font-medium text-gray-700">交付质量</h3> |
| | <span class="text-sm text-gray-500">权重 40%</span> |
| | </div> |
| | <div class="flex items-center mb-2"> |
| | <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| | <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 47.5%"></div> |
| | </div> |
| | <span class="ml-2 text-sm font-medium text-gray-700">47.5</span> |
| | </div> |
| | <p class="text-sm text-gray-500">需关注质量提升，当前低于团队平均</p> |
| | </div> |
| |
|
| | |
| | <div class="border border-gray-100 rounded-lg p-4"> |
| | <div class="flex justify-between items-center mb-3"> |
| | <h3 class="font-medium text-gray-700">团队协作</h3> |
| | <span class="text-sm text-gray-500">权重 20%</span> |
| | </div> |
| | <div class="flex items-center mb-2"> |
| | <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| | <div class="bg-green-500 h-2.5 rounded-full" style="width: 100%"></div> |
| | </div> |
| | <span class="ml-2 text-sm font-medium text-gray-700">100.0</span> |
| | </div> |
| | <p class="text-sm text-gray-500">协作满意度 100%，跨团队支持 12 次</p> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="mt-8 bg-blue-50 rounded-lg p-4"> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <i data-feather="alert-circle" class="text-blue-500"></i> |
| | </div> |
| | <div class="ml-3"> |
| | <h3 class="text-sm font-medium text-blue-800">改进建议</h3> |
| | <div class="mt-2 text-sm text-blue-700"> |
| | <p>• 交付质量维度表现较弱，建议加强质量把控流程</p> |
| | <p>• 任务执行力优秀，可分享经验帮助团队提升</p> |
| | <p>• 继续保持卓越的团队协作表现</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| | </main> |
| |
|
| | |
| | <footer class="mt-12 py-6 border-t border-gray-200"> |
| | <div class="flex flex-col md:flex-row justify-between items-center"> |
| | <p class="text-sm text-gray-500">最后更新: 2023年11月15日 14:30</p> |
| | <div class="flex space-x-4 mt-4 md:mt-0"> |
| | <button class="flex items-center text-sm text-gray-600 hover:text-gray-800"> |
| | <i data-feather="download" class="w-4 h-4 mr-1"></i> 导出报告 |
| | </button> |
| | <button class="flex items-center text-sm text-gray-600 hover:text-gray-800"> |
| | <i data-feather="share-2" class="w-4 h-4 mr-1"></i> 分享 |
| | </button> |
| | </div> |
| | </div> |
| | </footer> |
| | </div> |
| |
|
| | <script> |
| | feather.replace(); |
| | |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | const circle = document.querySelector('.progress-ring-circle'); |
| | const radius = circle.r.baseVal.value; |
| | const circumference = 2 * Math.PI * radius; |
| | const compositeScore = 82.3; |
| | const offset = circumference - (compositeScore / 100) * circumference; |
| | |
| | circle.style.strokeDasharray = circumference; |
| | circle.style.strokeDashoffset = offset; |
| | }); |
| | </script> |
| | </body> |
| | </html> |
| |
|
