371 lines
14 KiB
HTML
371 lines
14 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>
|
|
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> |