589 lines
23 KiB
HTML
589 lines
23 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>福建水务营收系统整体架构图</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Microsoft YaHei', '宋体', Arial, sans-serif;
|
|
background: #f5f7fa;
|
|
padding: 10px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
border: 1px solid #e0e6ed;
|
|
}
|
|
|
|
.header {
|
|
background: #2c3e50;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 20px;
|
|
border-bottom: 3px solid #34495e;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.header p {
|
|
font-size: 1.2rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.architecture {
|
|
padding: 15px;
|
|
background: #fafbfc;
|
|
}
|
|
|
|
.layer {
|
|
margin-bottom: 15px;
|
|
background: white;
|
|
border-radius: 4px;
|
|
padding: 12px;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
|
|
border: 1px solid #e1e8ed;
|
|
border-left: 4px solid;
|
|
}
|
|
|
|
.layer.presentation { border-left-color: #8b5a3c; }
|
|
.layer.gateway { border-left-color: #5a5a5a; }
|
|
.layer.business { border-left-color: #2c5282; }
|
|
.layer.infrastructure { border-left-color: #2d5016; }
|
|
.layer.data { border-left-color: #553c9a; }
|
|
|
|
.layer-title {
|
|
font-size: 1.6rem;
|
|
font-weight: bold;
|
|
margin-bottom: 12px;
|
|
color: #2c3e50;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.layer-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-right: 12px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.presentation .layer-icon { background: #8b5a3c; }
|
|
.gateway .layer-icon { background: #5a5a5a; }
|
|
.business .layer-icon { background: #2c5282; }
|
|
.infrastructure .layer-icon { background: #2d5016; }
|
|
.data .layer-icon { background: #553c9a; }
|
|
|
|
.layer-description {
|
|
color: #666;
|
|
margin-bottom: 15px;
|
|
font-size: 1.1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.components {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.component {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 3px;
|
|
padding: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.component-title {
|
|
font-weight: bold;
|
|
color: #2c3e50;
|
|
margin-bottom: 8px;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.component-desc {
|
|
color: #666;
|
|
font-size: 0.95rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.connections {
|
|
margin-top: 10px;
|
|
padding: 12px;
|
|
background: #34495e;
|
|
border-radius: 3px;
|
|
color: white;
|
|
}
|
|
|
|
.connections h3 {
|
|
text-align: center;
|
|
margin-bottom: 12px;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.flow-diagram {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.flow-item {
|
|
background: rgba(255,255,255,0.1);
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.arrow {
|
|
color: #bdc3c7;
|
|
font-size: 1.2rem;
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.tech-stack {
|
|
margin-top: 10px;
|
|
background: white;
|
|
border-radius: 3px;
|
|
padding: 12px;
|
|
border: 1px solid #e1e8ed;
|
|
}
|
|
|
|
.tech-stack h3 {
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
margin-bottom: 12px;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.tech-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.tech-category {
|
|
background: #f8f9fa;
|
|
border-radius: 3px;
|
|
padding: 8px;
|
|
border-left: 3px solid #2c5282;
|
|
}
|
|
|
|
.tech-category h4 {
|
|
color: #2c3e50;
|
|
margin-bottom: 8px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.tech-list {
|
|
list-style: none;
|
|
}
|
|
|
|
.tech-list li {
|
|
color: #666;
|
|
margin-bottom: 3px;
|
|
padding-left: 12px;
|
|
position: relative;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.tech-list li::before {
|
|
content: '▪';
|
|
color: #2c5282;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
|
|
.footer {
|
|
background: #2c3e50;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 12px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.components {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.architecture {
|
|
padding: 8px;
|
|
}
|
|
|
|
.flow-diagram {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.arrow {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>福建水务营收系统整体架构图</h1>
|
|
<p>基于微服务架构的现代化水务营收管理平台 | 四大子系统完整架构</p>
|
|
</div>
|
|
|
|
<div class="architecture">
|
|
<!-- 表现层 -->
|
|
<div class="layer presentation">
|
|
<div class="layer-title">
|
|
<div class="layer-icon">UI</div>
|
|
表现层 (Presentation Layer)
|
|
</div>
|
|
<div class="layer-description">
|
|
负责用户交互和界面展示，包含多种客户端形态，采用前后端分离架构，提高开发效率和用户体验
|
|
</div>
|
|
<div class="components">
|
|
<div class="component">
|
|
<div class="component-title">Web管理端</div>
|
|
<div class="component-desc">Vue3 + Element Plus<br/>后台管理系统</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">手机抄表APP</div>
|
|
<div class="component-desc">uni-app跨平台<br/>移动端现场作业</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">微网厅系统</div>
|
|
<div class="component-desc">微信公众号H5页面<br/>账户绑定、在线缴费<br/>客户自助服务平台</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">移动收费端</div>
|
|
<div class="component-desc">移动POS终端<br/>现场收费工具</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 网关层 -->
|
|
<div class="layer gateway">
|
|
<div class="layer-title">
|
|
<div class="layer-icon">GW</div>
|
|
网关层 (Gateway Layer)
|
|
</div>
|
|
<div class="layer-description">
|
|
统一入口，负责请求路由和负载均衡，集中处理认证授权、限流熔断、监控日志
|
|
</div>
|
|
<div class="components">
|
|
<div class="component">
|
|
<div class="component-title">API网关</div>
|
|
<div class="component-desc">Spring Cloud Gateway<br/>统一入口管理</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">负载均衡</div>
|
|
<div class="component-desc">Nginx<br/>请求分发</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">认证中心</div>
|
|
<div class="component-desc">OAuth2.0 + CAS<br/>统一认证授权</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">监控日志</div>
|
|
<div class="component-desc">ELK Stack<br/>日志收集分析</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 业务服务层 -->
|
|
<div class="layer business">
|
|
<div class="layer-title">
|
|
<div class="layer-icon">BS</div>
|
|
业务服务层 (Business Service Layer)
|
|
</div>
|
|
<div class="layer-description">
|
|
核心业务逻辑处理层，包含四大子系统，按业务域划分微服务，实现高内聚低耦合
|
|
</div>
|
|
|
|
<!-- SYS-001 统一平台 -->
|
|
<div style="margin-bottom: 12px;">
|
|
<h4 style="color: #2c3e50; margin-bottom: 10px; font-size: 1.3rem; border-bottom: 2px solid #2c5282; padding-bottom: 6px;">
|
|
■ SYS-001 统一平台
|
|
</h4>
|
|
<div class="components">
|
|
<div class="component">
|
|
<div class="component-title">UP-001 单点登录模块</div>
|
|
<div class="component-desc">OAuth2.0+CAS协议<br/>JWT令牌认证<br/>多种登录方式</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">UP-002 系统管理模块</div>
|
|
<div class="component-desc">用户角色管理<br/>部门组织架构<br/>菜单权限配置</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SYS-002 营收业务系统 -->
|
|
<div style="margin-bottom: 12px;">
|
|
<h4 style="color: #2c3e50; margin-bottom: 10px; font-size: 1.3rem; border-bottom: 2px solid #8b5a3c; padding-bottom: 6px;">
|
|
■ SYS-002 营收业务系统
|
|
</h4>
|
|
<div class="components">
|
|
<div class="component">
|
|
<div class="component-title">营收核心模块群</div>
|
|
<div class="component-desc">客户管理、抄表开账、营业收费<br/>账务处理、发票管理、催缴管理<br/>统计分析、代收业务</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">表务管理模块群</div>
|
|
<div class="component-desc">表务基础管理、仓库库存管理<br/>设备档案管理</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">报装业务模块群</div>
|
|
<div class="component-desc">报装流程管理、工程管理<br/>档案管理</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">客户服务模块群</div>
|
|
<div class="component-desc">账户绑定、信息查询、在线缴费<br/>电子发票、营业网点、业务办理</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">工单管理模块群</div>
|
|
<div class="component-desc">业务工单中心、业务清单管理<br/>上报清单、稽查工单、换表工单</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SYS-003 手机抄表APP -->
|
|
<div style="margin-bottom: 12px;">
|
|
<h4 style="color: #2c3e50; margin-bottom: 10px; font-size: 1.3rem; border-bottom: 2px solid #2d5016; padding-bottom: 6px;">
|
|
■ SYS-003 手机抄表APP
|
|
</h4>
|
|
<div class="components">
|
|
<div class="component">
|
|
<div class="component-title">移动作业模块群</div>
|
|
<div class="component-desc">登录认证、首页搜索、采集任务管理<br/>现场抄表、数据同步</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">工单处理模块群</div>
|
|
<div class="component-desc">换表工单、复水工单、稽查工单<br/>问题上报、工单流转</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">个人管理模块群</div>
|
|
<div class="component-desc">个人信息管理、系统设置<br/>数据维护、离线支持</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SYS-004 微网厅系统 -->
|
|
<div style="margin-bottom: 12px;">
|
|
<h4 style="color: #2c3e50; margin-bottom: 10px; font-size: 1.3rem; border-bottom: 2px solid #9c27b0; padding-bottom: 6px;">
|
|
■ SYS-004 微网厅系统
|
|
</h4>
|
|
<div class="components">
|
|
<div class="component">
|
|
<div class="component-title">账户绑定管理</div>
|
|
<div class="component-desc">微信授权、账户绑定与解绑<br/>多账户管理</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">信息查询服务</div>
|
|
<div class="component-desc">账单查询、用水历史<br/>缴费记录、停水公告</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">在线缴费服务</div>
|
|
<div class="component-desc">快捷缴费、充值服务<br/>多种支付方式</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">电子发票服务</div>
|
|
<div class="component-desc">发票查看、发票推送<br/>电子发票管理</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">营业网点服务</div>
|
|
<div class="component-desc">网点查询、地图导航<br/>距离计算</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">业务办理服务</div>
|
|
<div class="component-desc">联系方式变更、开票方式变更<br/>更名过户、水价变更、低保申请<br/>换表申请、自主抄表</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 基础服务层 -->
|
|
<div class="layer infrastructure">
|
|
<div class="layer-title">
|
|
<div class="layer-icon">IS</div>
|
|
基础服务层 (Infrastructure Service Layer)
|
|
</div>
|
|
<div class="layer-description">
|
|
提供通用的技术服务能力，包含权限、工作流、消息、文件等基础服务，为业务服务提供统一的技术支撑
|
|
</div>
|
|
<div class="components">
|
|
<div class="component">
|
|
<div class="component-title">权限服务</div>
|
|
<div class="component-desc">RBAC权限控制<br/>多租户数据隔离</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">工作流引擎</div>
|
|
<div class="component-desc">Flowable<br/>业务流程管理</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">消息服务</div>
|
|
<div class="component-desc">RabbitMQ<br/>异步消息处理</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">文件服务</div>
|
|
<div class="component-desc">MinIO<br/>分布式文件存储</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">支付网关</div>
|
|
<div class="component-desc">微信、支付宝<br/>银行代扣</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">通信服务</div>
|
|
<div class="component-desc">短信平台<br/>消息推送</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据层 -->
|
|
<div class="layer data">
|
|
<div class="layer-title">
|
|
<div class="layer-icon">DB</div>
|
|
数据层 (Data Layer)
|
|
</div>
|
|
<div class="layer-description">
|
|
数据持久化和缓存层，支持读写分离、分库分表、数据备份，提供高性能、高可用的数据服务
|
|
</div>
|
|
<div class="components">
|
|
<div class="component">
|
|
<div class="component-title">达梦数据库主库</div>
|
|
<div class="component-desc">DM 8.0+<br/>核心业务数据</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">达梦数据库从库</div>
|
|
<div class="component-desc">读写分离<br/>查询负载均衡</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">Redis缓存</div>
|
|
<div class="component-desc">Redis 6.0+<br/>热点数据缓存</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="component-title">备份存储</div>
|
|
<div class="component-desc">定期备份<br/>历史数据归档</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据流向 -->
|
|
<div class="connections">
|
|
<h3>📊 数据流向关系</h3>
|
|
<div class="flow-diagram">
|
|
<div class="flow-item">用户操作</div>
|
|
<div class="arrow">→</div>
|
|
<div class="flow-item">表现层</div>
|
|
<div class="arrow">→</div>
|
|
<div class="flow-item">网关层</div>
|
|
<div class="arrow">→</div>
|
|
<div class="flow-item">业务服务层</div>
|
|
<div class="arrow">→</div>
|
|
<div class="flow-item">基础服务层</div>
|
|
<div class="arrow">→</div>
|
|
<div class="flow-item">数据层</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 技术栈 -->
|
|
<div class="tech-stack">
|
|
<h3>🛠️ 核心技术栈</h3>
|
|
<div class="tech-grid">
|
|
<div class="tech-category">
|
|
<h4>后端技术</h4>
|
|
<ul class="tech-list">
|
|
<li>Java 11+</li>
|
|
<li>Spring Boot 2.7+</li>
|
|
<li>Spring Cloud Gateway</li>
|
|
<li>MyBatis-Plus</li>
|
|
<li>Spring Security</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tech-category">
|
|
<h4>前端技术</h4>
|
|
<ul class="tech-list">
|
|
<li>Vue 3</li>
|
|
<li>Element Plus</li>
|
|
<li>TypeScript</li>
|
|
<li>uni-app</li>
|
|
<li>微信小程序</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tech-category">
|
|
<h4>数据存储</h4>
|
|
<ul class="tech-list">
|
|
<li>达梦数据库 8.0+</li>
|
|
<li>Redis 6.0+</li>
|
|
<li>MinIO</li>
|
|
<li>分布式架构</li>
|
|
<li>读写分离</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tech-category">
|
|
<h4>中间件</h4>
|
|
<ul class="tech-list">
|
|
<li>RabbitMQ 3.9+</li>
|
|
<li>Flowable</li>
|
|
<li>OAuth2.0 + CAS</li>
|
|
<li>ELK Stack</li>
|
|
<li>Prometheus</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tech-category">
|
|
<h4>部署运维</h4>
|
|
<ul class="tech-list">
|
|
<li>Docker</li>
|
|
<li>Kubernetes</li>
|
|
<li>Nginx</li>
|
|
<li>Jenkins</li>
|
|
<li>Grafana</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tech-category">
|
|
<h4>外部集成</h4>
|
|
<ul class="tech-list">
|
|
<li>微信公众号平台</li>
|
|
<li>微信支付 JSAPI</li>
|
|
<li>支付宝支付</li>
|
|
<li>银行代扣</li>
|
|
<li>短信平台</li>
|
|
<li>电子发票</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>© 2024 福建水务营收系统 - 基于微服务架构的现代化水务管理平台</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|