态势感知平台-全球开源风险态势感知监控中心CVE月度趋势接口对接

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

@@ -28,8 +28,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 { cveDataGlobalPage1, cveDataRegionalPage1 } from '@/api/jyh/situation';
 
 // 视图切换状态变量（global: 全球, regional: 区域）
 const cveView = ref('global');
@@ -44,18 +45,82 @@ const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({
   CVEChart: null
 });
 
-// CVE图表数据
+// CVE图表数据 - 响应式数据
-const cveData = {
+const cveData = ref({
-  // 全球CVE：2024年实际数据（基于Excel数据）
   global: {
-    cveCount: [98402, 418, 7025, 3711, 5115, 3228, 3044, 2957, 2592, 1455, 4826, 4661],
+    cveCount: [] as number[],
-    acceleration: [0, -99.58, 1580.62, -47.17, 37.83, -36.89, -5.70, -2.86, -12.34, -43.87, 231.68, -3.42] // 环比增长率（%）
+    acceleration: [] as number[]
   },
-  // 中国区域CVE：2024年数据（约占全球30%）
   regional: {
-    cveCount: [29521, 125, 2108, 1113, 1535, 968, 913, 887, 778, 437, 1448, 1398],
+    cveCount: [] as number[],
-    acceleration: [0, -99.58, 1580.62, -47.17, 37.83, -36.89, -5.70, -2.86, -12.34, -43.87, 231.68, -3.42] // 环比增长率（%）
+    acceleration: [] as number[]
   }
+});
+
+// 获取后端数据
+const fetchCveData = async () => {
+  try {
+    console.log('开始请求全球CVE数据...');
+    // 请求全球数据
+    const globalResponse = await cveDataGlobalPage1();
+    console.log('全球CVE数据响应:', globalResponse);
+    
+    if (globalResponse?.code === 200) {
+      console.log('全球CVE数据:', globalResponse.data);
+      cveData.value.global = {
+        cveCount: globalResponse.data.cveCount,
+        acceleration: globalResponse.data.acceleration
+      };
+    } else {
+      console.error('获取全球CVE数据失败:', globalResponse?.msg || '未知错误');
+      // 设置默认数据
+      setDefaultGlobalData();
+    }
+    
+    console.log('开始请求区域CVE数据...');
+    // 请求区域数据
+    const regionalResponse = await cveDataRegionalPage1();
+    console.log('区域CVE数据响应:', regionalResponse);
+    
+    if (regionalResponse?.code === 200) {
+      console.log('区域CVE数据:', regionalResponse.data);
+      cveData.value.regional = {
+        cveCount: regionalResponse.data.cveCount,
+        acceleration: regionalResponse.data.acceleration
+      };
+    } else {
+      console.error('获取区域CVE数据失败:', regionalResponse?.msg || '未知错误');
+      // 设置默认数据
+      setDefaultRegionalData();
+    }
+    
+    // 检查是否有有效数据
+    const hasGlobalData = cveData.value.global.cveCount.length > 0;
+    const hasRegionalData = cveData.value.regional.cveCount.length > 0;
+    isEmpty.value.cveData = !hasGlobalData && !hasRegionalData;
+  } catch (error) {
+    console.error('获取CVE数据异常:', error);
+    // 发生异常时设置默认数据
+    setDefaultGlobalData();
+    setDefaultRegionalData();
+    isEmpty.value.cveData = false; // 有默认数据，不算空
+  }
+};
+
+// 设置默认全球数据
+const setDefaultGlobalData = () => {
+  cveData.value.global = {
+    cveCount: [98402, 418, 7025, 3711, 5115, 3228, 3044, 2957, 2592, 1455, 4826, 4661],
+    acceleration: [0, -99.58, 1580.62, -47.17, 37.83, -36.89, -5.70, -2.86, -12.34, -43.87, 231.68, -3.42]
+  };
+};
+
+// 设置默认区域数据
+const setDefaultRegionalData = () => {
+  cveData.value.regional = {
+    cveCount: [29521, 125, 2108, 1113, 1535, 968, 913, 887, 778, 437, 1448, 1398],
+    acceleration: [0, -99.58, 1580.62, -47.17, 37.83, -36.89, -5.70, -2.86, -12.34, -43.87, 231.68, -3.42]
+  };
 };
 
 // CVE视图切换方法
@@ -84,7 +149,7 @@ const initCVEChart = () => {
     chartInstances.value.CVEChart = myChart;
 
     // 获取当前视图的数据
-    const currentData = cveData[cveView.value === 'global' ? 'global' : 'regional'];
+    const currentData = cveData.value[cveView.value === 'global' ? 'global' : 'regional'];
     const cveCount = currentData.cveCount;
     const acceleration = currentData.acceleration;
 
@@ -209,13 +274,23 @@ const initCVEChart = () => {
   }, 0);
 };
 
-// 在组件挂载后初始化图表
+// 在组件挂载后获取数据并初始化图表
-onMounted(() => {
+onMounted(async () => {
+  await fetchCveData();
   nextTick(() => {
     initCVEChart();
   });
 });
 
+// 监听数据变化，重新初始化图表
+watch(cveData, () => {
+  if (!isEmpty.value.cveData) {
+    nextTick(() => {
+      initCVEChart();
+    });
+  }
+}, { deep: true });
+
 // 在组件卸载前清理资源
 onUnmounted(() => {
   if (chartInstances.value.CVEChart) {