vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update pay ui

Browse Source
This commit is contained in:
zzlgreat
2025-12-05 13:29:18 +08:00
parent 20994cfb13
commit 48d9c76c5e
1008 changed files with 417880 additions and 486974 deletions
Download Patch File Download Diff File Expand all files Collapse all files

599
public/htmls/固态电池产业链.html Normal file
View File

@@ -0,0 +1,599 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="night">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固态电池产业链深度研究报告</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.11.1/dist/full.min.css" rel="stylesheet" type="text/css" />
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--glow-color-1: rgba(0, 191, 255, 0.3); /* DeepSkyBlue */
--glow-color-2: rgba(138, 43, 226, 0.3); /* BlueViolet */
--glow-color-3: rgba(255, 20, 147, 0.2); /* DeepPink */
}
body {
font-family: 'Inter', sans-serif;
background-color: #020011;
background-image:
radial-gradient(at 20% 20%, hsla(212, 100%, 50%, 0.1) 0px, transparent 50%),
radial-gradient(at 80% 20%, hsla(289, 100%, 50%, 0.1) 0px, transparent 50%),
radial-gradient(at 50% 80%, hsla(330, 100%, 50%, 0.1) 0px, transparent 50%);
color: #e0e0e0;
overflow-x: hidden;
}
.orbitron { font-family: 'Orbitron', sans-serif; }
.glass-card {
background: rgba(10, 10, 25, 0.4);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
transition: all 0.3s ease;
}
.glass-card:hover {
box-shadow: 0 0 20px rgba(0, 191, 255, 0.2), 0 0 40px rgba(138, 43, 226, 0.1);
border-color: rgba(0, 191, 255, 0.3);
}
.bento-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: auto;
}
.bento-item {
grid-column: span 12;
}
@media (min-width: 1024px) {
.bento-item-col-6 { grid-column: span 6; }
.bento-item-col-8 { grid-column: span 8; }
.bento-item-col-4 { grid-column: span 4; }
.bento-item-col-12 { grid-column: span 12; }
}
.glow-text {
text-shadow: 0 0 8px var(--glow-color-1), 0 0 16px var(--glow-color-1);
}
.glow-subtitle {
text-shadow: 0 0 5px var(--glow-color-2);
}
.timeline-item::before {
content: '';
position: absolute;
left: -2px;
top: 20px;
bottom: -20px;
width: 4px;
background: linear-gradient(to bottom, transparent, #4f46e5, #9333ea, transparent);
border-radius: 2px;
}
.timeline-point {
position: absolute;
left: -12px;
top: 20px;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #020011;
border: 4px solid #4f46e5;
box-shadow: 0 0 15px #4f46e5;
z-index: 10;
}
.tab-active {
color: #67e8f9 !important;
border-color: #67e8f9 !important;
text-shadow: 0 0 5px #67e8f9;
}
</style>
</head>
<body class="p-4 sm:p-6 md:p-8">
<div class="fixed top-0 left-0 w-full h-full -z-10 overflow-hidden">
<div class="absolute top-[-20%] left-[-20%] w-[60vw] h-[60vw] rounded-full bg-[var(--glow-color-1)] filter blur-[150px]"></div>
<div class="absolute bottom-[-20%] right-[-20%] w-[50vw] h-[50vw] rounded-full bg-[var(--glow-color-2)] filter blur-[150px]"></div>
</div>
<div class="max-w-screen-2xl mx-auto space-y-8">
<!-- Header -->
<header class="text-center py-8">
<h1 class="orbitron text-4xl md:text-6xl font-bold glow-text bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 via-purple-400 to-pink-400">
固态电池产业链深度研究
</h1>
<p class="mt-4 text-lg text-slate-300">产业化拐点已至，下一代电池技术革命</p>
<div class="mt-2 text-xs text-slate-500">
北京价值前沿科技有限公司 AI投研agent：“价小前投研” 呈现 | 本报告为AI合成数据，投资需谨慎
</div>
</header>
<!-- Main Content -->
<main class="bento-grid">
<!-- Insight Core View -->
<section class="bento-item bento-item-col-12 glass-card p-6 md:p-8">
<div class="flex items-center gap-4 mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cyan-300 glow-text" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /></svg>
<h2 class="orbitron text-2xl md:text-3xl font-bold text-slate-100 glow-subtitle">核心观点与市场洞察 (Insight)</h2>
</div>
<div class="space-y-6 text-slate-300 leading-relaxed">
<p class="text-lg bg-slate-800/50 p-4 rounded-xl border border-slate-700">
<strong>核心观点摘要：</strong> 固态电池正处于从实验室研发到产业化应用的“0到1”关键拐点。其核心驱动力源于下游应用对电池<strong>能量密度</strong>和<strong>安全性</strong>的终极追求，这已超越成本成为主机厂的首要诉求。尽管当前市场热度高涨，但产业正经历从<strong>半固态（氧化物路线为主）</strong>向<strong>全固态（硫化物路线为终极方向）</strong>的过渡，真正的商业化爆发仍面临<strong>成本</strong>和<strong>工艺</strong>两大核心瓶颈，产业链投资机会呈现显著的阶段性特征，<strong>设备环节</strong>确定性最高，率先受益。
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-slate-900/30 p-4 rounded-lg border border-slate-700">
<h4 class="font-bold text-cyan-300 mb-2">核心驱动力</h4>
<ul class="list-disc list-inside space-y-1 text-sm">
<li><strong>性能驱动取代成本驱动:</strong> 主机厂对超1000公里续航的刚性需求，突破液态电池性能天花板。</li>
<li><strong>新兴场景刚需:</strong> 低空经济(eVTOL)、人形机器人等产业落地的最大技术壁垒，为早期高成本买单。</li>
<li><strong>国家级战略推动:</strong> 工信部60亿专项基金及明确的量产降本时间表，注入产业化确定性。</li>
</ul>
</div>
<div class="bg-slate-900/30 p-4 rounded-lg border border-slate-700">
<h4 class="font-bold text-purple-300 mb-2">市场预期差分析</h4>
<ul class="list-disc list-inside space-y-1 text-sm">
<li><strong>“半固态”与“全固态”概念混淆:</strong> 市场普遍将已量产的氧化物路线半固态，等同于终极的硫化物路线全固态。</li>
<li><strong>成本与时间预期差:</strong> 硫化锂千万/吨级的成本与国家项目几十万/吨的目标存在巨大鸿沟，大规模普及时间点可能晚于预期。</li>
<li><strong>技术路线不确定性:</strong> 硫化物路线存在稳定性差、高压成型、核心专利被日韩掌握等重大工程化难题，市场可能低估其风险。</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Timeline & Key Catalysts -->
<section class="bento-item bento-item-col-12 lg:bento-item-col-8 glass-card p-6 md:p-8">
<div class="flex items-center gap-4 mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cyan-300 glow-text" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
<h2 class="orbitron text-2xl md:text-3xl font-bold text-slate-100 glow-subtitle">产业化进程与关键催化剂</h2>
</div>
<div id="timeline-chart" class="w-full h-[400px]"></div>
</section>
<!-- Investment Insights -->
<section class="bento-item bento-item-col-12 lg:bento-item-col-4 glass-card p-6 md:p-8 flex flex-col">
<div class="flex items-center gap-4 mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cyan-300 glow-text" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>
<h2 class="orbitron text-2xl font-bold text-slate-100 glow-subtitle">投资启示</h2>
</div>
<div class="space-y-4 flex-grow flex flex-col justify-around text-slate-300">
<div class="p-4 rounded-lg bg-slate-900/50 border border-cyan-500/30">
<h4 class="font-bold text-cyan-300">设备环节 (确定性最高)</h4>
<p class="text-sm mt-1">单GWh投资额翻倍至4-6亿，干法电极、叠片、等静压等设备是明确增量市场，业绩兑现最早。</p>
</div>
<div class="p-4 rounded-lg bg-slate-900/50 border border-purple-500/30">
<h4 class="font-bold text-purple-300">核心材料 (弹性最大)</h4>
<p class="text-sm mt-1">关注具备技术壁垒和成本优势的硫化锂、硅碳负极、单壁碳纳米管，技术突破将带来爆发式增长。</p>
</div>
<div class="p-4 rounded-lg bg-slate-900/50 border border-pink-500/30">
<h4 class="font-bold text-pink-300">平台型公司 (风险平滑)</h4>
<p class="text-sm mt-1">如赣锋锂业、道氏技术等全产业链布局者，能平滑单一技术路线风险，享受产业协同优势。</p>
</div>
</div>
</section>
<!-- Industry Chain Map -->
<section class="bento-item bento-item-col-12 glass-card p-6 md:p-8">
<div class="flex items-center gap-4 mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cyan-300 glow-text" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
<h2 class="orbitron text-2xl md:text-3xl font-bold text-slate-100 glow-subtitle">产业链全景图谱</h2>
</div>
<div id="industry-chain-treemap" class="w-full h-[500px]"></div>
</section>
<!-- Data Sources: News, Roadshow, Reports -->
<section class="bento-item bento-item-col-12 glass-card p-6 md:p-8" x-data="{ tab: 'news' }">
<div class="flex items-center gap-4 mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cyan-300 glow-text" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8-4v0c0 2.21-3.582 4-8 4s-8-1.79-8-4v0z" /></svg>
<h2 class="orbitron text-2xl md:text-3xl font-bold text-slate-100 glow-subtitle">核心数据源摘要</h2>
</div>
<div class="tabs tabs-boxed bg-slate-900/50 justify-center">
<a class="tab" :class="{ 'tab-active': tab === 'news' }" @click.prevent="tab = 'news'">新闻数据</a>
<a class="tab" :class="{ 'tab-active': tab === 'roadshow' }" @click.prevent="tab = 'roadshow'">路演纪要</a>
<a class="tab" :class="{ 'tab-active': tab === 'report' }" @click.prevent="tab = 'report'">研报精粹</a>
</div>
<div class="mt-6 space-y-2 text-slate-300 text-sm">
<div x-show="tab === 'news'">
<div class="collapse collapse-plus bg-slate-800/50 border border-slate-700">
<input type="radio" name="news-accordion" checked="checked" />
<div class="collapse-title text-base font-medium text-cyan-300">产业整体趋势、节奏与时间线</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2">
<li><strong>发展阶段:</strong> 产业链雏形初现，进入中试关键期。当前均为半固态，下半年是产业化开启之年。</li>
<li><strong>驱动力:</strong> 国家多部门重点支持，主机厂诉求从安全转向能量密度（超1000公里续航）。</li>
<li><strong>关键节点:</strong> 25年底工信部项目中期审查 (硫化物抽检)；26年要求建500吨级硫化物产线；27年要求硫化物成本降至250万/吨。</li>
<li><strong>量产预期:</strong> 2026年广汽昊铂装车；2027年小批量量产；2035年全固态大规模量产。</li>
</ul>
</div>
</div>
<div class="collapse collapse-plus bg-slate-800/50 border border-slate-700">
<input type="radio" name="news-accordion" />
<div class="collapse-title text-base font-medium text-cyan-300">技术路线与工艺</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2">
<li><strong>主流路线:</strong> 2028年前氧化物为主流（半固态过渡）；2030年后看好硫化物（全固态主流）。宁德时代主攻硫化物。</li>
<li><strong>关键工艺:</strong> 必须用干电极（目前湿法为主，干法半年后落地）；高密度电池需预锂化技术。</li>
<li><strong>材料环节 (硫化物/硫化锂):</strong> 已具备吨级量产条件。成本是关键，硫化物现千万级/吨，目标28-29年降至50万/吨；硫化锂现数百万/吨，目标后续20万/吨。</li>
<li><strong>设备环节:</strong> 投资价值量大增，半固态提升30%，全固态翻倍（约4-6亿/GWh）。增量设备包括涂布机、辊压机、叠片机、等静压设备等。</li>
</ul>
</div>
</div>
</div>
<div x-show="tab === 'roadshow'">
<div class="collapse collapse-plus bg-slate-800/50 border border-slate-700">
<input type="radio" name="roadshow-accordion" checked="checked" />
<div class="collapse-title text-base font-medium text-purple-300">固态电解质核心信息</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2">
<li><strong>硫化物路线:</strong> 离子电导率最高，被视为主流方向。但空气/水稳定性差（易产生H₂S剧毒气体），与锂金属负极反应剧烈，专利壁垒高（日韩主导）。</li>
<li><strong>氧化物路线:</strong> 半固态主路线，技术较成熟，成本较低（LLZO 25-30万/吨）。但电导率低，界面接触差。</li>
<li><strong>成本现状:</strong> 硫化锂（Li₂S）价格是核心瓶颈，高达300-1000万/吨。初期电池成本可能高达3-4元/Wh。降本路径依赖规模化和新材料体系（如Li₃PS₄Cl）。</li>
</ul>
</div>
</div>
<div class="collapse collapse-plus bg-slate-800/50 border border-slate-700">
<input type="radio" name="roadshow-accordion" />
<div class="collapse-title text-base font-medium text-purple-300">正负极与工艺设备</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2">
<li><strong>正极材料:</strong> 变化较小，沿用高镍/超高镍三元材料。长期方向为富锂锰基。</li>
<li><strong>负极材料:</strong> 半固态主要选择硅基/硅碳负极。全固态理想方案为锂金属负极，但锂枝晶问题仍未完全解决。</li>
<li><strong>核心工艺:</strong> 必须用干电极技术。硫化物路线需高压成型（依赖等静压设备），限制连续化生产。</li>
<li><strong>设备投资:</strong> 半固态约2.2-2.8亿/GWh，全固态初期可能达4-6亿/GWh。等静压设备、干法设备是关键增量。</li>
</ul>
</div>
</div>
</div>
<div x-show="tab === 'report'">
<div class="collapse collapse-plus bg-slate-800/50 border border-slate-700">
<input type="radio" name="report-accordion" checked="checked" />
<div class="collapse-title text-base font-medium text-pink-300">产业化进程与标准</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2">
<li><strong>政策支持:</strong> 工信部与财政部牵头提供60亿元政府基础研发资金。</li>
<li><strong>标准确立:</strong> 2025年5月发布《全固态电池判定方法》团体标准，首次明确全固态电池定义。</li>
<li><strong>产业化时间线:</strong> 半固态已进入商业化量产（孚能科技GWh级出货）。全固态预计2027年左右实现400Wh/kg量产目标。</li>
</ul>
</div>
</div>
<div class="collapse collapse-plus bg-slate-800/50 border border-slate-700">
<input type="radio" name="report-accordion" />
<div class="collapse-title text-base font-medium text-pink-300">核心材料与设备上市公司布局</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2">
<li><strong>硫化物电解质:</strong> 天赐材料(中试)、恩捷股份(百吨级中试线)、厦钨新能(吨级生产)等积极布局。</li>
<li><strong>负极材料:</strong> 硅碳负极为中短期主要增量（璞泰来、贝特瑞）。锂金属负极为终极选择（赣锋锂业全球最大产能）。</li>
<li><strong>导电剂:</strong> 固态电池中碳纳米管用量显著高于液态，利好天奈科技、道氏技术。</li>
<li><strong>生产设备:</strong> 需求大增，利元亨（硫化物整线）、先导智能（整线设备）、海目星（4亿订单）、纳科诺尔（干法设备）等已获订单。</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data -->
<section class="bento-item bento-item-col-12 glass-card p-6 md:p-8">
<div class="flex items-center gap-4 mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cyan-300 glow-text" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
<h2 class="orbitron text-2xl md:text-3xl font-bold text-slate-100 glow-subtitle">核心标的梳理</h2>
</div>
<div id="stock-tables-container" class="space-y-8">
<!-- Tables will be injected here by JavaScript -->
</div>
</section>
</main>
</div>
<script>
// ECharts for Timeline
const timelineChart = echarts.init(document.getElementById('timeline-chart'));
const timelineOption = {
tooltip: {
trigger: 'axis',
formatter: function (params) {
let res = `<strong class="text-cyan-300">${params[0].name}</strong><br/>`;
res += `<span class="text-slate-300">${params[0].data.event}</span>`;
return res;
},
backgroundColor: 'rgba(10, 10, 25, 0.8)',
borderColor: '#4A5568',
textStyle: {
color: '#E2E8F0'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['2023', '2024', '2025', '2026', '2027', '2030+'],
axisLine: { lineStyle: { color: '#4A5568' } },
axisLabel: { color: '#A0AEC0', fontFamily: 'Orbitron' },
},
yAxis: {
type: 'value',
name: '产业化阶段',
nameTextStyle: { color: '#A0AEC0' },
axisLine: { show: true, lineStyle: { color: '#4A5568' } },
splitLine: { lineStyle: { color: '#2D3748' } },
axisLabel: {
color: '#A0AEC0',
formatter: function(value) {
const labels = ['探索期', '元年', '加速期', '中试期', '验证期', '量产期', '普及期'];
return labels[value] || '';
}
}
},
series: [{
name: '产业进程',
type: 'line',
step: 'start',
data: [
{ value: 1, event: '半固态电池装车元年 (蔚来搭载卫蓝150kWh电池包)' },
{ value: 2, event: '产业化加速年 (智己L6搭载清陶半固态电池)' },
{ value: 3, event: '中试线落地与技术定型关键期 (工信部中期审查)' },
{ value: 4, event: '全固态小批量装车验证年 (广汽昊铂计划装车)' },
{ value: 5, event: '量产元年预期 (宁德/比亚迪/丰田等计划小批量生产)' },
{ value: 6, event: '规模化与成本下降阶段 (市场规模有望破100GWh)' }
],
smooth: false,
symbol: 'circle',
symbolSize: 10,
lineStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#67e8f9' },
{ offset: 1, color: '#d946ef' }
]),
width: 3,
shadowColor: 'rgba(0, 191, 255, 0.5)',
shadowBlur: 10
},
itemStyle: {
color: '#020011',
borderColor: '#67e8f9',
borderWidth: 2,
},
emphasis: {
itemStyle: {
borderColor: '#f472b6',
borderWidth: 3,
}
}
}]
};
timelineChart.setOption(timelineOption);
// ECharts for Industry Chain Treemap
const treemapChart = echarts.init(document.getElementById('industry-chain-treemap'));
const treemapData = [
{
name: '上游：原材料',
value: 25,
children: [
{ name: '电解质原料 (硫/锆/镧/LiTFSI)', value: 10 },
{ name: '正极原料 (高镍/富锂锰基)', value: 8 },
{ name: '负极原料 (硅粉/多孔碳/金属锂)', value: 7 },
]
},
{
name: '中游：核心材料、辅材与设备',
value: 45,
children: [
{ name: '固态电解质', value: 8 },
{ name: '正极材料', value: 5 },
{ name: '负极材料 (硅碳/锂金属)', value: 7 },
{ name: '关键辅材 (骨架膜/导电剂/铝塑膜/集流体)', value: 10 },
{ name: '核心设备 (干法/叠片/等静压/预锂化)', value: 15, itemStyle: { color: '#f43f5e' } }, // Highlight
]
},
{
name: '下游：电池制造与应用',
value: 30,
children: [
{ name: '电池厂商 (CATL/清陶/卫蓝等)', value: 15 },
{ name: '终端应用 (新能源车/低空经济/机器人/储能)', value: 15 },
]
}
];
const treemapOption = {
tooltip: {
formatter: '{b}: {c}%',
backgroundColor: 'rgba(10, 10, 25, 0.8)',
borderColor: '#4A5568',
textStyle: { color: '#E2E8F0' }
},
series: [{
type: 'treemap',
data: treemapData,
leafDepth: 1,
levels: [
{
itemStyle: {
borderColor: '#020011',
borderWidth: 4,
gapWidth: 4,
}
},
{
colorSaturation: [0.3, 0.6],
itemStyle: {
borderColorSaturation: 0.7,
gapWidth: 2,
borderWidth: 2
}
},
{
colorSaturation: [0.3, 0.5],
itemStyle: {
borderColorSaturation: 0.6,
gapWidth: 1
}
},
],
breadcrumb: { show: false },
label: {
show: true,
formatter: '{b}',
color: '#fff',
fontSize: 14,
fontFamily: 'Inter',
textShadowColor: 'rgba(0, 0, 0, 0.7)',
textShadowBlur: 3
},
itemStyle: {
color: '#1e293b', // Default color
},
emphasis: {
label: {
color: '#000'
},
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
},
}],
color: ['#0e7490', '#5b21b6', '#be185d', '#0f766e', '#a21caf', '#1d4ed8']
};
treemapChart.setOption(treemapOption);
window.addEventListener('resize', function() {
timelineChart.resize();
treemapChart.resize();
});
// Stock Data Processing and Rendering
const stockDataRaw = {{股票数据}};
function processStockData(rawData) {
const stockMap = new Map();
Object.values(rawData).forEach(source => {
if (source && typeof source === 'object' && !Array.isArray(source)) {
Object.values(source).forEach(imageList => {
if(Array.isArray(imageList)) {
imageList.forEach(stock => {
if (!stock.stock || !stock.reason) return;
const key = stock.stock_code || stock.stock;
if (!stockMap.has(key)) {
stockMap.set(key, {
name: stock.stock,
code: stock.stock_code,
reasons: new Set(),
tags: new Set(),
});
}
const entry = stockMap.get(key);
entry.reasons.add(stock.reason.trim());
let tagsToAdd = [];
if (typeof stock.其他标签 === 'string') {
tagsToAdd = stock.其他标签.split(/[,，/ ]+/).map(t => t.trim()).filter(Boolean);
} else if (Array.isArray(stock.其他标签)) {
tagsToAdd = stock.其他标签.map(t => t.trim()).filter(Boolean);
} else if (typeof stock.其他标签 === 'object' && stock.其他标签 !== null) {
tagsToAdd = Object.values(stock.其他标签).map(t => String(t).trim()).filter(Boolean);
}
tagsToAdd.forEach(tag => entry.tags.add(tag));
});
}
});
}
});
const categories = {
'设备': { keywords: ['设备', '整线', '产线', '激光', '超声', '模具', '零部件', '搅拌', '辊压', '涂覆', '检测'], stocks: [] },
'电解质': { keywords: ['电解质', '硫化', '硫铁', '硫基', 'Li₂S', '氧化物', '锆', '镧', '锗', '聚合物', '卤化物', '添加剂', 'LiTFSI', 'LiFSI'], stocks: [] },
'负极': { keywords: ['负极', '硅碳', '硅氧', '硅基', '金属锂', '多孔碳', '包覆'], stocks: [] },
'正极': { keywords: ['正极', '前驱体', '锰基', '锰矿', '高镍'], stocks: [] },
'隔膜与辅材': { keywords: ['隔膜', '骨架膜', '陶瓷', '铝塑膜', '集流体', '铜箔', '导电剂', 'CNT', '碳纳米管', '粘结剂', '封装'], stocks: [] },
'电池及生态': { keywords: ['电池', '清陶', '卫蓝', '高能时代', '太蓝新能源', '车企', '广汽', '上汽', '比亚迪'], stocks: [] },
'其他': { keywords: [], stocks: [] }
};
stockMap.forEach(stock => {
const combinedInfo = `${stock.name} ${Array.from(stock.tags).join(' ')} ${Array.from(stock.reasons).join(' ')}`;
let assigned = false;
for (const cat in categories) {
if (cat !== '其他') {
for (const keyword of categories[cat].keywords) {
if (combinedInfo.includes(keyword)) {
categories[cat].stocks.push(stock);
assigned = true;
break;
}
}
}
if(assigned) break;
}
if (!assigned) {
categories['其他'].stocks.push(stock);
}
});
return categories;
}
function renderStockTables(categorizedData) {
const container = document.getElementById('stock-tables-container');
container.innerHTML = '';
for (const categoryName in categorizedData) {
const category = categorizedData[categoryName];
if (category.stocks.length === 0) continue;
const sectionHtml = `
<div class="overflow-x-auto">
<h3 class="orbitron text-xl font-semibold mb-4 text-cyan-200 glow-subtitle border-l-4 border-cyan-400 pl-4">${categoryName}</h3>
<table class="table table-sm table-zebra-zebra bg-transparent w-full">
<thead class="text-slate-300">
<tr>
<th class="bg-slate-800/50">股票名称</th>
<th class="bg-slate-800/50">核心逻辑</th>
<th class="bg-slate-800/50">产业链标签</th>
</tr>
</thead>
<tbody class="text-slate-400">
${category.stocks.map(stock => `
<tr>
<td class="font-semibold text-slate-200 whitespace-nowrap">
${stock.name}
${stock.code ? `<a href="https://valuefrontier.cn/company?scode=${stock.code}" target="_blank" class="text-xs text-slate-500 ml-2 hover:text-cyan-400">(${stock.code})</a>` : ''}
</td>
<td><ul class="list-disc list-inside">${Array.from(stock.reasons).map(r => `<li>${r}</li>`).join('')}</ul></td>
<td>
<div class="flex flex-wrap gap-2">
${Array.from(stock.tags).map(t => `<span class="badge badge-outline badge-info text-xs">${t}</span>`).join('')}
</div>
</td>
</tr>
`).join('')}
</tbody>
</table>
</div>
`;
container.innerHTML += sectionHtml;
}
}
const categorizedStocks = processStockData(stockDataRaw);
renderStockTables(categorizedStocks);
</script>
</body>
</html>