Tcode运营平台改造升级-全球开源风险态势感知监控中心世界地图修改
This commit is contained in:
fmk1023
@@ -10,7 +10,6 @@
|
||||
<div class="index-module__NV_5cW__titleSection">
|
||||
<div class="index-module__NV_5cW__titleContainer">
|
||||
<h1 class="index-module__NV_5cW__title">全球开源风险态势感知监控中心</h1>
|
||||
<div class="index-module__NV_5cW__titleBadge">WOS</div>
|
||||
</div>
|
||||
<!-- <div class="index-module__NV_5cW__subtitle">-->
|
||||
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"-->
|
||||
@@ -114,15 +113,15 @@
|
||||
<h3 class="chartCard__title">CVE 月度趋势</h3>
|
||||
<!-- 视图切换按钮，用于切换全球和区域视图 -->
|
||||
<div class="chartCard__actions">
|
||||
<button
|
||||
class="chartCard__actionBtn"
|
||||
<button
|
||||
class="chartCard__actionBtn"
|
||||
:class="{ 'chartCard__actionBtn--active': cveView === 'global' }"
|
||||
@click="switchCveView('global')"
|
||||
>
|
||||
全球
|
||||
</button>
|
||||
<button
|
||||
class="chartCard__actionBtn"
|
||||
<button
|
||||
class="chartCard__actionBtn"
|
||||
:class="{ 'chartCard__actionBtn--active': cveView === 'regional' }"
|
||||
@click="switchCveView('regional')"
|
||||
>
|
||||
@@ -137,110 +136,33 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 编程语言使用趋势堆叠面积图 -->
|
||||
<div class="index-module__NV_5cW__chartCard chartCard__wide">
|
||||
<div class="index-module__NV_5cW__chartCard chartCard__wide mb-[1.5rem]">
|
||||
<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__chartCard">
|
||||
<div class="index-module__NV_5cW__chartCard mb-[1.5rem]">
|
||||
<h3 class="chartCard__title">漏洞等级分布</h3>
|
||||
<div class="chartCard__container">
|
||||
<div class="num-empty" v-if="isEmpty.vulnerabilitySeverity"></div>
|
||||
<div v-else id="vulnerabilitySeverityChart" class="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 气泡图 -->
|
||||
<div class="index-module__NV_5cW__chartCard">
|
||||
<div class="index-module__NV_5cW__chartCard mb-[1.5rem]">
|
||||
<h3 class="chartCard__title">编程语言安全态势</h3>
|
||||
<div class="chartCard__container">
|
||||
<div class="num-empty" v-if="isEmpty.scatterData"></div>
|
||||
<div v-else id="scatterChart" class="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加入武汉开源社区行动区 -->
|
||||
<div class="index-module__NV_5cW__actionSection">
|
||||
<div class="index-module__NV_5cW__actionBackground"></div>
|
||||
<div class="index-module__NV_5cW__actionContent">
|
||||
<div class="index-module__NV_5cW__actionIcon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="lucide lucide-sparkles" aria-hidden="true">
|
||||
<path
|
||||
d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path>
|
||||
<path d="M20 3v4"></path>
|
||||
<path d="M22 5h-4"></path>
|
||||
<path d="M4 17v2"></path>
|
||||
<path d="M5 18H3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="index-module__NV_5cW__actionTitle">加入武汉开源社区</h3>
|
||||
<p class="index-module__NV_5cW__actionDescription">
|
||||
与武汉本地开发者、企业、高校携手共建开源生态，共享开源成果，参与社区活动与项目协作
|
||||
</p>
|
||||
<div class="index-module__NV_5cW__actionFeatures">
|
||||
<div class="index-module__NV_5cW__feature">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="lucide lucide-users" aria-hidden="true">
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
|
||||
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
|
||||
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
|
||||
<circle cx="9" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
<span>本地技术交流</span>
|
||||
</div>
|
||||
<div class="index-module__NV_5cW__feature">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="lucide lucide-building2" aria-hidden="true">
|
||||
<path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path>
|
||||
<path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"></path>
|
||||
<path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"></path>
|
||||
<path d="M10 6h4"></path>
|
||||
<path d="M10 10h4"></path>
|
||||
<path d="M10 14h4"></path>
|
||||
<path d="M10 18h4"></path>
|
||||
</svg>
|
||||
<span>企业项目协作</span>
|
||||
</div>
|
||||
<div class="index-module__NV_5cW__feature">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="lucide lucide-graduation-cap" aria-hidden="true">
|
||||
<path d="M22 10v6M2 10l10-5 10 5-10 5z"></path>
|
||||
<path d="M6 12v5c3 3 9 3 12 0v-5"></path>
|
||||
</svg>
|
||||
<span>高校产学研对接</span>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button"
|
||||
class="ant-btn css-aa1tt5 ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg index-module__NV_5cW__createButton">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="lucide lucide-user-plus" aria-hidden="true">
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="9" cy="7" r="4"></circle>
|
||||
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
|
||||
<path d="M16 3.12a4 4 0 0 1 0 7.76"></path>
|
||||
</svg>
|
||||
<span>加入武汉开源社区</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="lucide lucide-arrow-right" aria-hidden="true">
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="m12 5 7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -447,7 +369,7 @@ const chartData = ref({
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
// 高危组件数据（基于真实开源项目使用情况和漏洞统计）
|
||||
highRiskComponent: [
|
||||
{ name: 'Log4j2', cvss: 9.8, vulnCount: 15, usage: '1200万+', desc: 'CVE-2021-44228等严重RCE漏洞' },
|
||||
@@ -461,7 +383,7 @@ const chartData = ref({
|
||||
{ name: 'Lodash', cvss: 9.0, vulnCount: 5, usage: '2200万+', desc: '原型污染漏洞，影响Node.js生态' },
|
||||
{ name: 'Moment.js', cvss: 9.0, vulnCount: 4, usage: '1100万+', desc: 'ReDoS和原型污染漏洞' }
|
||||
],
|
||||
|
||||
|
||||
// 漏洞占比数据
|
||||
vulnerabilitySeverity: {
|
||||
categories: ['2024Q1', '2024Q2', '2024Q3', '2024Q4', '2025Q1', '2025Q2', '2025Q3', '2025Q4'],
|
||||
@@ -492,7 +414,7 @@ const chartData = ref({
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
// 行业分布数据
|
||||
industryDistribution: [
|
||||
{ value: 25.8, name: '人工智能' },
|
||||
@@ -522,13 +444,13 @@ const chartData = ref({
|
||||
acceleration: [0, -99.58, 1580.62, -47.17, 37.83, -36.89, -5.70, -2.86, -12.34, -43.87, 231.68, -3.42] // 环比增长率（%）
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 气泡图数据
|
||||
// 基于真实数据：[代码活跃度(X), 漏洞密度(Y), 漏洞总数(Size), 语言名称(Name)]
|
||||
// 活跃度基于新增项目数量，漏洞密度基于CWE分布统计
|
||||
scatterData: [
|
||||
[95, 75, 450, 'JavaScript'], // 最高活跃度：9,345,046个项目
|
||||
[90, 70, 380, 'Python'], // 高活跃度：9,261,587个项目
|
||||
[90, 70, 380, 'Python'], // 高活跃度：9,261,587个项目
|
||||
[85, 65, 320, 'TypeScript'], // 高增长：78.1%增长率
|
||||
[75, 80, 420, 'Java'], // 传统强势：3,520,215个项目
|
||||
[45, 60, 280, 'C++'], // 中等活跃：1,701,552个项目
|
||||
@@ -754,7 +676,7 @@ const initCVEChart = () => {
|
||||
name: 'CVE数量',
|
||||
type: 'bar',
|
||||
data: cveCount,
|
||||
itemStyle: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#3b82f6' },
|
||||
{ offset: 1, color: '#60a5fa' }
|
||||
@@ -774,11 +696,11 @@ const initCVEChart = () => {
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: acceleration,
|
||||
itemStyle: {
|
||||
itemStyle: {
|
||||
color: '#ef4444',
|
||||
borderWidth: 2
|
||||
},
|
||||
lineStyle: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#ef4444'
|
||||
},
|
||||
@@ -1391,7 +1313,7 @@ const initCharts = () => {
|
||||
languageTech: chartData.value.languageTech.series.every(s => s.data.every(d => d === 0)),
|
||||
highRiskComponent: chartData.value.highRiskComponent.length === 0,
|
||||
industryDistribution: chartData.value.industryDistribution.length === 0,
|
||||
cveData: chartData.value.cveData.global.cveCount.every(item => item === 0) &&
|
||||
cveData: chartData.value.cveData.global.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)),
|
||||
vulnerabilitySeverity: chartData.value.vulnerabilitySeverity.series.every(s => s.data.every(d => d === 0)),
|
||||
@@ -1601,7 +1523,7 @@ onMounted(() => {
|
||||
|
||||
/* 图表区域样式（适配示例的num-empty） */
|
||||
.index-module__NV_5cW__chartsSection {
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.index-module__NV_5cW__chartsGrid {
|
||||
@@ -2102,4 +2024,4 @@ onMounted(() => {
|
||||
.chartCard__actionBtn--active:hover {
|
||||
background-color: #2563eb;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user