You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
5 lines
9.0 KiB
5 lines
9.0 KiB
<!doctype html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>牦牛产业基础统计报告</title><style>
|
|
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#061018;color:#edfaff;font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif}.screen{position:relative;width:100vw;height:100vh;min-width:1280px;min-height:720px;background:radial-gradient(circle at 68% 42%,rgba(41,164,196,.22),transparent 28%),linear-gradient(180deg,#081d2c,#06121c 55%,#040910)}.screen:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(76,176,199,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(76,176,199,.06) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,#000 0 42%,rgba(0,0,0,.72) 62%,transparent)}header{position:absolute;left:0;right:0;top:0;height:82px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(14,56,82,.9),transparent);z-index:3}h1{margin:0;font-size:30px;text-shadow:0 0 18px rgba(63,210,255,.48)}.sub{position:absolute;top:57px;font-size:13px;color:rgba(218,240,246,.72)}.report{position:absolute;left:24px;top:88px;bottom:28px;width:430px;display:flex;flex-direction:column;gap:12px;z-index:2}.card{border:1px solid rgba(91,209,244,.32);background:linear-gradient(180deg,rgba(7,30,47,.88),rgba(6,23,36,.74));box-shadow:inset 0 0 26px rgba(45,174,215,.08),0 10px 30px rgba(0,0,0,.18);border-radius:6px;padding:14px 15px;position:relative;overflow:hidden}.card:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(65,221,255,.8),transparent)}.title{display:flex;justify-content:space-between;align-items:center;height:22px;margin-bottom:10px;font-size:16px;font-weight:650}.title span{font-size:12px;color:rgba(209,236,244,.62);font-weight:400}.summary{height:150px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metric{height:48px;padding:8px 10px;border:1px solid rgba(94,188,224,.16);border-radius:5px;background:rgba(4,19,30,.54)}.metric label{display:block;font-size:12px;color:rgba(207,232,239,.68)}.metric strong{display:inline-block;margin-top:4px;font-size:22px;line-height:1;color:#63e7ff}.metric small{margin-left:4px;color:rgba(222,241,247,.76)}.bars-card{height:150px}.ability{height:176px}.subcat{height:156px}.town{flex:1;min-height:140px}.bars{display:flex;flex-direction:column;gap:7px}.bar{display:grid;grid-template-columns:118px 1fr 54px;gap:8px;align-items:center;font-size:12px;color:rgba(231,247,250,.88)}.name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.track{height:8px;border-radius:99px;background:rgba(110,157,175,.18);overflow:hidden}.fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#35d7ff,#9cf1ff)}.ability-list{display:grid;grid-template-columns:1fr;gap:7px}.ability-row{display:flex;justify-content:space-between;align-items:center;padding:7px 9px;border:1px solid rgba(94,188,224,.13);border-radius:5px;background:rgba(4,19,30,.48);font-size:12px}.ability-row strong{font-size:18px;color:#a4e65c}.badges{display:flex;flex-wrap:wrap;gap:7px}.badge{padding:6px 8px;border:1px solid rgba(111,202,232,.18);border-radius:5px;background:rgba(5,22,34,.58);font-size:12px;color:rgba(234,249,252,.9)}.note{margin-top:8px;font-size:12px;color:rgba(218,239,245,.6)}.stage{position:absolute;left:500px;right:34px;top:130px;bottom:88px;border:1px solid rgba(80,193,230,.12);border-radius:8px;background:radial-gradient(circle at 45% 45%,rgba(47,146,164,.22),transparent 30%),rgba(4,17,27,.18);z-index:1}.stage:before{content:"产业数据基础报告";position:absolute;left:44px;top:38px;font-size:34px;font-weight:700;color:rgba(240,253,255,.9);text-shadow:0 0 18px rgba(64,210,255,.3)}.stage:after{content:"右侧区域可承载地图、主体点位或后续专题内容；当前不强行填充无依据图表。";position:absolute;left:46px;top:88px;font-size:15px;color:rgba(220,241,247,.68)}.rings{position:absolute;right:12%;top:22%;width:380px;height:380px;border-radius:50%;border:1px solid rgba(95,220,245,.16)}.rings:before,.rings:after{content:"";position:absolute;border-radius:50%;border:1px dashed rgba(95,220,245,.18)}.rings:before{inset:54px}.rings:after{inset:110px;background:rgba(45,166,150,.08)}
|
|
</style></head><body><div class="screen"><header><h1>红原牦牛产业基础统计报告</h1><div class="sub">只展示当前数据能够支撑的指标、分布和分类</div></header><aside class="report"><section class="card summary"><div class="title">核心指标<span>全链</span></div><div class="grid" id="summary"></div></section><section class="card bars-card"><div class="title">节点分布<span>主体数量</span></div><div class="bars" id="stageBars"></div></section><section class="card ability"><div class="title">能力指标<span>生产保障</span></div><div class="ability-list" id="abilities"></div></section><section class="card subcat"><div class="title">分类构成<span>业务类型</span></div><div class="badges" id="subcats"></div></section><section class="card town"><div class="title">乡镇分布<span>Top 8</span></div><div class="bars" id="townBars"></div><div class="note" id="townNote"></div></section></aside><main class="stage"><div class="rings"></div></main></div><script>
|
|
const DATA={"summary": [{"name": "全链主体", "value": 206, "unit": "条"}, {"name": "家庭牧场", "value": 82, "unit": "户"}, {"name": "养殖育种主体", "value": 52, "unit": "个"}, {"name": "服务主体", "value": 32, "unit": "个"}], "stageCounts": [{"name": "家庭生态牧场", "value": 82}, {"name": "养殖育种基地", "value": 52}, {"name": "饲草防灾保障", "value": 21}, {"name": "屠宰加工主体", "value": 16}, {"name": "社会化服务", "value": 32}, {"name": "林草资源底座", "value": 3}], "abilities": [{"name": "设计存栏", "value": 9385.0, "unit": "头"}, {"name": "年出栏量", "value": 18483.0, "unit": "头"}, {"name": "饲草种植面积", "value": 21000.0, "unit": "亩"}, {"name": "饲草储备库容", "value": 10500.0, "unit": "吨"}, {"name": "年加工鲜奶", "value": 13000.0, "unit": "吨"}, {"name": "年屠宰量", "value": 68000.0, "unit": "头"}, {"name": "加工屠宰产值", "value": 59394.630000000005, "unit": "万元"}], "subcats": [{"name": "家庭生态牧场", "value": 82, "group": "家庭生态牧场"}, {"name": "标准化养殖基地", "value": 19, "group": "养殖育种基地"}, {"name": "cxpt养殖基地", "value": 28, "group": "养殖育种基地"}, {"name": "育种繁育场", "value": 4, "group": "养殖育种基地"}, {"name": "cxpt种畜基地", "value": 1, "group": "养殖育种基地"}, {"name": "种草饲草基地", "value": 8, "group": "饲草防灾保障"}, {"name": "cxpt饲草基地", "value": 5, "group": "饲草防灾保障"}, {"name": "cxpt草种基地", "value": 1, "group": "饲草防灾保障"}, {"name": "防灾减灾饲草储备库", "value": 7, "group": "饲草防灾保障"}, {"name": "加工厂", "value": 9, "group": "屠宰加工主体"}, {"name": "屠宰厂", "value": 7, "group": "屠宰加工主体"}, {"name": "疫病防控", "value": 3, "group": "社会化服务"}, {"name": "技术培训", "value": 8, "group": "社会化服务"}, {"name": "金融服务网点", "value": 4, "group": "社会化服务"}, {"name": "保险服务网点", "value": 4, "group": "社会化服务"}, {"name": "cxpt其他基地", "value": 11, "group": "社会化服务"}, {"name": "农机装备", "value": 2, "group": "社会化服务"}, {"name": "林草资源数据", "value": 3, "group": "林草资源底座"}], "townRows": [{"name": "邛溪镇", "value": 30}, {"name": "瓦切镇", "value": 29}, {"name": "龙日镇", "value": 22}, {"name": "安曲镇", "value": 15}, {"name": "查尔玛乡", "value": 13}, {"name": "江茸乡", "value": 10}, {"name": "阿木乡", "value": 10}, {"name": "刷经寺镇", "value": 8}], "missingTown": 61};function fmt(v){return Number(v||0).toLocaleString('zh-CN')}function renderMetrics(){document.getElementById('summary').innerHTML=DATA.summary.map(x=>`<div class="metric"><label>${x.name}</label><strong>${fmt(x.value)}</strong><small>${x.unit}</small></div>`).join('')}function bars(id,rows){const max=Math.max(...rows.map(r=>+r.value||0),1);document.getElementById(id).innerHTML=rows.map(r=>`<div class="bar"><div class="name" title="${r.name}">${r.name}</div><div class="track"><div class="fill" style="width:${Math.max(4,(+r.value||0)/max*100)}%"></div></div><div>${fmt(r.value)}</div></div>`).join('')}function render(){renderMetrics();bars('stageBars',DATA.stageCounts);bars('townBars',DATA.townRows);document.getElementById('abilities').innerHTML=DATA.abilities.map(x=>`<div class="ability-row"><span>${x.name}</span><strong>${fmt(x.value)}<small>${x.unit}</small></strong></div>`).join('');document.getElementById('subcats').innerHTML=DATA.subcats.map(x=>`<span class="badge">${x.name} · ${x.value}</span>`).join('');document.getElementById('townNote').textContent=`另有 ${DATA.missingTown} 条主体未明确乡镇，暂不计入乡镇排行。`}render();
|
|
</script></body></html> |