网络安全监控中心

复制代码
<!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.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0E2E8B',
                        accent: '#FF6B35',
                        danger: '#E63946',
                        darkBlue: '#0A2463',
                        lightBlue: '#3E92CC',
                        cardBlue: '#1A3A6B'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .bg-gradient-blue {
                background: linear-gradient(135deg, #0A2463 0%, #165DFF 100%);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-3px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-darkBlue to-primary min-h-screen text-gray-100 font-sans">
    <!-- 顶部导航栏 -->
    <header class="bg-darkBlue/80 backdrop-blur-md border-b border-primary/30 sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-3">
                <i class="fa fa-shield text-2xl text-accent"></i>
                <h1 class="text-xl md:text-2xl font-bold text-shadow">网络安全监控中心</h1>
            </div>
            <div class="flex items-center space-x-4">
                <div class="hidden md:flex items-center space-x-2 text-sm">
                    <span class="text-gray-300">当前时间:</span>
                    <span id="current-time" class="font-medium"></span>
                </div>
                <button class="bg-primary/20 hover:bg-primary/40 transition-colors p-2 rounded-full">
                    <i class="fa fa-bell-o"></i>
                </button>
                <div class="h-8 w-8 rounded-full bg-accent flex items-center justify-center">
                    <span class="text-xs font-bold">AD</span>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 标签页导航 -->
        <div class="mb-8 flex justify-center">
            <div class="inline-flex bg-secondary/30 p-1 rounded-lg">
                <button class="tab-button active px-6 py-2 rounded-md bg-primary font-medium transition-all" data-tab="threat">
                    威胁态势
                </button>
                <button class="tab-button px-6 py-2 rounded-md hover:bg-primary/50 font-medium transition-all" data-tab="compromise">
                    失陷态势
                </button>
                <button class="tab-button px-6 py-2 rounded-md hover:bg-primary/50 font-medium transition-all" data-tab="apt">
                    APT情报
                </button>
            </div>
        </div>

        <!-- 主要内容网格 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 左侧攻击事件列表 -->
            <div class="lg:col-span-1">
                <div class="bg-cardBlue/60 backdrop-blur-sm rounded-xl shadow-lg overflow-hidden border border-primary/20">
                    <div class="p-4 border-b border-primary/20 flex justify-between items-center">
                        <h2 class="text-lg font-semibold">最近30日发生的网络攻击行为</h2>
                        <span class="text-xs bg-accent/20 text-accent px-2 py-1 rounded-full">实时更新</span>
                    </div>

                    <div class="flex border-b border-primary/20">
                        <div class="w-1/3 py-2 px-4 bg-danger/80 text-center font-medium text-sm">
                            攻击源地址
                        </div>
                        <div class="w-2/3 py-2 px-4 bg-primary text-center font-medium text-sm">
                            被攻击地址
                        </div>
                    </div>

                    <div class="max-h-[600px] overflow-y-auto scrollbar-hide">
                        <div id="attack-list" class="divide-y divide-primary/10">
                            <!-- 攻击事件项将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧世界地图 -->
            <div class="lg:col-span-2">
                <div class="bg-cardBlue/60 backdrop-blur-sm rounded-xl shadow-lg overflow-hidden border border-primary/20 h-full flex flex-col">
                    <div class="p-4 border-b border-primary/20">
                        <h2 class="text-lg font-semibold">全球网络攻击分布</h2>
                    </div>

                    <div class="flex-1 p-4 relative">
                        <div class="absolute top-4 right-4 bg-darkBlue/70 backdrop-blur-sm rounded-lg p-3 shadow-lg border border-primary/20 z-10">
                            <div class="flex items-center space-x-2 mb-2">
                                <div class="w-3 h-3 rounded-full bg-accent"></div>
                                <span class="text-sm">攻击路径</span>
                            </div>
                            <div class="flex items-center space-x-2 mb-2">
                                <div class="w-3 h-3 rounded-full bg-danger"></div>
                                <span class="text-sm">攻击源</span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <div class="w-3 h-3 rounded-full bg-primary"></div>
                                <span class="text-sm">目标地址</span>
                            </div>
                        </div>

                        <div class="h-full relative">
                            <!-- 地图容器 -->
                            <div id="world-map" class="w-full h-full"></div>
                        </div>
                    </div>

                    <!-- 统计数据卡片 -->
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 border-t border-primary/20">
                        <div class="bg-darkBlue/50 rounded-lg p-3 card-hover">
                            <div class="text-xs text-gray-300 mb-1">总攻击次数</div>
                            <div class="text-2xl font-bold text-white">2,847</div>
                            <div class="text-xs text-green-400 mt-1 flex items-center">
                                <i class="fa fa-arrow-up mr-1"></i> 12.5%
                            </div>
                        </div>
                        <div class="bg-darkBlue/50 rounded-lg p-3 card-hover">
                            <div class="text-xs text-gray-300 mb-1">攻击源IP</div>
                            <div class="text-2xl font-bold text-white">147</div>
                            <div class="text-xs text-green-400 mt-1 flex items-center">
                                <i class="fa fa-arrow-up mr-1"></i> 3.2%
                            </div>
                        </div>
                        <div class="bg-darkBlue/50 rounded-lg p-3 card-hover">
                            <div class="text-xs text-gray-300 mb-1">目标IP</div>
                            <div class="text-2xl font-bold text-white">892</div>
                            <div class="text-xs text-red-400 mt-1 flex items-center">
                                <i class="fa fa-arrow-down mr-1"></i> 2.1%
                            </div>
                        </div>
                        <div class="bg-darkBlue/50 rounded-lg p-3 card-hover">
                            <div class="text-xs text-gray-300 mb-1">高危攻击</div>
                            <div class="text-2xl font-bold text-white">346</div>
                            <div class="text-xs text-green-400 mt-1 flex items-center">
                                <i class="fa fa-arrow-up mr-1"></i> 8.7%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        // 实时时间更新
        function updateTime() {
            const now = new Date();
            const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
            document.getElementById('current-time').textContent = now.toLocaleString('zh-CN', options);
        }
        setInterval(updateTime, 1000);
        updateTime();

        // 标签页切换功能
        const tabButtons = document.querySelectorAll('.tab-button');
        tabButtons.forEach(button => {
            button.addEventListener('click', () => {
                // 移除所有活动状态
                tabButtons.forEach(btn => btn.classList.remove('active', 'bg-primary'));
                tabButtons.forEach(btn => btn.classList.add('hover:bg-primary/50'));

                // 添加当前活动状态
                button.classList.add('active', 'bg-primary');
                button.classList.remove('hover:bg-primary/50');

                // 这里可以添加不同标签页内容的切换逻辑
                const tabName = button.getAttribute('data-tab');
                console.log(`切换到${tabName}标签页`);
            });
        });

        // 攻击数据
        const attackData = [
            { source: "172.192.38.118", sourceCountry: "au", target: "121.***.**.69", targetCountry: "cn", severity: "high" },
            { source: "172.192.38.118", sourceCountry: "au", target: "121.***.**.75", targetCountry: "cn", severity: "high" },
            { source: "172.192.38.118", sourceCountry: "au", target: "121.***.**.76", targetCountry: "cn", severity: "medium" },
            { source: "172.192.38.118", sourceCountry: "au", target: "121.***.**.77", targetCountry: "cn", severity: "high" },
            { source: "172.192.38.118", sourceCountry: "au", target: "121.***.**.78", targetCountry: "cn", severity: "medium" },
            { source: "172.192.38.118", sourceCountry: "au", target: "121.***.**.79", targetCountry: "cn", severity: "low" },
            { source: "172.192.38.118", sourceCountry: "au", target: "121.***.**.80", targetCountry: "cn", severity: "medium" },
            { source: "172.192.38.118", sourceCountry: "au", target: "121.***.**.81", targetCountry: "cn", severity: "high" },
            { source: "172.192.38.118", sourceCountry: "au", target: "121.***.**.82", targetCountry: "cn", severity: "medium" },
            { source: "47.***.30.140", sourceCountry: "us", target: "218.***.**.102", targetCountry: "cn", severity: "high" },
            { source: "64.***.12.89", sourceCountry: "de", target: "117.***.**.56", targetCountry: "cn", severity: "low" },
            { source: "89.***.45.22", sourceCountry: "uk", target: "202.***.**.91", targetCountry: "cn", severity: "medium" },
            { source: "103.***.76.15", sourceCountry: "jp", target: "180.***.**.143", targetCountry: "cn", severity: "high" },
            { source: "212.***.33.77", sourceCountry: "fr", target: "58.***.**.207", targetCountry: "cn", severity: "medium" },
        ];

        // 生成攻击列表
        const attackList = document.getElementById('attack-list');
        attackData.forEach(attack => {
            const attackItem = document.createElement('div');
            attackItem.className = 'flex hover:bg-primary/10 transition-colors';

            // 攻击源地址列
            const sourceCol = document.createElement('div');
            sourceCol.className = 'w-1/3 p-3';
            sourceCol.innerHTML = `
                <div class="flex items-center">
                    <img src="https://flagcdn.com/w80/${attack.sourceCountry}.png" alt="${attack.sourceCountry}国旗" class="w-5 h-3 mr-2 rounded">
                    <span class="text-sm truncate">${attack.source}</span>
                </div>
            `;

            // 目标地址列
            const targetCol = document.createElement('div');
            targetCol.className = 'w-2/3 p-3 flex items-center justify-between';
            targetCol.innerHTML = `
                <div class="flex items-center">
                    <img src="https://flagcdn.com/w80/${attack.targetCountry}.png" alt="${attack.targetCountry}国旗" class="w-5 h-3 mr-2 rounded">
                    <span class="text-sm truncate">${attack.target}</span>
                </div>
                <span class="text-xs px-2 py-0.5 rounded-full ${
                    attack.severity === 'high' ? 'bg-danger/80' :
                    attack.severity === 'medium' ? 'bg-yellow-500/80' : 'bg-green-500/80'
                }">
                    ${attack.severity === 'high' ? '高危' :
                      attack.severity === 'medium' ? '中危' : '低危'}
                </span>
            `;

            attackItem.appendChild(sourceCol);
            attackItem.appendChild(targetCol);
            attackList.appendChild(attackItem);
        });

        // 国家经纬度数据
        const countryCoordinates = {
            'au': { name: '澳大利亚', lng: 133.7751, lat: -25.2744 },
            'cn': { name: '中国', lng: 104.1954, lat: 35.8617 },
            'us': { name: '美国', lng: -95.7129, lat: 37.0902 },
            'de': { name: '德国', lng: 10.4515, lat: 51.1657 },
            'uk': { name: '英国', lng: -3.4360, lat: 55.3781 },
            'jp': { name: '日本', lng: 138.2529, lat: 36.2048 },
            'fr': { name: '法国', lng: 2.2137, lat: 46.2276 }
        };

        // 初始化地图
        window.addEventListener('load', function() {
            // 创建地图实例
            const chartDom = document.getElementById('world-map');
            const myChart = echarts.init(chartDom);

            // 处理地图数据
            function getAttackPaths() {
                return attackData.map(attack => {
                    const source = countryCoordinates[attack.sourceCountry];
                    const target = countryCoordinates[attack.targetCountry];

                    return {
                        source: {
                            name: source.name,
                            value: [source.lng, source.lat]
                        },
                        target: {
                            name: target.name,
                            value: [target.lng, target.lat]
                        }
                    };
                });
            }

            function getUniqueSources() {
                const sources = {};
                attackData.forEach(attack => {
                    if (!sources[attack.sourceCountry]) {
                        const country = countryCoordinates[attack.sourceCountry];
                        sources[attack.sourceCountry] = {
                            name: country.name,
                            value: [country.lng, country.lat]
                        };
                    }
                });
                return Object.values(sources);
            }

            function getUniqueTargets() {
                const targets = {};
                attackData.forEach(attack => {
                    if (!targets[attack.targetCountry]) {
                        const country = countryCoordinates[attack.targetCountry];
                        targets[attack.targetCountry] = {
                            name: country.name,
                            value: [country.lng, country.lat]
                        };
                    }
                });
                return Object.values(targets);
            }

            // 注册世界地图
            fetch('https://cdn.jsdelivr.net/npm/echarts/map/json/world.json')
                .then(response => response.json())
                .then(worldJson => {
                    echarts.registerMap('world', worldJson);

                    // 设置地图配置
                    const option = {
                        backgroundColor: 'transparent',
                        tooltip: {
                            trigger: 'item',
                            formatter: function(params) {
                                return `${params.name}<br/>攻击次数: ${getAttackCount(params.name)}`;
                            }
                        },
                        geo: {
                            map: 'world',
                            roam: true, // 开启缩放和平移
                            label: {
                                show: false
                            },
                            itemStyle: {
                                areaColor: 'rgba(26, 58, 107, 0.6)',
                                borderColor: 'rgba(22, 93, 255, 0.3)',
                                borderWidth: 1
                            },
                            emphasis: {
                                itemStyle: {
                                    areaColor: 'rgba(22, 93, 255, 0.5)'
                                }
                            }
                        },
                        series: [
                            // 攻击路径
                            {
                                name: '攻击路径',
                                type: 'lines',
                                zlevel: 2,
                                effect: {
                                    show: true,
                                    period: 6,
                                    trailLength: 0.3,
                                    symbol: 'arrow',
                                    symbolSize: 6,
                                    color: '#FF6B35'
                                },
                                lineStyle: {
                                    width: 2,
                                    color: '#FF6B35',
                                    curveness: 0.2,
                                    opacity: 0.7
                                },
                                data: getAttackPaths()
                            },
                            // 攻击源点
                            {
                                name: '攻击源',
                                type: 'scatter',
                                coordinateSystem: 'geo',
                                zlevel: 3,
                                symbol: 'circle',
                                symbolSize: 10,
                                itemStyle: {
                                    color: '#E63946',
                                    shadowBlur: 10,
                                    shadowColor: '#E63946'
                                },
                                data: getUniqueSources()
                            },
                            // 目标点
                            {
                                name: '目标地址',
                                type: 'scatter',
                                coordinateSystem: 'geo',
                                zlevel: 3,
                                symbol: 'circle',
                                symbolSize: 10,
                                itemStyle: {
                                    color: '#165DFF',
                                    shadowBlur: 10,
                                    shadowColor: '#165DFF'
                                },
                                data: getUniqueTargets()
                            }
                        ]
                    };

                    // 计算每个国家的攻击次数
                    function getAttackCount(countryName) {
                        let count = 0;
                        attackData.forEach(attack => {
                            if (countryCoordinates[attack.sourceCountry]?.name === countryName ||
                                countryCoordinates[attack.targetCountry]?.name === countryName) {
                                count++;
                            }
                        });
                        return count;
                    }

                    // 设置配置并渲染地图
                    myChart.setOption(option);

                    // 窗口大小变化时调整地图大小
                    window.addEventListener('resize', function() {
                        myChart.resize();
                    });
                })
                .catch(error => {
                    console.error('地图加载失败:', error);
                    // 显示错误信息
                    const mapContainer = document.getElementById('world-map');
                    mapContainer.innerHTML = `
                        <div class="flex items-center justify-center h-full text-red-400">
                            <i class="fa fa-exclamation-triangle mr-2"></i>
                            地图加载失败，请检查网络连接
                        </div>
                    `;
                });
        });
    </script>
</body>
</html>