| <!DOCTYPE html> |
| <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> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></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: '#1a56db', |
| secondary: '#0e9f6e', |
| warning: '#f59e0b', |
| danger: '#e02424', |
| light: '#f9fafb', |
| dark: '#1f2937' |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .dashboard-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| grid-template-rows: auto auto auto; |
| gap: 1.5rem; |
| grid-template-areas: |
| "header header" |
| "cards cards" |
| "tasks analysis" |
| "rules tracking"; |
| } |
| |
| @media (min-width: 1920px) { |
| .dashboard-grid { |
| grid-template-columns: 1fr 1fr 1fr; |
| grid-template-areas: |
| "header header header" |
| "cards cards cards" |
| "tasks analysis analysis" |
| "rules rules tracking"; |
| } |
| } |
| |
| .header-area { grid-area: header; } |
| .cards-area { grid-area: cards; } |
| .tasks-area { grid-area: tasks; } |
| .analysis-area { grid-area: analysis; } |
| .rules-area { grid-area: rules; } |
| .tracking-area { grid-area: tracking; } |
| |
| .card-hover:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| |
| .risk-high { |
| background-color: #fee2e2; |
| color: #b91c1c; |
| } |
| |
| .risk-medium { |
| background-color: #fef3c7; |
| color: #b45309; |
| } |
| |
| .risk-low { |
| background-color: #dcfce7; |
| color: #047857; |
| } |
| |
| .progress-bar { |
| height: 8px; |
| border-radius: 4px; |
| overflow: hidden; |
| } |
| |
| .progress-fill { |
| height: 100%; |
| transition: width 0.5s ease-in-out; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="dashboard-grid max-w-screen-2xl mx-auto p-6"> |
| |
| <header class="header-area bg-white rounded-xl shadow-sm p-6 flex items-center justify-between"> |
| <div class="flex items-center"> |
| <div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center mr-3"> |
| <i class="fas fa-balance-scale text-white text-xl"></i> |
| </div> |
| <h1 class="text-2xl font-bold text-gray-800">国央企业务合规系统</h1> |
| </div> |
| |
| <div class="flex items-center space-x-6"> |
| <div class="relative"> |
| <input type="text" placeholder="搜索合同编号、条款关键词、问题ID..." |
| 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"> |
| <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <div class="text-gray-600"> |
| <span id="current-date" class="font-medium"></span> |
| </div> |
| <button class="relative p-2 text-gray-500 hover:text-primary"> |
| <i class="fas fa-bell text-xl"></i> |
| <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> |
| </button> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3"> |
| <i class="fas fa-user text-gray-600"></i> |
| </div> |
| <div> |
| <p class="font-medium text-gray-800">您好，张法务</p> |
| <p class="text-xs text-gray-500">合规部</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </header> |
| |
| |
| <section class="cards-area grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4"> |
| <div class="card-hover bg-white rounded-xl shadow-sm p-5 flex flex-col cursor-pointer transition-all duration-300"> |
| <div class="flex justify-between items-start"> |
| <h3 class="text-gray-500 font-medium">今日待审合同</h3> |
| <i class="fas fa-file-contract text-primary text-xl"></i> |
| </div> |
| <div class="mt-4"> |
| <p class="text-3xl font-bold text-gray-800">24</p> |
| <p class="text-sm text-gray-500 mt-1">较昨日 <span class="text-green-500">↓2%</span></p> |
| </div> |
| </div> |
| |
| <div class="card-hover bg-white rounded-xl shadow-sm p-5 flex flex-col cursor-pointer transition-all duration-300"> |
| <div class="flex justify-between items-start"> |
| <h3 class="text-gray-500 font-medium">合规风险条款</h3> |
| <i class="fas fa-exclamation-triangle text-warning text-xl"></i> |
| </div> |
| <div class="mt-4"> |
| <p class="text-3xl font-bold text-gray-800">18</p> |
| <p class="text-sm text-gray-500 mt-1">本周发现</p> |
| </div> |
| </div> |
| |
| <div class="card-hover bg-white rounded-xl shadow-sm p-5 flex flex-col cursor-pointer transition-all duration-300"> |
| <div class="flex justify-between items-start"> |
| <h3 class="text-gray-500 font-medium">高风险合同</h3> |
| <i class="fas fa-radiation text-danger text-xl"></i> |
| </div> |
| <div class="mt-4"> |
| <p class="text-3xl font-bold text-gray-800">12.8%</p> |
| <p class="text-sm text-gray-500 mt-1">近7日比例</p> |
| </div> |
| </div> |
| |
| <div class="card-hover bg-white rounded-xl shadow-sm p-5 flex flex-col cursor-pointer transition-all duration-300"> |
| <div class="flex justify-between items-start"> |
| <h3 class="text-gray-500 font-medium">审查平均耗时</h3> |
| <i class="fas fa-stopwatch text-secondary text-xl"></i> |
| </div> |
| <div class="mt-4"> |
| <p class="text-3xl font-bold text-gray-800">2.4h</p> |
| <p class="text-sm text-gray-500 mt-1">较上月 <span class="text-green-500">↓15%</span></p> |
| </div> |
| </div> |
| |
| <div class="card-hover bg-white rounded-xl shadow-sm p-5 flex flex-col cursor-pointer transition-all duration-300"> |
| <div class="flex justify-between items-start"> |
| <h3 class="text-gray-500 font-medium">闭环完成率</h3> |
| <i class="fas fa-check-circle text-green-500 text-xl"></i> |
| </div> |
| <div class="mt-4"> |
| <p class="text-3xl font-bold text-gray-800">92.5%</p> |
| <p class="text-sm text-gray-500 mt-1">问题处理完成率</p> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="tasks-area bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-xl font-bold text-gray-800">待处理合同审核任务</h2> |
| <button class="text-primary font-medium flex items-center"> |
| <i class="fas fa-plus mr-2"></i> 新建任务 |
| </button> |
| </div> |
| |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead> |
| <tr> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">合同名称</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">提交人</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">进度</th> |
| <th class="px-4 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-4 py-4 whitespace-nowrap"> |
| <div class="font-medium text-gray-900">XX集团采购框架协议</div> |
| <div class="text-sm text-gray-500">合同编号: CG202308001</div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap text-gray-900">¥2,450,000</td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <div class="text-gray-900">李经理</div> |
| <div class="text-sm text-gray-500">采购部</div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <span class="risk-high px-2 py-1 text-xs rounded-full">高风险</span> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <div class="text-sm text-gray-500 mb-1">法务审核中</div> |
| <div class="progress-bar bg-gray-200 w-full"> |
| <div class="progress-fill bg-primary" style="width: 60%"></div> |
| </div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm"> |
| <button class="text-primary mr-3"><i class="fas fa-eye mr-1"></i> 查看</button> |
| <button class="text-warning mr-3"><i class="fas fa-flag mr-1"></i> 标记</button> |
| <button class="text-danger"><i class="fas fa-undo mr-1"></i> 打回</button> |
| </td> |
| </tr> |
| <tr class="hover:bg-gray-50"> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <div class="font-medium text-gray-900">技术合作开发协议</div> |
| <div class="text-sm text-gray-500">合同编号: JS202308015</div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap text-gray-900">¥1,780,000</td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <div class="text-gray-900">王总监</div> |
| <div class="text-sm text-gray-500">研发中心</div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <span class="risk-medium px-2 py-1 text-xs rounded-full">中风险</span> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <div class="text-sm text-gray-500 mb-1">合规初审</div> |
| <div class="progress-bar bg-gray-200 w-full"> |
| <div class="progress-fill bg-primary" style="width: 30%"></div> |
| </div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm"> |
| <button class="text-primary mr-3"><i class="fas fa-eye mr-1"></i> 查看</button> |
| <button class="text-warning mr-3"><i class="fas fa-flag mr-1"></i> 标记</button> |
| <button class="text-danger"><i class="fas fa-undo mr-1"></i> 打回</button> |
| </td> |
| </tr> |
| <tr class="hover:bg-gray-50"> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <div class="font-medium text-gray-900">海外项目分包合同</div> |
| <div class="text-sm text-gray-500">合同编号: HW202308007</div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap text-gray-900">$850,000</td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <div class="text-gray-900">赵主管</div> |
| <div class="text-sm text-gray-500">国际事业部</div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <span class="risk-high px-2 py-1 text-xs rounded-full">高风险</span> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <div class="text-sm text-gray-500 mb-1">合规复审</div> |
| <div class="progress-bar bg-gray-200 w-full"> |
| <div class="progress-fill bg-primary" style="width: 80%"></div> |
| </div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm"> |
| <button class="text-primary mr-3"><i class="fas fa-eye mr-1"></i> 查看</button> |
| <button class="text-warning mr-3"><i class="fas fa-flag mr-1"></i> 标记</button> |
| <button class="text-danger"><i class="fas fa-undo mr-1"></i> 打回</button> |
| </td> |
| </tr> |
| <tr class="hover:bg-gray-50"> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <div class="font-medium text-gray-900">年度服务维护合同</div> |
| <div class="text-sm text-gray-500">合同编号: FW202308022</div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap text-gray-900">¥560,000</td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <div class="text-gray-900">孙经理</div> |
| <div class="text-sm text-gray-500">客户服务部</div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <span class="risk-low px-2 py-1 text-xs rounded-full">低风险</span> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <div class="text-sm text-gray-500 mb-1">法务终审</div> |
| <div class="progress-bar bg-gray-200 w-full"> |
| <div class="progress-fill bg-primary" style="width: 90%"></div> |
| </div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm"> |
| <button class="text-primary mr-3"><i class="fas fa-eye mr-1"></i> 查看</button> |
| <button class="text-warning mr-3"><i class="fas fa-flag mr-1"></i> 标记</button> |
| <button class="text-danger"><i class="fas fa-undo mr-1"></i> 打回</button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </section> |
| |
| |
| <section class="analysis-area bg-white rounded-xl shadow-sm p-6"> |
| <h2 class="text-xl font-bold text-gray-800 mb-6">合规风险分析看板</h2> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 h-[400px]"> |
| <div class="bg-gray-50 p-4 rounded-lg flex flex-col"> |
| <h3 class="font-medium text-gray-700 mb-4">条款风险分类统计</h3> |
| <div class="flex-1"> |
| <canvas id="riskChart"></canvas> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 p-4 rounded-lg flex flex-col"> |
| <h3 class="font-medium text-gray-700 mb-4">合规评分分布</h3> |
| <div class="flex-1"> |
| <canvas id="scoreChart"></canvas> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 p-4 rounded-lg lg:col-span-1 flex flex-col"> |
| <h3 class="font-medium text-gray-700 mb-4">风险发现趋势</h3> |
| <div class="flex-1"> |
| <canvas id="trendChart"></canvas> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="rules-area bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-xl font-bold text-gray-800">制度与规则维护</h2> |
| <div class="flex space-x-3"> |
| <button class="bg-primary text-white px-4 py-2 rounded-lg flex items-center"> |
| <i class="fas fa-plus mr-2"></i> 新增规则 |
| </button> |
| <button class="border border-primary text-primary px-4 py-2 rounded-lg flex items-center"> |
| <i class="fas fa-sync mr-2"></i> 更新模型 |
| </button> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
| <div class="border border-gray-200 rounded-lg p-5 hover:border-primary transition-colors"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-blue-100 text-blue-800 w-10 h-10 rounded-lg flex items-center justify-center mr-3"> |
| <i class="fas fa-ban text-lg"></i> |
| </div> |
| <h3 class="font-bold text-gray-800">禁止条款清单</h3> |
| </div> |
| <p class="text-gray-600 mb-4">管理禁止在合同中出现的条款内容，包含128条规则</p> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-500">最后更新: 2023-08-15</span> |
| <button class="text-primary font-medium">管理规则 <i class="fas fa-arrow-right ml-1"></i></button> |
| </div> |
| </div> |
| |
| <div class="border border-gray-200 rounded-lg p-5 hover:border-primary transition-colors"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-yellow-100 text-yellow-800 w-10 h-10 rounded-lg flex items-center justify-center mr-3"> |
| <i class="fas fa-exclamation-circle text-lg"></i> |
| </div> |
| <h3 class="font-bold text-gray-800">敏感条款库</h3> |
| </div> |
| <p class="text-gray-600 mb-4">管理需要特别注意的敏感条款，包含86条规则</p> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-500">最后更新: 2023-08-10</span> |
| <button class="text-primary font-medium">管理规则 <i class="fas fa-arrow-right ml-1"></i></button> |
| </div> |
| </div> |
| |
| <div class="border border-gray-200 rounded-lg p-5 hover:border-primary transition-colors"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-green-100 text-green-800 w-10 h-10 rounded-lg flex items-center justify-center mr-3"> |
| <i class="fas fa-brain text-lg"></i> |
| </div> |
| <h3 class="font-bold text-gray-800">风控关键词模型</h3> |
| </div> |
| <p class="text-gray-600 mb-4">AI风险识别模型，包含3200个关键词和短语</p> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-500">最后更新: 2023-08-18</span> |
| <button class="text-primary font-medium">管理模型 <i class="fas fa-arrow-right ml-1"></i></button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 rounded-lg p-4"> |
| <h3 class="font-medium text-gray-700 mb-4">最新规则修改记录</h3> |
| <div class="space-y-3"> |
| <div class="flex items-start p-3 hover:bg-white rounded-lg"> |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 flex-shrink-0"></div> |
| <div class="ml-4 flex-1"> |
| <div class="flex justify-between"> |
| <h4 class="font-medium text-gray-800">新增知识产权归属条款规则</h4> |
| <span class="text-sm text-gray-500">今天 10:24</span> |
| </div> |
| <p class="text-sm text-gray-600 mt-1">张法务 更新了禁止条款清单，新增3条规则</p> |
| </div> |
| </div> |
| <div class="flex items-start p-3 hover:bg-white rounded-lg"> |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 flex-shrink-0"></div> |
| <div class="ml-4 flex-1"> |
| <div class="flex justify-between"> |
| <h4 class="font-medium text-gray-800">优化付款条件关键词模型</h4> |
| <span class="text-sm text-gray-500">昨天 15:42</span> |
| </div> |
| <p class="text-sm text-gray-600 mt-1">李合规 更新了风控关键词模型，优化12个关键词</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="tracking-area bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-xl font-bold text-gray-800">问题闭环追踪</h2> |
| <button class="bg-secondary text-white px-4 py-2 rounded-lg flex items-center"> |
| <i class="fas fa-file-export mr-2"></i> 导出合规报告 |
| </button> |
| </div> |
| |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead> |
| <tr> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">问题描述</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">责任人</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">截止时间</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th> |
| <th class="px-4 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-4 py-4"> |
| <div class="font-medium text-gray-900">合同付款条款未明确分期比例</div> |
| <div class="text-sm text-gray-500">合同编号: CG202308001</div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <div class="text-gray-900">王经理</div> |
| <div class="text-sm text-gray-500">采购部</div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap text-gray-900">2023-08-25</td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <span class="bg-yellow-100 text-yellow-800 px-2 py-1 text-xs rounded-full">整改中</span> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <button class="text-primary"><i class="fas fa-eye mr-1"></i> 详情</button> |
| </td> |
| </tr> |
| <tr class="hover:bg-gray-50"> |
| <td class="px-4 py-4"> |
| <div class="font-medium text-gray-900">知识产权归属条款不明确</div> |
| <div class="text-sm text-gray-500">合同编号: JS202308015</div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <div class="text-gray-900">张主管</div> |
| <div class="text-sm text-gray-500">研发中心</div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap text-gray-900">2023-08-28</td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <span class="bg-yellow-100 text-yellow-800 px-2 py-1 text-xs rounded-full">整改中</span> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <button class="text-primary"><i class="fas fa-eye mr-1"></i> 详情</button> |
| </td> |
| </tr> |
| <tr class="hover:bg-gray-50"> |
| <td class="px-4 py-4"> |
| <div class="font-medium text-gray-900">保密条款未明确保密期限</div> |
| <div class="text-sm text-gray-500">合同编号: HW202308007</div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <div class="text-gray-900">赵总监</div> |
| <div class="text-sm text-gray-500">国际事业部</div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap text-gray-900">2023-08-20</td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <span class="bg-green-100 text-green-800 px-2 py-1 text-xs rounded-full">已整改</span> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <button class="text-primary"><i class="fas fa-eye mr-1"></i> 详情</button> |
| </td> |
| </tr> |
| <tr class="hover:bg-gray-50"> |
| <td class="px-4 py-4"> |
| <div class="font-medium text-gray-900">违约责任条款金额计算方式错误</div> |
| <div class="text-sm text-gray-500">合同编号: FW202308022</div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <div class="text-gray-900">孙经理</div> |
| <div class="text-sm text-gray-500">客户服务部</div> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap text-gray-900">2023-08-22</td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <span class="bg-green-100 text-green-800 px-2 py-1 text-xs rounded-full">已整改</span> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <button class="text-primary"><i class="fas fa-eye mr-1"></i> 详情</button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </section> |
| </div> |
|
|
| <script> |
| |
| const now = new Date(); |
| const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }; |
| document.getElementById('current-date').textContent = now.toLocaleDateString('zh-CN', options); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const riskCtx = document.getElementById('riskChart').getContext('2d'); |
| const riskChart = new Chart(riskCtx, { |
| type: 'bar', |
| data: { |
| labels: ['付款风险', '身份风险', '知识产权', '保密条款', '违约责任', '不可抗力'], |
| datasets: [{ |
| label: '风险数量', |
| data: [18, 12, 8, 6, 9, 3], |
| backgroundColor: [ |
| 'rgba(231, 76, 60, 0.7)', |
| 'rgba(230, 126, 34, 0.7)', |
| 'rgba(241, 196, 15, 0.7)', |
| 'rgba(46, 134, 222, 0.7)', |
| 'rgba(142, 68, 173, 0.7)', |
| 'rgba(40, 180, 99, 0.7)' |
| ], |
| borderColor: [ |
| 'rgba(231, 76, 60, 1)', |
| 'rgba(230, 126, 34, 1)', |
| 'rgba(241, 196, 15, 1)', |
| 'rgba(46, 134, 222, 1)', |
| 'rgba(142, 68, 173, 1)', |
| 'rgba(40, 180, 99, 1)' |
| ], |
| borderWidth: 1 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true, |
| ticks: { |
| stepSize: 5 |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const scoreCtx = document.getElementById('scoreChart').getContext('2d'); |
| const scoreChart = new Chart(scoreCtx, { |
| type: 'doughnut', |
| data: { |
| labels: ['高风险', '中风险', '低风险'], |
| datasets: [{ |
| data: [15, 35, 50], |
| backgroundColor: [ |
| 'rgba(231, 76, 60, 0.7)', |
| 'rgba(241, 196, 15, 0.7)', |
| 'rgba(40, 180, 99, 0.7)' |
| ], |
| borderColor: [ |
| 'rgba(231, 76, 60, 1)', |
| 'rgba(241, 196, 15, 1)', |
| 'rgba(40, 180, 99, 1)' |
| ], |
| borderWidth: 1 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| position: 'bottom' |
| } |
| } |
| } |
| }); |
| |
| |
| const trendCtx = document.getElementById('trendChart').getContext('2d'); |
| const trendChart = new Chart(trendCtx, { |
| type: 'line', |
| data: { |
| labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'], |
| datasets: [{ |
| label: '合规问题数量', |
| data: [42, 38, 55, 48, 60, 75, 82, 68], |
| fill: false, |
| borderColor: 'rgba(46, 134, 222, 1)', |
| tension: 0.1, |
| pointBackgroundColor: 'rgba(46, 134, 222, 1)', |
| pointRadius: 4 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true |
| } |
| } |
| } |
| }); |
| }); |
| </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=maomaobj/hetong3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
