index.html 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>格士立青岛出口操作台</title>
  7. <link rel="stylesheet" href="/static/styles.css">
  8. </head>
  9. <body>
  10. <header class="topbar">
  11. <div>
  12. <h1>青岛出口操作台</h1>
  13. <p>订单、节点、异常、风险与关键时限</p>
  14. </div>
  15. <button id="refreshBtn" type="button">刷新</button>
  16. </header>
  17. <main class="layout">
  18. <section class="panel">
  19. <div class="panel-title">
  20. <h2>订单状态</h2>
  21. <span id="ordersCount">0</span>
  22. </div>
  23. <div id="orders" class="table-wrap"></div>
  24. </section>
  25. <section class="panel">
  26. <div class="panel-title">
  27. <h2>风险订单</h2>
  28. <span id="risksCount">0</span>
  29. </div>
  30. <div id="risks" class="table-wrap"></div>
  31. </section>
  32. <section class="panel wide">
  33. <div class="panel-title">
  34. <h2>标准流程</h2>
  35. <span>1-14</span>
  36. </div>
  37. <div id="flow" class="timeline"></div>
  38. </section>
  39. <section class="panel wide">
  40. <div class="panel-title">
  41. <h2>节点时间状态</h2>
  42. <span id="nodeTimesCount">0</span>
  43. </div>
  44. <div id="nodeTimes" class="table-wrap"></div>
  45. </section>
  46. <section class="panel">
  47. <div class="panel-title">
  48. <h2>订单关键时限</h2>
  49. <span id="cutoffsCount">0</span>
  50. </div>
  51. <div id="cutoffs" class="table-wrap"></div>
  52. </section>
  53. <section class="panel">
  54. <div class="panel-title">
  55. <h2>异常影响</h2>
  56. <span id="exceptionCount">0</span>
  57. </div>
  58. <div id="exceptionMap" class="table-wrap"></div>
  59. </section>
  60. </main>
  61. <script src="/static/app.js"></script>
  62. </body>
  63. </html>