418 lines
11 KiB
Vue
418 lines
11 KiB
Vue
|
<template>
|
||
|
|
<div class="threat-intel-map">
|
||
|
|
<div ref="chartDiv" class="map-chart"></div>
|
||
|
|
|
||
|
|
<!-- 左侧漏洞类型面板 -->
|
||
|
|
<div class="info-panel panel-left">
|
||
|
|
<div class="panel-title">🔍 漏洞类型分布</div>
|
||
|
|
<div class="vuln-list">
|
||
|
|
<div class="vuln-item" v-for="(item, index) in vulnTypes" :key="index">
|
||
|
|
<div class="vuln-header">
|
||
|
|
<span class="vuln-name">{{ item.name }}</span>
|
||
|
|
<span class="vuln-count">{{ item.count }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="progress-bar">
|
||
|
|
<div class="progress-fill" :style="{ width: item.percentage + '%', background: item.color }"></div>
|
||
|
|
</div>
|
||
|
|
<div class="vuln-trend" :class="item.trend">
|
||
|
|
{{ item.trend === 'up' ? '↗' : item.trend === 'down' ? '↘' : '→' }} {{ item.change }}%
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 右侧威胁情报排行 -->
|
||
|
|
<div class="info-panel panel-right">
|
||
|
|
<div class="panel-title">📊 威胁情报排行</div>
|
||
|
|
<div class="intel-ranking">
|
||
|
|
<div class="rank-item" v-for="(item, index) in intelRanking" :key="index">
|
||
|
|
<div class="rank-badge" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>
|
||
|
|
<div class="rank-info">
|
||
|
|
<div class="rank-country">{{ item.country }}</div>
|
||
|
|
<div class="rank-threats">{{ item.threats.toLocaleString() }} 威胁</div>
|
||
|
|
</div>
|
||
|
|
<div class="rank-indicator" :style="{ background: item.riskLevel === 'high' ? '#ef4444' : item.riskLevel === 'medium' ? '#f59e0b' : '#10b981' }"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||
|
|
import * as echarts from 'echarts'
|
||
|
|
|
||
|
|
// 响应式数据
|
||
|
|
const chartDiv = ref(null)
|
||
|
|
const myChart = ref(null)
|
||
|
|
|
||
|
|
// 漏洞类型数据
|
||
|
|
const vulnTypes = ref([
|
||
|
|
{ name: 'XSS 跨站脚本', count: 1247, percentage: 35, color: '#ef4444', trend: 'up', change: 12 },
|
||
|
|
{ name: 'SQL 注入', count: 892, percentage: 25, color: '#f97316', trend: 'down', change: 8 },
|
||
|
|
{ name: '缓冲区溢出', count: 634, percentage: 18, color: '#eab308', trend: 'up', change: 15 },
|
||
|
|
{ name: '输入验证', count: 445, percentage: 12, color: '#3b82f6', trend: 'stable', change: 2 },
|
||
|
|
{ name: '信息泄露', count: 356, percentage: 10, color: '#10b981', trend: 'down', change: 5 }
|
||
|
|
])
|
||
|
|
|
||
|
|
// 威胁情报排行
|
||
|
|
const intelRanking = ref([
|
||
|
|
{ country: 'United States', threats: 15420, riskLevel: 'high' },
|
||
|
|
{ country: 'China', threats: 12350, riskLevel: 'high' },
|
||
|
|
{ country: 'Russia', threats: 9870, riskLevel: 'high' },
|
||
|
|
{ country: 'Germany', threats: 6540, riskLevel: 'medium' },
|
||
|
|
{ country: 'Brazil', threats: 4320, riskLevel: 'medium' }
|
||
|
|
])
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// 地理坐标映射 - 主要城市坐标
|
||
|
|
const geoCoordMap = {
|
||
|
|
'Beijing': [116.4074, 39.9042], // 北京
|
||
|
|
'Shanghai': [121.4737, 31.2304], // 上海
|
||
|
|
'Guangzhou': [113.2644, 23.1291], // 广州
|
||
|
|
'Shenzhen': [114.0579, 22.5431], // 深圳
|
||
|
|
'Washington': [-77.0369, 38.9072], // 华盛顿
|
||
|
|
'NewYork': [-74.0060, 40.7128], // 纽约
|
||
|
|
'Moscow': [37.6173, 55.7558], // 莫斯科
|
||
|
|
'Berlin': [13.4050, 52.5200], // 柏林
|
||
|
|
'Tokyo': [139.6917, 35.6895], // 东京
|
||
|
|
'London': [-0.1278, 51.5074], // 伦敦
|
||
|
|
'Paris': [2.3522, 48.8566], // 巴黎
|
||
|
|
'Sydney': [151.2093, -33.8688], // 悉尼
|
||
|
|
'Mumbai': [72.8777, 19.0760], // 孟买
|
||
|
|
'Dubai': [55.2708, 25.2048], // 迪拜
|
||
|
|
'Toronto': [-79.3832, 43.6532], // 多伦多
|
||
|
|
'SaoPaulo': [-46.6333, -23.5505], // 圣保罗
|
||
|
|
'Cairo': [31.2357, 30.0444], // 开罗
|
||
|
|
'Istanbul': [28.9784, 41.0082], // 伊斯坦布尔
|
||
|
|
'Tehran': [51.3890, 35.6892], // 德黑兰
|
||
|
|
'Riyadh': [46.6753, 24.7136] // 利雅得
|
||
|
|
}
|
||
|
|
|
||
|
|
import { loadWorldMap } from '@/utils/mapLoader'
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// 初始化图表
|
||
|
|
const initChart = () => {
|
||
|
|
if (!chartDiv.value) return
|
||
|
|
|
||
|
|
// 地图热力数据
|
||
|
|
const mapData = [
|
||
|
|
{ name: 'China', value: 100 },
|
||
|
|
{ name: 'United States', value: 95 },
|
||
|
|
{ name: 'Russia', value: 80 },
|
||
|
|
{ name: 'Germany', value: 65 },
|
||
|
|
{ name: 'Brazil', value: 45 },
|
||
|
|
{ name: 'India', value: 55 },
|
||
|
|
{ name: 'Japan', value: 40 },
|
||
|
|
{ name: 'United Kingdom', value: 35 },
|
||
|
|
{ name: 'France', value: 30 },
|
||
|
|
{ name: 'Australia', value: 25 },
|
||
|
|
{ name: 'Canada', value: 35 },
|
||
|
|
{ name: 'Mexico', value: 20 },
|
||
|
|
{ name: 'Argentina', value: 15 },
|
||
|
|
{ name: 'South Africa', value: 18 },
|
||
|
|
{ name: 'Egypt', value: 22 },
|
||
|
|
{ name: 'Turkey', value: 28 },
|
||
|
|
{ name: 'Iran', value: 32 },
|
||
|
|
{ name: 'Saudi Arabia', value: 25 },
|
||
|
|
{ name: 'Kazakhstan', value: 12 },
|
||
|
|
{ name: 'Mongolia', value: 8 }
|
||
|
|
]
|
||
|
|
|
||
|
|
// 威胁情报节点
|
||
|
|
const intelNodes = [
|
||
|
|
{ name: '北京情报中心', value: [...geoCoordMap['Beijing'], 100] },
|
||
|
|
{ name: '上海监测点', value: [...geoCoordMap['Shanghai'], 85] },
|
||
|
|
{ name: '广州分析中心', value: [...geoCoordMap['Guangzhou'], 75] },
|
||
|
|
{ name: '深圳预警站', value: [...geoCoordMap['Shenzhen'], 70] },
|
||
|
|
{ name: '华盛顿情报站', value: [...geoCoordMap['Washington'], 90] },
|
||
|
|
{ name: '纽约监控点', value: [...geoCoordMap['NewYork'], 80] },
|
||
|
|
{ name: '莫斯科分析点', value: [...geoCoordMap['Moscow'], 85] },
|
||
|
|
{ name: '柏林预警中心', value: [...geoCoordMap['Berlin'], 65] },
|
||
|
|
{ name: '东京监测站', value: [...geoCoordMap['Tokyo'], 60] },
|
||
|
|
{ name: '伦敦情报点', value: [...geoCoordMap['London'], 55] }
|
||
|
|
]
|
||
|
|
|
||
|
|
const option = {
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
|
||
|
|
// 视觉映射组件
|
||
|
|
visualMap: {
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
left: '20',
|
||
|
|
bottom: '20',
|
||
|
|
text: ['高风险', '低风险'],
|
||
|
|
textStyle: { color: '#64748b', fontSize: 10 },
|
||
|
|
calculable: true,
|
||
|
|
inRange: {
|
||
|
|
color: ['#e0e7ff', '#c7d2fe', '#a5b4fc', '#818cf8', '#6366f1']
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
backgroundColor: 'rgba(255,255,255,0.95)',
|
||
|
|
borderColor: '#e2e8f0',
|
||
|
|
textStyle: { color: '#1f2937' },
|
||
|
|
formatter: function(params) {
|
||
|
|
if(params.seriesType === 'effectScatter') {
|
||
|
|
return `${params.marker} ${params.name}<br/>威胁指数: ${params.value[2]}`
|
||
|
|
}
|
||
|
|
if(!params.value) return params.name + ': 无数据'
|
||
|
|
return `${params.name}<br/>威胁等级: ${params.value}`
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
geo: {
|
||
|
|
map: 'world',
|
||
|
|
roam: true,
|
||
|
|
zoom: 1.2,
|
||
|
|
label: { show: false },
|
||
|
|
itemStyle: {
|
||
|
|
areaColor: '#f8fafc',
|
||
|
|
borderColor: '#e2e8f0',
|
||
|
|
borderWidth: 1
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
label: { show: false },
|
||
|
|
itemStyle: {
|
||
|
|
areaColor: '#3b82f6',
|
||
|
|
shadowBlur: 10,
|
||
|
|
shadowColor: 'rgba(59, 130, 246, 0.3)'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
series: [
|
||
|
|
// 地域威胁热力图
|
||
|
|
{
|
||
|
|
name: '威胁分布',
|
||
|
|
type: 'map',
|
||
|
|
geoIndex: 0,
|
||
|
|
data: mapData
|
||
|
|
},
|
||
|
|
|
||
|
|
// 情报节点
|
||
|
|
{
|
||
|
|
name: '情报节点',
|
||
|
|
type: 'effectScatter',
|
||
|
|
coordinateSystem: 'geo',
|
||
|
|
data: intelNodes,
|
||
|
|
symbolSize: function (val) {
|
||
|
|
return val[2] / 6
|
||
|
|
},
|
||
|
|
showEffectOn: 'render',
|
||
|
|
rippleEffect: {
|
||
|
|
brushType: 'stroke',
|
||
|
|
scale: 2.5
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
formatter: '{b}',
|
||
|
|
position: 'right',
|
||
|
|
color: '#1f2937',
|
||
|
|
fontSize: 9,
|
||
|
|
textBorderColor: '#fff',
|
||
|
|
textBorderWidth: 1
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
color: '#f59e0b',
|
||
|
|
shadowBlur: 10,
|
||
|
|
shadowColor: '#f59e0b'
|
||
|
|
},
|
||
|
|
zlevel: 1
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
|
||
|
|
myChart.value = echarts.init(chartDiv.value)
|
||
|
|
myChart.value.setOption(option)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 组件挂载
|
||
|
|
onMounted(async () => {
|
||
|
|
await loadWorldMap()
|
||
|
|
initChart()
|
||
|
|
|
||
|
|
window.addEventListener('resize', () => {
|
||
|
|
myChart.value && myChart.value.resize()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
// 组件卸载
|
||
|
|
onUnmounted(() => {
|
||
|
|
if (myChart.value) {
|
||
|
|
myChart.value.dispose()
|
||
|
|
}
|
||
|
|
window.removeEventListener('resize', () => {
|
||
|
|
myChart.value && myChart.value.resize()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.threat-intel-map {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.map-chart {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 信息面板通用样式 */
|
||
|
|
.info-panel {
|
||
|
|
position: absolute;
|
||
|
|
top: 20px;
|
||
|
|
width: 260px;
|
||
|
|
background: rgba(255, 255, 255, 0.95);
|
||
|
|
backdrop-filter: blur(8px);
|
||
|
|
border: 1px solid rgba(59, 130, 246, 0.2);
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
padding: 16px;
|
||
|
|
z-index: 10;
|
||
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||
|
|
|
||
|
|
.panel-title {
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #3b82f6;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
border-bottom: 1px solid rgba(59, 130, 246, 0.2);
|
||
|
|
padding-bottom: 8px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel-left { left: 20px; }
|
||
|
|
.panel-right { right: 20px; }
|
||
|
|
|
||
|
|
/* 漏洞类型列表 */
|
||
|
|
.vuln-list {
|
||
|
|
.vuln-item {
|
||
|
|
margin-bottom: 12px;
|
||
|
|
|
||
|
|
.vuln-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
|
||
|
|
.vuln-name {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #374151;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.vuln-count {
|
||
|
|
font-size: 11px;
|
||
|
|
color: #6b7280;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-bar {
|
||
|
|
height: 4px;
|
||
|
|
background: rgba(59, 130, 246, 0.1);
|
||
|
|
border-radius: 2px;
|
||
|
|
overflow: hidden;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
|
||
|
|
.progress-fill {
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 2px;
|
||
|
|
transition: width 1s ease;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.vuln-trend {
|
||
|
|
font-size: 10px;
|
||
|
|
font-weight: 600;
|
||
|
|
|
||
|
|
&.up { color: #ef4444; }
|
||
|
|
&.down { color: #10b981; }
|
||
|
|
&.stable { color: #6b7280; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 威胁情报排行 */
|
||
|
|
.intel-ranking {
|
||
|
|
.rank-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
padding: 8px;
|
||
|
|
border-radius: 6px;
|
||
|
|
transition: background-color 0.2s;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: rgba(59, 130, 246, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.rank-badge {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 10px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: white;
|
||
|
|
margin-right: 12px;
|
||
|
|
|
||
|
|
&.rank-1 { background: #ef4444; }
|
||
|
|
&.rank-2 { background: #f97316; }
|
||
|
|
&.rank-3 { background: #eab308; }
|
||
|
|
&.rank-4, &.rank-5 { background: #6b7280; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.rank-info {
|
||
|
|
flex: 1;
|
||
|
|
|
||
|
|
.rank-country {
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #1f2937;
|
||
|
|
margin-bottom: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rank-threats {
|
||
|
|
font-size: 10px;
|
||
|
|
color: #6b7280;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.rank-indicator {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* 响应式适配 */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.info-panel {
|
||
|
|
width: 220px;
|
||
|
|
padding: 12px;
|
||
|
|
top: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel-left { left: 15px; }
|
||
|
|
.panel-right { right: 15px; }
|
||
|
|
}
|
||
|
|
</style>
|