update pay ui
This commit is contained in:
511
public/htmls/AI手势识别.html
Normal file
511
public/htmls/AI手势识别.html
Normal file
@@ -0,0 +1,511 @@
|
||||
<!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>AI手势识别 - 深度概念投研报告</title>
|
||||
|
||||
<!-- Tailwind CSS & DaisyUI -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.1/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- Alpine.js -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
|
||||
<!-- ECharts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<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;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--glow-color-1: rgba(79, 70, 229, 0.4);
|
||||
--glow-color-2: rgba(219, 39, 119, 0.3);
|
||||
--bg-color: #020010;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: #e0e0e0;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title-font {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
}
|
||||
|
||||
/* Background Glows */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: -20%;
|
||||
left: -20%;
|
||||
width: 60vw;
|
||||
height: 60vh;
|
||||
background: radial-gradient(circle, var(--glow-color-1) 0%, transparent 70%);
|
||||
filter: blur(100px);
|
||||
z-index: -1;
|
||||
animation: moveGlow1 25s infinite alternate ease-in-out;
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
bottom: -20%;
|
||||
right: -20%;
|
||||
width: 60vw;
|
||||
height: 60vh;
|
||||
background: radial-gradient(circle, var(--glow-color-2) 0%, transparent 70%);
|
||||
filter: blur(100px);
|
||||
z-index: -1;
|
||||
animation: moveGlow2 30s infinite alternate ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes moveGlow1 {
|
||||
from { transform: translate(-20%, -20%) rotate(0deg); }
|
||||
to { transform: translate(20%, 20%) rotate(180deg); }
|
||||
}
|
||||
|
||||
@keyframes moveGlow2 {
|
||||
from { transform: translate(20%, 20%) rotate(0deg); }
|
||||
to { transform: translate(-20%, -20%) rotate(-180deg); }
|
||||
}
|
||||
|
||||
/* Glassmorphism Card Style */
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@apply text-2xl font-bold mb-4 text-cyan-300 title-font tracking-widest;
|
||||
text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(79, 70, 229, 0.6);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(79, 70, 229, 0.8);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen">
|
||||
<div class="container mx-auto p-4 sm:p-6 lg:p-8">
|
||||
|
||||
<!-- Header -->
|
||||
<header class="text-center py-12">
|
||||
<h1 class="text-5xl md:text-7xl font-bold title-font text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-fuchsia-500 mb-4">
|
||||
AI手势识别
|
||||
</h1>
|
||||
<p class="text-lg text-gray-400 max-w-3xl mx-auto">
|
||||
下一代人机交互范式变革的核心驱动力，从二维触控迈向三维空间交互的奇点。
|
||||
</p>
|
||||
<div class="mt-4 text-xs text-gray-500">
|
||||
北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现，本报告为AI合成数据，投资需谨慎。
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Bento Grid Layout -->
|
||||
<main class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12">
|
||||
|
||||
<!-- Insight Core View -->
|
||||
<section class="lg:col-span-2 glass-card rounded-2xl p-6">
|
||||
<h2 class="section-title">概念核心观点</h2>
|
||||
<div class="prose prose-invert max-w-none text-gray-300">
|
||||
<p>AI手势识别正处在一个由<strong>单一爆品（华为Mate 70）引爆市场情绪</strong>，并向<strong>多场景、全生态渗透</strong>的关键拐点。其核心驱动力是<strong>下一代人机交互范式的变革需求</strong>，即从二维触控走向三维空间交互。</p>
|
||||
<p>当前市场处于高度乐观的<strong>主题炒作与基本面验证初期</strong>阶段，长期潜力巨大，但短期需警惕预期过高和技术路线分化的风险。</p>
|
||||
<div class="mt-4 p-4 border border-indigo-500/30 rounded-lg bg-indigo-900/20">
|
||||
<h4 class="font-bold text-indigo-300">市场演进路径:</h4>
|
||||
<ol class="list-decimal list-inside mt-2 space-y-1">
|
||||
<li><strong>技术标杆:</strong> 苹果Vision Pro定义了“毫米级”手势识别精度，树立行业标杆。</li>
|
||||
<li><strong>市场引爆:</strong> 华为Mate 70以“隔空传送”功能将该技术推向大规模消费市场。</li>
|
||||
<li><strong>生态渗透:</strong> 未来将融入智能穿戴、XR、智能汽车、人形机器人等全场景。</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Market Outlook -->
|
||||
<section class="glass-card rounded-2xl p-6 flex flex-col justify-center items-center text-center">
|
||||
<h2 class="section-title">市场前景</h2>
|
||||
<p class="text-gray-400 text-sm mb-4">报告预计全球手势交互市场规模将超</p>
|
||||
<div class="text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-300 to-cyan-400">
|
||||
$200亿
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm mt-2">（至2030年）</p>
|
||||
</section>
|
||||
|
||||
<!-- Key Events -->
|
||||
<section class="lg:col-span-3 glass-card rounded-2xl p-6">
|
||||
<h2 class="section-title">关键事件与催化剂</h2>
|
||||
<ul class="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical">
|
||||
<li>
|
||||
<div class="timeline-middle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-cyan-400"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.06 0l4.001-5.5a.75.75 0 00-.124-.96z" clip-rule="evenodd" /></svg>
|
||||
</div>
|
||||
<div class="timeline-start md:text-end mb-10">
|
||||
<time class="font-mono italic">2024.Q1</time>
|
||||
<div class="text-lg font-black">苹果Vision Pro发售</div>
|
||||
以“毫米级”精度和“眼动+手势”的复合操控体系，定义了空间计算交互的行业新高度。
|
||||
</div>
|
||||
<hr class="bg-cyan-400/50"/>
|
||||
</li>
|
||||
<li>
|
||||
<hr class="bg-cyan-400/50"/>
|
||||
<div class="timeline-middle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-fuchsia-400"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.06 0l4.001-5.5a.75.75 0 00-.124-.96z" clip-rule="evenodd" /></svg>
|
||||
</div>
|
||||
<div class="timeline-end mb-10">
|
||||
<time class="font-mono italic">2024.Q4 (预期)</time>
|
||||
<div class="text-lg font-black">华为Mate 70系列发布</div>
|
||||
预热视频展示“AI隔空传送”，将手势识别从小众XR设备带入主流智能手机市场，引爆产业链。
|
||||
</div>
|
||||
<hr class="bg-fuchsia-400/50"/>
|
||||
</li>
|
||||
<li>
|
||||
<hr class="bg-fuchsia-400/50"/>
|
||||
<div class="timeline-middle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-indigo-400"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.06 0l4.001-5.5a.75.75 0 00-.124-.96z" clip-rule="evenodd" /></svg>
|
||||
</div>
|
||||
<div class="timeline-start md:text-end mb-10">
|
||||
<time class="font-mono italic">2025及以后</time>
|
||||
<div class="text-lg font-black">多点开花</div>
|
||||
Meta发布AI眼镜，小米推出A1型AI音频眼镜，苹果AirPods集成手势识别，技术向全场景渗透。
|
||||
</div>
|
||||
<hr class="bg-indigo-400/50"/>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Industry Chain Chart -->
|
||||
<section class="lg:col-span-2 glass-card rounded-2xl p-6">
|
||||
<h2 class="section-title">产业链图谱</h2>
|
||||
<div id="industry-chain-chart" class="w-full h-80"></div>
|
||||
</section>
|
||||
|
||||
<!-- Key Tech -->
|
||||
<section class="glass-card rounded-2xl p-6">
|
||||
<h2 class="section-title">核心技术硬件</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="p-3 rounded-lg bg-gray-500/10">
|
||||
<h4 class="font-bold text-cyan-300">ToF芯片</h4>
|
||||
<p class="text-sm text-gray-400">实现3D深度感知，是隔空手势操作的核心载体。 (代表: 力芯微)</p>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg bg-gray-500/10">
|
||||
<h4 class="font-bold text-fuchsia-300">生物识别滤光片</h4>
|
||||
<p class="text-sm text-gray-400">华为AI手势识别的关键光学元件。 (代表: 五方光电)</p>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg bg-gray-500/10">
|
||||
<h4 class="font-bold text-indigo-300">深度视觉模组</h4>
|
||||
<p class="text-sm text-gray-400">结合AI算法，实现手势、身份、表情等多维识别。 (代表: 欧菲光)</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Detailed Insight Section -->
|
||||
<section class="mb-12 glass-card rounded-2xl p-6" x-data="{ activeTab: 'logic' }">
|
||||
<div class="tabs tabs-boxed bg-black/20 mb-6">
|
||||
<a class="tab" :class="{ 'tab-active': activeTab === 'logic' }" @click="activeTab = 'logic'">核心逻辑</a>
|
||||
<a class="tab" :class="{ 'tab-active': activeTab === 'path' }" @click="activeTab = 'path'">发展路径</a>
|
||||
<a class="tab" :class="{ 'tab-active': activeTab === 'risk' }" @click="activeTab = 'risk'">潜在风险</a>
|
||||
</div>
|
||||
|
||||
<div class="prose prose-invert max-w-none text-gray-300">
|
||||
<div x-show="activeTab === 'logic'">
|
||||
<h3 class="text-xl font-bold text-cyan-300">核心驱动力与市场认知</h3>
|
||||
<ol>
|
||||
<li><strong>交互革命的必然性：</strong>随着空间计算（XR）、万物互联（鸿蒙）、智能汽车和人形机器人的兴起，传统触控交互已显不足。手势识别作为最符合人类直觉的交互方式，与语音、眼动追踪共同构成<strong>多模态交互</strong>的基石。</li>
|
||||
<li><strong>技术成熟度提升：</strong>AI算法的进步（如虹软算法）与核心硬件的迭代（ToF芯片、滤光片）共同推动了手势识别的精度和可靠性，使其从实验室走向消费级产品。</li>
|
||||
<li><strong>巨头引领的生态构建：</strong>华为的“AI隔空传送”将手势识别作为打通鸿蒙生态设备壁垒的关键入口，表明手势识别不再是单一功能，而是生态战略的重要组成部分。</li>
|
||||
</ol>
|
||||
<h3 class="text-xl font-bold text-cyan-300 mt-6">预期差分析</h3>
|
||||
<ul>
|
||||
<li><strong>技术精度与成本：</strong>市场可能低估了实现苹果Vision Pro“毫米级”精度所需的技术门槛和硬件成本，将不同质量的方案混为一谈。</li>
|
||||
<li><strong>应用场景：</strong>市场普遍聚焦于手机的“隔空操作”，但手势识别真正的“杀手级”应用可能在AR/VR的空间计算和人形机器人的实时交互中。</li>
|
||||
<li><strong>公司业务纯度：</strong>部分关联个股与核心的消费电子手势识别关联度较弱，存在“蹭概念”的嫌疑，市场情绪高涨时可能忽略这种差异。</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div x-show="activeTab === 'path'">
|
||||
<h3 class="text-xl font-bold text-cyan-300">长期发展路径</h3>
|
||||
<ul class="steps steps-vertical lg:steps-horizontal w-full">
|
||||
<li class="step step-primary">
|
||||
<div class="text-left p-2">
|
||||
<h4 class="font-bold">第一阶段 (当前-2025)</h4>
|
||||
<p class="text-sm">单点突破与多点开花。以手机、AI/AR眼镜为主要载体，实现基础隔空操控。</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step step-primary">
|
||||
<div class="text-left p-2">
|
||||
<h4 class="font-bold">第二阶段 (2025-2027)</h4>
|
||||
<p class="text-sm">生态融合与体验深化。深度融入操作系统，跨设备无缝流转，扩展至智能汽车、家居。</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step">
|
||||
<div class="text-left p-2">
|
||||
<h4 class="font-bold">第三阶段 (2027以后)</h4>
|
||||
<p class="text-sm">人机共融与行业普及。成为人形机器人、工业控制等领域的标准交互方式。</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div x-show="activeTab === 'risk'">
|
||||
<h3 class="text-xl font-bold text-cyan-300">潜在风险与挑战</h3>
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<div class="p-4 border border-rose-500/30 rounded-lg bg-rose-900/20">
|
||||
<h4 class="font-bold text-rose-300">技术风险</h4>
|
||||
<ul class="list-disc list-inside mt-2 text-sm">
|
||||
<li><strong>精度与延迟瓶颈:</strong> 除苹果外，多数方案仍为“厘米级”，可能影响用户体验。</li>
|
||||
<li><strong>环境适应性:</strong> 在暗光、强光、复杂背景下的鲁棒性仍是挑战。</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-4 border border-amber-500/30 rounded-lg bg-amber-900/20">
|
||||
<h4 class="font-bold text-amber-300">商业化风险</h4>
|
||||
<ul class="list-disc list-inside mt-2 text-sm">
|
||||
<li><strong>“杀手级”应用缺失:</strong> 功能虽新颖，但尚不构成用户“刚需”，可能沦为“炫技”。</li>
|
||||
<li><strong>成本与功耗:</strong> 高精度硬件会增加设备成本和功耗，限制向中低端普及。</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-4 border border-sky-500/30 rounded-lg bg-sky-900/20 md:col-span-2">
|
||||
<h4 class="font-bold text-sky-300">信息交叉验证风险</h4>
|
||||
<p class="text-sm mt-2">研报数据中对手势识别的直接深入分析较少，大多作为“多模态交互”分支提及。这与当前市场极高热度形成对比，表明<strong>市场情绪可能已大幅领先于产业研究和基本面验证</strong>，这本身是一个显著的风险信号。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Recent Movers -->
|
||||
<section class="mb-12">
|
||||
<h2 class="section-title">市场近期异动分析</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="glass-card rounded-2xl p-6">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<h3 class="font-bold text-xl text-white">杰克股份 <span class="text-sm text-gray-400">603337</span></h3>
|
||||
<div class="badge badge-error gap-2">+10.01%</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-300"><strong>核心逻辑:</strong> AI缝纫机技术突破。通过摄像头记录和分析操作工人的手势，与标准模板匹配，为操作改进提供参考，并布局人形机器人领域。技术创新应对行业挑战，探索新市场机遇。</p>
|
||||
</div>
|
||||
<div class="glass-card rounded-2xl p-6">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<h3 class="font-bold text-xl text-white">合合信息 <span class="text-sm text-gray-400">688615</span></h3>
|
||||
<div class="badge badge-error gap-2">+6.23%</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-300"><strong>核心逻辑:</strong> AI鉴伪技术获得市场关注。在世界AI大会展示精准识别伪造面容的技术，叠加业绩预告表现良好，符合市场对AI应用变现的关注点。</p>
|
||||
</div>
|
||||
<div class="glass-card rounded-2xl p-6">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<h3 class="font-bold text-xl text-white">三花智控 <span class="text-sm text-gray-400">002050</span></h3>
|
||||
<div class="badge badge-error gap-2">+10.00%</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-300"><strong>核心逻辑:</strong> 特斯拉人形机器人核心供应商。作为Optimus旋转关节总成Tier-1，在特斯拉AI品牌中国落地、量产预期升温的背景下，情绪与业绩弹性共振。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Associated Companies Table -->
|
||||
<section>
|
||||
<h2 class="section-title">相关上市公司梳理</h2>
|
||||
<div class="overflow-x-auto glass-card rounded-2xl p-2">
|
||||
<table class="table table-zebra bg-transparent">
|
||||
<thead>
|
||||
<tr class="text-cyan-300">
|
||||
<th>股票名称</th>
|
||||
<th>股票代码</th>
|
||||
<th>核心逻辑 / 业务关联</th>
|
||||
<th>其他标签</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-gray-300">
|
||||
<!-- Data will be populated by JS -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// ECharts - Industry Chain
|
||||
var industryChartDom = document.getElementById('industry-chain-chart');
|
||||
var myIndustryChart = echarts.init(industryChartDom, 'dark');
|
||||
var industryOption = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
triggerOn: 'mousemove'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'tree',
|
||||
data: [{
|
||||
name: 'AI手势识别产业链',
|
||||
children: [
|
||||
{
|
||||
name: '上游：核心硬件',
|
||||
collapsed: false,
|
||||
children: [
|
||||
{ name: 'ToF芯片 (力芯微)' },
|
||||
{ name: '生物识别滤光片 (五方光电)' },
|
||||
{ name: '深度视觉模组 (欧菲光)' },
|
||||
{ name: '微型摄像头 (炬光科技)' },
|
||||
{ name: '光学镜头 (联创电子)' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '中游：算法与软件',
|
||||
collapsed: false,
|
||||
children: [
|
||||
{ name: '算法供应商 (虹软科技, 佳创视讯)' },
|
||||
{ name: '操作系统 (华为鸿蒙, 苹果visionOS)' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '下游：终端应用',
|
||||
collapsed: false,
|
||||
children: [
|
||||
{ name: '智能手机 (华为, 小米)' },
|
||||
{ name: 'XR/AR/AI设备 (苹果, Meta)' },
|
||||
{ name: '智能汽车 (小米)' },
|
||||
{ name: '人形机器人 (小米)' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}],
|
||||
top: '5%',
|
||||
left: '15%',
|
||||
bottom: '5%',
|
||||
right: '25%',
|
||||
symbolSize: 10,
|
||||
orient: 'RL',
|
||||
label: {
|
||||
position: 'right',
|
||||
verticalAlign: 'middle',
|
||||
align: 'left',
|
||||
color: '#e0e0e0',
|
||||
fontSize: 12
|
||||
},
|
||||
leaves: {
|
||||
label: {
|
||||
position: 'left',
|
||||
verticalAlign: 'middle',
|
||||
align: 'right'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'descendant'
|
||||
},
|
||||
expandAndCollapse: true,
|
||||
animationDuration: 550,
|
||||
animationDurationUpdate: 750
|
||||
}
|
||||
]
|
||||
};
|
||||
myIndustryChart.setOption(industryOption);
|
||||
|
||||
// Stock Data Processing
|
||||
const stockData = {
|
||||
"佳创视讯": { "code": "300264", "reasons": ["自定义手势识别：在默认的点击、拖拽手势之外，研发定制创新手势识别系统，可扩展支持例如指向，触摸虚拟展品等手势识别"], "tags": ["真实流通市值: 23亿"] },
|
||||
"魅视科技": { "code": "001209", "reasons": ["手势识别最小盘子！！！公司自主研发的“AI体感控制调度技术”融合AI技术实现了通过手势控制大屏进行人机交互，将分布式系统人机交互的可视化图形交互升级到人机自然交互", "技术实现手势控制大屏人机交互"], "tags": ["真实流通市值: 8.66亿", "AI手势"] },
|
||||
"恒信东方": { "code": "300081", "reasons": ["公司目前正在研发基于A1+单目摄像头的动捕方式", "产品支持如手势识别、眼动追踪等"], "tags": ["真实流通市值: 38.1亿"] },
|
||||
"方直科技": { "code": "300235", "reasons": ["AI课程生产线围绕打造教师超写实AI数字分身，解决课程制作中拍摄耗时、更新困难等难题，结合AIGC新科技"], "tags": ["真实流通市值: 16.67亿"] },
|
||||
"创维数字": { "code": "000810", "reasons": ["AI手势：公司研发中心下设智慧研究院，在人工智能中已积累了计算机视觉（CV）算法、自然语言处理（NLP）算法", "有手势识别算法等AI应用技术"], "tags": ["真实流通市值: 63亿"] },
|
||||
"佳禾智能": { "code": "300793", "reasons": ["手势识别专利", "华为合作商；含手势识别在内专利"], "tags": ["真实流通市值: 41亿", "华为合作商"] },
|
||||
"星宸科技": { "code": "301536", "reasons": ["公司通过AI技术将手势识别、表情识别等多模态交互功能加入其中，为客户提供与设备更灵活自如的交互功能", "视频对讲芯片含手势识别算法"], "tags": ["真实流通市值: 16.9亿"] },
|
||||
"天键股份": { "code": "301383", "reasons": ["与B端客户进行了定制化开发和手势控制功能的探讨，未来将根据市场需求不断开发新的版本。"], "tags": ["真实流通市值: 16.2亿"] },
|
||||
"同辉信息": { "code": "430090", "reasons": ["支持自定义手势识别技术", "应用端支持用户手势识别、眼球追踪等"], "tags": ["真实流通市值: 15亿"] },
|
||||
"五方光电": { "code": "002962", "reasons": ["生物识别滤光片为手势识别提供基础", "研发方向应用于手势识别、动作追踪、AR/VR等功能的生物识别滤光片，产品供货有华为"], "tags": ["AI手势"] },
|
||||
"辰奕智能": { "code": "301578", "reasons": ["华为合作商；实现10种手势识别技术"], "tags": ["华为合作商"] },
|
||||
"鸿合科技": { "code": "002955", "reasons": ["华为智能视频服务商，核心技术含手势识别"], "tags": ["华为智能视频服务商"] },
|
||||
"联创电子": { "code": "002036", "reasons": ["华为Mate系列3D光学镜头供应商"], "tags": ["华为Mate系列3D光学镜头供应商"] },
|
||||
"东田微": { "code": "301183", "reasons": ["华为手机摄像头滤光片供应商"], "tags": ["华为手机摄像头滤光片供应商"] },
|
||||
"虹软科技": { "code": "688088", "reasons": ["华为合作商；手势识别上有较强技术"], "tags": ["华为合作商"] },
|
||||
"汉王科技": { "code": "002362", "reasons": ["华为合作伙伴；拥有手势识别技术"], "tags": ["华为合作伙伴"] },
|
||||
"华平股份": { "code": "300074", "reasons": ["有识别自定义手势轨迹发明专利"], "tags": [] },
|
||||
"苏州固锝": { "code": "002079", "reasons": ["惯性传感器研发可用于手势动作获取"], "tags": [] },
|
||||
"亿道信息": { "code": "001314", "reasons": ["MR新品具备手势识别、眼球追踪"], "tags": [] },
|
||||
"维海德": { "code": "301318", "reasons": ["实现基于AI的人形检测算法，能进行自动跟踪"], "tags": [] },
|
||||
"拓邦股份": { "code": "002139", "reasons": ["积累AI、触屏手势新交互等技术"], "tags": [] },
|
||||
"秋田微": { "code": "300939", "reasons": ["公司产品能实现10mm近距离高准确度和高灵敏度的隔空手势识别，避免人和触控显示屏的直接接触"], "tags": ["AI手势"] }
|
||||
};
|
||||
|
||||
const tableBody = document.querySelector('tbody');
|
||||
Object.keys(stockData).forEach(stockName => {
|
||||
const data = stockData[stockName];
|
||||
const row = document.createElement('tr');
|
||||
row.className = 'hover';
|
||||
|
||||
// Stock Name
|
||||
const nameCell = document.createElement('td');
|
||||
nameCell.textContent = stockName;
|
||||
row.appendChild(nameCell);
|
||||
|
||||
// Stock Code with link
|
||||
const codeCell = document.createElement('td');
|
||||
const codeLink = document.createElement('a');
|
||||
codeLink.href = `https://valuefrontier.cn/company?scode=${data.code}`;
|
||||
codeLink.textContent = data.code;
|
||||
codeLink.target = '_blank';
|
||||
codeLink.className = 'link link-hover text-indigo-400';
|
||||
codeCell.appendChild(codeLink);
|
||||
row.appendChild(codeCell);
|
||||
|
||||
// Reasons
|
||||
const reasonCell = document.createElement('td');
|
||||
reasonCell.className = 'text-sm text-gray-400';
|
||||
// Join unique reasons
|
||||
const uniqueReasons = [...new Set(data.reasons)];
|
||||
reasonCell.textContent = uniqueReasons.join(' | ');
|
||||
row.appendChild(reasonCell);
|
||||
|
||||
// Tags
|
||||
const tagsCell = document.createElement('td');
|
||||
const uniqueTags = [...new Set(data.tags)];
|
||||
uniqueTags.forEach(tag => {
|
||||
const badge = document.createElement('div');
|
||||
badge.className = 'badge badge-outline badge-info mr-1 mb-1';
|
||||
badge.textContent = tag;
|
||||
tagsCell.appendChild(badge);
|
||||
});
|
||||
row.appendChild(tagsCell);
|
||||
|
||||
tableBody.appendChild(row);
|
||||
});
|
||||
|
||||
// Resize chart on window resize
|
||||
window.addEventListener('resize', function() {
|
||||
myIndustryChart.resize();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user