410 lines
17 KiB
HTML
410 lines
17 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>
|
|
<!-- 添加Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- 添加Font Awesome图标 -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
body {
|
|
font-family: "Microsoft YaHei", Arial, sans-serif;
|
|
background: #f8f9fa;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
.architecture-diagram {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 30px;
|
|
box-shadow: 0 0 20px rgba(0,0,0,0.1);
|
|
border-radius: 10px;
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
margin-bottom: 30px;
|
|
font-weight: 700;
|
|
}
|
|
.layer {
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.layer:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
|
|
}
|
|
.layer-title {
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 1.2rem;
|
|
}
|
|
.layer-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
}
|
|
.component {
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
flex: 1 1 calc(25% - 15px);
|
|
min-width: 180px;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.component:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
|
|
}
|
|
.component-title {
|
|
font-weight: bold;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.component-desc {
|
|
font-size: 0.85rem;
|
|
color: #6c757d;
|
|
}
|
|
.arrow {
|
|
text-align: center;
|
|
margin: 10px 0;
|
|
font-size: 24px;
|
|
color: #6c757d;
|
|
}
|
|
|
|
/* 各层颜色样式 */
|
|
.user-layer {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
.access-layer {
|
|
background: #e7f5ff;
|
|
border: 1px solid #a5d8ff;
|
|
}
|
|
.app-layer {
|
|
background: #ebfbee;
|
|
border: 1px solid #8ce99a;
|
|
}
|
|
.middle-layer {
|
|
background: #fff9db;
|
|
border: 1px solid #ffe066;
|
|
}
|
|
.data-layer {
|
|
background: #f3f0ff;
|
|
border: 1px solid #d0bfff;
|
|
}
|
|
.external-layer {
|
|
background: #fff5f5;
|
|
border: 1px solid #ffc9c9;
|
|
}
|
|
.security-layer {
|
|
background: #fff5f5;
|
|
border: 2px solid #ff8787;
|
|
}
|
|
.tenant-layer {
|
|
background: #e7f5ff;
|
|
border: 1px solid #74c0fc;
|
|
}
|
|
|
|
/* 组件样式 */
|
|
.user-component {
|
|
background: #f8f9fa;
|
|
border: 1px solid #ced4da;
|
|
}
|
|
.access-component {
|
|
background: #e7f5ff;
|
|
border: 1px solid #a5d8ff;
|
|
}
|
|
.app-component {
|
|
background: #ebfbee;
|
|
border: 1px solid #8ce99a;
|
|
}
|
|
.middle-component {
|
|
background: #fff9db;
|
|
border: 1px solid #ffe066;
|
|
}
|
|
.data-component {
|
|
background: #f3f0ff;
|
|
border: 1px solid #d0bfff;
|
|
}
|
|
.external-component {
|
|
background: #fff5f5;
|
|
border: 1px solid #ffc9c9;
|
|
}
|
|
.security-component {
|
|
background: #fff5f5;
|
|
border: 1px solid #ff8787;
|
|
}
|
|
.tenant-component {
|
|
background: #e7f5ff;
|
|
border: 1px solid #74c0fc;
|
|
}
|
|
|
|
/* 跨层次安全和租户关系 */
|
|
.cross-cutting {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
.cross-cutting .layer {
|
|
flex: 1;
|
|
}
|
|
|
|
/* 图标样式 */
|
|
.icon {
|
|
margin-right: 8px;
|
|
width: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 768px) {
|
|
.component {
|
|
flex: 1 1 calc(50% - 15px);
|
|
}
|
|
.cross-cutting {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.component {
|
|
flex: 1 1 100%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="architecture-diagram">
|
|
<h1 class="mb-4">水务业务系统架构图</h1>
|
|
|
|
<!-- 用户层 -->
|
|
<div class="layer user-layer">
|
|
<div class="layer-title"><i class="fas fa-users icon"></i> 用户层</div>
|
|
<div class="layer-content">
|
|
<div class="component user-component">
|
|
<div class="component-title"><i class="fas fa-desktop icon"></i> Web用户</div>
|
|
</div>
|
|
<div class="component user-component">
|
|
<div class="component-title"><i class="fas fa-mobile-alt icon"></i> 移动用户</div>
|
|
</div>
|
|
<div class="component user-component">
|
|
<div class="component-title"><i class="fas fa-building icon"></i> 营业厅人员</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="arrow"><i class="fas fa-arrow-down"></i></div>
|
|
|
|
<!-- 接入层 -->
|
|
<div class="layer access-layer">
|
|
<div class="layer-title"><i class="fas fa-lock icon"></i> 接入层</div>
|
|
<div class="layer-content">
|
|
<div class="component access-component">
|
|
<div class="component-title"><i class="fas fa-balance-scale icon"></i> 负载均衡</div>
|
|
</div>
|
|
<div class="component access-component">
|
|
<div class="component-title"><i class="fas fa-shield-alt icon"></i> 防火墙</div>
|
|
</div>
|
|
<div class="component access-component">
|
|
<div class="component-title"><i class="fas fa-key icon"></i> 单点登录</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="arrow"><i class="fas fa-arrow-down"></i></div>
|
|
|
|
<!-- 应用层 -->
|
|
<div class="layer app-layer">
|
|
<div class="layer-title"><i class="fas fa-chart-bar icon"></i> 应用层</div>
|
|
<div class="layer-content">
|
|
<!-- 平台基础 -->
|
|
<div class="component app-component">
|
|
<div class="component-title"><i class="fas fa-puzzle-piece icon"></i> 统一平台</div>
|
|
<div class="component-desc">系统管理/流程提醒</div>
|
|
</div>
|
|
<div class="component app-component">
|
|
<div class="component-title"><i class="fas fa-plug icon"></i> 接口服务</div>
|
|
<div class="component-desc">API市场/权限管理</div>
|
|
</div>
|
|
|
|
<!-- 业务核心 -->
|
|
<div class="component app-component">
|
|
<div class="component-title"><i class="fas fa-money-bill-wave icon"></i> 营收系统</div>
|
|
<div class="component-desc">抄表/收费/账务/发票</div>
|
|
</div>
|
|
<div class="component app-component">
|
|
<div class="component-title"><i class="fas fa-wrench icon"></i> 表务系统</div>
|
|
<div class="component-desc">工单/仓库/物联网</div>
|
|
</div>
|
|
|
|
<!-- 客户服务 -->
|
|
<div class="component app-component">
|
|
<div class="component-title"><i class="fas fa-user-tie icon"></i> 客户服务</div>
|
|
<div class="component-desc">账单/发票</div>
|
|
</div>
|
|
<div class="component app-component">
|
|
<div class="component-title"><i class="fas fa-tablet-alt icon"></i> 抄表APP</div>
|
|
<div class="component-desc">抄表/工单管理</div>
|
|
</div>
|
|
|
|
<!-- 业务管理 -->
|
|
<div class="component app-component">
|
|
<div class="component-title"><i class="fas fa-hard-hat icon"></i> 报装管理</div>
|
|
<div class="component-desc">报装流程/一户一表</div>
|
|
</div>
|
|
<div class="component app-component">
|
|
<div class="component-title"><i class="fas fa-tools icon"></i> 工程管理</div>
|
|
<div class="component-desc">申请/施工/验收</div>
|
|
</div>
|
|
|
|
<div class="component app-component">
|
|
<div class="component-title"><i class="fas fa-chart-pie icon"></i> 统计分析</div>
|
|
<div class="component-desc">报表/欠费/用水分析</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="arrow"><i class="fas fa-arrow-down"></i></div>
|
|
|
|
<!-- 中间层 -->
|
|
<div class="layer middle-layer">
|
|
<div class="layer-title"><i class="fas fa-cogs icon"></i> 中间层</div>
|
|
<div class="layer-content">
|
|
<div class="component middle-component">
|
|
<div class="component-title"><i class="fas fa-sync-alt icon"></i> 企业服务总线</div>
|
|
</div>
|
|
<div class="component middle-component">
|
|
<div class="component-title"><i class="fas fa-chart-line icon"></i> 统一报表</div>
|
|
</div>
|
|
<div class="component middle-component">
|
|
<div class="component-title"><i class="fas fa-bolt icon"></i> 缓存服务</div>
|
|
</div>
|
|
<div class="component middle-component">
|
|
<div class="component-title"><i class="fas fa-file-alt icon"></i> 工作流引擎</div>
|
|
</div>
|
|
<div class="component middle-component">
|
|
<div class="component-title"><i class="fas fa-envelope icon"></i> 消息队列</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="arrow"><i class="fas fa-arrow-down"></i></div>
|
|
|
|
<!-- 数据层 -->
|
|
<div class="layer data-layer">
|
|
<div class="layer-title"><i class="fas fa-database icon"></i> 数据层</div>
|
|
<div class="layer-content">
|
|
<div class="component data-component">
|
|
<div class="component-title"><i class="fas fa-server icon"></i> 数据库集群</div>
|
|
</div>
|
|
<div class="component data-component">
|
|
<div class="component-title"><i class="fas fa-folder-open icon"></i> 文件服务器</div>
|
|
</div>
|
|
<div class="component data-component">
|
|
<div class="component-title"><i class="fas fa-redo icon"></i> 数据备份</div>
|
|
</div>
|
|
<div class="component data-component">
|
|
<div class="component-title"><i class="fas fa-exchange-alt icon"></i> 数据集成</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 外部接口层 -->
|
|
<div class="arrow"><i class="fas fa-arrows-alt-v"></i></div>
|
|
|
|
<div class="layer external-layer">
|
|
<div class="layer-title"><i class="fas fa-globe icon"></i> 外部接口层</div>
|
|
<div class="layer-content">
|
|
<div class="component external-component">
|
|
<div class="component-title"><i class="fas fa-university icon"></i> 银行接口</div>
|
|
</div>
|
|
<div class="component external-component">
|
|
<div class="component-title"><i class="fas fa-credit-card icon"></i> 支付接口</div>
|
|
</div>
|
|
<div class="component external-component">
|
|
<div class="component-title"><i class="fas fa-sms icon"></i> 短信接口</div>
|
|
</div>
|
|
<div class="component external-component">
|
|
<div class="component-title"><i class="fas fa-wifi icon"></i> 物联网接口</div>
|
|
</div>
|
|
<div class="component external-component">
|
|
<div class="component-title"><i class="fas fa-landmark icon"></i> 政务接口</div>
|
|
</div>
|
|
<div class="component external-component">
|
|
<div class="component-title"><i class="fas fa-recycle icon"></i> 环卫系统</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 跨层次关系 -->
|
|
<div class="cross-cutting">
|
|
<!-- 安全层 -->
|
|
<div class="layer security-layer">
|
|
<div class="layer-title"><i class="fas fa-shield-virus icon"></i> 安全层</div>
|
|
<div class="layer-content">
|
|
<div class="component security-component">
|
|
<div class="component-title"><i class="fas fa-network-wired icon"></i> 网络安全</div>
|
|
</div>
|
|
<div class="component security-component">
|
|
<div class="component-title"><i class="fas fa-database icon"></i> 数据安全</div>
|
|
</div>
|
|
<div class="component security-component">
|
|
<div class="component-title"><i class="fas fa-laptop-code icon"></i> 应用安全</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 多租户架构 -->
|
|
<div class="layer tenant-layer">
|
|
<div class="layer-title"><i class="fas fa-city icon"></i> 多租户架构</div>
|
|
<div class="layer-content">
|
|
<div class="component tenant-component">
|
|
<div class="component-title"><i class="fas fa-building icon"></i> 集团</div>
|
|
</div>
|
|
<div class="component tenant-component">
|
|
<div class="component-title"><i class="fas fa-store icon"></i> 分公司</div>
|
|
</div>
|
|
<div class="component tenant-component">
|
|
<div class="component-title"><i class="fas fa-store-alt icon"></i> 营业站点</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 技术栈 -->
|
|
<div class="layer app-layer mt-4">
|
|
<div class="layer-title"><i class="fas fa-tools icon"></i> 技术栈</div>
|
|
<div class="layer-content">
|
|
<div class="component app-component">
|
|
<div class="component-title"><i class="fas fa-server icon"></i> 后端</div>
|
|
<div class="component-desc">Spring Boot/MyBatis/Redis</div>
|
|
</div>
|
|
<div class="component app-component">
|
|
<div class="component-title"><i class="fas fa-desktop icon"></i> 前端</div>
|
|
<div class="component-desc">Vue 3/Element Plus/Pinia</div>
|
|
</div>
|
|
<div class="component app-component">
|
|
<div class="component-title"><i class="fas fa-mobile-alt icon"></i> 移动端</div>
|
|
<div class="component-desc">uni-app/小程序/SDK集成</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加Bootstrap JS 和 Popper.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html> |