Hugging Face's logo

Spaces:
maomaobj
/
hetong3
Running

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

最新规则修改记录下面的内容错乱了 - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +544 -540
index.html CHANGED
@@ -6,622 +6,626 @@
6
  <title>国央企业务合规系统</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
- <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
10
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  <style>
12
- .card-hover:hover {
13
- transform: translateY(-5px);
14
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
 
15
  }
16
- .heatmap-container {
17
- height: 100%;
18
- min-height: 300px;
 
 
 
 
 
 
 
19
  }
20
- .scroll-container {
21
- scrollbar-width: thin;
22
- scrollbar-color: #e2e8f0 #f8fafc;
 
 
 
 
 
 
 
 
23
  }
24
- .scroll-container::-webkit-scrollbar {
25
- height: 6px;
26
- width: 6px;
 
27
  }
28
- .scroll-container::-webkit-scrollbar-track {
29
- background: #f8fafc;
 
 
30
  }
31
- .scroll-container::-webkit-scrollbar-thumb {
32
- background-color: #e2e8f0;
33
- border-radius: 6px;
 
34
  }
35
- .blink-warning {
36
- animation: blink 2s infinite;
 
 
 
37
  }
38
- @keyframes blink {
39
- 0% { opacity: 1; }
40
- 50% { opacity: 0.5; }
41
- 100% { opacity: 1; }
42
  }
43
  </style>
44
  </head>
45
- <body class="bg-gray-50 font-sans">
46
- <div class="container mx-auto px-4 py-6 max-w-screen-xxl">
47
- <!-- Header Section -->
48
- <header class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4 bg-blue-50 px-6 py-4 rounded-xl border border-blue-100">
49
- <div>
50
- <h1 class="text-3xl font-bold text-gray-800">国央企业务合规系统</h1>
51
- <p class="text-gray-600 mt-1">企业合规风险智能监控平台</p>
 
 
52
  </div>
53
 
54
- <div class="flex flex-col md:flex-row items-start md:items-center gap-4 w-full md:w-auto">
55
- <div class="text-right">
56
- <p class="text-lg font-medium text-blue-800">您好，李总</p>
57
- <p class="text-blue-600" id="currentDateTime"></p>
 
58
  </div>
59
 
60
- <div class="relative w-full md:w-64">
61
- <input type="text" placeholder="搜索合同/项目/单位..."
62
- class="w-full pl-10 pr-4 py-2 border border-blue-200 bg-white rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
63
- <i class="fas fa-search absolute left-3 top-3 text-blue-400"></i>
64
- </div>
65
- </div>
66
- </header>
67
-
68
- <!-- Stats Cards -->
69
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 mb-8">
70
- <!-- Card 1 -->
71
- <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 card-hover transition-all duration-300">
72
- <div class="flex justify-between items-start">
73
- <div>
74
- <p class="text-gray-500 text-sm">在管合同总数</p>
75
- <h3 class="text-2xl font-bold text-gray-800 mt-1">2,487</h3>
76
  </div>
77
- <div class="bg-blue-100 p-2 rounded-lg text-blue-600">
78
- <i class="fas fa-file-contract text-lg"></i>
 
 
 
 
 
 
 
 
 
 
79
  </div>
80
  </div>
81
- <div class="mt-3 flex items-center text-sm text-green-600">
82
- <i class="fas fa-arrow-up mr-1"></i>
83
- <span>同比 +12.5%</span>
84
- </div>
85
  </div>
86
-
87
- <!-- Card 2 -->
88
- <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 card-hover transition-all duration-300">
 
 
89
  <div class="flex justify-between items-start">
90
- <div>
91
- <p class="text-gray-500 text-sm">本年新签金额</p>
92
- <h3 class="text-2xl font-bold text-gray-800 mt-1">¥8.72亿</h3>
93
- </div>
94
- <div class="bg-green-100 p-2 rounded-lg text-green-600">
95
- <i class="fas fa-handshake text-lg"></i>
96
- </div>
97
  </div>
98
- <div class="mt-3 flex items-center text-sm text-green-600">
99
- <i class="fas fa-arrow-up mr-1"></i>
100
- <span>同比 +18.3%</span>
101
  </div>
102
  </div>
103
-
104
- <!-- Card 3 -->
105
- <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 card-hover transition-all duration-300">
106
  <div class="flex justify-between items-start">
107
- <div>
108
- <p class="text-gray-500 text-sm">执行中合同占比</p>
109
- <h3 class="text-2xl font-bold text-gray-800 mt-1">68.2%</h3>
110
- </div>
111
- <div class="bg-purple-100 p-2 rounded-lg text-purple-600">
112
- <i class="fas fa-tasks text-lg"></i>
113
- </div>
114
  </div>
115
- <div class="mt-3 flex items-center text-sm text-red-600">
116
- <i class="fas fa-arrow-down mr-1"></i>
117
- <span>同比 -3.1%</span>
118
  </div>
119
  </div>
120
-
121
- <!-- Card 4 -->
122
- <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 card-hover transition-all duration-300">
123
  <div class="flex justify-between items-start">
124
- <div>
125
- <p class="text-gray-500 text-sm">风险预警总数</p>
126
- <h3 class="text-2xl font-bold text-red-600 mt-1">127</h3>
127
- </div>
128
- <div class="bg-red-100 p-2 rounded-lg text-red-600">
129
- <i class="fas fa-exclamation-triangle text-lg"></i>
130
- </div>
131
  </div>
132
- <div class="mt-3 flex items-center text-sm text-red-600">
133
- <i class="fas fa-arrow-up mr-1"></i>
134
- <span>同比 +25.7%</span>
135
  </div>
136
  </div>
137
-
138
- <!-- Card 5 -->
139
- <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 card-hover transition-all duration-300">
140
  <div class="flex justify-between items-start">
141
- <div>
142
- <p class="text-gray-500 text-sm">合规问题发现率</p>
143
- <h3 class="text-2xl font-bold text-gray-800 mt-1">4.8%</h3>
144
- </div>
145
- <div class="bg-yellow-100 p-2 rounded-lg text-yellow-600">
146
- <i class="fas fa-search text-lg"></i>
147
- </div>
148
  </div>
149
- <div class="mt-3 flex items-center text-sm text-green-600">
150
- <i class="fas fa-arrow-down mr-1"></i>
151
- <span>同比 -1.2%</span>
152
  </div>
153
  </div>
154
-
155
- <!-- Card 6 -->
156
- <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 card-hover transition-all duration-300">
157
  <div class="flex justify-between items-start">
158
- <div>
159
- <p class="text-gray-500 text-sm">廉洁风险数量</p>
160
- <h3 class="text-2xl font-bold text-orange-600 mt-1">23</h3>
161
- </div>
162
- <div class="bg-orange-100 p-2 rounded-lg text-orange-600">
163
- <i class="fas fa-shield-alt text-lg"></i>
164
- </div>
165
  </div>
