{% extends "base.html" %}

{% block title %}怀化空气质量大数据分析平台{% endblock %}

{% block content %}
<section class="hero">
    <h1>怀化空气质量大数据分析平台</h1>
    <p>
        项目围绕 2015 年至 2025 年怀化 AQI 历史数据构建，覆盖采集、MySQL 存储、清洗预处理和 Django
        网页可视化分析。页面重点展示 AQI 变化趋势、空气质量等级分布、污染物关系和月度污染强度。
    </p>
</section>

<section class="stats">
    <div class="stat-card">
        <div class="label">记录天数</div>
        <div class="value">{{ stats.total_days }}</div>
    </div>
    <div class="stat-card">
        <div class="label">时间范围</div>
        <div class="value" style="font-size: 18px;">{{ stats.date_range }}</div>
    </div>
    <div class="stat-card">
        <div class="label">平均 AQI</div>
        <div class="value">{{ stats.avg_aqi }}</div>
    </div>
    <div class="stat-card">
        <div class="label">最佳空气质量</div>
        <div class="value" style="font-size: 18px;">{{ stats.best_day }}</div>
    </div>
    <div class="stat-card">
        <div class="label">最高污染日</div>
        <div class="value" style="font-size: 18px;">{{ stats.worst_day }}</div>
    </div>
    <div class="stat-card">
        <div class="label">主导质量等级</div>
        <div class="value" style="font-size: 24px;">{{ stats.dominant_level }}</div>
    </div>
</section>

