wangyifang
/
cz-hjjc-budget
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '06a3c4ad5a'
${ noResults }
cz-hjjc-budget/ui/pages/flowcharts.html

695 lines
24 KiB
Raw Normal View History Unescape

up
6 months ago
<!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>