166
- <div class="mt-3 flex items-center text-sm text-red-600">
167
- <i class="fas fa-arrow-up mr-1"></i>
168
- <span>同比 +8.3%</span>
169
  </div>
170
  </div>
171
- </div>
172
-
173
- <!-- Main Content -->
174
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
175
- <!-- Left Panel - Heatmap -->
176
- <div class="lg:col-span-2 bg-white p-4 rounded-xl shadow-sm border border-gray-100">
177
- <div class="flex justify-between items-center mb-4">
178
- <div>
179
- <h2 class="text-xl font-semibold text-gray-800">业务合规态势热��图</h2>
180
- <p class="text-sm text-gray-500 mt-1">数字表示合规评分（0-100分），分数越高代表合规状况越好</p>
181
- </div>
182
- <div class="flex space-x-2">
183
- <button class="px-3 py-1 bg-blue-50 text-blue-600 rounded-lg text-sm">板块视图</button>
184
- <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm">子公司视图</button>
185
- <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm">区域视图</button>
186
- </div>
187
- </div>
188
- <div class="heatmap-container" id="heatmapChart"></div>
189
- <p class="text-sm text-gray-500 mt-2 text-center">注：热力图中数字表示各业务板块在各区域的合规评分（0-100分），分数越高代表合规状况越好</p>
190
- <p class="text-xs text-gray-400 mt-1 text-center">数字表示合规评分，范围0-100分</p>
191
  </div>
192
-
193
- <!-- Right Panel - Risk List -->
194
- <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
195
- <div class="flex justify-between items-center mb-4">
196
- <h2 class="text-xl font-semibold text-gray-800">重点风险项目</h2>
197
- <button class="text-blue-600 text-sm flex items-center">
198
- <i class="fas fa-sliders-h mr-1"></i> 筛选
199
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
200
  </div>
201
 
202
- <div class="space-y-4 max-h-[500px] overflow-y-auto scroll-container pr-2">
203
- <!-- Risk Item 1 -->
204
- <div class="border-l-4 border-red-500 pl-3 py-2">
205
- <div class="flex justify-between items-start">
206
- <div>
207
- <p class="font-medium text-gray-800">CT-2023-0587</p>
208
- <p class="text-sm text-gray-500">金额: ¥28,750,000</p>
209
- </div>
210
- <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">高风险</span>
211
- </div>
212
- <p class="text-sm mt-1 text-gray-700 truncate">合同条款存在重大不利变更，可能造成国有资产流失风险</p>
213
- <div class="flex justify-between items-center mt-2 text-xs text-gray-500">
214
- <span>能源事业部</span>
215
- <span>2023-08-15</span>
216
- </div>
217
- </div>
218
-
219
- <!-- Risk Item 2 -->
220
- <div class="border-l-4 border-orange-500 pl-3 py-2">
221
- <div class="flex justify-between items-start">
222
- <div>
223
- <p class="font-medium text-gray-800">CT-2023-0921</p>
224
- <p class="text-sm text-gray-500">金额: ¥15,200,000</p>
225
- </div>
226
- <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded-full">廉洁风险</span>
227
- </div>
228
- <p class="text-sm mt-1 text-gray-700 truncate">供应商与审批人员存在潜在关联关系未披露</p>
229
- <div class="flex justify-between items-center mt-2 text-xs text-gray-500">
230
- <span>建设公司</span>
231
- <span>2023-09-03</span>
232
- </div>
233
- </div>
234
-
235
- <!-- Risk Item 3 -->
236
- <div class="border-l-4 border-red-500 pl-3 py-2">
237
- <div class="flex justify-between items-start">
238
- <div>
239
- <p class="font-medium text-gray-800">CT-2023-0765</p>
240
- <p class="text-sm text-gray-500">金额: ¥42,300,000</p>
241
- </div>
242
- <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">高风险</span>
243
- </div>
244
- <p class="text-sm mt-1 text-gray-700 truncate">付款条件异常，预付款比例达60%且无担保措施</p>
245
- <div class="flex justify-between items-center mt-2 text-xs text-gray-500">
246
- <span>国际公司</span>
247
- <span>2023-08-28</span>
248
- </div>
249
- </div>
250
-
251
- <!-- Risk Item 4 -->
252
- <div class="border-l-4 border-yellow-500 pl-3 py-2">
253
- <div class="flex justify-between items-start">
254
- <div>
255
- <p class="font-medium text-gray-800">CT-2023-1042</p>
256
- <p class="text-sm text-gray-500">金额: ¥9,800,000</p>
257
- </div>
258
- <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">审批异常</span>
259
- </div>
260
- <p class="text-sm mt-1 text-gray-700 truncate">合同审批流程中3次重大条款变更未经合规审核</p>
261
- <div class="flex justify-between items-center mt-2 text-xs text-gray-500">
262
- <span>科技公司</span>
263
- <span>2023-09-10</span>
264
- </div>
265
- </div>
266
-
267
- <!-- Risk Item 5 -->
268
- <div class="border-l-4 border-orange-500 pl-3 py-2">
269
- <div class="flex justify-between items-start">
270
- <div>
271
- <p class="font-medium text-gray-800">CT-2023-0888</p>
272
- <p class="text-sm text-gray-500">金额: ¥36,500,000</p>
273
- </div>
274
- <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded-full">廉洁风险</span>
275
- </div>
276
- <p class="text-sm mt-1 text-gray-700 truncate">中标单位资质存疑，与招标条件存在明显偏差</p>
277
- <div class="flex justify-between items-center mt-2 text-xs text-gray-500">
278
- <span>工程公司</span>
279
- <span>2023-09-05</span>
280
- </div>
281
  </div>
282
  </div>
283
- </div>
284
- </div>
285
-
286
- <!-- Charts Section -->
287
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
288
- <!-- Chart 1 -->
289
- <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
290
- <div class="flex justify-between items-center mb-4">
291
- <h2 class="text-xl font-semibold text-gray-800">合同签约与履约趋势</h2>
292
- <div class="flex space-x-2">
293
- <button class="px-3 py-1 bg-blue-50 text-blue-600 rounded-lg text-sm">年度</button>
294
- <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm">月度</button>
295
  </div>
296
  </div>
297
- <div class="h-64">
298
- <canvas id="contractTrendChart"></canvas>
299
- </div>
300
  </div>
301
-
302
- <!-- Chart 2 -->
303
- <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
304
- <div class="flex justify-between items-center mb-4">
305
- <h2 class="text-xl font-semibold text-gray-800">合规评分变化</h2>
306
- <button class="text-blue-600 text-sm flex items-center">
307
- <i class="fas fa-expand mr-1"></i> 全屏
 
 
308
  </button>
309
- </div>
310
- <div class="h-64">
311
- <canvas id="complianceScoreChart"></canvas>
312
- </div>
313
- </div>
314
-
315
- <!-- Chart 3 -->
316
- <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
317
- <div class="flex justify-between items-center mb-4">
318
- <h2 class="text-xl font-semibold text-gray-800">风险问题闭环处理率</h2>
319
- <button class="text-blue-600 text-sm flex items-center">
320
- <i class="fas fa-download mr-1"></i> 导出
321
  </button>