<section class="grid">
    <div class="panel">
        <h2>折线图：年度 AQI 与 PM2.5 趋势</h2>
        <p>用于观察怀化空气质量多年变化趋势，适合展示时间序列指标的上升、下降和波动。</p>
        <div id="lineChart" class="chart"></div>
    </div>
    <div class="panel">
        <h2>柱状图：月均 AQI 对比</h2>
        <p>对比不同月份的平均污染水平，便于发现季节性差异和高风险月份。</p>
        <div id="barChart" class="chart"></div>
    </div>
    <div class="panel">
        <h2>饼图：空气质量等级占比</h2>
        <p>展示“优、良、污染”各等级在全部样本中的占比结构，适合做整体质量评估。</p>
        <div id="pieChart" class="chart"></div>
    </div>
    <div class="panel">
        <h2>散点图：PM2.5 与 AQI 关系</h2>
        <p>观察 PM2.5 浓度与 AQI 的相关性，高密集区可帮助判断主要污染贡献关系。</p>
        <div id="scatterChart" class="chart"></div>
    </div>
    <div class="panel">
        <h2>热力图：月份与质量等级分布</h2>
        <p>从二维分布角度展示各月份不同空气质量等级的出现次数，便于识别高污染时段。</p>
        <div id="heatmapChart" class="chart tall"></div>
    </div>
    <div class="panel">
        <h2>雷达图：最新年份污染物画像</h2>
        <p>从多个污染物维度同时比较平均水平，适合展示某一年的综合污染特征。</p>
        <div id="radarChart" class="chart"></div>
    </div>
    <div class="panel">
        <h2>补充柱状图：工作日分布</h2>
        <p>统计不同星期的样本数量，辅助判断采样时间覆盖是否均衡。</p>
        <div id="weekdayChart" class="chart"></div>
    </div>
    <div class="panel">
        <h2>高污染日期 Top 10</h2>
        <p>列出 AQI 最高的日期记录，可作为重点治理或报告案例分析对象。</p>
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>AQI</th>
                        <th>质量等级</th>
                        <th>PM2.5</th>
                        <th>PM10</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in top_records %}
                    <tr>
                        <td>{{ item.date }}</td>
                        <td>{{ item.aqi }}</td>
                        <td>{{ item.quality_level }}</td>
                        <td>{{ item.pm25 }}</td>
                        <td>{{ item.pm10 }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5">暂无数据，请先执行导入命令。</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</section>

<div class="footer-note">
    数据来源：历史怀化 AQI 月度 CSV。图表引擎：Apache ECharts。后端：Django 3.2 + MySQL。
</div>
{% endblock %}

{% block extra_js %}
<script>
var chartPayload = JSON.parse('{{ chart_payload|escapejs }}');

function renderChart(id, option) {
    var element = document.getElementById(id);
    if (!element || !window.echarts) {
        return;
    }
    var chart = echarts.init(element);
    chart.setOption(option);
    window.addEventListener('resize', function () {
        chart.resize();
    });
}

function showChartError() {
    var chartNodes = document.querySelectorAll('.chart');
    for (var i = 0; i < chartNodes.length; i += 1) {
        chartNodes[i].innerHTML = '<div style="padding:24px;color:#b45309;">图表库未加载成功，请检查网络或更换 CDN。</div>';
    }
}

function startCharts() {
    if (!window.echarts) {
        showChartError();
        return;
    }

    renderChart('lineChart', {
        tooltip: { trigger: 'axis' },
        legend: { data: ['Avg AQI', 'Avg PM2.5'] },
        xAxis: { type: 'category', data: chartPayload.line_chart ? chartPayload.line_chart.years : [] },
        yAxis: { type: 'value' },
        series: [
            { name: 'Avg AQI', type: 'line', smooth: true, data: chartPayload.line_chart ? chartPayload.line_chart.aqi : [] },
            { name: 'Avg PM2.5', type: 'line', smooth: true, data: chartPayload.line_chart ? chartPayload.line_chart.pm25 : [] }
        ]
    });

    renderChart('barChart', {
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: chartPayload.bar_chart ? chartPayload.bar_chart.months : [] },
        yAxis: { type: 'value' },
        series: [
            {
                type: 'bar',
                name: 'Monthly AQI',
                data: chartPayload.bar_chart ? chartPayload.bar_chart.aqi : [],
                itemStyle: { color: '#1f7a4d' }
            }
        ]
    });

    renderChart('pieChart', {
        tooltip: { trigger: 'item' },
        legend: { bottom: 0 },
        series: [
            {
                name: 'Quality Level',
                type: 'pie',
                radius: ['36%', '68%'],
                data: chartPayload.pie_chart || []
            }
        ]
    });

    renderChart('scatterChart', {
        tooltip: {
            formatter: function (params) {
                return 'PM2.5: ' + params.value[0] + '<br>AQI: ' + params.value[1] + '<br>Level: ' + params.value[2];
            }
        },
        xAxis: { name: 'PM2.5', type: 'value' },
        yAxis: { name: 'AQI', type: 'value' },
        series: [
            {
                type: 'scatter',
                symbolSize: 10,
                data: chartPayload.scatter_chart || [],
                itemStyle: { color: '#d97706', opacity: 0.7 }
            }
        ]
    });

    renderChart('heatmapChart', {
        tooltip: {
            position: 'top',
            formatter: function (params) {
                var month = chartPayload.heatmap_chart.months[params.value[0]];
                var level = chartPayload.heatmap_chart.levels[params.value[1]];
                return month + '<br>' + level + ': ' + params.value[2] + ' days';
            }
        },
        grid: { height: '72%', top: '10%' },
        xAxis: {
            type: 'category',
            data: chartPayload.heatmap_chart ? chartPayload.heatmap_chart.months : [],
            splitArea: { show: true }
        },
        yAxis: {
            type: 'category',
            data: chartPayload.heatmap_chart ? chartPayload.heatmap_chart.levels : [],
            splitArea: { show: true }
        },
        visualMap: {
            min: 0,
            max: 120,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: 0
        },
        series: [
            {
                type: 'heatmap',
                data: chartPayload.heatmap_chart ? chartPayload.heatmap_chart.data : [],
                label: { show: true }
            }
        ]
    });

    renderChart('radarChart', {
        tooltip: {},
        legend: { data: [String(chartPayload.radar_chart ? chartPayload.radar_chart.year : '')] },
        radar: { indicator: chartPayload.radar_chart ? chartPayload.radar_chart.indicators : [] },
        series: [
            {
                type: 'radar',
                data: [
                    {
                        value: chartPayload.radar_chart ? chartPayload.radar_chart.values : [],
                        name: String(chartPayload.radar_chart ? chartPayload.radar_chart.year : ''),
                        areaStyle: { color: 'rgba(31, 122, 77, 0.25)' }
                    }
                ]
            }
        ]
    });

    renderChart('weekdayChart', {
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: chartPayload.weekday_chart ? chartPayload.weekday_chart.weekdays : [] },
        yAxis: { type: 'value' },
        series: [
            {
                type: 'bar',
                data: chartPayload.weekday_chart ? chartPayload.weekday_chart.counts : [],
                itemStyle: { color: '#4b8fbd' }
            }
        ]
    });
}

function waitForEcharts(retry) {
    if (window.echarts) {
        startCharts();
        return;
    }
    if (retry <= 0) {
        showChartError();
        return;
    }
    setTimeout(function () {
        waitForEcharts(retry - 1);
    }, 500);
}

waitForEcharts(10);
</script>
{% endblock %}