1142 lines
62 KiB
HTML
1142 lines
62 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>中国烟草AI合同及卷宗审核系统 - 评查详情</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary-color: #00684a;
|
|
--primary-hover: #005a40;
|
|
--primary-light: rgba(0, 104, 74, 0.1);
|
|
--success-color: #52c41a;
|
|
--warning-color: #faad14;
|
|
--error-color: #ff4d4f;
|
|
--text-color: rgba(0, 0, 0, 0.85);
|
|
--text-secondary: rgba(0, 0, 0, 0.45);
|
|
--border-color: #f0f0f0;
|
|
--bg-gray: #f5f5f5;
|
|
}
|
|
|
|
body {
|
|
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
line-height: 1.5;
|
|
color: var(--text-color);
|
|
background-color: var(--bg-gray);
|
|
}
|
|
|
|
.layout-container {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 240px;
|
|
background-color: white;
|
|
border-right: 1px solid var(--border-color);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
overflow-y: auto;
|
|
z-index: 10;
|
|
}
|
|
|
|
.main-content {
|
|
margin-left: 240px;
|
|
width: calc(100% - 240px);
|
|
padding: 24px;
|
|
}
|
|
|
|
.logo {
|
|
height: 64px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 24px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.logo img {
|
|
height: 32px;
|
|
}
|
|
|
|
.sidebar-menu {
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.sidebar-menu-item {
|
|
padding: 0 16px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.sidebar-menu-item a {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 12px;
|
|
border-radius: 4px;
|
|
color: var(--text-color);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.sidebar-menu-item a:hover {
|
|
background-color: rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.sidebar-menu-item.active a {
|
|
background-color: var(--primary-light);
|
|
color: var(--primary-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.breadcrumb {
|
|
display: flex;
|
|
margin-bottom: 16px;
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.breadcrumb-item:not(:last-child)::after {
|
|
content: '/';
|
|
margin: 0 8px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.breadcrumb-item:last-child {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.ant-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 400;
|
|
padding: 4px 15px;
|
|
font-size: 14px;
|
|
border-radius: 2px;
|
|
height: 32px;
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
.ant-btn-default {
|
|
background-color: white;
|
|
border: 1px solid #d9d9d9;
|
|
}
|
|
|
|
.ant-btn-default:hover {
|
|
border-color: var(--primary-color);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.ant-btn-primary {
|
|
background-color: var(--primary-color);
|
|
border: 1px solid var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.ant-btn-primary:hover {
|
|
background-color: var(--primary-hover);
|
|
border-color: var(--primary-hover);
|
|
}
|
|
|
|
.ant-card {
|
|
background: white;
|
|
border-radius: 2px;
|
|
margin-bottom: 24px;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
.ant-card-header {
|
|
padding: 16px 24px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.ant-card-header h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ant-card-body {
|
|
padding: 24px;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 14px;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.form-input,
|
|
.form-select,
|
|
.form-textarea {
|
|
width: 100%;
|
|
padding: 4px 11px;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: var(--text-color);
|
|
background-color: #fff;
|
|
background-image: none;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 2px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-select:focus,
|
|
.form-textarea:focus {
|
|
border-color: var(--primary-color);
|
|
outline: 0;
|
|
box-shadow: 0 0 0 2px rgba(0, 104, 74, 0.2);
|
|
}
|
|
|
|
.form-textarea {
|
|
min-height: 32px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.form-tip {
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.required-mark {
|
|
color: #ff4d4f;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.tab-nav {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--border-color);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.tab-nav-item {
|
|
padding: 8px 16px;
|
|
margin-right: 32px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
transition: all 0.3s;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.tab-nav-item i {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.tab-nav-item:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.tab-nav-item.active {
|
|
color: var(--primary-color);
|
|
border-bottom-color: var(--primary-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tab-content {
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.tab-pane {
|
|
display: none;
|
|
}
|
|
|
|
.tab-pane.active {
|
|
display: block;
|
|
}
|
|
|
|
.document-preview {
|
|
width: 100%;
|
|
height: 600px;
|
|
overflow-y: auto;
|
|
border: 1px solid var(--border-color);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.document-page {
|
|
background-color: white;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
margin: 20px auto;
|
|
padding: 40px;
|
|
max-width: 700px;
|
|
min-height: 800px;
|
|
}
|
|
|
|
.document-text {
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.highlighted-text {
|
|
background-color: rgba(250, 173, 20, 0.3);
|
|
border-bottom: 1px dashed #faad14;
|
|
}
|
|
|
|
.review-points-panel {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 2px;
|
|
background-color: white;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.review-panel-header {
|
|
font-weight: 500;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.review-statistics {
|
|
padding: 12px;
|
|
}
|
|
|
|
.review-points-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
max-height: 600px;
|
|
}
|
|
|
|
.review-point-item {
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.review-point-item:hover {
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.review-point-item.active {
|
|
background-color: #e6f7ff;
|
|
}
|
|
|
|
.review-point-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.review-point-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.review-point-location {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0 6px;
|
|
font-size: 12px;
|
|
border-radius: 10px;
|
|
height: 20px;
|
|
}
|
|
|
|
.status-success {
|
|
background-color: #f6ffed;
|
|
border: 1px solid #b7eb8f;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.status-warning {
|
|
background-color: #fffbe6;
|
|
border: 1px solid #ffe58f;
|
|
color: #faad14;
|
|
}
|
|
|
|
.status-error {
|
|
background-color: #fff2f0;
|
|
border: 1px solid #ffccc7;
|
|
color: #ff4d4f;
|
|
}
|
|
|
|
.human-review-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0 6px;
|
|
font-size: 12px;
|
|
border-radius: 10px;
|
|
height: 20px;
|
|
background-color: #f0f5ff;
|
|
border: 1px solid #adc6ff;
|
|
color: #1890ff;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.human-review-note {
|
|
font-size: 12px;
|
|
color: #1890ff;
|
|
margin-top: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.replace-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
border-radius: 2px;
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.replace-action:hover {
|
|
background-color: var(--primary-hover);
|
|
}
|
|
|
|
.replace-action i {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* 法律引用样式 */
|
|
.law-reference {
|
|
background-color: #f0f9ff;
|
|
border: 1px solid #bae0ff;
|
|
border-radius: 4px;
|
|
padding: 12px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.law-reference-title {
|
|
color: #0958d9;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.law-reference-articles {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.law-article {
|
|
background-color: #e6f4ff;
|
|
border: 1px solid #91caff;
|
|
border-radius: 12px;
|
|
padding: 2px 8px;
|
|
font-size: 12px;
|
|
color: #0958d9;
|
|
}
|
|
|
|
.law-reference-content {
|
|
font-size: 13px;
|
|
color: #434343;
|
|
line-height: 1.6;
|
|
border-left: 3px solid #bae0ff;
|
|
padding-left: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="layout-container">
|
|
<!-- 侧边栏 -->
|
|
<div class="sidebar">
|
|
<div class="logo">
|
|
<img src="../assets/logo.png" alt="中国烟草logo">
|
|
</div>
|
|
<div class="sidebar-menu">
|
|
<div class="sidebar-menu-item active">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-home-line mr-3"></i>
|
|
<span>首页</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-file-list-line mr-3"></i>
|
|
<span>评查任务</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-book-2-line mr-3"></i>
|
|
<span>评查规则库</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-bar-chart-line mr-3"></i>
|
|
<span>评查统计</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-history-line mr-3"></i>
|
|
<span>审核历史</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-settings-3-line mr-3"></i>
|
|
<span>系统设置</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主内容区 -->
|
|
<div class="main-content">
|
|
<!-- 面包屑导航 -->
|
|
<div class="breadcrumb">
|
|
<span class="breadcrumb-item">首页</span>
|
|
<span class="breadcrumb-item">评查任务</span>
|
|
<span class="breadcrumb-item">烟草产品销售合同（2023版）</span>
|
|
<span class="breadcrumb-item">评查详情</span>
|
|
</div>
|
|
|
|
<!-- 页面头部 -->
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-medium">合同评查详情</h2>
|
|
<div class="flex">
|
|
<button class="ant-btn ant-btn-default mr-2">
|
|
<i class="ri-file-download-line"></i> 导出评查报告
|
|
</button>
|
|
<button class="ant-btn ant-btn-primary">
|
|
<i class="ri-check-double-line"></i> 确认并完成
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 选项卡容器 -->
|
|
<div class="tab-container">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-item active" data-tab="tab-preview">
|
|
<i class="ri-file-text-line"></i> 评查结果
|
|
</div>
|
|
<div class="tab-nav-item" data-tab="tab-suggestion">
|
|
<i class="ri-lightbulb-line"></i> AI智能分析
|
|
</div>
|
|
<div class="tab-nav-item" data-tab="tab-fileinfo">
|
|
<i class="ri-information-line"></i> 文件信息
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 选项卡内容 -->
|
|
<div class="tab-content">
|
|
<!-- 预览选项卡内容 -->
|
|
<div class="tab-pane active" id="tab-preview">
|
|
<!-- 文件内容和评查点 -->
|
|
<div class="flex flex-col lg:flex-row lg:space-x-4">
|
|
<div class="w-full lg:w-2/3">
|
|
<div class="document-preview">
|
|
<div class="document-page">
|
|
<div class="document-text">
|
|
<h3 class="text-center font-bold text-lg mb-5">烟草产品销售合同</h3>
|
|
<p class="mb-4">合同编号：XS-2023-1025-001</p>
|
|
|
|
<div class="mb-4">
|
|
<p>甲方（卖方）：XX烟草公司</p>
|
|
<p>联系地址：XX省XX市XX区XX路123号</p>
|
|
<p>联系电话：0XX-XXXXXXXX</p>
|
|
<p>法定代表人：张三</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<p>乙方（买方）：YY贸易有限公司</p>
|
|
<p>联系地址：XX省XX市XX区YY路456号</p>
|
|
<p>联系电话：0XX-YYYYYYYY</p>
|
|
<p>法定代表人：李四</p>
|
|
</div>
|
|
|
|
<p class="mb-4">经甲乙双方友好协商，就烟草产品销售事宜达成如下协议：</p>
|
|
|
|
<div class="mb-4">
|
|
<p class="font-bold">第一条 合同标的</p>
|
|
<p>甲方按照本合同约定向乙方提供指定品牌和数量的烟草产品。具体品名、规格、数量和单价见附件一《烟草产品清单》。</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<p class="font-bold">第二条 合同金额</p>
|
|
<p>本合同总金额为人民币壹佰万元整（¥1,000,000.00）。</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<p class="font-bold">第三条 交货方式</p>
|
|
<p>甲方应在合同签订后30日内将货物送达乙方指定地点。</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<p class="font-bold">第四条 支付方式</p>
|
|
<p class="highlighted-text">乙方应在收到货物之日起5个工作日内支付合同款项，甲方应在收到乙方全部付款后开具增值税专用发票，乙方应在收到发票后支付剩余款项。</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<p class="font-bold">第五条 质量要求</p>
|
|
<p>甲方保证所供烟草产品质量符合国家相关标准和行业规范。</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<p class="font-bold">第六条 验收标准</p>
|
|
<p>乙方应在收到货物后3个工作日内完成验收。验收合格后，双方签署验收单；验收不合格的，乙方有权要求甲方更换或退货。</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<p class="font-bold">第七条 双方义务</p>
|
|
<p class="highlighted-text">甲方负责提供产品，乙方负责支付货款。</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<p class="font-bold">第八条 争议解决</p>
|
|
<p>如合同发生纠纷，双方应协商解决。</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<p class="font-bold">第九条 合同期限</p>
|
|
<p>本合同自双方签字盖章之日起生效，至双方权利义务履行完毕之日终止。</p>
|
|
</div>
|
|
|
|
<div class="mt-10 flex justify-between">
|
|
<div>
|
|
<p>甲方（盖章）：XX烟草有限公司</p>
|
|
<p>代表人（签字）：_____________</p>
|
|
<p>日期：_____年___月___日</p>
|
|
</div>
|
|
<div>
|
|
<p>乙方（盖章）：YY贸易有限公司</p>
|
|
<p>代表人（签字）：_____________</p>
|
|
<p>日期：_____年___月___日</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full lg:w-1/3">
|
|
<div class="review-points-panel">
|
|
<div class="review-panel-header py-2 px-4 flex items-center bg-primary-light" style="height: 36px;">
|
|
<i class="ri-file-list-check-line text-primary mr-2"></i>
|
|
<span class="font-medium text-primary">评查结果</span>
|
|
</div>
|
|
|
|
<!-- 评查统计 - 改为单行显示 -->
|
|
<div class="review-statistics bg-white border-b border-gray-100 py-3 px-4">
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center">
|
|
<div class="w-7 h-7 bg-gray-100 rounded-md flex items-center justify-center">
|
|
<span class="text-sm font-semibold text-gray-600">12</span>
|
|
</div>
|
|
<span class="text-xs text-gray-500 ml-1">总计</span>
|
|
</div>
|
|
<div class="h-8 border-r border-gray-200"></div>
|
|
<div class="flex items-center">
|
|
<div class="w-7 h-7 bg-green-50 rounded-md flex items-center justify-center">
|
|
<span class="text-sm font-semibold text-success">5</span>
|
|
</div>
|
|
<span class="text-xs text-gray-500 ml-1">通过</span>
|
|
</div>
|
|
<div class="h-8 border-r border-gray-200"></div>
|
|
<div class="flex items-center">
|
|
<div class="w-7 h-7 bg-yellow-50 rounded-md flex items-center justify-center">
|
|
<span class="text-sm font-semibold text-warning">4</span>
|
|
</div>
|
|
<span class="text-xs text-gray-500 ml-1">警告</span>
|
|
</div>
|
|
<div class="h-8 border-r border-gray-200"></div>
|
|
<div class="flex items-center">
|
|
<div class="w-7 h-7 bg-red-50 rounded-md flex items-center justify-center">
|
|
<span class="text-sm font-semibold text-error">3</span>
|
|
</div>
|
|
<span class="text-xs text-gray-500 ml-1">错误</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 评查点列表 -->
|
|
<div class="review-points-list">
|
|
<!-- 评查点1：付款条件描述不明确 - 错误状态 -->
|
|
<div class="review-point-item active" data-review-id="1">
|
|
<div class="review-point-header">
|
|
<div class="review-point-title">付款条件描述不明确</div>
|
|
<span class="status-badge status-error">
|
|
<i class="ri-close-circle-line mr-1"></i>不通过
|
|
</span>
|
|
</div>
|
|
<div class="review-point-location">
|
|
<i class="ri-file-list-line mr-1"></i>
|
|
<span>付款条款清晰性</span>
|
|
</div>
|
|
<div class="mt-2">
|
|
<div class="p-2 bg-white rounded border border-gray-200 text-xs">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-xs">当前值</span>
|
|
<span class="text-xs text-error">不符合规范</span>
|
|
</div>
|
|
<p class="text-xs">乙方应在收到货物之日起5个工作日内支付合同款项，甲方应在收到乙方全部付款后开具增值税专用发票，乙方应在收到发票后支付剩余款项。</p>
|
|
</div>
|
|
<div class="p-2 bg-white rounded border border-gray-200 text-xs mt-2">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-xs">建议修改为</span>
|
|
<span class="text-xs text-success">符合规范</span>
|
|
</div>
|
|
<div class="mt-2">
|
|
<textarea class="w-full border border-gray-200 rounded-md text-xs p-2" rows="3">乙方应在收到货物验收合格之日起5个工作日内支付合同总额的70%，甲方收到该部分款项后3个工作日内向乙方开具等额增值税专用发票；乙方应在收到发票之日起5个工作日内支付剩余30%款项。</textarea>
|
|
</div>
|
|
</div>
|
|
<button class="replace-action w-full justify-center mt-2">
|
|
<i class="ri-replace-line"></i> 一键替换
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 评查点2：履行义务不明确 - 错误状态 -->
|
|
<div class="review-point-item" data-review-id="2">
|
|
<div class="review-point-header">
|
|
<div class="review-point-title">履行义务不明确</div>
|
|
<span class="status-badge status-error">
|
|
<i class="ri-close-circle-line mr-1"></i>不通过
|
|
</span>
|
|
</div>
|
|
<div class="review-point-location">
|
|
<i class="ri-file-list-line mr-1"></i>
|
|
<span>合同履行义务规范性</span>
|
|
</div>
|
|
<div class="mt-2">
|
|
<div class="p-2 bg-white rounded border border-gray-200 text-xs">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-xs">当前问题</span>
|
|
<span class="text-xs text-error">不符合规范</span>
|
|
</div>
|
|
<p class="text-xs">合同对当事人履行义务的描述不明确，缺乏具体履行标准</p>
|
|
</div>
|
|
|
|
<!-- 法律依据部分 -->
|
|
<div class="law-reference mt-2">
|
|
<div class="law-reference-title">法律依据</div>
|
|
<div class="law-reference-articles">
|
|
<span class="law-article">第五百八十五条</span>
|
|
<span class="law-article">第五百八十六条</span>
|
|
</div>
|
|
<div class="law-reference-content">
|
|
《中华人民共和国民法典》规定：当事人应当按照约定全面履行自己的义务。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-2 bg-white rounded border border-gray-200 text-xs mt-2">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-xs">建议修改为</span>
|
|
<span class="text-xs text-success">符合规范</span>
|
|
</div>
|
|
<div class="mt-2">
|
|
<textarea class="w-full border border-gray-200 rounded-md text-xs p-2" rows="3">第七条 双方义务
|
|
甲方应按照本合同约定的时间、地点交付符合合同约定数量、质量的商品，并提供相应的技术资料和售后服务。乙方应按照本合同约定的时间、方式支付货款。双方均应诚实守信，全面履行合同义务。</textarea>
|
|
</div>
|
|
</div>
|
|
<button class="replace-action w-full justify-center mt-2">
|
|
<i class="ri-replace-line"></i> 一键替换
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 评查点3：法律适用条款缺失 - 错误状态 -->
|
|
<div class="review-point-item" data-review-id="3">
|
|
<div class="review-point-header">
|
|
<div class="review-point-title">法律适用条款缺失</div>
|
|
<span class="status-badge status-error">
|
|
<i class="ri-close-circle-line mr-1"></i>不通过
|
|
</span>
|
|
</div>
|
|
<div class="review-point-location">
|
|
<i class="ri-file-list-line mr-1"></i>
|
|
<span>争议解决条款完整性</span>
|
|
</div>
|
|
<div class="mt-2">
|
|
<div class="p-2 bg-white rounded border border-gray-200 text-xs">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-xs">当前问题</span>
|
|
<span class="text-xs text-error">缺失</span>
|
|
</div>
|
|
<p class="text-xs">合同未明确约定适用法律和纠纷解决方式</p>
|
|
</div>
|
|
|
|
<!-- 法律依据部分 -->
|
|
<div class="law-reference mt-2">
|
|
<div class="law-reference-title">法律依据</div>
|
|
<div class="law-reference-articles">
|
|
<span class="law-article">第六百七十六条</span>
|
|
</div>
|
|
<div class="law-reference-content">
|
|
《中华人民共和国民法典》规定：合同争议解决方式应明确约定，可选择协商、调解、仲裁或诉讼方式解决。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-2 bg-white rounded border border-gray-200 text-xs mt-2">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-xs">建议添加</span>
|
|
<span class="text-xs text-success">符合规范</span>
|
|
</div>
|
|
<div class="mt-2">
|
|
<textarea class="w-full border border-gray-200 rounded-md text-xs p-2" rows="3">第十三条 法律适用
|
|
本合同的订立、效力、解释、履行及争议的解决均适用中华人民共和国法律。因本合同引起的或与本合同有关的任何争议，双方应友好协商解决。协商不成的，提交甲方所在地人民法院诉讼解决。</textarea>
|
|
</div>
|
|
</div>
|
|
<button class="replace-action w-full justify-center mt-2">
|
|
<i class="ri-add-line"></i> 一键添加条款
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 评查点4：违约责任条款缺失 - 警告状态 -->
|
|
<div class="review-point-item" data-review-id="4">
|
|
<div class="review-point-header">
|
|
<div class="review-point-title">违约责任条款缺失</div>
|
|
<span class="status-badge status-warning">
|
|
<i class="ri-alert-line mr-1"></i>警告
|
|
</span>
|
|
</div>
|
|
<div class="review-point-location">
|
|
<i class="ri-file-list-line mr-1"></i>
|
|
<span>合同权利义务对等性</span>
|
|
</div>
|
|
<div class="mt-2">
|
|
<div class="p-2 bg-white rounded border border-gray-200 text-xs">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-xs">当前值</span>
|
|
<span class="text-xs text-warning">不符合规范</span>
|
|
</div>
|
|
<p class="text-xs">如合同发生纠纷，双方应协商解决。（缺少具体违约责任条款）</p>
|
|
</div>
|
|
<div class="p-2 bg-white rounded border border-gray-200 text-xs mt-2">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-xs">建议修改为</span>
|
|
<span class="text-xs text-success">符合规范</span>
|
|
</div>
|
|
<div class="mt-2">
|
|
<textarea class="w-full border border-gray-200 rounded-md text-xs p-2" rows="3">第十条 违约责任
|
|
任何一方未能履行本合同约定义务，应向守约方支付合同总金额的10%作为违约金；给对方造成损失的，还应赔偿由此产生的全部损失。甲方逾期交货，每逾期一日，应按合同总金额的0.05%向乙方支付违约金。乙方逾期付款，每逾期一日，应按逾期金额的0.05%向甲方支付违约金。</textarea>
|
|
</div>
|
|
</div>
|
|
<button class="replace-action w-full justify-center mt-2">
|
|
<i class="ri-replace-line"></i> 一键替换
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 评查点5：签章不完整 - 警告状态需人工审核 -->
|
|
<div class="review-point-item" data-review-id="5">
|
|
<div class="review-point-header">
|
|
<div class="review-point-title">签章不完整</div>
|
|
<span class="status-badge status-warning">
|
|
<i class="ri-alert-line mr-1"></i>警告
|
|
</span>
|
|
<span class="human-review-badge">
|
|
<i class="ri-user-line mr-1"></i>需人工
|
|
</span>
|
|
</div>
|
|
<div class="review-point-location">
|
|
<i class="ri-file-list-line mr-1"></i>
|
|
<span>合同签署规范性</span>
|
|
</div>
|
|
<div class="human-review-note">
|
|
<i class="ri-information-line mr-1"></i> 需要联系甲方补充公章
|
|
</div>
|
|
|
|
<!-- 人工审核操作区域 -->
|
|
<div class="mt-2">
|
|
<textarea class="w-full border border-gray-200 rounded-md text-xs p-2" placeholder="请输入审核意见（可选）..." rows="2"></textarea>
|
|
<div class="flex justify-end mt-2 space-x-2">
|
|
<button class="replace-action" style="background-color: #1890ff;">
|
|
<i class="ri-check-line"></i> 通过
|
|
</button>
|
|
<button class="replace-action" style="background-color: #ff4d4f;">
|
|
<i class="ri-close-line"></i> 不通过
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 评查点6：合同基本要素齐全 - 通过状态 -->
|
|
<div class="review-point-item" data-review-id="6">
|
|
<div class="review-point-header">
|
|
<div class="review-point-title">合同基本要素齐全</div>
|
|
<span class="status-badge status-success">
|
|
<i class="ri-checkbox-circle-line mr-1"></i>通过
|
|
</span>
|
|
</div>
|
|
<div class="review-point-location">
|
|
<i class="ri-file-list-line mr-1"></i>
|
|
<span>合同基本要素完整性</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 评查点7：当事人信息完整 - 通过状态 -->
|
|
<div class="review-point-item" data-review-id="7">
|
|
<div class="review-point-header">
|
|
<div class="review-point-title">当事人信息完整</div>
|
|
<span class="status-badge status-success">
|
|
<i class="ri-checkbox-circle-line mr-1"></i>通过
|
|
</span>
|
|
</div>
|
|
<div class="review-point-location">
|
|
<i class="ri-file-list-line mr-1"></i>
|
|
<span>合同当事人信息规范性</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 pt-4 border-t border-gray-100 px-4 pb-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="text-sm font-medium">评查得分：</div>
|
|
<div class="text-warning font-medium">68分</div>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div class="bg-warning h-2 rounded-full" style="width: 68%"></div>
|
|
</div>
|
|
<div class="flex justify-between mt-2">
|
|
<div class="flex items-center">
|
|
<span class="w-2 h-2 rounded-full bg-success mr-1 inline-block"></span>
|
|
<span class="text-xs text-gray-500">通过: 5</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="w-2 h-2 rounded-full bg-warning mr-1 inline-block"></span>
|
|
<span class="text-xs text-gray-500">警告: 4</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="w-2 h-2 rounded-full bg-error mr-1 inline-block"></span>
|
|
<span class="text-xs text-gray-500">错误: 3</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI智能分析选项卡内容 -->
|
|
<div class="tab-pane" id="tab-suggestion">
|
|
<!-- AI智能分析部分 -->
|
|
<div class="ant-card">
|
|
<div class="ant-card-header">
|
|
<h3 class="font-medium">AI智能分析</h3>
|
|
</div>
|
|
<div class="ant-card-body">
|
|
<div class="bg-gray-50 rounded-md p-4 mb-4">
|
|
<div class="flex items-start">
|
|
<i class="ri-error-warning-line text-error text-lg mr-2"></i>
|
|
<div>
|
|
<p class="text-sm mb-2"><span class="font-medium">高风险提示：</span>本合同缺少违约责任条款，可能导致权责不明。</p>
|
|
<p class="text-xs text-secondary">根据《中华人民共和国民法典》第五百七十七条规定，建议增加违约责任条款，明确双方违约责任及赔偿方式。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-md p-4 mb-4">
|
|
<div class="flex items-start">
|
|
<i class="ri-error-warning-line text-error text-lg mr-2"></i>
|
|
<div>
|
|
<p class="text-sm mb-2"><span class="font-medium">高风险提示：</span>本合同履行义务描述不明确，缺乏具体履行标准。</p>
|
|
<p class="text-xs text-secondary">根据《中华人民共和国民法典》第五百八十五条、第五百八十六条规定，当事人应当按照约定全面履行自己的义务，建议明确双方具体履行义务。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-md p-4 mb-4">
|
|
<div class="flex items-start">
|
|
<i class="ri-alert-line text-warning text-lg mr-2"></i>
|
|
<div>
|
|
<p class="text-sm mb-2"><span class="font-medium">完整性检查：</span>本合同缺少法律适用条款。</p>
|
|
<p class="text-xs text-secondary">根据行业惯例，销售合同应明确约定适用法律和纠纷解决方式，以避免后续争议解决时的不确定性。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-md p-4">
|
|
<div class="flex items-start">
|
|
<i class="ri-lightbulb-line text-primary text-lg mr-2"></i>
|
|
<div>
|
|
<p class="text-sm mb-2"><span class="font-medium">优化建议：</span>建议完善付款条件描述。</p>
|
|
<p class="text-xs text-secondary">目前合同中关于付款条件的描述存在歧义，可能导致付款时间和条件不明确。建议按系统修改建议优化。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8">
|
|
<h3 class="text-lg font-medium mb-4">综合评价</h3>
|
|
<div class="bg-white border border-gray-200 p-4 rounded-md">
|
|
<p class="text-sm">本合同基本结构完整，主体内容清晰，但存在多处条款描述不完善的问题，主要体现在履行义务、支付条件、违约责任、法律适用条款等方面。这些问题可能在合同履行过程中引发争议和纠纷。同时，合同签章不完整，也影响了合同的法律效力。建议对上述问题进行修改完善后再行签署。</p>
|
|
<div class="mt-4">
|
|
<p class="text-sm font-medium">合规性评分：<span class="text-warning font-medium">68分</span></p>
|
|
<div class="mt-2 bg-gray-200 rounded-full h-2.5 w-full">
|
|
<div class="bg-warning h-2.5 rounded-full" style="width: 68%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 flex space-x-4">
|
|
<button class="ant-btn ant-btn-default">
|
|
<i class="ri-file-download-line"></i> 导出评查报告
|
|
</button>
|
|
<button class="ant-btn ant-btn-primary">
|
|
<i class="ri-check-double-line"></i> 确认评查结果
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 文件信息选项卡内容 -->
|
|
<div class="tab-pane" id="tab-fileinfo">
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
<!-- 文件基本信息卡片 -->
|
|
<div class="border-b border-gray-100">
|
|
<div class="py-3 px-4 bg-blue-50 flex items-center">
|
|
<i class="ri-file-info-line text-blue-500 text-lg mr-2"></i>
|
|
<h3 class="font-medium text-blue-700">文件基本信息</h3>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="flex items-center">
|
|
<div class="w-24 text-gray-500 text-sm flex-shrink-0">文件名称：</div>
|
|
<div class="text-sm font-medium flex-1">烟草产品销售合同（2023版）.docx</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-24 text-gray-500 text-sm flex-shrink-0">合同编号：</div>
|
|
<div class="text-sm font-medium flex-1">XS-2023-1025-001</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-24 text-gray-500 text-sm flex-shrink-0">文件大小：</div>
|
|
<div class="text-sm font-medium flex-1">4.8MB</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-24 text-gray-500 text-sm flex-shrink-0">文件格式：</div>
|
|
<div class="text-sm font-medium flex-1">DOCX</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-24 text-gray-500 text-sm flex-shrink-0">页数：</div>
|
|
<div class="text-sm font-medium flex-1">5页</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-24 text-gray-500 text-sm flex-shrink-0">上传时间：</div>
|
|
<div class="text-sm font-medium flex-1">2023-12-10 09:45:20</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-24 text-gray-500 text-sm flex-shrink-0">上传人：</div>
|
|
<div class="text-sm font-medium flex-1">李明</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-24 text-gray-500 text-sm flex-shrink-0">文件状态：</div>
|
|
<div class="text-sm font-medium flex-1">
|
|
<span class="px-2 py-1 rounded-full text-xs bg-yellow-50 text-yellow-600 border border-yellow-200">评查中</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 文档类型信息 -->
|
|
<div class="border-b border-gray-100">
|
|
<div class="py-3 px-4 bg-green-50 flex items-center">
|
|
<i class="ri-file-text-line text-green-500 text-lg mr-2"></i>
|
|
<h3 class="font-medium text-green-700">评查规则信息</h3>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="flex items-center">
|
|
<div class="w-24 text-gray-500 text-sm flex-shrink-0">评查点组：</div>
|
|
<div class="text-sm font-medium flex-1">合同基本要素检查</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-24 text-gray-500 text-sm flex-shrink-0">启用评查点：</div>
|
|
<div class="text-sm font-medium flex-1">12个</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-24 text-gray-500 text-sm flex-shrink-0">评查模板：</div>
|
|
<div class="text-sm font-medium flex-1">销售合同标准评查模板</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-24 text-gray-500 text-sm flex-shrink-0">模板版本：</div>
|
|
<div class="text-sm font-medium flex-1">v2.3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 评查历史 -->
|
|
<div>
|
|
<div class="py-3 px-4 bg-purple-50 flex items-center">
|
|
<i class="ri-history-line text-purple-500 text-lg mr-2"></i>
|
|
<h3 class="font-medium text-purple-700">评查历史</h3>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="border-l-2 border-gray-200 pl-4 ml-2">
|
|
<div class="relative pb-5">
|
|
<div class="absolute -left-6 top-0 h-4 w-4 rounded-full bg-primary border-2 border-white"></div>
|
|
<div class="text-sm font-medium">开始评查</div>
|
|
<div class="text-xs text-secondary mt-1">2023-12-10 09:50:15 | 系统自动</div>
|
|
</div>
|
|
<div class="relative pb-5">
|
|
<div class="absolute -left-6 top-0 h-4 w-4 rounded-full bg-blue-500 border-2 border-white"></div>
|
|
<div class="text-sm font-medium">文档解析完成</div>
|
|
<div class="text-xs text-secondary mt-1">2023-12-10 09:51:30 | 系统自动</div>
|
|
</div>
|
|
<div class="relative pb-5">
|
|
<div class="absolute -left-6 top-0 h-4 w-4 rounded-full bg-yellow-500 border-2 border-white"></div>
|
|
<div class="text-sm font-medium">评查点检查完成</div>
|
|
<div class="text-xs text-secondary mt-1">2023-12-10 09:53:20 | 系统自动</div>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="absolute -left-6 top-0 h-4 w-4 rounded-full bg-gray-300 border-2 border-white"></div>
|
|
<div class="text-sm font-medium">等待人工确认</div>
|
|
<div class="text-xs text-secondary mt-1">待处理</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 选项卡切换功能
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const tabNavItems = document.querySelectorAll('.tab-nav-item');
|
|
const tabPanes = document.querySelectorAll('.tab-pane');
|
|
|
|
tabNavItems.forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
// 移除所有选项卡的激活状态
|
|
tabNavItems.forEach(tab => tab.classList.remove('active'));
|
|
tabPanes.forEach(pane => pane.classList.remove('active'));
|
|
|
|
// 激活当前选项卡
|
|
this.classList.add('active');
|
|
const tabId = this.getAttribute('data-tab');
|
|
document.getElementById(tabId).classList.add('active');
|
|
});
|
|
});
|
|
|
|
// 评查点项点击事件
|
|
const reviewPointItems = document.querySelectorAll('.review-point-item');
|
|
reviewPointItems.forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
reviewPointItems.forEach(point => point.classList.remove('active'));
|
|
this.classList.add('active');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |