cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

地图部分修改

Browse Source
This commit is contained in:
gcw_yTjNWok9
2025-12-18 13:46:53 +08:00
parent 42aa1eda2b
commit 12cf936916
1 changed files with 45 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/views/Jyh/security/index.vue
View File

@@ -67,6 +67,30 @@
<!-- 图表网格布局：新增多个模块 --> <!-- 图表网格布局：新增多个模块 -->
<div class="index-module__NV_5cW__chartsGrid"> <div class="index-module__NV_5cW__chartsGrid">
<!-- 全球威胁情报分析地图 - 移到最上面 -->
<div class="index-module__NV_5cW__chartCard chartCard__wide">
<h3 class="chartCard__title">🛡️ 全球威胁情报分析与监测</h3>
<div class="chartCard__container map-container">
<ThreatIntelMap />
</div>
</div>
<div class="index-module__NV_5cW__chartCard">
<h3 class="chartCard__title">行业分布</h3>
<div class="chartCard__container">
<div class="num-empty" v-if="isEmpty.university"></div>
<div v-else id="cweAttackSurfaceRadar" class="chart"></div>
</div>
</div>
<div class="index-module__NV_5cW__chartCard">
<h3 class="chartCard__title">高危组件 Top 10</h3>
<div class="chartCard__container">
<div class="num-empty" v-if="isEmpty.community"></div>
<div v-else id="highRiskComponentRank" class="chart"></div>
</div>
</div>
<div class="index-module__NV_5cW__chartCard list-card"> <div class="index-module__NV_5cW__chartCard list-card">
<h3 class="chartCard__title">情报流</h3> <h3 class="chartCard__title">情报流</h3>
<!-- 新增：ref + 鼠标事件 --> <!-- 新增：ref + 鼠标事件 -->
@@ -85,23 +109,6 @@
</div> </div>
</div> </div>
<div class="index-module__NV_5cW__chartCard">
<h3 class="chartCard__title">行业分布</h3>
<div class="chartCard__container">
<div class="num-empty" v-if="isEmpty.university"></div>
<div v-else id="cweAttackSurfaceRadar" class="chart"></div>
</div>
</div>
<div class="index-module__NV_5cW__chartCard">
<h3 class="chartCard__title">高危组件 Top 10</h3>
<div class="chartCard__container">
<div class="num-empty" v-if="isEmpty.community"></div>
<div v-else id="highRiskComponentRank" class="chart"></div>
</div>
</div>
<div class="index-module__NV_5cW__chartCard chartCard__wide"> <div class="index-module__NV_5cW__chartCard chartCard__wide">
<div class="chartCard__header"> <div class="chartCard__header">
<h3 class="chartCard__title">CVE 月度趋势</h3> <h3 class="chartCard__title">CVE 月度趋势</h3>
@@ -242,6 +249,7 @@
import { onMounted, ref, nextTick, watch, onUnmounted } from 'vue'; import { onMounted, ref, nextTick, watch, onUnmounted } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { usePageResize } from '@/utils/hooks/usePageResize'; import { usePageResize } from '@/utils/hooks/usePageResize';
import ThreatIntelMap from './components/ThreatIntelMap.vue';
// 页面尺寸响应式 // 页面尺寸响应式
const { widthType } = usePageResize(); const { widthType } = usePageResize();
@@ -1643,6 +1651,26 @@ onMounted(() => {
position: relative; position: relative;
} }
/* 地图容器特殊样式 */
.chartCard__container.map-container {
height: 500px; /* 地图需要更大的高度 */
border-radius: 0.5rem;
overflow: hidden;
background: transparent; /* 让地图组件自己控制背景 */
}
/* 地图卡片标题样式优化 */
.index-module__NV_5cW__chartCard:has(.map-container) .chartCard__title {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
border-radius: 20px;
padding: 8px 16px;
margin: 0 auto 16px;
width: fit-content;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(59, 130, 246, 0.2);
}
/* 列表容器样式：隐藏原生滚动条（可选，视觉更美观） */ /* 列表容器样式：隐藏原生滚动条（可选，视觉更美观） */
.chartCard__container.list-container { .chartCard__container.list-container {
height: auto; height: auto;