Inv_Monitor/app/templates/monitor/add.html

{% extends 'base.html' %}

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

{% block styles %}
<!-- 引入 Select2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css">
<style>
    .select2-container--bootstrap4 .select2-selection--multiple {
        min-height: calc(1.5em + .75rem + 2px);
    }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>添加监控记录</h2>
    <a href="{{ url_for('monitor.index') }}" class="btn btn-secondary">返回列表</a>
</div>

<div class="card">
    <div class="card-body">
        <form id="monitor-form" class="needs-validation" novalidate>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="future_info_id" class="form-label">期货品种 <span class="text-danger">*</span></label>
                    <div class="position-relative">
                        <input type="text" class="form-control" id="future_search_input" name="future_search_input" 
                               placeholder="输入期货品种名称或代码..." autocomplete="off" required>
                        <input type="hidden" id="future_info_id" name="future_info_id" required>
                        <div id="future_search_results" class="dropdown-menu w-100" style="display: none; max-height: 200px; overflow-y: auto;">
                            <!-- 搜索结果将在这里显示 -->
                        </div>
                    </div>
                    <div class="invalid-feedback">请选择期货品种</div>
                </div>
                 <div class="col-md-6 mb-3">
                    <label for="contract" class="form-label">合约代码 <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="contract" name="contract" required>
                     <div class="invalid-feedback">请输入合约代码</div>
                </div>
            </div>
             <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="name" class="form-label">名称</label>
                    <input type="text" class="form-control" id="name" name="name" readonly required>
                     <div class="invalid-feedback">名称将根据期货品种自动填充</div>
                </div>
                 <div class="col-md-6 mb-3">
                    <label for="market" class="form-label">市场类型</label>
                    <select class="form-select" id="market" name="market" readonly disabled> <!-- 设置为 readonly 和 disabled -->
                        <option value="" selected disabled>请选择市场类型</option>
                        <option value="0">国内</option>
                        <option value="1">国外</option>
                    </select>
                     <div class="invalid-feedback">市场类型将根据期货品种自动填充</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="opportunity" class="form-label">关注原因</label>
                    <select class="form-control" id="opportunity" name="opportunity">
                        <option value="">请选择关注原因</option>
                        <option value="支撑位">支撑位</option>
                        <option value="压力位">压力位</option>
                        <option value="手画支撑位">手画支撑位</option>
                        <option value="手画压力位">手画压力位</option>
                        <option value="5K支撑位">5K支撑位</option>
                        <option value="5K压力位">5K压力位</option>
                        <option value="10K支撑位">10K支撑位</option>
                        <option value="10K压力位">10K压力位</option>
                        <option value="20K支撑位">20K支撑位</option>
                        <option value="20K压力位">20K压力位</option>
                        <option value="30K支撑位">30K支撑位</option>
                        <option value="30K压力位">30K压力位</option>
                    </select>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="status" class="form-label">关注状态</label>
                    <select class="form-select" id="status" name="status">
                        <option value="0" selected>观察中</option>
                        <option value="1">重点关注</option>
                        <option value="2">已触发</option>
                        <option value="3">已失效</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="key_price" class="form-label">关键价格</label>
                    <input type="number" step="any" class="form-control" id="key_price" name="key_price">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="latest_price" class="form-label">最新价格</label>
                    <input type="number" step="any" class="form-control" id="latest_price" name="latest_price">
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="open_price" class="form-label">开仓价格</label>
                    <input type="number" step="any" class="form-control" id="open_price" name="open_price">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="position_mode_id" class="form-label">开仓模式</label>
                    <select class="form-select" id="position_mode_id" name="position_mode_id">
                        <option value="">请选择开仓模式</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 mb-3">
                    <label for="candle_pattern" class="form-label">K线形态</label>
                    <select class="form-control select2" id="candle_pattern" name="candle_pattern" multiple="multiple" data-placeholder="选择K线形态">
                        <!-- 选项将通过API加载 -->
                    </select>
                    <input type="hidden" id="candle_pattern_ids" name="candle_pattern_ids">
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="open_long_price" class="form-label">做多开仓价</label>
                    <input type="number" step="any" class="form-control" id="open_long_price" name="open_long_price" readonly>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="open_short_price" class="form-label">做空开仓价</label>
                    <input type="number" step="any" class="form-control" id="open_short_price" name="open_short_price" readonly>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="open_long_trigger_price" class="form-label">做多触发价</label>
                    <input type="number" step="any" class="form-control" id="open_long_trigger_price" name="open_long_trigger_price" readonly>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="open_short_trigger_price" class="form-label">做空触发价</label>
                    <input type="number" step="any" class="form-control" id="open_short_trigger_price" name="open_short_trigger_price" readonly>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="open_long_margin_per_unit" class="form-label">开多一手保证金</label>
                    <input type="number" step="any" class="form-control" id="open_long_margin_per_unit" name="open_long_margin_per_unit" readonly>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="open_short_margin_per_unit" class="form-label">开空一手保证金</label>
                    <input type="number" step="any" class="form-control" id="open_short_margin_per_unit" name="open_short_margin_per_unit" readonly>
                </div>
            </div>
             <!-- 可以根据需要添加更多字段 -->
            <div class="form-group mt-4">
                <button type="submit" class="btn btn-primary">保存</button>
                <button type="reset" class="btn btn-secondary">重置</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<!-- 引入 jQuery -->
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入 Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('monitor-form');
    const futureSearchInput = document.getElementById('future_search_input');
    const futureIdInput = document.getElementById('future_info_id');
    const searchResults = document.getElementById('future_search_results');
    const contractInput = document.getElementById('contract');
    const nameInput = document.getElementById('name');
    const marketSelect = document.getElementById('market');

    let searchTimeout;
    let currentFutureData = null;

    // 存储开仓模式数据
    let positionModesData = [];
    
    // 存储K线形态选择顺序
    let candlePatternOrder = [];
    let candlePatternIdOrder = [];

    // 加载开仓模式选项
    function loadPositionModes() {
        fetch('/monitor/api/position_modes')
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    positionModesData = data.data; // 存储完整数据
                    const select = document.getElementById('position_mode_id');
                    data.data.forEach(mode => {
                        const option = document.createElement('option');
                        option.value = mode.id;
                        option.textContent = mode.name;
                        select.appendChild(option);
                    });
                } else {
                    console.error('加载开仓模式失败:', data.msg);
                }
            })
            .catch(error => {
                console.error('加载开仓模式出错:', error);
            });
    }

    // 加载K线形态选项
    function loadCandlePatterns() {
        fetch('/monitor/api/candle_patterns')
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    const select = $('#candle_pattern');
                    select.empty(); // 清空现有选项
                    data.data.forEach(pattern => {
                        const option = new Option(pattern.name, pattern.id, false, false);
                        select.append(option);
                    });
                    // 初始化Select2
                    select.select2({
                        theme: 'bootstrap4',
                        placeholder: '选择K线形态',
                        allowClear: true,
                        closeOnSelect: false // 选择后不关闭，方便多选
                    });
                } else {
                    console.error('加载K线形态失败:', data.msg);
                }
            })
            .catch(error => {
                console.error('加载K线形态出错:', error);
            });
    }

    // 根据合约字母加载保证金信息
    function loadMarginInfo(contractLetter) {
        if (!contractLetter) return;
        
        fetch(`/monitor/api/margin_info/${contractLetter}`)
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    const marginInfo = data.data;
                    // 计算保证金（需要价格信息）
                    calculateMargins(marginInfo);
                } else {
                    console.warn('获取保证金信息失败:', data.msg);
                }
            })
            .catch(error => {
                console.error('获取保证金信息出错:', error);
            });
    }

    // 设置保证金（直接从future_info获取固定金额）
    function calculateMargins(marginInfo) {
        // 直接使用从future_info查询到的固定保证金金额
        if (marginInfo.long_margin_amount) {
            document.getElementById('open_long_margin_per_unit').value = marginInfo.long_margin_amount.toFixed(2);
        }
        
        if (marginInfo.short_margin_amount) {
            document.getElementById('open_short_margin_per_unit').value = marginInfo.short_margin_amount.toFixed(2);
        }
    }

    // 期货品种搜索功能
    function searchFutures(query) {
        if (!query.trim()) {
            hideSearchResults();
            return;
        }

        fetch(`/api/future_info/search?q=${encodeURIComponent(query)}&limit=10`)
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    showSearchResults(data.data);
                } else {
                    console.error('搜索期货品种失败:', data.msg);
                    hideSearchResults();
                }
            })
            .catch(error => {
                console.error('搜索期货品种失败:', error);
                hideSearchResults();
            });
    }

    // 显示搜索结果
    function showSearchResults(results) {
        searchResults.innerHTML = '';
        
        if (results.length === 0) {
            searchResults.innerHTML = '<div class="dropdown-item-text text-muted">未找到匹配的期货品种</div>';
        } else {
            results.forEach(future => {
                const item = document.createElement('div');
                item.className = 'dropdown-item cursor-pointer';
                item.style.cursor = 'pointer';
                item.textContent = future.display_text;
                item.addEventListener('click', () => selectFuture(future));
                searchResults.appendChild(item);
            });
        }
        
        searchResults.style.display = 'block';
    }

    // 隐藏搜索结果
    function hideSearchResults() {
        searchResults.style.display = 'none';
    }

    // 选择期货品种
    function selectFuture(future) {
        currentFutureData = future;
        futureSearchInput.value = future.display_text;
        futureIdInput.value = future.id;
        hideSearchResults();

        // 自动填充相关字段
        fillFutureDetails(future);
        
        // 如果已经有关键价格，则自动计算
        setTimeout(() => {
            calculatePrices();
        }, 100);
        
        console.log('选择了期货品种:', future);
    }

    // 自动填充期货详情
    function fillFutureDetails(future) {
        // 填充名称
        nameInput.value = future.name || '';
        
        // 填充市场类型
        if (future.market !== null && future.market !== undefined) {
            marketSelect.value = future.market.toString();
            marketSelect.removeAttribute('disabled');
        } else {
            marketSelect.value = '';
            marketSelect.setAttribute('disabled', '');
        }

        // 不自动填充合约代码，允许用户手动输入非主力合约
        // 可以作为提示显示在placeholder中
        if (future.current_main_contract) {
            contractInput.placeholder = `主力合约: ${future.current_main_contract}`;
        }

        // 自动填充合约字母并加载保证金信息
        if (future.contract_letter) {
            loadMarginInfo(future.contract_letter);
        }
    }

    // 监听期货品种输入
    futureSearchInput.addEventListener('input', function() {
        const query = this.value.trim();
        
        // 清空隐藏的ID字段
        futureIdInput.value = '';
        currentFutureData = null;
        
        // 清空其他字段
        nameInput.value = '';
        marketSelect.value = '';
        marketSelect.setAttribute('disabled', '');
        
        // 使用防抖进行搜索
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            searchFutures(query);
        }, 300);
    });

    // 监听焦点离开事件，隐藏搜索结果
    futureSearchInput.addEventListener('blur', function() {
        // 延迟隐藏，允许用户点击搜索结果
        setTimeout(() => {
            hideSearchResults();
        }, 200);
    });

    // 监听点击外部区域隐藏搜索结果
    document.addEventListener('click', function(event) {
        if (!event.target.closest('.position-relative')) {
            hideSearchResults();
        }
    });

    // 兼容性：监听合约代码输入变化进行反向查询
    let contractDebounceTimer;
    contractInput.addEventListener('input', function() {
        clearTimeout(contractDebounceTimer);
        const code = this.value.trim();
        
        // 如果已经通过期货品种选择填充了合约代码，则不进行反向查询
        if (currentFutureData && currentFutureData.current_main_contract === code) {
            return;
        }
        
        if (code) {
            // 清空期货品种选择
            futureSearchInput.value = '';
            futureIdInput.value = '';
            currentFutureData = null;
            
            contractDebounceTimer = setTimeout(() => {
                lookupByContract(code);
            }, 500);
        } else {
            nameInput.value = '';
            marketSelect.value = '';
            marketSelect.setAttribute('disabled', '');
        }
    });

    // 根据合约代码查询期货信息
    function lookupByContract(contractCode) {
        fetch(`/monitor/api/future_info/lookup?contract_code=${encodeURIComponent(contractCode)}`)
            .then(response => response.json())
            .then(data => {
                if (data.code === 0 && data.data) {
                    nameInput.value = data.data.name || '';
                    marketSelect.value = data.data.market_type !== null ? data.data.market_type.toString() : '';
                    marketSelect.removeAttribute('disabled');
                } else {
                    nameInput.value = '';
                    marketSelect.value = '';
                    marketSelect.setAttribute('disabled', '');
                    console.warn('未能自动填充期货信息:', data.msg);
                }
            })
            .catch(error => {
                nameInput.value = '';
                marketSelect.value = '';
                marketSelect.setAttribute('disabled', '');
                console.error('查询期货信息失败:', error);
            });
    }

    // 自动计算价格
    function calculatePrices() {
        const keyPrice = document.getElementById('key_price').value;
        const futureInfoId = futureIdInput.value;
        
        // 清空所有计算字段
        const calculatedFields = ['open_long_price', 'open_short_price', 'open_long_trigger_price', 'open_short_trigger_price'];
        calculatedFields.forEach(fieldId => {
            document.getElementById(fieldId).value = '';
        });
        
        if (!keyPrice || !futureInfoId) {
            console.log('缺少关键价格或期货信息ID，跳过自动计算');
            return;
        }
        
        // 调用后端API进行计算
        fetch('/monitor/api/calculate_prices', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                future_info_id: parseInt(futureInfoId),
                key_price: parseFloat(keyPrice)
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.code === 0) {
                const prices = data.data;
                // 填充计算结果，保留2位小数
                document.getElementById('open_long_price').value = prices.open_long_price.toFixed(2);
                document.getElementById('open_short_price').value = prices.open_short_price.toFixed(2);
                document.getElementById('open_long_trigger_price').value = prices.open_long_trigger_price.toFixed(2);
                document.getElementById('open_short_trigger_price').value = prices.open_short_trigger_price.toFixed(2);
                console.log('自动计算完成，核心比率:', prices.core_ratio);
            } else {
                console.warn('自动计算失败:', data.msg);
            }
        })
        .catch(error => {
            console.error('自动计算出错:', error);
        });
    }
    
    // 监听关键价格变化
    let keyPriceTimeout;
    document.getElementById('key_price').addEventListener('input', function() {
        // 使用防抖，避免频繁计算
        clearTimeout(keyPriceTimeout);
        keyPriceTimeout = setTimeout(() => {
            calculatePrices();
        }, 500);
    });

    // K线形态选择事件 - 跟踪真实的用户选择顺序
    $('#candle_pattern').on('select2:select', function(e) {
        const selectedData = e.params.data;
        const selectedId = selectedData.id;
        const selectedText = selectedData.text;
        
        // 添加到用户选择顺序数组
        if (!candlePatternIdOrder.includes(selectedId)) {
            candlePatternIdOrder.push(selectedId);
            candlePatternOrder.push(selectedText);
            
            // 更新隐藏的ID字段
            $('#candle_pattern_ids').val(candlePatternIdOrder.join(','));
            console.log('选择的K线形态ID（按用户点击顺序）:', candlePatternIdOrder);
            console.log('选择的K线形态名称（按用户点击顺序）:', candlePatternOrder);
        }
    });
    
    $('#candle_pattern').on('select2:unselect', function(e) {
        const unselectedData = e.params.data;
        const unselectedId = unselectedData.id;
        const unselectedText = unselectedData.text;
        
        // 从用户选择顺序数组中移除
        const idIndex = candlePatternIdOrder.indexOf(unselectedId);
        const textIndex = candlePatternOrder.indexOf(unselectedText);
        
        if (idIndex > -1) {
            candlePatternIdOrder.splice(idIndex, 1);
        }
        if (textIndex > -1) {
            candlePatternOrder.splice(textIndex, 1);
        }
        
        // 更新隐藏的ID字段
        $('#candle_pattern_ids').val(candlePatternIdOrder.join(','));
        console.log('取消选择后的K线形态ID（按用户点击顺序）:', candlePatternIdOrder);
        console.log('取消选择后的K线形态名称（按用户点击顺序）:', candlePatternOrder);
    });

    // 开仓模式改变时自动填入相应的触发价到开仓价格
    document.getElementById('position_mode_id').addEventListener('change', function() {
        const selectedModeId = parseInt(this.value);
        if (selectedModeId) {
            const selectedMode = positionModesData.find(mode => mode.id === selectedModeId);
            if (selectedMode) {
                // 根据方向自动填入相应的触发价
                if (selectedMode.direction === 0) {
                    // 做多方向，填入做多触发价
                    const longTriggerPrice = document.getElementById('open_long_trigger_price').value;
                    if (longTriggerPrice) {
                        document.getElementById('open_price').value = longTriggerPrice;
                    }
                } else if (selectedMode.direction === 1) {
                    // 做空方向，填入做空触发价
                    const shortTriggerPrice = document.getElementById('open_short_trigger_price').value;
                    if (shortTriggerPrice) {
                        document.getElementById('open_price').value = shortTriggerPrice;
                    }
                }
                // direction为NULL的情况（虚拟、执行、无）不自动填入
                console.log('开仓模式选择:', selectedMode.name, '方向:', selectedMode.direction);
            }
        }
    });

    // 表单提交处理
    form.addEventListener('submit', function(event) {
        event.preventDefault();

        if (!form.checkValidity()) {
            event.stopPropagation();
            form.classList.add('was-validated');
            return;
        }

        // 收集表单数据
        const formData = {
            future_info_id: parseInt(futureIdInput.value) || null,
            contract: contractInput.value.trim(),
            name: nameInput.value.trim(),
            market: marketSelect.value !== '' ? parseInt(marketSelect.value) : null,
            status: parseInt(document.getElementById('status').value),
            opportunity: document.getElementById('opportunity').value || null,
            key_price: document.getElementById('key_price').value ? parseFloat(document.getElementById('key_price').value) : null,
            open_long_price: document.getElementById('open_long_price').value ? parseFloat(document.getElementById('open_long_price').value) : null,
            open_short_price: document.getElementById('open_short_price').value ? parseFloat(document.getElementById('open_short_price').value) : null,
            latest_price: document.getElementById('latest_price').value ? parseFloat(document.getElementById('latest_price').value) : null,
            open_long_trigger_price: document.getElementById('open_long_trigger_price').value ? parseFloat(document.getElementById('open_long_trigger_price').value) : null,
            open_short_trigger_price: document.getElementById('open_short_trigger_price').value ? parseFloat(document.getElementById('open_short_trigger_price').value) : null,
            contract_letter: currentFutureData ? currentFutureData.contract_letter : null,
            open_price: document.getElementById('open_price').value ? parseFloat(document.getElementById('open_price').value) : null,
            position_mode_id: document.getElementById('position_mode_id').value ? parseInt(document.getElementById('position_mode_id').value) : null,
            candle_pattern_ids: $('#candle_pattern_ids').val() || null,
            candle_pattern: candlePatternOrder.join('+') || null,
            open_long_margin_per_unit: document.getElementById('open_long_margin_per_unit').value ? parseFloat(document.getElementById('open_long_margin_per_unit').value) : null,
            open_short_margin_per_unit: document.getElementById('open_short_margin_per_unit').value ? parseFloat(document.getElementById('open_short_margin_per_unit').value) : null
        };

        console.log('准备提交的数据:', formData);

        // 发送创建请求
        fetch('/monitor/add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        })
        .then(response => response.json())
        .then(data => {
            console.log('服务器响应:', data);
            if (data.code === 0) {
                alert('添加成功！');
                window.location.href = "{{ url_for('monitor.index') }}";
            } else {
                alert('添加失败：' + (data.msg || '未知错误'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('发生错误，请查看控制台了解详情');
        });
    });

    // 初始化验证监听器
    Array.from(form.elements).forEach(element => {
        element.addEventListener('invalid', () => {
            form.classList.add('was-validated');
        });
    });

    // 初始化加载数据
    loadPositionModes();
    loadCandlePatterns();
});
</script>
{% endblock %}