app/web/templates/etf_analysis.html

{% extends "layout.html" %}

{% block title %}ETF 分析{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1 class="mb-4">ETF 综合分析</h1>

    <!-- 输入区域 -->
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">输入ETF代码</h5>
            <div class="input-group">
                <input type="text" id="etf-code-input" class="form-control" placeholder="例如: 510300">
                <button id="analyze-btn" class="btn btn-primary">开始分析</button>
            </div>
            <small class="form-text text-muted">输入您想分析的ETF基金代码，然后点击“开始分析”按钮。</small>
        </div>
    </div>

    <!-- 加载与状态显示 -->
    <div id="status-container" class="mb-4" style="display: none;">
        <div class="d-flex align-items-center">
            <strong>正在分析中...</strong>
            <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
        </div>
        <div class="progress mt-2">
            <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
        </div>
    </div>
    
    <!-- 错误提示 -->
    <div id="error-alert" class="alert alert-danger" style="display: none;" role="alert"></div>

    <!-- 结果显示区域 -->
    <div id="results-container" class="mt-4" style="display: none;">
        
        <!-- Tab 导航 -->
        <ul class="nav nav-tabs" id="analysisTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="summary-tab" data-bs-toggle="tab" data-bs-target="#summary" type="button" role="tab" aria-controls="summary" aria-selected="true">AI总结与概览</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="performance-tab" data-bs-toggle="tab" data-bs-target="#performance" type="button" role="tab" aria-controls="performance" aria-selected="false">市场表现</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="fund-flow-tab" data-bs-toggle="tab" data-bs-target="#fund-flow" type="button" role="tab" aria-controls="fund-flow" aria-selected="false">资金流向</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="risk-tab" data-bs-toggle="tab" data-bs-target="#risk" type="button" role="tab" aria-controls="risk" aria-selected="false">风险与跟踪</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="holdings-tab" data-bs-toggle="tab" data-bs-target="#holdings" type="button" role="tab" aria-controls="holdings" aria-selected="false">持仓分析</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="sector-tab" data-bs-toggle="tab" data-bs-target="#sector" type="button" role="tab" aria-controls="sector" aria-selected="false">板块分析</button>
            </li>
        </ul>

        <!-- Tab 内容 -->
        <div class="tab-content" id="analysisTabContent">
            <!-- AI总结与概览 -->
            <div class="tab-pane fade show active" id="summary" role="tabpanel" aria-labelledby="summary-tab">
                <div class="row mt-3">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">AI 综合诊断</div>
                            <div class="card-body" id="ai-summary-content"><p>AI分析摘要将显示在这里。</p></div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">基本信息</div>
                            <div class="card-body" id="basic-info-content"><p>ETF基本信息将显示在这里。</p></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 市场表现 -->
            <div class="tab-pane fade" id="performance" role="tabpanel" aria-labelledby="performance-tab">
                <div class="card mt-3">
                    <div class="card-header">市场表现与技术分析</div>
                    <div class="card-body" id="performance-content"><p>回报率、技术指标图表将显示在这里。</p></div>
                </div>
            </div>
            <!-- 资金流向 -->
            <div class="tab-pane fade" id="fund-flow" role="tabpanel" aria-labelledby="fund-flow-tab">
                <div class="card mt-3">
                    <div class="card-header">资金流向分析</div>
                    <div class="card-body" id="fund-flow-content"><p>资金流向图表将显示在这里。</p></div>
                </div>
            </div>
            <!-- 风险与跟踪 -->
            <div class="tab-pane fade" id="risk" role="tabpanel" aria-labelledby="risk-tab">
                <div class="card mt-3">
                    <div class="card-header">风险与跟踪能力分析</div>
                    <div class="card-body" id="risk-content"><p>波动率、跟踪误差、溢价率将显示在这里。</p></div>
                </div>
            </div>
            <!-- 持仓分析 -->
            <div class="tab-pane fade" id="holdings" role="tabpanel" aria-labelledby="holdings-tab">
                <div class="card mt-3">
                    <div class="card-header">持仓分析</div>
                    <div class="card-body" id="holdings-content"><p>前十大持仓表格将显示在这里。</p></div>
                </div>
            </div>
            <!-- 板块分析 -->
            <div class="tab-pane fade" id="sector" role="tabpanel" aria-labelledby="sector-tab">
                <div class="card mt-3">
                    <div class="card-header">板块深度分析</div>
                    <div class="card-body" id="sector-content"><p>板块景气度、估值水平将显示在这里。</p></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    let taskId = null;
    let pollingInterval = null;

    // Override showError from layout to use the local error alert
    function showError(message) {
        $('#error-alert').text(message).show();
    }

    $('#analyze-btn').click(function() {
        const etfCode = $('#etf-code-input').val().trim();
        if (!etfCode) {
            showError('请输入有效的ETF代码。');
            return;
        }

        // Reset UI
        $('#results-container').hide();
        $('#error-alert').hide();
        $('#status-container').show();
        $('#progress-bar').css('width', '0%').attr('aria-valuenow', 0).text('0%');

        // Start analysis
        $.ajax({
            url: '/api/start_etf_analysis',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ etf_code: etfCode }),
            success: function(response) {
                taskId = response.task_id;
                if (response.status === 'completed') {
                    displayResults(response.result);
                } else {
                    startPolling();
                }
            },
            error: function(xhr) {
                const errorMsg = xhr.responseJSON ? xhr.responseJSON.error : '未知错误';
                showError('启动分析任务失败: ' + errorMsg);
                $('#status-container').hide();
            }
        });
    });

    function startPolling() {
        if (pollingInterval) clearInterval(pollingInterval);

        pollingInterval = setInterval(function() {
            if (!taskId) {
                clearInterval(pollingInterval);
                return;
            }

            $.ajax({
                url: `/api/etf_analysis_status/${taskId}`,
                type: 'GET',
                success: function(response) {
                    $('#progress-bar').css('width', response.progress + '%').attr('aria-valuenow', response.progress).text(response.progress + '%');

                    if (response.status === 'completed') {
                        clearInterval(pollingInterval);
                        pollingInterval = null;
                        displayResults(response.result);
                    } else if (response.status === 'failed') {
                        clearInterval(pollingInterval);
                        pollingInterval = null;
                        showError('分析任务失败: ' + response.error);
                        $('#status-container').hide();
                    }
                },
                error: function(xhr) {
                    clearInterval(pollingInterval);
                    pollingInterval = null;
                    const errorMsg = xhr.responseJSON ? xhr.responseJSON.error : '未知错误';
                    showError('获取任务状态失败: ' + errorMsg);
                    $('#status-container').hide();
                }
            });
        }, 2000); // Poll every 2 seconds
    }

    function displayResults(results) {
        $('#status-container').hide();
        $('#results-container').show();

        // 1. AI 总结
        const summary = results.ai_summary;
        if (summary && summary.message) {
             // 使用 marked.js 将 Markdown 转换为 HTML
            $('#ai-summary-content').html(marked.parse(summary.message));
        } else {
            $('#ai-summary-content').html(`<div class="p-3"><p class="text-danger">${summary.error || 'AI总结加载失败'}</p></div>`);
        }

        // 2. 基本信息
        const basicInfo = results.basic_info;
        console.log('ETF anlaysis basic info:', basicInfo);
        if (basicInfo && !basicInfo.error) {
            let infoHtml = '<ul class="list-group list-group-flush">';
            const keyMap = {'基金简称': '简称', '基金代码': '代码', '跟踪标的': '跟踪指数', '基金规模': '规模', '成立日期': '成立日', '基金管理人': '管理人'};
            for (const [key, value] of Object.entries(keyMap)) {
                if (basicInfo[key]) {
                    infoHtml += `<li class="list-group-item d-flex justify-content-between align-items-center">${value} <span class="badge bg-primary rounded-pill">${basicInfo[key]}</span></li>`;
                }
            }
            $('#basic-info-content').html(infoHtml + '</ul>');
        } else {
            $('#basic-info-content').html(`<div class="p-3"><p class="text-danger">${basicInfo.error || '信息加载失败'}</p></div>`);
        }
        
        // 3. 市场表现
        const perf = results.market_performance;
        if (perf && !perf.error) {
            let perfHtml = '<div class="row"><div class="col-lg-6"><h6 class="text-center mb-3">回报率 vs. 基准(沪深300)</h6><table class="table table-sm table-hover"><thead><tr><th>周期</th><th>ETF</th><th>基准</th><th>超额</th></tr></thead><tbody>';
            const returns = perf.returns || {}, ben_returns = perf.benchmark_returns || {}, alpha = perf.alpha || {};
            for(const period in returns) {
                const r = returns[period] || 0;
                const br = ben_returns[period] || 0;
                const a = alpha[period] || 0;
                perfHtml += `<tr><td>${period}</td><td class="${r >= 0 ? 'text-success' : 'text-danger'} fw-bold">${r.toFixed(2)}%</td><td class="${br >= 0 ? 'text-success' : 'text-danger'}">${br.toFixed(2)}%</td><td class="${a >= 0 ? 'text-success' : 'text-danger'} fw-bold">${a.toFixed(2)}%</td></tr>`;
            }
            perfHtml += '</tbody></table></div><div class="col-lg-3"><h6 class="text-center mb-3">流动性</h6><ul class="list-group">';
            const liq = perf.liquidity || {};
            const avg_volume = liq['日均成交额(近一月)'] ? (liq['日均成交额(近一月)']/1e8).toFixed(2) + ' 亿' : 'N/A';
            const avg_turnover = liq['日均换手率(近一月)'] ? liq['日均换手率(近一月)'].toFixed(2) + ' %' : 'N/A';
            perfHtml += `<li class="list-group-item">日均成交额<br><strong class="h5">${avg_volume}</strong></li>`;
            perfHtml += `<li class="list-group-item">日均换手率<br><strong class="h5">${avg_turnover}</strong></li></ul></div>`;
            perfHtml += '<div class="col-lg-3"><h6 class="text-center mb-3">技术指标</h6><ul class="list-group">';
            const ind = perf.tech_indicators || {};
            for(const [name, value] of Object.entries(ind)) {
                 perfHtml += `<li class="list-group-item d-flex justify-content-between"><span>${name}</span> <span class="fw-bold">${value ? value.toFixed(2) : 'N/A'}</span></li>`;
            }
            $('#performance-content').html(perfHtml + '</ul></div></div>');
        } else {
             $('#performance-content').html(`<div class="p-3"><p class="text-danger">${perf.error || '表现数据加载失败'}</p></div>`);
        }

        // 4. 资金流向
        const flow = results.fund_flow;
        if (flow && !flow.error) {
            let flowHtml = '<div class="row"><div class="col-md-4"><h6 class="text-center mb-3">累计资金净流入(估算)</h6><ul class="list-group">';
            for(const [period, amount] of Object.entries(flow.summary || {})) {
                flowHtml += `<li class="list-group-item d-flex justify-content-between"><span>${period}</span> <span class="${amount >= 0 ? 'text-success' : 'text-danger'} fw-bold">${(amount / 1e8).toFixed(2)} 亿</span></li>`;
            }
            flowHtml += '</ul></div><div class="col-md-8"><div id="fund-flow-chart"></div></div></div>';
            $('#fund-flow-content').html(flowHtml);
            if (flow.daily_flow_chart_data && flow.daily_flow_chart_data.data) {
                const chartData = flow.daily_flow_chart_data.data.map(item => ({ x: item[0], y: item[1] }));
                const options = { series: [{ name: '资金净流入(亿元)', data: chartData }], chart: { type: 'bar', height: 350, toolbar: { show: true }, zoom: { enabled: true } }, plotOptions: { bar: { colors: { ranges: [{ from: -Infinity, to: 0, color: '#dc3545' }, { from: 0, to: Infinity, color: '#28a745' }] } } }, xaxis: { type: 'datetime' }, yaxis: { title: { text: '资金净流入估算 (亿元)' } }, tooltip: { y: { formatter: (val) => `${val.toFixed(4)} 亿` } }, title: { text: '每日资金净流入估算 (近60日)', align: 'center' } };
                new ApexCharts(document.querySelector("#fund-flow-chart"), options).render();
            }
        } else {
            $('#fund-flow-content').html(`<div class="p-3"><p class="text-danger">${flow.error || '资金流数据加载失败'}</p></div>`);
        }

        // 5. 风险与跟踪能力
        const risk = results.risk_and_tracking;
        if (risk && !risk.error) {
            let riskHtml = `<div class="row text-center"><div class="col-md-3"><div class="card p-2"><h6 class="card-title">年化波动率</h6><p class="h4">${(risk.annualized_volatility * 100).toFixed(2)}%</p></div></div>`;
            riskHtml += `<div class="col-md-2"><div class="card p-2"><h6 class="card-title">Beta</h6><p class="h4">${risk.beta.toFixed(2)}</p></div></div>`;
            riskHtml += `<div class="col-md-2"><div class="card p-2"><h6 class="card-title">夏普比率</h6><p class="h4">${risk.sharpe_ratio.toFixed(2)}</p></div></div>`;
            riskHtml += `<div class="col-md-2"><div class="card p-2"><h6 class="card-title">跟踪误差</h6><p class="h4">${(risk.tracking_error * 100).toFixed(2)}%</p></div></div>`;
            const premium = risk.avg_premium_discount_monthly || 0;
            riskHtml += `<div class="col-md-3"><div class="card p-2"><h6 class="card-title">月均溢价率</h6><p class="h4 ${premium >= 0 ? 'text-danger' : 'text-success'}">${premium.toFixed(2)}%</p></div></div></div>`; // 溢价为红，折价为绿
            $('#risk-content').html(riskHtml);
        } else {
            $('#risk-content').html(`<div class="p-3"><p class="text-danger">${risk.error || '风险数据加载失败'}</p></div>`);
        }

        // 6. 持仓分析
        const holdings = results.holdings;
        if (holdings && !holdings.error) {
            let holdingsHtml = `<div class="row"><div class="col-md-8"><h6 class="text-center mb-3">前十大持仓股</h6><table class="table table-sm table-hover"><thead><tr><th>代码</th><th>名称</th><th>持仓市值(元)</th><th>占净值比例(%)</th></tr></thead><tbody>`;
            for (const stock of holdings.top_10_holdings) {
                holdingsHtml += `<tr><td>${stock['股票代码']}</td><td>${stock['股票名称']}</td><td>${stock['持仓市值']}</td><td>${stock['占净值比例(%)'].toFixed(2)}</td></tr>`;
            }
            holdingsHtml += `</tbody></table></div><div class="col-md-4"><h6 class="text-center mb-3">持仓集中度</h6><div class="card p-3 text-center"><p class="h1">${holdings.concentration.toFixed(2)}%</p><small class="text-muted">前十大持仓占比</small></div></div></div>`;
            $('#holdings-content').html(holdingsHtml);
        } else {
            $('#holdings-content').html(`<div class="p-3"><p class="text-danger">${holdings.error || '持仓数据加载失败'}</p></div>`);
        }

        // 7. 板块深度分析
        const sector = results.sector_analysis;
        if (sector && !sector.error) {
            let sectorHtml = `<h5 class="text-center mb-4">板块: ${sector.sector_name}</h5><div class="row"><div class="col-md-6"><h6 class="text-center mb-3">板块回报率</h6><ul class="list-group">`;
            for (const [period, rate] of Object.entries(sector.returns)) {
                sectorHtml += `<li class="list-group-item d-flex justify-content-between">${period}<span class="${rate >= 0 ? 'text-success' : 'text-danger'} fw-bold">${rate.toFixed(2)}%</span></li>`;
            }
            const pe = sector.valuation.current_pe || 0;
            const percentile = sector.valuation.pe_percentile || 0;
            sectorHtml += `</ul></div><div class="col-md-6"><h6 class="text-center mb-3">板块估值</h6><div class="card p-3 text-center"><p>当前滚动PE: <strong class="h5">${pe.toFixed(2)}</strong></p><p>位于历史 <strong class="h5">${percentile.toFixed(2)}%</strong> 分位点</p></div></div></div>`;
            $('#sector-content').html(sectorHtml);
        } else {
            $('#sector-content').html(`<div class="p-3"><p class="text-danger">${sector.error || '板块数据加载失败'}</p></div>`);
        }
    }
});
</script>
{% endblock %}