2186 lines
111 KiB
HTML
2186 lines
111 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;
|
|
background-color: var(--bg-gray);
|
|
}
|
|
|
|
.sidebar-menu-item a {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
border-radius: 4px;
|
|
margin: 0 8px;
|
|
color: var(--text-color);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.sidebar-menu-item:hover a {
|
|
background-color: var(--primary-light);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.sidebar-menu-item.active a {
|
|
background-color: var(--primary-light);
|
|
color: var(--primary-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ant-card {
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-color);
|
|
background-color: white;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.ant-card-header {
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ant-card-body {
|
|
padding: 24px;
|
|
}
|
|
|
|
.ant-btn {
|
|
border-radius: 4px;
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.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-btn-default {
|
|
background-color: white;
|
|
border: 1px solid #d9d9d9;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.ant-btn-default:hover {
|
|
border-color: var(--primary-color);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.ant-btn i {
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.breadcrumb {
|
|
display: flex;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.breadcrumb-item {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.breadcrumb-item:last-child {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.breadcrumb-item:not(:last-child)::after {
|
|
content: '/';
|
|
margin: 0 8px;
|
|
color: #d9d9d9;
|
|
}
|
|
|
|
.text-primary { color: var(--primary-color); }
|
|
.text-success { color: var(--success-color); }
|
|
.text-warning { color: var(--warning-color); }
|
|
.text-error { color: var(--error-color); }
|
|
.text-secondary { color: var(--text-secondary); }
|
|
|
|
.bg-primary { background-color: var(--primary-color); }
|
|
.bg-primary-light { background-color: var(--primary-light); }
|
|
.bg-success { background-color: #f6ffed; }
|
|
.bg-warning { background-color: #fffbe6; }
|
|
.bg-error { background-color: #fff2f0; }
|
|
|
|
/* Status badge */
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-waiting {
|
|
background-color: #f9f0ff;
|
|
color: #722ed1;
|
|
}
|
|
|
|
.status-processing {
|
|
background-color: #e6f7ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.status-success {
|
|
background-color: #f6ffed;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.status-error {
|
|
background-color: #fff1f0;
|
|
color: #f5222d;
|
|
}
|
|
|
|
.status-warning {
|
|
background-color: #fffbe6;
|
|
color: #faad14;
|
|
}
|
|
|
|
/* Severity indicator */
|
|
.severity-indicator {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.severity-info {
|
|
background-color: #1890ff;
|
|
}
|
|
|
|
.severity-warning {
|
|
background-color: #faad14;
|
|
}
|
|
|
|
.severity-error {
|
|
background-color: #ff4d4f;
|
|
}
|
|
|
|
.severity-critical {
|
|
background-color: #722ed1;
|
|
}
|
|
|
|
/* File preview */
|
|
.file-preview {
|
|
background-color: white;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
height: calc(100vh - 220px);
|
|
min-height: 500px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.file-preview-header {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.file-preview-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.file-preview-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.file-preview-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* PDF viewer */
|
|
.pdf-container {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.pdf-controls {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 8px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
gap: 16px;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.pdf-viewer {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.pdf-page {
|
|
margin: 10px auto;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
position: relative;
|
|
}
|
|
|
|
/* Review points panel */
|
|
.review-points-panel {
|
|
background-color: white;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
height: calc(100vh - 220px);
|
|
min-height: 500px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.review-panel-header {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background-color: #fafafa;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.review-statistics {
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.review-points-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.review-point-item {
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.review-point-item:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.review-point-item.active {
|
|
background-color: var(--primary-light);
|
|
}
|
|
|
|
.review-point-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.review-point-title {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.review-point-desc {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.review-point-location {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
background-color: #f5f5f5;
|
|
border-radius: 4px;
|
|
padding: 2px 8px;
|
|
}
|
|
|
|
/* Review point detail panel */
|
|
.review-detail-panel {
|
|
padding: 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
background-color: #fafafa;
|
|
max-height: 40%;
|
|
overflow-y: auto;
|
|
display: none;
|
|
}
|
|
|
|
.review-detail-panel.visible {
|
|
display: block;
|
|
}
|
|
|
|
.review-detail-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.review-detail-title {
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.review-detail-close {
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.review-detail-section {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.review-detail-section-title {
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.review-detail-content {
|
|
background-color: white;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
padding: 12px;
|
|
font-size: 13px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.review-detail-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
/* Highlighted sections on PDF */
|
|
.highlight-area {
|
|
position: absolute;
|
|
background-color: rgba(250, 173, 20, 0.2);
|
|
border: 2px solid var(--warning-color);
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
}
|
|
|
|
.highlight-area.error {
|
|
background-color: rgba(255, 77, 79, 0.2);
|
|
border-color: var(--error-color);
|
|
}
|
|
|
|
.highlight-area.success {
|
|
background-color: rgba(82, 196, 26, 0.2);
|
|
border-color: var(--success-color);
|
|
}
|
|
|
|
/* Tooltip */
|
|
.tooltip {
|
|
position: absolute;
|
|
background-color: white;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
padding: 8px 12px;
|
|
font-size: 12px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
z-index: 100;
|
|
max-width: 250px;
|
|
display: none;
|
|
}
|
|
|
|
.tooltip-title {
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* Result count summary */
|
|
.result-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.result-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.result-tag-count {
|
|
font-weight: 500;
|
|
margin-left: 4px;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
/* Form styles */
|
|
.form-label {
|
|
display: block;
|
|
font-size: 14px;
|
|
color: var(--text-color);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
padding: 8px 12px;
|
|
font-size: 14px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.form-textarea {
|
|
width: 100%;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
padding: 8px 12px;
|
|
font-size: 14px;
|
|
min-height: 80px;
|
|
max-height: 160px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 2px rgba(0, 104, 74, 0.2);
|
|
}
|
|
|
|
/* File info list */
|
|
.file-info-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.file-info-item {
|
|
display: flex;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.file-info-label {
|
|
flex: 0 0 80px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.file-info-value {
|
|
flex: 1;
|
|
}
|
|
|
|
/* 页面选项卡样式 */
|
|
.tab-container {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.tab-nav {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background-color: white;
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tab-nav-item {
|
|
padding: 12px 20px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
transition: all 0.3s;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.tab-nav-item i {
|
|
margin-right: 6px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.tab-nav-item:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.tab-nav-item.active {
|
|
color: var(--primary-color);
|
|
border-bottom-color: var(--primary-color);
|
|
}
|
|
|
|
.tab-content {
|
|
background-color: white;
|
|
border: 1px solid var(--border-color);
|
|
border-top: none;
|
|
border-bottom-left-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.tab-pane {
|
|
display: none;
|
|
}
|
|
|
|
.tab-pane.active {
|
|
display: block;
|
|
}
|
|
|
|
/* 新增：文档内容样式 */
|
|
.word-document {
|
|
padding: 40px;
|
|
background-color: white;
|
|
font-family: 'SimSun', serif;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.word-document h1 {
|
|
font-size: 18px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.word-document h2 {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-top: 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.word-document p {
|
|
text-indent: 2em;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* 高亮区域增加交互提示 */
|
|
.highlight-area {
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.highlight-area:hover {
|
|
box-shadow: 0 0 0 3px rgba(250, 173, 20, 0.6);
|
|
}
|
|
|
|
/* 替换动作按钮 */
|
|
.replace-action {
|
|
background-color: #1890ff;
|
|
color: white;
|
|
border: none;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
margin-top: 6px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.replace-action i {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.replace-action:hover {
|
|
background-color: #40a9ff;
|
|
}
|
|
|
|
/* 评查标签增强 */
|
|
.review-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.review-tag-warning {
|
|
background-color: #fffbe6;
|
|
color: #faad14;
|
|
border: 1px solid #ffe58f;
|
|
}
|
|
|
|
.review-tag-error {
|
|
background-color: #fff2f0;
|
|
color: #ff4d4f;
|
|
border: 1px solid #ffccc7;
|
|
}
|
|
|
|
.review-tag-success {
|
|
background-color: #f6ffed;
|
|
color: #52c41a;
|
|
border: 1px solid #b7eb8f;
|
|
}
|
|
|
|
.human-review-note {
|
|
background-color: #e6f7ff;
|
|
border-left: 3px solid #1890ff;
|
|
padding: 6px 10px;
|
|
margin-top: 6px;
|
|
font-size: 12px;
|
|
color: #333;
|
|
}
|
|
|
|
.human-review-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
background-color: #e6f7ff;
|
|
color: #1890ff;
|
|
padding: 1px 4px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
margin-left: 4px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.human-review-request {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 6px;
|
|
background-color: #f9f0ff;
|
|
color: #722ed1;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.human-review-request i {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* 调整评查点样式以适应窄空间 */
|
|
.review-point-header {
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.review-point-title {
|
|
font-size: 13px;
|
|
line-height: 1.3;
|
|
margin-right: 8px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.review-point-desc {
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.status-badge {
|
|
font-size: 11px;
|
|
padding: 1px 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.replace-action {
|
|
font-size: 11px;
|
|
padding: 2px 8px;
|
|
height: auto;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* 处理中状态 */
|
|
.status-processing {
|
|
background-color: #e6f7ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
/* 人工审核相关样式 */
|
|
.manual-review-container {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 4px;
|
|
border-left: 3px solid #1890ff;
|
|
}
|
|
|
|
.manual-review-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.manual-review-title {
|
|
font-weight: 500;
|
|
color: #1890ff;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.manual-review-title i {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.manual-review-textarea {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #e8e8e8;
|
|
border-radius: 4px;
|
|
min-height: 80px;
|
|
margin-bottom: 8px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.manual-review-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.manual-review-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.status-processing {
|
|
background-color: #e6f7ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.status-approved {
|
|
background-color: #f6ffed;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.status-rejected {
|
|
background-color: #fff2f0;
|
|
color: #ff4d4f;
|
|
}
|
|
|
|
/* 历史意见样式 */
|
|
.history-opinions {
|
|
margin-top: 8px;
|
|
padding-top: 8px;
|
|
border-top: 1px dashed #e8e8e8;
|
|
}
|
|
|
|
.history-opinion-item {
|
|
padding: 8px;
|
|
background-color: #ffffff;
|
|
border-radius: 4px;
|
|
margin-bottom: 6px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.opinion-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
color: #999;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.opinion-content {
|
|
color: #333;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="layout-container">
|
|
<!-- 侧边栏 -->
|
|
<div class="sidebar">
|
|
<div class="py-6 px-4 border-b border-gray-100">
|
|
<div class="flex items-center">
|
|
<i class="ri-file-search-line text-primary text-xl mr-2"></i>
|
|
<h2 class="text-lg font-medium">AI审核系统</h2>
|
|
</div>
|
|
</div>
|
|
<div class="py-4">
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-dashboard-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-upload-line mr-3"></i>
|
|
<span>文件上传</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item active">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-list-check-2 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">评查详情</span>
|
|
</div>
|
|
|
|
<!-- 文件信息和操作 -->
|
|
<div class="mb-4">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<h2 class="text-xl font-medium">烟草产品销售合同（2023版）.docx <span class="text-sm text-secondary font-normal">合同编号：XS-2023-1025-001</span></h2>
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<button class="ant-btn ant-btn-default">
|
|
<i class="ri-file-download-line"></i> 下载原文件
|
|
</button>
|
|
<button class="ant-btn ant-btn-default">
|
|
<i class="ri-file-copy-line"></i> 导出评查报告
|
|
</button>
|
|
<button class="ant-btn ant-btn-primary">
|
|
<i class="ri-check-double-line"></i> 确认评查结果
|
|
</button>
|
|
</div>
|
|
</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 space-y-4 lg:space-y-0 lg:space-x-4">
|
|
<!-- 左侧：文件预览 -->
|
|
<div class="w-full lg:w-2/3">
|
|
<div class="file-preview">
|
|
<div class="file-preview-header py-2 px-4 flex items-center justify-between bg-primary-light" style="height: 36px;">
|
|
<div class="flex items-center">
|
|
<i class="ri-file-text-line text-primary mr-2"></i>
|
|
<span class="font-medium text-primary">文件预览</span>
|
|
</div>
|
|
<div class="file-preview-actions">
|
|
<button class="ant-btn ant-btn-sm ant-btn-default py-0 px-1 text-xs h-5 leading-5" id="zoomIn">
|
|
<i class="ri-zoom-in-line"></i>
|
|
</button>
|
|
<button class="ant-btn ant-btn-sm ant-btn-default py-0 px-1 text-xs h-5 leading-5" id="zoomOut">
|
|
<i class="ri-zoom-out-line"></i>
|
|
</button>
|
|
<button class="ant-btn ant-btn-sm ant-btn-default py-0 px-1 text-xs h-5 leading-5" id="toggleHighlights">
|
|
<i class="ri-mark-pen-line"></i> 高亮问题
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="file-preview-content">
|
|
<div class="pdf-container">
|
|
<!-- 移除页面控制部分 -->
|
|
<div class="pdf-viewer">
|
|
<!-- 模拟Word文档内容 -->
|
|
<div class="word-document" style="position: relative; min-height: 800px;">
|
|
<h1>烟草产品销售合同</h1>
|
|
<p style="text-align: right;">合同编号：XS-2023-1025-001</p>
|
|
|
|
<div style="margin: 20px 0;">
|
|
<p><strong>甲方（供方）：</strong>XX烟草公司</p>
|
|
<p>地址：XX省XX市XX区XX路XX号</p>
|
|
<p>法定代表人：张XX</p>
|
|
<p>联系电话：123-4567-8901</p>
|
|
<p> </p>
|
|
<p><strong>乙方（需方）：</strong>YY贸易有限公司</p>
|
|
<p>地址：XX省XX市XX区YY路YY号</p>
|
|
<p>法定代表人：李YY</p>
|
|
<p>联系电话：123-4567-8902</p>
|
|
</div>
|
|
|
|
<p>根据《中华人民共和国合同法》及有关法律法规的规定，经双方协商一致，签订本合同，共同遵守。</p>
|
|
|
|
<h2>第一条 总则</h2>
|
|
<p>1.1 本合同适用于甲乙双方之间的烟草制品买卖事宜。</p>
|
|
<p>1.2 双方应本着平等互利、诚实信用的原则履行本合同。</p>
|
|
|
|
<h2>第二条 合同标的物</h2>
|
|
<p>2.1 产品名称：烟草制品</p>
|
|
<p>2.2 规格型号：如附件所列</p>
|
|
<div class="highlight-area warning" style="display: inline-block; position: relative; padding: 2px; margin: -2px;" data-review-id="12">
|
|
<p>2.3 数量：5000箱</p>
|
|
</div>
|
|
<div class="highlight-area warning" style="display: inline-block; position: relative; padding: 2px; margin: -2px;" data-review-id="11">
|
|
<p>2.4 质量要求：符合国家标准GB/T XXXXX-XXXX</p>
|
|
</div>
|
|
|
|
<h2>第三条 交货与付款</h2>
|
|
<p>3.1 交货时间：自合同签订之日起30日内。</p>
|
|
<div class="highlight-area error" style="display: inline-block; position: relative; padding: 2px; margin: -2px;" data-review-id="1">
|
|
<p>3.2 乙方应在收到货物之日起5个工作日内支付合同款项，甲方应在收到乙方全部付款后开具增值税专用发票，乙方应在收到发票后支付剩余款项。</p>
|
|
</div>
|
|
<p>3.3 交货地点：乙方指定的仓库。</p>
|
|
<div class="highlight-area warning" style="display: inline-block; position: relative; padding: 2px; margin: -2px;" data-review-id="9">
|
|
<p>3.4 运输方式：陆运，运费由甲方承担。</p>
|
|
</div>
|
|
|
|
<h2>第八条 争议解决</h2>
|
|
<div class="highlight-area warning" style="display: inline-block; position: relative; padding: 2px; margin: -2px;" data-review-id="2">
|
|
<p>如合同发生纠纷，双方应协商解决。</p>
|
|
</div>
|
|
|
|
<h2>第九条 不可抗力</h2>
|
|
<div class="highlight-area warning" style="display: inline-block; position: relative; padding: 2px; margin: -2px;" data-review-id="6">
|
|
<p>任何一方因不可抗力而未能履行其在本合同项下的义务，不应被视为违约。</p>
|
|
</div>
|
|
|
|
<h2>第十条 保密条款</h2>
|
|
<div class="highlight-area warning" style="display: inline-block; position: relative; padding: 2px; margin: -2px;" data-review-id="7">
|
|
<p>双方同意对本合同内容保密。</p>
|
|
</div>
|
|
|
|
<h2>第十一条 合同有效期</h2>
|
|
<div class="highlight-area success" style="display: inline-block; position: relative; padding: 2px; margin: -2px;" data-review-id="14">
|
|
<p>本合同自签订之日起生效，至双方义务全部履行完毕时终止。任何一方解除合同应提前30日书面通知另一方。</p>
|
|
</div>
|
|
|
|
<h2>第十二条 合同文本</h2>
|
|
<p>本合同一式两份，甲乙双方各执一份，具有同等法律效力。</p>
|
|
|
|
<!-- 缺少法律适用条款 -->
|
|
<div class="highlight-area error" style="display: inline-block; position: relative; padding: 2px; margin: -2px; background-color: rgba(255, 77, 79, 0.2); border: 2px dashed #ff4d4f;" data-review-id="10">
|
|
<p style="font-style: italic; color: #999;">【法律适用条款缺失】</p>
|
|
</div>
|
|
|
|
<!-- 缺少免责条款 -->
|
|
<div class="highlight-area warning" style="display: inline-block; position: relative; padding: 2px; margin: -2px; background-color: rgba(250, 173, 20, 0.2); border: 2px dashed #faad14;" data-review-id="13">
|
|
<p style="font-style: italic; color: #999;">【免责条款缺失】</p>
|
|
</div>
|
|
|
|
<div style="margin-top: 40px;">
|
|
<p>甲方（盖章）：</p>
|
|
<p>代表人签字：</p>
|
|
<p>日期：2023年10月20日</p>
|
|
<p> </p>
|
|
<div class="highlight-area warning" style="display: inline-block; position: relative; padding: 2px; margin: -2px;" data-review-id="3">
|
|
<p>乙方（盖章）：YY贸易有限公司</p>
|
|
<p>代表人签字：李YY</p>
|
|
<p>日期：2023年10月20日</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 工具提示 -->
|
|
<div class="tooltip" id="reviewTooltip">
|
|
<div class="tooltip-title">付款条件描述不明确</div>
|
|
<div class="tooltip-content">合同中关于付款条件的描述存在歧义，无法明确确定付款时间和条件。</div>
|
|
</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">15</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">6</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">7</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">2</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" placeholder="输入自定义内容..." 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-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" placeholder="输入自定义内容..." rows="3">如合同发生纠纷，双方应友好协商解决；协商不成的，任何一方均有权向甲方所在地人民法院提起诉讼。任何一方未能履行本合同约定义务，应向守约方支付合同总金额的10%作为违约金；给对方造成损失的，还应赔偿由此产生的全部损失。</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-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;" onclick="approveReviewItem(3)">
|
|
<i class="ri-check-line"></i> 通过
|
|
</button>
|
|
<button class="replace-action" style="background-color: #ff4d4f;" onclick="rejectReviewItem(3)">
|
|
<i class="ri-close-line"></i> 不通过
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 评查点9：交货方式模糊 - 新增人工介入项 -->
|
|
<div class="review-point-item" data-review-id="9">
|
|
<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>
|
|
<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="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-success">已通过</span>
|
|
</div>
|
|
<p class="text-xs">经核实，该交货方式虽然描述不够详细，但符合行业惯例且双方已经多次合作，不会造成实际履行障碍。</p>
|
|
<div class="text-right text-xs text-gray-500 mt-1">
|
|
审核人：王法务 | 时间：2023-11-05 14:30:22
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end mt-2">
|
|
<button class="replace-action" style="background-color: #722ed1;" onclick="reopenReviewItem(9)">
|
|
<i class="ri-restart-line"></i> 重新审核
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 评查点10：未明确法律适用条款 - 错误状态 -->
|
|
<div class="review-point-item" data-review-id="10">
|
|
<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="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" placeholder="输入自定义内容..." rows="3">第十三条 法律适用
|
|
本合同的订立、效力、解释、履行及争议的解决均适用中华人民共和国法律。因本合同引起的或与本合同有关的任何争议，双方应友好协商解决。协商不成的，提交甲方所在地人民法院诉讼解决。</textarea>
|
|
</div>
|
|
</div>
|
|
<button class="replace-action w-full justify-center mt-2">
|
|
<i class="ri-add-line"></i> 一键添加条款
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 评查点11：履行义务不明确 - 错误状态 -->
|
|
<div class="review-point-item" data-review-id="11">
|
|
<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="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>
|
|
</div>
|
|
<div class="bg-gray-50 p-2 rounded">
|
|
<div class="font-medium text-sm mb-1">《中华人民共和国民法典》</div>
|
|
<div class="text-xs">
|
|
<div class="mb-1">第五百八十五条</div>
|
|
<div class="mb-1">第五百八十六条</div>
|
|
<div class="mb-1 text-gray-600">当事人应当按照约定全面履行自己的义务。</div>
|
|
</div>
|
|
</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" placeholder="输入自定义内容..." rows="3">第五条 履行义务
|
|
甲方应按照本合同约定的时间、地点交付符合合同约定数量、质量的商品，并提供相应的技术资料和售后服务。乙方应按照本合同约定的时间、方式支付货款。双方均应诚实守信，全面履行合同义务。</textarea>
|
|
</div>
|
|
</div>
|
|
<button class="replace-action w-full justify-center mt-2">
|
|
<i class="ri-replace-line"></i> 一键替换
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 新增：评查通过的记录1 -->
|
|
<div class="review-point-item" data-review-id="15">
|
|
<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>
|
|
|
|
<!-- 新增：评查通过的记录2 -->
|
|
<div class="review-point-item" data-review-id="16">
|
|
<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>
|
|
|
|
<!-- 新增：评查通过的记录3 -->
|
|
<div class="review-point-item" data-review-id="17">
|
|
<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>
|
|
|
|
<!-- 评查点14：合同终止通知时限 - 已解决状态 -->
|
|
<div class="review-point-item" data-review-id="14">
|
|
<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>
|
|
|
|
<!-- 新增：评查通过的记录4 -->
|
|
<div class="review-point-item" data-review-id="18">
|
|
<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>
|
|
</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-lightbulb-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 mb-4">
|
|
<div class="flex items-start">
|
|
<i class="ri-lightbulb-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">75分</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: 75%"></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">5.2MB</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-10-25 14:30:45</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>
|
|
</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-paper-2-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">2023年10月20日</div>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-2 flex items-start">
|
|
<div class="w-24 text-gray-500 text-sm flex-shrink-0 pt-0.5">合同当事人：</div>
|
|
<div class="text-sm font-medium flex-1">
|
|
<div>甲方：XX烟草公司</div>
|
|
<div>乙方：YY贸易有限公司</div>
|
|
</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">¥ 1,580,000.00</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年11月1日至2024年10月31日</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 评查信息卡片 -->
|
|
<div>
|
|
<div class="py-3 px-4 bg-purple-50 flex items-center">
|
|
<i class="ri-search-eye-line text-purple-500 text-lg mr-2"></i>
|
|
<h3 class="font-medium text-purple-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-10-25 14:35: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">DeepSeek</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="flex items-center">
|
|
<span class="status-badge status-warning text-xs">
|
|
<i class="ri-alert-line mr-1"></i>警告
|
|
</span>
|
|
<span class="text-sm ml-2">（共发现9个问题）</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 评查结果概览 -->
|
|
<div class="mt-4 pt-4 border-t border-gray-100">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="text-sm font-medium">评查得分：</div>
|
|
<div class="text-warning font-medium">75分</div>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div class="bg-warning h-2 rounded-full" style="width: 75%"></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">通过: 6</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">警告: 7</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">错误: 2</span>
|
|
</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(navItem => {
|
|
navItem.classList.remove('active');
|
|
});
|
|
|
|
// 添加当前选项卡的活动状态
|
|
this.classList.add('active');
|
|
|
|
// 隐藏所有选项卡内容
|
|
tabPanes.forEach(pane => {
|
|
pane.classList.remove('active');
|
|
});
|
|
|
|
// 显示当前选项卡内容
|
|
const targetTab = this.getAttribute('data-tab');
|
|
document.getElementById(targetTab).classList.add('active');
|
|
});
|
|
});
|
|
|
|
// 高亮区域与评查点关联
|
|
const highlightAreas = document.querySelectorAll('.highlight-area');
|
|
const reviewItems = document.querySelectorAll('.review-point-item');
|
|
const reviewTooltip = document.getElementById('reviewTooltip');
|
|
const reviewDetailPanel = document.getElementById('reviewDetailPanel');
|
|
const closeDetailBtn = document.getElementById('closeDetailPanel');
|
|
|
|
// 高亮区域鼠标悬停显示提示
|
|
highlightAreas.forEach(area => {
|
|
area.addEventListener('mouseenter', function(e) {
|
|
const reviewId = this.getAttribute('data-review-id');
|
|
const reviewItem = document.querySelector(`.review-point-item[data-review-id="${reviewId}"]`);
|
|
|
|
if (reviewItem) {
|
|
const title = reviewItem.querySelector('.review-point-title').textContent;
|
|
const desc = reviewItem.querySelector('.review-point-desc').textContent;
|
|
|
|
reviewTooltip.querySelector('.tooltip-title').textContent = title;
|
|
reviewTooltip.querySelector('.tooltip-content').textContent = desc;
|
|
|
|
// 计算并设置tooltip位置
|
|
const rect = this.getBoundingClientRect();
|
|
const containerRect = document.querySelector('.pdf-viewer').getBoundingClientRect();
|
|
|
|
reviewTooltip.style.left = `${rect.left + rect.width/2 - containerRect.left}px`;
|
|
reviewTooltip.style.top = `${rect.bottom + 10 - containerRect.top + document.querySelector('.pdf-viewer').scrollTop}px`;
|
|
reviewTooltip.style.display = 'block';
|
|
}
|
|
});
|
|
|
|
area.addEventListener('mouseleave', function() {
|
|
reviewTooltip.style.display = 'none';
|
|
});
|
|
|
|
// 点击高亮区域显示对应评查点详情
|
|
area.addEventListener('click', function() {
|
|
// 先切换到预览选项卡
|
|
document.querySelector('.tab-nav-item[data-tab="tab-preview"]').click();
|
|
|
|
const reviewId = this.getAttribute('data-review-id');
|
|
selectReviewPoint(reviewId);
|
|
});
|
|
});
|
|
|
|
// 选择评查点
|
|
function selectReviewPoint(reviewId) {
|
|
// 移除所有评查点的选中状态
|
|
reviewItems.forEach(item => {
|
|
item.classList.remove('active');
|
|
});
|
|
|
|
// 添加选中状态到目标评查点
|
|
const targetItem = document.querySelector(`.review-point-item[data-review-id="${reviewId}"]`);
|
|
if (targetItem) {
|
|
targetItem.classList.add('active');
|
|
|
|
// 确保选中的评查点在可视区域内
|
|
targetItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
|
|
// 更新详情面板
|
|
updateDetailPanel(targetItem);
|
|
|
|
// 显示详情面板
|
|
reviewDetailPanel.classList.add('visible');
|
|
}
|
|
}
|
|
|
|
// 更新详情面板内容
|
|
function updateDetailPanel(reviewItem) {
|
|
const title = reviewItem.querySelector('.review-point-title').textContent;
|
|
const desc = reviewItem.querySelector('.review-point-desc').textContent;
|
|
const status = reviewItem.querySelector('.status-badge').innerHTML;
|
|
const location = reviewItem.querySelector('.review-point-location span').textContent;
|
|
|
|
// 更新详情面板标题
|
|
document.querySelector('.review-detail-title').textContent = title;
|
|
|
|
// 根据不同评查点ID更新不同内容
|
|
const reviewId = reviewItem.getAttribute('data-review-id');
|
|
|
|
// 此处可以根据实际需求从后端获取更详细的评查点信息
|
|
// 这里使用硬编码的示例数据
|
|
let originalText = "";
|
|
let suggestedChange = "";
|
|
|
|
switch(reviewId) {
|
|
case "1":
|
|
originalText = "乙方应在收到货物之日起5个工作日内支付合同款项，甲方应在收到乙方全部付款后开具增值税专用发票，乙方应在收到发票后支付剩余款项。";
|
|
suggestedChange = "建议明确付款条件和时间节点，例如：<br>\"乙方应在收到货物验收合格之日起5个工作日内支付合同总额的70%，甲方收到该部分款项后3个工作日内向乙方开具等额增值税专用发票；乙方应在收到发票之日起5个工作日内支付剩余30%款项。\"";
|
|
break;
|
|
case "2":
|
|
originalText = "如合同发生纠纷，双方应协商解决。";
|
|
suggestedChange = "建议增加明确的违约责任条款，例如：<br>\"任何一方未能履行本合同约定义务，应向守约方支付合同总金额的10%作为违约金；给对方造成损失的，还应赔偿由此产生的全部损失。\"";
|
|
break;
|
|
case "3":
|
|
originalText = "乙方（盖章）：YY贸易有限公司<br>代表人签字：李YY<br>日期：2023年10月20日";
|
|
suggestedChange = "需补充甲方公章，确保合同签署的完整性和法律效力。";
|
|
break;
|
|
case "6":
|
|
originalText = "任何一方因不可抗力而未能履行其在本合同项下的义务，不应被视为违约。";
|
|
suggestedChange = "建议修改为：\"不可抗力是指不能预见、不能避免并不能克服的客观情况，包括但不限于自然灾害、战争、政府行为等。遇有不可抗力的一方应在72小时内通知另一方，并在15日内提供相关证明文件。因不可抗力导致无法履行合同的，双方可协商变更或解除合同，互不承担违约责任。\"";
|
|
break;
|
|
case "7":
|
|
originalText = "双方同意对本合同内容保密。";
|
|
suggestedChange = "建议修改为：\"双方应对在合同签订和履行过程中获知的对方的商业秘密（包括但不限于技术信息、经营信息、客户资料等）予以保密。\"";
|
|
break;
|
|
case "8":
|
|
originalText = "本合同自签订之日起生效，至双方义务全部履行完毕时终止。";
|
|
suggestedChange = "建议修改为：\"本合同自签订之日起生效，至双方义务全部履行完毕时终止。\"";
|
|
break;
|
|
default:
|
|
originalText = "[原文内容加载中...]";
|
|
suggestedChange = "[建议加载中...]";
|
|
}
|
|
|
|
// 更新面板内容
|
|
document.querySelector('.review-detail-panel .review-detail-content:nth-of-type(1)').innerHTML = desc;
|
|
document.querySelector('.review-detail-panel .review-detail-content:nth-of-type(2)').innerHTML = originalText;
|
|
document.querySelector('.review-detail-panel .review-detail-content:nth-of-type(3)').innerHTML = suggestedChange;
|
|
|
|
// 绑定替换按钮事件
|
|
const replaceBtn = document.querySelector('.review-detail-panel .replace-action');
|
|
if (replaceBtn) {
|
|
replaceBtn.addEventListener('click', function() {
|
|
handleContentReplace(reviewId);
|
|
});
|
|
}
|
|
|
|
// 根据评查点状态调整按钮显示
|
|
const actionButtons = document.querySelector('.review-detail-actions');
|
|
if (reviewItem.querySelector('.status-badge').classList.contains('status-success')) {
|
|
// 如果是通过状态，隐藏"标记为已解决"按钮
|
|
actionButtons.querySelector('button:first-child').style.display = 'none';
|
|
} else {
|
|
actionButtons.querySelector('button:first-child').style.display = 'inline-flex';
|
|
}
|
|
}
|
|
|
|
// 内容替换处理函数
|
|
function handleContentReplace(reviewId) {
|
|
// 根据不同评查点ID执行不同的替换操作
|
|
let newContent = "";
|
|
let highlightArea = document.querySelector(`.highlight-area[data-review-id="${reviewId}"]`);
|
|
|
|
switch(reviewId) {
|
|
case "1":
|
|
newContent = "乙方应在收到货物验收合格之日起5个工作日内支付合同总额的70%，甲方收到该部分款项后3个工作日内向乙方开具等额增值税专用发票；乙方应在收到发票之日起5个工作日内支付剩余30%款项。";
|
|
break;
|
|
case "2":
|
|
newContent = "任何一方未能履行本合同约定义务，应向守约方支付合同总金额的10%作为违约金；给对方造成损失的，还应赔偿由此产生的全部损失。";
|
|
break;
|
|
case "6":
|
|
newContent = "不可抗力是指不能预见、不能避免并不能克服的客观情况，包括但不限于自然灾害、战争、政府行为等。遇有不可抗力的一方应在72小时内通知另一方，并在15日内提供相关证明文件。因不可抗力导致无法履行合同的，双方可协商变更或解除合同，互不承担违约责任。";
|
|
break;
|
|
case "7":
|
|
newContent = "双方应对在合同签订和履行过程中获知的对方的商业秘密（包括但不限于技术信息、经营信息、客户资料等）予以保密。\"";
|
|
break;
|
|
case "8":
|
|
newContent = "本合同自签订之日起生效，至双方义务全部履行完毕时终止。\"";
|
|
break;
|
|
default:
|
|
alert("未找到对应的替换内容");
|
|
return;
|
|
}
|
|
|
|
// 模拟替换文档内容
|
|
if (highlightArea && highlightArea.querySelector('p')) {
|
|
highlightArea.querySelector('p').innerHTML = newContent;
|
|
|
|
// 更改高亮区域样式，表示已修改
|
|
highlightArea.classList.remove('warning');
|
|
highlightArea.classList.add('success');
|
|
|
|
// 更新评查点状态
|
|
const reviewItem = document.querySelector(`.review-point-item[data-review-id="${reviewId}"]`);
|
|
if (reviewItem) {
|
|
const statusBadge = reviewItem.querySelector('.status-badge');
|
|
statusBadge.className = 'status-badge status-success';
|
|
statusBadge.innerHTML = '<i class="ri-checkbox-circle-line mr-1"></i>已解决';
|
|
}
|
|
|
|
// 更新详情面板显示
|
|
document.querySelector('.review-detail-panel .review-detail-content:nth-of-type(2)').innerHTML = newContent;
|
|
document.querySelector('.review-detail-panel .review-detail-content:nth-of-type(3)').innerHTML = "<span class='text-success'><i class='ri-check-double-line'></i> 内容已更新</span>";
|
|
|
|
alert("内容已成功替换！");
|
|
} else if (reviewId === "3") {
|
|
// 特殊处理签章问题
|
|
alert("已通知相关人员完善合同签章！");
|
|
// 更新评查点状态为"处理中"
|
|
const reviewItem = document.querySelector(`.review-point-item[data-review-id="${reviewId}"]`);
|
|
if (reviewItem) {
|
|
const statusBadge = reviewItem.querySelector('.status-badge');
|
|
statusBadge.className = 'status-badge status-processing';
|
|
statusBadge.innerHTML = '<i class="ri-time-line mr-1"></i>处理中';
|
|
}
|
|
} else {
|
|
alert("替换失败：未找到对应内容区域");
|
|
}
|
|
}
|
|
|
|
// 绑定评查建议选项卡中的替换按钮事件
|
|
document.querySelectorAll('#tab-suggestion .replace-action').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
// 获取当前评查点ID
|
|
const reviewItem = this.closest('.bg-warning');
|
|
const title = reviewItem.querySelector('.font-medium').textContent;
|
|
|
|
// 通过标题查找对应的评查点ID
|
|
let reviewId;
|
|
document.querySelectorAll('.review-point-item').forEach(item => {
|
|
if (item.querySelector('.review-point-title').textContent === title) {
|
|
reviewId = item.getAttribute('data-review-id');
|
|
}
|
|
});
|
|
|
|
if (reviewId) {
|
|
handleContentReplace(reviewId);
|
|
} else {
|
|
alert("未找到对应的评查点");
|
|
}
|
|
});
|
|
});
|
|
|
|
// 点击评查点项显示详情
|
|
reviewItems.forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
const reviewId = this.getAttribute('data-review-id');
|
|
selectReviewPoint(reviewId);
|
|
|
|
// 找到对应的高亮区域并突出显示
|
|
const highlightArea = document.querySelector(`.highlight-area[data-review-id="${reviewId}"]`);
|
|
if (highlightArea) {
|
|
// 移除所有高亮区域的突出显示
|
|
highlightAreas.forEach(area => {
|
|
area.style.zIndex = '10';
|
|
area.style.boxShadow = 'none';
|
|
});
|
|
|
|
// 添加突出显示到目标区域
|
|
highlightArea.style.zIndex = '20';
|
|
highlightArea.style.boxShadow = '0 0 0 2px yellow, 0 0 10px rgba(0,0,0,0.3)';
|
|
|
|
// 确保高亮区域在可视范围内
|
|
highlightArea.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}
|
|
});
|
|
});
|
|
|
|
// 关闭详情面板
|
|
closeDetailBtn.addEventListener('click', function() {
|
|
reviewDetailPanel.classList.remove('visible');
|
|
});
|
|
|
|
// PDF控制功能
|
|
const zoomInBtn = document.getElementById('zoomIn');
|
|
const zoomOut = document.getElementById('zoomOut');
|
|
const prevPage = document.getElementById('prevPage');
|
|
const nextPage = document.getElementById('nextPage');
|
|
const currentPageEl = document.getElementById('currentPage');
|
|
const totalPagesEl = document.getElementById('totalPages');
|
|
const toggleHighlightsBtn = document.getElementById('toggleHighlights');
|
|
|
|
let currentPage = 1;
|
|
const totalPages = 5; // 示例总页数
|
|
let zoomLevel = 100;
|
|
let highlightsVisible = true;
|
|
|
|
// 更新当前页码
|
|
currentPageEl.textContent = currentPage;
|
|
totalPagesEl.textContent = totalPages;
|
|
|
|
// 页面切换
|
|
prevPage.addEventListener('click', function() {
|
|
if (currentPage > 1) {
|
|
currentPage--;
|
|
currentPageEl.textContent = currentPage;
|
|
|
|
// 在实际应用中，这里应该加载不同页面的内容
|
|
alert(`显示第 ${currentPage} 页`);
|
|
}
|
|
});
|
|
|
|
nextPage.addEventListener('click', function() {
|
|
if (currentPage < totalPages) {
|
|
currentPage++;
|
|
currentPageEl.textContent = currentPage;
|
|
|
|
// 在实际应用中，这里应该加载不同页面的内容
|
|
alert(`显示第 ${currentPage} 页`);
|
|
}
|
|
});
|
|
|
|
// 缩放控制
|
|
zoomInBtn.addEventListener('click', function() {
|
|
if (zoomLevel < 200) {
|
|
zoomLevel += 10;
|
|
updateZoom();
|
|
}
|
|
});
|
|
|
|
zoomOut.addEventListener('click', function() {
|
|
if (zoomLevel > 50) {
|
|
zoomLevel -= 10;
|
|
updateZoom();
|
|
}
|
|
});
|
|
|
|
function updateZoom() {
|
|
document.querySelector('.word-document').style.transform = `scale(${zoomLevel / 100})`;
|
|
document.querySelector('.word-document').style.transformOrigin = 'center top';
|
|
}
|
|
|
|
// 切换高亮显示
|
|
toggleHighlightsBtn.addEventListener('click', function() {
|
|
highlightsVisible = !highlightsVisible;
|
|
|
|
highlightAreas.forEach(area => {
|
|
area.style.display = highlightsVisible ? 'block' : 'none';
|
|
});
|
|
|
|
toggleHighlightsBtn.innerHTML = highlightsVisible ?
|
|
'<i class="ri-mark-pen-line"></i> 隐藏高亮' :
|
|
'<i class="ri-mark-pen-line"></i> 显示高亮';
|
|
});
|
|
|
|
// 保存审核意见按钮
|
|
const saveOpinionBtn = document.querySelector('.review-detail-actions .ant-btn-primary');
|
|
saveOpinionBtn.addEventListener('click', function() {
|
|
const opinionText = document.querySelector('.form-textarea').value;
|
|
const activeReviewId = document.querySelector('.review-point-item.active').getAttribute('data-review-id');
|
|
|
|
if (opinionText.trim()) {
|
|
alert(`已保存对评查点#${activeReviewId}的审核意见: ${opinionText}`);
|
|
|
|
// 在实际应用中，这里应该调用API保存审核意见
|
|
} else {
|
|
alert('请输入审核意见');
|
|
}
|
|
});
|
|
|
|
// 标记为已解决按钮
|
|
const resolveBtn = document.querySelector('.review-detail-actions button:first-child');
|
|
resolveBtn.addEventListener('click', function() {
|
|
const activeItem = document.querySelector('.review-point-item.active');
|
|
const reviewId = activeItem.getAttribute('data-review-id');
|
|
|
|
// 更新状态标签
|
|
const statusBadge = activeItem.querySelector('.status-badge');
|
|
statusBadge.className = 'status-badge status-success';
|
|
statusBadge.innerHTML = '<i class="ri-checkbox-circle-line mr-1"></i>已解决';
|
|
|
|
// 更新高亮区域样式
|
|
const highlightArea = document.querySelector(`.highlight-area[data-review-id="${reviewId}"]`);
|
|
if (highlightArea) {
|
|
highlightArea.className = highlightArea.className.replace('warning', 'success').replace('error', 'success');
|
|
}
|
|
|
|
alert(`评查点#${reviewId}已标记为已解决`);
|
|
});
|
|
|
|
// 忽略此问题按钮
|
|
const ignoreBtn = document.querySelector('.review-detail-actions button:nth-child(2)');
|
|
ignoreBtn.addEventListener('click', function() {
|
|
const activeItem = document.querySelector('.review-point-item.active');
|
|
const reviewId = activeItem.getAttribute('data-review-id');
|
|
|
|
// 添加忽略标记
|
|
const statusBadge = activeItem.querySelector('.status-badge');
|
|
statusBadge.innerHTML += ' <small>(已忽略)</small>';
|
|
|
|
// 淡化显示
|
|
activeItem.style.opacity = '0.6';
|
|
|
|
// 隐藏对应的高亮区域
|
|
const highlightArea = document.querySelector(`.highlight-area[data-review-id="${reviewId}"]`);
|
|
if (highlightArea) {
|
|
highlightArea.style.display = 'none';
|
|
}
|
|
|
|
alert(`评查点#${reviewId}已被忽略`);
|
|
});
|
|
|
|
// 确认评查结果按钮
|
|
const confirmResultBtn = document.querySelector('.ant-btn-primary i.ri-check-double-line').closest('button');
|
|
confirmResultBtn.addEventListener('click', function() {
|
|
// 检查是否有未处理的警告或错误
|
|
const unresolvedItems = document.querySelectorAll('.status-badge.status-warning, .status-badge.status-error');
|
|
|
|
if (unresolvedItems.length > 0) {
|
|
if (confirm(`还有 ${unresolvedItems.length} 个问题未解决，确定要提交确认吗？`)) {
|
|
alert('评查结果已确认');
|
|
window.location.href = '评查文件列表.html';
|
|
}
|
|
} else {
|
|
alert('所有问题已解决，评查结果已确认');
|
|
window.location.href = '评查文件列表.html';
|
|
}
|
|
});
|
|
|
|
// 初始化选中第一个评查点
|
|
selectReviewPoint("1");
|
|
});
|
|
|
|
// 保存人工审核草稿
|
|
function saveReviewDraft(reviewId) {
|
|
const reviewItem = document.querySelector(`.review-point-item[data-review-id="${reviewId}"]`);
|
|
const textarea = reviewItem.querySelector('.manual-review-textarea');
|
|
const opinion = textarea.value.trim();
|
|
|
|
if (!opinion) {
|
|
alert('请输入审核意见');
|
|
return;
|
|
}
|
|
|
|
// 在实际应用中应调用API保存草稿
|
|
// console.log('保存人工审核草稿:', {
|
|
reviewId: reviewId,
|
|
opinion: opinion
|
|
});
|
|
|
|
alert(`评查点#${reviewId}的审核意见已保存为草稿`);
|
|
}
|
|
|
|
// 通过人工审核
|
|
function approveReviewItem(reviewId) {
|
|
const reviewItem = document.querySelector(`.review-point-item[data-review-id="${reviewId}"]`);
|
|
const textarea = reviewItem.querySelector('.manual-review-textarea');
|
|
const opinion = textarea.value.trim();
|
|
|
|
if (!opinion) {
|
|
alert('请输入审核意见');
|
|
return;
|
|
}
|
|
|
|
// 在实际应用中应调用API提交审核结果
|
|
// console.log('通过人工审核:', {
|
|
reviewId: reviewId,
|
|
opinion: opinion,
|
|
result: 'approved'
|
|
});
|
|
|
|
// 更新状态标签
|
|
const statusBadge = reviewItem.querySelector('.status-badge');
|
|
statusBadge.className = 'status-badge status-success';
|
|
statusBadge.innerHTML = '<i class="ri-checkbox-circle-line mr-1"></i>已通过';
|
|
|
|
// 更新人工审核区域为只读状态
|
|
const container = reviewItem.querySelector('.manual-review-container');
|
|
const currentOpinion = textarea.value;
|
|
|
|
container.innerHTML = `
|
|
<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-success">已通过</span>
|
|
</div>
|
|
<p class="text-xs">${currentOpinion}</p>
|
|
<div class="text-right text-xs text-gray-500 mt-1">
|
|
审核人：当前用户 | 时间：${new Date().toLocaleString()}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// 更新高亮区域样式（如果存在）
|
|
const highlightArea = document.querySelector(`.highlight-area[data-review-id="${reviewId}"]`);
|
|
if (highlightArea) {
|
|
highlightArea.classList.remove('warning');
|
|
highlightArea.classList.add('success');
|
|
}
|
|
|
|
alert(`评查点#${reviewId}已通过人工审核`);
|
|
}
|
|
|
|
// 不通过人工审核
|
|
function rejectReviewItem(reviewId) {
|
|
const reviewItem = document.querySelector(`.review-point-item[data-review-id="${reviewId}"]`);
|
|
const textarea = reviewItem.querySelector('.manual-review-textarea');
|
|
const opinion = textarea.value.trim();
|
|
|
|
if (!opinion) {
|
|
alert('请输入审核意见');
|
|
return;
|
|
}
|
|
|
|
// 在实际应用中应调用API提交审核结果
|
|
// console.log('不通过人工审核:', {
|
|
reviewId: reviewId,
|
|
opinion: opinion,
|
|
result: 'rejected'
|
|
});
|
|
|
|
// 更新状态标签
|
|
const statusBadge = reviewItem.querySelector('.status-badge');
|
|
statusBadge.className = 'status-badge status-error';
|
|
statusBadge.innerHTML = '<i class="ri-close-circle-line mr-1"></i>不通过';
|
|
|
|
// 更新人工审核区域为只读状态
|
|
const container = reviewItem.querySelector('.manual-review-container');
|
|
const currentOpinion = textarea.value;
|
|
|
|
container.innerHTML = `
|
|
<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">${currentOpinion}</p>
|
|
<div class="text-right text-xs text-gray-500 mt-1">
|
|
审核人：当前用户 | 时间：${new Date().toLocaleString()}
|
|
</div>
|
|
</div>
|
|
<button class="ant-btn ant-btn-default ant-btn-sm mt-2" onclick="reopenReviewItem(${reviewId})">
|
|
<i class="ri-restart-line"></i> 重新审核
|
|
</button>
|
|
`;
|
|
|
|
alert(`评查点#${reviewId}未通过人工审核`);
|
|
}
|
|
|
|
// 重新打开人工审核
|
|
function reopenReviewItem(reviewId) {
|
|
const reviewItem = document.querySelector(`.review-point-item[data-review-id="${reviewId}"]`);
|
|
const container = reviewItem.querySelector('.manual-review-container');
|
|
const opinion = container.querySelector('p').textContent.trim();
|
|
|
|
// 恢复为编辑状态
|
|
container.innerHTML = `
|
|
<textarea class="manual-review-textarea" placeholder="请输入人工审核意见...">${opinion}</textarea>
|
|
<div class="manual-review-actions">
|
|
<button class="ant-btn ant-btn-default ant-btn-sm" onclick="saveReviewDraft(${reviewId})">
|
|
<i class="ri-save-line"></i> 保存草稿
|
|
</button>
|
|
<button class="ant-btn ant-btn-primary ant-btn-sm" onclick="approveReviewItem(${reviewId})">
|
|
<i class="ri-check-line"></i> 通过
|
|
</button>
|
|
<button class="ant-btn ant-btn-danger ant-btn-sm" onclick="rejectReviewItem(${reviewId})">
|
|
<i class="ri-close-line"></i> 不通过
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
// 更新状态标签为处理中
|
|
const statusBadge = reviewItem.querySelector('.status-badge');
|
|
statusBadge.className = 'status-badge status-processing';
|
|
statusBadge.innerHTML = '<i class="ri-time-line mr-1"></i>处理中';
|
|
|
|
alert(`评查点#${reviewId}已重新打开人工审核`);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |