搭建期货量化管理后台 MVP，支持行情查看、博弈分析、持仓录入、品种合约管理
This commit is contained in:
@@ -0,0 +1,93 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}系统管理{% endblock %}
|
||||
{% block heading %}系统管理{% endblock %}
|
||||
{% block breadcrumb %}品种与合约{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{# ── New Product ── #}
|
||||
<div class="section-title">新建品种</div>
|
||||
<div class="form-card" style="margin-bottom:24px;">
|
||||
<form method="post" action="/admin/product" style="display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;">
|
||||
<div class="form-group" style="margin-bottom:0;flex:1;min-width:120px;">
|
||||
<label>品种代码</label>
|
||||
<input type="text" name="code" required placeholder="FG" maxlength="6" style="text-transform:uppercase;">
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom:0;flex:1;min-width:120px;">
|
||||
<label>品种名称</label>
|
||||
<input type="text" name="name" required placeholder="玻璃">
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom:0;flex:1;min-width:120px;">
|
||||
<label>交易所</label>
|
||||
<select name="exchange" required>
|
||||
{% for ex in exchanges %}
|
||||
<option value="{{ ex }}">{{ ex }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">新建</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{# ── Product List ── #}
|
||||
{% for p in products %}
|
||||
<div class="section-title">{{ p.code }} · {{ p.name }} <span style="font-weight:400;color:var(--sub);font-size:0.78rem;">{{ p.exchange }}</span></div>
|
||||
|
||||
{# ── New Contract ── #}
|
||||
<div class="form-card" style="margin-bottom:12px;">
|
||||
<form method="post" action="/admin/contract" style="display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;">
|
||||
<input type="hidden" name="product_id" value="{{ p.id }}">
|
||||
<div class="form-group" style="margin-bottom:0;flex:1;min-width:140px;">
|
||||
<label>合约代码</label>
|
||||
<input type="text" name="code" required placeholder="{{ p.code }}2609" maxlength="10" style="text-transform:uppercase;">
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom:0;flex:2;min-width:160px;">
|
||||
<label>合约名称</label>
|
||||
<input type="text" name="name" required placeholder="{{ p.name }}2609">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">添加合约</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{# ── Contract List ── #}
|
||||
{% if p.contracts %}
|
||||
<div class="table-wrap" style="margin-bottom:20px;">
|
||||
<table>
|
||||
<tr><th>合约代码</th><th>名称</th><th>状态</th><th>行情</th><th>操作</th></tr>
|
||||
{% for c in p.contracts %}
|
||||
<tr>
|
||||
<td><strong>{{ c.code }}</strong></td>
|
||||
<td>{{ c.name }}</td>
|
||||
<td>
|
||||
{% if c.is_active %}
|
||||
<span class="badge badge-up">启用</span>
|
||||
{% else %}
|
||||
<span class="badge badge-down">停用</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td><a href="/contracts/{{ c.code }}" style="color:var(--accent);text-decoration:none;">查看 →</a></td>
|
||||
<td>
|
||||
<form method="post" action="/admin/contract/{{ c.id }}/toggle" style="display:inline;">
|
||||
<button style="background:none;border:none;color:var(--sub);cursor:pointer;font-size:0.82rem;">
|
||||
{% if c.is_active %}停用{% else %}启用{% endif %}
|
||||
</button>
|
||||
</form>
|
||||
<form method="post" action="/admin/contract/{{ c.id }}/delete" style="display:inline;" onsubmit="return confirm('删除 {{ c.code }}？此操作不可恢复。')">
|
||||
<button style="background:none;border:none;color:var(--danger);cursor:pointer;font-size:0.82rem;">删除</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" action="/admin/product/{{ p.id }}/delete" onsubmit="return confirm('删除品种 {{ p.code }} 及其所有合约？')" style="text-align:right;margin-bottom:28px;">
|
||||
<button style="background:none;border:none;color:var(--danger);cursor:pointer;font-size:0.82rem;">删除品种 {{ p.code }}</button>
|
||||
</form>
|
||||
|
||||
{% else %}
|
||||
<div style="text-align:center;padding:40px;color:var(--sub);">暂无品种，请先新建。</div>
|
||||
{% endfor %}
|
||||
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,69 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}博弈分析{% endblock %}
|
||||
{% block heading %}博弈分析{% endblock %}
|
||||
{% block breadcrumb %}机构持仓{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% if latest_date %}
|
||||
<div class="stat-grid">
|
||||
<div class="stat-card">
|
||||
<div class="label">数据日期</div>
|
||||
<div class="value">{{ latest_date }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">参考现价</div>
|
||||
<div class="value">{{ current_price }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">六家净空</div>
|
||||
<div class="value">{{ total_net_short }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">浮动盈亏</div>
|
||||
<div class="value">{{ total_pnl }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">机构持仓明细</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<tr>
|
||||
<th>机构</th><th>多单</th><th>空单</th><th>多单成本</th><th>空单成本</th><th>净持仓</th><th>净盈亏</th>
|
||||
</tr>
|
||||
{% for r in rows %}
|
||||
<tr>
|
||||
<td><strong>{{ r.institution }}</strong></td>
|
||||
<td>{{ r.long_pos }}</td>
|
||||
<td>{{ r.short_pos }}</td>
|
||||
<td>{{ r.long_cost }}</td>
|
||||
<td>{{ r.short_cost }}</td>
|
||||
<td>{{ r.net_pos }}</td>
|
||||
<td>
|
||||
{% if r.pnl_raw > 0 %}
|
||||
<span class="badge badge-up">{{ r.pnl }}</span>
|
||||
{% elif r.pnl_raw < 0 %}
|
||||
<span class="badge badge-down">{{ r.pnl }}</span>
|
||||
{% else %}
|
||||
<span class="na">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tr style="font-weight:700; background:var(--th-bg);">
|
||||
<td>合计</td>
|
||||
<td>{{ totals.long_pos }}</td>
|
||||
<td>{{ totals.short_pos }}</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>{{ totals.net_pos }}</td>
|
||||
<td>{{ totals.pnl }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="text-align:center;padding:60px 0;color:var(--sub);">
|
||||
<p style="font-size:1.1rem;">暂无持仓数据</p>
|
||||
<p style="margin-top:8px;"><a href="/input/" style="color:var(--accent);">前往录入 →</a></p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,263 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}期货量化{% endblock %}</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #f8fafc; --surface: #fff; --fg: #1e293b; --sub: #64748b;
|
||||
--border: #e2e8f0; --accent: #3b82f6; --accent-light: #eff6ff;
|
||||
--th-bg: #f1f5f9; --th-fg: #475569;
|
||||
--danger: #ef4444; --danger-bg: #fef2f2; --danger-fg: #dc2626;
|
||||
--success: #10b981; --success-bg: #ecfdf5; --success-fg: #059669;
|
||||
--warn: #f59e0b; --warn-bg: #fffbeb; --warn-fg: #d97706;
|
||||
--na: #94a3b8;
|
||||
--sidebar-w: 220px; --header-h: 56px;
|
||||
}
|
||||
[data-theme="dark"] {
|
||||
--bg: #0f172a; --surface: #1e293b; --fg: #e2e8f0; --sub: #94a3b8;
|
||||
--border: #334155; --accent: #60a5fa; --accent-light: #1e3a5f;
|
||||
--th-bg: #1e293b; --th-fg: #cbd5e1;
|
||||
--danger: #f87171; --danger-bg: #3b1515; --danger-fg: #fca5a5;
|
||||
--success: #34d399; --success-bg: #0a1f17; --success-fg: #6ee7b7;
|
||||
--warn: #fbbf24; --warn-bg: #2d2110; --warn-fg: #fcd34d;
|
||||
--na: #64748b;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
|
||||
color: var(--fg); background: var(--bg);
|
||||
display: flex; min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ── Sidebar ── */
|
||||
.sidebar {
|
||||
width: var(--sidebar-w); min-width: var(--sidebar-w);
|
||||
background: var(--surface); border-right: 1px solid var(--border);
|
||||
display: flex; flex-direction: column; position: fixed;
|
||||
top: 0; left: 0; bottom: 0; z-index: 50;
|
||||
padding: 0;
|
||||
}
|
||||
.sidebar-logo {
|
||||
height: var(--header-h); display: flex; align-items: center;
|
||||
padding: 0 20px; font-size: 1rem; font-weight: 700;
|
||||
letter-spacing: 0.02em; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; }
|
||||
.sidebar-nav a {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 10px 20px; color: var(--sub); text-decoration: none;
|
||||
font-size: 0.9rem; transition: background .12s, color .12s;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
.sidebar-nav a:hover { background: var(--accent-light); color: var(--fg); }
|
||||
.sidebar-nav a.active {
|
||||
color: var(--accent); background: var(--accent-light);
|
||||
border-left-color: var(--accent); font-weight: 600;
|
||||
}
|
||||
.sidebar-nav .icon { font-size: 1.1rem; width: 22px; text-align: center; }
|
||||
.sidebar-footer {
|
||||
padding: 16px 20px; border-top: 1px solid var(--border);
|
||||
}
|
||||
.theme-btn {
|
||||
width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 6px;
|
||||
background: var(--surface); color: var(--fg); cursor: pointer;
|
||||
font-size: 0.82rem; transition: background .12s;
|
||||
}
|
||||
.theme-btn:hover { background: var(--th-bg); }
|
||||
|
||||
/* ── Main ── */
|
||||
.main {
|
||||
margin-left: var(--sidebar-w); flex: 1;
|
||||
display: flex; flex-direction: column; min-height: 100vh;
|
||||
}
|
||||
.main-header {
|
||||
height: var(--header-h); min-height: var(--header-h);
|
||||
padding: 0 28px; display: flex; align-items: center;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
}
|
||||
.main-header h1 { font-size: 1.15rem; font-weight: 600; }
|
||||
.breadcrumb { color: var(--sub); font-size: 0.82rem; margin-left: 12px; }
|
||||
.breadcrumb a { color: var(--sub); text-decoration: none; }
|
||||
.breadcrumb a:hover { color: var(--accent); }
|
||||
|
||||
.main-content { flex: 1; padding: 24px 28px; }
|
||||
|
||||
/* ── Components ── */
|
||||
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
|
||||
.stat-card {
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: 10px; padding: 18px 20px;
|
||||
}
|
||||
.stat-card .label { font-size: 0.78rem; color: var(--sub); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.stat-card .value { font-size: 1.5rem; font-weight: 700; }
|
||||
.stat-card .trend { font-size: 0.8rem; margin-top: 4px; }
|
||||
.trend-up { color: var(--success-fg); }
|
||||
.trend-down { color: var(--danger-fg); }
|
||||
|
||||
.section-title {
|
||||
font-size: 0.85rem; font-weight: 600; color: var(--sub);
|
||||
text-transform: uppercase; letter-spacing: 0.04em;
|
||||
margin-bottom: 12px; padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* ── Table ── */
|
||||
.table-wrap {
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: 10px; overflow: hidden; margin-bottom: 24px;
|
||||
}
|
||||
table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
|
||||
th {
|
||||
background: var(--th-bg); color: var(--th-fg); font-weight: 600;
|
||||
padding: 10px 14px; border-bottom: 2px solid var(--border);
|
||||
text-align: center; white-space: nowrap; font-size: 0.8rem;
|
||||
text-transform: uppercase; letter-spacing: 0.03em;
|
||||
}
|
||||
td { padding: 9px 14px; border-bottom: 1px solid var(--border); text-align: center; }
|
||||
tr:last-child td { border-bottom: none; }
|
||||
tr:hover td { background: var(--accent-light); }
|
||||
td:first-child { font-weight: 500; }
|
||||
tr.active td { background: #dbeafe !important; }
|
||||
[data-theme="dark"] tr.active td { background: #1e3a5f !important; }
|
||||
.na { color: var(--na); }
|
||||
|
||||
/* ── Badges ── */
|
||||
.badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
|
||||
.badge-up { background: var(--success-bg); color: var(--success-fg); }
|
||||
.badge-down { background: var(--danger-bg); color: var(--danger-fg); }
|
||||
.badge-warn { background: var(--warn-bg); color: var(--warn-fg); }
|
||||
|
||||
/* ── Forms ── */
|
||||
.form-card {
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: 10px; padding: 24px; max-width: 520px;
|
||||
}
|
||||
.form-group { margin-bottom: 16px; }
|
||||
.form-group label {
|
||||
display: block; font-size: 0.8rem; font-weight: 600;
|
||||
color: var(--sub); margin-bottom: 5px;
|
||||
text-transform: uppercase; letter-spacing: 0.03em;
|
||||
}
|
||||
.form-group input, .form-group select {
|
||||
width: 100%; padding: 9px 12px; border: 1px solid var(--border);
|
||||
border-radius: 6px; font-size: 0.9rem;
|
||||
background: var(--bg); color: var(--fg);
|
||||
transition: border-color .15s;
|
||||
}
|
||||
.form-group input:focus, .form-group select:focus {
|
||||
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light);
|
||||
}
|
||||
.btn {
|
||||
padding: 9px 22px; border: none; border-radius: 6px;
|
||||
font-size: 0.88rem; font-weight: 600; cursor: pointer;
|
||||
transition: background .12s;
|
||||
}
|
||||
.btn-primary { background: var(--accent); color: #fff; }
|
||||
.btn-primary:hover { opacity: 0.9; }
|
||||
|
||||
/* ── Drawer ── */
|
||||
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 99; display: none; }
|
||||
.drawer-overlay.show { display: block; }
|
||||
.drawer { position: fixed; top: 0; right: 0; width: 360px; height: 100%; background: var(--surface); border-left: 1px solid var(--border); z-index: 100; padding: 28px 24px; transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; box-shadow: -4px 0 24px rgba(0,0,0,.12); }
|
||||
.drawer.show { transform: translateX(0); }
|
||||
.drawer h3 { font-size: 1rem; margin-bottom: 4px; }
|
||||
.drawer .date-label { color: var(--sub); font-size: 0.82rem; margin-bottom: 18px; }
|
||||
.drawer .calc-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 16px; }
|
||||
.drawer .calc-table td { padding: 5px 10px; border: 1px solid var(--border); text-align: center; }
|
||||
.drawer .calc-table tr:first-child td { background: var(--th-bg); font-weight: 600; color: var(--th-fg); }
|
||||
.drawer .result { font-size: 0.85rem; line-height: 2; color: var(--fg); }
|
||||
.drawer .result b { font-size: 1.15rem; }
|
||||
.drawer .close-btn { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--sub); line-height: 1; }
|
||||
.drawer .close-btn:hover { color: var(--fg); }
|
||||
.amp-cell { cursor: pointer; color: var(--accent); font-weight: 600; }
|
||||
.amp-cell:hover { text-decoration: underline; }
|
||||
|
||||
/* ── Tags / Chips ── */
|
||||
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
|
||||
.tag {
|
||||
padding: 5px 12px; border-radius: 20px; font-size: 0.78rem;
|
||||
font-weight: 500; cursor: pointer; text-decoration: none;
|
||||
border: 1px solid var(--border); color: var(--sub);
|
||||
transition: all .12s;
|
||||
}
|
||||
.tag:hover, .tag.active { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">📊 期货量化</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="/contracts/" class="{% if active_nav == 'contracts' %}active{% endif %}">
|
||||
<span class="icon">📈</span> 行情数据
|
||||
</a>
|
||||
<a href="/analysis/" class="{% if active_nav == 'analysis' %}active{% endif %}">
|
||||
<span class="icon">⚔️</span> 博弈分析
|
||||
</a>
|
||||
<a href="/input/" class="{% if active_nav == 'input' %}active{% endif %}">
|
||||
<span class="icon">📝</span> 数据录入
|
||||
</a>
|
||||
<a href="/admin/" class="{% if active_nav == 'admin' %}active{% endif %}">
|
||||
<span class="icon">⚙️</span> 系统管理
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<button class="theme-btn" id="themeToggle">🌙 暗色模式</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="main-header">
|
||||
<h1>{% block heading %}概览{% endblock %}</h1>
|
||||
<span class="breadcrumb">{% block breadcrumb %}{% endblock %}</span>
|
||||
</header>
|
||||
<div class="main-content">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="drawer-overlay" id="overlay" onclick="closeDrawer()"></div>
|
||||
<div class="drawer" id="drawer">
|
||||
<button class="close-btn" onclick="closeDrawer()">×</button>
|
||||
<h3 id="drawer-title"></h3>
|
||||
<p class="date-label" id="drawer-date"></p>
|
||||
<table class="calc-table" id="drawer-table"></table>
|
||||
<div class="result" id="drawer-result"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var themeBtn = document.getElementById('themeToggle');
|
||||
themeBtn.addEventListener('click', toggleTheme);
|
||||
function setTheme(dark) {
|
||||
if (dark) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
themeBtn.textContent = '☀️ 亮色模式';
|
||||
} else {
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
themeBtn.textContent = '🌙 暗色模式';
|
||||
}
|
||||
try { localStorage.setItem('ft-theme', dark ? 'dark' : 'light'); } catch(e) {}
|
||||
}
|
||||
function toggleTheme() {
|
||||
setTheme(document.documentElement.getAttribute('data-theme') !== 'dark');
|
||||
}
|
||||
(function() {
|
||||
try {
|
||||
var s = localStorage.getItem('ft-theme');
|
||||
if (s === 'dark' || (!s && matchMedia('(prefers-color-scheme: dark)').matches)) setTheme(true);
|
||||
} catch(e) {}
|
||||
})();
|
||||
|
||||
var activeRow = null;
|
||||
function closeDrawer() {
|
||||
document.getElementById('overlay').classList.remove('show');
|
||||
document.getElementById('drawer').classList.remove('show');
|
||||
if (activeRow) { activeRow.classList.remove('active'); activeRow = null; }
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ contract }}{% endblock %}
|
||||
{% block heading %}{{ contract }}{% endblock %}
|
||||
{% block breadcrumb %}<a href="/contracts/">行情数据</a> / {{ contract }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% if latest %}
|
||||
<div class="stat-grid">
|
||||
<div class="stat-card">
|
||||
<div class="label">最新收盘</div>
|
||||
<div class="value">{{ latest.close|int }}</div>
|
||||
<div class="trend">日期 {{ latest.date }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">当日振幅</div>
|
||||
<div class="value">{{ latest.amp_5d|int if latest.amp_5d else '—' }}</div>
|
||||
<div class="trend">日波幅 {{ latest.diff|int }} 点</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">数据条数</div>
|
||||
<div class="value">{{ row_count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="section-title">日线数据</div>
|
||||
<p style="font-size:0.78rem;color:var(--sub);margin-bottom:12px;">
|
||||
振幅 = 近 5 日 (最高−最低) 均值取整 · 点击振幅值查看计算过程
|
||||
</p>
|
||||
|
||||
<div class="table-wrap">
|
||||
<table id="bars-table">
|
||||
<tr><th>日期</th><th>星期</th><th>开盘</th><th>收盘</th><th>最高</th><th>最低</th><th>波幅</th><th>5日均振幅</th></tr>
|
||||
{% for row in rows %}
|
||||
<tr data-index="{{ loop.index0 }}" data-diff="{{ row.diff }}" data-date="{{ row.date }}" data-weekday="{{ row.weekday }}">
|
||||
<td>{{ row.date }}</td>
|
||||
<td>{{ row.weekday }}</td>
|
||||
<td>{{ row.open }}</td>
|
||||
<td>{{ row.close }}</td>
|
||||
<td>{{ row.high }}</td>
|
||||
<td>{{ row.low }}</td>
|
||||
<td>{{ row.diff }}</td>
|
||||
<td>
|
||||
{% if row.has_amp %}
|
||||
<span class="amp-cell">{{ row.amp_5d }}</span>
|
||||
{% else %}
|
||||
<span class="na">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.amp-cell').forEach(function(cell) {
|
||||
cell.addEventListener('click', function() {
|
||||
var row = cell.parentElement.parentElement;
|
||||
var tbl = document.getElementById('bars-table');
|
||||
var rows = tbl.querySelectorAll('tr');
|
||||
var idx = parseInt(row.dataset.index);
|
||||
if (idx < 5) return;
|
||||
|
||||
document.getElementById('drawer-title').textContent = '{{ contract }}';
|
||||
document.getElementById('drawer-date').textContent = '目标: ' + row.dataset.date + ' ' + row.dataset.weekday + ' 振幅 ' + cell.textContent.trim();
|
||||
|
||||
var html = '<tr><td>日期</td><td>最高−最低</td></tr>';
|
||||
var sum = 0;
|
||||
for (var j = idx - 5; j < idx; j++) {
|
||||
var r = rows[j + 1];
|
||||
html += '<tr><td>' + r.dataset.date + ' ' + r.dataset.weekday + '</td><td>' + r.dataset.diff + '</td></tr>';
|
||||
sum += parseInt(r.dataset.diff);
|
||||
}
|
||||
document.getElementById('drawer-table').innerHTML = html;
|
||||
document.getElementById('drawer-result').innerHTML = '合计 <b>' + sum + '</b> ÷ 5 = <b>' + (sum / 5).toFixed(1) + '</b><br>四舍五入 → <b>' + Math.round(sum / 5) + '</b>';
|
||||
|
||||
document.getElementById('overlay').classList.add('show');
|
||||
document.getElementById('drawer').classList.add('show');
|
||||
|
||||
if (activeRow) activeRow.classList.remove('active');
|
||||
row.classList.add('active');
|
||||
activeRow = row;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,56 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}行情数据{% endblock %}
|
||||
{% block heading %}行情数据{% endblock %}
|
||||
{% block breadcrumb %}<a href="/contracts/">合约总览</a>{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="stat-grid">
|
||||
<div class="stat-card">
|
||||
<div class="label">监控合约</div>
|
||||
<div class="value">{{ contracts|length }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">数据条数</div>
|
||||
<div class="value">{{ total_bars }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">最新日期</div>
|
||||
<div class="value">{{ latest_date }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">合约列表</div>
|
||||
<div class="tag-row">
|
||||
{% for c in contracts %}
|
||||
<a class="tag" href="/contracts/{{ c }}">{{ c }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<tr><th>合约</th><th>日期</th><th>开盘</th><th>收盘</th><th>最高</th><th>最低</th><th>振幅</th><th>操作</th></tr>
|
||||
{% for c in contracts %}
|
||||
<tr>
|
||||
<td><strong>{{ c }}</strong></td>
|
||||
{% if c in contract_bars %}
|
||||
<td>{{ contract_bars[c].date }}</td>
|
||||
<td>{{ contract_bars[c].open|int }}</td>
|
||||
<td>{{ contract_bars[c].close|int }}</td>
|
||||
<td>{{ contract_bars[c].high|int }}</td>
|
||||
<td>{{ contract_bars[c].low|int }}</td>
|
||||
<td>
|
||||
{% if contract_bars[c].amp_5d %}
|
||||
<span class="badge badge-up">{{ contract_bars[c].amp_5d|int }}</span>
|
||||
{% else %}
|
||||
<span class="na">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
{% else %}
|
||||
<td colspan="6" class="na">暂无数据</td>
|
||||
{% endif %}
|
||||
<td><a href="/contracts/{{ c }}" style="color:var(--accent);text-decoration:none;">详情 →</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,45 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}数据录入{% endblock %}
|
||||
{% block heading %}数据录入{% endblock %}
|
||||
{% block breadcrumb %}机构持仓录入{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="form-card">
|
||||
<div class="section-title">持仓快照</div>
|
||||
<form method="post" action="/input">
|
||||
<div class="form-group">
|
||||
<label>机构</label>
|
||||
<select name="institution" required>
|
||||
{% for inst in institutions %}
|
||||
<option value="{{ inst }}">{{ inst }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>方向</label>
|
||||
<select name="direction" required>
|
||||
<option value="long">多单</option>
|
||||
<option value="short">空单</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>日期</label>
|
||||
<input type="date" name="date_str" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>持仓量（手）</label>
|
||||
<input type="number" name="position" required placeholder="例: 193030">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>持仓均价</label>
|
||||
<input type="number" name="avg_cost" step="0.01" required placeholder="例: 995.26">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">提交</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user