OPC/Demo/showcase.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OPC 社区驾驶舱 · 展览大屏</title>
<link rel="stylesheet" href="assets/style.css">
</head>
<body data-page="showcase" class="gov screen">
<header class="topnav" id="topnav"></header>

<div class="container">
  <div class="screen-hero">
    <h1>OPC 社区驾驶舱</h1>
    <p>一人公司 · 超级个体产业社区 · 展览区公开展示 · 全部数据脱敏汇总（REQ-118）</p>
  </div>

  <!-- 实时动态 -->
  <div class="ticker-wrap"><div class="ticker" id="sc-ticker"></div></div>

  <!-- 核心指标 -->
  <div class="section grid grid-3" id="sc-kpis"></div>

  <div class="section">
    <div class="two-col">
      <!-- 业务模式分布 -->
      <div class="card">
        <h3>业务模式分布 · 按订单额</h3>
        <div id="sc-mix"></div>
      </div>
      <!-- 供需转化 -->
      <div class="card">
        <h3>供需转化（本季度）</h3>
        <div class="funnel" id="sc-funnel"></div>
      </div>
    </div>
  </div>

  <div class="section">
    <div class="two-col">
      <!-- 明星 OPC -->
      <div class="card">
        <h3>明星 OPC 榜 <span class="req">脱敏展示</span></h3>
        <table id="sc-top"></table>
      </div>
      <!-- 橙果商城热榜 -->
      <div class="card">
        <h3>OPC橙果商城 · 热销成果</h3>
        <ul class="list" id="sc-market"></ul>
        <a class="btn sm ghost" style="margin-top:10px" href="market.html">进入商城 →</a>
      </div>
    </div>
  </div>

  <!-- 产业集聚效应（§1.5 步骤⑤） -->
  <div class="section">
    <h2 style="color:#e2e8f0">产业集聚效应 <span class="req">§1.5 ⑤ · 标杆 + 上下游 + 复购飞轮</span></h2>
    <div class="two-col">
      <div class="card">
        <h3>上游生态</h3>
        <table id="sc-upstream"></table>
      </div>
      <div class="card">
        <h3>下游产能</h3>
        <table id="sc-downstream"></table>
      </div>
    </div>
    <div class="card" style="margin-top:14px">
      <h3>产业链条 · 按业务方向</h3>
      <table id="sc-chain"></table>
    </div>
    <div class="card" style="margin-top:14px">
      <h3>标杆带动 <span class="req">REQ-005</span></h3>
      <p id="sc-benchmark" style="font-size:13px;line-height:1.8"></p>
    </div>
  </div>
</div>

<div class="footer">OPC 公共服务平台 Demo · 展览区大屏 · 数据每 5 分钟刷新（演示为静态）</div>
<script src="assets/app.js"></script>
<script src="assets/store.js"></script>
<script>
function renderPage(DB) {
  const S = DB.showcase;

  // 滚动条：内容复制一遍实现无缝滚动
  const items = S.ticker.map(t => `<span>◆ ${t}</span>`).join('');
  document.getElementById('sc-ticker').innerHTML = items + items;

  document.getElementById('sc-kpis').innerHTML = S.kpis.map(k =>
    `<div class="card"><h3>${k.label}</h3><div class="num">${k.num}</div></div>`).join('');

  document.getElementById('sc-mix').innerHTML = S.bizMix.map(m => `
    <div style="margin-bottom:12px">
      <div style="display:flex;justify-content:space-between;font-size:13px"><span>${m[0]}</span><span>${m[1]}%</span></div>
      ${BAR(m[1])}
    </div>`).join('');

  document.getElementById('sc-funnel').innerHTML = S.funnel.map((f, i) => `
    <div class="funnel-row">
      <span class="funnel-stage" style="color:#94a3b8">${f[0]}</span>
      <div class="funnel-bar" style="width:${100 - i * 22}%;background:#0ea5e9">${f[1]}</div>
      ${i ? `<span class="funnel-conv">转化 ${(f[1] / S.funnel[i-1][1] * 100).toFixed(0)}%</span>` : ''}
    </div>`).join('');

  document.getElementById('sc-top').innerHTML =
    `<tr><th>OPC</th><th>等级</th><th>关键指标</th></tr>` +
    S.topOpc.map(o => `<tr><td>${o.code} ${o.name}</td><td><span class="badge pri">${o.level}</span></td><td>${o.metric}</td></tr>`).join('');

  document.getElementById('sc-market').innerHTML = S.marketTop.map(m =>
    `<li><span>${m[0]}</span><span class="muted">${m[1]}</span></li>`).join('');

  // 产业集聚效应（§1.5 步骤⑤）
  const C = S.cluster || {};
  if (C.upstream) {
    document.getElementById('sc-upstream').innerHTML =
      `<tr><th>类型</th><th>数量</th><th>代表</th></tr>` +
      C.upstream.map(u => `<tr><td>${u.type}</td><td><b>${u.count}</b></td><td class="muted" style="font-size:12px">${u.top}</td></tr>`).join('');
    document.getElementById('sc-downstream').innerHTML =
      `<tr><th>类型</th><th>数量</th><th>构成</th></tr>` +
      C.downstream.map(d => `<tr><td>${d.type}</td><td><b>${d.count}</b></td><td class="muted" style="font-size:12px">${d.top}</td></tr>`).join('');
    document.getElementById('sc-chain').innerHTML =
      `<tr><th>业务方向</th><th>上游</th><th>核心产能</th><th>下游效果</th></tr>` +
      C.chain.map(c => `<tr><td><b>${c.dir}</b></td><td style="font-size:12px">${c.upstream}</td><td style="font-size:12px">${c.core}</td><td style="font-size:12px">${c.downstream}</td></tr>`).join('');
    document.getElementById('sc-benchmark').textContent = C.benchmark || '';
  }
}
</script>
</body>
</html>