From 1643ea6e63d82f26ec6a32729c79c7c42e404926 Mon Sep 17 00:00:00 2001
From: d266377 <d266377@noreply.gitcode.com>
Date: Tue, 27 Jan 2026 10:50:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=80=81=E5=8A=BF=E6=84=9F=E7=9F=A5=E5=B9=B3?=
 =?UTF-8?q?=E5=8F=B0-=E5=85=A8=E7=90=83=E5=BC=80=E6=BA=90=E9=A3=8E?=
 =?UTF-8?q?=E9=99=A9=E6=80=81=E5=8A=BF=E6=84=9F=E7=9F=A5=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E9=AB=98=E5=8D=B1=E7=BB=84=E4=BB=B6top10?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/HighRiskComponentRank.vue      | 82 +++++++++++++++----
 src/views/Jyh/security/index.vue              |  1 +
 2 files changed, 65 insertions(+), 18 deletions(-)

diff --git a/src/views/Jyh/security/components/HighRiskComponentRank.vue b/src/views/Jyh/security/components/HighRiskComponentRank.vue
index 8094959..b265970 100644
--- a/src/views/Jyh/security/components/HighRiskComponentRank.vue
+++ b/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,6 +42,49 @@ const chartRef = ref<HTMLDivElement | null>(null);
 // 图表实例存储
 let chartInstance: echarts.ECharts | null = null;
 
+// 组件数据
+const componentData = ref<ComponentData[]>([]);
+
+// 获取高危组件数据
+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: '心脏出血、幽灵猫等高危漏洞' },
+        { 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和原型污染漏洞' }
+      ];
+    }
+  } 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 initChart = async () => {
   if (!chartRef.value) return;
@@ -43,22 +96,8 @@ const initChart = async () => {
   
   chartInstance = echarts.init(chartRef.value);
   
-  // 高危组件数据（基于真实开源项目使用情况和漏洞统计）
-  const highRiskComponentData = [
-    { 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 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) {
diff --git a/src/views/Jyh/security/index.vue b/src/views/Jyh/security/index.vue
index 1b76ad8..66eb17f 100644
--- a/src/views/Jyh/security/index.vue
+++ b/src/views/Jyh/security/index.vue
@@ -43,6 +43,7 @@
           <!-- 高危组件Top 10 -->
           <HighRiskComponentRank />
 
+          <!-- 情报流 -->
           <IntelligenceFeed />
 
           <div class="index-module__NV_5cW__chartCard chartCard__wide">