Inv_Monitor/app/templates/trade/index.html

{% extends "base.html" %}

{% block title %}交易汇总列表{% endblock %}

{% block styles %}
<style>
    /* 表格水平滚动样式 */
    .table-responsive {
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        overflow-x: auto;
    }
    .table-responsive::-webkit-scrollbar { height: 8px; }
    .table-responsive::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
    .table-responsive::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
    .table-responsive::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
    

</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">交易汇总列表</h3>
                    <div class="card-tools">
                        <button id="syncDataBtn" class="btn btn-primary btn-sm">同步数据</button>
                        <a href="{{ url_for('trade.export') }}" class="btn btn-success btn-sm">导出Excel</a>
                    </div>
                </div>
                <div class="card-body">
                    <!-- 筛选表单 -->
                    <form id="filterForm" class="mb-3">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>时间范围</label>
                                    <div class="input-group">
                                        <input type="date" class="form-control" name="start_time">
                                        <div class="input-group-append">
                                            <span class="input-group-text">至</span>
                                        </div>
                                        <input type="date" class="form-control" name="end_time">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>合约名称</label>
                                    <input type="text" class="form-control" name="name">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>合约代码</label>
                                    <input type="text" class="form-control" name="contract_code">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>交易类型</label>
                                    <select class="form-control" name="trade_type">
                                        <option value="">全部</option>
                                        <option value="0">模拟交易</option>
                                        <option value="1">实盘交易</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>持仓方向</label>
                                    <select class="form-control" name="position_type">
                                        <option value="">全部</option>
                                        <option value="0">多头</option>
                                        <option value="1">空头</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button type="submit" class="btn btn-primary form-control">查询</button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <!-- 数据表格 -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>开仓时间</th>
                                    <th>平仓时间</th>
                                    <th>合约代码</th>
                                    <th>名称</th>
                                    <th>账户</th>
                                    <th>操作策略</th>
                                    <th>持仓方向</th>
                                    <th>持仓手数</th>
                                    <th>持仓成本</th>
                                    <th>平均售价</th>
                                    <th>单笔收益</th>
                                    <th>投资收益率</th>
                                    <th>持仓天数</th>
                                    <th>年化收益率</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="tradeList">
                                <!-- 数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                    <!-- 分页控件和每页数量选择器 -->
                    <div class="d-flex justify-content-center align-items-center mt-3">
                        <nav aria-label="Page navigation" class="me-3">
                            <ul class="pagination mb-0" id="pagination">
                                <!-- 分页按钮将通过JavaScript动态加载 -->
                            </ul>
                        </nav>
                        <div class="d-flex align-items-center">
                            <label for="itemsPerPageSelect" class="col-form-label me-2 mb-0">每页:</label>
                            <select class="form-select form-select-sm" id="itemsPerPageSelect" style="width: auto;">
                                <option value="10" selected>10</option>
                                <option value="20">20</option>
                                <option value="50">50</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    let currentPage = 1;
    let currentItemsPerPage = parseInt($('#itemsPerPageSelect').val()) || 10;

    // 从 sessionStorage 恢复状态
    const savedFiltersJSON = sessionStorage.getItem('tradeFilters');
    if (savedFiltersJSON) {
        const savedFilters = JSON.parse(savedFiltersJSON);
        Object.keys(savedFilters).forEach(key => {
            $(`[name="${key}"]`).val(savedFilters[key]);
        });
    }

    const savedPage = sessionStorage.getItem('tradeCurrentPage');
    if (savedPage) {
        currentPage = parseInt(savedPage, 10);
    }

    const savedItemsPerPage = sessionStorage.getItem('tradeItemsPerPage');
    if (savedItemsPerPage) {
        currentItemsPerPage = parseInt(savedItemsPerPage, 10);
        $('#itemsPerPageSelect').val(currentItemsPerPage);
    }

    // 加载交易汇总列表
    function loadTrades(page = 1, filters = {}) {
        currentPage = page;
        filters.page = page;
        filters.limit = currentItemsPerPage;

        // 保存当前状态到 sessionStorage
        sessionStorage.setItem('tradeFilters', JSON.stringify(getFilters()));
        sessionStorage.setItem('tradeCurrentPage', currentPage);
        sessionStorage.setItem('tradeItemsPerPage', currentItemsPerPage);

        console.log("开始加载交易汇总数据...");
        console.log("筛选条件:", filters);
        // 显示加载提示
        $('#tradeList').html('<tr><td colspan="16" class="text-center">数据加载中...</td></tr>');
        $('#pagination').empty(); // 清空分页
        
        $.ajax({
            url: "{{ url_for('trade.get_list') }}",
            type: "GET",
            data: filters,
            dataType: "json",
            success: function(response) {
                console.log("加载交易汇总数据成功", response);
                if (response.code === 0) {
                    let html = '';
                    if (response.data && response.data.length > 0) {
                        console.log(`找到${response.data.length}条交易汇总记录`);
                        response.data.forEach(function(item) {
                            // 调试信息：检查close_time值
                            if (item.id <= 5) { // 只对前5条记录输出调试信息，避免控制台过于冗长
                                console.log(`交易ID ${item.id}: close_time = ${item.close_time}, 是否显示平仓按钮: ${!item.close_time}`);
                            }
                            
                            html += `
                                <tr>
                                    <td>${item.id || ''}</td>
                                    <td>${item.open_time || ''}</td>
                                    <td>${item.close_time || '-'}</td>
                                    <td>${item.contract_code || ''}</td>
                                    <td>${item.name || ''}</td>
                                    <td>${item.account || ''}</td>
                                    <td>${item.strategy_name || '-'}</td>
                                    <td>${getPositionTypeText(item.position_type)}</td>
                                    <td>${item.position_volume || ''}</td>
                                    <td>${item.past_position_cost !== undefined ? item.past_position_cost : '-'}</td>
                                    <td>${item.average_sale_price !== undefined ? item.average_sale_price : '-'}</td>
                                    <td>${item.single_profit !== undefined ? Math.round(item.single_profit) : '-'}</td>
                                    <td>${item.investment_profit_rate ? (item.investment_profit_rate * 100).toFixed(2) + '%' : '-'}</td>
                                    <td>${item.holding_days !== undefined ? item.holding_days : '-'}</td>
                                    <td>${item.annual_profit_rate ? (item.annual_profit_rate * 100).toFixed(2) + '%' : '-'}</td>
                                    <td>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                操作
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="/trade/detail/${item.id}">详情</a>
                                                ${!item.close_time ? `
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item text-warning" href="/transaction/add?close_for=${item.id}">
                                                        <i class="fas fa-times-circle"></i> 平仓
                                                    </a>
                                                ` : ''}
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            `;
                        });
                    } else {
                        console.log("没有找到交易汇总记录");
                        html = '<tr><td colspan="16" class="text-center">暂无数据</td></tr>';
                    }
                    $('#tradeList').html(html);
                    renderPagination(response.count, page, currentItemsPerPage);
                } else {
                    console.error('加载交易汇总失败:', response.msg);
                    $('#tradeList').html(`<tr><td colspan="16" class="text-center text-danger">加载失败: ${response.msg}</td></tr>`);
                }
            },
            error: function(xhr, status, error) {
                console.error('加载交易汇总异常:', error);
                console.error('状态:', status);
                console.error('响应:', xhr.responseText);
                $('#tradeList').html(`<tr><td colspan="16" class="text-center text-danger">加载异常，请查看控制台</td></tr>`);
            }
        });
    }

    // 渲染分页控件
    function renderPagination(totalItems, currentPage, itemsPerPage) {
        const totalPages = Math.ceil(totalItems / itemsPerPage);
        let paginationHtml = '';

        if (totalPages <= 1) {
            $('#pagination').empty();
            // 如果只有一页或没有数据，也隐藏每页数量选择器
            $('#itemsPerPageSelect').closest('div').hide();
            return;
        } else {
            // 确保选择器可见
            $('#itemsPerPageSelect').closest('div').show();
        }

        // 上一页按钮
        paginationHtml += `<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                            <a class="page-link" href="#" data-page="${currentPage - 1}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                           </li>`;

        // 页码按钮 (只显示部分页码)
        const maxPagesToShow = 5;
        let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
        let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);

        if (endPage - startPage + 1 < maxPagesToShow) {
            startPage = Math.max(1, endPage - maxPagesToShow + 1);
        }

        if (startPage > 1) {
            paginationHtml += `<li class="page-item"><a class="page-link" href="#" data-page="1">1</a></li>`;
            if (startPage > 2) {
                paginationHtml += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
            }
        }

        for (let i = startPage; i <= endPage; i++) {
            paginationHtml += `<li class="page-item ${i === currentPage ? 'active' : ''}">
                                <a class="page-link" href="#" data-page="${i}">${i}</a>
                               </li>`;
        }

        if (endPage < totalPages) {
            if (endPage < totalPages - 1) {
                paginationHtml += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
            }
            paginationHtml += `<li class="page-item"><a class="page-link" href="#" data-page="${totalPages}">${totalPages}</a></li>`;
        }

        // 下一页按钮
        paginationHtml += `<li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                            <a class="page-link" href="#" data-page="${currentPage + 1}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                           </li>`;

        $('#pagination').html(paginationHtml);

        // 绑定分页按钮点击事件
        $('#pagination .page-link').on('click', function(e) {
            e.preventDefault();
            const page = $(this).data('page');
            if (page && page !== currentPage) {
                const filters = getFilters();
                loadTrades(page, filters);
            }
        });
    }

    // 获取当前筛选条件
    function getFilters() {
        const filters = {};
        $('#filterForm').serializeArray().forEach(function(item) {
            if (item.value) {
                filters[item.name] = item.value;
            }
        });
        return filters;
    }

    // 获取持仓方向文本
    function getPositionTypeText(type) {
        const types = {
            0: '多头',
            1: '空头'
        };
        return types[type] || '未知';
    }

    // 表单提交处理
    $('#filterForm').on('submit', function(e) {
        e.preventDefault();
        const filters = getFilters();
        loadTrades(1, filters); // 筛选后总是回到第一页
    });

    // 每页显示数量变化处理
    $('#itemsPerPageSelect').on('change', function() {
        currentItemsPerPage = parseInt($(this).val());
        const filters = getFilters();
        loadTrades(1, filters); // 更改每页数量后回到第一页
    });

    // 同步数据按钮点击事件
    $('#syncDataBtn').on('click', function() {
        if (confirm('确定要从交易明细中全面同步交易汇总数据吗？这可能需要一些时间。')) {
            const loadingIndicator = $('<div class="overlay"><i class="fas fa-2x fa-sync-alt fa-spin"></i></div>');
            $('.card').append(loadingIndicator);

            $.ajax({
                url: "{{ url_for('trade.sync_all') }}",
                type: 'POST',
                success: function(res) {
                    loadingIndicator.remove();
                    if (res.code === 0) {
                        alert(res.msg || '同步成功！');
                        loadTrades(currentPage, getFilters()); // 刷新当前页
                    } else {
                        alert('同步失败: ' + (res.msg || '未知错误'));
                    }
                },
                error: function() {
                    loadingIndicator.remove();
                    alert('请求失败，请检查网络或联系管理员。');
                }
            });
        }
    });

    // 初始加载
    loadTrades(currentPage, getFilters());
});
</script>
{% endblock %}