Hugging Face's logo

Spaces:
yinshouping
/
performance-pulse-dashboard
Running

App Files Community
yinshouping commited on
Commit
6a5925e
·
verified ·
1 Parent(s): ceb2bf0

{

Browse files

"user_info": {
"name": "张三",
"role": "member"
},
"overall_performance": {
"composite_score": {
"value": 82.3,
"description": "综合得分"
},
"individual_contribution_rate": {
"value": "50.6%",
"description": "个人贡献率"
},
"team_ranking": {
"value": "#1",
"description": "团队排名"
}
},
"three_major_dimension_scores": {
"title": "三大维度得分",
"dimensions": [
{
"name": "任务执行力",
"score": 88.0,
"weight": "40%"
},
{
"name": "交付质量",
"score": 47.5,
"weight": "40%"
},
{
"name": "团队协作",
"score": 100.0,
"weight": "20%"
}
]
}
}

基于json里的内容，对ui进行全新设计，要求 高端、专业，便于用户理解数据的价值

Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +236 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
  title: Performance Pulse Dashboard
3
- emoji: 🏢
4
- colorFrom: indigo
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
  title: Performance Pulse Dashboard
3
+ colorFrom: yellow
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,237 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Performance Pulse Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
12
+
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ background-color: #f8fafc;
16
+ }
17
+
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
20
+ }
21
+
22
+ .score-card {
23
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
24
+ transition: all 0.3s ease;
25
+ }
26
+
27
+ .score-card:hover {
28
+ transform: translateY(-2px);
29
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
30
+ }
31
+
32
+ .progress-ring {
33
+ transform: rotate(-90deg);
34
+ }
35
+
36
+ .progress-ring-circle {
37
+ transition: stroke-dashoffset 0.5s;
38
+ transform-origin: 50% 50%;
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="min-h-screen gradient-bg">
43
+ <div class="container mx-auto px-4 py-8">
44
+ <!-- Header -->
45
+ <header class="mb-8">
46
+ <div class="flex justify-between items-center">
47
+ <div>
48
+ <h1 class="text-3xl font-bold text-gray-800">Performance Pulse</h1>
49
+ <p class="text-gray-600">实时绩效数据仪表盘</p>
50
+ </div>
51
+ <div class="flex items-center space-x-4">
52
+ <div class="bg-white rounded-full p-2 shadow-sm">
53
+ <i data-feather="bell" class="text-gray-600"></i>
54
+ </div>
55
+ <div class="flex items-center">
56
+ <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">
57
+ 张
58
+ </div>
59
+ <span class="ml-2 font-medium text-gray-700">张三</span>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ </header>
64
+
65
+ <!-- Main Content -->
66
+ <main>
67
+ <!-- Overall Performance -->
68
+ <section class="mb-12">
69
+ <h2 class="text-xl font-semibold text-gray-700 mb-6">综合表现概览</h2>
70
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
71
+ <!-- Composite Score -->
72
+ <div class="bg-white rounded-xl p-6 score-card">
73
+ <div class="flex justify-between items-start mb-4">
74
+ <h3 class="text-lg font-medium text-gray-700">综合得分</h3>
75
+ <div class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
76
+ 优秀
77
+ </div>
78
+ </div>
79
+ <div class="flex items-center justify-center mb-4">
80
+ <div class="relative w-32 h-32">
81
+ <svg class="w-full h-full" viewBox="0 0 100 100">
82
+ <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
83
+ <circle class="text-blue-500 progress-ring-circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50"
84
+ stroke-dasharray="251.2" stroke-dashoffset="44.7" />
85
+ </svg>
86
+ <div class="absolute inset-0 flex items-center justify-center">
87
+ <span class="text-3xl font-bold text-gray-800">82.3</span>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ <p class="text-center text-gray-600">高于团队平均水平 12.3 分</p>
92
+ </div>
93
+
94
+ <!-- Individual Contribution -->
95
+ <div class="bg-white rounded-xl p-6 score-card">
96
+ <div class="flex justify-between items-start mb-4">
97
+ <h3 class="text-lg font-medium text-gray-700">个人贡献率</h3>
98
+ <div class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">
99
+ 领先
100
+ </div>
101
+ </div>
102
+ <div class="flex items-center justify-center mb-4">
103
+ <div class="text-5xl font-bold text-gray-800">50.6%</div>
104
+ </div>
105
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
106
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 50.6%"></div>
107
+ </div>
108
+ <p class="text-center text-gray-600 mt-2">团队贡献排名第一</p>
109
+ </div>
110
+
111
+ <!-- Team Ranking -->
112
+ <div class="bg-white rounded-xl p-6 score-card">
113
+ <div class="flex justify-between items-start mb-4">
114
+ <h3 class="text-lg font-medium text-gray-700">团队排名</h3>
115
+ <div class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">
116
+ 卓越
117
+ </div>
118
+ </div>
119
+ <div class="flex items-center justify-center mb-4">
120
+ <div class="relative">
121
+ <div class="w-32 h-32 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-full flex items-center justify-center">
122
+ <span class="text-4xl font-bold text-white">#1</span>
123
+ </div>
124
+ <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-white px-3 py-1 rounded-full shadow-sm">
125
+ <span class="text-sm font-medium text-purple-600">Top Performer</span>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ <p class="text-center text-gray-600">领先第二名 8.7 分</p>
130
+ </div>
131
+ </div>
132
+ </section>
133
+
134
+ <!-- Three Major Dimensions -->
135
+ <section>
136
+ <h2 class="text-xl font-semibold text-gray-700 mb-6">三大维度得分</h2>
137
+ <div class="bg-white rounded-xl p-6 shadow-sm">
138
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
139
+ <!-- Task Execution -->
140
+ <div class="border border-gray-100 rounded-lg p-4">
141
+ <div class="flex justify-between items-center mb-3">
142
+ <h3 class="font-medium text-gray-700">任务执行力</h3>
143
+ <span class="text-sm text-gray-500">权重 40%</span>
144
+ </div>
145
+ <div class="flex items-center mb-2">
146
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
147
+ <div class="bg-blue-500 h-2.5 rounded-full" style="width: 88%"></div>
148
+ </div>
149
+ <span class="ml-2 text-sm font-medium text-gray-700">88.0</span>
150
+ </div>
151
+ <p class="text-sm text-gray-500">按时完成率 95%，质量达标率 92%</p>
152
+ </div>
153
+
154
+ <!-- Delivery Quality -->
155
+ <div class="border border-gray-100 rounded-lg p-4">
156
+ <div class="flex justify-between items-center mb-3">
157
+ <h3 class="font-medium text-gray-700">交付质量</h3>
158
+ <span class="text-sm text-gray-500">权重 40%</span>
159
+ </div>
160
+ <div class="flex items-center mb-2">
161
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
162
+ <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 47.5%"></div>
163
+ </div>
164
+ <span class="ml-2 text-sm font-medium text-gray-700">47.5</span>
165
+ </div>
166
+ <p class="text-sm text-gray-500">需关注质量提升，当前低于团队平均</p>
167
+ </div>
168
+
169
+ <!-- Team Collaboration -->
170
+ <div class="border border-gray-100 rounded-lg p-4">
171
+ <div class="flex justify-between items-center mb-3">
172
+ <h3 class="font-medium text-gray-700">团队协作</h3>
173
+ <span class="text-sm text-gray-500">权重 20%</span>
174
+ </div>
175
+ <div class="flex items-center mb-2">
176
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
177
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 100%"></div>
178
+ </div>
179
+ <span class="ml-2 text-sm font-medium text-gray-700">100.0</span>
180
+ </div>
181
+ <p class="text-sm text-gray-500">协作满意度 100%，跨团队支持 12 次</p>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Improvement Suggestions -->
186
+ <div class="mt-8 bg-blue-50 rounded-lg p-4">
187
+ <div class="flex items-start">
188
+ <div class="flex-shrink-0">
189
+ <i data-feather="alert-circle" class="text-blue-500"></i>
190
+ </div>
191
+ <div class="ml-3">
192
+ <h3 class="text-sm font-medium text-blue-800">改进建议</h3>
193
+ <div class="mt-2 text-sm text-blue-700">
194
+ <p>• 交付质量维度表现较弱，建议加强质量把控流程</p>
195
+ <p>• 任务执行力优秀，可分享经验帮助团队提升</p>
196
+ <p>• 继续保持卓越的团队协作表现</p>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </section>
203
+ </main>
204
+
205
+ <!-- Footer -->
206
+ <footer class="mt-12 py-6 border-t border-gray-200">
207
+ <div class="flex flex-col md:flex-row justify-between items-center">
208
+ <p class="text-sm text-gray-500">最后更新: 2023年11月15日 14:30</p>
209
+ <div class="flex space-x-4 mt-4 md:mt-0">
210
+ <button class="flex items-center text-sm text-gray-600 hover:text-gray-800">
211
+ <i data-feather="download" class="w-4 h-4 mr-1"></i> 导出报告
212
+ </button>
213
+ <button class="flex items-center text-sm text-gray-600 hover:text-gray-800">
214
+ <i data-feather="share-2" class="w-4 h-4 mr-1"></i> 分享
215
+ </button>
216
+ </div>
217
+ </div>
218
+ </footer>
219
+ </div>
220
+
221
+ <script>
222
+ feather.replace();
223
+
224
+ // Calculate progress ring offset
225
+ document.addEventListener('DOMContentLoaded', function() {
226
+ const circle = document.querySelector('.progress-ring-circle');
227
+ const radius = circle.r.baseVal.value;
228
+ const circumference = 2 * Math.PI * radius;
229
+ const compositeScore = 82.3;
230
+ const offset = circumference - (compositeScore / 100) * circumference;
231
+
232
+ circle.style.strokeDasharray = circumference;
233
+ circle.style.strokeDashoffset = offset;
234
+ });
235
+ </script>
236
+ </body>
237
  </html>