322
  </div>
323
- <div class="h-64">
324
- <canvas id="riskClosureChart"></canvas>
325
- </div>
326
  </div>
327
- </div>
328
-
329
- <!-- Footer Section -->
330
- <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
331
- <!-- Quick Links -->
332
- <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 lg:col-span-1">
333
- <h2 class="text-xl font-semibold text-gray-800 mb-4">快速访问</h2>
334
- <div class="grid grid-cols-2 gap-3">
335
- <a href="#" class="p-3 bg-blue-50 text-blue-600 rounded-lg flex flex-col items-center justify-center hover:bg-blue-100 transition-colors">
336
- <i class="fas fa-file-signature text-2xl mb-2"></i>
337
- <span class="text-sm">重点合同</span>
338
- </a>
339
- <a href="#" class="p-3 bg-red-50 text-red-600 rounded-lg flex flex-col items-center justify-center hover:bg-red-100 transition-colors">
340
- <i class="fas fa-gavel text-2xl mb-2"></i>
341
- <span class="text-sm">纪检通报</span>
342
- </a>
343
- <a href="#" class="p-3 bg-purple-50 text-purple-600 rounded-lg flex flex-col items-center justify-center hover:bg-purple-100 transition-colors">
344
- <i class="fas fa-search-dollar text-2xl mb-2"></i>
345
- <span class="text-sm">专项审计</span>
346
- </a>
347
- <a href="#" class="p-3 bg-green-50 text-green-600 rounded-lg flex flex-col items-center justify-center hover:bg-green-100 transition-colors">
348
- <i class="fas fa-chart-line text-2xl mb-2"></i>
349
- <span class="text-sm">合规报告</span>
350
- </a>
351
- </div>
352
- </div>
353
-
354
- <!-- Alert Bar -->
355
- <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 lg:col-span-3">
356
- <div class="flex items-center mb-4">
357
- <h2 class="text-xl font-semibold text-gray-800">预警播报</h2>
358
- <div class="ml-2 bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full blink-warning">
359
- <i class="fas fa-exclamation-circle mr-1"></i> 3条未读
360
  </div>
361
  </div>
362
- <div class="bg-red-50 border-l-4 border-red-500 p-3 rounded-r-lg mb-3">
363
- <div class="flex justify-between items-start">
364
- <div>
365
- <p class="font-medium text-red-800">【重大风险预警】</p>
366
- <p class="text-sm text-gray-700 mt-1">东北分公司与长兴建设合同纠纷案可能引发连锁反应，预估损失超5000万元，需立即协调法务介入</p>
367
  </div>
368
- <span class="text-xs text-gray-500 whitespace-nowrap ml-2">今天 09:15</span>
 
 
 
 
 
369
  </div>
370
  </div>
371
- <div class="bg-yellow-50 border-l-4 border-yellow-500 p-3 rounded-r-lg mb-3">
372
- <div class="flex justify-between items-start">
373
- <div>
374
- <p class="font-medium text-yellow-800">【廉洁风险提示】</p>
375
- <p class="text-sm text-gray-700 mt-1">物资采购部张某某审批的5份合同供应商存在关联关系嫌疑，建议纪检部门核查</p>
376
  </div>
377
- <span class="text-xs text-gray-500 whitespace-nowrap ml-2">昨天 16:30</span>
 
 
 
 
 
378
  </div>
379
  </div>
380
- <div class="bg-blue-50 border-l-4 border-blue-500 p-3 rounded-r-lg">
381
- <div class="flex justify-between items-start">
382
- <div>
383
- <p class="font-medium text-blue-800">【合规提醒】</p>
384
- <p class="text-sm text-gray-700 mt-1">第三季度合规检查发现7家子公司存在招标程序不规范问题，整改期限截至9月30日</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
385
  </div>
386
- <span class="text-xs text-gray-500 whitespace-nowrap ml-2">昨天 10:45</span>
387
  </div>
388
  </div>
389
  </div>
390
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
391
  </div>
392
 
393
  <script>
