alpha
/
buffer_platform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '168f06ecf5'
${ noResults }
buffer_platform/app/static/futures_analysis.html

284 lines
15 KiB
Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>期货智析 - 智能期货期权分析系统</title>
<link rel="stylesheet" href="/static/futures_analysis.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="app-container">
<!-- 顶部导航 -->
<header class="top-nav">
<div class="nav-left">
<div class="logo">
<div class="logo-icon"><i class="fas fa-chart-line"></i></div>
<div class="logo-text">
<span class="logo-title">期货智析</span>
<span class="logo-subtitle">智能期货期权分析系统</span>
</div>
</div>
</div>
<nav class="nav-center">
<a href="#" class="nav-item" data-page="market">市场概览</a>
<a href="#" class="nav-item" data-page="events">热点事件</a>
<a href="#" class="nav-item active" data-page="analysis">品种分析</a>
<a href="#" class="nav-item" data-page="risk">风险提醒</a>
</nav>
<div class="nav-right">
<div class="datetime">
<i class="far fa-clock"></i>
<span id="current-time">2026/03/14 16:07:52</span>
</div>
<a href="/static/ai_config.html" class="nav-icon-btn" title="AI配置">
<i class="fas fa-robot"></i>
</a>
<div class="notification">
<i class="far fa-bell"></i>
<span class="badge">3</span>
</div>
<a href="/" class="nav-icon-btn" title="返回首页">
<i class="fas fa-home"></i>
</a>
</div>
</header>
<!-- 主内容区 -->
<main class="main-content">
<!-- 品种列表视图 -->
<div id="list-view" class="view active">
<!-- 搜索和筛选栏 -->
<div class="toolbar">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" id="search-input" placeholder="搜索品种名称或代码...">
</div>
<div class="view-toggle">
<button class="toggle-btn active" data-view="grid"><i class="fas fa-th"></i></button>
<button class="toggle-btn" data-view="list"><i class="fas fa-list"></i></button>
</div>
</div>
<div class="filter-bar">
<div class="filter-group">
<span class="filter-label">分类:</span>
<button class="filter-btn active" data-category="all">全部</button>
<button class="filter-btn" data-category="energy">能源</button>
<button class="filter-btn" data-category="metal">金属</button>
<button class="filter-btn" data-category="agriculture">农产品</button>
<button class="filter-btn" data-category="finance">金融</button>
</div>
<div class="sort-group">
<span class="filter-label">排序:</span>
<select id="sort-select" class="sort-select">
<option value="success_rate">成功率</option>
<option value="trend_score">趋势评分</option>
<option value="change_pct">涨跌幅</option>
<option value="name">名称</option>
</select>
</div>
</div>
<!-- 统计信息 -->
<div class="stats-bar">
<span>共 <strong id="total-count">8</strong> 个品种</span>
<span class="stat-up"><i class="fas fa-arrow-up"></i> <strong id="up-count">7</strong></span>
<span class="stat-down"><i class="fas fa-arrow-down"></i> <strong id="down-count">1</strong></span>
</div>
<!-- 品种卡片网格 -->
<div id="futures-grid" class="futures-grid">
<!-- 动态生成 -->
</div>
</div>
<!-- 详情分析视图 -->
<div id="detail-view" class="view">
<!-- 返回按钮和品种标题 -->
<div class="detail-header">
<button class="back-btn" id="back-btn">
<i class="fas fa-arrow-left"></i> 返回列表
</button>
<div class="detail-title-bar">
<div class="price-info">
<span class="current-price" id="detail-price">¥2,150</span>
<span class="price-change up" id="detail-change">
<i class="fas fa-arrow-up"></i> +196.00 (+10.06%)
</span>
</div>
<div class="quote-info">
<div class="quote-item">
<span class="quote-label">开盘</span>
<span class="quote-value" id="detail-open">1,960</span>
</div>
<div class="quote-item">
<span class="quote-label">最高</span>
<span class="quote-value up" id="detail-high">2,200</span>
</div>
<div class="quote-item">
<span class="quote-label">最低</span>
<span class="quote-value down" id="detail-low">1,940</span>
</div>
<div class="quote-item">
<span class="quote-label">持仓量</span>
<span class="quote-value" id="detail-volume">45,600</span>
</div>
</div>
</div>
</div>
<!-- 周期选择 -->
<div class="period-selector">
<i class="far fa-clock"></i>
<span class="period-label">周期选择</span>
<button class="period-btn" data-period="5">5分钟</button>
<button class="period-btn active" data-period="15">15分钟</button>
<button class="period-btn" data-period="30">30分钟</button>
<button class="period-btn" data-period="60">60分钟</button>
</div>
<!-- 图表和侧边栏 -->
<div class="detail-body">
<!-- K线图表区 -->
<div class="chart-section">
<div id="kline-chart" class="kline-chart"></div>
</div>
<!-- 右侧分析面板 -->
<div class="analysis-panel">
<!-- 交易建议 -->
<div class="panel-card trade-suggestion">
<div class="panel-title">
<i class="fas fa-bullseye"></i>
<span>交易建议</span>
</div>
<div class="suggestion-box up" id="suggestion-box">
<div class="suggestion-label">操作建议</div>
<div class="suggestion-action" id="suggestion-action">逢低做多</div>
<div class="suggestion-reason" id="suggestion-reason">涨停突破，地缘风险推升运价</div>
</div>
<div class="suggestion-details">
<div class="detail-row">
<span class="detail-label">建议入场</span>
<span class="detail-value" id="entry-price">2,137.1</span>
</div>
<div class="detail-row">
<span class="detail-label">目标价位</span>
<span class="detail-value up" id="target-price">2,236</span>
</div>
<div class="detail-row">
<span class="detail-label">止损价位</span>
<span class="detail-value down" id="stop-loss">2,107</span>
</div>
<div class="detail-row">
<span class="detail-label">风险等级</span>
<span class="detail-value" id="risk-level">低</span>
</div>
</div>
</div>
<!-- 技术指标 -->
<div class="panel-card tech-indicators">
<div class="panel-title">
<i class="fas fa-wave-square"></i>
<span>技术指标</span>
</div>
<div class="indicators-grid">
<div class="indicator-item">
<div class="indicator-name">MACD</div>
<div class="indicator-value up" id="macd-signal">金叉</div>
<div class="indicator-detail" id="macd-detail">DIF: -0.0147</div>
</div>
<div class="indicator-item">
<div class="indicator-name">RSI</div>
<div class="indicator-value" id="rsi-value">47</div>
<div class="indicator-detail" id="rsi-status">正常</div>
</div>
<div class="indicator-item">
<div class="indicator-name">布林带</div>
<div class="indicator-value" id="boll-signal">中轨</div>
<div class="indicator-detail" id="boll-detail">区间: 2086-2215</div>
</div>
<div class="indicator-item">
<div class="indicator-name">KDJ</div>
<div class="indicator-value" id="kdj-signal">中性</div>
<div class="indicator-detail" id="kdj-detail">K: 71 D: 87</div>
</div>
</div>
</div>
<!-- 关键点位 -->
<div class="panel-card key-levels">
<div class="panel-title">
<i class="fas fa-chart-bar"></i>
<span>关键点位</span>
</div>
<div class="levels-section">
<div class="levels-header resistance">压力位</div>
<div class="level-row" id="resistance-1">
<span>压力 1</span>
<span class="level-value down">2,200</span>
</div>
<div class="level-row" id="resistance-2">
<span>压力 2</span>
<span class="level-value down">2,300</span>
</div>
<div class="level-row" id="resistance-3">
<span>压力 3</span>
<span class="level-value down">2,400</span>
</div>
</div>
<div class="levels-section">
<div class="levels-header support">支撑位</div>
<div class="level-row" id="support-1">
<span>支撑 1</span>
<span class="level-value up">2,000</span>
</div>
<div class="level-row" id="support-2">
<span>支撑 2</span>
<span class="level-value up">1,900</span>
</div>
<div class="level-row" id="support-3">
<span>支撑 3</span>
<span class="level-value up">1,800</span>
</div>
</div>
</div>
<!-- 多周期一致性 -->
<div class="panel-card multi-period">
<div class="panel-title">
<i class="fas fa-bolt"></i>
<span>多周期一致性</span>
</div>
<div class="period-consistency" id="period-consistency">
<div class="consistency-row">
<span class="period-name">5分钟</span>
<span class="consistency-badge up"><i class="fas fa-arrow-up"></i> 上涨</span>
</div>
<div class="consistency-row">
<span class="period-name">15分钟</span>
<span class="consistency-badge up"><i class="fas fa-arrow-up"></i> 上涨</span>
</div>
<div class="consistency-row">
<span class="period-name">30分钟</span>
<span class="consistency-badge up"><i class="fas fa-arrow-up"></i> 上涨</span>
</div>
<div class="consistency-row">
<span class="period-name">60分钟</span>
<span class="consistency-badge neutral"><i class="fas fa-minus"></i> 震荡</span>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="/static/futures_analysis.js"></script>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink