态势感知平台-全球开源风险态势感知监控中心高危组件top10接口对接

src/views/Jyh/security/components/HighRiskComponentRank.vue

@@ -11,10 +11,20 @@
 <script setup lang="ts">
 import { onMounted, ref, nextTick, watch, onUnmounted } from 'vue';
 import * as echarts from 'echarts';
+import { highRiskComponentPage1 } from '@/api/jyh/situation';
+
+// 定义组件数据结构
+interface ComponentData {
+  name: string;
+  cvss: number;
+  vulnCount: number;
+  usage: string;
+  desc: string;
+}
 
 // 定义属性，允许从父组件传入数据
 const props = defineProps<{
-  data?: Array<any>;
+  data?: Array<ComponentData>;
   loading?: boolean;
 }>();
 
@@ -32,19 +42,19 @@ const chartRef = ref<HTMLDivElement | null>(null);
 // 图表实例存储
 let chartInstance: echarts.ECharts | null = null;
 
-// 初始化图表
-const initChart = async () => {
-  if (!chartRef.value) return;
+// 组件数据
+const componentData = ref<ComponentData[]>([]);
 
-  // 销毁之前的实例
-  if (chartInstance) {
-    chartInstance.dispose();
-  }
-  
-  chartInstance = echarts.init(chartRef.value);
-  
-  // 高危组件数据（基于真实开源项目使用情况和漏洞统计）
-  const highRiskComponentData = [
+// 获取高危组件数据
+const fetchComponentData = async () => {
+  try {
+    const response = await highRiskComponentPage1();
+    if (response.code === 200) {
+      componentData.value = response.data;
+    } else {
+      console.error('获取高危组件数据失败:', response.msg);
+      // 如果接口调用失败，使用默认数据
+      componentData.value = [
         { name: 'Log4j2', cvss: 9.8, vulnCount: 15, usage: '1200万+', desc: 'CVE-2021-44228等严重RCE漏洞' },
         { name: 'Apache Struts2', cvss: 9.7, vulnCount: 12, usage: '850万+', desc: 'S2系列远程代码执行漏洞' },
         { name: 'OpenSSL', cvss: 9.6, vulnCount: 18, usage: '2500万+', desc: '心脏出血、幽灵猫等高危漏洞' },
@@ -56,9 +66,38 @@ const initChart = async () => {
         { name: 'Lodash', cvss: 9.0, vulnCount: 5, usage: '2200万+', desc: '原型污染漏洞，影响Node.js生态' },
         { name: 'Moment.js', cvss: 9.0, vulnCount: 4, usage: '1100万+', desc: 'ReDoS和原型污染漏洞' }
       ];
+    }
+  } catch (error) {
+    console.error('请求高危组件数据时发生错误:', error);
+    // 发生异常时使用默认数据
+    componentData.value = [
+      { name: 'Log4j2', cvss: 9.8, vulnCount: 15, usage: '1200万+', desc: 'CVE-2021-44228等严重RCE漏洞' },
+      { name: 'Apache Struts2', cvss: 9.7, vulnCount: 12, usage: '850万+', desc: 'S2系列远程代码执行漏洞' },
+      { name: 'OpenSSL', cvss: 9.6, vulnCount: 18, usage: '2500万+', desc: '心脏出血、幽灵猫等高危漏洞' },
+      { name: 'Spring Framework', cvss: 9.5, vulnCount: 9, usage: '1800万+', desc: 'Spring4Shell等RCE漏洞' },
+      { name: 'Jackson', cvss: 9.4, vulnCount: 11, usage: '1000万+', desc: '反序列化漏洞，影响Java生态' },
+      { name: 'Fastjson', cvss: 9.3, vulnCount: 14, usage: '600万+', desc: '多个反序列化RCE漏洞' },
+      { name: 'Apache Commons', cvss: 9.2, vulnCount: 8, usage: '1500万+', desc: 'Collections反序列化漏洞' },
+      { name: 'jQuery', cvss: 9.1, vulnCount: 6, usage: '3000万+', desc: 'XSS和原型污染漏洞' },
+      { name: 'Lodash', cvss: 9.0, vulnCount: 5, usage: '2200万+', desc: '原型污染漏洞，影响Node.js生态' },
+      { name: 'Moment.js', cvss: 9.0, vulnCount: 4, usage: '1100万+', desc: 'ReDoS和原型污染漏洞' }
+    ];
+  }
+};
 
-  // 如果有传入的数据，则使用传入的数据
-  const chartData = props.data || highRiskComponentData;
+// 初始化图表
+const initChart = async () => {
+  if (!chartRef.value) return;
+  
+  // 销毁之前的实例
+  if (chartInstance) {
+    chartInstance.dispose();
+  }
+  
+  chartInstance = echarts.init(chartRef.value);
+  
+  // 如果有传入的数据，则优先使用传入的数据，否则使用获取到的数据
+  const chartData = props.data || componentData.value;
 
   // 检查是否有有效数据
   isEmpty.value = !chartData || chartData.length === 0;
@@ -137,7 +176,9 @@ const initChart = async () => {
 };
 
 // 组件挂载时初始化图表
-onMounted(() => {
+onMounted(async () => {
+  await fetchComponentData(); // 获取高危组件数据
+  await nextTick();
   initChart();
 });
 
@@ -146,6 +187,11 @@ watch(() => props.data, () => {
   initChart();
 }, { deep: true });
 
+// 监听组件内部数据变化，重新渲染图表
+watch(componentData, () => {
+  initChart();
+}, { deep: true });
+
 // 组件卸载时清理图表实例
 onUnmounted(() => {
   if (chartInstance) {

src/views/Jyh/security/index.vue

@@ -43,6 +43,7 @@
           <!-- 高危组件Top 10 -->
           <HighRiskComponentRank />
 
+          <!-- 情报流 -->
           <IntelligenceFeed />
 
           <div class="index-module__NV_5cW__chartCard chartCard__wide">