394
- // Update current date and time
395
- function updateDateTime() {
396
- const now = new Date();
397
- const options = {
398
- year: 'numeric',
399
- month: 'long',
400
- day: 'numeric',
401
- weekday: 'long',
402
- hour: '2-digit',
403
- minute: '2-digit',
404
- second: '2-digit'
405
- };
406
- document.getElementById('currentDateTime').textContent = now.toLocaleDateString('zh-CN', options);
407
- }
408
- updateDateTime();
409
- setInterval(updateDateTime, 1000);
410
-
411
- // Initialize heatmap chart
412
- const heatmapChart = echarts.init(document.getElementById('heatmapChart'));
413
- const heatmapOption = {
414
- tooltip: {
415
- position: 'top'
416
- },
417
- grid: {
418
- top: '10%',
419
- left: '3%',
420
- right: '4%',
421
- bottom: '3%',
422
- containLabel: true
423
- },
424
- xAxis: {
425
- type: 'category',
426
- data: ['能源', '建设', '科技', '国际', '物流', '投资', '服务'],
427
- splitArea: {
428
- show: true
429
- }
430
- },
431
- yAxis: {
432
- type: 'category',
433
- data: ['华北', '华东', '华南', '华中', '西南', '西北', '东北'],
434
- splitArea: {
435
- show: true
436
- }
437
- },
438
- visualMap: {
439
- min: 0,
440
- max: 100,
441
- calculable: true,
442
- orient: 'horizontal',
443
- left: 'center',
444
- bottom: '0%',
445
- inRange: {
446
- color: ['#e6f7ff', '#1890ff', '#0050b3']
447
- }
448
- },
449
- series: [{
450
- name: '合规评分',
451
- type: 'heatmap',
452
- data: [
453
- [0, 0, 82], [0, 1, 75], [0, 2, 88], [0, 3, 65], [0, 4, 78], [0, 5, 72], [0, 6, 68],
454
- [1, 0, 92], [1, 1, 85], [1, 2, 78], [1, 3, 82], [1, 4, 75], [1, 5, 88], [1, 6, 72],
455
- [2, 0, 68], [2, 1, 72], [2, 2, 85], [2, 3, 78], [2, 4, 82], [2, 5, 75], [2, 6, 90],
456
- [3, 0, 78], [3, 1, 82], [3, 2, 75], [3, 3, 88], [3, 4, 72], [3, 5, 85], [3, 6, 78],
457
- [4, 0, 85], [4, 1, 78], [4, 2, 82], [4, 3, 75], [4, 4, 88], [4, 5, 72], [4, 6, 85],
458
- [5, 0, 72], [5, 1, 85], [5, 2, 78], [5, 3, 82], [5, 4, 75], [5, 5, 88], [5, 6, 72],
459
- [6, 0, 88], [6, 1, 72], [6, 2, 85], [6, 3, 78], [6, 4, 82], [6, 5, 75], [6, 6, 90]
460
- ],
461
- label: {
462
- show: true,
463
- fontSize: 14,
464
- fontWeight: 'bold',
465
- formatter: function(params) {
466
- return params.data[2];
467
- }
468
  },
469
- emphasis: {
470
- itemStyle: {
471
- shadowBlur: 10,
472
- shadowColor: 'rgba(0, 0, 0, 0.5)'
473
- }
474
- }
475
- }]
476
- };
477
- heatmapChart.setOption(heatmapOption);
478
-
479
- // Contract Trend Chart
480
- const contractTrendCtx = document.getElementById('contractTrendChart').getContext('2d');
481
- const contractTrendChart = new Chart(contractTrendCtx, {
482
- type: 'bar',
483
- data: {
484
- labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
485
- datasets: [
486
- {
487
- label: '签约金额 (百万)',
488
- data: [45, 52, 68, 74, 83, 79, 92, 88],
489
- backgroundColor: 'rgba(54, 162, 235, 0.7)',
490
- borderColor: 'rgba(54, 162, 235, 1)',
491
- borderWidth: 1,
492
- yAxisID: 'y'
493
- },
494
- {
495
- label: '履约率 (%)',
496
- data: [78, 82, 85, 88, 83, 85, 89, 91],
497
- backgroundColor: 'rgba(75, 192, 192, 0.7)',
498
- borderColor: 'rgba(75, 192, 192, 1)',
499
- borderWidth: 1,
500
- type: 'line',
501
- yAxisID: 'y1'
502
- }
503
- ]
504
- },
505
- options: {
506
- responsive: true,
507
- maintainAspectRatio: false,
508
- scales: {
509
- y: {
510
- type: 'linear',
511
- display: true,
512
- position: 'left',
513
- title: {
514
- display: true,
515
- text: '金额 (百万)'
516
- }
517
- },
518
- y1: {
519
- type: 'linear',
520
- display: true,
521
- position: 'right',
522
- min: 50,
523
- max: 100,
524
- grid: {
525
- drawOnChartArea: false
526
- },
527
- title: {
528
- display: true,
529
- text: '履约率 (%)'
530
  }
531
  }
532
  }
533
- }
534
- });
535
-
536
- // Compliance Score Chart
537
- const complianceScoreCtx = document.getElementById('complianceScoreChart').getContext('2d');
538
- const complianceScoreChart = new Chart(complianceScoreCtx, {
539
- type: 'line',
540
- data: {
541
- labels: ['2020', '2021', '2022', '2023'],
542
- datasets: [
543
- {
544
- label: '平均合规评分',
545
- data: [72, 78, 83, 86],
546
- borderColor: 'rgba(153, 102, 255, 1)',
547
- backgroundColor: 'rgba(153, 102, 255, 0.2)',
548
- borderWidth: 2,
549
- tension: 0.3,
550
- fill: true
551
- },
552
- {
553
- label: '最低合规评分',
554
- data: [58, 62, 68, 72],
555
- borderColor: 'rgba(255, 99, 132, 1)',
556
- backgroundColor: 'rgba(255, 99, 132, 0.2)',
557
- borderWidth: 2,
558
- tension: 0.3,
559
- fill: true
560
- }
561
- ]
562
- },
563
- options: {
564
- responsive: true,
565
- maintainAspectRatio: false,
566
- scales: {
567
- y: {
568
- beginAtZero: false,
569
- min: 50,
570
- max: 100
571
  }
572
  }
573
- }
574
- });
575
-
576
- // Risk Closure Chart
577
- const riskClosureCtx = document.getElementById('riskClosureChart').getContext('2d');
578
- const riskClosureChart = new Chart(riskClosureCtx, {
579
- type: 'doughnut',
580
- data: {
581
- labels: ['已闭环', '处理中', '未处理'],
582
- datasets: [{
583
- data: [68, 25, 7],
584
- backgroundColor: [
585
- 'rgba(75, 192, 192, 0.7)',
586
- 'rgba(255, 206, 86, 0.7)',
587
- 'rgba(255, 99, 132, 0.7)'
588
- ],
589
- borderColor: [
590
- 'rgba(75, 192, 192, 1)',
591
- 'rgba(255, 206, 86, 1)',
592
- 'rgba(255, 99, 132, 1)'
593
- ],
594
- borderWidth: 1
595
- }]
596
- },
597
- options: {
598
- responsive: true,
599
- maintainAspectRatio: false,
600
- plugins: {
601
- legend: {
602
- position: 'right'
603
- },
604
- tooltip: {
605
- callbacks: {
606
- label: function(context) {
607
- const label = context.label || '';
608
- const value = context.raw || 0;
609
- const total = context.dataset.data.reduce((a, b) => a + b, 0);
610
- const percentage = Math.round((value / total) * 100);
611
- return `${label}: ${value} (${percentage}%)`;
612
- }
613
  }
614
  }
615
  }
616
- }
617
- });
618
-
619
- // Resize charts on window resize
620
- window.addEventListener('resize', function() {
621
- heatmapChart.resize();
622
- contractTrendChart.resize();
623
- complianceScoreChart.resize();
624
- riskClosureChart.resize();
625
  });
626
  </script>
627
  <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=maomaobj/hetong3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
6
  <title>国央企业务合规系统</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#1a56db',
16
+ secondary: '#0e9f6e',
17
+ warning: '#f59e0b',
18
+ danger: '#e02424',
19
+ light: '#f9fafb',
20
+ dark: '#1f2937'
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
  <style>
27
+ .dashboard-grid {
28
+ display: grid;
29
+ grid-template-columns: 1fr 1fr;
30
+ grid-template-rows: auto auto auto;
31
+ gap: 1.5rem;
32
+ grid-template-areas:
33
+ "header header"
34
+ "cards cards"
35
+ "tasks analysis"
36
+ "rules tracking";
37
  }
38
+
39
+ @media (min-width: 1920px) {
40
+ .dashboard-grid {
41
+ grid-template-columns: 1fr 1fr 1fr;
42
+ grid-template-areas:
43
+ "header header header"
44
+ "cards cards cards"
45
+ "tasks analysis analysis"
46
+ "rules rules tracking";
47
+ }
48
  }
49
+
50
+ .header-area { grid-area: header; }
51
+ .cards-area { grid-area: cards; }
52
+ .tasks-area { grid-area: tasks; }
53
+ .analysis-area { grid-area: analysis; }
54
+ .rules-area { grid-area: rules; }
55
+ .tracking-area { grid-area: tracking; }
56
+
57
+ .card-hover:hover {
58
+ transform: translateY(-3px);
59
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
60
  }
61
+
62
+ .risk-high {
63
+ background-color: #fee2e2;
64
+ color: #b91c1c;
65
  }
66
+
67
+ .risk-medium {
68
+ background-color: #fef3c7;
69
+ color: #b45309;
70
  }
71
+
72
+ .risk-low {
73
+ background-color: #dcfce7;
74
+ color: #047857;
75
  }
