Files
vf_react/public/htmls/AI芯片产业动态.html
2025-11-05 10:56:56 +08:00

610 lines
31 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>AI芯片产业动态报告</title>
<link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #e2e8f0;
}
.card {
background: rgba(30, 41, 59, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(100, 116, 139, 0.3);
}
.gradient-text {
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.timeline-dot {
width: 12px;
height: 12px;
background-color: #3b82f6;
border-radius: 50%;
position: absolute;
left: -6px;
top: 6px;
}
.timeline-line {
position: absolute;
left: 0;
top: 12px;
bottom: 0;
width: 1px;
background-color: #475569;
}
.table-container {
overflow-x: auto;
}
.table-container::-webkit-scrollbar {
height: 8px;
}
.table-container::-webkit-scrollbar-track {
background: #1e293b;
}
.table-container::-webkit-scrollbar-thumb {
background: #475569;
border-radius: 4px;
}
.table-container::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.stock-table {
border-collapse: separate;
border-spacing: 0;
}
.stock-table th {
background: rgba(30, 41, 59, 0.8);
position: sticky;
top: 0;
z-index: 10;
}
.stock-table tr:hover {
background-color: rgba(51, 65, 85, 0.3);
}
</style>
</head>
<body class="min-h-screen p-4 md:p-8">
<div class="max-w-7xl mx-auto">
<!-- 标题部分 -->
<div class="text-center mb-10">
<h1 class="text-3xl md:text-4xl font-bold mb-4 gradient-text">AI芯片产业动态报告</h1>
<p class="text-slate-400 max-w-3xl mx-auto">政策倒逼+技术突破双轮驱动下国产AI芯片的渗透率拐点已至</p>
</div>
<!-- 概念事件 -->
<div class="card rounded-xl p-6 mb-8">
<h2 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-calendar-alt mr-2 text-blue-500"></i>
概念事件
</h2>
<div class="mb-6">
<h3 class="text-lg font-semibold mb-3 text-blue-400">背景与催化事件</h3>
<ul class="space-y-3">
<li class="flex items-start">
<span class="text-blue-500 mr-2"></span>
<span><strong class="text-purple-400">2024年11月</strong>美国议员问询五家设备巨头AMAT、LAM、KLA、ASML、TEL加剧对华半导体设备出口限制倒逼国产替代加速。</span>
</li>
<li class="flex items-start">
<span class="text-blue-500 mr-2"></span>
<span><strong class="text-purple-400">2025年3月</strong>:苏州、深圳、河南等地密集出台政策,<strong class="text-green-400">明确2025-2027年AI芯片国产化目标</strong>(如苏州提出"35万标准机架、120EFLOPS算力")。</span>
</li>
<li class="flex items-start">
<span class="text-blue-500 mr-2"></span>
<span><strong class="text-purple-400">2025年5月</strong>美国取消拜登政府AI芯片三级出口管制框架但AMD CEO苏姿丰称"中国仍是巨大机遇",政策博弈持续。</span>
</li>
<li class="flex items-start">
<span class="text-blue-500 mr-2"></span>
<span><strong class="text-purple-400">技术突破</strong>DeepSeek-V3/R1模型通过<strong class="text-green-400">MoE架构+FP8混合精度</strong>将训练成本降至<strong class="text-yellow-400">557万美元</strong>仅为GPT-4的5%),推动国产芯片适配需求。</span>
</li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-3 text-blue-400">时间轴</h3>
<div class="relative pl-6">
<div class="timeline-line"></div>
<div class="space-y-6">
<div class="relative">
<div class="timeline-dot"></div>
<div class="ml-4">
<p class="font-semibold text-purple-400">2024年10月</p>
<p class="text-slate-300">美国限制H20芯片出口国产替代窗口打开</p>
</div>
</div>
<div class="relative">
<div class="timeline-dot"></div>
<div class="ml-4">
<p class="font-semibold text-purple-400">2024年12月</p>
<p class="text-slate-300">日本推出650亿美元芯片/AI补贴计划全球竞争白热化</p>
</div>
</div>
<div class="relative">
<div class="timeline-dot pulse"></div>
<div class="ml-4">
<p class="font-semibold text-purple-400">2025年2月</p>
<p class="text-slate-300">中昊芯英7nm推理芯片量产良率98%绑定DeepSeek生态</p>
</div>
</div>
<div class="relative">
<div class="timeline-dot pulse"></div>
<div class="ml-4">
<p class="font-semibold text-purple-400">2025年3月</p>
<p class="text-slate-300">苏州/深圳政策要求智算中心国产芯片占比超50%,推动并购整合</p>
</div>
</div>
<div class="relative">
<div class="timeline-dot"></div>
<div class="ml-4">
<p class="font-semibold text-purple-400">2025年5月</p>
<p class="text-slate-300">美国放松管制但保留审查AMD称"中国需求不可替代"</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 核心观点摘要 -->
<div class="card rounded-xl p-6 mb-8">
<h2 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-lightbulb mr-2 text-yellow-500"></i>
核心观点摘要
</h2>
<div class="space-y-4">
<div class="bg-gradient-to-r from-blue-900/30 to-purple-900/30 p-4 rounded-lg border border-blue-500/30">
<p class="text-lg font-semibold text-blue-400 mb-2">阶段判断</p>
<p class="text-slate-300">AI芯片产业处于<strong class="text-green-400">"政策倒逼+技术突破"双轮驱动的黄金窗口期</strong>,国产替代从"主题炒作"转向<strong class="text-yellow-400">订单兑现阶段</strong></p>
</div>
<div class="bg-gradient-to-r from-purple-900/30 to-pink-900/30 p-4 rounded-lg border border-purple-500/30">
<p class="text-lg font-semibold text-purple-400 mb-2">核心驱动力</p>
<p class="text-slate-300">美国出口管制持续收紧H20限制+设备禁运叠加国内大模型降本DeepSeek成本仅为GPT-4的5%<strong class="text-green-400">国产7nm以下推理芯片迎来渗透率拐点</strong></p>
</div>
</div>
</div>
<!-- 核心逻辑与市场认知分析 -->
<div class="card rounded-xl p-6 mb-8">
<h2 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-brain mr-2 text-purple-500"></i>
核心逻辑与市场认知分析
</h2>
<div class="mb-6">
<h3 class="text-lg font-semibold mb-3 text-purple-400">核心驱动力</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-slate-800/50 p-4 rounded-lg">
<div class="text-blue-500 text-2xl mb-2">
<i class="fas fa-gavel"></i>
</div>
<p class="font-semibold text-blue-400 mb-2">政策刚性</p>
<p class="text-sm text-slate-300">美国2025年新管制将<strong class="text-yellow-400">18个盟友外国家纳入限制范围</strong>直接卡死英伟达H20对华出口<strong class="text-green-400">2025年国产芯片替代空间达40%</strong>2024年仅30%)。</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg">
<div class="text-green-500 text-2xl mb-2">
<i class="fas fa-microchip"></i>
</div>
<p class="font-semibold text-green-400 mb-2">技术降本</p>
<p class="text-sm text-slate-300">DeepSeek通过<strong class="text-yellow-400">MoE+FP8</strong>将推理成本降至<strong class="text-green-400">0.013元/千tokens</strong>GPT-4的5%<strong class="text-green-400">推动中小客户转向国产芯片</strong>如中昊芯英7nm芯片成本仅为H20的1/3</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg">
<div class="text-purple-500 text-2xl mb-2">
<i class="fas fa-chart-line"></i>
</div>
<p class="font-semibold text-purple-400 mb-2">需求爆发</p>
<p class="text-sm text-slate-300">2025年中国AI服务器市场规模<strong class="text-yellow-400">259亿美元</strong>(同比+36%),其中<strong class="text-green-400">推理占比73%</strong>IDC数据国产推理芯片需求确定性最强。</p>
</div>
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold mb-3 text-purple-400">市场热度与情绪</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-slate-800/50 p-4 rounded-lg">
<p class="font-semibold text-blue-400 mb-2">研报密度</p>
<p class="text-slate-300">2025年Q1涉及AI芯片的研报<strong class="text-yellow-400">超50篇</strong>2024年同期仅12篇<strong class="text-green-400">寒武纪/海光信息被提及频次提升3倍</strong></p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg">
<p class="font-semibold text-blue-400 mb-2">情绪分歧</p>
<p class="text-slate-300">路演显示<strong class="text-yellow-400">渠道商认为H20仍可正常销售</strong>(与官方文件矛盾),反映市场对<strong class="text-green-400">政策执行力度存在预期差</strong></p>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-3 text-purple-400">预期差分析</h3>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-slate-700">
<th class="text-left py-3 px-4 text-blue-400">市场共识</th>
<th class="text-left py-3 px-4 text-green-400">被忽略的关键点</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 text-slate-300">"国产芯片性能落后"</td>
<td class="py-3 px-4 text-slate-300"><strong class="text-yellow-400">华为昇腾910C性能已达H100的80%</strong>FP16算力780TFLOPS<strong class="text-green-400">CloudMatrix 384超节点已商用</strong></td>
</tr>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 text-slate-300">"生态是最大短板"</td>
<td class="py-3 px-4 text-slate-300"><strong class="text-yellow-400">海光DTK平台兼容CUDA</strong>ROCm封装<strong class="text-green-400">迁移成本低于预期</strong>(百度已验证)</td>
</tr>
<tr>
<td class="py-3 px-4 text-slate-300">"7nm产能不足"</td>
<td class="py-3 px-4 text-slate-300"><strong class="text-yellow-400">中芯国际N+2工艺良率超90%</strong>华为昇腾910B量产验证<strong class="text-green-400">2025年产能规划翻倍</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 关键催化剂与未来发展路径 -->
<div class="card rounded-xl p-6 mb-8">
<h2 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-rocket mr-2 text-red-500"></i>
关键催化剂与未来发展路径
</h2>
<div class="mb-6">
<h3 class="text-lg font-semibold mb-3 text-red-400">近期催化剂3-6个月</h3>
<div class="space-y-4">
<div class="bg-slate-800/50 p-4 rounded-lg border-l-4 border-red-500">
<p class="font-semibold text-red-400 mb-2">1. 政策落地</p>
<p class="text-slate-300">2025年6月美国对华AI芯片<strong class="text-yellow-400">新一轮管制清单</strong>(可能纳入更多国产替代标的)。</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg border-l-4 border-orange-500">
<p class="font-semibold text-orange-400 mb-2">2. 订单验证</p>
<ul class="space-y-2 text-slate-300 ml-4">
<li><strong class="text-yellow-400">字节跳动追加32万张H20订单</strong>已交付15万张<strong class="text-green-400">若转向国产芯片将直接催化寒武纪/海光信息</strong></li>
<li><strong class="text-yellow-400">中国移动2025年AI服务器集采</strong>预计7月启动<strong class="text-green-400">国产芯片份额或从67%提升至80%</strong></li>
</ul>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg border-l-4 border-yellow-500">
<p class="font-semibold text-yellow-400 mb-2">3. 技术里程碑</p>
<p class="text-slate-300"><strong class="text-yellow-400">寒武纪思元590量产</strong>2025年Q2<strong class="text-green-400">性能对标A100且功耗降低30%</strong></p>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-3 text-green-400">长期路径2025-2027</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-slate-800/50 p-4 rounded-lg text-center">
<div class="text-3xl text-green-500 mb-2">2025</div>
<p class="text-slate-300">国产芯片在<strong class="text-yellow-400">推理场景</strong>渗透率突破50%当前30%</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg text-center">
<div class="text-3xl text-blue-500 mb-2">2026</div>
<p class="text-slate-300"><strong class="text-yellow-400">Chiplet+先进封装</strong>通富微电CoWoS量产解决7nm产能瓶颈</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg text-center">
<div class="text-3xl text-purple-500 mb-2">2027</div>
<p class="text-slate-300"><strong class="text-yellow-400">端侧AI芯片</strong>AI眼镜/PC成为新增长极<strong class="text-green-400">市场规模超百亿元</strong></p>
</div>
</div>
</div>
</div>
<!-- 产业链与核心公司深度剖析 -->
<div class="card rounded-xl p-6 mb-8">
<h2 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-sitemap mr-2 text-indigo-500"></i>
产业链与核心公司深度剖析
</h2>
<div class="mb-6">
<h3 class="text-lg font-semibold mb-3 text-indigo-400">产业链图谱</h3>
<div class="bg-slate-800/50 p-6 rounded-lg">
<div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<div class="text-center">
<div class="bg-blue-900/50 text-blue-400 px-4 py-2 rounded-lg mb-2">上游</div>
<p class="text-sm text-slate-300">设备/材料<br>中芯国际N+2工艺、通富微电CoWoS</p>
</div>
<div class="text-2xl text-slate-500">
<i class="fas fa-arrow-right"></i>
</div>
<div class="text-center">
<div class="bg-purple-900/50 text-purple-400 px-4 py-2 rounded-lg mb-2">中游</div>
<p class="text-sm text-slate-300">芯片设计<br>(华为昇腾、寒武纪、海光信息)</p>
</div>
<div class="text-2xl text-slate-500">
<i class="fas fa-arrow-right"></i>
</div>
<div class="text-center">
<div class="bg-green-900/50 text-green-400 px-4 py-2 rounded-lg mb-2">下游</div>
<p class="text-sm text-slate-300">应用<br>(字节跳动、中国移动智算中心)</p>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-3 text-indigo-400">核心玩家对比</h3>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-slate-700">
<th class="text-left py-3 px-4 text-blue-400">公司</th>
<th class="text-left py-3 px-4 text-purple-400">技术路线</th>
<th class="text-left py-3 px-4 text-green-400">订单进展</th>
<th class="text-left py-3 px-4 text-red-400">风险点</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-semibold text-yellow-400">寒武纪</td>
<td class="py-3 px-4 text-slate-300">云端训练+推理</td>
<td class="py-3 px-4 text-slate-300"><strong class="text-green-400">思元590已适配DeepSeek</strong>20万片订单</td>
<td class="py-3 px-4 text-slate-300">客户集中度高字节占60%</td>
</tr>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-semibold text-yellow-400">海光信息</td>
<td class="py-3 px-4 text-slate-300">类CUDA生态</td>
<td class="py-3 px-4 text-slate-300"><strong class="text-green-400">百度万卡集群已部署深算三号</strong></td>
<td class="py-3 px-4 text-slate-300">依赖AMD授权</td>
</tr>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-semibold text-yellow-400">华为昇腾</td>
<td class="py-3 px-4 text-slate-300">全栈自研</td>
<td class="py-3 px-4 text-slate-300"><strong class="text-green-400">CloudMatrix 384超节点商用</strong></td>
<td class="py-3 px-4 text-slate-300">受美国制裁影响供应链</td>
</tr>
<tr>
<td class="py-3 px-4 font-semibold text-yellow-400">通富微电</td>
<td class="py-3 px-4 text-slate-300">CoWoS封装</td>
<td class="py-3 px-4 text-slate-300"><strong class="text-green-400">承接寒武纪/海光3D封装订单</strong></td>
<td class="py-3 px-4 text-slate-300">AMD主业占比过高50%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 潜在风险与挑战 -->
<div class="card rounded-xl p-6 mb-8">
<h2 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-exclamation-triangle mr-2 text-amber-500"></i>
潜在风险与挑战
</h2>
<div class="space-y-4">
<div class="bg-slate-800/50 p-4 rounded-lg border-l-4 border-amber-500">
<p class="font-semibold text-amber-400 mb-2">技术风险</p>
<p class="text-slate-300"><strong class="text-yellow-400">7nm以下工艺良率</strong>中芯国际N+2工艺虽量产<strong class="text-red-400">HBM3内存仍需外购</strong>SK海力士垄断</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg border-l-4 border-orange-500">
<p class="font-semibold text-orange-400 mb-2">商业化风险</p>
<p class="text-slate-300"><strong class="text-yellow-400">成本倒挂</strong>国产芯片单价虽低6万元 vs H20的20万元<strong class="text-red-400">集群部署TCO仍高30%</strong>(功耗/散热成本)。</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg border-l-4 border-red-500">
<p class="font-semibold text-red-400 mb-2">政策风险</p>
<p class="text-slate-300"><strong class="text-yellow-400">美国"长臂管辖"</strong>:若扩大至<strong class="text-red-400">EDA工具禁运</strong>Synopsys/Cadence国产设计工具<strong class="text-red-400">成熟度不足</strong>验证周期延长6-12个月</p>
</div>
</div>
</div>
<!-- 综合结论与投资启示 -->
<div class="card rounded-xl p-6 mb-8">
<h2 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-trophy mr-2 text-yellow-500"></i>
综合结论与投资启示
</h2>
<div class="mb-6">
<div class="bg-gradient-to-r from-yellow-900/30 to-amber-900/30 p-6 rounded-lg border border-yellow-500/30">
<p class="font-semibold text-yellow-400 mb-2">阶段判断</p>
<p class="text-lg text-slate-300">产业从<strong class="text-yellow-400">"政策主题"</strong>进入<strong class="text-green-400">"订单兑现"</strong>阶段,<strong class="text-purple-400">2025年Q2-Q3为关键验证期</strong></p>
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold mb-3 text-yellow-400">最具价值方向</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-slate-800/50 p-4 rounded-lg border-l-4 border-blue-500">
<p class="font-semibold text-blue-400 mb-2">推理芯片寒武纪思元590</p>
<p class="text-slate-300"><strong class="text-green-400">需求确定性最强</strong>2025年推理占比73%</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg border-l-4 border-purple-500">
<p class="font-semibold text-purple-400 mb-2">先进封装(通富微电)</p>
<p class="text-slate-300"><strong class="text-green-400">技术壁垒高+国产替代唯一性</strong>CoWoS产能缺口50%</p>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-3 text-yellow-400">跟踪指标</h3>
<div class="space-y-3">
<div class="flex items-center">
<div class="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
<p class="text-slate-300"><strong class="text-yellow-400">字节跳动国产芯片采购量</strong>当前15万张 vs 目标32万张</p>
</div>
<div class="flex items-center">
<div class="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
<p class="text-slate-300"><strong class="text-yellow-400">中国移动集采国产份额</strong>2025年7月招标</p>
</div>
</div>
</div>
<div class="mt-6 p-4 bg-gradient-to-r from-blue-900/30 to-purple-900/30 rounded-lg border border-blue-500/30">
<p class="text-center text-lg font-semibold gradient-text">"政策卡脖子+技术降本"双轮驱动下国产AI芯片的渗透率拐点已至但需紧盯订单落地与工艺良率两大核心变量。</p>
</div>
</div>
<!-- 关联股票数据 -->
<div class="card rounded-xl p-6">
<h2 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-chart-line mr-2 text-green-500"></i>
关联股票数据
</h2>
<div id="stockData" class="space-y-8">
<!-- 股票数据将通过JavaScript动态生成 -->
</div>
</div>
</div>
<script>
// 股票数据
const stockData = [
{
'AI算力芯片240610': [
{'stock': '景嘉微', '行业': 'GPU', '项目': '国产GPU龙头', 'reason': '自主研发GPU芯片国产GPU领域领先企业'},
{'stock': '寒武纪', '行业': 'GPU', '项目': '领先AI芯片设计公司', 'reason': '专注于AI芯片设计GPU领域技术领先'},
{'stock': '海光信息', '行业': 'GPU', '项目': '国产CPU+GPU龙头', 'reason': '自主研发CPU和GPU芯片国产化核心企业'},
{'stock': '龙芯中科', '行业': 'GPU', '项目': '自主研发GPU', 'reason': '自主研发GPU技术国产芯片重要参与者'},
{'stock': '紫光国微', '行业': 'FPGA', '项目': '已突破FPGA高制程技术', 'reason': '在FPGA高制程技术领域取得突破性进展'},
{'stock': '复旦微电', '行业': 'FPGA', '项目': '国产FPGA头部厂商', 'reason': '国内FPGA芯片研发和生产的头部企业'},
{'stock': '安路科技', '行业': 'FPGA', '项目': '国内民用FPGA', 'reason': '专注于民用FPGA芯片的研发和应用'},
{'stock': '寒武纪', '行业': 'ASIC', '项目': '思元芯片', 'reason': 'ASIC芯片领域代表产品为思元系列芯片'},
{'stock': '澜起科技', '行业': 'ASIC', '项目': '计算类芯片集成', 'reason': '专注于计算类芯片集成技术ASIC领域重要企业'},
{'stock': '紫光股份', '行业': 'ASIC', '项目': '自研芯片', 'reason': '自主研发ASIC芯片推动国产化替代'},
{'stock': '华为海思', '行业': 'ASIC', '项目': '自研芯片', 'reason': '华为旗下芯片设计公司自主研发ASIC芯片'}
]
},
{
'半导体产业链240610': [
{'stock': '立昂微', '行业': '半导体材料', '项目': '硅片', '分类': '上游', 'reason': '半导体硅片制造'},
{'stock': '沪硅产业', '行业': '半导体材料', '项目': '硅片', '分类': '上游', 'reason': '半导体硅片生产'},
{'stock': 'TCL中环', '行业': '半导体材料', '项目': '硅片', '分类': '上游', 'reason': '半导体硅片制造'},
{'stock': '晶盛机电', '行业': '半导体设备', '项目': '单晶炉', '分类': '上游', 'reason': '半导体单晶炉设备制造'},
{'stock': '北方华创', '行业': '半导体设备', '项目': '清洗设备/氧化炉/PVD/刻蚀设备', '分类': '上游', 'reason': '半导体设备全产业链覆盖'},
{'stock': '中芯国际', '行业': '芯片设计制造', '项目': '晶圆制造', '分类': '中游', 'reason': '国内领先晶圆代工厂'},
{'stock': '韦尔股份', '行业': '芯片设计', '项目': '图像传感器', '分类': '中游', 'reason': 'CIS芯片设计龙头'},
{'stock': '华为', '行业': '终端应用', '项目': '消费电子', '分类': '下游', 'reason': '智能手机/5G设备制造商'}
]
}
];
// 字段映射表,用于显示中文标题
const fieldMappings = {
'stock': '股票名称',
'行业': '行业',
'项目': '项目',
'reason': '投资逻辑',
'分类': '产业链位置'
};
// 渲染股票数据
function renderStockData() {
const container = document.getElementById('stockData');
container.innerHTML = ''; // 清空现有内容
try {
stockData.forEach((category, categoryIndex) => {
const categoryName = Object.keys(category)[0];
const stocks = category[categoryName];
// 创建类别容器
const categoryDiv = document.createElement('div');
categoryDiv.className = 'mb-8';
// 创建类别标题
const categoryTitle = document.createElement('h3');
categoryTitle.className = 'text-lg font-semibold mb-4 text-blue-400 flex items-center';
categoryTitle.innerHTML = `<i class="fas fa-table mr-2"></i>${categoryName}`;
categoryDiv.appendChild(categoryTitle);
// 创建表格容器
const tableContainer = document.createElement('div');
tableContainer.className = 'table-container bg-slate-800/30 rounded-lg p-1';
// 创建表格
const table = document.createElement('table');
table.className = 'stock-table w-full text-sm';
// 获取所有字段除了stock
const allFields = ['stock']; // 先添加股票名称
const otherFields = new Set();
stocks.forEach(stock => {
Object.keys(stock).forEach(key => {
if (key !== 'stock') otherFields.add(key);
});
});
allFields.push(...Array.from(otherFields));
// 创建表头
const thead = document.createElement('thead');
const headerRow = document.createElement('tr');
headerRow.className = 'border-b border-slate-600';
allFields.forEach((field, index) => {
const th = document.createElement('th');
th.className = `text-left py-3 px-4 font-semibold ${index === 0 ? 'text-yellow-400' : 'text-purple-400'}`;
th.textContent = fieldMappings[field] || field;
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);
// 创建表体
const tbody = document.createElement('tbody');
stocks.forEach((stock, stockIndex) => {
const row = document.createElement('tr');
row.className = `border-b border-slate-700 hover:bg-slate-700/30 transition-colors duration-200 ${stockIndex === stocks.length - 1 ? 'border-b-0' : ''}`;
allFields.forEach((field, fieldIndex) => {
const cell = document.createElement('td');
cell.className = `py-3 px-4 ${fieldIndex === 0 ? 'font-semibold text-yellow-400' : 'text-slate-300'}`;
const value = stock[field] || '-';
cell.textContent = value;
// 为投资逻辑字段添加特殊样式
if (field === 'reason' && value !== '-') {
cell.className += ' text-sm leading-relaxed';
}
row.appendChild(cell);
});
tbody.appendChild(row);
});
table.appendChild(tbody);
tableContainer.appendChild(table);
categoryDiv.appendChild(tableContainer);
container.appendChild(categoryDiv);
});
// 添加加载成功提示
console.log('股票数据渲染成功');
} catch (error) {
console.error('渲染股票数据时出错:', error);
container.innerHTML = '<div class="text-red-400 p-4">股票数据加载失败,请刷新页面重试。</div>';
}
}
// 页面加载完成后渲染股票数据
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', renderStockData);
} else {
renderStockData();
}
// 备用方案:延迟渲染
setTimeout(renderStockData, 100);
</script>
</body>
</html>