tangweijie/fujian_water_biz_doc
1
0
Fork 0
Code Issues Pull Requests 12 Actions Packages Projects Releases 1 Wiki Activity

新增水务业务系统架构图HTML文件，包含各层级的详细描述和组件信息，提升了系统架构的可视化效果，便于用户理解系统结构和技术栈。

Browse Source
This commit is contained in:
tangweijie 2025-05-09 15:22:05 +08:00
parent a5d71d6e5b
commit 3e49796151
2 changed files with 378 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

371
architecture_diagram.html Normal file
View File

@ -0,0 +1,371 @@
<!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>
body {
font-family: "Microsoft YaHei", Arial, sans-serif;
margin: 0;
padding: 20px;
background: #f8f9fa;
}
.architecture-diagram {
max-width: 1000px;
margin: 0 auto;
background: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 5px;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.layer {
padding: 15px;
margin-bottom: 15px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.layer-title {
font-weight: bold;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.layer-content {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.component {
padding: 8px;
border-radius: 4px;
flex: 1 1 calc(25% - 10px);
min-width: 150px;
box-sizing: border-box;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.component-title {
font-weight: bold;
margin-bottom: 5px;
display: flex;
align-items: center;
}
.component-desc {
font-size: 0.8rem;
color: #666;
}
.arrow {
text-align: center;
margin: 5px 0;
font-size: 20px;
color: #666;
}
/* 各层颜色样式 */
.user-layer {
background: #f2f2f2;
border: 1px solid #666666;
}
.access-layer {
background: #e6f9ff;
border: 1px solid #0099cc;
}
.app-layer {
background: #e6ffec;
border: 1px solid #00cc66;
}
.middle-layer {
background: #fff2e6;
border: 1px solid #ff9933;
}
.data-layer {
background: #f9e6ff;
border: 1px solid #9933ff;
}
.external-layer {
background: #ffe6e6;
border: 1px solid #ff3366;
}
.security-layer {
background: #ffe6e6;
border: 2px solid #cc0000;
}
.tenant-layer {
background: #e6f7ff;
border: 1px solid #3399ff;
}
/* 组件样式 */
.user-component {
background: #f8f8f8;
border: 1px solid #999;
}
.access-component {
background: #f0faff;
border: 1px solid #0099cc;
}
.app-component {
background: #f0fff4;
border: 1px solid #00cc66;
}
.middle-component {
background: #fff9f0;
border: 1px solid #ff9933;
}
.data-component {
background: #fcf0ff;
border: 1px solid #9933ff;
}
.external-component {
background: #fff0f0;
border: 1px solid #ff3366;
}
.security-component {
background: #fff0f0;
border: 1px solid #cc0000;
}
.tenant-component {
background: #f0f8ff;
border: 1px solid #3399ff;
}
/* 跨层次安全和租户关系 */
.cross-cutting {
display: flex;
gap: 10px;
margin-top: 15px;
}
.cross-cutting .layer {
flex: 1;
}
/* 图标样式 */
.icon {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="architecture-diagram">
<h1>水务业务系统架构图</h1>
<!-- 用户层 -->
<div class="layer user-layer">
<div class="layer-title"><span class="icon">👥</span> 用户层</div>
<div class="layer-content">
<div class="component user-component">
<div class="component-title"><span class="icon">🖥️</span> Web用户</div>
</div>
<div class="component user-component">
<div class="component-title"><span class="icon">📱</span> 移动用户</div>
</div>
<div class="component user-component">
<div class="component-title"><span class="icon">🏢</span> 营业厅人员</div>
</div>
</div>
</div>
<div class="arrow">↓</div>
<!-- 接入层 -->
<div class="layer access-layer">
<div class="layer-title"><span class="icon">🔐</span> 接入层</div>
<div class="layer-content">
<div class="component access-component">
<div class="component-title"><span class="icon">⚖️</span> 负载均衡</div>
</div>
<div class="component access-component">
<div class="component-title"><span class="icon">🛡️</span> 防火墙</div>
</div>
<div class="component access-component">
<div class="component-title"><span class="icon">🔑</span> 单点登录</div>
</div>
</div>
</div>
<div class="arrow">↓</div>
<!-- 应用层 -->
<div class="layer app-layer">
<div class="layer-title"><span class="icon">📊</span> 应用层</div>
<div class="layer-content">
<!-- 平台基础 -->
<div class="component app-component">
<div class="component-title"><span class="icon">🧩</span> 统一平台</div>
<div class="component-desc">系统管理/流程提醒</div>
</div>
<div class="component app-component">
<div class="component-title"><span class="icon">🔌</span> 接口服务</div>
<div class="component-desc">API市场/权限管理</div>
</div>
<!-- 业务核心 -->
<div class="component app-component">
<div class="component-title"><span class="icon">💰</span> 营收系统</div>
<div class="component-desc">抄表/收费/账务/发票</div>
</div>
<div class="component app-component">
<div class="component-title"><span class="icon">🔧</span> 表务系统</div>
<div class="component-desc">工单/仓库/物联网</div>
</div>
<!-- 客户服务 -->
<div class="component app-component">
<div class="component-title"><span class="icon">👨‍💼</span> 客户服务</div>
<div class="component-desc">账单/发票/智能客服</div>
</div>
<div class="component app-component">
<div class="component-title"><span class="icon">📱</span> 抄表APP</div>
<div class="component-desc">抄表/工单管理</div>
</div>
<!-- 业务管理 -->
<div class="component app-component">
<div class="component-title"><span class="icon">🏗️</span> 报装管理</div>
<div class="component-desc">报装流程/一户一表</div>
</div>
<div class="component app-component">
<div class="component-title"><span class="icon">🏗️</span> 工程管理</div>
<div class="component-desc">申请/施工/验收</div>
</div>
<div class="component app-component">
<div class="component-title"><span class="icon">📊</span> 统计分析</div>
<div class="component-desc">报表/欠费/用水分析</div>
</div>
</div>
</div>
<div class="arrow">↓</div>
<!-- 中间层 -->
<div class="layer middle-layer">
<div class="layer-title"><span class="icon">⚙️</span> 中间层</div>
<div class="layer-content">
<div class="component middle-component">
<div class="component-title"><span class="icon">🔄</span> 企业服务总线</div>
</div>
<div class="component middle-component">
<div class="component-title"><span class="icon">📊</span> 统一报表</div>
</div>
<div class="component middle-component">
<div class="component-title"><span class="icon">⚡</span> 缓存服务</div>
</div>
<div class="component middle-component">
<div class="component-title"><span class="icon">📑</span> 工作流引擎</div>
</div>
<div class="component middle-component">
<div class="component-title"><span class="icon">📨</span> 消息队列</div>
</div>
</div>
</div>
<div class="arrow">↓</div>
<!-- 数据层 -->
<div class="layer data-layer">
<div class="layer-title"><span class="icon">💾</span> 数据层</div>
<div class="layer-content">
<div class="component data-component">
<div class="component-title"><span class="icon">🗄️</span> 数据库集群</div>
</div>
<div class="component data-component">
<div class="component-title"><span class="icon">📂</span> 文件服务器</div>
</div>
<div class="component data-component">
<div class="component-title"><span class="icon">🔄</span> 数据备份</div>
</div>
<div class="component data-component">
<div class="component-title"><span class="icon">🔄</span> 数据集成</div>
</div>
</div>
</div>
<!-- 外部接口层 -->
<div class="arrow">↔️</div>
<div class="layer external-layer">
<div class="layer-title"><span class="icon">🌐</span> 外部接口层</div>
<div class="layer-content">
<div class="component external-component">
<div class="component-title"><span class="icon">🏦</span> 银行接口</div>
</div>
<div class="component external-component">
<div class="component-title"><span class="icon">💳</span> 支付接口</div>
</div>
<div class="component external-component">
<div class="component-title"><span class="icon">📱</span> 短信接口</div>
</div>
<div class="component external-component">
<div class="component-title"><span class="icon">📶</span> 物联网接口</div>
</div>
<div class="component external-component">
<div class="component-title"><span class="icon">🏛️</span> 政务接口</div>
</div>
<div class="component external-component">
<div class="component-title"><span class="icon">♻️</span> 环卫系统</div>
</div>
</div>
</div>
<!-- 跨层次关系 -->
<div class="cross-cutting">
<!-- 安全层 -->
<div class="layer security-layer">
<div class="layer-title"><span class="icon">🔐</span> 安全层</div>
<div class="layer-content">
<div class="component security-component">
<div class="component-title"><span class="icon">🛡️</span> 网络安全</div>
</div>
<div class="component security-component">
<div class="component-title"><span class="icon">🔒</span> 数据安全</div>
</div>
<div class="component security-component">
<div class="component-title"><span class="icon">🔐</span> 应用安全</div>
</div>
</div>
</div>
<!-- 多租户架构 -->
<div class="layer tenant-layer">
<div class="layer-title"><span class="icon">🏢</span> 多租户架构</div>
<div class="layer-content">
<div class="component tenant-component">
<div class="component-title"><span class="icon">🏢</span> 集团</div>
</div>
<div class="component tenant-component">
<div class="component-title"><span class="icon">🏪</span> 分公司</div>
</div>
<div class="component tenant-component">
<div class="component-title"><span class="icon">🏪</span> 营业站点</div>
</div>
</div>
</div>
</div>
<!-- 技术栈 -->
<div class="layer app-layer" style="margin-top: 15px;">
<div class="layer-title"><span class="icon">🔧</span> 技术栈</div>
<div class="layer-content">
<div class="component app-component">
<div class="component-title"><span class="icon">⚙️</span> 后端</div>
<div class="component-desc">Spring Boot/MyBatis/Redis</div>
</div>
<div class="component app-component">
<div class="component-title"><span class="icon">🖥️</span> 前端</div>
<div class="component-desc">Vue 3/Element Plus/Pinia</div>
</div>
<div class="component app-component">
<div class="component-title"><span class="icon">📱</span> 移动端</div>
<div class="component-desc">uni-app/小程序/SDK集成</div>
</div>
</div>
</div>
</div>
</body>
</html>

129
water_biz_system_architecture.md
View File

@ -19,128 +19,13 @@
- 统一平台应用：统一业务流程，集中汇集数据
- 统一对外接口：提供标准的接口和能力
```mermaid
flowchart TD
%% 定义简化样式
classDef accessLayer fill:#e6f9ff,stroke:#0099cc,stroke-width:1px
classDef appLayer fill:#e6ffec,stroke:#00cc66,stroke-width:1px
classDef middleLayer fill:#fff2e6,stroke:#ff9933,stroke-width:1px
classDef dataLayer fill:#f9e6ff,stroke:#9933ff,stroke-width:1px
classDef extLayer fill:#ffe6e6,stroke:#ff3366,stroke-width:1px
classDef secLayer fill:#ffe6e6,stroke:#cc0000,stroke-width:2px
classDef userLayer fill:#f2f2f2,stroke:#666666,stroke-width:1px
classDef tenantLayer fill:#e6f7ff,stroke:#3399ff,stroke-width:1px
%% 用户层
subgraph Users["👥 用户层"]
User1["🖥️ Web用户"]
User2["📱 移动用户"]
User3["🏢 营业厅人员"]
end
%% 接入层
subgraph Access["🔐 接入层"]
LoadBalancer["⚖️ 负载均衡"]
Firewall["🛡️ 防火墙"]
SSO["🔑 单点登录"]
end
%% 应用层
subgraph AppLayer["📊 应用层"]
%% 平台基础
Platform["🧩 统一平台<br><small>系统管理/流程提醒</small>"]
APIService["🔌 接口服务<br><small>API市场/权限管理</small>"]
%% 业务核心
Revenue["💰 营收系统<br><small>抄表/收费/账务/发票</small>"]
MeterMgmt["🔧 表务系统<br><small>工单/仓库/物联网</small>"]
%% 客户服务
CustService["👨‍💼 客户服务<br><small>账单/发票/智能客服</small>"]
MeterApp["📱 抄表APP<br><small>抄表/工单管理</small>"]
%% 业务管理
Installation["🏗️ 报装管理<br><small>报装流程/一户一表</small>"]
ProjectMgmt["🏗️ 工程管理<br><small>申请/施工/验收</small>"]
StatAnalysis["📊 统计分析<br><small>报表/欠费/用水分析</small>"]
end
%% 中间层
subgraph MiddleLayer["⚙️ 中间层"]
ESB["🔄 企业服务总线"]
ReportPlatform["📊 统一报表"]
Cache["⚡ 缓存服务"]
Workflow["📑 工作流引擎"]
MessageQueue["📨 消息队列"]
end
%% 数据层
subgraph DataLayer["💾 数据层"]
DBCluster["🗄️ 数据库集群"]
FileServer["📂 文件服务器"]
Backup["🔄 数据备份"]
DataIntegration["🔄 数据集成"]
end
%% 外部接口层
subgraph ExternalAPI["🌐 外部接口层"]
%% 支付相关
BankAPI["🏦 银行接口"]
PayAPI["💳 支付接口"]
SMSAPI["📱 短信接口"]
IoTAPI["📶 物联网接口"]
GovernmentAPI["🏛️ 政务接口"]
EnvAPI["♻️ 环卫系统"]
end
%% 安全层
subgraph SecurityLayer["🔐 安全层"]
Security["🛡️ 网络/数据/应用安全"]
end
%% 多租户
subgraph Tenants["🏢 多租户架构"]
Group["🏢 集团"]
Branch["🏪 分公司"]
Station["🏪 营业站点"]
end
%% 技术栈信息
subgraph TechStack["🔧 技术栈"]
Backend["后端: Spring Boot/MyBatis/Redis"]
Frontend["前端: Vue 3/Element Plus/Pinia"]
Mobile["移动: uni-app/小程序/SDK集成"]
end
%% 连接关系
Users --> Access
Access --> AppLayer
AppLayer --> MiddleLayer
MiddleLayer --> DataLayer
MiddleLayer <--> ExternalAPI
%% 技术栈关系
AppLayer -.-> TechStack
%% 安全和多租户关系
SecurityLayer -.-> Users
SecurityLayer -.-> Access
SecurityLayer -.-> AppLayer
SecurityLayer -.-> MiddleLayer
SecurityLayer -.-> DataLayer
Tenants -.-> AppLayer
%% 应用样式
class Users userLayer
class Access accessLayer
class AppLayer,Platform,Revenue,CustService,MeterMgmt,Installation,StatAnalysis,ProjectMgmt,MeterApp,APIService appLayer
class MiddleLayer middleLayer
class DataLayer dataLayer
class ExternalAPI,BankAPI,PayAPI,SMSAPI,IoTAPI,GovernmentAPI,EnvAPI extLayer
class SecurityLayer secLayer
class Tenants tenantLayer
class TechStack,Backend,Frontend,Mobile appLayer
```
### 1.1 系统架构图
系统整体架构如下图所示：
<iframe src="architecture_diagram.html" width="100%" height="800px" frameborder="0"></iframe>
## 2. 技术架构