Maas2-group
/
ai-LiaoWangweb-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数智大屏 - 舆情分析系统</title>
    <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>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.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;
            width: 100vw;
            height: 100vh;
            background-image: radial-gradient(circle at center, #1a2a4a 0%, #0b1325 100%);
        }
        
        /* Header */
        .header {
            height: 80px;
            width: 100%;
            background: url('https://lib.baomitu.com/echarts/4.9.0/echarts.min.js'); /* Placeholder for header bg if needed */
            background-size: 100% 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);
        }
        .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;
        }
        .time-display {
            position: absolute;
            right: 30px;
            font-size: 18px;
            color: #84d8ff;
        }

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

        /* Card/Panel */
        .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);
        }
        .panel::before {
            content: '';
            position: absolute;
            top: -1px; left: -1px;
            width: 10px; height: 10px;
            border-top: 2px solid #00eaff;
            border-left: 2px solid #00eaff;
        }
        .panel::after {
            content: '';
            position: absolute;
            bottom: -1px; right: -1px;
            width: 10px; height: 10px;
            border-bottom: 2px solid #00eaff;
            border-right: 2px solid #00eaff;
        }
        
        .panel-title {
            font-size: 18px;
            color: #00eaff;
            margin-bottom: 15px;
            padding-left: 10px;
            border-left: 4px solid #00eaff;
        }
        
        .chart-container {
            flex: 1;
            width: 100%;
            height: 100%;
            min-height: 200px;
        }

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

        .earth-container {
            flex: 1;
            width: 100%;
            border: 1px solid rgba(0, 234, 255, 0.2);
            border-radius: 50%; /* Optional */
            background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,10,30,0.5) 100%);
        }

        /* List Style */
        .news-list {
            overflow-y: hidden;
            flex: 1;
        }
        .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;
        }
        .news-item:hover {
            background: rgba(0, 234, 255, 0.1);
            color: #fff;
        }
        .news-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 70%;
        }
        .news-time {
            color: #00eaff;
        }

    </style>
</head>
<body>
    <div class="header">
        <h1>数智舆情大数据可视化平台</h1>
        <div class="time-display" id="clock"></div>
    </div>

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

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

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

    <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); // Using simple bar/scatter for now or specialized wordcloud if imported
                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) {
            const option = {
                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
                }]
            };
            chartSource.setOption(option);
        }

        function updateTrendChart(data) {
            const option = {
                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' }
                }]
            };
            chartTrend.setOption(option);
        }

        function updateTaskChart(data) {
            const option = {
                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' }
                        ])
                    }
                }]
            };
            chartTasks.setOption(option);
        }

        function updateWordCloud(data) {
            // Using a bubble chart simulation for words since we didn't import wordcloud extension
            const option = {
                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' }
                }]
            };
            chartWords.setOption(option);
        }

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

        // 3D Earth Config
        function initEarth() {
            const option = {
                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, // Simulating rotation
                        distance: 150
                    }
                },
                series: []
            };
            chartEarth.setOption(option);
        }

        // Initialize
        initEarth();
        loadData();
        setInterval(loadData, 30000); // Refresh every 30s
    </script>
</body>
</html>