Hugging Face's logo

Spaces:
maomaobj
/
tcu
Running

App Files Community
maomaobj commited on
Commit
ef66f43
·
verified ·
1 Parent(s): 69fc188

请补足示例数据

Browse files
Files changed (2) hide show
  1. components/stats-card.js +3 -1
  2. index.html +122 -6
components/stats-card.js CHANGED
@@ -27,7 +27,9 @@ class StatsCard extends HTMLElement {
27
  green: { bg: 'bg-green-50', text: 'text-green-600' },
28
  orange: { bg: 'bg-orange-50', text: 'text-orange-600' },
29
  indigo: { bg: 'bg-indigo-50', text: 'text-indigo-600' },
30
- }[color];
 
 
31
 
32
  this.shadowRoot.innerHTML = `
33
  <style>
 
27
  green: { bg: 'bg-green-50', text: 'text-green-600' },
28
  orange: { bg: 'bg-orange-50', text: 'text-orange-600' },
29
  indigo: { bg: 'bg-indigo-50', text: 'text-indigo-600' },
30
+ red: { bg: 'bg-red-50', text: 'text-red-600' },
31
+ yellow: { bg: 'bg-yellow-50', text: 'text-yellow-600' },
32
+ }[color];
33
 
34
  this.shadowRoot.innerHTML = `
35
  <style>
index.html CHANGED
@@ -41,10 +41,16 @@
41
  </stats-card>
42
  <stats-card
43
  title="离线车辆"
44
- value="606"
45
  icon="alert-circle"
46
  color="orange">
47
  </stats-card>
 
 
 
 
 
 
48
  <stats-card
49
  title="激活TCU"
50
  value="1,792"
@@ -101,10 +107,69 @@
101
  <button class="text-indigo-600 hover:text-indigo-900 mr-3">查看</button>
102
  <button class="text-indigo-600 hover:text-indigo-900 mr-3">配置</button>
103
  <button class="text-indigo-600 hover:text-indigo-900">OTA升级</button>
104
- </td>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
105
  </tr>
106
- <!-- More rows... -->
107
- </tbody>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
108
  </table>
109
  </div>
110
  <div class="px-6 py-4 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
@@ -152,8 +217,59 @@
152
  <button class="text-indigo-600 hover:text-indigo-900">详情</button>
153
  </td>
154
  </tr>
155
- <!-- 更多车辆数据行... -->
156
- </tbody>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
157
  </table>
158
  </div>
159
  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 
41
  </stats-card>
42
  <stats-card
43
  title="离线车辆"
44
+ value="452"
45
  icon="alert-circle"
46
  color="orange">
47
  </stats-card>
48
+ <stats-card
49
+ title="异常车辆"
50
+ value="154"
51
+ icon="alert-octagon"
52
+ color="red">
53
+ </stats-card>
54
  <stats-card
55
  title="激活TCU"
56
  value="1,792"
 
107
  <button class="text-indigo-600 hover:text-indigo-900 mr-3">查看</button>
108
  <button class="text-indigo-600 hover:text-indigo-900 mr-3">配置</button>
109
  <button class="text-indigo-600 hover:text-indigo-900">OTA升级</button>
110
+ </td>
111
+ </tr>
112
+ <tr>
113
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">TCU-5291-CD</td>
114
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">VH-3942-XY</td>
115
+ <td class="px-6 py-4 whitespace-nowrap">
116
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">离线</span>
117
+ </td>
118
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3小时前</td>
119
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">v2.2.1</td>
120
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">已绑定</td>
121
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
122
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">查看</button>
123
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">配置</button>
124
+ <button class="text-indigo-600 hover:text-indigo-900">OTA升级</button>
125
+ </td>
126
  </tr>
127
+ <tr>
128
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">TCU-6735-EF</td>
129
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">VH-5821-YZ</td>
130
+ <td class="px-6 py-4 whitespace-nowrap">
131
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">在线</span>
132
+ </td>
133
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5分钟前</td>
134
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">v2.4.0</td>
135
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">已绑定</td>
136
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
137
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">查看</button>
138
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">配置</button>
139
+ <button class="text-indigo-600 hover:text-indigo-900">OTA升级</button>
140
+ </td>
141
+ </tr>
142
+ <tr>
143
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">TCU-7821-GH</td>
144
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">-</td>
145
+ <td class="px-6 py-4 whitespace-nowrap">
146
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">待激活</span>
147
+ </td>
148
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
149
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">v2.3.0</td>
150
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">未绑定</td>
151
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
152
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">查看</button>
153
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">配置</button>
154
+ <button class="text-indigo-600 hover:text-indigo-900">OTA升级</button>
155
+ </td>
156
+ </tr>
157
+ <tr>
158
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">TCU-9156-IJ</td>
159
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">VH-7293-XZ</td>
160
+ <td class="px-6 py-4 whitespace-nowrap">
161
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">在线</span>
162
+ </td>
163
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1分钟前</td>
164
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">v2.3.8</td>
165
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">已绑定</td>
166
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
167
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">查看</button>
168
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">配置</button>
169
+ <button class="text-indigo-600 hover:text-indigo-900">OTA升级</button>
170
+ </td>
171
+ </tr>
172
+ </tbody>
173
  </table>
174
  </div>
175
  <div class="px-6 py-4 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
 
217
  <button class="text-indigo-600 hover:text-indigo-900">详情</button>
218
  </td>
219
  </tr>
220
+ <tr>
221
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">VH-3942-XY</td>
222
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">东风 天龙</td>
223
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">华北物流中心</td>
224
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">TCU-5291-CD</td>
225
+ <td class="px-6 py-4 whitespace-nowrap">
226
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">维修中</span>
227
+ </td>
228
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
229
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">查看轨迹</button>
230
+ <button class="text-indigo-600 hover:text-indigo-900">详情</button>
231
+ </td>
232
+ </tr>
233
+ <tr>
234
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">VH-5821-YZ</td>
235
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">解放 J6</td>
236
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">华南物流中心</td>
237
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">TCU-6735-EF</td>
238
+ <td class="px-6 py-4 whitespace-nowrap">
239
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">运行中</span>
240
+ </td>
241
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
242
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">查看轨迹</button>
243
+ <button class="text-indigo-600 hover:text-indigo-900">详情</button>
244
+ </td>
245
+ </tr>
246
+ <tr>
247
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">VH-7293-XZ</td>
248
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">重汽 豪沃</td>
249
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">华中物流中心</td>
250
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">TCU-9156-IJ</td>
251
+ <td class="px-6 py-4 whitespace-nowrap">
252
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">待命</span>
253
+ </td>
254
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
255
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">查看轨迹</button>
256
+ <button class="text-indigo-600 hover:text-indigo-900">详情</button>
257
+ </td>
258
+ </tr>
259
+ <tr>
260
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">VH-8642-ZX</td>
261
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">陕汽 德龙</td>
262
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">西北物流中心</td>
263
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">-</td>
264
+ <td class="px-6 py-4 whitespace-nowrap">
265
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">未激活</span>
266
+ </td>
267
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
268
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">查看轨迹</button>
269
+ <button class="text-indigo-600 hover:text-indigo-900">详情</button>
270
+ </td>
271
+ </tr>
272
+ </tbody>
273
  </table>
274
  </div>
275
  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>