zhensolid
/
keyissue-prototype


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A+在建客户动态管理小程序</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main class="preview-shell">
    <section class="phone" aria-label="微信小程序手机预览">
      <header class="status-bar">
        <span>13:15</span>
        <span class="status-icons">5G 100%</span>
      </header>

      <div class="miniapp-top">
        <button class="icon-btn" type="button" aria-label="返回">‹</button>
        <strong>A+在建客户动态管理</strong>
        <div class="capsule" aria-hidden="true">
          <span></span>
          <i></i>
        </div>
      </div>

      <div class="page-stack">
        <section class="page active" data-page="home">
          <div class="hero-panel">
            <p>A/A+ 客户日报</p>
            <h1>今日巡查预警</h1>
            <div class="metric-row">
              <article>
                <strong id="mobileFeedbackCount">18</strong>
                <span>今日巡查</span>
              </article>
              <article>
                <strong id="mobileRedCount">5</strong>
                <span>异常预警</span>
              </article>
              <article>
                <strong id="mobileAuditCount">11</strong>
                <span>待核查</span>
              </article>
            </div>
          </div>

          <div class="quick-actions">
            <button type="button" data-jump="entry">提交日查</button>
            <button type="button" data-jump="follow">处置记录</button>
            <button type="button" data-jump="board">问题分析</button>
          </div>

          <section class="content-block">
            <div class="block-title">
              <h2>预警提醒</h2>
              <span id="warningCount">4 项</span>
            </div>
            <ul class="task-list" id="warningList">
              <li>
                <b>红色</b>
                <div>
                  <strong>肖女士木作收口不一致</strong>
                  <p>A+ 客户日查异常，需设计师和项目经理共同到场说明。</p>
                </div>
              </li>
              <li>
                <b>核查</b>
                <div>
                  <strong>陈先生墙面返修完成</strong>
                  <p>项目经理已提交完成申请，等待监察部现场复验。</p>
                </div>
              </li>
            </ul>
          </section>

          <section class="content-block">
            <div class="block-title">
              <h2>问题动态</h2>
              <span>实时</span>
            </div>
            <div class="feed-item">
              <span class="avatar">交</span>
              <div>
                <strong>交付助理新增 3 条每日巡查</strong>
                <p>其中 1 条由客户群反馈触发异常预警。</p>
              </div>
            </div>
            <div class="feed-item">
              <span class="avatar green">监</span>
              <div>
                <strong>监察部通过 2 条核查</strong>
                <p>已处理问题同步进入部门质量复盘池。</p>
              </div>
            </div>
          </section>
        </section>

        <section class="page" data-page="entry">
          <div class="page-heading">
            <h1>提交每日巡查</h1>
            <p>快速记录 A/A+ 客户日查情况、问题描述和客户群反馈。</p>
          </div>

          <form class="form-card" id="feedbackForm">
            <label>
              <span>客户姓名</span>
              <input name="customer" type="text" value="肖女士">
            </label>
            <label>
              <span>客户等级</span>
              <select name="tier">
                <option>A+</option>
                <option>A</option>
              </select>
            </label>
            <label>
              <span>巡查状态</span>
              <select name="status">
                <option>异常</option>
                <option>已巡查</option>
                <option>未巡查</option>
              </select>
            </label>
            <label>
              <span>问题类型 / 观察项</span>
              <select name="type">
                <option>施工质量</option>
                <option>文明施工</option>
                <option>客户群反馈</option>
                <option>设计变更</option>
                <option>沟通响应</option>
                <option>材料交付</option>
              </select>
            </label>
            <label>
              <span>预警级别</span>
              <select name="level">
                <option>红色预警</option>
                <option>橙色预警</option>
                <option>蓝色关注</option>
              </select>
            </label>
            <label>
              <span>施工质量</span>
              <select name="siteQuality">
                <option>存在质量疑问</option>
                <option>正常</option>
                <option>需复核</option>
              </select>
            </label>
            <label>
              <span>文明施工</span>
              <select name="civility">
                <option>现场材料堆放偏乱</option>
                <option>正常</option>
                <option>成品保护不足</option>
                <option>发现抽烟情况</option>
              </select>
            </label>
            <label>
              <span>客户群反馈</span>
              <textarea name="groupFeedback" rows="3">客户群反馈木作收口与效果图差异明显，希望项目经理今天到场确认整改方案。</textarea>
            </label>
            <label>
              <span>问题描述 / 巡查结论</span>
              <textarea name="summary" rows="4">客户对收口差异较敏感，建议今天完成现场复核并同步整改清单。</textarea>
            </label>
            <button class="primary-btn" type="submit">保存日查并触发预警</button>
          </form>
        </section>

        <section class="page" data-page="detail">
          <div class="customer-card">
            <div class="customer-main">
              <span class="avatar large">肖</span>
              <div>
                <h1 id="detailCustomer">肖女士</h1>
                <p id="detailAddress">阅花溪 9 栋 B 座 1702</p>
              </div>
              <em>A+</em>
            </div>
            <div class="tag-row">
              <span id="detailLevel">红色预警</span>
              <span id="detailType">施工质量</span>
              <span>二次反馈</span>
            </div>
          </div>

          <section class="content-block">
            <div class="block-title">
              <h2>巡查与问题摘要</h2>
              <span>影响 91</span>
            </div>
            <dl class="info-list">
              <div><dt>责任部门</dt><dd>光宸</dd></div>
              <div><dt>施工阶段</dt><dd>木作安装</dd></div>
              <div><dt>设计师</dt><dd>蔡菁</dd></div>
              <div><dt>项目经理</dt><dd>刘江斌</dd></div>
              <div><dt>日查情况</dt><dd>异常</dd></div>
              <div><dt>处置后满意度</dt><dd>待回访</dd></div>
            </dl>
          </section>

          <section class="content-block">
            <div class="block-title">
              <h2>问题链路</h2>
              <button type="button" data-jump="follow">去处置</button>
            </div>
            <ol class="timeline" id="detailTimeline">
              <li>
              <strong>客户反馈</strong>
                <p>木作收口与效果图差异明显，要求今天给出整改方案。</p>
                <span>今天 09:42</span>
              </li>
              <li>
                <strong>初步归因</strong>
                <p>设计交底与现场深化尺寸未完全同步，需联合复核。</p>
                <span>今天 10:20</span>
              </li>
            </ol>
          </section>
        </section>

        <section class="page" data-page="follow">
          <div class="page-heading">
            <h1>处置记录</h1>
            <p>记录问题处理动作、根因分析、客户回访和提交核查申请。</p>
          </div>

          <form class="form-card" id="actionForm">
            <label>
              <span>选择问题</span>
              <select name="issue">
                <option>肖女士 · 木作收口不一致</option>
                <option>周先生 · 沟通响应慢</option>
                <option>林女士 · 材料到货延期</option>
              </select>
            </label>
            <div class="segmented" role="group" aria-label="处置动作">
              <button class="selected" type="button">现场复核</button>
              <button type="button">整改中</button>
              <button type="button">提交核查</button>
            </div>
            <label>
              <span>处置说明</span>
              <textarea name="note" rows="4">已约设计师、项目经理 16:00 到场，现场确认差异点并同步整改清单。</textarea>
            </label>
            <label>
              <span>处置后满意度</span>
              <select name="satisfaction">
                <option>待回访</option>
                <option>满意</option>
                <option>一般</option>
                <option>不满意</option>
              </select>
            </label>
            <label>
              <span>建议核查时间</span>
              <input name="auditTime" type="datetime-local" value="2026-07-02T10:30">
            </label>
            <button class="primary-btn" type="submit">保存处置并提交核查</button>
          </form>

          <section class="content-block compact">
            <div class="block-title">
              <h2>待核查</h2>
              <span id="pendingAuditText">3 个</span>
            </div>
            <div class="reminder-row">
              <b>明天</b>
              <div>
                <strong id="auditIssueName">陈先生墙面返修</strong>
                <p id="auditIssueDesc">监察部复验通过后可标记为已处理。</p>
              </div>
            </div>
            <div class="quick-actions">
              <button type="button" id="auditPassBtn">核查通过</button>
              <button type="button" id="auditRejectBtn">驳回整改</button>
            </div>
          </section>
        </section>

        <section class="page" data-page="board">
          <div class="page-heading">
            <h1>问题分析</h1>
            <p>按日查异常、问题类型、部门和预警等级查看 A/A+ 客户反馈趋势。</p>
          </div>

          <div class="board-summary">
            <article>
              <span>本周巡查</span>
              <strong id="weeklyCount">55</strong>
              <p>异常预警 8 件</p>
            </article>
            <article>
              <span>闭环率</span>
              <strong id="closureRate">82%</strong>
              <p>较上周 +6%</p>
            </article>
          </div>

          <section class="pipeline">
            <article>
              <div class="stage-head"><b>施工质量</b><span>26</span></div>
              <div class="bar"><i style="width: 86%"></i></div>
              <p>主要集中在收口、返修、成品保护。</p>
            </article>
            <article>
              <div class="stage-head"><b>设计变更</b><span>19</span></div>
              <div class="bar"><i style="width: 72%"></i></div>
              <p>变更确认链路需要固化。</p>
            </article>
            <article>
              <div class="stage-head"><b>文明施工</b><span>15</span></div>
              <div class="bar"><i style="width: 48%"></i></div>
              <p>现场杂乱、成品保护和抽烟情况需要每日复核。</p>
            </article>
            <article>
              <div class="stage-head"><b>材料交付</b><span>9</span></div>
              <div class="bar"><i style="width: 36%"></i></div>
              <p>进口材料需提前建立替代池。</p>
            </article>
          </section>

          <section class="content-block">
            <div class="block-title">
              <h2>部门预警排行</h2>
              <span>周榜</span>
            </div>
            <div class="rank-row"><b>1</b><span>光宸</span><strong>12 件</strong></div>
            <div class="rank-row"><b>2</b><span>澜光</span><strong>9 件</strong></div>
            <div class="rank-row"><b>3</b><span>蘭堂</span><strong>7 件</strong></div>
          </section>
        </section>
      </div>

      <nav class="tabbar" aria-label="底部导航">
        <button class="active" type="button" data-tab="home"><span>⌂</span>首页</button>
        <button type="button" data-tab="entry"><span>＋</span>日查</button>
        <button type="button" data-tab="detail"><span>□</span>详情</button>
        <button type="button" data-tab="follow"><span>✓</span>处置</button>
        <button type="button" data-tab="board"><span>▦</span>分析</button>
      </nav>

      <p class="toast" id="toast" aria-live="polite"></p>
    </section>
  </main>

  <script src="app.js"></script>
</body>
</html>