态势感知平台-全球开源风险态势感知监控中心漏洞等级分布对接后端

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

@@ -9,8 +9,9 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, nextTick, onMounted, onUnmounted } from 'vue';
+import { ref, nextTick, onMounted, onUnmounted, watch } from 'vue';
 import * as echarts from 'echarts';
+import { vulnerabilitySeverityPage1 } from '@/api/jyh/situation';
 
 // 空数据标识
 const isEmpty = ref({
@@ -22,17 +23,54 @@ const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({
   vulnerabilitySeverityChart: null
 });
 
-// 漏洞等级分布数据
-const vulnerabilitySeverityData = {
-  categories: ['2024Q1', '2024Q2', '2024Q3', '2024Q4', '2025Q1', '2025Q2', '2025Q3', '2025Q4'],
-  series: [
+// 漏洞等级分布数据 - 响应式数据
+const vulnerabilitySeverityData = ref({
+  categories: [] as string[],
+  series: [] as any[]
+});
+
+// 获取后端数据
+const fetchVulnerabilitySeverityData = async () => {
+  try {
+    console.log('开始请求漏洞等级分布数据...');
+    const response = await vulnerabilitySeverityPage1();
+    console.log('API响应:', response);
+    
+    if (response?.code === 200) {
+      console.log('API返回的数据:', response.data);
+      
+      // 处理后端返回的数据格式
+      const processedData = processBackendSeverityData(response.data);
+      vulnerabilitySeverityData.value = processedData;
+      
+      // 更新空数据标识
+      isEmpty.value.vulnerabilitySeverity = !processedData.categories || processedData.categories.length === 0;
+    } else {
+      console.error('获取漏洞等级分布数据失败:', response?.msg || '未知错误');
+      // 设置默认数据
+      setDefaultSeverityData();
+    }
+  } catch (error) {
+    console.error('获取漏洞等级分布数据异常:', error);
+    // 发生异常时设置默认数据
+    setDefaultSeverityData();
+  }
+};
+
+// 处理后端返回的数据格式
+const processBackendSeverityData = (backendData: any[]) => {
+  // 提取季度数据
+  const categories = backendData.map(item => item.quarter);
+  
+  // 生成系列数据
+  const series = [
     {
       name: '高危漏洞',
       type: 'bar',
       stack: 'total',
       itemStyle: { color: '#FF4D4F' },
       barWidth: 16,
-      data: [35, 42, 58, 45, 67, 78, 62, 85, 92]
+      data: backendData.map(item => item.highRisk)
     },
     {
       name: '中危漏洞',
@@ -40,7 +78,7 @@ const vulnerabilitySeverityData = {
       stack: 'total',
       itemStyle: { color: '#FAAD14' },
       barWidth: 16,
-      data: [65, 72, 88, 95, 112, 105, 120, 135, 128]
+      data: backendData.map(item => item.mediumRisk)
     },
     {
       name: '低危漏洞',
@@ -48,9 +86,48 @@ const vulnerabilitySeverityData = {
       stack: 'total',
       itemStyle: { color: '#36CFC9' },
       barWidth: 16,
-      data: [120, 135, 150, 142, 165, 180, 175, 190, 210]
+      data: backendData.map(item => item.lowRisk)
     }
-  ]
+  ];
+  
+  return {
+    categories: categories,
+    series: series
+  };
+};
+
+// 设置默认数据
+const setDefaultSeverityData = () => {
+  vulnerabilitySeverityData.value = {
+    categories: ['2024Q1', '2024Q2', '2024Q3', '2024Q4', '2025Q1', '2025Q2', '2025Q3', '2025Q4'],
+    series: [
+      {
+        name: '高危漏洞',
+        type: 'bar',
+        stack: 'total',
+        itemStyle: { color: '#FF4D4F' },
+        barWidth: 16,
+        data: [35, 42, 58, 45, 67, 78, 62, 85]
+      },
+      {
+        name: '中危漏洞',
+        type: 'bar',
+        stack: 'total',
+        itemStyle: { color: '#FAAD14' },
+        barWidth: 16,
+        data: [65, 72, 88, 95, 112, 105, 120, 135]
+      },
+      {
+        name: '低危漏洞',
+        type: 'bar',
+        stack: 'total',
+        itemStyle: { color: '#36CFC9' },
+        barWidth: 16,
+        data: [120, 135, 150, 142, 165, 180, 175, 190]
+      }
+    ]
+  };
+  isEmpty.value.vulnerabilitySeverity = false;
 };
 
 // 初始化漏洞等级分布图表
@@ -92,13 +169,13 @@ const initVulnerabilitySeverityChart = () => {
       legend: {
         top: 0,
         textStyle: { fontSize: 12 },
-        data: vulnerabilitySeverityData.series.map(item => item.name)
+        data: vulnerabilitySeverityData.value.series.map(item => item.name)
       },
       grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
       xAxis: [
         {
           type: 'category',
-          data: vulnerabilitySeverityData.categories,
+          data: vulnerabilitySeverityData.value.categories,
           axisLabel: { fontSize: 12 }
         }
       ],
@@ -110,7 +187,7 @@ const initVulnerabilitySeverityChart = () => {
           axisLabel: { fontSize: 12 }
         }
       ],
-      series: vulnerabilitySeverityData.series
+      series: vulnerabilitySeverityData.value.series
     });
 
     // 监听窗口大小变化，重新调整图表大小
@@ -122,13 +199,23 @@ const initVulnerabilitySeverityChart = () => {
   }, 0);
 };
 
-// 在组件挂载后初始化图表
-onMounted(() => {
+// 在组件挂载后获取数据并初始化图表
+onMounted(async () => {
+  await fetchVulnerabilitySeverityData();
   nextTick(() => {
     initVulnerabilitySeverityChart();
   });
 });
 
+// 监听数据变化，重新初始化图表
+watch(vulnerabilitySeverityData, () => {
+  if (!isEmpty.value.vulnerabilitySeverity) {
+    nextTick(() => {
+      initVulnerabilitySeverityChart();
+    });
+  }
+}, { deep: true });
+
 // 在组件卸载前清理资源
 onUnmounted(() => {
   if (chartInstances.value.vulnerabilitySeverityChart) {