zrd-nb666/campus_health_app/docs/diagrams/report-all-diagrams.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>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        h1 { 
            color: #333; 
            text-align: center; 
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 30px;
        }
        h2 { 
            color: #667eea; 
            border-bottom: 3px solid #667eea; 
            padding-bottom: 10px;
            margin-top: 40px;
        }
        .mermaid { 
            background: #f8f9fa; 
            padding: 20px; 
            border-radius: 12px; 
            margin: 20px 0;
            border: 1px solid #e9ecef;
        }
        .section {
            margin: 30px 0;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 12px;
        }
        .nav-links {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin: 20px 0;
        }
        .nav-links a {
            padding: 10px 20px;
            background: #667eea;
            color: white;
            text-decoration: none;
            border-radius: 8px;
            transition: all 0.3s;
        }
        .nav-links a:hover {
            background: #764ba2;
            transform: translateY(-2px);
        }
        .info-box {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 12px;
            margin: 20px 0;
        }
        .info-box h3 { color: white; margin-top: 0; }
        table { width: 100%; border-collapse: collapse; margin: 15px 0; }
        th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
        th { background: #667eea; color: white; }
        tr:nth-child(even) { background: #f8f9fa; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🏥 数智健调</h1>
        <p class="subtitle">校园健康管理系统 - 报告图表汇总</p>
        
        <div class="nav-links">
            <a href="#architecture">系统架构</a>
            <a href="#database">数据库设计</a>
            <a href="#business">业务流程</a>
            <a href="#deployment">部署架构</a>
            <a href="#wbs">项目进度</a>
            <a href="#tech">技术栈</a>
        </div>
        
        <div class="info-box">
            <h3>📌 项目信息</h3>
            <p><strong>项目名称：</strong>数智健调 - 校园健康管理系统</p>
            <p><strong>开发者：</strong>本人独立完成（前端 + 后端 + 数据库）</p>
            <p><strong>技术栈：</strong>Angular 20 + Node.js + Express + TypeORM + MySQL</p>
            <p><strong>开发周期：</strong>2024年10月 - 2024年12月（约12周）</p>
        </div>

        <h2 id="architecture">1. 系统架构图</h2>
        <div class="mermaid">
graph TB
    subgraph Client["👤 客户端"]
        WEB[Web浏览器]
        MOBILE[移动端]
    end
    
    subgraph Frontend["🎨 前端 - Angular 20"]
        APP[App Component]
        subgraph Modules["功能模块"]
            M1[体重管理]
            M2[饮食管理]
            M3[运动管理]
            M4[健康监测]
            M5[校园服务]
            M6[用户中心]
        end
        LOCAL[(LocalStorage)]
    end
    
    subgraph Backend["⚙️ 后端 - Node.js"]
        EXPRESS[Express Server]
        CTRL[Controllers]
        SVC[Services]
        ORM[TypeORM]
    end
    
    subgraph DB["🗄️ 数据库"]
        MYSQL[(MySQL 8.0)]
    end
    
    WEB & MOBILE --> APP
    APP --> Modules
    Modules --> LOCAL
    Modules -->|REST API| EXPRESS
    EXPRESS --> CTRL --> SVC --> ORM --> MYSQL
        </div>

        <h2 id="database">2. 数据库ER图</h2>
        <div class="mermaid">
erDiagram
    USERS ||--o{ WEIGHT_RECORDS : has
    USERS ||--o| WEIGHT_GOALS : has
    USERS ||--o{ TAGS : creates
    WEIGHT_RECORDS }o--o{ TAGS : tagged
    
    USERS {
        varchar id PK
        varchar phone UK
        varchar nickname
        timestamp created_at
    }
    
    WEIGHT_RECORDS {
        varchar id PK
        varchar user_id FK
        date record_date
        decimal weight
        decimal body_fat
        decimal muscle_mass
        text notes
    }
    
    WEIGHT_GOALS {
        varchar id PK
        varchar user_id FK
        decimal target_weight
        date target_date
        decimal start_weight
        enum status
    }
    
    TAGS {
        varchar id PK
        varchar user_id FK
        varchar tag_name
        varchar color
    }
        </div>
        
        <div class="section">
            <h3>数据表概览</h3>
            <table>
                <tr><th>表名</th><th>说明</th><th>主要字段</th></tr>
                <tr><td>users</td><td>用户表</td><td>id, phone, nickname</td></tr>
                <tr><td>weight_records</td><td>体重记录表</td><td>id, user_id, weight, body_fat, muscle_mass</td></tr>
                <tr><td>weight_goals</td><td>体重目标表</td><td>id, user_id, target_weight, target_date</td></tr>
                <tr><td>tags</td><td>标签表</td><td>id, user_id, tag_name, color</td></tr>
                <tr><td>anomaly_logs</td><td>异常日志表</td><td>id, user_id, anomaly_type, message</td></tr>
            </table>
        </div>

        <h2 id="business">3. 业务流程图</h2>
        <div class="mermaid">
flowchart TD
    A[🏠 用户打开应用] --> B{已登录?}
    B -->|否| C[📱 登录/注册]
    B -->|是| D[📊 首页仪表盘]
    C --> D
    D --> E{选择功能}
    E -->|体重| F[⚖️ 体重管理]
    E -->|饮食| G[🍽️ 饮食管理]
    E -->|运动| H[🏃 运动管理]
    E -->|监测| I[📈 健康监测]
    E -->|服务| J[🏫 校园服务]
    E -->|我的| K[👤 用户中心]
    
    F --> F1[添加记录]
    F --> F2[设定目标]
    F --> F3[查看图表]
    F --> F4[异常提醒]
    
    F1 --> L[(保存数据)]
    F2 --> L
    L --> M[更新统计]
    M --> N[刷新图表]
        </div>

        <h2 id="deployment">4. 部署架构图</h2>
        <div class="mermaid">
graph LR
    subgraph User["用户"]
        U[👤 浏览器]
    end
    
    subgraph Server["服务器"]
        N[Nginx]
        subgraph App["应用"]
            F[前端静态资源]
            B[Node.js API]
        end
        D[(MySQL)]
    end
    
    U -->|HTTPS| N
    N -->|静态文件| F
    N -->|/api/*| B
    B --> D
        </div>

        <h2 id="wbs">5. 项目进度</h2>
        <div class="mermaid">
gantt
    title 项目开发进度
    dateFormat  YYYY-MM-DD
    section 启动
    需求分析     :done, 2024-10-01, 14d
    section 设计
    系统设计     :done, 2024-10-15, 14d
    section 开发
    前端开发     :done, 2024-10-29, 28d
    后端开发     :done, 2024-11-05, 21d
    section 测试
    测试优化     :done, 2024-11-26, 7d
    section 收尾
    文档总结     :done, 2024-12-03, 7d
        </div>

        <h2 id="tech">6. 技术栈</h2>
        <div class="mermaid">
mindmap
    root((数智健调))
        前端技术
            Angular 20
            TypeScript
            SCSS
            ECharts
            RxJS
        后端技术
            Node.js 18
            Express 4
            TypeORM
            class-validator
        数据库
            MySQL 8.0
        开发工具
            VS Code
            Git
            npm
        </div>
        
        <div class="section">
            <h3>📊 项目统计</h3>
            <table>
                <tr><th>指标</th><th>数值</th></tr>
                <tr><td>开发周期</td><td>约12周</td></tr>
                <tr><td>总工时</td><td>约230小时</td></tr>
                <tr><td>前端代码</td><td>5000+ 行</td></tr>
                <tr><td>后端代码</td><td>2000+ 行</td></tr>
                <tr><td>功能模块</td><td>6个</td></tr>
                <tr><td>API接口</td><td>15+个</td></tr>
                <tr><td>数据表</td><td>6个</td></tr>
            </table>
        </div>
        
        <div class="info-box">
            <h3>✨ 项目亮点</h3>
            <ul>
                <li>完整的前后端分离架构</li>
                <li>TypeORM实现优雅的数据库操作</li>
                <li>ECharts实现丰富的数据可视化</li>
                <li>LocalStorage + API双重持久化</li>
                <li>响应式设计，移动端优先</li>
                <li>异常检测与健康提醒功能</li>
            </ul>
        </div>
    </div>
</body>
</html>