yhm-shop-data/store-ops/frontend/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>门店检测工作台</title>
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/report.css">
<script src="/vendor/echarts.min.js"></script>
</head>
<body>
<div class="wrap">
  <header>
    <div class="hleft">
      <div class="htop">
        <span class="brand">怡呵美 · 水光会员店</span>
        <h1>门店检测工作台</h1>
      </div>
      <div class="hsub">
        <span id="ruleNote">规则来源：《门店考核指标》官方基准线</span>
        <span id="dataNote"></span>
      </div>
    </div>
    <div class="hright">
      <select id="period" class="period" title="选择周期"></select>
      <div class="huser">
        <span class="uavatar" id="whoAvatar">管</span>
        <span class="uinfo2"><b id="whoName"></b><i id="whoRole"></i></span>
        <button class="ubtn2" id="btnPw" title="修改我的密码">改密码</button>
        <button class="ubtn2 danger" id="btnLogout" title="退出登录">退出登录</button>
      </div>
    </div>
  </header>

  <div class="kpis" id="kpis"></div>

  <div class="charts">
    <div class="panel"><h3>问题命中分布（按类型）</h3><div class="chart" id="c1"></div></div>
    <div class="panel"><h3 id="c2title">核销金额分布</h3><div class="chart" id="c2"></div></div>
    <div class="panel"><h3>门店数 TOP15 城市</h3><div class="chart" id="c3"></div></div>
  </div>

  <div class="bar">
    <input id="q" placeholder="搜索门店名称或ID">
    <select id="fcity"><option value="">全部城市</option></select>
    <select id="fscore">
      <option value="">全部评分</option>
      <option value="lt40">评分 4.0 以下</option>
      <option value="40_43">评分【4.0-4.3】</option>
      <option value="43_45">评分【4.3-4.5】</option>
      <option value="gte45">评分 4.5 以上</option>
    </select>
    <select id="fcat"><option value="">全部问题类型</option></select>
    <select id="fsort" title="排序字段">
      <option value="sev">按严重度</option>
      <option value="amt">按核销金额</option>
      <option value="score">按评分</option>
      <option value="hx">按核销率</option>
      <option value="visit">按访问量</option>
    </select>
    <select id="forder" title="排序方向">
      <option value="desc">倒序</option>
      <option value="asc">正序</option>
    </select>
    <span class="sub" id="cnt"></span>
  </div>

  <div class="panel tablewrap" style="padding:4px 8px 10px">
    <table><thead><tr>
      <th>门店</th><th>城市</th>
      <th class="num">评分</th>
      <th class="num">访问</th>
      <th class="num">成交券</th>
      <th class="num">核销率</th>
      <th class="num">核销金额</th>
      <th class="num">待核销</th>
      <th class="num">退单率</th>
      <th class="num">投诉率</th>
      <th class="num">差评率</th>
      <th class="num">回复率</th>
      <th class="num">上榜</th>
      <th>触发问题</th>
    </tr></thead><tbody id="tb"></tbody></table>
    <div class="pager"><span id="pginfo"></span><button id="prev">上一页</button><button id="next">下一页</button></div>
  </div>

  <div class="empty" id="empty" hidden>
    <div class="empty-ic">📥</div>
    <div class="empty-t">还没有数据</div>
    <div class="empty-d">点左侧【导入数据】上传抖音后台导出的 CSV / Excel，或把文件丢进 <code>data/inbox</code> 目录等 20 秒自动导入。</div>
    <button class="primary" onclick="document.getElementById('btnImport').click()">导入数据</button>
  </div>
</div>

<aside class="rail">
  <button class="railitem" id="btnText">文案配置</button>
  <button class="railitem" id="btnTh">指标配置<span class="rdot"></span></button>
  <button class="railitem" id="btnSync">同步数据</button>
  <button class="railitem" id="btnImport">导入数据</button>
  <button class="railitem" id="btnUsers">账号管理</button>
</aside>

<div class="overlay" id="ov"></div>
<div class="drawer" id="dw"></div>