76
+
77
+ .progress-bar {
78
+ height: 8px;
79
+ border-radius: 4px;
80
+ overflow: hidden;
81
  }
82
+
83
+ .progress-fill {
84
+ height: 100%;
85
+ transition: width 0.5s ease-in-out;
86
  }
87
  </style>
88
  </head>
89
+ <body class="bg-gray-50 min-h-screen">
90
+ <div class="dashboard-grid max-w-screen-2xl mx-auto p-6">
91
+ <!-- 顶部导航与信息 -->
92
+ <header class="header-area bg-white rounded-xl shadow-sm p-6 flex items-center justify-between">
93
+ <div class="flex items-center">
94
+ <div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center mr-3">
95
+ <i class="fas fa-balance-scale text-white text-xl"></i>
96
+ </div>
97
+ <h1 class="text-2xl font-bold text-gray-800">国央企业务合规系统</h1>
98
  </div>
99
 
100
+ <div class="flex items-center space-x-6">
101
+ <div class="relative">
102
+ <input type="text" placeholder="搜索合同编号、条款关键词、问题ID..."
103
+ class="w-80 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
104
+ <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
105
  </div>
106
 
107
+ <div class="flex items-center space-x-4">
108
+ <div class="text-gray-600">
109
+ <span id="current-date" class="font-medium"></span>
 
 
 
 
 
 
 
 
 
 
 
 
 
110
  </div>
111
+ <button class="relative p-2 text-gray-500 hover:text-primary">
112
+ <i class="fas fa-bell text-xl"></i>
113
+ <span class="absolute top-0 right-0 bg-danger text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
114
+ </button>
115
+ <div class="flex items-center">
116
+ <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3">
117
+ <i class="fas fa-user text-gray-600"></i>
118
+ </div>
119
+ <div>
120
+ <p class="font-medium text-gray-800">您好，张法务</p>
121
+ <p class="text-xs text-gray-500">合规部</p>
122
+ </div>
123
  </div>
124
  </div>
 
 
 
 
125
  </div>
126
+ </header>
127
+
128
+ <!-- 信息总览卡片区 -->
129
+ <section class="cards-area grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
130
+ <div class="card-hover bg-white rounded-xl shadow-sm p-5 flex flex-col cursor-pointer transition-all duration-300">
131
  <div class="flex justify-between items-start">
132
+ <h3 class="text-gray-500 font-medium">今日待审合同</h3>
133
+ <i class="fas fa-file-contract text-primary text-xl"></i>
 
 
 
 
 
134
  </div>
135
+ <div class="mt-4">
136
+ <p class="text-3xl font-bold text-gray-800">24</p>
137
+ <p class="text-sm text-gray-500 mt-1">较昨日 <span class="text-green-500">↓2%</span></p>
138
  </div>
139
  </div>
140
+
141
+ <div class="card-hover bg-white rounded-xl shadow-sm p-5 flex flex-col cursor-pointer transition-all duration-300">
 
142
  <div class="flex justify-between items-start">
143
+ <h3 class="text-gray-500 font-medium">合规风险条款</h3>
144
+ <i class="fas fa-exclamation-triangle text-warning text-xl"></i>
 
 
 
 
 
145
  </div>
146
+ <div class="mt-4">
147
+ <p class="text-3xl font-bold text-gray-800">18</p>
148
+ <p class="text-sm text-gray-500 mt-1">本周发现</p>
149
  </div>
150
  </div>
151
+
152
+ <div class="card-hover bg-white rounded-xl shadow-sm p-5 flex flex-col cursor-pointer transition-all duration-300">
 
153
  <div class="flex justify-between items-start">
154
+ <h3 class="text-gray-500 font-medium">高风险合同</h3>
155
+ <i class="fas fa-radiation text-danger text-xl"></i>
 
 
 
 
 
156
  </div>
157
+ <div class="mt-4">
158
+ <p class="text-3xl font-bold text-gray-800">12.8%</p>
159
+ <p class="text-sm text-gray-500 mt-1">近7日比例</p>
160
  </div>
161
  </div>
162
+
163
+ <div class="card-hover bg-white rounded-xl shadow-sm p-5 flex flex-col cursor-pointer transition-all duration-300">
 
164
  <div class="flex justify-between items-start">
165
+ <h3 class="text-gray-500 font-medium">审查平均耗时</h3>
166
+ <i class="fas fa-stopwatch text-secondary text-xl"></i>
 
 
 
 
 
167
  </div>
168
+ <div class="mt-4">
169
+ <p class="text-3xl font-bold text-gray-800">2.4h</p>
170
+ <p class="text-sm text-gray-500 mt-1">较上月 <span class="text-green-500">↓15%</span></p>
171
  </div>
172
  </div>
173
+
174
+ <div class="card-hover bg-white rounded-xl shadow-sm p-5 flex flex-col cursor-pointer transition-all duration-300">
 
175
  <div class="flex justify-between items-start">
176
+ <h3 class="text-gray-500 font-medium">闭环完成率</h3>
177
+ <i class="fas fa-check-circle text-green-500 text-xl"></i>
 
 
 
 
 
178
  </div>
179
+ <div class="mt-4">
180
+ <p class="text-3xl font-bold text-gray-800">92.5%</p>
181
+ <p class="text-sm text-gray-500 mt-1">问题处理完成率</p>
182
  </div>
183
  </div>
184
+ </section>
185
+
186
+ <!-- 中央左侧模块：待处理任务列表 -->
187
+ <section class="tasks-area bg-white rounded-xl shadow-sm p-6">
188
+ <div class="flex justify-between items-center mb-6">
189
+ <h2 class="text-xl font-bold text-gray-800">待处理合同审核任务</h2>
190
+ <button class="text-primary font-medium flex items-center">
191
+ <i class="fas fa-plus mr-2"></i> 新建任务
192
+ </button>
 
 
 
 
 
 
 
 
 
 
 
193
  </div>
