|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>业务流程图 - 资金使用管理系统</title>
|
|
|
<link href="https://cdn.staticfile.org/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
|
|
<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css">
|
|
|
<style>
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
|
|
background-color: #f5f7fa;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
.page-header {
|
|
|
background: white;
|
|
|
padding: 25px 30px;
|
|
|
border-radius: 10px;
|
|
|
margin-bottom: 20px;
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
|
|
|
.page-title {
|
|
|
font-size: 24px;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
margin: 0;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
.page-subtitle {
|
|
|
color: #666;
|
|
|
font-size: 14px;
|
|
|
margin-top: 5px;
|
|
|
}
|
|
|
|
|
|
.chart-container {
|
|
|
background: white;
|
|
|
padding: 30px;
|
|
|
border-radius: 10px;
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
|
margin-bottom: 20px;
|
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
|
}
|
|
|
|
|
|
.chart-container:hover {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
.chart-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 25px;
|
|
|
padding-bottom: 15px;
|
|
|
border-bottom: 2px solid #e5e7eb;
|
|
|
}
|
|
|
|
|
|
.chart-title {
|
|
|
font-size: 18px;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
.chart-title i {
|
|
|
color: #667eea;
|
|
|
}
|
|
|
|
|
|
.chart-actions {
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
.mermaid {
|
|
|
text-align: center;
|
|
|
background: #fafafa;
|
|
|
padding: 20px;
|
|
|
border-radius: 8px;
|
|
|
overflow-x: auto;
|
|
|
}
|
|
|
|
|
|
.mermaid svg {
|
|
|
max-width: 100%;
|
|
|
height: auto;
|
|
|
}
|
|
|
|
|
|
.btn-sm {
|
|
|
padding: 6px 12px;
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
|
|
|
.badge-info {
|
|
|
background-color: #dbeafe;
|
|
|
color: #1e40af;
|
|
|
padding: 4px 10px;
|
|
|
font-size: 12px;
|
|
|
font-weight: 500;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
.loading-spinner {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
padding: 60px;
|
|
|
color: #667eea;
|
|
|
}
|
|
|
|
|
|
.loading-spinner i {
|
|
|
font-size: 48px;
|
|
|
animation: spin 1s linear infinite;
|
|
|
}
|
|
|
|
|
|
@keyframes spin {
|
|
|
0% { transform: rotate(0deg); }
|
|
|
100% { transform: rotate(360deg); }
|
|
|
}
|
|
|
|
|
|
.chart-description {
|
|
|
background: #f0f9ff;
|
|
|
border-left: 4px solid #3b82f6;
|
|
|
padding: 15px 20px;
|
|
|
margin-bottom: 20px;
|
|
|
border-radius: 4px;
|
|
|
font-size: 14px;
|
|
|
color: #1e40af;
|
|
|
}
|
|
|
|
|
|
.tabs-container {
|
|
|
background: white;
|
|
|
border-radius: 10px;
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.nav-tabs {
|
|
|
border-bottom: 2px solid #e5e7eb;
|
|
|
padding: 0 30px;
|
|
|
}
|
|
|
|
|
|
.nav-tabs .nav-link {
|
|
|
border: none;
|
|
|
color: #666;
|
|
|
padding: 15px 20px;
|
|
|
font-weight: 500;
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
|
|
|
.nav-tabs .nav-link:hover {
|
|
|
color: #667eea;
|
|
|
}
|
|
|
|
|
|
.nav-tabs .nav-link.active {
|
|
|
color: #667eea;
|
|
|
border-bottom: 3px solid #667eea;
|
|
|
margin-bottom: -2px;
|
|
|
}
|
|
|
|
|
|
.tab-content {
|
|
|
padding: 30px;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
body {
|
|
|
padding: 10px;
|
|
|
}
|
|
|
|
|
|
.chart-container {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
.chart-header {
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
.mermaid {
|
|
|
padding: 10px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<!-- 页面头部 -->
|
|
|
<div class="page-header">
|
|
|
<h1 class="page-title">
|
|
|
<i class="bi bi-diagram-3"></i> 业务流程图
|
|
|
</h1>
|
|
|
<p class="page-subtitle">可视化展示系统各业务流程，支持水平排列的流程图</p>
|
|
|
</div>
|
|
|
|
|
|
<!-- 标签页导航 -->
|
|
|
<div class="tabs-container">
|
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
|
<li class="nav-item" role="presentation">
|
|
|
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#payment-flow" type="button" role="tab">
|
|
|
<i class="bi bi-cash-coin"></i> 支付流程
|
|
|
</button>
|
|
|
</li>
|
|
|
<li class="nav-item" role="presentation">
|
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#budget-flow" type="button" role="tab">
|
|
|
<i class="bi bi-wallet"></i> 预算管理
|
|
|
</button>
|
|
|
</li>
|
|
|
<li class="nav-item" role="presentation">
|
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#approval-flow" type="button" role="tab">
|
|
|
<i class="bi bi-file-earmark-check"></i> 审批流程
|
|
|
</button>
|
|
|
</li>
|
|
|
<li class="nav-item" role="presentation">
|
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#auth-flow" type="button" role="tab">
|
|
|
<i class="bi bi-shield-lock"></i> 权限管理
|
|
|
</button>
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
<div class="tab-content">
|
|
|
<!-- 支付流程 -->
|
|
|
<div class="tab-pane fade show active" id="payment-flow" role="tabpanel">
|
|
|
<div class="chart-container">
|
|
|
<div class="chart-header">
|
|
|
<div class="chart-title">
|
|
|
<i class="bi bi-arrow-right-circle"></i>
|
|
|
直接支付流程
|
|
|
</div>
|
|
|
<div class="chart-actions">
|
|
|
<span class="badge-info">水平布局</span>
|
|
|
<button class="btn btn-sm btn-outline-primary" onclick="exportChart(this)">
|
|
|
<i class="bi bi-download"></i> 导出
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chart-description">
|
|
|
<i class="bi bi-info-circle"></i>
|
|
|
<strong>流程说明：</strong> 用户提交支付申请后，经财务审核和领导审批，审批通过后执行支付，未通过则退回修改。
|
|
|
</div>
|
|
|
<div class="mermaid">
|
|
|
graph LR
|
|
|
A[提交支付申请] --> B{财务审核}
|
|
|
B -->|通过| C[领导审批]
|
|
|
B -->|拒绝| D[退回修改]
|
|
|
C -->|批准| E[执行支付]
|
|
|
C -->|驳回| D
|
|
|
D --> A
|
|
|
E --> F[支付完成]
|
|
|
|
|
|
style A fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
|
|
|
style F fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
|
|
|
style D fill:#FFCCBC,stroke:#E64A19,stroke-width:2px
|
|
|
style B fill:#FFF9C4,stroke:#F9A825,stroke-width:2px
|
|
|
style C fill:#FFF9C4,stroke:#F9A825,stroke-width:2px
|
|
|
style E fill:#B2DFDB,stroke:#00897B,stroke-width:2px
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="chart-container">
|
|
|
<div class="chart-header">
|
|
|
<div class="chart-title">
|
|
|
<i class="bi bi-arrow-right-circle"></i>
|
|
|
非直接支付（北京支付）流程
|
|
|
</div>
|
|
|
<div class="chart-actions">
|
|
|
<span class="badge-info">水平布局</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chart-description">
|
|
|
<i class="bi bi-info-circle"></i>
|
|
|
<strong>流程说明：</strong> 北京支付流程包含额外的合规审核和财政审批环节。
|
|
|
</div>
|
|
|
<div class="mermaid">
|
|
|
graph LR
|
|
|
A[申请提交] --> B{合规审核}
|
|
|
B -->|通过| C{财务审核}
|
|
|
B -->|不通过| X[退回]
|
|
|
C -->|通过| D{财政审批}
|
|
|
C -->|不通过| X
|
|
|
D -->|批准| E[执行支付]
|
|
|
D -->|驳回| X
|
|
|
X --> A
|
|
|
E --> F{支付确认}
|
|
|
F -->|成功| G[完成]
|
|
|
F -->|失败| H[处理异常]
|
|
|
H --> E
|
|
|
|
|
|
style A fill:#E1F5FE,stroke:#0277BD,stroke-width:2px
|
|
|
style G fill:#A5D6A7,stroke:#2E7D32,stroke-width:2px
|
|
|
style X fill:#FFCDD2,stroke:#C62828,stroke-width:2px
|
|
|
style H fill:#FFE0B2,stroke:#EF6C00,stroke-width:2px
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 预算管理 -->
|
|
|
<div class="tab-pane fade" id="budget-flow" role="tabpanel">
|
|
|
<div class="chart-container">
|
|
|
<div class="chart-header">
|
|
|
<div class="chart-title">
|
|
|
<i class="bi bi-diagram-2"></i>
|
|
|
预算执行管理流程
|
|
|
</div>
|
|
|
<div class="chart-actions">
|
|
|
<span class="badge-info">树状结构</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chart-description">
|
|
|
<i class="bi bi-info-circle"></i>
|
|
|
<strong>流程说明：</strong> 预算管理包含三大模块：计划制定、预算执行和监督检查。
|
|
|
</div>
|
|
|
<div class="mermaid">
|
|
|
graph LR
|
|
|
Root[预算管理] --> Plan[计划制定]
|
|
|
Root --> Exec[预算执行]
|
|
|
Root --> Monitor[监督检查]
|
|
|
|
|
|
Plan --> P1[年度预算]
|
|
|
Plan --> P2[项目预算]
|
|
|
Plan --> P3[专项预算]
|
|
|
|
|
|
Exec --> E1[直接支付]
|
|
|
Exec --> E2[授权支付]
|
|
|
Exec --> E3[公务卡支付]
|
|
|
|
|
|
Monitor --> M1[进度监控]
|
|
|
Monitor --> M2[绩效评价]
|
|
|
Monitor --> M3[审计检查]
|
|
|
|
|
|
style Root fill:#1976D2,color:#fff,stroke:#0D47A1,stroke-width:3px
|
|
|
style Plan fill:#4CAF50,color:#fff,stroke:#2E7D32,stroke-width:2px
|
|
|
style Exec fill:#FF9800,color:#fff,stroke:#E65100,stroke-width:2px
|
|
|
style Monitor fill:#F44336,color:#fff,stroke:#B71C1C,stroke-width:2px
|
|
|
style P1 fill:#81C784,stroke:#2E7D32,stroke-width:2px
|
|
|
style P2 fill:#81C784,stroke:#2E7D32,stroke-width:2px
|
|
|
style P3 fill:#81C784,stroke:#2E7D32,stroke-width:2px
|
|
|
style E1 fill:#FFB74D,stroke:#E65100,stroke-width:2px
|
|
|
style E2 fill:#FFB74D,stroke:#E65100,stroke-width:2px
|
|
|
style E3 fill:#FFB74D,stroke:#E65100,stroke-width:2px
|
|
|
style M1 fill:#EF5350,stroke:#B71C1C,stroke-width:2px
|
|
|
style M2 fill:#EF5350,stroke:#B71C1C,stroke-width:2px
|
|
|
style M3 fill:#EF5350,stroke:#B71C1C,stroke-width:2px
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="chart-container">
|
|
|
<div class="chart-header">
|
|
|
<div class="chart-title">
|
|
|
<i class="bi bi-arrow-right-circle"></i>
|
|
|
预算申报审批流程
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mermaid">
|
|
|
graph LR
|
|
|
A[编制预算] --> B[部门审核]
|
|
|
B --> C{预算金额}
|
|
|
C -->|小于10万| D[科室负责人审批]
|
|
|
C -->|10万-50万| E[部门领导审批]
|
|
|
C -->|大于50万| F[单位领导审批]
|
|
|
D --> G[财务审核]
|
|
|
E --> G
|
|
|
F --> G
|
|
|
G --> H{审核结果}
|
|
|
H -->|通过| I[预算下达]
|
|
|
H -->|不通过| J[修改预算]
|
|
|
J --> A
|
|
|
I --> K[执行监控]
|
|
|
|
|
|
style A fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
|
|
|
style I fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
|
|
|
style J fill:#FFCCBC,stroke:#E64A19,stroke-width:2px
|
|
|
style K fill:#F0F4C3,stroke:#AFB42B,stroke-width:2px
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 审批流程 -->
|
|
|
<div class="tab-pane fade" id="approval-flow" role="tabpanel">
|
|
|
<div class="chart-container">
|
|
|
<div class="chart-header">
|
|
|
<div class="chart-title">
|
|
|
<i class="bi bi-arrow-right-circle"></i>
|
|
|
事前审批流程（采购、出差、会议等）
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chart-description">
|
|
|
<i class="bi bi-info-circle"></i>
|
|
|
<strong>流程说明：</strong> 适用于采购管理、出差管理、会议审批等事前流程的统一审批模式。
|
|
|
</div>
|
|
|
<div class="mermaid">
|
|
|
graph LR
|
|
|
Start[发起申请] --> Type{申请类型}
|
|
|
|
|
|
Type -->|采购| P1[采购审批]
|
|
|
Type -->|出差| P2[出差审批]
|
|
|
Type -->|会议| P3[会议审批]
|
|
|
Type -->|合同| P4[合同审批]
|
|
|
|
|
|
P1 --> Review1{部门审核}
|
|
|
P2 --> Review2{部门审核}
|
|
|
P3 --> Review3{部门审核}
|
|
|
P4 --> Review4{部门审核}
|
|
|
|
|
|
Review1 -->|通过| Final[领导审批]
|
|
|
Review2 -->|通过| Final
|
|
|
Review3 -->|通过| Final
|
|
|
Review4 -->|通过| Final
|
|
|
|
|
|
Review1 -->|拒绝| Reject[审批拒绝]
|
|
|
Review2 -->|拒绝| Reject
|
|
|
Review3 -->|拒绝| Reject
|
|
|
Review4 -->|拒绝| Reject
|
|
|
|
|
|
Final -->|批准| Approve[审批通过]
|
|
|
Final -->|驳回| Reject
|
|
|
|
|
|
Reject --> Start
|
|
|
Approve --> End[执行环节]
|
|
|
|
|
|
style Start fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
|
|
|
style Approve fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
|
|
|
style Reject fill:#FFCDD2,stroke:#C62828,stroke-width:2px
|
|
|
style End fill:#B2DFDB,stroke:#00897B,stroke-width:2px
|
|
|
style Type fill:#FFF9C4,stroke:#F9A825,stroke-width:2px
|
|
|
style Final fill:#FFE0B2,stroke:#EF6C00,stroke-width:2px
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="chart-container">
|
|
|
<div class="chart-header">
|
|
|
<div class="chart-title">
|
|
|
<i class="bi bi-arrow-right-circle"></i>
|
|
|
多级审批流程
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mermaid">
|
|
|
graph LR
|
|
|
A[提交申请] --> B[初审]
|
|
|
B -->|通过| C[复审]
|
|
|
B -->|退回| Z[修改后重新提交]
|
|
|
C -->|通过| D[终审]
|
|
|
C -->|退回| Z
|
|
|
D -->|批准| E[执行]
|
|
|
D -->|拒绝| Z
|
|
|
Z --> A
|
|
|
E --> F[归档]
|
|
|
|
|
|
style A fill:#BBDEFB,stroke:#1976D2,stroke-width:2px
|
|
|
style E fill:#A5D6A7,stroke:#388E3C,stroke-width:2px
|
|
|
style F fill:#C5E1A5,stroke:#689F38,stroke-width:2px
|
|
|
style Z fill:#FFCCBC,stroke:#E64A19,stroke-width:2px
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 权限管理 -->
|
|
|
<div class="tab-pane fade" id="auth-flow" role="tabpanel">
|
|
|
<div class="chart-container">
|
|
|
<div class="chart-header">
|
|
|
<div class="chart-title">
|
|
|
<i class="bi bi-diagram-3"></i>
|
|
|
用户权限管理流程
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chart-description">
|
|
|
<i class="bi bi-info-circle"></i>
|
|
|
<strong>流程说明：</strong> 根据用户角色分配不同的系统权限和功能访问范围。
|
|
|
</div>
|
|
|
<div class="mermaid">
|
|
|
graph LR
|
|
|
User[用户登录] --> Auth{身份认证}
|
|
|
Auth -->|成功| Role{角色判断}
|
|
|
Auth -->|失败| Login[返回登录]
|
|
|
|
|
|
Role -->|管理员| Admin[管理功能]
|
|
|
Role -->|财务| Finance[财务功能]
|
|
|
Role -->|审批人| Approver[审批功能]
|
|
|
Role -->|普通用户| Normal[基础功能]
|
|
|
|
|
|
Admin --> A1[用户管理]
|
|
|
Admin --> A2[系统配置]
|
|
|
Admin --> A3[数据导出]
|
|
|
Admin --> A4[权限分配]
|
|
|
|
|
|
Finance --> F1[审核支付]
|
|
|
Finance --> F2[财务报表]
|
|
|
Finance --> F3[预算调整]
|
|
|
|
|
|
Approver --> AP1[审批流程]
|
|
|
Approver --> AP2[流程监控]
|
|
|
|
|
|
Normal --> N1[查看数据]
|
|
|
Normal --> N2[提交申请]
|
|
|
|
|
|
style User fill:#90CAF9,stroke:#1565C0,stroke-width:2px
|
|
|
style Auth fill:#FFE082,stroke:#F9A825,stroke-width:2px
|
|
|
style Role fill:#FFE082,stroke:#F9A825,stroke-width:2px
|
|
|
style Admin fill:#EF5350,color:#fff,stroke:#C62828,stroke-width:2px
|
|
|
style Finance fill:#66BB6A,color:#fff,stroke:#2E7D32,stroke-width:2px
|
|
|
style Approver fill:#AB47BC,color:#fff,stroke:#6A1B9A,stroke-width:2px
|
|
|
style Normal fill:#42A5F5,color:#fff,stroke:#1565C0,stroke-width:2px
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="chart-container">
|
|
|
<div class="chart-header">
|
|
|
<div class="chart-title">
|
|
|
<i class="bi bi-arrow-right-circle"></i>
|
|
|
访问控制流程
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mermaid">
|
|
|
graph LR
|
|
|
A[请求资源] --> B{已登录?}
|
|
|
B -->|是| C{有权限?}
|
|
|
B -->|否| D[跳转登录]
|
|
|
C -->|有| E[允许访问]
|
|
|
C -->|无| F[权限不足]
|
|
|
D --> G[身份验证]
|
|
|
G -->|成功| H[获取权限]
|
|
|
G -->|失败| I[拒绝访问]
|
|
|
H --> C
|
|
|
E --> J[记录日志]
|
|
|
F --> K[提示信息]
|
|
|
|
|
|
style A fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
|
|
|
style E fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
|
|
|
style F fill:#FFCCBC,stroke:#E64A19,stroke-width:2px
|
|
|
style I fill:#FFCDD2,stroke:#C62828,stroke-width:2px
|
|
|
style J fill:#B2DFDB,stroke:#00897B,stroke-width:2px
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 流程图说明卡片 -->
|
|
|
<div class="chart-container">
|
|
|
<div class="chart-header">
|
|
|
<div class="chart-title">
|
|
|
<i class="bi bi-info-circle"></i>
|
|
|
使用说明
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-md-4 mb-3">
|
|
|
<div class="card border-primary">
|
|
|
<div class="card-body">
|
|
|
<h6 class="card-title text-primary">
|
|
|
<i class="bi bi-lightbulb"></i> 流程图特点
|
|
|
</h6>
|
|
|
<ul class="small mb-0">
|
|
|
<li>采用水平排列（LR方向），便于阅读</li>
|
|
|
<li>不同颜色标识不同环节</li>
|
|
|
<li>支持多层级嵌套结构</li>
|
|
|
<li>响应式设计，自适应屏幕</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-4 mb-3">
|
|
|
<div class="card border-success">
|
|
|
<div class="card-body">
|
|
|
<h6 class="card-title text-success">
|
|
|
<i class="bi bi-palette"></i> 颜色说明
|
|
|
</h6>
|
|
|
<ul class="small mb-0">
|
|
|
<li><span style="color:#1976D2">蓝色</span> - 开始/输入节点</li>
|
|
|
<li><span style="color:#388E3C">绿色</span> - 完成/成功节点</li>
|
|
|
<li><span style="color:#E64A19">橙红</span> - 退回/修改节点</li>
|
|
|
<li><span style="color:#F9A825">黄色</span> - 判断/审核节点</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-4 mb-3">
|
|
|
<div class="card border-info">
|
|
|
<div class="card-body">
|
|
|
<h6 class="card-title text-info">
|
|
|
<i class="bi bi-gear"></i> 操作提示
|
|
|
</h6>
|
|
|
<ul class="small mb-0">
|
|
|
<li>点击标签页切换不同业务流程</li>
|
|
|
<li>流程图支持鼠标滚轮缩放</li>
|
|
|
<li>可导出为图片格式保存</li>
|
|
|
<li>支持打印输出</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script src="https://cdn.staticfile.org/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
|
|
<script type="module">
|
|
|
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.esm.min.mjs';
|
|
|
|
|
|
// 初始化 Mermaid
|
|
|
mermaid.initialize({
|
|
|
startOnLoad: true,
|
|
|
theme: 'default',
|
|
|
flowchart: {
|
|
|
curve: 'basis',
|
|
|
padding: 20,
|
|
|
nodeSpacing: 50,
|
|
|
rankSpacing: 80,
|
|
|
diagramPadding: 20,
|
|
|
useMaxWidth: true
|
|
|
},
|
|
|
themeVariables: {
|
|
|
fontSize: '14px',
|
|
|
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif'
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 页面加载动画
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
const containers = document.querySelectorAll('.chart-container');
|
|
|
containers.forEach((container, index) => {
|
|
|
container.style.opacity = '0';
|
|
|
container.style.transform = 'translateY(20px)';
|
|
|
setTimeout(() => {
|
|
|
container.style.transition = 'all 0.5s ease';
|
|
|
container.style.opacity = '1';
|
|
|
container.style.transform = 'translateY(0)';
|
|
|
}, index * 100);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 导出图表功能
|
|
|
window.exportChart = function(button) {
|
|
|
const chartContainer = button.closest('.chart-container');
|
|
|
const svg = chartContainer.querySelector('.mermaid svg');
|
|
|
|
|
|
if (svg) {
|
|
|
// 创建一个canvas
|
|
|
const canvas = document.createElement('canvas');
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
|
|
// 获取SVG的尺寸
|
|
|
const svgData = new XMLSerializer().serializeToString(svg);
|
|
|
const svgBlob = new Blob([svgData], {type: 'image/svg+xml;charset=utf-8'});
|
|
|
const url = URL.createObjectURL(svgBlob);
|
|
|
|
|
|
// 创建下载链接
|
|
|
const link = document.createElement('a');
|
|
|
link.href = url;
|
|
|
link.download = 'flowchart-' + Date.now() + '.svg';
|
|
|
document.body.appendChild(link);
|
|
|
link.click();
|
|
|
document.body.removeChild(link);
|
|
|
URL.revokeObjectURL(url);
|
|
|
|
|
|
// 显示成功提示
|
|
|
alert('流程图已导出为 SVG 格式');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 标签页切换时重新渲染 Mermaid 图表
|
|
|
const tabButtons = document.querySelectorAll('[data-bs-toggle="tab"]');
|
|
|
tabButtons.forEach(button => {
|
|
|
button.addEventListener('shown.bs.tab', async function() {
|
|
|
try {
|
|
|
const targetPane = document.querySelector(this.getAttribute('data-bs-target'));
|
|
|
const mermaidElements = targetPane.querySelectorAll('.mermaid');
|
|
|
|
|
|
// 重新渲染当前标签页的图表
|
|
|
for (const element of mermaidElements) {
|
|
|
if (!element.getAttribute('data-processed')) {
|
|
|
await mermaid.run({
|
|
|
nodes: [element]
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('Mermaid rendering error:', error);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
