Files
crypto_monitor/lib/options/templates/options_panel.html
T

125 lines
7.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<div class="options-page-wrap" style="grid-column:1/-1" id="options-root"
data-default-underly="{{ options_default_underly | default('ETH') }}">
{% if not options_enabled %}
<div class="flash" style="margin-bottom:12px">期权 API 未启用:请在 <code>crypto_monitor_okx/.env</code> 设置 <code>OKX_OPTIONS_ENABLED=true</code> 及主账户 <code>OKX_OPTIONS_API_*</code>,然后 <code>pm2 restart crypto_okx --update-env</code></div>
{% endif %}
<div class="options-dual-grid">
<div class="card options-order-card">
<h2>期权下单</h2>
<p class="muted options-hint">报价单位为每 1 ETH/BTC1 张 = 0.01。链展示近 <span id="opt-chain-dte">14</span> 日到期,标注实值/虚值。资金划转与 USDT/USDC 兑换见「系统设置 → 期权设置」。</p>
<div class="form-row options-chain-toolbar">
<button type="button" class="btn-secondary opt-uly-btn active" data-uly="ETH">ETH</button>
<button type="button" class="btn-secondary opt-uly-btn" data-uly="BTC">BTC</button>
<select id="opt-exp-select"><option value="">选择到期日</option></select>
<button type="button" class="btn-secondary opt-type-btn active" data-type="C">看涨 Call</button>
<button type="button" class="btn-secondary opt-type-btn" data-type="P">看跌 Put</button>
<button type="button" class="btn-secondary" id="opt-load-chain">刷新链</button>
</div>
<div id="opt-index-line" class="muted"></div>
<div class="options-strike-table-wrap">
<table class="options-strike-table" id="opt-strike-table">
<thead>
<tr>
<th>行权价</th>
<th>类型</th>
<th>合约</th>
<th>卖一</th>
<th>买一</th>
<th>操作</th>
</tr>
</thead>
<tbody id="opt-strike-tbody">
<tr><td colspan="6" class="muted">请选择到期日</td></tr>
</tbody>
</table>
</div>
<div id="opt-order-panel-host" class="opt-order-panel-host" hidden aria-hidden="true">
<div id="opt-order-panel" class="opt-order-panel-inner" style="display:none">
<h3 class="opt-order-title">下单</h3>
<div id="opt-order-inst" class="options-order-inst"></div>
<div class="options-order-grid">
<div><span class="k">卖一(每1币)</span><span id="opt-order-ask" class="v"></span></div>
<div><span class="k">张数</span><span id="opt-order-sheets" class="v"></span></div>
<div><span class="k">ETH/BTC 数量</span><span id="opt-order-eth" class="v"></span></div>
<div><span class="k">预估权利金</span><span id="opt-order-premium" class="v"></span></div>
</div>
<div class="form-row options-order-mode-row">
<label><input type="radio" name="opt-size-mode" value="sheets" checked> 指定张数</label>
<input type="number" id="opt-sheets-amount" min="1" step="1" value="1" placeholder="张数">
<label><input type="radio" name="opt-size-mode" value="budget_full"> 按单笔上限打满</label>
<label><input type="radio" name="opt-size-mode" value="eth_amount"> 指定币数量</label>
<input type="number" id="opt-eth-amount" min="0.01" step="0.01" placeholder="如 0.5" style="display:none">
<input type="text" id="opt-signal-note" placeholder="备注(关键位说明)">
<button type="button" class="btn-primary" id="opt-open-btn">限价买入 @ 卖一</button>
</div>
<div id="opt-order-msg" class="muted"></div>
</div>
</div>
</div>
<div class="card options-pos-card-wrap">
<div class="options-pos-head">
<h2>持仓</h2>
<button type="button" class="btn-secondary" id="opt-refresh-positions">刷新</button>
</div>
<div class="options-pos-stack">
<div class="card-nested options-pos-subcard">
<h3>当前持仓</h3>
<div id="opt-pos-live" class="panel-scroll pos-list options-pos-live-pane">
<div class="pos-empty" id="opt-pos-empty">暂无持仓</div>
<div id="opt-pos-cards"></div>
</div>
</div>
<div class="card-nested options-pos-subcard options-pos-stats-card">
<h3>数据统计</h3>
<div class="options-stats-grid">
<div class="options-stat-item">
<span class="k">胜率</span>
<span class="v" id="opt-stats-winrate"></span>
</div>
<div class="options-stat-item">
<span class="k">盈亏比</span>
<span class="v" id="opt-stats-plr"></span>
</div>
<div class="options-stat-item">
<span class="k">已平笔数</span>
<span class="v" id="opt-stats-closed"></span>
</div>
<div class="options-stat-item">
<span class="k">盈利</span>
<span class="v pos-pnl-profit" id="opt-stats-profit"></span>
</div>
<div class="options-stat-item">
<span class="k">亏损</span>
<span class="v pos-pnl-loss" id="opt-stats-loss"></span>
</div>
</div>
</div>
<div class="card-nested options-pos-subcard options-pos-history-card">
<h3>期权历史</h3>
<div class="options-history-table-wrap">
<table class="options-strike-table" id="opt-history-table">
<thead>
<tr>
<th>合约</th>
<th>张数</th>
<th>权利金</th>
<th>状态</th>
<th>盈亏</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody id="opt-history-tbody">
<tr><td colspan="7" class="muted">加载中…</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/static/options_panel.js?v=8"></script>