194
+
195
+ <div class="overflow-x-auto">
196
+ <table class="min-w-full divide-y divide-gray-200">
197
+ <thead>
198
+ <tr>
199
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">合同名称</th>
200
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
201
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">提交人</th>
202
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
203
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">进度</th>
204
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
205
+ </tr>
206
+ </thead>
207
+ <tbody class="bg-white divide-y divide-gray-200">
208
+ <tr class="hover:bg-gray-50">
209
+ <td class="px-4 py-4 whitespace-nowrap">
210
+ <div class="font-medium text-gray-900">XX集团采购框架协议</div>
211
+ <div class="text-sm text-gray-500">合同编号: CG202308001</div>
212
+ </td>
213
+ <td class="px-4 py-4 whitespace-nowrap text-gray-900">¥2,450,000</td>
214
+ <td class="px-4 py-4 whitespace-nowrap">
215
+ <div class="text-gray-900">李经理</div>
216
+ <div class="text-sm text-gray-500">采购部</div>
217
+ </td>
218
+ <td class="px-4 py-4 whitespace-nowrap">
219
+ <span class="risk-high px-2 py-1 text-xs rounded-full">高风险</span>
220
+ </td>
221
+ <td class="px-4 py-4 whitespace-nowrap">
222
+ <div class="text-sm text-gray-500 mb-1">法务审核中</div>
223
+ <div class="progress-bar bg-gray-200 w-full">
224
+ <div class="progress-fill bg-primary" style="width: 60%"></div>
225
+ </div>
226
+ </td>
227
+ <td class="px-4 py-4 whitespace-nowrap text-sm">
228
+ <button class="text-primary mr-3"><i class="fas fa-eye mr-1"></i> 查看</button>
229
+ <button class="text-warning mr-3"><i class="fas fa-flag mr-1"></i> 标记</button>
230
+ <button class="text-danger"><i class="fas fa-undo mr-1"></i> 打回</button>
231
+ </td>
232
+ </tr>
233
+ <tr class="hover:bg-gray-50">
234
+ <td class="px-4 py-4 whitespace-nowrap">
235
+ <div class="font-medium text-gray-900">技术合作开发协议</div>
236
+ <div class="text-sm text-gray-500">合同编号: JS202308015</div>
237
+ </td>
238
+ <td class="px-4 py-4 whitespace-nowrap text-gray-900">¥1,780,000</td>
239
+ <td class="px-4 py-4 whitespace-nowrap">
240
+ <div class="text-gray-900">王总监</div>
241
+ <div class="text-sm text-gray-500">研发中心</div>
242
+ </td>
243
+ <td class="px-4 py-4 whitespace-nowrap">
244
+ <span class="risk-medium px-2 py-1 text-xs rounded-full">中风险</span>
245
+ </td>
246
+ <td class="px-4 py-4 whitespace-nowrap">
247
+ <div class="text-sm text-gray-500 mb-1">合规初审</div>
248
+ <div class="progress-bar bg-gray-200 w-full">
249
+ <div class="progress-fill bg-primary" style="width: 30%"></div>
250
+ </div>
251
+ </td>
252
+ <td class="px-4 py-4 whitespace-nowrap text-sm">
253
+ <button class="text-primary mr-3"><i class="fas fa-eye mr-1"></i> 查看</button>
254
+ <button class="text-warning mr-3"><i class="fas fa-flag mr-1"></i> 标记</button>
255
+ <button class="text-danger"><i class="fas fa-undo mr-1"></i> 打回</button>
256
+ </td>
257
+ </tr>
258
+ <tr class="hover:bg-gray-50">
259
+ <td class="px-4 py-4 whitespace-nowrap">
260
+ <div class="font-medium text-gray-900">海外项目分包合同</div>
261
+ <div class="text-sm text-gray-500">合同编号: HW202308007</div>
262
+ </td>
263
+ <td class="px-4 py-4 whitespace-nowrap text-gray-900">$850,000</td>
264
+ <td class="px-4 py-4 whitespace-nowrap">
265
+ <div class="text-gray-900">赵主管</div>
266
+ <div class="text-sm text-gray-500">国际事业部</div>
267
+ </td>
268
+ <td class="px-4 py-4 whitespace-nowrap">
269
+ <span class="risk-high px-2 py-1 text-xs rounded-full">高风险</span>
270
+ </td>
271
+ <td class="px-4 py-4 whitespace-nowrap">
272
+ <div class="text-sm text-gray-500 mb-1">合规复审</div>
273
+ <div class="progress-bar bg-gray-200 w-full">
274
+ <div class="progress-fill bg-primary" style="width: 80%"></div>
275
+ </div>
276
+ </td>
277
+ <td class="px-4 py-4 whitespace-nowrap text-sm">
278
+ <button class="text-primary mr-3"><i class="fas fa-eye mr-1"></i> 查看</button>
279
+ <button class="text-warning mr-3"><i class="fas fa-flag mr-1"></i> 标记</button>
280
+ <button class="text-danger"><i class="fas fa-undo mr-1"></i> 打回</button>
281
+ </td>
282
+ </tr>
283
+ <tr class="hover:bg-gray-50">
284
+ <td class="px-4 py-4 whitespace-nowrap">
285
+ <div class="font-medium text-gray-900">年度服务维护合同</div>
286
+ <div class="text-sm text-gray-500">合同编号: FW202308022</div>
287
+ </td>
288
+ <td class="px-4 py-4 whitespace-nowrap text-gray-900">¥560,000</td>
289
+ <td class="px-4 py-4 whitespace-nowrap">
290
+ <div class="text-gray-900">孙经理</div>
291
+ <div class="text-sm text-gray-500">客户服务部</div>
292
+ </td>
293
+ <td class="px-4 py-4 whitespace-nowrap">
294
+ <span class="risk-low px-2 py-1 text-xs rounded-full">低风险</span>
295
+ </td>
296
+ <td class="px-4 py-4 whitespace-nowrap">
297
+ <div class="text-sm text-gray-500 mb-1">法务终审</div>
298
+ <div class="progress-bar bg-gray-200 w-full">
299
+ <div class="progress-fill bg-primary" style="width: 90%"></div>
300
+ </div>
301
+ </td>
302
+ <td class="px-4 py-4 whitespace-nowrap text-sm">
303
+ <button class="text-primary mr-3"><i class="fas fa-eye mr-1"></i> 查看</button>
304
+ <button class="text-warning mr-3"><i class="fas fa-flag mr-1"></i> 标记</button>
305
+ <button class="text-danger"><i class="fas fa-undo mr-1"></i> 打回</button>
306
+ </td>
307
+ </tr>
308
+ </tbody>
309
+ </table>
310
+ </div>
311
+ </section>
312
+
313
+ <!-- 中央右侧模块：合规风险分析看板 -->
314
+ <section class="analysis-area bg-white rounded-xl shadow-sm p-6">
315
+ <h2 class="text-xl font-bold text-gray-800 mb-6">合规风险分析看板</h2>
316
+
317
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 h-[400px]">
318
+ <div class="bg-gray-50 p-4 rounded-lg flex flex-col">
319
+ <h3 class="font-medium text-gray-700 mb-4">条款风险分类统计</h3>
320
+ <div class="flex-1">
321
+ <canvas id="riskChart"></canvas>
322
+ </div>
323
  </div>
324
 
325
+ <div class="bg-gray-50 p-4 rounded-lg flex flex-col">
326
+ <h3 class="font-medium text-gray-700 mb-4">合规评分分布</h3>
327
+ <div class="flex-1">
328
+ <canvas id="scoreChart"></canvas>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
329
  </div>
330
  </div>
331
+
332
+ <div class="bg-gray-50 p-4 rounded-lg lg:col-span-1 flex flex-col">
333
+ <h3 class="font-medium text-gray-700 mb-4">风险发现趋势</h3>
334
+ <div class="flex-1">
335
+ <canvas id="trendChart"></canvas>
 
 
 
 
 
 
 
336
  </div>
337
  </div>
 
 
 
338
  </div>
