态势感知中心-全球开源风险态势感知监控中心漏洞语言分布对接接口

src/views/Jyh/security/components/VulnerabilityLanguageChart.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 { languageTrendPage1 } from '@/api/jyh/situation';
 
 // 空数据标识
 const isEmpty = ref({
@@ -22,8 +23,105 @@ const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({
   languageTrendChart: null
 });
 
-// 漏洞语言分布数据
-const languageTrendData = {
+// 漏洞语言分布数据 - 响应式数据
+const languageTrendData = ref({
+  years: [] as string[],
+  series: [] as any[]
+});
+
+// 获取后端数据
+const fetchLanguageTrendData = async () => {
+  try {
+    console.log('开始请求漏洞语言分布数据...');
+    const response = await languageTrendPage1();
+    console.log('API响应:', response);
+    
+    if (response?.code === 0) {
+      console.log('API返回的数据:', response.data);
+      
+      // 处理后端返回的数据格式
+      const processedData = processBackendData(response.data);
+      languageTrendData.value = processedData;
+      
+      // 更新空数据标识
+      isEmpty.value.languageTrend = !processedData.years || processedData.years.length === 0;
+    } else {
+      console.error('获取漏洞语言分布数据失败:', response?.msg || '未知错误');
+      // 设置默认数据
+      setDefaultData();
+    }
+  } catch (error) {
+    console.error('获取漏洞语言分布数据异常:', error);
+    // 发生异常时设置默认数据
+    setDefaultData();
+  }
+};
+
+// 处理后端返回的数据格式
+const processBackendData = (backendData: any[]) => {
+  // 按语言分组
+  const groupedData: { [key: string]: { year: string, value: number }[] } = {};
+  
+  backendData.forEach(item => {
+    if (!groupedData[item.name]) {
+      groupedData[item.name] = [];
+    }
+    groupedData[item.name].push({
+      year: item.year,
+      value: item.data
+    });
+  });
+  
+  // 提取所有年份并排序
+  const allYearsSet = new Set<string>();
+  Object.values(groupedData).forEach(langData => {
+    langData.forEach(d => allYearsSet.add(d.year));
+  });
+  const years = Array.from(allYearsSet).sort();
+  
+  // 生成系列数据
+  const series = Object.entries(groupedData).map(([name, data]) => {
+    // 根据年份顺序填充数据，缺失的设为0
+    const values = years.map(year => {
+      const found = data.find(d => d.year === year);
+      return found ? found.value : 0;
+    });
+    
+    // 这里可以使用预定义的颜色方案，或者动态生成
+    const predefinedColors: { [key: string]: string } = {
+      'JavaScript': '#FAC858',
+      'Python': '#5470C6',
+      'HTML/CSS': '#91CC75',
+      'SQL': '#9254DE',
+      'Java': '#EE6666',
+      'TypeScript': '#73C0DE',
+      'Shell': '#52C41A',
+      'C++': '#FF6E00',
+      'C#': '#722ED1',
+      'Go': '#00DDFF',
+      'PHP': '#F5222D',
+      'Rust': '#FC8452'
+    };
+    
+    const color = predefinedColors[name] || getRandomColor();
+    
+    return {
+      name: name,
+      type: 'established', // 可以根据实际情况调整
+      color: color,
+      data: values
+    };
+  });
+  
+  return {
+    years: years,
+    series: series
+  };
+};
+
+// 设置默认数据
+const setDefaultData = () => {
+  languageTrendData.value = {
     years: ['2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'],
     series: [
       {
@@ -99,6 +197,14 @@ const languageTrendData = {
         data: [2, 2, 5, 7, 6, 9, 10, 10]
       }
     ]
+  };
+  isEmpty.value.languageTrend = false;
+};
+
+// 生成随机颜色的辅助函数
+const getRandomColor = () => {
+  const colors = ['#FAC858', '#5470C6', '#91CC75', '#9254DE', '#EE6666', '#73C0DE', '#52C41A', '#FF6E00', '#722ED1', '#00DDFF', '#F5222D', '#FC8452'];
+  return colors[Math.floor(Math.random() * colors.length)];
 };
 
 // 初始化漏洞语言分布图表（堆叠面积图）
@@ -119,7 +225,7 @@ const initLanguageTrendChart = () => {
     chartInstances.value.languageTrendChart = myChart;
 
     // 准备堆叠面积图数据
-    const series = languageTrendData.series.map(item => ({
+    const series = languageTrendData.value.series.map(item => ({
       name: item.name,
       type: 'line',
       stack: '总量',
@@ -154,14 +260,14 @@ const initLanguageTrendChart = () => {
       legend: {
         top: 0,
         textStyle: { fontSize: 12 },
-        data: languageTrendData.series.map(item => item.name)
+        data: languageTrendData.value.series.map(item => item.name)
       },
       grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
       xAxis: [
         {
           type: 'category',
           boundaryGap: false,
-          data: languageTrendData.years,
+          data: languageTrendData.value.years,
           axisLabel: { fontSize: 12 }
         }
       ],
@@ -185,13 +291,24 @@ const initLanguageTrendChart = () => {
   }, 0);
 };
 
-// 在组件挂载后初始化图表
-onMounted(() => {
+
+// 在组件挂载后获取数据并初始化图表
+onMounted(async () => {
+  await fetchLanguageTrendData();
   nextTick(() => {
     initLanguageTrendChart();
   });
 });
 
+// 监听数据变化，重新初始化图表
+watch(languageTrendData, () => {
+  if (!isEmpty.value.languageTrend) {
+    nextTick(() => {
+      initLanguageTrendChart();
+    });
+  }
+}, { deep: true });
+
 // 在组件卸载前清理资源
 onUnmounted(() => {
   if (chartInstances.value.languageTrendChart) {