Situation-Awareness-Platform-Frontend/src/views/Jyh/security/components/HighRiskComponentRank.vue

<template>
  <div class="index-module__NV_5cW__chartCard">
    <h3 class="chartCard__title">高危组件 Top 10</h3>
    <div class="chartCard__container">
      <div class="num-empty" v-if="isEmpty"></div>
      <div v-else ref="chartRef" class="chart"></div>
    </div>
  </div>
</template>

<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<ComponentData>;
  loading?: boolean;
}>();

// 定义 emits 事件
const emit = defineEmits<{
  (e: 'chart-ready', chart: echarts.ECharts): void;
}>();

// 空数据标识
const isEmpty = ref(false);

// 图表DOM引用
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.data.code === 200) {
      componentData.value = response.data.data;
    } else {
      console.error('获取高危组件数据失败:', response.data.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;
  
  // 销毁之前的实例
  if (chartInstance) {
    chartInstance.dispose();
  }
  
  chartInstance = echarts.init(chartRef.value);
  
  // 如果有传入的数据，则优先使用传入的数据，否则使用获取到的数据
  const chartData = props.data || componentData.value;

  // 检查是否有有效数据
  isEmpty.value = !chartData || chartData.length === 0;

  if (isEmpty.value) {
    return;
  }

  // 准备图表数据
  const componentNames = chartData.map(item => item.name);
  const cvssScores = chartData.map(item => item.cvss);
  const vulnCounts = chartData.map(item => item.vulnCount);
  const usages = chartData.map(item => item.usage);
  const descs = chartData.map(item => item.desc);

  // 配置图表选项，与原页面保持一致
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      formatter: (params: any) => {
        const data = chartData[params[0].dataIndex];
        return `
          <div style="padding: 4px;">
            <div style="font-weight: bold; font-size: 14px;">${data.name}</div>
            <div>CVSS评分: ${data.cvss}</div>
            <div>漏洞数量: ${data.vulnCount}个</div>
            <div>使用量: ${data.usage}</div>
            <div>漏洞描述: ${data.desc}</div>
          </div>
        `;
      }
    },
    grid: { left: '15%', right: '4%', bottom: '3%', top: '3%', containLabel: true },
    xAxis: {
      type: 'value',
      name: 'CVSS评分',
      nameTextStyle: { fontSize: 12 },
      axisLabel: { fontSize: 12 },
      max: 10
    },
    yAxis: {
      type: 'category',
      data: componentNames,
      axisLabel: { fontSize: 12 },
      inverse: true // 反转Y轴，让最高的值在顶部
    },
    series: [
      {
        name: 'CVSS评分',
        type: 'bar',
        data: cvssScores,
        itemStyle: {
          color: (params: any) => {
            const value = params.value;
            if (value >= 9.0) return '#ef4444'; // 红色 - 严重
            if (value >= 7.0) return '#f97316'; // 橙色 - 高危
            if (value >= 4.0) return '#eab308'; // 黄色 - 中危
            return '#22c55e'; // 绿色 - 低危
          }
        },
        label: {
          show: true,
          position: 'right',
          formatter: '{c}',
          fontSize: 12
        }
      }
    ]
  };

  chartInstance.setOption(option);
  
  // 触发图表准备就绪事件
  emit('chart-ready', chartInstance);
};

// 组件挂载时初始化图表
onMounted(async () => {
  await fetchComponentData(); // 获取高危组件数据
  await nextTick();
  initChart();
});

// 监听数据变化，重新渲染图表
watch(() => props.data, () => {
  initChart();
}, { deep: true });

// 监听组件内部数据变化，重新渲染图表
watch(componentData, () => {
  initChart();
}, { deep: true });

// 组件卸载时清理图表实例
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
});

// 页面大小变化时调整图表大小
const resizeHandler = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};

// 监听窗口大小变化
window.addEventListener('resize', resizeHandler);

// 在组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('resize', resizeHandler);
});
</script>

<style scoped>
.index-module__NV_5cW__chartCard {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #ffffffe6;
  border: 1px solid #ffffff4d;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 16px #00000014;
  transition: all 0.3s;
}

.index-module__NV_5cW__chartCard:hover {
  border-color: #3b82f64d;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px #0000001f;
}

.chartCard__title {
  color: #333;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  text-align: left;
}

.chartCard__container {
  width: 100%;
  height: 300px; /* 图表高度 */
  position: relative;
}

.chart {
  width: 100%;
  height: 100%;
}

.num-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}
</style>