339
+ </section>
340
+
341
+ <!-- 下方模块：制度与规则维护区 -->
342
+ <section class="rules-area bg-white rounded-xl shadow-sm p-6">
343
+ <div class="flex justify-between items-center mb-6">
344
+ <h2 class="text-xl font-bold text-gray-800">制度与规则维护</h2>
345
+ <div class="flex space-x-3">
346
+ <button class="bg-primary text-white px-4 py-2 rounded-lg flex items-center">
347
+ <i class="fas fa-plus mr-2"></i> 新增规则
348
  </button>
349
+ <button class="border border-primary text-primary px-4 py-2 rounded-lg flex items-center">
350
+ <i class="fas fa-sync mr-2"></i> 更新模型
 
 
 
 
 
 
 
 
 
 
351
  </button>
352
  </div>
 
 
 
353
  </div>
354
+
355
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
356
+ <div class="border border-gray-200 rounded-lg p-5 hover:border-primary transition-colors">
357
+ <div class="flex items-center mb-4">
358
+ <div class="bg-blue-100 text-blue-800 w-10 h-10 rounded-lg flex items-center justify-center mr-3">
359
+ <i class="fas fa-ban text-lg"></i>
360
+ </div>
361
+ <h3 class="font-bold text-gray-800">禁止条款清单</h3>
362
+ </div>
363
+ <p class="text-gray-600 mb-4">管理禁止在合同中出现的条款内容，包含128条规则</p>
364
+ <div class="flex justify-between text-sm">
365
+ <span class="text-gray-500">最后更新: 2023-08-15</span>
366
+ <button class="text-primary font-medium">管理规则 <i class="fas fa-arrow-right ml-1"></i></button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
367
  </div>
368
  </div>
369
+
370
+ <div class="border border-gray-200 rounded-lg p-5 hover:border-primary transition-colors">
371
+ <div class="flex items-center mb-4">
372
+ <div class="bg-yellow-100 text-yellow-800 w-10 h-10 rounded-lg flex items-center justify-center mr-3">
373
+ <i class="fas fa-exclamation-circle text-lg"></i>
374
  </div>
375
+ <h3 class="font-bold text-gray-800">敏感条款库</h3>
376
+ </div>
377
+ <p class="text-gray-600 mb-4">管理需要特别注意的敏感条款，包含86条规则</p>
378
+ <div class="flex justify-between text-sm">
379
+ <span class="text-gray-500">最后更新: 2023-08-10</span>
380
+ <button class="text-primary font-medium">管理规则 <i class="fas fa-arrow-right ml-1"></i></button>
381
  </div>
382
  </div>
383
+
384
+ <div class="border border-gray-200 rounded-lg p-5 hover:border-primary transition-colors">
385
+ <div class="flex items-center mb-4">
386
+ <div class="bg-green-100 text-green-800 w-10 h-10 rounded-lg flex items-center justify-center mr-3">
387
+ <i class="fas fa-brain text-lg"></i>
388
  </div>
389
+ <h3 class="font-bold text-gray-800">风控关键词模型</h3>
390
+ </div>
391
+ <p class="text-gray-600 mb-4">AI风险识别模型，包含3200个关键词和短语</p>
392
+ <div class="flex justify-between text-sm">
393
+ <span class="text-gray-500">最后更新: 2023-08-18</span>
394
+ <button class="text-primary font-medium">管理模型 <i class="fas fa-arrow-right ml-1"></i></button>
395
  </div>
396
  </div>
397
+ </div>
398
+
399
+ <div class="bg-gray-50 rounded-lg p-4">
400
+ <h3 class="font-medium text-gray-700 mb-4">最新规则修改记录</h3>
401
+ <div class="space-y-3">
402
+ <div class="flex items-start p-3 hover:bg-white rounded-lg">
403
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 flex-shrink-0"></div>
404
+ <div class="ml-4 flex-1">
405
+ <div class="flex justify-between">
406
+ <h4 class="font-medium text-gray-800">新增知识产权归属条款规则</h4>
407
+ <span class="text-sm text-gray-500">今天 10:24</span>
408
+ </div>
409
+ <p class="text-sm text-gray-600 mt-1">张法务 更新了禁止条款清单，新增3条规则</p>
410
+ </div>
411
+ </div>
412
+ <div class="flex items-start p-3 hover:bg-white rounded-lg">
413
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 flex-shrink-0"></div>
414
+ <div class="ml-4 flex-1">
415
+ <div class="flex justify-between">
416
+ <h4 class="font-medium text-gray-800">优化付款条件关键词模型</h4>
417
+ <span class="text-sm text-gray-500">昨天 15:42</span>
418
+ </div>
419
+ <p class="text-sm text-gray-600 mt-1">李合规 更新了风控关键词模型，优化12个关键词</p>
420
  </div>
 
421
  </div>
422
  </div>
423
  </div>
