ai-LiaoWangweb-app/app/templates/screen.html

{% extends "base.html" %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
        background-color: #0b1325;
        color: #fff;
        font-family: 'Microsoft YaHei', sans-serif;
        overflow: hidden;
        background-image: radial-gradient(circle at center, #1a2a4a 0%, #0b1325 100%);
    }

    /* Header */
    .screen-header {
        height: 80px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        border-bottom: 2px solid #2c4270;
        box-shadow: 0 0 20px rgba(44, 66, 112, 0.5);
    }
    .screen-header h1 {
        font-size: 32px;
        letter-spacing: 5px;
        text-shadow: 0 0 10px #00eaff;
        background: linear-gradient(to bottom, #fff, #84d8ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .screen-time {
        position: absolute;
        right: 30px;
        font-size: 18px;
        color: #84d8ff;
    }

    /* Layout */
    .screen-container {
        display: flex;
        height: calc(100vh - 80px);
        padding: 20px;
        gap: 20px;
    }
    .screen-column {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .screen-left { flex: 3; }
    .screen-center { flex: 5; position: relative; }
    .screen-right { flex: 3; }

    /* Card/Panel */
    .screen-panel {
        background: rgba(18, 32, 60, 0.6);
        border: 1px solid #2c4270;
        border-radius: 4px;
        padding: 15px;
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;
        box-shadow: inset 0 0 20px rgba(0, 150, 255, 0.1);
    }
    .screen-panel::before {
        content: '';
        position: absolute;
        top: -1px; left: -1px;
        width: 10px; height: 10px;
        border-top: 2px solid #00eaff;
        border-left: 2px solid #00eaff;
    }
    .screen-panel::after {
        content: '';
        position: absolute;
        bottom: -1px; right: -1px;
        width: 10px; height: 10px;
        border-bottom: 2px solid #00eaff;
        border-right: 2px solid #00eaff;
    }
    .screen-panel-title {
        font-size: 18px;
        color: #00eaff;
        margin-bottom: 15px;
        padding-left: 10px;
        border-left: 4px solid #00eaff;
    }
    .screen-chart {
        flex: 1;
        width: 100%;
        height: 100%;
        min-height: 200px;
    }

    /* Center Content */
    .screen-stats {
        display: flex;
        justify-content: space-around;
        margin-bottom: 20px;
    }
    .screen-stat {
        text-align: center;
        background: rgba(0, 78, 146, 0.3);
        padding: 15px 25px;
        border-radius: 8px;
        border: 1px solid #00eaff;
    }
    .screen-stat-value {
        font-size: 36px;
        font-weight: bold;
        color: #ffeb3b;
        text-shadow: 0 0 10px rgba(255, 235, 59, 0.5);
    }
    .screen-stat-label {
        color: #fff;
        font-size: 16px;
        margin-top: 5px;
    }

    /* List Style */
    .screen-news {
        overflow-y: hidden;
        flex: 1;
    }
    .screen-news-item {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: #ccc;
        font-size: 14px;
        transition: all 0.3s;
    }
    .screen-news-item:hover {
        background: rgba(0, 234, 255, 0.1);
        color: #fff;
    }
    .screen-news-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 70%;
    }
</style>
{% endblock %}

{% block content %}
<div class="flex h-screen overflow-hidden" id="screen-view">
    <!-- Sidebar -->
    {% include 'partials/sidebar.html' %}

    <!-- Main Content -->
    <div class="flex-1 flex flex-col min-w-0 overflow-hidden">
        <div class="screen-header">
            <h1>路桥采集数据可视化平台</h1>
            <div class="screen-time" id="clock"></div>
        </div>

        <div class="screen-container">
            <!-- Left Column -->
            <div class="screen-column screen-left">
                <div class="screen-panel">
                    <div class="screen-panel-title">数据来源分布</div>
                    <div id="chart-source" class="screen-chart"></div>
                </div>
                <div class="screen-panel">
                    <div class="screen-panel-title">采集趋势分析 (近7天)</div>
                    <div id="chart-trend" class="screen-chart"></div>
                </div>
                <div class="screen-panel">
                    <div class="screen-panel-title">热词云图</div>
                    <div id="chart-words" class="screen-chart"></div>
                </div>
            </div>

            <!-- Center Column -->
            <div class="screen-column screen-center">
                <div class="screen-stats">
                    <div class="screen-stat">
                        <div class="screen-stat-value" id="val-total">0</div>
                        <div class="screen-stat-label">总数据量</div>
                    </div>
                    <div class="screen-stat">
                        <div class="screen-stat-value" id="val-today">0</div>
                        <div class="screen-stat-label">今日新增</div>
                    </div>
                    <div class="screen-stat">
                        <div class="screen-stat-value" id="val-ai">0</div>
                        <div class="screen-stat-label">AI智库</div>
                    </div>
                    <div class="screen-stat">
                        <div class="screen-stat-value" id="val-tasks">0</div>
                        <div class="screen-stat-label">活跃任务</div>
                    </div>
                </div>
                <div id="earth-chart" class="screen-chart" style="height: 100%;"></div>
            </div>

            <!-- Right Column -->
            <div class="screen-column screen-right">
                <div class="screen-panel">
                    <div class="screen-panel-title">采集任务状态</div>
                    <div id="chart-tasks" class="screen-chart"></div>
                </div>
                <div class="screen-panel" style="flex: 2;">
                    <div class="screen-panel-title">实时采集动态</div>
                    <div class="screen-news" id="news-list"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Mobile Overlay -->
    <div class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden" id="sidebar-overlay"></div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Clock
    setInterval(() => {
        const now = new Date();
        document.getElementById('clock').innerText = now.toLocaleString();
    }, 1000);

    // Init Charts
    const chartSource = echarts.init(document.getElementById('chart-source'));
    const chartTrend = echarts.init(document.getElementById('chart-trend'));
    const chartWords = echarts.init(document.getElementById('chart-words'));
    const chartTasks = echarts.init(document.getElementById('chart-tasks'));
    const chartEarth = echarts.init(document.getElementById('earth-chart'));

    // Resize
    window.addEventListener('resize', () => {
        chartSource.resize();
        chartTrend.resize();
        chartWords.resize();
        chartTasks.resize();
        chartEarth.resize();
    });

    // Fetch Data
    function loadData() {
        $.get('/api/screen/data', function(res) {
            updateStats(res.stats);
            updateSourceChart(res.charts.source_pie);
            updateTrendChart(res.charts.daily_trend);
            updateTaskChart(res.charts.task_bar);
            updateWordCloud(res.charts.keywords);
            updateNewsList(res.news_list);
        });
    }

    function updateStats(stats) {
        animateValue('val-total', stats.total_articles);
        animateValue('val-today', stats.today_articles);
        animateValue('val-tasks', stats.active_tasks);
    }

    function animateValue(id, end) {
        const obj = document.getElementById(id);
        const start = parseInt(obj.innerText);
        if (start === end) return;
        let current = start;
        const step = Math.ceil((end - start) / 20) || 1;
        const timer = setInterval(() => {
            current += step;
            if ((step > 0 && current >= end) || (step < 0 && current <= end)) {
                current = end;
                clearInterval(timer);
            }
            obj.innerText = current;
        }, 50);
    }

    function updateSourceChart(data) {
        chartSource.setOption({
            tooltip: { trigger: 'item' },
            legend: { top: '5%', left: 'center', textStyle: { color: '#fff' } },
            series: [{
                name: '来源', type: 'pie',
                radius: ['40%', '70%'], avoidLabelOverlap: false,
                itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
                label: { show: false, position: 'center' },
                emphasis: { label: { show: true, fontSize: 20, fontWeight: 'bold', color: '#fff' } },
                labelLine: { show: false }, data: data
            }]
        });
    }

    function updateTrendChart(data) {
        chartTrend.setOption({
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: data.dates, axisLine: { lineStyle: { color: '#fff' } } },
            yAxis: { type: 'value', axisLine: { lineStyle: { color: '#fff' } }, splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } } },
            series: [{
                data: data.values, type: 'line', smooth: true,
                areaStyle: { opacity: 0.5, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgb(0, 221, 255)' }, { offset: 1, color: 'rgb(77, 119, 255)' }]) },
                itemStyle: { color: '#00eaff' }
            }]
        });
    }

    function updateTaskChart(data) {
        chartTasks.setOption({
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: data.labels, axisLabel: { color: '#fff' } },
            yAxis: { type: 'value', axisLabel: { color: '#fff' }, splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } } },
            series: [{
                data: data.values, type: 'bar',
                itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#83bff6' }, { offset: 0.5, color: '#188df0' }, { offset: 1, color: '#188df0' }]) }
            }]
        });
    }

    function updateWordCloud(data) {
        chartWords.setOption({
            tooltip: { show: true },
            series: [{
                type: 'graph', layout: 'force', force: { repulsion: 100 },
                data: data.map(item => ({
                    name: item.name, value: item.value, symbolSize: item.value / 2, draggable: true,
                    itemStyle: { color: 'rgb(' + [Math.round(Math.random()*160), Math.round(Math.random()*160), Math.round(Math.random()*160)].join(',') + ')' }
                })),
                label: { show: true, color: '#fff' }
            }]
        });
    }

    function updateNewsList(list) {
        const container = $('#news-list');
        container.empty();
        list.forEach(item => {
            container.append(`<div class="screen-news-item"><span class="screen-news-title" title="${item.title}">[${item.source}] ${item.title}</span><span>${item.time}</span></div>`);
        });
    }

    // 3D Earth
    function initEarth() {
        chartEarth.setOption({
            globe: {
                baseTexture: '/assets/earth.jpg',
                heightTexture: '/assets/bathymetry.jpg',
                displacementScale: 0.1, shading: 'lambert',
                environment: '/assets/starfield.jpg',
                light: { ambient: { intensity: 0.4 }, main: { intensity: 0.4 } },
                viewControl: { autoRotate: true, autoRotateSpeed: 5, distance: 150 }
            },
            series: []
        });
    }

    initEarth();
    loadData();
    setInterval(loadData, 30000);

    // Sidebar Toggle Logic (Mobile)
    const sidebar = document.getElementById('sidebar');
    const openSidebarBtn = document.getElementById('open-sidebar');
    const closeSidebarBtn = document.getElementById('close-sidebar');
    const overlay = document.getElementById('sidebar-overlay');

    function toggleSidebar() {
        sidebar.classList.toggle('-translate-x-full');
        overlay.classList.toggle('hidden');
    }

    if (openSidebarBtn) openSidebarBtn.addEventListener('click', toggleSidebar);
    if (closeSidebarBtn) closeSidebarBtn.addEventListener('click', toggleSidebar);
    if (overlay) overlay.addEventListener('click', toggleSidebar);
</script>
{% endblock %}