109 lines
4.2 KiB
HTML
109 lines
4.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ contract }}{% endblock %}
|
|
{% block heading %}{{ contract }}{% endblock %}
|
|
{% block breadcrumb %}<a href="/contracts/">行情数据</a> / {{ contract }}{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="section-title">日线数据</div>
|
|
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
|
|
<p style="font-size:0.78rem;color:var(--sub);margin:0;">
|
|
振幅 = 近 5 日 (最高−最低) 均值取整 · 点击振幅值查看计算过程
|
|
</p>
|
|
{% if rows|length > 7 %}
|
|
<button id="toggle-all" class="btn" style="font-size:0.78rem;padding:4px 14px;background:var(--surface);color:var(--accent);border:1px solid var(--accent);border-radius:5px;cursor:pointer;" onclick="toggleAll()">显示全部 ({{ rows|length }}条)</button>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<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>
|
|
{% if next_date %}
|
|
<tr style="background:var(--accent-light);font-weight:500;">
|
|
<td>{{ next_date }}</td>
|
|
<td>{{ next_weekday }}</td>
|
|
<td class="na">—</td>
|
|
<td class="na">—</td>
|
|
<td class="na">—</td>
|
|
<td class="na">—</td>
|
|
<td class="na">—</td>
|
|
<td><span class="amp-cell" style="color:var(--accent);font-weight:700;" data-next="1">{{ next_amp }}</span></td>
|
|
</tr>
|
|
{% endif %}
|
|
{% for row in rows %}
|
|
<tr data-index="{{ loop.index0 }}" data-diff="{{ row.diff }}" data-date="{{ row.date }}" data-weekday="{{ row.weekday }}"{% if loop.index0 >= 7 %} class="extra-row" style="display:none;"{% endif %}>
|
|
<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>
|
|
|
|
var allShown = false;
|
|
function toggleAll() {
|
|
allShown = !allShown;
|
|
var btn = document.getElementById('toggle-all');
|
|
var rows = document.querySelectorAll('.extra-row');
|
|
rows.forEach(function(r) { r.style.display = allShown ? '' : 'none'; });
|
|
btn.textContent = allShown ? '收起' : '显示全部 ({{ rows|length }}条)';
|
|
}
|
|
document.querySelectorAll('.amp-cell').forEach(function(cell) {
|
|
cell.addEventListener('click', function() {
|
|
var row = cell.parentElement.parentElement;
|
|
var tbl = document.getElementById('bars-table');
|
|
var dataRows = tbl.querySelectorAll('tr[data-index]');
|
|
|
|
// Next-day row: use latest 5 data rows
|
|
if (cell.dataset.next) {
|
|
if (dataRows.length < 5) return;
|
|
showDrawer(cell, '{{ contract }}', dataRows, 0, 4);
|
|
return;
|
|
}
|
|
|
|
var idx = parseInt(row.dataset.index);
|
|
// Need 5 older rows (higher index, since newest first)
|
|
if (idx + 5 >= dataRows.length) return;
|
|
showDrawer(cell, '{{ contract }}', dataRows, idx + 1, idx + 5);
|
|
});
|
|
});
|
|
|
|
function showDrawer(cell, product, dataRows, fromIdx, toIdx) {
|
|
document.getElementById('drawer-title').textContent = product;
|
|
var label = cell.dataset.next ? '次日预测' : '目标';
|
|
document.getElementById('drawer-date').textContent = label + ' 振幅 ' + cell.textContent.trim();
|
|
|
|
var html = '<tr><td>日期</td><td>最高−最低</td></tr>';
|
|
var sum = 0;
|
|
for (var j = fromIdx; j <= toIdx; j++) {
|
|
var r = dataRows[j];
|
|
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');
|
|
|
|
var row = cell.parentElement.parentElement;
|
|
if (activeRow) activeRow.classList.remove('active');
|
|
row.classList.add('active');
|
|
activeRow = row;
|
|
}
|
|
</script>
|
|
{% endblock %}
|