424
+ </section>
425
+
426
+ <!-- 页面右下角模块：问题闭环追踪 -->
427
+ <section class="tracking-area bg-white rounded-xl shadow-sm p-6">
428
+ <div class="flex justify-between items-center mb-6">
429
+ <h2 class="text-xl font-bold text-gray-800">问题闭环追踪</h2>
430
+ <button class="bg-secondary text-white px-4 py-2 rounded-lg flex items-center">
431
+ <i class="fas fa-file-export mr-2"></i> 导出合规报告
432
+ </button>
433
+ </div>
434
+
435
+ <div class="overflow-x-auto">
436
+ <table class="min-w-full divide-y divide-gray-200">
437
+ <thead>
438
+ <tr>
439
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">问题描述</th>
440
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">责任人</th>
441
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">截止时间</th>
442
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
443
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
444
+ </tr>
445
+ </thead>
446
+ <tbody class="bg-white divide-y divide-gray-200">
447
+ <tr class="hover:bg-gray-50">
448
+ <td class="px-4 py-4">
449
+ <div class="font-medium text-gray-900">合同付款条款未明确分期比例</div>
450
+ <div class="text-sm text-gray-500">合同编号: CG202308001</div>
451
+ </td>
452
+ <td class="px-4 py-4 whitespace-nowrap">
453
+ <div class="text-gray-900">王经理</div>
454
+ <div class="text-sm text-gray-500">采购部</div>
455
+ </td>
456
+ <td class="px-4 py-4 whitespace-nowrap text-gray-900">2023-08-25</td>
457
+ <td class="px-4 py-4 whitespace-nowrap">
458
+ <span class="bg-yellow-100 text-yellow-800 px-2 py-1 text-xs rounded-full">整改中</span>
459
+ </td>
460
+ <td class="px-4 py-4 whitespace-nowrap">
461
+ <button class="text-primary"><i class="fas fa-eye mr-1"></i> 详情</button>
462
+ </td>
463
+ </tr>
464
+ <tr class="hover:bg-gray-50">
465
+ <td class="px-4 py-4">
466
+ <div class="font-medium text-gray-900">知识产权归属条款不明确</div>
467
+ <div class="text-sm text-gray-500">合同编号: JS202308015</div>
468
+ </td>
469
+ <td class="px-4 py-4 whitespace-nowrap">
470
+ <div class="text-gray-900">张主管</div>
471
+ <div class="text-sm text-gray-500">研发中心</div>
472
+ </td>
473
+ <td class="px-4 py-4 whitespace-nowrap text-gray-900">2023-08-28</td>
474
+ <td class="px-4 py-4 whitespace-nowrap">
475
+ <span class="bg-yellow-100 text-yellow-800 px-2 py-1 text-xs rounded-full">整改中</span>
476
+ </td>
477
+ <td class="px-4 py-4 whitespace-nowrap">
478
+ <button class="text-primary"><i class="fas fa-eye mr-1"></i> 详情</button>
479
+ </td>
480
+ </tr>
481
+ <tr class="hover:bg-gray-50">
482
+ <td class="px-4 py-4">
483
+ <div class="font-medium text-gray-900">保密条款未明确保密期限</div>
484
+ <div class="text-sm text-gray-500">合同编号: HW202308007</div>
485
+ </td>
486
+ <td class="px-4 py-4 whitespace-nowrap">
487
+ <div class="text-gray-900">赵总监</div>
488
+ <div class="text-sm text-gray-500">国际事业部</div>
489
+ </td>
490
+ <td class="px-4 py-4 whitespace-nowrap text-gray-900">2023-08-20</td>
491
+ <td class="px-4 py-4 whitespace-nowrap">
492
+ <span class="bg-green-100 text-green-800 px-2 py-1 text-xs rounded-full">已整改</span>
493
+ </td>
494
+ <td class="px-4 py-4 whitespace-nowrap">
495
+ <button class="text-primary"><i class="fas fa-eye mr-1"></i> 详情</button>
496
+ </td>
497
+ </tr>
498
+ <tr class="hover:bg-gray-50">
499
+ <td class="px-4 py-4">
500
+ <div class="font-medium text-gray-900">违约责任条款金额计算方式错误</div>
501
+ <div class="text-sm text-gray-500">合同编号: FW202308022</div>
502
+ </td>
503
+ <td class="px-4 py-4 whitespace-nowrap">
504
+ <div class="text-gray-900">孙经理</div>
505
+ <div class="text-sm text-gray-500">客户服务部</div>
506
+ </td>
507
+ <td class="px-4 py-4 whitespace-nowrap text-gray-900">2023-08-22</td>
508
+ <td class="px-4 py-4 whitespace-nowrap">
509
+ <span class="bg-green-100 text-green-800 px-2 py-1 text-xs rounded-full">已整改</span>
510
+ </td>
511
+ <td class="px-4 py-4 whitespace-nowrap">
512
+ <button class="text-primary"><i class="fas fa-eye mr-1"></i> 详情</button>
513
+ </td>
514
+ </tr>
515
+ </tbody>
516
+ </table>
517
+ </div>
518
+ </section>
519
  </div>
520
 
521
  <script>
522
+ // 设置当前日期
523
+ const now = new Date();
524
+ const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
525
+ document.getElementById('current-date').textContent = now.toLocaleDateString('zh-CN', options);
526
+
527
+ // 初始化图表
528
+ document.addEventListener('DOMContentLoaded', function() {
529
+ // 条款风险分类统计图
530
+ const riskCtx = document.getElementById('riskChart').getContext('2d');
531
+ const riskChart = new Chart(riskCtx, {
532
+ type: 'bar',
533
+ data: {
534
+ labels: ['付款风险', '身份风险', '知识产权', '保密条款', '违约责任', '不可抗力'],
535
+ datasets: [{
536
+ label: '风险数量',
537
+ data: [18, 12, 8, 6, 9, 3],
538
+ backgroundColor: [
539
+ 'rgba(231, 76, 60, 0.7)',
540
+ 'rgba(230, 126, 34, 0.7)',
541
+ 'rgba(241, 196, 15, 0.7)',
542
+ 'rgba(46, 134, 222, 0.7)',
543
+ 'rgba(142, 68, 173, 0.7)',
544
+ 'rgba(40, 180, 99, 0.7)'
545
+ ],
546
+ borderColor: [
547
+ 'rgba(231, 76, 60, 1)',
548
+ 'rgba(230, 126, 34, 1)',
549
+ 'rgba(241, 196, 15, 1)',
550
+ 'rgba(46, 134, 222, 1)',
551
+ 'rgba(142, 68, 173, 1)',
552
+ 'rgba(40, 180, 99, 1)'
553
+ ],
554
+ borderWidth: 1
555
+ }]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
556
  },
557
+ options: {
558
+ responsive: true,
559
+ maintainAspectRatio: false,
560
+ scales: {
561
+ y: {
562
+ beginAtZero: true,
563
+ ticks: {
564
+ stepSize: 5
565
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
566
  }
567
  }
568
  }
569
+ });
570
+
571
+ // 合规评分分布图
572
+ const scoreCtx = document.getElementById('scoreChart').getContext('2d');
573
+ const scoreChart = new Chart(scoreCtx, {
574
+ type: 'doughnut',
575
+ data: {
576
+ labels: ['高风险', '中风险', '低风险'],
577
+ datasets: [{
578
+ data: [15, 35, 50],
579
+ backgroundColor: [
580
+ 'rgba(231, 76, 60, 0.7)',
581
+ 'rgba(241, 196, 15, 0.7)',
582
+ 'rgba(40, 180, 99, 0.7)'
583
+ ],
584
+ borderColor: [
585
+ 'rgba(231, 76, 60, 1)',
586
+ 'rgba(241, 196, 15, 1)',
587
+ 'rgba(40, 180, 99, 1)'
588
+ ],
589
+ borderWidth: 1
590
+ }]
591
+ },
592
+ options: {
593
+ responsive: true,
594
+ maintainAspectRatio: false,
595
+ plugins: {
596
+ legend: {
597
+ position: 'bottom'
598
+ }
 
 
 
 
 
 
 
 
599
  }
600
  }
601
+ });
602
+
603
+ // 风险发现趋势图
604
+ const trendCtx = document.getElementById('trendChart').getContext('2d');
605
+ const trendChart = new Chart(trendCtx, {
606
+ type: 'line',
607
+ data: {
608
+ labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
609
+ datasets: [{
610
+ label: '合规问题数量',
611
+ data: [42, 38, 55, 48, 60, 75, 82, 68],
612
+ fill: false,
613
+ borderColor: 'rgba(46, 134, 222, 1)',
614
+ tension: 0.1,
615
+ pointBackgroundColor: 'rgba(46, 134, 222, 1)',
616
+ pointRadius: 4
617
+ }]
618
+ },
619
+ options: {
620
+ responsive: true,
621
+ maintainAspectRatio: false,
622
+ scales: {
623
+ y: {
624
+ beginAtZero: true
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
625
  }
626
  }
627
  }
628
+ });
 
 
 
 
 
 
 
 
629
  });
630
  </script>
631
  <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=maomaobj/hetong3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>