Files
vf_react/public/htmls/关键软件.html
2025-12-05 13:29:18 +08:00

489 lines
35 KiB
HTML
Raw Permalink 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" 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.10.2/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=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--glow-color-1: rgba(0, 255, 255, 0.7);
--glow-color-2: rgba(255, 0, 255, 0.7);
--glow-color-3: rgba(127, 0, 255, 0.7);
}
body {
font-family: 'Inter', sans-serif;
background-color: #020010;
background-image:
radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.1) 0px, transparent 50%),
radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.1) 0px, transparent 50%),
radial-gradient(at 52% 99%, hsla(355, 98%, 61%, 0.1) 0px, transparent 50%),
radial-gradient(at 10% 29%, hsla(255, 98%, 61%, 0.1) 0px, transparent 50%),
radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 0.1) 0px, transparent 50%),
radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 0.1) 0px, transparent 50%),
radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 0.1) 0px, transparent 50%);
color: #e0e0e0;
}
.fui-card {
background: rgba(10, 9, 20, 0.4);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.fui-card:hover {
transform: translateY(-5px) scale(1.01);
box-shadow: 0 0 20px rgba(0, 255, 255, 0.2), 0 0 40px rgba(255, 0, 255, 0.1);
}
.glow-text {
text-shadow: 0 0 8px var(--glow-color-1), 0 0 12px var(--glow-color-2);
}
.section-title {
position: relative;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(0, 255, 255, 0.3);
}
.section-title::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 50px;
height: 2px;
background: var(--glow-color-1);
box-shadow: 0 0 8px var(--glow-color-1);
}
.bento-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-auto-rows: minmax(180px, auto);
}
@media (min-width: 1024px) {
.bento-grid {
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(200px, auto);
}
.grid-col-span-2 { grid-column: span 2 / span 2; }
.grid-col-span-3 { grid-column: span 3 / span 3; }
.grid-col-span-4 { grid-column: span 4 / span 4; }
.grid-col-span-6 { grid-column: span 6 / span 6; }
.grid-row-span-2 { grid-row: span 2 / span 2; }
}
.highlight-badge {
background-color: rgba(0, 255, 255, 0.1);
border: 1px solid rgba(0, 255, 255, 0.5);
color: #99feff;
font-family: 'Roboto Mono', monospace;
}
.prose-custom {
color: #d1d5db;
}
.prose-custom h1, .prose-custom h2, .prose-custom h3, .prose-custom h4, .prose-custom h5, .prose-custom h6 {
color: #ffffff;
}
.prose-custom strong {
color: #ffffff;
}
.prose-custom blockquote {
border-left-color: rgba(0, 255, 255, 0.5);
color: #a5f3fc;
}
.prose-custom ul > li::before {
background-color: rgba(0, 255, 255, 0.8);
}
.tab-active {
color: #fff !important;
border-color: var(--glow-color-1) !important;
box-shadow: 0 2px 10px rgba(0, 255, 255, 0.3);
}
</style>
</head>
<body class="min-h-screen">
<div class="container mx-auto p-4 md:p-8">
<!-- Header -->
<header class="text-center mb-16">
<h1 class="text-4xl md:text-6xl font-bold glow-text mb-4 tracking-wider">关键软件</h1>
<p class="text-lg md:text-xl text-cyan-200 font-mono">自主可控新纪元:从硬件到灵魂的科技博弈</p>
<div class="mt-4 text-xs text-gray-500">
<p>北京价值前沿科技有限公司 AI投研agent“价小前投研” 进行投研呈现</p>
<p>本报告为AI合成数据投资需谨慎。</p>
</div>
</header>
<!-- Main Content -->
<main class="space-y-16">
<!-- Insight Section -->
<section class="fui-card p-6 md:p-8 rounded-2xl">
<h2 class="text-3xl font-bold mb-6 section-title">概念洞察 (Concept Insight)</h2>
<div class="prose prose-custom max-w-none space-y-6">
<div class="fui-card p-4 rounded-lg border-l-4 border-cyan-400">
<h3 class="text-xl font-semibold text-cyan-300">核心观点摘要</h3>
<p>“关键软件”概念本质上是国家“自主可控”战略在软件层面的终极体现其核心驱动力源自外部地缘政治压力与内部产业政策强化的双重共振。当前该概念正从主题炒作阶段加速迈向由订单和业绩驱动的基本面验证阶段尤其在工业自动化控制PLC/DCS和金融、政务等关键行业应用领域有望率先实现价值重估。</p>
</div>
<h3 class="text-2xl font-semibold pt-4">0. 概念事件科技博弈v2.0 软件时代到来</h3>
<p>“关键软件”概念的爆发源于地缘政治博弈的升级,核心是科技自主可控从硬件向软件领域的延伸。</p>
<ul>
<li><strong>核心催化 (2025.10.10)</strong>: 美国宣布将对“所有关键软件”实施出口控制计划自11月1日起生效。此举被市场解读为“制裁半导体7年之后首次提及关键软件制裁”标志着“科技博弈v2软件时代到来”。</li>
<li><strong>政策应对</strong>: 中国国家部委密集响应,工信部、网信办等将“关键软件”纳入核心技术攻关重点,十五五规划建议提出要“全链条推动基础软件等关键核心技术攻关取得决定性突破”。</li>
<li><strong>政策落地</strong>: 《政务领域人工智能大模型部署应用指引》提供落地场景政府采购对本国产品给予20%价格扣除优惠,提供实质性市场优势。</li>
<li><strong>市场发酵</strong>: 研报指出“关键软件替换紧迫性提升”产业界如合见工软开放EDA试用顶点软件中标标杆项目。信创代表公司2025Q2业绩触底回升如达梦数据利润+124%),验证了市场逻辑。</li>
</ul>
<h3 class="text-2xl font-semibold pt-4">1. 核心逻辑与市场认知分析</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="fui-card p-4 rounded-lg">
<h4 class="font-bold text-lg text-white">核心驱动力</h4>
<ul class="list-disc pl-5 mt-2 space-y-2">
<li><strong>国家安全与供应链独立</strong>: 根本逻辑。美方制裁从硬件升级至软件,威胁金融、能源、制造等关键领域运行安全,自主可控成为“刻不容缓”的国家战略。</li>
<li><strong>强政策周期与财政支持</strong>: 政府成为主要推动者。“十五五”顶层设计+部委行动+政府采购20%价格优惠形成完整政策闭环。工业设备更新方案提供明确量化需求如80万套工业操作系统</li>
<li><strong>技术积累与产业基础</strong>: 国内厂商已具备部分替代能力如宝信自研实时OS、顶点自研内存数据库是国产替代从口号走向现实的基础。</li>
</ul>
</div>
<div class="fui-card p-4 rounded-lg">
<h4 class="font-bold text-lg text-white">预期差分析</h4>
<ul class="list-disc pl-5 mt-2 space-y-2">
<li><strong>“完全替代”的预期差</strong>: 现实是“创新式适配”而非“完美式超越”。例如,顶点软件采用“内存数据库+国产数据库”混合架构,规避国产数据库性能短板。</li>
<li><strong>技术路径的预期差</strong>: 市场关注基础软件但龙头公司如宝信软件已向软硬一体的高端自动化大型PLC延伸通过自研芯片和算法构建更高壁垒可能被市场低估。</li>
<li><strong>生态建设复杂性的预期差</strong>: 软件成功关键在生态。英方软件适配200+国产数据库,揭示了国产化生态内部的碎片化,市场可能低估了生态适配的成本与时间。</li>
</ul>
</div>
</div>
<h3 class="text-2xl font-semibold pt-4">2. 关键催化剂与未来发展路径</h3>
<div class="flex flex-col md:flex-row gap-6">
<div class="flex-1 fui-card p-4 rounded-lg">
<h4 class="font-bold text-lg text-white">近期催化剂 (未来3-6个月)</h4>
<ul class="list-disc pl-5 mt-2 space-y-1">
<li><strong>11月1日</strong>: 美国管制细则落地。</li>
<li>金融、电信等信创集采项目招标。</li>
<li>宝信软件发布新一代PLC产品。</li>
<li>“十五五”规划纲要正式发布。</li>
</ul>
</div>
<div class="flex-1 fui-card p-4 rounded-lg">
<h4 class="font-bold text-lg text-white">长期发展路径</h4>
<ol class="list-decimal pl-5 mt-2 space-y-1">
<li><strong>第一阶段 (当前-2027)</strong>: 政策驱动的行业替代。</li>
<li><strong>第二阶段 (2027-2030)</strong>: 技术驱动的商业外溢。</li>
<li><strong>第三阶段 (2030以后)</strong>: 生态主导的全球竞争。</li>
</ol>
</div>
</div>
<h3 class="text-2xl font-semibold pt-4">3. 产业链与核心公司深度剖析</h3>
<div id="industry-chain-chart" class="w-full h-80 md:h-96 my-4 fui-card rounded-lg p-2"></div>
<div class="overflow-x-auto">
<table class="table table-zebra w-full">
<thead>
<tr class="text-white">
<th>分类</th>
<th>公司</th>
<th>核心逻辑 / 观点</th>
<th>风险点</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-semibold text-cyan-400">领导者</td>
<td><strong>中国软件 (麒麟)</strong></td>
<td>逻辑纯粹性最高,操作系统“国家队”,市占率第一,是信创基石。</td>
<td>依赖政策,生态建设缓慢。</td>
</tr>
<tr>
<td class="font-semibold text-cyan-400">领导者</td>
<td><strong>宝信软件</strong></td>
<td>最具颠覆潜力从MES切入高端PLC软硬一体技术壁垒极高。</td>
<td>能否突破西门子等巨头垄断,存量系统国产化改造艰巨。</td>
</tr>
<tr>
<td class="font-semibold text-cyan-400">领导者</td>
<td><strong>顶点软件</strong></td>
<td>细分领域验证者,证券核心交易系统率先实现全栈信创,标杆案例验证“能用好用”。</td>
<td>金融IT领域竞争激烈。</td>
</tr>
<tr>
<td class="font-semibold text-fuchsia-400">追赶者</td>
<td><strong>达梦数据</strong></td>
<td>国产数据库核心标的,业绩弹性巨大(Q2利润+124%)。</td>
<td>面临其他国产数据库激烈竞争。</td>
</tr>
<tr>
<td class="font-semibold text-fuchsia-400">创新者</td>
<td><strong>福昕软件</strong></td>
<td>版式软件全球领军布局OFD切入信创。AI+文档+订阅制转型代表未来方向。</td>
<td>信创业务能否对冲海外市场波动。</td>
</tr>
</tbody>
</table>
</div>
<h3 class="text-2xl font-semibold pt-4">4. 潜在风险与挑战</h3>
<ul class="list-disc pl-5 space-y-2">
<li><strong>技术风险</strong>: 高端工业软件(CAE)、数据库在极端场景下的性能和稳定性仍有差距。</li>
<li><strong>商业化风险</strong>: 生态建设缓慢,应用软件数量和质量不足;高昂的研发投入持续带来盈利压力。</li>
<li><strong>政策与竞争风险</strong>: 高度依赖信创政策,若支持减弱需求或不及预期;同质化竞争可能引发价格战。</li>
</ul>
<div class="fui-card p-4 rounded-lg border-l-4 border-fuchsia-400">
<h3 class="text-xl font-semibold text-fuchsia-300">综合结论与投资启示</h3>
<p>关键软件已进入<strong>政策强驱动下的基本面兑现初期</strong>。未来,公司的核心竞争力将从“关系和牌照”转向“技术实力和生态构建能力”。</p>
<h4 class="font-bold mt-4">最具投资价值的细分环节:</h4>
<ol class="list-decimal pl-5 mt-2">
<li><strong>工业控制软件 (PLC/DCS)</strong>: “卡脖子”最严重,空间大,壁垒高,竞争格局清晰 (宝信软件)。</li>
<li><strong>关键行业核心应用软件</strong>: 技术要求高,客户粘性强,护城河深 (顶点软件)。</li>
<li><strong>基础软件平台</strong>: 分享整个行业增长红利的基石型标的 (中国软件)。</li>
</ol>
</div>
</div>
</section>
<!-- Data Bento Grid -->
<section>
<h2 class="text-3xl font-bold mb-6 section-title">多维数据透视 (Data Perspectives)</h2>
<div class="bento-grid mt-6">
<div class="fui-card p-6 rounded-2xl md:grid-col-span-3">
<h3 class="font-bold text-xl mb-4 text-cyan-300">核心事件:美方出口管制</h3>
<p class="text-sm">特朗普于10/10宣布自11/1日起将对“所有关键软件”实施出口管制。这是继先进制程、高性能算力卡之后科技博弈首次明确转向软件领域标志着“科技博弈v2软件时代到来”。</p>
<blockquote class="border-l-2 border-cyan-500 pl-4 mt-4 text-sm italic">
“制裁半导体7年之后首次提及关键软件制裁。我们认为#科技博弈v2软件时代到来意义重大
</blockquote>
</div>
<div class="fui-card p-6 rounded-2xl md:grid-col-span-3">
<h3 class="font-bold text-xl mb-4 text-cyan-300">中方应对:国家政策强力支持</h3>
<ul class="list-disc pl-5 text-sm space-y-2">
<li><strong>工信部</strong>: 聚焦人工智能、关键软件、工业互联网等领域,强化核心技术攻关。</li>
<li><strong>十五五规划</strong>: 全链条推动基础软件等重点领域关键核心技术攻关。</li>
<li><strong>政府采购</strong>: 对本国产品给予 <span class="text-2xl font-bold text-yellow-300">20%</span> 的价格评审优惠。</li>
<li><strong>政务示范</strong>: 《政务领域人工智能大模型部署应用指引》为国产软件提供验证场。</li>
</ul>
</div>
<div class="fui-card p-6 rounded-2xl md:grid-col-span-2 md:grid-row-span-2">
<h3 class="font-bold text-xl mb-4 text-cyan-300">关键软件范畴</h3>
<p class="text-sm mb-4">主要指经营活动和生产制造的“卡脖子”环节软件,关乎国计民生。</p>
<div class="space-y-3">
<div>
<h4 class="font-semibold text-white">关键基础软件 (信创)</h4>
<div class="flex flex-wrap gap-2 mt-1">
<span class="highlight-badge badge badge-sm">操作系统</span>
<span class="highlight-badge badge badge-sm">数据库</span>
<span class="highlight-badge badge badge-sm">中间件</span>
<span class="highlight-badge badge badge-sm">办公软件</span>
</div>
</div>
<div>
<h4 class="font-semibold text-white">工业软件</h4>
<div class="flex flex-wrap gap-2 mt-1">
<span class="highlight-badge badge badge-sm">EDA</span>
<span class="highlight-badge badge badge-sm">CAD/CAE/CAM</span>
<span class="highlight-badge badge badge-sm">MES/PLC/DCS</span>
</div>
</div>
</div>
</div>
<div class="fui-card p-6 rounded-2xl md:grid-col-span-4">
<h3 class="font-bold text-xl mb-4 text-fuchsia-300">路演精粹:宝信软件</h3>
<p class="text-sm">正从传统IDC转型为<span class="text-yellow-300 font-bold">高端PLC自动化全球领先企业</span>。国内唯一突破大型PLC自主可控通过自研芯片、<span class="highlight-badge badge badge-sm">实时操作系统(天行OS)</span><span class="highlight-badge badge badge-sm">编译器</span>突破技术封锁。目标到2027年更新80万套工业操作系统。</p>
</div>
<div class="fui-card p-6 rounded-2xl md:grid-col-span-4">
<h3 class="font-bold text-xl mb-4 text-fuchsia-300">路演精粹:顶点软件</h3>
<p class="text-sm">证券核心交易系统龙头。采用“<span class="text-yellow-300 font-bold">内存数据库+国产数据库</span>”混合架构解决性能瓶颈中间件自主研发。东吴证券A5系统实现全栈信创无故障运行超4年验证技术实力。</p>
</div>
<div class="fui-card p-6 rounded-2xl md:grid-col-span-2">
<h3 class="font-bold text-xl mb-4 text-fuchsia-300">路演精粹:福昕软件</h3>
<p class="text-sm">全球版式软件领军掌握完整PDF底层技术。通过布局OFD切入信创。集成GPT/文心一言等大模型推出AI助手并向订阅制转型。</p>
</div>
<div class="fui-card p-6 rounded-2xl md:grid-col-span-4">
<h3 class="font-bold text-xl mb-4 text-emerald-300">研报观点:麒麟软件(中国软件)</h3>
<p class="text-sm">中国电子旗下操作系统产品连续12年位列中国Linux市场占有率第一。全面支持飞腾、鲲鹏、龙芯等国产CPU。中国软件拟增资麒麟聚焦基础软件主业。</p>
</div>
</div>
</section>
<!-- Stock List Section -->
<section x-data="{
tab: '基础软件',
stocks: {
'基础硬件': [], '基础软件': [], '工业软件': [], '应用行业': []
},
init() {
const rawData = [
{ "stock": "海光信息", "reason": "芯片", "其他标签": "基础硬件", "stock_code": "688041" }, { "stock": "龙芯中科", "reason": "芯片", "其他标签": "基础硬件", "stock_code": "688047" }, { "stock": "中国长城", "reason": "芯片, 服务器", "其他标签": "基础硬件", "stock_code": "000066" }, { "stock": "寒武纪", "reason": "芯片", "其他标签": "基础硬件", "stock_code": "688256" }, { "stock": "景嘉微", "reason": "芯片", "其他标签": "基础硬件", "stock_code": "300474" }, { "stock": "中科曙光", "reason": "服务器", "其他标签": "基础硬件", "stock_code": "603019" }, { "stock": "神州数码", "reason": "服务器", "其他标签": "基础硬件", "stock_code": "000034" }, { "stock": "紫光股份", "reason": "服务器", "其他标签": "基础硬件", "stock_code": "000938" }, { "stock": "纳思达", "reason": "打印机", "其他标签": "基础硬件", "stock_code": "002180" },
{ "stock": "中国软件", "reason": "操作系统", "其他标签": "基础软件", "stock_code": "600536" }, { "stock": "诚迈科技", "reason": "操作系统", "其他标签": "基础软件", "stock_code": "300598" }, { "stock": "麒麟信安", "reason": "操作系统", "其他标签": "基础软件", "stock_code": "688152" }, { "stock": "润和软件", "reason": "操作系统", "其他标签": "基础软件", "stock_code": "300339" }, { "stock": "中科创达", "reason": "操作系统", "其他标签": "基础软件", "stock_code": "300496" }, { "stock": "达梦数据", "reason": "数据库", "其他标签": "基础软件", "stock_code": "688692" }, { "stock": "太极股份", "reason": "数据库", "其他标签": "基础软件", "stock_code": "002368" }, { "stock": "星环科技", "reason": "数据库", "其他标签": "基础软件", "stock_code": "688031" }, { "stock": "海量数据", "reason": "数据库", "其他标签": "基础软件", "stock_code": "603138" }, { "stock": "中创股份", "reason": "中间件", "其他标签": "基础软件", "stock_code": "688695" }, { "stock": "普元信息", "reason": "中间件", "其他标签": "基础软件", "stock_code": "688118" }, { "stock": "东方通", "reason": "中间件", "其他标签": "基础软件" }, { "stock": "宝兰德", "reason": "中间件", "其他标签": "基础软件", "stock_code": "688058" }, { "stock": "深信服", "reason": "信息安全", "其他标签": "基础软件", "stock_code": "300454" }, { "stock": "天融信", "reason": "信息安全", "其他标签": "基础软件", "stock_code": "002212" },
{ "stock": "中望软件", "reason": "辅助设计CAD", "其他标签": "工业软件", "stock_code": "688083" }, { "stock": "柏楚电子", "reason": "辅助设计CAD", "其他标签": "工业软件", "stock_code": "688188" }, { "stock": "浩辰软件", "reason": "辅助设计CAD", "其他标签": "工业软件", "stock_code": "688657" }, { "stock": "索辰科技", "reason": "辅助工程CAE", "其他标签": "工业软件", "stock_code": "688507" }, { "stock": "宝信软件", "reason": "制造执行MES", "其他标签": "工业软件", "stock_code": "600845" }, { "stock": "鼎捷数智", "reason": "制造执行MES", "其他标签": "工业软件", "stock_code": "300378" }, { "stock": "中控技术", "reason": "制造执行MES, 集散控制DCS", "其他标签": "工业软件", "stock_code": "688777" }, { "stock": "汇川技术", "reason": "逻辑控制器PLC", "其他标签": "工业软件", "stock_code": "300124" }, { "stock": "信捷电气", "reason": "逻辑控制器PLC", "其他标签": "工业软件", "stock_code": "603416" }, { "stock": "禾川科技", "reason": "逻辑控制器PLC", "其他标签": "工业软件", "stock_code": "688320" }, { "stock": "华大九天", "reason": "电子设计自动化EDA", "其他标签": "工业软件", "stock_code": "301269" }, { "stock": "概伦电子", "reason": "电子设计自动化EDA", "其他标签": "工业软件", "stock_code": "688206" }, { "stock": "广立微", "reason": "电子设计自动化EDA", "其他标签": "工业软件", "stock_code": "301095" },
{ "stock": "久其软件", "reason": "政务", "其他标签": "应用行业", "stock_code": "002279" }, { "stock": "新点软件", "reason": "政务", "其他标签": "应用行业", "stock_code": "688232" }, { "stock": "榕基软件", "reason": "政务", "其他标签": "应用行业", "stock_code": "002474" }, { "stock": "顶点软件", "reason": "证券IT", "其他标签": "应用行业, 金融", "stock_code": "603383" }, { "stock": "恒生电子", "reason": "证券IT", "其他标签": "应用行业, 金融", "stock_code": "600570" }, { "stock": "神州信息", "reason": "银行IT", "其他标签": "应用行业, 金融", "stock_code": "000555" }, { "stock": "宇信科技", "reason": "银行IT", "其他标签": "应用行业, 金融", "stock_code": "300674" }, { "stock": "长亮科技", "reason": "银行IT", "其他标签": "应用行业, 金融", "stock_code": "300348" }, { "stock": "中科软", "reason": "保险IT", "其他标签": "应用行业, 金融", "stock_code": "603927" }, { "stock": "金山办公", "reason": "办公Office", "其他标签": "应用行业", "stock_code": "688111" }, { "stock": "福昕软件", "reason": "办公Office", "其他标签": "应用行业", "stock_code": "688095" }, { "stock": "致远互联", "reason": "办公Office", "其他标签": "应用行业", "stock_code": "688369" }, { "stock": "用友网络", "reason": "企业资源规划ERP", "其他标签": "应用行业", "stock_code": "600588" }, { "stock": "金蝶国际", "reason": "企业资源规划ERP", "其他标签": "应用行业" }, { "stock": "软通动力", "reason": "服务器, 操作系统, 保险IT, ERP", "其他标签": "基础硬件, 基础软件, 应用行业", "stock_code": "301236" }
];
rawData.forEach(stock => {
const tags = stock['其他标签'].split(', ');
tags.forEach(tag => {
if (this.stocks[tag]) {
// Avoid duplicates
if (!this.stocks[tag].some(s => s.stock === stock.stock)) {
this.stocks[tag].push(stock);
}
}
});
});
}
}">
<h2 class="text-3xl font-bold mb-6 section-title">相关产业链图谱 (Stock Ecosystem)</h2>
<div role="tablist" class="tabs tabs-bordered tabs-lg">
<template x-for="category in Object.keys(stocks)">
<a role="tab" class="tab"
:class="{ 'tab-active': tab === category }"
@click="tab = category"
x-text="category"></a>
</template>
</div>
<div class="mt-6 fui-card rounded-2xl overflow-hidden">
<template x-for="category in Object.keys(stocks)" :key="category">
<div x-show="tab === category" x-transition>
<div class="overflow-x-auto">
<table class="table table-auto w-full text-sm">
<thead>
<tr class="text-cyan-200">
<th class="p-4">股票名称</th>
<th class="p-4">股票代码</th>
<th class="p-4">核心逻辑</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-700/50">
<template x-for="stock in stocks[category]">
<tr class="hover:bg-gray-800/50 transition-colors">
<td class="p-4 font-semibold text-white" x-text="stock.stock"></td>
<td class="p-4">
<template x-if="stock.stock_code">
<a :href="`https://valuefrontier.cn/company?scode=${stock.stock_code}`" target="_blank" class="font-mono text-cyan-400 hover:text-cyan-200" x-text="stock.stock_code"></a>
</template>
<template x-if="!stock.stock_code">
<span class="text-gray-500 font-mono">N/A</span>
</template>
</td>
<td class="p-4">
<div class="flex flex-wrap gap-2">
<template x-for="reason in stock.reason.split(', ')">
<span class="badge badge-outline border-fuchsia-400 text-fuchsia-400" x-text="reason"></span>
</template>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</template>
</div>
</section>
</main>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var chartDom = document.getElementById('industry-chain-chart');
var myChart = echarts.init(chartDom);
var option;
const data = {
name: '关键软件产业链',
children: [
{
name: '上游:基础硬件',
children: [
{ name: '芯片', value: 1, itemStyle: { color: '#00bcd4' } },
{ name: '服务器', value: 1, itemStyle: { color: '#00acc1' } },
]
},
{
name: '中游:关键软件本体',
children: [
{ name: '基础软件', itemStyle: { color: '#ff4081' }, children: [
{name: '操作系统', value:1},
{name: '数据库', value:1},
{name: '中间件', value:1},
]},
{ name: '工业软件', itemStyle: { color: '#ff5252' }, children: [
{name: 'EDA', value:1},
{name: 'CAD/CAE', value:1},
{name: 'MES/PLC', value:1},
] },
]
},
{
name: '下游:应用行业',
children: [
{ name: '金融IT', value: 1, itemStyle: { color: '#4caf50' } },
{ name: '政务', value: 1, itemStyle: { color: '#66bb6a' } },
{ name: '办公', value: 1, itemStyle: { color: '#81c784' } },
{ name: '企业管理', value: 1, itemStyle: { color: '#a5d6a7' } }
]
}
]
};
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove',
backgroundColor: 'rgba(0, 0, 0, 0.7)',
borderColor: '#333',
textStyle: {
color: '#fff'
}
},
series: [
{
type: 'tree',
data: [data],
top: '5%',
left: '10%',
bottom: '5%',
right: '20%',
symbolSize: 10,
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 14,
color: '#e0e0e0',
fontFamily: 'Inter'
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
emphasis: {
focus: 'descendant'
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750,
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)',
width: 1,
curveness: 0.5
}
}
]
};
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
});
</script>
</body>
</html>