cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tcode平台改造升级-漏洞语言分布

Browse Source
This commit is contained in:
HeZhaohui
2025-12-18 11:06:07 +08:00
parent be36557c0c
commit 678dd3842a
1 changed files with 163 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
src/views/Jyh/security/index.vue
View File

@@ -66,26 +66,6 @@
<!-- 图表网格布局：新增多个模块 -->
<div class="index-module__NV_5cW__chartsGrid">
<!-- 1. 武汉优秀开源项目（列表展示） -->
<!-- <div class="index-module__NV_5cW__chartCard list-card"> -->
<!-- <h3 class="chartCard__title">武汉优秀开源项目</h3> -->
<!-- 新增：ref + 鼠标事件 -->
<!-- <div class="chartCard__container list-container"
ref="scrollContainer1"
@mouseenter="pauseScroll(1)"
@mouseleave="resumeScroll(1)">
<div class="project-list">
<div class="project-item" v-for="(item, index) in excellentProjects" :key="index">
<span class="project-rank">{{ index + 1 }}</span>
<div class="project-info">
<span class="project-name">{{ item.name }}</span>
<span class="project-desc">{{ item.desc }}</span>
</div>
<span class="project-org">{{ item.org }}</span>
</div>
</div>
</div>
</div> -->
<div class="index-module__NV_5cW__chartCard list-card">
<h3 class="chartCard__title">情报流</h3>
@@ -105,14 +85,6 @@
</div>
</div>
<!-- 2. 高校开源参与分布（饼图）-->
<!-- <div class="index-module__NV_5cW__chartCard">
<h3 class="chartCard__title">高校开源参与分布</h3>
<div class="chartCard__container">
<div class="num-empty" v-if="isEmpty.university"></div>
<div v-else id="universityChart" class="chart"></div>
</div>
</div> -->
<div class="index-module__NV_5cW__chartCard">
<h3 class="chartCard__title">行业分布</h3>
@@ -122,15 +94,6 @@
</div>
</div>
<!-- 3. 开源社区区域分布（柱状图）-->
<div class="index-module__NV_5cW__chartCard">
<h3 class="chartCard__title">开源社区区域分布</h3>
<div class="chartCard__container">
<div class="num-empty" v-if="isEmpty.community"></div>
<div v-else id="communityChart" class="chart"></div>
</div>
</div>
<div class="index-module__NV_5cW__chartCard">
<h3 class="chartCard__title">高危组件 Top 10</h3>
<div class="chartCard__container">
@@ -139,54 +102,6 @@
</div>
</div>
<!-- 4. OSS Compass开源项目排行（横向柱状图）-->
<div class="index-module__NV_5cW__chartCard">
<h3 class="chartCard__title">OSS Compass 开源项目排行</h3>
<div class="chartCard__container">
<div class="num-empty" v-if="isEmpty.ossCompass"></div>
<div v-else id="ossCompassChart" class="chart"></div>
</div>
</div>
<!-- 5. 武汉开源开发者排行榜（横向柱状图）-->
<div class="index-module__NV_5cW__chartCard">
<h3 class="chartCard__title">武汉开源开发者排行榜</h3>
<div class="chartCard__container">
<div class="num-empty" v-if="isEmpty.developer"></div>
<div v-else id="developerChart" class="chart"></div>
</div>
</div>
<!-- 6. 2025武汉市优秀开源软件项目（列表）-->
<div class="index-module__NV_5cW__chartCard list-card">
<h3 class="chartCard__title">2025武汉市优秀开源软件项目</h3>
<!-- 新增：ref + 鼠标事件 -->
<div class="chartCard__container list-container"
ref="scrollContainer2"
@mouseenter="pauseScroll(2)"
@mouseleave="resumeScroll(2)">
<div class="project-list">
<div class="project-item" v-for="(item, index) in excellentProjects2025" :key="index">
<span class="project-rank">{{ index + 1 }}</span>
<div class="project-info">
<span class="project-name">{{ item.name }}</span>
<span class="project-desc">{{ item.desc }}</span>
</div>
<span class="project-org">{{ item.org }}</span>
</div>
</div>
</div>
</div>
<!-- 7. 武汉市语言与技术竞争趋势（折线图，近五年）
<div class="index-module__NV_5cW__chartCard chartCard__wide">
<h3 class="chartCard__title">武汉市语言与技术竞争趋势（2021-2025）</h3>
<div class="chartCard__container">
<div class="num-empty" v-if="isEmpty.languageTech"></div>
<div v-else id="languageTechChart" class="chart"></div>
</div>
</div> -->
<div class="index-module__NV_5cW__chartCard chartCard__wide">
<div class="chartCard__header">
<h3 class="chartCard__title">CVE 月度趋势</h3>
@@ -215,6 +130,15 @@
</div>
</div>
</div>
<!-- 编程语言使用趋势堆叠面积图 -->
<div class="index-module__NV_5cW__chartCard chartCard__wide">
<h3 class="chartCard__title">漏洞语言分布</h3>
<div class="chartCard__container">
<div class="num-empty" v-if="isEmpty.languageTrend"></div>
<div v-else id="languageTrendChart" class="chart"></div>
</div>
</div>
<!-- 加入武汉开源社区行动区 -->
<div class="index-module__NV_5cW__actionSection">
@@ -419,6 +343,85 @@ const chartData = ref({
{ name: 'Go', data: [60, 65, 70, 72, 75] }
]
},
// 编程语言使用趋势数据
languageTrend: {
years: ['2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'],
series: [
{
name: 'JavaScript',
type: 'established',
color: '#FAC858',
data: [65, 64, 69, 70, 69, 65, 61, 61]
},
{
name: 'Python',
type: 'established',
color: '#5470C6',
data: [32, 41, 49, 55, 52, 53, 54, 60]
},
{
name: 'HTML/CSS',
type: 'established',
color: '#91CC75',
data: [60, 55, 61, 61, 60, 54, 52, 52]
},
{
name: 'SQL',
type: 'established',
color: '#9254DE',
data: [42, 47, 56, 56, 54, 49, 52, 50]
},
{
name: 'Java',
type: 'established',
color: '#EE6666',
data: [47, 51, 50, 54, 49, 48, 49, 49]
},
{
name: 'TypeScript',
type: 'emerging',
color: '#73C0DE',
data: [12, 17, 25, 28, 29, 34, 34, 50]
},
{
name: 'Shell',
type: 'established',
color: '#52C41A',
data: [29, 29, 40, 39, 37, 34, 34, 41]
},
{
name: 'C++',
type: 'established',
color: '#FF6E00',
data: [17, 18, 20, 27, 23, 25, 25, 21]
},
{
name: 'C#',
type: 'established',
color: '#722ED1',
data: [20, 22, 24, 22, 21, 23, 21, 19]
},
{
name: 'Go',
type: 'emerging',
color: '#00DDFF',
data: [8, 12, 18, 19, 17, 19, 17, 14]
},
{
name: 'PHP',
type: 'declining',
color: '#F5222D',
data: [30, 26, 29, 27, 32, 20, 18, 15]
},
{
name: 'Rust',
type: 'emerging',
color: '#FC8452',
data: [2, 2, 5, 7, 6, 9, 10, 10]
}
]
},
// 高危组件数据（基于真实开源项目使用情况和漏洞统计）
highRiskComponent: [
{ name: 'Log4j2', cvss: 9.8, vulnCount: 15, usage: '1200万+', desc: 'CVE-2021-44228等严重RCE漏洞' },
@@ -1029,6 +1032,77 @@ const initHighRiskComponentChart = () => {
});
};
// 初始化编程语言使用趋势堆叠面积图
const initLanguageTrendChart = () => {
const el = document.getElementById('languageTrendChart');
if (!el) return;
if (chartInstances.value.languageTrendChart) {
chartInstances.value.languageTrendChart.dispose();
}
const myChart = echarts.init(el);
chartInstances.value.languageTrendChart = myChart;
// 准备堆叠面积图数据
const series = chartData.value.languageTrend.series.map(item => ({
name: item.name,
type: 'line',
stack: '总量',
areaStyle: {
color: item.color
},
lineStyle: {
width: 1,
color: item.color
},
symbol: 'none',
data: item.data
}));
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
formatter: (params: any) => {
let res = `<div>${params[0].name}年</div>`;
params.forEach((p: any) => {
res += `<div style="display:flex;align-items:center;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${p.color};"></span>${p.seriesName}: ${p.value}%</div>`;
});
return res;
}
},
legend: {
top: 0,
textStyle: { fontSize: 12 },
data: chartData.value.languageTrend.series.map(item => item.name)
},
grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
xAxis: [
{
type: 'category',
boundaryGap: false,
data: chartData.value.languageTrend.years,
axisLabel: { fontSize: 12 }
}
],
yAxis: [
{
type: 'value',
name: '使用率(%)',
nameTextStyle: { fontSize: 12 },
axisLabel: { fontSize: 12 }
}
],
series: series
});
};
// 初始化武汉市语言与技术竞争趋势（折线图）
const initLanguageTechChart = () => {
const el = document.getElementById('languageTechChart');
@@ -1102,7 +1176,8 @@ const initCharts = () => {
highRiskComponent: chartData.value.highRiskComponent.length === 0,
industryDistribution: chartData.value.industryDistribution.length === 0,
cveData: chartData.value.cveData.global.cveCount.every(item => item === 0) &&
chartData.value.cveData.regional.cveCount.every(item => item === 0)
chartData.value.cveData.regional.cveCount.every(item => item === 0),
languageTrend: chartData.value.languageTrend.series.every(s => s.data.every(d => d === 0))
};
// 初始化各图表
@@ -1114,6 +1189,7 @@ const initCharts = () => {
if (!isEmpty.value.highRiskComponent) nextTick(() => initHighRiskComponentChart());
if (!isEmpty.value.industryDistribution) nextTick(() => initIndustryDistributionChart());
if (!isEmpty.value.cveData) nextTick(() => initCVEChart());
if (!isEmpty.value.languageTrend) nextTick(() => initLanguageTrendChart());
};
// 页面resize时重绘图表
@@ -1346,7 +1422,7 @@ onMounted(() => {
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 1rem 0;
text-align: center;
text-align: left;
}
.chartCard__container {