<!-- 考核指标面板 -->
<aside class="sidepanel" id="thPanel">
  <div class="sphead">
    <h4>指标配置 <span class="pill" id="thPill">默认值</span>
      <span class="spclose" id="thClose" title="关闭">&times;</span></h4>
    <p>门店考核指标参数，默认值来自《门店考核指标》官方基准线。修改后点【应用到工作台】，服务端会按新阈值重算全部门店。</p>
  </div>
  <div class="spbody" id="thBody"></div>
  <div class="spfoot">
    <button id="thReset">恢复默认</button>
    <button class="primary" id="thApply">应用到工作台</button>
  </div>
</aside>

<!-- 文案配置面板 -->
<aside class="sidepanel" id="txPanel">
  <div class="sphead">
    <h4>文案配置 <span class="pill" id="txPill">默认值</span>
      <span class="spclose" id="txClose" title="关闭">&times;</span></h4>
    <p>自定义门店分析反馈文案。大括号变量在生成时自动替换为该店真实数据（如 {v}、{base}、{门店名}），删掉变量就是固定文字。改完点【应用到工作台】立即对全部门店生效。</p>
  </div>
  <div class="spbody" id="txBody"></div>
  <div class="spfoot">
    <button id="txReset">恢复默认</button>
    <button class="primary" id="txApply">应用到工作台</button>
  </div>
</aside>

<!-- 导入面板 -->
<aside class="sidepanel" id="usPanel">
  <div class="sphead">
    <h4>账号管理 <span class="spclose" id="usClose" title="关闭">&times;</span></h4>
    <p>账号按角色分配权限：<b>管理员</b>全部功能；<b>运营</b>可导入、同步、导出，不能改判定规则；<b>查看</b>只能看数据。</p>
  </div>
  <div class="spbody">
    <button class="primary" id="usNew" style="width:100%;margin-bottom:14px">+ 新建账号</button>
    <div class="history" id="usList"></div>
  </div>
</aside>

<aside class="sidepanel" id="imPanel">
  <div class="sphead">
    <h4>导入门店数据 <span class="spclose" id="imClose" title="关闭">&times;</span></h4>
    <p>支持门店后台导出的 CSV 或 Excel（.xlsx），日数据或整月汇总都行。同一门店同一天重复导入会覆盖，不会翻倍。旧版 .xls 请先另存为 .xlsx。</p>
  </div>
  <div class="spbody">
    <label class="drop" id="drop">
      <input type="file" id="file" accept=".csv,.xlsx,text/csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" hidden>
      <span id="dropText">点击选择 CSV / Excel 文件，或把文件拖到这里</span>
    </label>
    <div class="frow">
      <div class="thfield"><label>归属月份</label><div class="inp"><input id="imPeriod" type="month"></div></div>
      <div class="thfield"><label>数据日期（选填）</label><div class="inp"><input id="imDate" type="date"></div></div>
    </div>
    <div class="thnote" style="padding:0">· 文件里有「日期」列时以列值为准；填了日期则按日入库；都不填则当作该月汇总。</div>
    <div id="imResult" class="imresult"></div>
    <div class="sphead" style="padding:18px 0 6px;border:0">
      <h4 style="font-size:13px">导出原始文件</h4>
      <p>导出的是生意经导出的原件，与导入时完全一致，不含任何计算。</p>
    </div>
    <button class="primary" id="btnExportCur" style="width:100%;margin-bottom:6px">下载当前周期最新一份</button>
    <div class="thnote" style="padding:6px 0 0">下面每条记录右侧的「原始文件」可以下载那一次导入的原件。</div>
    <div class="sphead" style="padding:14px 0 6px;border:0"><h4 style="font-size:13px">导入历史</h4></div>
    <div id="imHistory" class="history"></div>
  </div>
  <div class="spfoot">
    <button id="imCancel">取消</button>
    <button class="primary" id="imGo" disabled>开始导入</button>
  </div>
</aside>

<div class="toast" id="toast"></div>
<script src="/app.js"></script>
</body>
</html>