workspace/code/container-ocr/ocr-vue/test.html

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <title>数据看板</title>

  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>

<body class="bg-gray-100">

  <div class="p-4">

    <!-- 顶部 -->
    <div class="flex justify-between items-center mb-4">
      <h1 class="text-xl font-bold">数据看板</h1>
      <button id="refreshBtn" class="bg-blue-500 text-white px-3 py-1 rounded" onclick="refreshData()">
        🔄 刷新
      </button>
    </div>

    <!-- KPI -->
    <div id="kpi" class="grid grid-cols-6 gap-3 mb-4"></div>

    <!-- ⭐ 公告（不占全宽，简洁版） -->
    <div class="bg-orange-100 border border-orange-300 text-orange-800 px-4 py-3 rounded mb-4 w-full sm:w-2/3 md:w-1/2">
      <div class="text-lg font-bold">📢 公告：</div>
      <div id="notice" class="text-sm space-y-3">
        <!-- 公告内容会由 JS 填充 -->
      </div>
    </div>

    <!-- 趋势图 -->
    <div class="bg-white p-4 rounded shadow mb-4">
      <div class="mb-2 font-semibold">近7天上传趋势</div>
      <div id="trend" style="height:260px;"></div>
    </div>

    <!-- 中间区域 -->
    <div class="grid grid-cols-3 gap-4">

      <!-- 排行 -->
      <div class="bg-white p-4 rounded shadow col-span-2">
        <div class="mb-2 font-semibold">操作员上传排行</div>
        <div id="rank" style="height:260px;"></div>
      </div>

      <!-- 最新上传 -->
      <div class="bg-white p-4 rounded shadow">
        <div class="mb-2 font-semibold">最新上传</div>
        <table class="w-full text-sm">
          <thead>
            <tr class="text-gray-500">
              <th>箱号</th>
              <th>操作员</th>
              <th>时间</th>
              <th>数量</th>
            </tr>
          </thead>
          <tbody id="table"></tbody>
        </table>
      </div>

    </div>

  </div>

  <script>
    // 模拟数据
    function getData() {
      return {
        kpi: [
          ["今日箱数", rand(80, 150)],
          ["照片总数", rand(300, 800)],
          ["活跃操作员", rand(5, 20)],
          ["最近上传", "10:" + rand(10, 59)],
          ["异常箱数", rand(0, 10)],
          ["待处理", rand(0, 5)],
        ],
        trend: Array.from({ length: 7 }, () => rand(50, 150)),
        rank: Array.from({ length: 5 }, () => rand(40, 120)),
        users: ["张三", "李四", "王五", "赵六", "钱七"],
        list: [
          ["MSCU1234567", "张三", "10:30", 5],
          ["TEMU7654321", "李四", "10:20", 4],
          ["CMAU9988776", "王五", "10:10", 6],
        ],
        notice: [
          "📌 今日起必须上传封条照片",
          "📌 晚班请补录遗漏数据",
          "📌 周五晚系统维护"
        ],
      }
    }

    function rand(min, max) { return Math.floor(Math.random() * (max - min) + min) }

    let trendChart = echarts.init(document.getElementById('trend'));
    let rankChart = echarts.init(document.getElementById('rank'));

    function render() {
      const data = getData();

      // KPI 渲染
      document.getElementById("kpi").innerHTML = data.kpi.map(i => `
    <div class="bg-white p-3 rounded shadow">
      <div class="text-gray-400 text-xs">${i[0]}</div>
      <div class="text-xl font-bold mt-1">${i[1]}</div>
    </div>
  `).join("");

      // 公告内容
      document.getElementById("notice").innerHTML =
        data.notice.map(i => `
      <div class="bg-orange-50 border-l-4 border-orange-400 px-4 py-2 rounded shadow-sm">
        ${i}
      </div>
    `).join("");

      // 表格渲染
      document.getElementById("table").innerHTML = data.list.map(i => `
    <tr class="border-t">
      <td>${i[0]}</td>
      <td>${i[1]}</td>
      <td>${i[2]}</td>
      <td>${i[3]}</td>
    </tr>
  `).join("");

      // 趋势图
      trendChart.setOption({
        xAxis: { type: 'category', data: ['一', '二', '三', '四', '五', '六', '日'] },
        yAxis: { type: 'value' },
        series: [{
          data: data.trend,
          type: 'line',
          smooth: true
        }]
      });

      // 排行图
      rankChart.setOption({
        xAxis: { type: 'category', data: data.users },
        yAxis: { type: 'value' },
        series: [{
          data: data.rank,
          type: 'bar'
        }]
      });
    }

    function refreshData() {
      const btn = document.getElementById("refreshBtn");
      btn.innerText = "刷新中...";
      btn.disabled = true;

      setTimeout(() => {
        render();
        btn.innerText = "🔄 刷新";
        btn.disabled = false;
      }, 800);
    }

    render();
  </script>

</body>

</html>