qihuo/templates/trade.html

{% extends "base.html" %}
{% block title %}持仓监控 - 国内期货监控系统{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/trade.css') }}">
{% endblock %}
{% block content %}
<div class="trade-page">
    <div class="trade-top-bar">
        <span class="badge dir">{{ trading_mode_label }}</span>
        <span class="badge {% if ctp_status.connected %}profit{% else %}planned{% endif %}" id="ctp-badge">
            {% if ctp_status.connected %}CTP 已连接{% else %}CTP 未连接{% endif %}
        </span>
        <span class="badge {% if risk_status.can_trade %}profit{% else %}loss{% endif %}" id="risk-badge">{{ risk_status.status_label }}</span>
        <span class="text-muted">权益 <strong id="cap-display">{{ '%.2f'|format(capital) }}</strong> 元</span>
        {% if ctp_account.available is defined and ctp_status.connected %}
        <span class="text-muted">可用 <strong id="avail-display">{{ '%.2f'|format(ctp_account.available) }}</strong> 元</span>
        {% endif %}
        <button type="button" class="btn-primary" id="btn-ctp-connect" style="padding:.4rem .9rem;font-size:.8rem">连接 CTP</button>
    </div>

    <div class="trade-dashboard">
        <div class="card trade-card" id="order">
            <h2>期货下单</h2>
            <div class="card-body">
                <p class="hint">开仓、加仓由<strong>程序</strong>在「策略交易」中执行，经 CTP 自动报单至 SimNow / 期货公司柜台。</p>
                <div class="trade-order-status">
                    <div class="status-row">
                        <span class="text-muted">计仓模式</span>
                        <strong>{{ sizing_mode_label }}</strong>
                        {% if sizing_mode == 'risk' %}
                        <span class="text-muted">· 单笔风险 {{ risk_percent }}%</span>
                        {% endif %}
                    </div>
                    <div class="status-row">
                        <span class="text-muted">风控状态</span>
                        <strong class="{% if risk_status.can_trade %}text-profit{% else %}text-loss{% endif %}">{{ risk_status.status_label }}</strong>
                    </div>
                    <div class="status-row">
                        <span class="text-muted">程序监控</span>
                        <strong>{{ monitor_count }}</strong> 笔
                        {% if roll_count %}<span class="text-muted">· 滚仓组 {{ roll_count }}</span>{% endif %}
                    </div>
                    {% if active_trend %}
                    <div class="status-row trend-active">
                        <span class="text-muted">趋势回调</span>
                        <strong>#{{ active_trend.id }} {{ active_trend.symbol }} {{ '多' if active_trend.direction=='long' else '空' }}</strong>
                        <span class="text-muted">已开 {{ active_trend.lots_open or 0 }}/{{ active_trend.target_lots }} 手</span>
                    </div>
                    {% endif %}
                </div>
                {% if not ctp_status.connected %}
                <p class="hint text-accent" style="margin-top:.75rem">请先连接 CTP，程序报单才会进入柜台。</p>
                {% endif %}
                {% if ctp_status.last_error %}
                <p class="text-loss" style="font-size:.78rem;margin-top:.5rem">{{ ctp_status.last_error }}</p>
                {% endif %}
                <div class="trade-order-actions">
                    <a href="{{ url_for('strategy_page') }}" class="btn-primary">前往策略交易</a>
                    <a href="{{ url_for('strategy_records_page') }}" class="text-muted" style="font-size:.82rem">策略记录 →</a>
                </div>
            </div>
        </div>

        <div class="card trade-card" id="positions">
            <h2>持仓监控</h2>
            <div class="card-body card-scroll" id="position-live-list">
                <div class="empty-hint">加载中…</div>
            </div>
        </div>

        <div class="card trade-card" id="recommend">
            <h2>品种推荐</h2>
            <div class="card-body">
                <p class="hint">按当前权益 <strong class="text-accent" id="rec-capital">{{ '%.2f'|format(capital) }}</strong> 元筛选；
                    灰色为保证金不足，优先展示可开 1 手且风险规则较友好的品种。</p>
                <div class="trade-table-wrap">
                    <table class="trade-table">
                        <thead>
                            <tr>
                                <th>品种</th><th>交易所</th><th>参考价</th><th>1手保证金</th><th>建议最低资金</th><th>状态</th>
                            </tr>
                        </thead>
                        <tbody id="recommend-list">
                            <tr><td colspan="6" class="empty-hint">品种推荐加载中…</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script src="{{ url_for('static', filename='js/trade.js') }}"></script>
{% endblock %}