|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
|
|
<meta http-equiv="Pragma" content="no-cache">
|
|
|
<meta http-equiv="Expires" content="0">
|
|
|
<title>复盘计划 - 期货智析</title>
|
|
|
<link rel="stylesheet" href="/static/review_plan.css">
|
|
|
</head>
|
|
|
<body>
|
|
|
<!-- 顶部导航栏 -->
|
|
|
<header class="header">
|
|
|
<div class="logo">期货智析 - 复盘计划</div>
|
|
|
<nav class="nav-items">
|
|
|
<a href="/futures-analysis" class="nav-item">返回分析页面</a>
|
|
|
</nav>
|
|
|
</header>
|
|
|
|
|
|
<!-- 主容器 -->
|
|
|
<main class="container">
|
|
|
<!-- 工具栏 -->
|
|
|
<div class="review-toolbar">
|
|
|
<input type="date" id="date-selector" class="date-selector" />
|
|
|
<button id="btn-generate" class="btn btn-primary">
|
|
|
<span class="btn-icon">📊</span>
|
|
|
<span class="btn-text">复盘与计划</span>
|
|
|
</button>
|
|
|
<button id="btn-clear" class="btn btn-secondary">
|
|
|
<span class="btn-icon">🗑️</span>
|
|
|
<span class="btn-text">清除数据</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
<!-- 加载指示器 -->
|
|
|
<div id="loading-indicator" class="loading-indicator" style="display: none;">
|
|
|
<div class="spinner"></div>
|
|
|
<p class="loading-text">正在生成复盘计划，请稍候...</p>
|
|
|
</div>
|
|
|
|
|
|
<!-- 内容区域 -->
|
|
|
<div id="content-area" class="content-area" style="display: none;">
|
|
|
<!-- Hero 区域 -->
|
|
|
<section id="hero-section" class="hero-section">
|
|
|
<!-- 由 JS 动态填充 -->
|
|
|
</section>
|
|
|
|
|
|
<!-- 统计卡片网格 -->
|
|
|
<section id="stats-grid" class="stats-grid">
|
|
|
<!-- 由 JS 动态填充：核心结论、Top3机会、市场概览(多/空/中性数量) -->
|
|
|
</section>
|
|
|
|
|
|
<!-- 风险提示横幅 -->
|
|
|
<section id="risk-banner" class="risk-banner">
|
|
|
<div class="risk-banner-header">
|
|
|
<span class="risk-icon">⚠️</span>
|
|
|
<span class="risk-title">风险提示</span>
|
|
|
</div>
|
|
|
<ul id="risk-list" class="risk-list">
|
|
|
<!-- 由 JS 动态填充 -->
|
|
|
</ul>
|
|
|
</section>
|
|
|
|
|
|
<!-- 粘性导航条 -->
|
|
|
<nav class="sticky-nav" id="sticky-nav">
|
|
|
<a href="#hero-section" class="sticky-nav-link">顶部</a>
|
|
|
<a href="#green-section" class="sticky-nav-link">交易机会</a>
|
|
|
<a href="#yellow-section" class="sticky-nav-link">重点关注</a>
|
|
|
<a href="#red-section" class="sticky-nav-link">规避</a>
|
|
|
<a href="#table-section" class="sticky-nav-link">全品种排名</a>
|
|
|
<a href="#details-section" class="sticky-nav-link">品种详情</a>
|
|
|
<a href="#sectors-section" class="sticky-nav-link">板块热度</a>
|
|
|
</nav>
|
|
|
|
|
|
<!-- 交易机会品种（绿色区域） -->
|
|
|
<section id="green-section" class="content-section green-section">
|
|
|
<div class="section-header">
|
|
|
<span class="section-badge badge-green">●</span>
|
|
|
<h2 class="section-title">交易机会品种</h2>
|
|
|
</div>
|
|
|
<div id="green-grid" class="card-grid">
|
|
|
<!-- 由 JS 动态填充 -->
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 重点关注品种（黄色区域） -->
|
|
|
<section id="yellow-section" class="content-section yellow-section">
|
|
|
<div class="section-header">
|
|
|
<span class="section-badge badge-yellow">●</span>
|
|
|
<h2 class="section-title">重点关注品种</h2>
|
|
|
</div>
|
|
|
<div class="list-table-wrap">
|
|
|
<table class="list-table yellow-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>#</th>
|
|
|
<th>品种</th>
|
|
|
<th>收盘价</th>
|
|
|
<th>涨跌幅</th>
|
|
|
<th>综合评分</th>
|
|
|
<th>振幅%</th>
|
|
|
<th>量比</th>
|
|
|
<th>方向</th>
|
|
|
<th>数据日期</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody id="yellow-list-body">
|
|
|
<!-- 由 JS 动态填充 -->
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 规避品种（红色区域） -->
|
|
|
<section id="red-section" class="content-section red-section">
|
|
|
<div class="section-header">
|
|
|
<span class="section-badge badge-red">●</span>
|
|
|
<h2 class="section-title">规避品种</h2>
|
|
|
</div>
|
|
|
<div class="list-table-wrap">
|
|
|
<table class="list-table red-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>#</th>
|
|
|
<th>品种</th>
|
|
|
<th>收盘价</th>
|
|
|
<th>涨跌幅</th>
|
|
|
<th>综合评分</th>
|
|
|
<th>振幅%</th>
|
|
|
<th>量比</th>
|
|
|
<th>方向</th>
|
|
|
<th>数据日期</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody id="red-list-body">
|
|
|
<!-- 由 JS 动态填充 -->
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 全品种排名表格 -->
|
|
|
<section id="table-section" class="content-section table-section">
|
|
|
<div class="section-header">
|
|
|
<h2 class="section-title">全品种排名</h2>
|
|
|
<div class="sort-controls" id="sort-controls">
|
|
|
<span class="sort-label">排序：</span>
|
|
|
<button class="sort-btn active" data-sort="composite_score" data-order="desc">综合评分</button>
|
|
|
<button class="sort-btn" data-sort="activity_score" data-order="desc">活跃度</button>
|
|
|
<button class="sort-btn" data-sort="volume_ratio" data-order="desc">量比</button>
|
|
|
<button class="sort-btn" data-sort="direction_tag" data-order="asc">方向</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="table-wrapper">
|
|
|
<table id="ranking-table" class="ranking-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>排名</th>
|
|
|
<th>品种</th>
|
|
|
<th>最新价</th>
|
|
|
<th>涨跌幅</th>
|
|
|
<th>综合评分</th>
|
|
|
<th>振幅%</th>
|
|
|
<th>量比</th>
|
|
|
<th>趋势</th>
|
|
|
<th>方向</th>
|
|
|
<th>活跃度</th>
|
|
|
<th>数据日期</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<!-- 由 JS 动态填充 -->
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 品种详情卡片 -->
|
|
|
<section id="details-section" class="content-section details-section">
|
|
|
<div class="section-header">
|
|
|
<h2 class="section-title">品种详情</h2>
|
|
|
</div>
|
|
|
<div id="details-grid" class="card-grid">
|
|
|
<!-- 由 JS 动态填充 -->
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 板块热度图 -->
|
|
|
<section id="sectors-section" class="content-section sectors-section">
|
|
|
<div class="section-header">
|
|
|
<h2 class="section-title">板块热度</h2>
|
|
|
</div>
|
|
|
<div id="sectors-grid" class="sectors-grid">
|
|
|
<!-- 由 JS 动态填充 -->
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 页脚免责声明 -->
|
|
|
<footer class="footer-disclaimer">
|
|
|
<p>⚠️ 免责声明：以上内容均由 AI 基于多维因子自动生成，仅供学习参考，不构成任何投资建议。投资有风险，入市需谨慎。</p>
|
|
|
</footer>
|
|
|
</div>
|
|
|
|
|
|
<!-- 空状态（默认显示） -->
|
|
|
<div id="empty-state" class="empty-state">
|
|
|
<div class="empty-icon">📊</div>
|
|
|
<p class="empty-title">暂无复盘数据</p>
|
|
|
<p class="empty-text">请选择复盘日期，然后点击"复盘与计划"按钮生成数据</p>
|
|
|
</div>
|
|
|
</main>
|
|
|
|
|
|
<!-- 品种详情弹窗 -->
|
|
|
<div id="detail-modal" class="modal-overlay" onclick="if(event.target===this)closeModal()">
|
|
|
<div class="modal">
|
|
|
<div class="modal-header">
|
|
|
<span id="modal-title" class="modal-title">品种详情</span>
|
|
|
<button class="modal-close" onclick="closeModal()">✕</button>
|
|
|
</div>
|
|
|
<div id="modal-body" class="modal-body">
|
|
|
<!-- 由 JS 动态填充 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script src="/static/review_plan.js"></script>
|
|
|
</body>
|
|
|
</html>
|
