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 '82b8f859d8'
${ noResults }
buffer_platform/app/static/futures_analysis.html

403 lines
20 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 class="theme-minimal">
<div class="bg-grid"></div>
<div class="bg-glow"></div>
<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 class="logo-pulse"></div>
</div>
<div class="logo-text">
<span class="logo-title">期货智析</span>
<span class="logo-subtitle">FUTURES INTELLIGENCE</span>
</div>
</div>
</div>
<nav class="nav-center">
<a href="#" class="nav-item active" data-page="analysis">
<span class="nav-icon"><i class="fas fa-microchip"></i></span>
<span>品种分析</span>
</a>
<a href="#" class="nav-item" data-page="watched">
<span class="nav-icon"><i class="fas fa-star"></i></span>
<span>自选</span>
</a>
<a href="#" class="nav-item" data-page="market">
<span class="nav-icon"><i class="fas fa-globe"></i></span>
<span>市场概览</span>
</a>
<a href="#" class="nav-item" data-page="risk">
<span class="nav-icon"><i class="fas fa-shield-alt"></i></span>
<span>风险预警</span>
</a>
</nav>
<div class="nav-right">
<div class="system-status">
<span class="status-dot"></span>
<span class="status-text">LIVE</span>
</div>
<div class="datetime" id="current-time">--</div>
<a href="/ai-config" class="nav-btn" title="AI配置">
<i class="fas fa-brain"></i>
</a>
<button class="nav-btn theme-toggle" id="theme-toggle" title="切换主题">
<i class="fas fa-moon"></i>
</button>
<a href="/" class="nav-btn" title="返回首页">
<i class="fas fa-th-large"></i>
</a>
</div>
</header>
<!-- 主内容区 -->
<main class="main-content">
<!-- 品种列表视图 -->
<div id="list-view" class="view active">
<!-- 搜索栏 -->
<div class="search-section">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" id="search-input" placeholder="搜索品种名称或代码...">
<kbd>⌘K</kbd>
</div>
<div class="view-controls">
<button class="view-btn active" data-view="grid" title="网格视图">
<i class="fas fa-grid-2"></i>
<span>网格</span>
</button>
<button class="view-btn" data-view="list" title="列表视图">
<i class="fas fa-list"></i>
<span>列表</span>
</button>
</div>
</div>
<!-- 筛选栏 -->
<div class="filter-bar">
<div class="filter-tabs">
<button class="filter-tab active" data-category="all">
<span>全部</span>
<span class="filter-count" id="count-all">0</span>
</button>
<button class="filter-tab" data-category="watched">
<i class="fas fa-star"></i>
<span>自选</span>
<span class="filter-count" id="count-watched">0</span>
</button>
<button class="filter-tab" data-category="energy">
<i class="fas fa-fire"></i>
<span>能源</span>
</button>
<button class="filter-tab" data-category="metal">
<i class="fas fa-cube"></i>
<span>金属</span>
</button>
<button class="filter-tab" data-category="agriculture">
<i class="fas fa-seedling"></i>
<span>农产品</span>
</button>
<button class="filter-tab" data-category="finance">
<i class="fas fa-chart-pie"></i>
<span>金融</span>
</button>
</div>
<div class="sort-select">
<select id="sort-select">
<option value="trend_score">趋势评分</option>
<option value="success_rate">成功率</option>
<option value="change_pct">涨跌幅</option>
<option value="name">名称</option>
</select>
</div>
</div>
<!-- 统计概览 -->
<div class="stats-overview">
<div class="stat-card">
<div class="stat-icon"><i class="fas fa-layer-group"></i></div>
<div class="stat-info">
<span class="stat-value" id="total-count">0</span>
<span class="stat-label">监控品种</span>
</div>
</div>
<div class="stat-card up">
<div class="stat-icon"><i class="fas fa-arrow-trend-up"></i></div>
<div class="stat-info">
<span class="stat-value" id="up-count">0</span>
<span class="stat-label">上涨趋势</span>
</div>
</div>
<div class="stat-card down">
<div class="stat-icon"><i class="fas fa-arrow-trend-down"></i></div>
<div class="stat-info">
<span class="stat-value" id="down-count">0</span>
<span class="stat-label">下跌趋势</span>
</div>
</div>
<div class="stat-card neutral">
<div class="stat-icon"><i class="fas fa-arrows-left-right"></i></div>
<div class="stat-info">
<span class="stat-value" id="neutral-count">0</span>
<span class="stat-label">震荡整理</span>
</div>
</div>
</div>
<!-- 品种卡片网格 -->
<div id="futures-grid" class="futures-grid">
<!-- 动态生成 -->
</div>
</div>
<!-- 详情分析视图 -->
<div id="detail-view" class="view">
<!-- 返回按钮 -->
<button class="back-btn" id="back-btn">
<i class="fas fa-arrow-left"></i>
<span>返回</span>
</button>
<!-- 品种标题区 -->
<div class="detail-header">
<div class="header-left">
<div class="symbol-info">
<span class="symbol-name" id="detail-name">--</span>
<span class="symbol-code" id="detail-symbol">--</span>
</div>
<div class="price-main">
<span class="price-value" id="detail-price">--</span>
<span class="price-change" id="detail-change">--</span>
<div class="price-levels">
<span class="level-tag resistance" id="detail-r1">R1: --</span>
<span class="level-tag support" id="detail-s1">S1: --</span>
</div>
</div>
</div>
<div class="header-right">
<div class="quote-grid">
<div class="quote-item">
<span class="quote-label">开盘</span>
<span class="quote-value" id="detail-open">--</span>
</div>
<div class="quote-item">
<span class="quote-label">最高</span>
<span class="quote-value up" id="detail-high">--</span>
</div>
<div class="quote-item">
<span class="quote-label">最低</span>
<span class="quote-value down" id="detail-low">--</span>
</div>
<div class="quote-item">
<span class="quote-label">成交量</span>
<span class="quote-value" id="detail-volume">--</span>
</div>
</div>
</div>
</div>
<!-- 周期选择 -->
<div class="period-bar">
<span class="period-label"><i class="fas fa-clock"></i> 周期</span>
<div class="period-btns">
<button class="period-btn" data-period="5">5M</button>
<button class="period-btn active" data-period="15">15M</button>
<button class="period-btn" data-period="30">30M</button>
<button class="period-btn" data-period="60">1H</button>
</div>
</div>
<!-- 图表和侧边栏 -->
<div class="detail-body">
<div class="chart-section">
<!-- K线图表区 -->
<div class="chart-container">
<div class="chart-header">
<span class="chart-title">K线图</span>
<div class="chart-legend">
<span class="legend-item"><span class="legend-dot ma5"></span>MA5</span>
<span class="legend-item"><span class="legend-dot ma10"></span>MA10</span>
<span class="legend-item"><span class="legend-dot ma20"></span>MA20</span>
</div>
</div>
<div id="kline-chart" class="kline-chart"></div>
</div>
<!-- 历史分析记录 -->
<div class="history-container">
<div class="history-header">
<i class="fas fa-clock-rotate-left"></i>
<span>历史分析记录</span>
</div>
<div class="history-list" id="history-list">
<!-- 动态生成 -->
</div>
</div>
</div>
<!-- 右侧分析面板 -->
<div class="analysis-sidebar">
<!-- AI交易建议 -->
<div class="panel-card suggestion-card" id="suggestion-card">
<div class="panel-header">
<i class="fas fa-robot"></i>
<span>AI 交易建议</span>
<span class="panel-header-action"><i class="fas fa-expand"></i></span>
</div>
<div class="suggestion-content">
<div class="suggestion-badge" id="suggestion-badge">--</div>
<div class="suggestion-reason" id="suggestion-reason">--</div>
</div>
<div class="trade-params">
<div class="param-row">
<span class="param-label">入场</span>
<span class="param-value" id="entry-price">--</span>
</div>
<div class="param-row">
<span class="param-label">目标</span>
<span class="param-value up" id="target-price">--</span>
</div>
<div class="param-row">
<span class="param-label">止损</span>
<span class="param-value down" id="stop-loss">--</span>
</div>
<div class="param-row">
<span class="param-label">风险</span>
<span class="param-value" id="risk-level">--</span>
</div>
</div>
</div>
<!-- 技术指标 -->
<div class="panel-card indicators-card">
<div class="panel-header">
<i class="fas fa-wave-pulse"></i>
<span>技术指标</span>
</div>
<div class="indicators-grid">
<div class="indicator-cell">
<span class="indicator-label">MACD</span>
<span class="indicator-value" id="macd-signal">--</span>
<span class="indicator-detail" id="macd-detail">--</span>
</div>
<div class="indicator-cell">
<span class="indicator-label">RSI</span>
<span class="indicator-value" id="rsi-value">--</span>
<span class="indicator-detail" id="rsi-status">--</span>
</div>
<div class="indicator-cell">
<span class="indicator-label">BOLL</span>
<span class="indicator-value" id="boll-signal">--</span>
<span class="indicator-detail" id="boll-detail">--</span>
</div>
<div class="indicator-cell">
<span class="indicator-label">KDJ</span>
<span class="indicator-value" id="kdj-signal">--</span>
<span class="indicator-detail" id="kdj-detail">--</span>
</div>
</div>
</div>
<!-- 关键点位 -->
<div class="panel-card levels-card">
<div class="panel-header">
<i class="fas fa-crosshairs"></i>
<span>关键点位</span>
</div>
<div class="levels-container">
<div class="level-group resistance">
<span class="level-group-label">压力</span>
<div class="level-item" id="resistance-1"><span>R1</span><span>--</span></div>
<div class="level-item" id="resistance-2"><span>R2</span><span>--</span></div>
</div>
<div class="level-divider"></div>
<div class="level-item pivot-point" id="pivot-point">
<span>中枢 (PP)</span>
<span>--</span>
</div>
<div class="level-divider"></div>
<div class="level-group support">
<span class="level-group-label">支撑</span>
<div class="level-item" id="support-1"><span>S1</span><span>--</span></div>
<div class="level-item" id="support-2"><span>S2</span><span>--</span></div>
</div>
</div>
</div>
<!-- 多周期趋势 -->
<div class="panel-card trends-card">
<div class="panel-header">
<i class="fas fa-timeline"></i>
<span>多周期趋势</span>
</div>
<div class="trends-container" id="period-trends">
<!-- 动态生成 -->
</div>
</div>
<!-- 趋势评分 -->
<div class="panel-card score-card">
<div class="panel-header">
<i class="fas fa-gauge-high"></i>
<span>趋势评分</span>
</div>
<div class="score-display">
<div class="score-ring">
<svg viewBox="0 0 100 100">
<circle class="score-bg" cx="50" cy="50" r="45"/>
<circle class="score-fill" id="score-fill" cx="50" cy="50" r="45"/>
</svg>
<span class="score-value" id="trend-score">--</span>
</div>
<div class="score-label">综合评分</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- AI建议详情对话框 -->
<div class="modal-overlay" id="suggestion-modal">
<div class="modal-content">
<div class="modal-header">
<h3><i class="fas fa-robot"></i> AI 交易建议详情</h3>
<button class="modal-close" onclick="closeModal('suggestion-modal')"><i class="fas fa-xmark"></i></button>
</div>
<div class="modal-body" id="suggestion-modal-body">
<!-- 动态生成 -->
</div>
</div>
</div>
<!-- 历史记录详情对话框 -->
<div class="modal-overlay" id="history-modal">
<div class="modal-content">
<div class="modal-header">
<h3><i class="fas fa-clock-rotate-left"></i> 分析记录详情</h3>
<button class="modal-close" onclick="closeModal('history-modal')"><i class="fas fa-xmark"></i></button>
</div>
<div class="modal-body" id="history-modal-body">
<!-- 动态生成 -->
</div>
</div>
</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