Inv_Monitor/app/templates/monitor/index.html

{% extends 'base.html' %}

{% block title %}监控记录 - 期货数据管理系统{% endblock %}

{% block styles %}
<style>
    /* 表格水平滚动样式 */
    .table-responsive {
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        overflow-x: auto;
        max-height: 70vh; /* 限制最大高度，让表头可以固定 */
    }
    .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; }
    
    /* 列冻结样式 */
    .sticky-table { position: relative; width: 100%; }
    .sticky-table thead th { position: sticky; top: 0; z-index: 1; background-color: #f8f9fa; }
    .sticky-table td, .sticky-table th { white-space: nowrap; }

    /* 冻结列的 z-index 和 position */
    .sticky-table .sticky-left,
    .sticky-table .sticky-right {
        position: sticky;
        z-index: 2; /* 高于普通表头 */
    }
    
    /* 冻结列和表头的不透明背景 */
    .sticky-table th.sticky-left,
    .sticky-table th.sticky-right {
        background-color: #f8f9fa; /* 表头背景色 */
    }

    .sticky-table td.sticky-left,
    .sticky-table td.sticky-right {
        background-color: #ffffff; /* 单元格背景色 */
    }

    /* 修复斑马纹表格下的背景色问题 */
    .table-striped > tbody > tr:nth-of-type(odd) > td.sticky-left,
    .table-striped > tbody > tr:nth-of-type(odd) > td.sticky-right {
        background-color: #f9f9f9; /* 斑马纹行背景色 */
    }

    /* 左侧冻结列位置 */
    .sticky-left:nth-child(1) { left: 0; } /* 合约 */
    .sticky-left:nth-child(2) { left: 120px; } /* 名称 */

    /* 右侧冻结列 */
    .sticky-right {
        right: 0;
        border-left: 2px solid #dee2e6;
    }
    
    /* 左侧冻结列分隔线 */
    th.sticky-left:nth-child(2),
    td.sticky-left:nth-child(2) {
        border-right: 2px solid #dee2e6;
    }
    
    /* 开仓模式行背景色 */
    .row-virtual {
        background-color: #e3f2fd !important; /* 浅蓝色 */
    }
    
    .row-virtual td {
        background-color: #e3f2fd !important;
    }
    
    .row-execute {
        background-color: #e8f5e8 !important; /* 中等浅绿色 */
    }
    
    .row-execute td {
        background-color: #e8f5e8 !important;
    }
    
    /* 确保固定列也应用背景色 */
    .row-virtual .sticky-left,
    .row-virtual .sticky-right {
        background-color: #e3f2fd !important;
    }
    
    .row-execute .sticky-left,
    .row-execute .sticky-right {
        background-color: #e8f5e8 !important;
    }
    
    /* 确保虚拟和执行样式始终生效，不被斑马纹覆盖 */
    .table-striped > tbody > .row-virtual,
    .table-striped > tbody > .row-virtual:nth-of-type(odd) {
        background-color: #e3f2fd !important;
    }
    
    .table-striped > tbody > .row-virtual > td,
    .table-striped > tbody > .row-virtual:nth-of-type(odd) > td {
        background-color: #e3f2fd !important;
    }
    
    .table-striped > tbody > .row-execute,
    .table-striped > tbody > .row-execute:nth-of-type(odd) {
        background-color: #e8f5e8 !important;
    }
    
    .table-striped > tbody > .row-execute > td,
    .table-striped > tbody > .row-execute:nth-of-type(odd) > td {
        background-color: #e8f5e8 !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="card">
        <div class="card-header">
            <div class="row mb-0 align-items-center">
                <div class="col-md-6">
                    <h2>监控记录</h2>
                </div>
                <div class="col-md-6 text-end">
                    <a href="{{ url_for('monitor.add') }}" class="btn btn-primary btn-sm me-1">添加监控记录</a>
                    <a href="{{ url_for('monitor.import_view') }}" class="btn btn-success btn-sm">导入监控记录</a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <form method="get" class="mb-3">
                <div class="row justify-content-start">
                    <div class="col-md-auto">
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="statusFilter" data-bs-toggle="dropdown" aria-expanded="false">
                                状态筛选
                            </button>
                            <div class="dropdown-menu p-3" aria-labelledby="statusFilter" style="min-width: 200px;" onclick="event.stopPropagation();">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="0" id="status0" name="status" checked>
                                    <label class="form-check-label" for="status0">观察中</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="1" id="status1" name="status" checked>
                                    <label class="form-check-label" for="status1">重点关注</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="2" id="status2" name="status" checked>
                                    <label class="form-check-label" for="status2">已触发</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="3" id="status3" name="status">
                                    <label class="form-check-label" for="status3">已失效</label>
                                </div>
                                <hr class="my-2">
                                <button type="button" class="btn btn-sm btn-primary" onclick="applyStatusFilter()">应用筛选</button>
                                <button type="button" class="btn btn-sm btn-secondary ms-1" onclick="resetStatusFilter()">重置</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-auto">
                        <select name="market" class="form-select form-select-sm">
                            <option value="">所有市场</option>
                            <option value="0" {% if request.args.get('market') == '0' %}selected{% endif %}>国内</option>
                            <option value="1" {% if request.args.get('market') == '1' %}selected{% endif %}>国际</option>
                        </select>
                    </div>
                    <div class="col-md-auto">
                        <button type="submit" class="btn btn-secondary btn-sm">筛选</button>
                    </div>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-striped table-bordered table-sm sticky-table" style="min-width: 1400px;">
                    <thead>
                        <tr>
                            <th class="sticky-left" style="min-width: 120px;">合约</th>
                            <th class="sticky-left" style="min-width: 150px;">名称</th>
                            <th style="min-width: 120px;">开仓模式</th>
                            <th style="min-width: 150px;">K线形态</th>
                            <th style="min-width: 100px;">开仓价格</th>
                            <th style="min-width: 100px;">关键价格</th>
                            <th style="min-width: 120px;">做多保证金</th>
                            <th style="min-width: 120px;">做空保证金</th>
                            <th style="min-width: 100px;">状态</th>
                            <th class="sticky-right" style="min-width: 120px;">操作</th>
                        </tr>
                    </thead>
                    <tbody id="monitor-table-body">
                        <tr>
                            <td colspan="10" class="text-center">正在加载...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- 自定义确认对话框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmModalLabel">确认操作</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="confirmModalBody">
                确定要执行此操作吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmModalOK">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 错误提示模态框 -->
<div class="modal fade" id="errorModal" tabindex="-1" aria-labelledby="errorModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger" id="errorModalLabel">操作失败</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="errorModalBody">
                操作失败，请稍后重试
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tableBody = document.getElementById('monitor-table-body');
    
    // 自定义确认对话框函数
    function showConfirmDialog(message, onConfirm) {
        const modal = new bootstrap.Modal(document.getElementById('confirmModal'));
        const body = document.getElementById('confirmModalBody');
        const okBtn = document.getElementById('confirmModalOK');
        
        body.textContent = message;
        
        // 移除旧的事件监听器
        okBtn.replaceWith(okBtn.cloneNode(true));
        const newOkBtn = document.getElementById('confirmModalOK');
        
        // 添加确认事件
        newOkBtn.addEventListener('click', function() {
            modal.hide();
            onConfirm();
        });
        
        // 监听回车键
        const keyHandler = function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                modal.hide();
                document.removeEventListener('keydown', keyHandler);
                onConfirm();
            }
        };
        
        document.addEventListener('keydown', keyHandler);
        
        // 模态框关闭时清理事件监听器
        document.getElementById('confirmModal').addEventListener('hidden.bs.modal', function() {
            document.removeEventListener('keydown', keyHandler);
        }, { once: true });
        
        modal.show();
        
        // 聚焦到确定按钮，以便回车键生效
        setTimeout(() => {
            newOkBtn.focus();
        }, 150);
    }
    
    // 显示错误对话框
    function showErrorDialog(message) {
        const modal = new bootstrap.Modal(document.getElementById('errorModal'));
        const body = document.getElementById('errorModalBody');
        const okBtn = document.querySelector('#errorModal .btn-primary');
        
        body.textContent = message;
        
        // 监听回车键
        const keyHandler = function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                modal.hide();
                document.removeEventListener('keydown', keyHandler);
            }
        };
        
        document.addEventListener('keydown', keyHandler);
        
        // 模态框关闭时清理事件监听器
        document.getElementById('errorModal').addEventListener('hidden.bs.modal', function() {
            document.removeEventListener('keydown', keyHandler);
        }, { once: true });
        
        modal.show();
        
        // 聚焦到确定按钮，以便回车键生效
        setTimeout(() => {
            okBtn.focus();
        }, 150);
    }
    
    // 将函数附加到window对象，以便在其他函数中使用
    window.showConfirmDialog = showConfirmDialog;
    window.showErrorDialog = showErrorDialog;
    
    // 状态映射
    const statusMap = {
        0: '观察中',
        1: '重点关注', 
        2: '已触发',
        3: '已失效'
    };
    
    // 市场映射
    const marketMap = {
        0: '国内',
        1: '国外'
    };

    // 开仓模式数据缓存
    let positionModes = [];
    
    // 加载开仓模式数据
    function loadPositionModes() {
        return fetch('/monitor/api/position_modes')
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    positionModes = data.data;
                    console.log('开仓模式数据加载成功:', positionModes);
                } else {
                    console.error('加载开仓模式失败:', data.msg);
                }
            })
            .catch(error => {
                console.error('加载开仓模式出错:', error);
            });
    }
    
    // 获取开仓模式名称
    function getPositionModeName(modeId) {
        if (!modeId) return '-';
        const mode = positionModes.find(m => m.id === modeId);
        return mode ? mode.name : '-';
    }
    
    // 加载监控记录数据
    function loadMonitorRecords() {
        // 获取筛选参数
        const selectedStatuses = getSelectedStatuses();
        const urlParams = new URLSearchParams(window.location.search);
        const market = urlParams.get('market') || '';
        
        // 构建查询参数
        const params = new URLSearchParams();
        selectedStatuses.forEach(status => params.append('status', status));
        if (market) params.append('market', market);
        
        console.log('正在加载监控记录，参数:', params.toString());
        
        // 如果开仓模式数据未加载，先加载
        const loadPromise = positionModes.length > 0 ? Promise.resolve() : loadPositionModes();
        
        loadPromise.then(() => {
            return fetch(`/monitor/list?${params.toString()}`);
        })
        .then(response => response.json())
        .then(data => {
            console.log('监控记录API响应:', data);
            if (data.code === 0) {
                renderMonitorTable(data.data);
            } else {
                console.error('获取监控记录失败:', data.msg);
                tableBody.innerHTML = `<tr><td colspan="10" class="text-center text-danger">加载失败: ${data.msg}</td></tr>`;
            }
        })
        .catch(error => {
            console.error('获取监控记录出错:', error);
            tableBody.innerHTML = '<tr><td colspan="10" class="text-center text-danger">网络错误，请刷新重试</td></tr>';
        });
    }
    
    // 渲染监控记录表格
    function renderMonitorTable(monitors) {
        console.log('渲染监控记录数据:', monitors);
        
        if (!monitors || monitors.length === 0) {
            tableBody.innerHTML = '<tr><td colspan="10" class="text-center text-muted">暂无监控记录</td></tr>';
            return;
        }
        
        const rows = monitors.map(monitor => {
            const statusText = statusMap[monitor.status] || '未知状态';
            const positionModeText = getPositionModeName(monitor.position_mode_id);
            
            // 根据开仓模式确定行样式类
            let rowClass = '';
            if (positionModeText && positionModeText !== '无' && positionModeText.includes('虚拟')) {
                rowClass = 'row-virtual';
            } else if (positionModeText && positionModeText !== '无' && positionModeText.includes('执行')) {
                rowClass = 'row-execute';
            }
            
            return `
                <tr${rowClass ? ' class="' + rowClass + '"' : ''}>
                    <td class="sticky-left">${monitor.contract || '-'}</td>
                    <td class="sticky-left">${monitor.name || '-'}</td>
                    <td>${positionModeText}</td>
                    <td title="${monitor.candle_pattern || ''}">${truncateText(monitor.candle_pattern, 15)}</td>
                    <td>${formatPrice(monitor.open_price)}</td>
                    <td>${formatPrice(monitor.key_price)}</td>
                    <td>${formatPrice(monitor.open_long_margin_per_unit)}</td>
                    <td>${formatPrice(monitor.open_short_margin_per_unit)}</td>
                    <td>
                        <span class="badge ${getStatusBadgeClass(monitor.status)}">${statusText}</span>
                    </td>
                    <td class="sticky-right">
                        <div class="btn-group dropstart">
                            <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                操作
                            </button>
                            <ul class="dropdown-menu">
                                <li><button class="dropdown-item" onclick="viewDetail(${monitor.id})">查看详情</button></li>
                                <li><button class="dropdown-item" onclick="editMonitor(${monitor.id})">编辑</button></li>
                                ${monitor.status !== 3 ? '<li><button class="dropdown-item text-warning" onclick="invalidateMonitor(' + monitor.id + ')">失效</button></li>' : ''}
                                <li><hr class="dropdown-divider"></li>
                                <li><button class="dropdown-item text-danger" onclick="deleteMonitor(${monitor.id})">删除</button></li>
                            </ul>
                        </div>
                    </td>
                </tr>
            `;
        }).join('');
        
        tableBody.innerHTML = rows;
    }
    
    // 格式化价格显示
    function formatPrice(price) {
        if (price === null || price === undefined || price === '') {
            return '-';
        }
        return parseFloat(price).toFixed(2);
    }
    
    // 截断长文本
    function truncateText(text, maxLength) {
        if (!text) return '-';
        return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
    }
    
    // 获取状态徽章的CSS类
    function getStatusBadgeClass(status) {
        const classes = {
            0: 'bg-secondary',  // 观察中
            1: 'bg-warning',    // 重点关注
            2: 'bg-success',    // 已触发
            3: 'bg-danger'      // 已失效
        };
        return classes[status] || 'bg-light';
    }
    
    // 获取选中的状态值
    function getSelectedStatuses() {
        const checkboxes = document.querySelectorAll('input[name="status"]:checked');
        return Array.from(checkboxes).map(cb => cb.value);
    }
    
    // 应用状态筛选
    window.applyStatusFilter = function() {
        loadMonitorRecords();
        // 关闭dropdown
        const dropdown = bootstrap.Dropdown.getInstance(document.getElementById('statusFilter'));
        if (dropdown) dropdown.hide();
    };
    
    // 重置状态筛选（默认选中除"已失效"外的所有状态）
    window.resetStatusFilter = function() {
        document.getElementById('status0').checked = true; // 观察中
        document.getElementById('status1').checked = true; // 重点关注  
        document.getElementById('status2').checked = true; // 已触发
        document.getElementById('status3').checked = false; // 已失效
        loadMonitorRecords();
    };

    // 查看详情
    window.viewDetail = function(id) {
        // 实现查看详情逻辑
        console.log('查看监控详情:', id);
        // 这里可以跳转到详情页面或打开模态框
        window.location.href = `/monitor/detail/${id}`;
    };
    
    // 编辑监控
    window.editMonitor = function(id) {
        console.log('编辑监控记录:', id);
        // 跳转到编辑页面
        window.location.href = `/monitor/edit/${id}`;
    };
    
    // 失效监控记录
    window.invalidateMonitor = function(id) {
        showConfirmDialog('确定要将这条监控记录标记为失效吗？', function() {
            fetch(`/monitor/invalidate/${id}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    // 成功时不显示提示，直接刷新数据
                    loadMonitorRecords();
                } else {
                    // 失败时显示错误对话框
                    showErrorDialog('标记失效失败：' + data.msg);
                }
            })
            .catch(error => {
                console.error('标记失效失败:', error);
                showErrorDialog('标记失效失败，请稍后重试');
            });
        });
    };

    // 删除监控
    window.deleteMonitor = function(id) {
        showConfirmDialog('确定要删除这条监控记录吗？此操作不可撤销！', function() {
            fetch(`/monitor/delete/${id}`, {
                method: 'DELETE'
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    // 成功时不显示提示，直接刷新数据
                    loadMonitorRecords();
                } else {
                    // 失败时显示错误对话框
                    showErrorDialog('删除失败：' + data.msg);
                }
            })
            .catch(error => {
                console.error('删除失败:', error);
                showErrorDialog('删除失败，请稍后重试');
            });
        });
    };
    
    // 初始化时先加载开仓模式数据，再加载监控记录
    loadPositionModes().then(() => {
        loadMonitorRecords();
    });
});
</script>
{% endblock %}