finance-talk/ft-app/app/templates/contract.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>
  <span style="font-size:0.78rem;color:var(--sub);">共 {{ total_rows }} 条</span>
</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 page == 1 and 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="{{ row.global_idx }}" 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>

{% if total_pages > 1 %}
<div style="display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:24px;">
  {% if page > 1 %}
  <a class="btn" href="?page={{ page - 1 }}{% if pos_date %}&pos_date={{ pos_date }}{% endif %}" style="font-size:0.82rem;padding:5px 14px;background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:5px;text-decoration:none;">← 上一页</a>
  {% endif %}

  {% for p in range(1, total_pages + 1) %}
    {% if p == page %}
    <span style="font-size:0.82rem;padding:5px 12px;background:var(--accent);color:#fff;border-radius:5px;font-weight:600;">{{ p }}</span>
    {% elif p <= 3 or p > total_pages - 3 or (p >= page - 1 and p <= page + 1) %}
    <a class="btn" href="?page={{ p }}{% if pos_date %}&pos_date={{ pos_date }}{% endif %}" style="font-size:0.82rem;padding:5px 12px;background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:5px;text-decoration:none;">{{ p }}</a>
    {% elif p == 4 or p == total_pages - 3 %}
    <span style="color:var(--sub);padding:5px 4px;">…</span>
    {% endif %}
  {% endfor %}

  {% if page < total_pages %}
  <a class="btn" href="?page={{ page + 1 }}{% if pos_date %}&pos_date={{ pos_date }}{% endif %}" style="font-size:0.82rem;padding:5px 14px;background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:5px;text-decoration:none;">下一页 →</a>
  {% endif %}
</div>
{% endif %}

{% if pos_dates %}
<div class="section-title" style="margin-top:28px;display:flex;align-items:center;gap:12px;">
  <span>持仓排名 · 前20</span>
  <input type="date" id="pos-date-select" value="{{ selected_pos_date }}" min="{{ pos_dates[-1] }}" max="{{ pos_dates[0] }}" onchange="changePosDate(this.value)" style="font-size:0.82rem;padding:4px 10px;border:1px solid var(--border);border-radius:5px;background:var(--surface);color:var(--fg);cursor:pointer;">
</div>

<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;">

  {% set types = [('volume', '成交量'), ('long', '多单持仓'), ('short', '空单持仓')] %}
  {% for dtype, dlabel in types %}
  <div class="table-wrap" style="margin-bottom:0;">
  <table style="font-size:0.82rem;">
    <tr><th colspan="4" style="font-size:0.8rem;color:var(--accent);">{{ dlabel }}</th></tr>
    <tr><th>#</th><th>会员</th><th>持仓</th><th>增减</th></tr>
    {% for row in pos_data[dtype] %}
    <tr>
      <td style="color:var(--sub);">{{ row.rank }}</td>
      <td style="text-align:left;">{{ row.institution }}</td>
      <td>{{ row.value }}</td>
      <td style="color:{% if row.change > 0 %}var(--success-fg){% elif row.change < 0 %}var(--danger-fg){% else %}var(--sub){% endif %};">
        {% if row.change > 0 %}+{% endif %}{{ row.change }}
      </td>
    </tr>
    {% endfor %}
  </table>
  </div>
  {% endfor %}

</div>
{% endif %}

<script>
function changePosDate(d) {
  var url = new URL(window.location);
  url.searchParams.set('pos_date', d);
  window.location = url;
}

document.querySelectorAll('.amp-cell').forEach(function(cell) {
  cell.addEventListener('click', function() {
    // Next-day prediction row
    if (cell.dataset.next) {
      var dataRows = document.querySelectorAll('#bars-table tr[data-index]');
      if (dataRows.length < 5) return;
      var rows = Array.from(dataRows).slice(0, 5);
      showDrawer(cell, '{{ contract }}', rows, true);
      return;
    }

    // Collect 5 older rows via DOM navigation (next siblings in the table)
    var row = cell.parentElement.parentElement;
    var olderRows = [];
    var cursor = row;
    for (var j = 0; j < 5; j++) {
      cursor = cursor.nextElementSibling;
      if (!cursor || !cursor.dataset.index) return;
      olderRows.push(cursor);
    }
    showDrawer(cell, '{{ contract }}', olderRows, false);
  });
});

function showDrawer(cell, product, calcRows, isNext) {
  document.getElementById('drawer-title').textContent = product;
  var label = isNext ? '次日预测' : '目标';
  document.getElementById('drawer-date').textContent = label + '  振幅 ' + cell.textContent.trim();

  var html = '<tr><td>日期</td><td>最高−最低</td></tr>';
  var sum = 0;
  calcRows.forEach(function(r) {
    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> &divide; 5 = <b>' + (sum / 5).toFixed(1) + '</b><br>四舍五入 &rarr; <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 %}