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
10 KiB
5 lines
10 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 70% 44%,rgba(38,152,190,.2),transparent 30%),linear-gradient(180deg,#081b29,#06121c 56%,#040910)}.screen:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(75,174,198,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(75,174,198,.06) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,#000 0 44%,rgba(0,0,0,.65) 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:455px;display:flex;flex-direction:column;gap:10px;z-index:2}.card{border:1px solid rgba(91,209,244,.32);background:linear-gradient(180deg,rgba(7,30,47,.9),rgba(6,23,36,.76));box-shadow:inset 0 0 26px rgba(45,174,215,.08),0 10px 30px rgba(0,0,0,.18);border-radius:6px;padding:12px 14px;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;margin-bottom:8px;font-size:16px;font-weight:650}.title span{font-size:12px;color:rgba(211,238,244,.64);font-weight:400}.kpi{height:126px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metric{height:39px;padding:6px 8px;border:1px solid rgba(94,188,224,.16);border-radius:5px;background:rgba(4,19,30,.54)}.metric label{font-size:12px;color:rgba(207,232,239,.68)}.metric strong{float:right;font-size:18px;color:#63e7ff}.metric small{margin-left:3px;color:rgba(222,241,247,.76)}.chain-section{height:102px}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.section-head b{font-size:15px;color:#ecfdff}.section-head span{font-size:12px;color:#76e5ff}.desc{margin-top:4px;font-size:12px;color:rgba(218,238,244,.68);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini{display:flex;gap:6px;margin-top:8px}.mini div{flex:1;min-width:0;padding:6px 7px;border-radius:5px;background:rgba(4,19,30,.52);border:1px solid rgba(94,188,224,.14);font-size:12px}.mini strong{display:block;margin-top:2px;font-size:16px;color:#a4e65c}.badges{margin-top:7px;display:flex;gap:5px;overflow:hidden}.badge{padding:4px 6px;border-radius:4px;background:rgba(5,22,34,.62);border:1px solid rgba(111,202,232,.18);font-size:11px;color:rgba(234,249,252,.88);white-space:nowrap}.canvas{position:absolute;left:520px;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}.canvas: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)}.canvas:after{content:"资源草畜基础 → 养殖育种 → 饲草保障 → 屠宰加工 → 产业服务。当前只把有数据支撑的业务环节放入左侧报告。";position:absolute;left:46px;top:90px;font-size:15px;color:rgba(220,241,247,.68);max-width:760px;line-height:1.8}.flow{position:absolute;left:50px;right:70px;bottom:74px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.node{height:78px;border:1px solid rgba(105,211,242,.24);border-radius:6px;background:rgba(7,30,47,.54);display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#e9fbff}.node:not(:last-child):after{content:"";position:absolute}.rings{position:absolute;right:12%;top:20%;width:360px;height:360px;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 kpi"><div class="title">产业链关键业务数<span>有数据支撑</span></div><div class="grid" id="kpis"></div></section><div id="sections"></div></aside><main class="canvas"><div class="rings"></div><div class="flow"><div class="node">资源草畜基础</div><div class="node">养殖育种</div><div class="node">饲草防灾</div><div class="node">屠宰加工</div><div class="node">产业服务</div></div></main></div><script>
|
|
const DATA={"kpis": [{"label": "家庭生态牧场", "value": 82, "unit": "户", "note": "源头经营主体"}, {"label": "养殖育种主体", "value": 52, "unit": "个", "note": "养殖与繁育"}, {"label": "饲草储备能力", "value": 10500.0, "unit": "吨", "note": "防灾保障"}, {"label": "加工屠宰主体", "value": 16, "unit": "家", "note": "转化承接"}], "sections": [{"key": "resource", "title": "一、资源与草畜基础", "desc": "草原资源、家庭牧场和牦牛生产承载，是产业链的底盘。", "codes": ["YC-GRASSLAND-RESOURCE", "YC-FAMILY-PASTURE"], "count": 85, "types": [{"name": "林草资源数据", "value": 3}, {"name": "家庭生态牧场", "value": 82}], "townRows": [{"name": "龙日镇", "value": 16}, {"name": "邛溪镇", "value": 16}, {"name": "瓦切镇", "value": 16}, {"name": "查尔玛乡", "value": 10}, {"name": "安曲镇", "value": 7}], "metrics": [{"name": "家庭牧场", "value": 82, "unit": "户"}, {"name": "资源指标", "value": 3, "unit": "项"}]}, {"key": "production", "title": "二、养殖与良种繁育", "desc": "标准化养殖基地和育种场决定源头供给能力。", "codes": ["YC-BREEDING-BASE", "YC-CXPT-BREEDING-BASE", "YC-BREEDING-STOCK", "YC-CXPT-BREEDING-STOCK-BASE"], "count": 52, "types": [{"name": "标准化养殖基地", "value": 19}, {"name": "cxpt养殖基地", "value": 28}, {"name": "育种繁育场", "value": 4}, {"name": "cxpt种畜基地", "value": 1}], "townRows": [{"name": "邛溪镇", "value": 6}, {"name": "安曲镇", "value": 4}, {"name": "瓦切镇", "value": 4}, {"name": "查尔玛乡", "value": 3}, {"name": "刷经寺镇", "value": 2}], "metrics": [{"name": "基地主体", "value": 52, "unit": "个"}, {"name": "设计存栏", "value": 9385.0, "unit": "头"}, {"name": "年出栏", "value": 18483.0, "unit": "头"}]}, {"key": "forage", "title": "三、饲草与防灾保障", "desc": "种草基地、草种基地和储备库决定补饲与抗灾能力。", "codes": ["YC-FORAGE-BASE", "YC-CXPT-FORAGE-BASE", "YC-CXPT-GRASS-SEED-BASE", "YC-DISASTER-FORAGE-STORAGE"], "count": 21, "types": [{"name": "种草饲草基地", "value": 8}, {"name": "cxpt饲草基地", "value": 5}, {"name": "cxpt草种基地", "value": 1}, {"name": "防灾减灾饲草储备库", "value": 7}], "townRows": [{"name": "瓦切镇", "value": 7}, {"name": "龙日镇", "value": 4}, {"name": "安曲镇", "value": 3}, {"name": "邛溪镇", "value": 1}, {"name": "刷经寺镇", "value": 1}], "metrics": [{"name": "保障主体", "value": 21, "unit": "个"}, {"name": "种植面积", "value": 21000.0, "unit": "亩"}, {"name": "储备库容", "value": 10500.0, "unit": "吨"}]}, {"key": "processing", "title": "四、屠宰与加工转化", "desc": "乳品加工、肉品加工和屠宰主体承接一产转化。", "codes": ["YC-PROCESSING-PLANT", "YC-SLAUGHTERHOUSE"], "count": 16, "types": [{"name": "加工厂", "value": 9}, {"name": "屠宰厂", "value": 7}], "townRows": [], "metrics": [{"name": "加工屠宰主体", "value": 16, "unit": "家"}, {"name": "年加工鲜奶", "value": 13000.0, "unit": "吨"}, {"name": "年屠宰量", "value": 68000.0, "unit": "头"}, {"name": "加工产值", "value": 59394.630000000005, "unit": "万元"}]}, {"key": "service", "title": "五、产业服务支撑", "desc": "金融、保险、防疫、培训、农机和交易服务支撑产业运行。", "codes": ["YC-DISEASE-CONTROL", "YC-TECH-TRAINING", "YC-SERVICE-FINANCE", "YC-SERVICE-INSURANCE", "YC-CXPT-OTHER-BASE", "YC-FARM-EQUIPMENT"], "count": 32, "types": [{"name": "疫病防控", "value": 3}, {"name": "技术培训", "value": 8}, {"name": "金融服务网点", "value": 4}, {"name": "保险服务网点", "value": 4}, {"name": "cxpt其他基地", "value": 11}, {"name": "农机装备", "value": 2}], "townRows": [{"name": "邛溪镇", "value": 7}, {"name": "瓦切镇", "value": 2}, {"name": "阿木乡", "value": 2}, {"name": "全县覆盖", "value": 1}, {"name": "马尔康市 / 邛溪镇", "value": 1}], "metrics": [{"name": "服务主体", "value": 32, "unit": "个"}, {"name": "服务类型", "value": 6, "unit": "类"}, {"name": "覆盖乡镇", "value": 55.0, "unit": "个次"}]}]};function fmt(v){if(typeof v==='string')return v;if(Math.abs(v)>=10000)return (v/10000).toFixed(1)+'万';return Number(v||0).toLocaleString('zh-CN')}document.getElementById('kpis').innerHTML=DATA.kpis.map(x=>`<div class="metric"><label>${x.label}</label><strong>${fmt(x.value)}<small>${x.unit}</small></strong></div>`).join('');document.getElementById('sections').innerHTML=DATA.sections.map(s=>`<section class="card chain-section"><div class="section-head"><b>${s.title}</b><span>${s.count}条</span></div><div class="desc">${s.desc}</div><div class="mini">${s.metrics.slice(0,3).map(m=>`<div>${m.name}<strong>${fmt(m.value)}${m.unit}</strong></div>`).join('')}</div><div class="badges">${s.types.slice(0,4).map(t=>`<span class="badge">${t.name} ${t.value}</span>`).join('')}</div></section>`).join('')
|
|
</script></body></html> |