338 lines
17 KiB
HTML
338 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>AI 金融分析平台</title>
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
<link href="/static/css/style.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar">
|
||
<div class="nav-container">
|
||
<div class="nav-brand">
|
||
<i class="fas fa-chart-line"></i>
|
||
<span>AI 金融分析平台</span>
|
||
</div>
|
||
<div class="nav-menu">
|
||
<a href="#screening" class="nav-link active" data-tab="screening">
|
||
<i class="fas fa-filter"></i>
|
||
股票筛选
|
||
</a>
|
||
<a href="#analysis" class="nav-link" data-tab="analysis">
|
||
<i class="fas fa-chart-bar"></i>
|
||
综合分析
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主容器 -->
|
||
<main class="main-container">
|
||
<!-- 股票筛选页面 -->
|
||
<section id="screening" class="tab-content active">
|
||
<div class="page-header">
|
||
<h1><i class="fas fa-filter"></i> 股票筛选</h1>
|
||
<p>运用专业投资策略，从沪深300成分股中筛选出最具投资价值的标的</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>筛选参数</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="screening-info-main">
|
||
<div class="screening-criteria">
|
||
<div class="criteria-item">
|
||
<i class="fas fa-star"></i>
|
||
<span>综合评分 ≥ 60分</span>
|
||
</div>
|
||
<div class="criteria-item">
|
||
<i class="fas fa-chart-bar"></i>
|
||
<span>三维度综合评估</span>
|
||
</div>
|
||
<div class="criteria-item">
|
||
<i class="fas fa-list"></i>
|
||
<span>最多50只股票</span>
|
||
</div>
|
||
</div>
|
||
<div class="strategy-overview">
|
||
<div class="strategy-grid">
|
||
<div class="strategy-item">
|
||
<i class="fas fa-dollar-sign"></i>
|
||
<div class="strategy-info">
|
||
<h4>价值投资</h4>
|
||
<p>财务指标、估值分析</p>
|
||
</div>
|
||
</div>
|
||
<div class="strategy-item">
|
||
<i class="fas fa-rocket"></i>
|
||
<div class="strategy-info">
|
||
<h4>成长投资</h4>
|
||
<p>增长潜力、盈利能力</p>
|
||
</div>
|
||
</div>
|
||
<div class="strategy-item">
|
||
<i class="fas fa-chart-area"></i>
|
||
<div class="strategy-info">
|
||
<h4>技术分析</h4>
|
||
<p>趋势判断、交易时机</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button id="screening-btn" class="btn btn-primary">
|
||
<i class="fas fa-search"></i>
|
||
开始智能筛选
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="screening-results" class="results-section" style="display: none;">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>筛选结果</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="screening-table"></div>
|
||
<div class="charts-grid">
|
||
<div class="chart-container">
|
||
<canvas id="scoring-chart"></canvas>
|
||
</div>
|
||
<div class="chart-container">
|
||
<canvas id="industry-chart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 综合分析页面 -->
|
||
<section id="analysis" class="tab-content">
|
||
<div class="page-header">
|
||
<h1><i class="fas fa-chart-bar"></i> 综合分析</h1>
|
||
<p>从价值投资、成长投资、技术分析三个维度全面评估股票投资价值</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>分析参数</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="analysis-input-section">
|
||
<div class="input-wrapper">
|
||
<label for="stock-code">股票代码</label>
|
||
<input type="text" id="stock-code" class="form-input" placeholder="如: 000001" value="000001">
|
||
<small class="input-hint">输入6位股票代码，系统将自动识别交易所</small>
|
||
</div>
|
||
<button id="analysis-btn" class="btn btn-primary analysis-btn">
|
||
<i class="fas fa-chart-line"></i>
|
||
开始综合分析
|
||
</button>
|
||
</div>
|
||
|
||
<div class="analysis-info">
|
||
<div class="info-grid">
|
||
<div class="info-item">
|
||
<i class="fas fa-dollar-sign"></i>
|
||
<span>价值投资</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<i class="fas fa-rocket"></i>
|
||
<span>成长投资</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<i class="fas fa-chart-area"></i>
|
||
<span>技术分析</span>
|
||
</div>
|
||
</div>
|
||
<p class="analysis-desc">三维度专业分析，为您提供全面的投资决策支持</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="analysis-results" class="results-section" style="display: none;">
|
||
<!-- 股票基本信息和财务指标 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>股票基本信息</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="metrics-grid">
|
||
<div class="metric-card">
|
||
<div class="metric-icon">🏷️</div>
|
||
<div class="metric-value" id="stock-code-value">--</div>
|
||
<div class="metric-label">股票代码</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">🏢</div>
|
||
<div class="metric-value" id="stock-name-value">--</div>
|
||
<div class="metric-label">股票名称</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">🏭</div>
|
||
<div class="metric-value" id="stock-industry-value">--</div>
|
||
<div class="metric-label">所属行业</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">💰</div>
|
||
<div class="metric-value" id="stock-price-value">--</div>
|
||
<div class="metric-label">当前价格</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">📊</div>
|
||
<div class="metric-value" id="stock-market-cap-value">--</div>
|
||
<div class="metric-label">市值</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">📈</div>
|
||
<div class="metric-value" id="stock-pe-value">--</div>
|
||
<div class="metric-label">市盈率</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 财务指标 -->
|
||
<div style="margin-top: 1.5rem;">
|
||
<h4>关键财务指标</h4>
|
||
<div id="financial-ratios"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 综合投资评级 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>综合投资评级</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="metrics-grid">
|
||
<div class="metric-card">
|
||
<div class="metric-icon">🎯</div>
|
||
<div class="metric-value" id="best-strategy-value">--</div>
|
||
<div class="metric-label">最佳策略</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">📊</div>
|
||
<div class="metric-value" id="avg-score-value">--</div>
|
||
<div class="metric-label">综合评分</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">💡</div>
|
||
<div class="metric-value" id="final-recommendation-value">--</div>
|
||
<div class="metric-label">投资建议</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">📈</div>
|
||
<div class="metric-value" id="confidence-level-value">--</div>
|
||
<div class="metric-label">置信度</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 投资分析总结 -->
|
||
<div style="margin-top: 1.5rem;">
|
||
<h4>投资分析总结</h4>
|
||
<div id="summary-content"></div>
|
||
|
||
<!-- 策略评分详情表格 -->
|
||
<div style="margin-top: 1.5rem;">
|
||
<h5>各策略详细评分</h5>
|
||
<div id="strategy-comparison-table"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 交易信号分析 (仅技术分析策略显示) -->
|
||
<div id="trading-signals-section" class="card" style="display: none;">
|
||
<div class="card-header">
|
||
<h3>交易时机分析</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<!-- 交易信号概览 -->
|
||
<div class="metrics-grid">
|
||
<div class="metric-card">
|
||
<div class="metric-icon">📈</div>
|
||
<div class="metric-value" id="entry-signal-value">--</div>
|
||
<div class="metric-label">买入信号</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">📉</div>
|
||
<div class="metric-value" id="exit-signal-value">--</div>
|
||
<div class="metric-label">卖出信号</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">🎯</div>
|
||
<div class="metric-value" id="trading-action-value">--</div>
|
||
<div class="metric-label">操作建议</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">⚠️</div>
|
||
<div class="metric-value" id="risk-level-value">--</div>
|
||
<div class="metric-label">风险评级</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">💰</div>
|
||
<div class="metric-value" id="entry-price-value">--</div>
|
||
<div class="metric-label">建议买入价</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">💸</div>
|
||
<div class="metric-value" id="exit-price-value">--</div>
|
||
<div class="metric-label">建议卖出价</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">🛡️</div>
|
||
<div class="metric-value" id="stop-loss-value">--</div>
|
||
<div class="metric-label">建议止损</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">🎯</div>
|
||
<div class="metric-value" id="take-profit-value">--</div>
|
||
<div class="metric-label">建议止盈</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">⚖️</div>
|
||
<div class="metric-value" id="risk-reward-ratio-value">--</div>
|
||
<div class="metric-label">风险收益比</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-icon">📊</div>
|
||
<div class="metric-value" id="position-size-value">--</div>
|
||
<div class="metric-label">建议仓位</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 交易详情 -->
|
||
<div style="margin-top: 1.5rem;">
|
||
<h4>交易信号详情</h4>
|
||
<div id="trading-signals-details" class="card" style="margin-top: 0.5rem;">
|
||
<div class="card-body">
|
||
<div id="signals-content"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- 加载动画 -->
|
||
<div id="loading" class="loading-overlay" style="display: none;">
|
||
<div class="spinner"></div>
|
||
<p>正在处理中...</p>
|
||
</div>
|
||
|
||
<!-- Toast 通知 -->
|
||
<div id="toast-container"></div>
|
||
|
||
<!-- 脚本 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script src="/static/js/app.js"></script>
|
||
</body>
|
||
</html> |