lbyzx123
/
huimv-employment


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>慧用工 · 企业端操作流程图</title>
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      background: #f5f7fb;
      color: #1f2937;
    }
    header {
      padding: 28px 24px 12px;
      text-align: center;
    }
    header h1 {
      margin: 0 0 8px;
      font-size: 24px;
      font-weight: 700;
    }
    header p {
      margin: 0;
      color: #6b7280;
      font-size: 14px;
    }
    .wrap {
      max-width: 960px;
      margin: 0 auto 48px;
      padding: 0 16px;
    }
    .card {
      background: #fff;
      border-radius: 16px;
      padding: 20px 12px 28px;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
      overflow-x: auto;
    }
    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 20px;
      justify-content: center;
      margin: 16px 0 8px;
      font-size: 13px;
      color: #4b5563;
    }
    .legend span::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 3px;
      margin-right: 6px;
      vertical-align: -1px;
    }
    .l-step::before { background: #93c5fd; }
    .l-decision::before { background: #fdba74; }
    .l-done::before { background: #86efac; }
    .l-optional::before { background: #ddd6fe; }
    .tip {
      margin-top: 20px;
      padding: 14px 16px;
      background: #eff6ff;
      border-radius: 10px;
      font-size: 13px;
      line-height: 1.7;
      color: #1e40af;
    }
    .mermaid { display: flex; justify-content: center; }
  </style>
</head>
<body>
  <header>
    <h1>慧用工 · 企业端操作流程图</h1>
    <p>从登录开始 → 确认方案 → 办理进度 → 结算开票办结</p>
  </header>
  <div class="wrap">
    <div class="legend">
      <span class="l-step">蓝色：公共步骤</span>
      <span class="l-decision">橙色菱形：判断</span>
      <span style="color:#0f766e"><span style="display:inline-block;width:12px;height:12px;background:#5eead4;border-radius:3px;margin-right:6px;vertical-align:-1px"></span>青绿：路线A 扫码登记</span>
      <span style="color:#c2410c"><span style="display:inline-block;width:12px;height:12px;background:#fdba74;border-radius:3px;margin-right:6px;vertical-align:-1px"></span>橙色：路线B 临时工招聘</span>
      <span class="l-done">绿色：办结</span>
    </div>
    <div class="card">
      <pre class="mermaid">
flowchart TD
  S0([打开微信小程序]) --> S1[进入企业登录页]
  S1 --> S1a{登录方式}
  S1a -->|手机号+验证码| S2[登录成功]
  S1a -->|账号+密码| S2

  S2 --> H1[直接进入企业工作台 / 对话首页]
  H1 -.->|未认证不拦截| GUEST[「我的」可显示游客/未认证态]

  H1 --> O1{{可选：与AI助手对话说明用工需求}}
  O1 --> D2[系统生成用工草稿卡片]
  D2 --> D3[打开草稿补全人数/工期/地点/工种]
  D3 --> D4[查看成本方案并确认此方案]
  D4 --> W0[会话中出现「办理进度」卡片]

  W0 --> P1[企业认证：上传执照/资料<br/>可与人员到位并行，可先跳过]
  W0 --> P2{人员到位方式<br/>二选一，进度条只显示其一}

  P2 -->|路线A| A0[【路线A · 扫码登记】]
  A0 --> A1[打开「人员登记」]
  A1 --> A2[分享登记二维码给临时工]
  A2 --> A3[工人扫码完成登记]
  A3 --> A4[查看进度至人数到位]
  A4 --> MERGE[人员到位完成]

  P2 -->|路线B| B0[【路线B · 临时工招聘】]
  B0 --> B1[打开「临时工招聘」]
  B1 --> B2[查看匹配条件与候选人]
  B2 --> B3[按工种勾选人员并确认选择]
  B3 --> B4[招聘完成]
  B4 --> MERGE

  P1 --> MERGE
  MERGE --> T1[任务发布：填写工作时间后确认发布]
  T1 --> WORK[工人到岗作业]
  WORK --> SET[结算打款：核对结算确认单]
  SET --> SET2[确认并支付]
  SET2 --> INV[开票归档]
  INV --> END([流程办结])

  MSG[消息待办入口] -.->|结算相关消息| SET

  classDef step fill:#DBEAFE,stroke:#3B82F6,color:#1E3A8A
  classDef decision fill:#FFEDD5,stroke:#F97316,color:#9A3412
  classDef optional fill:#EDE9FE,stroke:#8B5CF6,color:#5B21B6
  classDef done fill:#DCFCE7,stroke:#22C55E,color:#14532D
  classDef start fill:#F1F5F9,stroke:#64748B,color:#334155
  classDef routeA fill:#CCFBF1,stroke:#0D9488,color:#115E59
  classDef routeB fill:#FFEDD5,stroke:#EA580C,color:#9A3412

  class S0,END start
  class S1,S2,H1,D2,D3,D4,W0,P1,MERGE,T1,WORK,SET,SET2,INV,MSG,GUEST step
  class S1a,P2 decision
  class O1 optional
  class A0,A1,A2,A3,A4 routeA
  class B0,B1,B2,B3,B4 routeB
      </pre>
    </div>
    <div class="tip">
      <strong>阅读提示：</strong><br />
      1. 企业登录成功后<strong>直接进工作台</strong>，不再判断「是否已企业登记」。<br />
      2. 「企业认证」在确认方案后的办理进度卡中办理，可先跳过；未认证不挡登录进首页。<br />
      3. 人员到位分两条路线：<strong>路线A 扫码登记</strong> / <strong>路线B 临时工招聘</strong>，一笔订单只走其一。<br />
      4. 「任务发布」在人员到位完成后进行：填写工作时间并确认发布。<br />
      5. 结算确认单可通过进度卡或消息待办打开，界面相同。<br />
      6. 若本页图未显示，请用浏览器打开本 HTML（需能访问 jsDelivr CDN）。
    </div>
  </div>
  <script>
    mermaid.initialize({
      startOnLoad: true,
      theme: "base",
      flowchart: { curve: "basis", htmlLabels: true, padding: 12 },
      themeVariables: {
        fontFamily: "PingFang SC, Microsoft YaHei, sans-serif",
        fontSize: "14px"
      }
    });
  </script>
</body>
</html>