138 lines
14 KiB
HTML
138 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8"><meta name="viewport" content="width=1280,initial-scale=1.0">
|
||
<title>危大方案编审进度看板</title>
|
||
<style>
|
||
:root{--blue:#1A3A5C;--gold:#C8962E;--red:#D94E34;--gray:#8899AA;--bg:#EBF0F7;--foot:#F5F6F8;--border:#DBE2EA}
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
body{background:#fff;color:#333;padding:0}
|
||
.fs{font-family:'方正公文小标宋','SimSun',serif}
|
||
.fy{font-family:'微软雅黑','Microsoft YaHei',sans-serif}
|
||
.slide{width:1280px;margin:0 auto 32px;background:#fff}
|
||
.nav{display:flex;background:var(--blue);padding:0 48px;height:42px;align-items:center;font-size:11px}
|
||
.nav span{color:var(--gray);margin-right:32px;font-family:'微软雅黑','Microsoft YaHei',sans-serif}
|
||
.nav .cur{color:var(--gold);font-weight:700}
|
||
.nav .cur::before{content:'\2605 '}
|
||
.title-area{padding:22px 48px 10px;display:flex;align-items:center;gap:14px}
|
||
.title-area .line{width:4px;height:26px;background:var(--gold);border-radius:2px;flex-shrink:0}
|
||
.title-area h1{font-size:22px;color:var(--blue);font-weight:700;font-family:'微软雅黑','Microsoft YaHei',sans-serif}
|
||
.title-area .date{font-size:12px;color:var(--gray);margin-left:auto;font-family:'微软雅黑','Microsoft YaHei',sans-serif}
|
||
|
||
/* Row 1: side-by-side */
|
||
.top-row{display:flex;gap:20px;margin:0 48px 16px}
|
||
.module-sm{flex:1;border:1px solid var(--border);border-radius:8px;overflow:hidden}
|
||
.module-head{background:var(--blue);color:#fff;padding:8px 20px;font-size:13px;font-weight:600;font-family:'微软雅黑','Microsoft YaHei',sans-serif;display:flex;align-items:center;gap:8px}
|
||
.module-head .tag{font-size:10px;background:var(--gold);color:#fff;padding:1px 8px;border-radius:4px}
|
||
.module-body-sm{padding:16px 20px;display:flex;align-items:center;gap:20px}
|
||
.hero{flex-shrink:0;text-align:center;background:var(--bg);border-radius:8px;padding:8px 14px}
|
||
.hero .num{font-size:44px;font-weight:700;color:var(--blue);font-family:'微软雅黑','Microsoft YaHei',sans-serif;line-height:1}
|
||
.hero .lbl{font-size:11px;color:var(--gray);margin-top:4px}
|
||
.chart-side{display:flex;align-items:center;gap:16px;flex:1}
|
||
.leg-sm{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#555}
|
||
.leg-sm .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
|
||
.leg-sm .val{font-size:18px;font-weight:700;margin-left:4px}
|
||
.sub-sm{font-size:10px;color:var(--gray);margin-top:6px;line-height:1.5}
|
||
|
||
/* Row 2: bars + warnings */
|
||
.mid-row{display:flex;gap:20px;margin:0 48px 16px}
|
||
.panel{flex:1;border:1px solid var(--border);border-radius:6px;overflow:hidden}
|
||
.panel-head{background:var(--blue);color:#fff;padding:8px 16px;font-size:12px;font-weight:600;font-family:'微软雅黑','Microsoft YaHei',sans-serif}
|
||
.panel-body{padding:14px}
|
||
.warn-grid{display:flex;gap:14px;align-items:center}
|
||
.wc{text-align:center;min-width:52px}
|
||
.wc .ico{font-size:20px}
|
||
.wc .n{font-size:26px;font-weight:700;line-height:1.1}
|
||
.wc .l{font-size:10px;color:#555;margin-top:2px}
|
||
|
||
/* Unified metric card */
|
||
.card{text-align:center;min-width:68px;background:var(--bg);border-radius:8px;padding:8px 12px}
|
||
.card .n{font-size:32px;font-weight:700;line-height:1.1;font-family:'微软雅黑','Microsoft YaHei',sans-serif}
|
||
.card .l{font-size:10px;color:#555;margin-top:2px}
|
||
|
||
/* Detail table in module */
|
||
.detail-table{margin-top:10px}
|
||
.detail-table table{width:100%;font-size:11px}
|
||
.detail-table th{background:var(--bg);color:var(--blue);padding:3px 8px;font-size:10px;font-weight:600;text-align:left}
|
||
.detail-table td{padding:2px 8px;border-bottom:1px solid var(--border);font-size:11px}
|
||
.detail-table .num{text-align:right}
|
||
|
||
/* Slide 2 */
|
||
table.main{width:100%;border-collapse:collapse;font-size:12px}
|
||
th.main{background:var(--blue);color:#fff;padding:8px 12px;text-align:left;font-size:11px;font-weight:600}
|
||
td.main{padding:6px 12px;border-bottom:1px solid var(--border)}
|
||
tr:nth-child(even) td{background:var(--bg)}
|
||
.num{text-align:right}.r{color:var(--red);font-weight:700}.wicon{font-size:16px;text-align:center}
|
||
.rule{margin:0 48px 20px;padding:10px 16px;background:var(--bg);border-left:4px solid var(--gold);border-radius:0 6px 6px 0;font-size:11px;color:#555;line-height:1.7}
|
||
.foot{display:flex;justify-content:space-between;align-items:center;height:32px;background:var(--foot);padding:0 48px;font-size:10px;color:var(--gray);font-family:'微软雅黑','Microsoft YaHei',sans-serif}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="slide">
|
||
<div class="nav"><span class="cur">关键指标</span><span>国别分布</span><span>预警明细</span></div>
|
||
<div class="title-area"><div class="line"></div><h1>危大方案编审进度看板</h1><span class="date">中国港湾中东区域公司 技术部 · 2026年6月 · 数据截止 2026-06-08</span></div>
|
||
|
||
<!-- ROW 1: Annual + OA side by side -->
|
||
<div class="top-row">
|
||
<div class="module-sm">
|
||
<div class="module-head">1. 年度认定<span class="tag">中港科技便〔2026〕6号</span></div>
|
||
<div class="module-body-sm">
|
||
<div class="hero"><div class="num">43</div><div class="lbl">安全专项总数</div></div>
|
||
<div class="chart-side"><svg width="110" height="110" viewBox="0 0 110 110"><circle cx="55" cy="55" r="48" fill="none" stroke="#EBF0F7" stroke-width="14"/><circle cx="55" cy="55" r="48" fill="none" stroke="#1A3A5C" stroke-width="14" stroke-dasharray="189 112" stroke-dashoffset="0" transform="rotate(-90 55 55)"/><circle cx="55" cy="55" r="48" fill="none" stroke="#C8962E" stroke-width="14" stroke-dasharray="112 189" stroke-dashoffset="-189" transform="rotate(-90 55 55)"/></svg><div class="leg-sm"><div><span class="dot" style="background:var(--blue)"></span>一般类<span class="val" style="color:var(--blue)">27</span></div><div><span class="dot" style="background:var(--gold)"></span>超规类<span class="val" style="color:var(--gold)">16</span></div></div></div>
|
||
<div style="font-size:10px;color:var(--gray);margin-left:auto;text-align:right;line-height:1.5">覆盖 7 个项目<br>≥2026年开工</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="module-sm">
|
||
<div class="module-head">2. OA有效登记<span class="tag">排除已作废</span></div>
|
||
<div class="module-body-sm">
|
||
<div class="hero"><div class="num">52</div><div class="lbl">有效登记总数</div></div>
|
||
<div class="chart-side"><svg width="110" height="110" viewBox="0 0 110 110"><circle cx="55" cy="55" r="48" fill="none" stroke="#EBF0F7" stroke-width="14"/><circle cx="55" cy="55" r="48" fill="none" stroke="#1A3A5C" stroke-width="14" stroke-dasharray="173 128" stroke-dashoffset="0" transform="rotate(-90 55 55)"/><circle cx="55" cy="55" r="48" fill="none" stroke="#C8962E" stroke-width="14" stroke-dasharray="127 174" stroke-dashoffset="-173" transform="rotate(-90 55 55)"/></svg><div class="leg-sm"><div><span class="dot" style="background:var(--blue)"></span>一般类<span class="val" style="color:var(--blue)">30</span></div><div><span class="dot" style="background:var(--gold)"></span>超规类<span class="val" style="color:var(--gold)">22</span></div></div></div>
|
||
<div style="font-size:10px;color:var(--gray);margin-left:auto;text-align:right;line-height:1.5">登记率 121%（52/43）<br>≥2026年开工</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ROW 2: Bars + Warnings -->
|
||
<div class="mid-row">
|
||
<div class="panel"><div class="panel-head">3. 按国别分布 · 分层条形图</div><div class="panel-body"><svg width="550" height="90"><text x="120" y="18" text-anchor="end" font-size="12" fill="#555" font-family="SimSun,serif">阿拉伯联合酋长国</text><rect x="172" y="5" width="204" height="24" rx="4" fill="#1A3A5C"/><text x="274.0" y="22" text-anchor="middle" font-size="11" fill="#fff" font-weight="600" font-family="Microsoft YaHei,sans-serif">27</text><rect x="376" y="5" width="136" height="24" rx="4" fill="#C8962E"/><text x="444.0" y="22" text-anchor="middle" font-size="11" fill="#fff" font-weight="600" font-family="Microsoft YaHei,sans-serif">18</text><text x="524" y="22" font-size="14" font-weight="700" fill="#1A3A5C" font-family="Microsoft YaHei,sans-serif">45</text><text x="120" y="48" text-anchor="end" font-size="12" fill="#555" font-family="SimSun,serif">沙特阿拉伯</text><rect x="172" y="35" width="22" height="24" rx="4" fill="#1A3A5C"/><text x="183.0" y="52" text-anchor="middle" font-size="11" fill="#fff" font-weight="600" font-family="Microsoft YaHei,sans-serif">3</text><rect x="194" y="35" width="22" height="24" rx="4" fill="#C8962E"/><text x="205.0" y="52" text-anchor="middle" font-size="11" fill="#fff" font-weight="600" font-family="Microsoft YaHei,sans-serif">3</text><text x="524" y="52" font-size="14" font-weight="700" fill="#1A3A5C" font-family="Microsoft YaHei,sans-serif">6</text><text x="120" y="78" text-anchor="end" font-size="12" fill="#555" font-family="SimSun,serif">卡塔尔</text><rect x="172" y="65" width="0" height="24" rx="4" fill="#1A3A5C"/><rect x="172" y="65" width="7" height="24" rx="4" fill="#C8962E"/><text x="175.5" y="82" text-anchor="middle" font-size="11" fill="#fff" font-weight="600" font-family="Microsoft YaHei,sans-serif">1</text><text x="524" y="82" font-size="14" font-weight="700" fill="#1A3A5C" font-family="Microsoft YaHei,sans-serif">1</text></svg><div style="display:flex;flex-direction:column;gap:4px;margin-top:6px;font-size:11px;color:#555"><span><span class="dot" style="width:10px;height:8px;background:var(--blue);border-radius:2px;display:inline-block;margin-right:4px;vertical-align:middle"></span>一般类</span><span><span class="dot" style="width:10px;height:8px;background:var(--gold);border-radius:2px;display:inline-block;margin-right:4px;vertical-align:middle"></span>超规类</span></div></div></div>
|
||
<div class="panel"><div class="panel-head">4. 审批进度 & 三色预警信号</div><div class="panel-body" style="display:flex;flex-direction:column;gap:14px">
|
||
<!-- Row 1: 预警信号 -->
|
||
<div style="display:flex;align-items:center;gap:16px">
|
||
<div class="card"><div class="n" style="color:var(--red);font-size:44px">5</div><div class="l">预警总计</div></div>
|
||
<div class="card"><div class="ico" style="font-size:22px;line-height:1">🔴</div><div class="n" style="color:var(--red)">0</div><div class="l">红色</div></div>
|
||
<div class="card"><div class="ico" style="font-size:22px;line-height:1">🟠</div><div class="n" style="color:var(--red)">1</div><div class="l">橙色</div></div>
|
||
<div class="card"><div class="ico" style="font-size:22px;line-height:1">🟡</div><div class="n" style="color:var(--gold)">4</div><div class="l">黄色</div></div>
|
||
<div class="card"><div class="n" style="color:var(--gray);font-size:36px">23</div><div class="l">未完成审批</div></div>
|
||
<div style="font-size:11px;color:var(--gray);margin-left:auto;text-align:right;line-height:1.6;display:flex;flex-direction:column;gap:4px"><span>🔴 在实施未审批</span><span>🟠 ≤30天</span><span>🟡 ≤45天</span></div>
|
||
</div>
|
||
<!-- Row 2: 审批进度条 -->
|
||
<div style="display:flex;align-items:center;gap:16px">
|
||
<div class="card"><div class="n" style="color:#2E7D32;font-size:44px">56%</div><div class="l">审批完成率</div></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:4px">
|
||
<div style="height:18px;background:#EBF0F7;border-radius:9px;overflow:hidden"><div style="height:100%;width:56%;background:linear-gradient(90deg,var(--blue),var(--gold));border-radius:9px"></div></div>
|
||
<div style="display:flex;justify-content:space-between;font-size:11px;color:var(--gray)"><span>已审批 29</span><span>未审批 23 / 总计 52</span></div>
|
||
</div>
|
||
</div></div></div>
|
||
</div>
|
||
|
||
<!-- Unregistered detail -->
|
||
<div style="margin:0 48px 12px">
|
||
<div class="detail-table">
|
||
<table><tr><th>登记率未达100%的项目（认定→OA）</th><th class="num">认定</th><th class="num">OA</th><th class="num">缺口</th></tr><tr><td class="fs">阿联酋阿布扎比马斯努阿岛水工项目</td><td class="num">2</td><td class="num" style="color:var(--red)">0</td><td class="num" style="color:var(--red)">2</td></tr></table>
|
||
<div style="font-size:10px;color:var(--gray);margin-top:2px">※ 1 个认定项目未在OA登记 · 项目名称为近似匹配</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="foot"><span>中国港湾中东区域公司 技术部</span><span>1 / 2</span></div>
|
||
</div>
|
||
|
||
<div class="slide">
|
||
<div class="nav"><span>关键指标</span><span>国别分布</span><span class="cur">预警明细</span></div>
|
||
<div class="title-area"><div class="line"></div><h1>预警信号明细清单</h1><span class="date">共 5 项预警</span></div>
|
||
<div style="margin:0 48px 20px"><div class="panel" style="flex:1"><div class="panel-body" style="padding:0"><table class="main"><tr><th class="main">信号</th><th class="main">项目名称</th><th class="main">方案名称</th><th class="main">当前状态</th><th class="main num">距开工</th></tr><tr><td class="wicon">🟠</td><td class="fs">阿联酋迪拜马克图姆国际机场地下结构工程</td><td class="fs">BHS/GSE隧道现浇板(4包)</td><td class="fs">已添加未实施</td><td class="num r">2天</td></tr><tr><td class="wicon">🟡</td><td class="fs">阿联酋阿布扎比汽车基地房建项目</td><td class="fs">模板支立工程</td><td class="fs">未审批未实施</td><td class="num r">32天</td></tr><tr><td class="wicon">🟡</td><td class="fs">阿联酋阿布扎比汽车基地房建项目</td><td class="fs">深基坑开挖方案</td><td class="fs">未审批未实施</td><td class="num r">37天</td></tr><tr><td class="wicon">🟡</td><td class="fs">阿联酋迪拜马克图姆国际机场地下结构工程</td><td class="fs">现浇倒T梁(4包)</td><td class="fs">审批中未实施</td><td class="num r">42天</td></tr><tr><td class="wicon">🟡</td><td class="fs">阿联酋迪拜马克图姆国际机场地下结构工程</td><td class="fs">T梁预制运输安装(4包)</td><td class="fs">已添加未实施</td><td class="num r">42天</td></tr></table></div></div></div>
|
||
<div class="rule">📐 <b>预警规则</b>：🟠 橙色 ≤30天未审批 · 🟡 黄色 ≤45天未审批 · 🔴 红色 在实施未审批（本月0项）</div>
|
||
<div class="foot"><span>中国港湾中东区域公司 技术部</span><span>2 / 2</span></div>
|
||
</div>
|
||
|
||
</body></html> |