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

态势感知平台-武汉市开源建设生态页面增加鸿蒙生态数据可视化模块展示

Browse Source
This commit is contained in:
fmk1023
2026-01-21 16:40:23 +08:00
parent 188bcbfc3e
commit c9da77844b
3 changed files with 1381 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1288
src/views/Jyh/Community/components/HarmonyEcoCharts.vue Normal file
View File

File diff suppressed because it is too large Load Diff

5
src/views/Jyh/Community/StatsBar.vue → src/views/Jyh/Community/components/StatsBar.vue
View File

@@ -1,5 +1,10 @@
<template>
<div class="stats-glass-bar">
<div class="stat-node">
<span class="stat-value">1000W+</span>
<span class="stat-desc">鸿蒙开发者</span>
</div>
<div class="stat-separator"></div>
<div class="stat-node">
<span class="stat-value">150+</span>
<span class="stat-desc">开源企业</span>

531
src/views/Jyh/Community/index.vue
View File

@@ -19,6 +19,9 @@
</div>
<div class="index-module__NV_5cW__content">
<HarmonyEcoCharts />
<div class="index-module__NV_5cW__chartsSection">
<div class="index-module__NV_5cW__sectionHeader">
<h2 class="index-module__NV_5cW__sectionTitle">
@@ -143,17 +146,13 @@
@mouseleave="resumeDeveloperScroll">
<div class="developer-list">
<div class="developer-item" v-for="(name, index) in developerNames" :key="index">
<!-- <div class="dev-rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>-->
<div class="dev-avatar" :style="{ background: getAvatarBg(index) }">
{{ name.charAt(0) }}
</div>
<div class="dev-info">
<div class="dev-name">{{ name }}</div>
<div class="dev-tag">核心贡献者</div>
</div>
<div class="dev-medal">
<svg v-if="index < 3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
fill="#f59e0b" stroke="none">
@@ -184,7 +183,6 @@
<div class="chartCard__container">
<div v-if="activeCommunityTab === 0" id="communityRankChart" class="chart"></div>
<div v-else class="list-container"
ref="communityScrollRef"
@mouseenter="pauseCommunityScroll"
@@ -209,7 +207,6 @@
</div>
</div>
</div>
<div class="source-footer">
<span class="source-label">数据来源：</span>
<div class="source-content">
@@ -282,105 +279,6 @@
</div>
</div>
<div class="index-module__NV_5cW__chartsSection" style="margin-top: 20px">
<div class="index-module__NV_5cW__sectionHeader">
<h2 class="index-module__NV_5cW__sectionTitle">
<span class="hm-tag-icon">HarmonyOS</span> 鸿蒙生态数据可视化
</h2>
</div>
<div class="index-module__NV_5cW__chartsGrid">
<div class="index-module__NV_5cW__chartCard list-card">
<h3 class="chartCard__title">鸿蒙优质开源项目榜</h3>
<div class="chartCard__container list-container"
ref="scrollContainer3"
@mouseenter="pauseScroll(3)"
@mouseleave="resumeScroll(3)">
<div class="project-list">
<div class="project-item" v-for="(item, index) in hmProjects" :key="index">
<div class="project-rank-wrapper">
<span class="project-rank">{{ index + 1 }}</span>
</div>
<div class="project-info">
<span class="project-name">{{ item.name }}</span>
<span class="project-desc">{{ item.desc }}</span>
</div>
<div class="project-meta">
<span class="project-stars">★ {{ item.stars }}</span>
</div>
</div>
</div>
</div>
<div class="source-footer">
<span class="source-label">数据来源：</span>
<div class="source-content">
<svg class="source-icon" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.128 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
fill="#333" />
</svg>
<span class="source-name">GitHub</span>
</div>
</div>
</div>
<div class="index-module__NV_5cW__chartCard list-card">
<h3 class="chartCard__title">鸿蒙明星开发者贡献榜</h3>
<div class="chartCard__container list-container"
ref="scrollContainer4"
@mouseenter="pauseScroll(4)"
@mouseleave="resumeScroll(4)">
<div class="developer-list">
<div class="developer-item" v-for="(item, index) in hmDevelopers" :key="index">
<!-- <div class="dev-rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>-->
<div class="dev-avatar" :style="{ background: getAvatarBg(index) }">
{{ item.name.charAt(0) }}
</div>
<div class="dev-info">
<div class="dev-name">{{ item.name }}</div>
<div class="dev-tag">核心贡献者</div>
</div>
<div class="dev-medal">
<svg v-if="index < 3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
fill="#f59e0b" stroke="none">
<path
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
</svg>
<span v-else class="dev-score">活跃</span>
</div>
</div>
</div>
</div>
<div class="source-footer">
<span class="source-label">数据来源：</span>
<div class="source-content">
<img src="@/assets/imgs/logo/penguin_blue.svg" class="source-logo-circle" />
<span class="source-name">华科开放原子俱乐部</span>
</div>
</div>
</div>
<div class="index-module__NV_5cW__chartCard">
<h3 class="chartCard__title">鸿蒙开源企业贡献榜</h3>
<div class="chartCard__container">
<div v-if="!hmEnterprises.length" class="num-empty"></div>
<div v-else id="hmEnterpriseChart" class="chart" style="height: 300px;"></div>
</div>
<div class="source-footer">
<span class="source-label">数据来源：</span>
<div class="source-content">
<img src="@/assets/imgs/logo/logo-kfyzjjh.png" class="source-logo-circle" />
<span class="source-name">开放原子开源基金会</span>
</div>
</div>
</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">
@@ -409,11 +307,11 @@
import { onMounted, ref, nextTick, watch, onUnmounted, computed } from 'vue';
import * as echarts from 'echarts';
import { usePageResize } from '@/utils/hooks/usePageResize';
import StatsBar from './StatsBar.vue';
import StatsBar from './components/StatsBar.vue';
import HarmonyEcoCharts from './components/HarmonyEcoCharts.vue';
const { widthType } = usePageResize();
// ================= 数据定义 =================
const githubProjects = ref([
{
name: 'bootstrap',
@@ -481,6 +379,7 @@ const excellentProjects = ref([
{ 'name': 'RustSBI', 'desc': 'RISC-V 安全引导程序', 'org': '华中科技大学' },
{ 'name': 'NextDenovo', 'desc': '长读长序列组装工具', 'org': '武汉希望组' }
]);
const chinaExcellentProjects = ref([
{
'name': 'Deepin 深度操作系统',
@@ -534,11 +433,14 @@ const chinaExcellentProjects = ref([
}
]);
// 武汉知名社区数据
const wuhanCommunities = ref([
{ name: '黄鹤开源社区', type: '核心生态', slogan: '国家级、城市级开源社区平台，武汉开源生态的核心枢纽' },
{ name: '深度社区 (Deepin)', type: '操作系统', slogan: '全球最大桌面操作系统社区之一，全球用户超过 750 万' },
{ name: '极狐社区 (GitLab China)', type: 'DevOps', slogan: '全球第二大开源托管平台 GitLab 在汉设立的中国发行版及开发者社区' },
{
name: '极狐社区 (GitLab China)',
type: 'DevOps',
slogan: '全球第二大开源托管平台 GitLab 在汉设立的中国发行版及开发者社区'
},
{ name: '开源鸿蒙社区 (OpenHarmony)', type: '万物互联', slogan: '国家级生态创新中心，设有全国首个分委会' },
{ name: 'PostgreSQL 中文社区', type: '数据库', slogan: '全球四大开源数据库之一的运营中心设在武汉' },
{ name: '武汉大学开源社区', type: '学术社团', slogan: '老牌社团，涉及 Linux、嵌入式、深度学习等方向' },
@@ -550,6 +452,50 @@ const wuhanCommunities = ref([
{ name: '湖北大学', type: '兴趣小组', slogan: '开源技术兴趣小组' }
]);
// 开发者名单
const developerNames = ['白纯骢', '陆红旭', '慕冬亮', '张继德', '蒋周奇', '张天雄', '阮文俊', '李奇', '陈鹏轩', '杨帆'];
// 图表数据
const chartData = ref({
cityProject: {
xAxis: ['北京', '上海', '深圳', '杭州', '广州', '成都', '武汉', '南京', '西安', '重庆'],
data: [757259, 678614, 343417, 315406, 177003, 168300, 120827, 111593, 58678, 56564]
},
talent: {
xAxis: ['北京', '上海', '广州', '深圳', '成都', '杭州', '武汉', '南京', '郑州', '长沙'],
data: [2115924, 1591988, 1555240, 1163580, 894108, 830306, 791335, 733581, 553397, 487971]
},
communityRank: {
xAxis: ['Deepin', 'OpenHarmony', 'MindSpore', 'IoTDB', 'GoFrame'],
data: [95, 92, 88, 76, 72]
},
club: {
xAxis: ['成都', '北京', '上海', '武汉', '重庆', '深圳', '苏州', '杭州', '合肥', '青岛'],
data: [10, 7, 5, 4, 3, 2, 2, 2, 2, 2]
},
policy: {
xAxis: ['江苏', '北京', '浙江', '广东', '上海', '湖北', '天津', '陕西', '河南', '云南'],
data: [11, 7, 3, 3, 3, 2, 2, 2, 2, 2]
},
campus: {
xAxis: ['南京', '武汉', '北京', '长沙', '成都', '上海', '天津', '深圳', '济南', '广州'],
data: [20, 16, 16, 16, 11, 10, 8, 8, 7, 6]
},
mirrors: {
xAxis: ['上海', '北京', '西安', '重庆', '济南', '南京', '武汉', '合肥', '香港', '长春', '成都', '深圳', '兰州', '哈尔滨', '南阳', '杭州'],
data: [4, 4, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
}
});
// ================= 逻辑处理 =================
const isEmpty = ref({
cityProject: false, talent: false, developer: false, communityRank: false,
club: false, policy: false, campus: false, mirrors: false
});
const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({});
// 社区 Tab 切换
const activeCommunityTab = ref(0);
const communityScrollRef = ref<HTMLElement | null>(null);
let communityTimer: NodeJS.Timeout | null = null;
@@ -570,7 +516,6 @@ const startCommunityScroll = () => {
if (!container) return;
const list = container.querySelector('.community-scroll-list') as HTMLElement;
if (!list || list.scrollHeight <= container.clientHeight) return;
if (communityTimer) clearInterval(communityTimer);
communityTimer = setInterval(() => {
container.scrollTop += 1;
@@ -582,16 +527,13 @@ const startCommunityScroll = () => {
const pauseCommunityScroll = () => communityTimer && clearInterval(communityTimer);
const resumeCommunityScroll = () => activeCommunityTab.value === 1 && startCommunityScroll();
// 项目 Tab 切换
const currentProjectList = computed(() => {
return activeTab.value === 0 ? chinaExcellentProjects.value : excellentProjects.value;
});
const switchTab = (index: number) => {
if (activeTab.value === 1) {
activeTab.value = 0;
} else {
activeTab.value = 1;
}
const switchTab = () => {
activeTab.value = activeTab.value === 1 ? 0 : 1;
nextTick(() => {
if (scrollContainer2.value) scrollContainer2.value.scrollTop = 0;
pauseScroll(2);
@@ -599,82 +541,21 @@ const switchTab = (index: number) => {
});
};
const chartData = ref({
cityProject: {
xAxis: ['北京', '上海', '深圳', '杭州', '广州', '成都', '武汉', '南京', '西安', '重庆'],
data: [757259, 678614, 343417, 315406, 177003, 168300, 120827, 111593, 58678, 56564]
},
talent: {
xAxis: ['北京', '上海', '广州', '深圳', '成都', '杭州', '武汉', '南京', '郑州', '长沙'],
data: [2115924, 1591988, 1555240, 1163580, 894108, 830306, 791335, 733581, 553397, 487971]
},
communityRank: {
xAxis: ['Deepin', 'OpenHarmony', 'MindSpore', 'IoTDB', 'GoFrame'],
data: [95, 92, 88, 76, 72]
},
club: {
xAxis: ['成都', '北京', '上海', '武汉','重庆', '深圳', '苏州', '杭州', '合肥', '青岛' ],
data: [10, 7, 5, 4, 3, 2, 2, 2, 2, 2]
},
policy: {
xAxis: [
'江苏', '北京', '浙江', '广东', '上海', '湖北', '天津',
'陕西', '河南', '云南'
// '黑龙江','安徽省', '重庆市', '宁夏回族自治区', '山东省', '湖南省'
],
data: [11, 7, 3, 3, 3, 2, 2, 2, 2, 2
// 2, 2, 1, 1, 1, 1
]
},
campus: {
xAxis: [
'南京', '武汉', '北京', '长沙', '成都', '上海', '天津', '深圳',
'济南', '广州'
// '呼和浩特', '长春', '吉林', '沈阳', '苏州', '青岛',
// '惠州', '合肥', '佛山', '南昌', '南充', '徐州', '西安', '郑州',
// '贵阳', '线上', '哈尔滨', '宜宾', '杭州', '太原', '大连', '银川',
// '西宁', '中山', '乐山', '内江', '泸州', '常德', '昌吉', '桂林',
// '福州', '常州', '库尔勒', '兰州', '温州', '鄂州', '乌鲁木齐', '日照',
// '无锡', '重庆', '东莞', '赣州'
],
data: [
20, 16, 16, 16, 11, 10, 8, 8, 7, 6
// 5, 4, 3, 3, 3, 3,
// 3, 3, 3, 3, 3, 2, 2, 2,
// 2, 2, 2, 2, 2, 2, 2, 1,
// 1, 1, 1, 1, 1, 1, 1, 1,
// 1, 1, 1, 1, 1, 1, 1, 1,
// 1, 1, 1, 1
]
},
mirrors: {
xAxis: [
'上海', '北京', '西安', '重庆', '济南', '南京', '武汉', '合肥', '香港',
'长春', '成都', '深圳', '兰州', '哈尔滨', '南阳', '杭州'
],
data: [4, 4, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
}
});
// 数据定义
const developerNames = ['白纯骢', '陆红旭', '慕冬亮', '张继德', '蒋周奇', '张天雄', '阮文俊', '李奇', '陈鹏轩', '杨帆'];
const developerScrollRef = ref<HTMLElement | null>(null);
let developerTimer: NodeJS.Timeout | null = null;
// 自动生成头像背景色
// 头像背景色
const getAvatarBg = (index: number) => {
const colors = ['#6366f1', '#8b5cf6', '#ec4899', '#f43f5e', '#f59e0b', '#10b981', '#06b6d4', '#3b82f6'];
return colors[index % colors.length];
};
// 滚动逻辑
// 开发者列表滚动
const developerScrollRef = ref<HTMLElement | null>(null);
let developerTimer: NodeJS.Timeout | null = null;
const startDeveloperScroll = () => {
const container = developerScrollRef.value;
if (!container) return;
const list = container.querySelector('.developer-list') as HTMLElement;
if (!list || list.scrollHeight <= container.clientHeight) return;
if (developerTimer) clearInterval(developerTimer);
developerTimer = setInterval(() => {
container.scrollTop += 1;
@@ -687,16 +568,9 @@ const startDeveloperScroll = () => {
const pauseDeveloperScroll = () => developerTimer && clearInterval(developerTimer);
const resumeDeveloperScroll = () => startDeveloperScroll();
const isEmpty = ref({
cityProject: false, talent: false, developer: false, communityRank: false,
club: false, policy: false, campus: false, mirrors: false
});
const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({});
// 自动滚动 (通用项目列表)
const scrollContainer1 = ref<HTMLDivElement | null>(null);
const scrollContainer2 = ref<HTMLDivElement | null>(null);
const scrollContainer3 = ref<HTMLDivElement | null>(null);
const scrollContainer4 = ref<HTMLDivElement | null>(null);
const scrollTimers: { [key: number]: NodeJS.Timeout | null } = { 1: null, 2: null };
const autoScroll = (key: number) => {
@@ -721,10 +595,8 @@ const pauseScroll = (key: number) => {
};
const resumeScroll = (key: number) => autoScroll(key);
// ================= 图表初始化=================
// ================= 图表初始化 =================
const commonGrid = { left: '3%', right: '4%', bottom: '15px', top: '15%', containLabel: true };
const colorPalette = ['#3b82f6', '#06b6d4', '#8b5cf6', '#ec4899', '#f59e0b']; // 蓝, 青, 紫, 粉, 橙
const initCityProjectChart = () => {
const el = document.getElementById('cityProjectChart');
@@ -761,36 +633,7 @@ const initTalentChart = () => {
yAxis: { type: 'value', name: '单位：人', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
series: [{
type: 'bar', data: chartData.value.talent.data, barWidth: '50%',
itemStyle: { borderRadius: [4, 4, 0, 0], color: '#F97316' } // 橙色
}]
});
};
const initDeveloperChart = () => {
const el = document.getElementById('developerChart');
if (!el) return;
const myChart = echarts.init(el);
chartInstances.value.developer = myChart;
myChart.setOption({
tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 贡献分' },
grid: { left: '3%', right: '5%', bottom: '15px', top: '5%', containLabel: true },
xAxis: { type: 'value', show: false }, // 隐藏x轴
yAxis: {
type: 'category',
data: chartData.value.developer.yAxis.reverse(),
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { color: '#333', fontWeight: 500 }
},
series: [{
type: 'bar', data: chartData.value.developer.data.reverse(), barWidth: 16,
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#7C3AED' }, {
offset: 1,
color: '#C4B5FD'
}]), borderRadius: [0, 8, 8, 0]
},
label: { show: false } // **修改点：隐藏具体分数**
itemStyle: { borderRadius: [4, 4, 0, 0], color: '#F97316' }
}]
});
};
@@ -809,9 +652,7 @@ const initCommunityRankChart = () => {
},
yAxis: { type: 'value', name: '单位：个', nameTextStyle: { color: '#999' } },
series: [{
type: 'bar',
data: [69, 35, 31, 25, 18, 15, 12, 12],
barWidth: '40%',
type: 'bar', data: [69, 35, 31, 25, 18, 15, 12, 12], barWidth: '40%',
itemStyle: { borderRadius: [4, 4, 0, 0], color: '#3b82f6' }
}]
});
@@ -828,8 +669,7 @@ const initClubChart = () => {
xAxis: { type: 'category', data: chartData.value.club.xAxis, axisLabel: { color: '#666' } },
yAxis: { type: 'value', name: '单位：个', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
series: [{
type: 'line', data: chartData.value.club.data,
smooth: true, symbolSize: 8,
type: 'line', data: chartData.value.club.data, smooth: true, symbolSize: 8,
lineStyle: { width: 3, color: '#F59E0B' },
itemStyle: { color: '#F59E0B', borderColor: '#fff', borderWidth: 2 },
areaStyle: { opacity: 0.15, color: '#F59E0B' }
@@ -849,7 +689,7 @@ const initPolicyChart = () => {
yAxis: { type: 'value', name: '单位：条', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
series: [{
type: 'bar', data: chartData.value.policy.data, barWidth: '45%',
itemStyle: { borderRadius: [4, 4, 0, 0], color: '#2563EB' } // 蓝色
itemStyle: { borderRadius: [4, 4, 0, 0], color: '#2563EB' }
}]
});
};
@@ -859,23 +699,19 @@ const initCampusChart = () => {
if (!el) return;
const myChart = echarts.init(el);
chartInstances.value.campus = myChart;
// **修改点：去掉三角形pictorialBar，改为美观的圆角柱状图**
myChart.setOption({
tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 场' },
grid: commonGrid,
xAxis: { type: 'category', data: chartData.value.campus.xAxis, axisLabel: { color: '#666' } },
yAxis: { type: 'value', name: '单位：场次', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
series: [{
type: 'bar',
data: chartData.value.campus.data,
barWidth: '35%',
type: 'bar', data: chartData.value.campus.data, barWidth: '35%',
itemStyle: {
borderRadius: [8, 8, 0, 0], // 圆角
// 活力洋红色渐变
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#EC4899' },
{ offset: 1, color: '#F472B6' }
])
borderRadius: [8, 8, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#EC4899' }, {
offset: 1,
color: '#F472B6'
}])
}
}]
});
@@ -892,38 +728,22 @@ const initMirrorChart = () => {
xAxis: { type: 'category', data: chartData.value.mirrors.xAxis, axisLabel: { color: '#666' } },
yAxis: { type: 'value', name: '单位：个', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
series: [{
type: 'bar', data: chartData.value.mirrors.data,
barWidth: 30,
type: 'bar', data: chartData.value.mirrors.data, barWidth: 30,
itemStyle: {
borderRadius: [4, 4, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#0EA5E9' },
{ offset: 1, color: '#38BDF8' }
])
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#0EA5E9' }, {
offset: 1,
color: '#38BDF8'
}])
}
}]
});
};
const initCharts = () => {
nextTick(() => {
initCityProjectChart();
initTalentChart();
initDeveloperChart();
initCommunityRankChart();
initClubChart();
initPolicyChart();
initCampusChart();
initMirrorChart();
});
};
const init = () => {
nextTick(() => {
initCityProjectChart();
initHmEnterpriseChart();
initTalentChart();
initDeveloperChart();
initCommunityRankChart();
initClubChart();
initPolicyChart();
@@ -932,108 +752,25 @@ const init = () => {
autoScroll(1);
autoScroll(2);
autoScroll(3);
autoScroll(4);
startCommunityScroll();
startDeveloperScroll();
});
};
const unInit = () => {
Object.values(scrollTimers).forEach(t => t && clearInterval(t));
pauseDeveloperScroll();
pauseCommunityScroll();
};
// 1. 鸿蒙优秀开源项目 (突出核心技术组件)
const hmProjects = [
{ name: 'OpenHarmony/arkui_ace_engine', desc: 'ArkUI 声明式UI开发框架引擎' },
{ name: 'HarmonyOS/dist_softbus', desc: '极简协议分布式软总线技术' },
{ name: 'OpenHarmony/communication_netmanager', desc: '网络管理与连接调度子系统' },
{ name: 'ohos-standard/third_party_sqlite', desc: '适配于鸿蒙的高性能数据库组件' },
];
// 2. 鸿蒙明星开发者贡献榜 (模拟活跃度分数)
const hmDevelopers = [
{ name: 'Harmony_Hacker', score: '3,210', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Ark' },
{ name: 'BlueOS_Contributor', score: '2,850', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Blue' },
{ name: 'OpenSource_Fanatic', score: '2,460', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Fan' },
];
// 3. 鸿蒙开源企业排行榜 (体现生态伙伴参与度)
const hmEnterprises = [
{ name: '华为技术', value: 100 },
{ name: '软通动力', value: 85 },
{ name: '拓维信息', value: 72 },
{ name: '润和软件', value: 65 },
{ name: '中软国际', value: 58 }
];
const initHmEnterpriseChart = () => {
const chartDom = document.getElementById('hmEnterpriseChart');
if (!chartDom) return;
const myChart = echarts.init(chartDom);
const option = {
grid: {
left: '3%',
right: '12%',
bottom: '3%',
top: '5%',
containLabel: true
},
xAxis: {
type: 'value',
show: false // 保持与政策图一致，不显示坐标轴
},
yAxis: {
type: 'category',
// 反转数据，让高分的排在上面
data: hmEnterprises.map(item => item.name).reverse(),
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
color: '#64748b',
fontSize: 12
}
},
series: [
{
type: 'bar',
data: hmEnterprises.map(item => item.value).reverse(),
barWidth: 16,
itemStyle: {
// 使用渐变色提升质感
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#3b82f6' },
{ offset: 1, color: '#60a5fa' }
]),
borderRadius: [0, 8, 8, 0] // 右侧圆角
},
label: {
show: true,
position: 'right',
formatter: '{c}', // 直接显示数值
color: '#1e293b',
fontWeight: 'bold'
}
}
]
};
myChart.setOption(option);
// 窗口缩放自适应
window.addEventListener('resize', () => myChart.resize());
};
watch(widthType, () => {
init();
});
onMounted(() => {
init();
});
onUnmounted(() => {
unInit();
});
@@ -1042,7 +779,6 @@ onUnmounted(() => {
<style lang="scss" scoped>
.index-module__NV_5cW__container {
min-height: 100vh;
//background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%); /* 深蓝到深紫背景 */
padding: 2rem 1rem;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
color: #fff;
@@ -1125,7 +861,7 @@ onUnmounted(() => {
/* 卡片玻璃拟态美化 */
.index-module__NV_5cW__chartCard {
background: rgba(255, 255, 255, 0.95); /* 高不透明度白底，保证图表清晰 */
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 1.25rem;
@@ -1212,7 +948,6 @@ onUnmounted(() => {
font-weight: 700;
}
/* 前三名高亮 */
.project-item:nth-child(1) .project-rank {
background: linear-gradient(135deg, #fbbf24, #d97706);
}
@@ -1281,36 +1016,19 @@ onUnmounted(() => {
width: fit-content;
}
.tab-pill {
font-size: 12px;
padding: 4px 12px;
cursor: pointer;
border-radius: 6px;
color: #64748b;
font-weight: 500;
transition: all 0.2s;
}
.tab-pill.active {
background: #fff;
color: #3b82f6;
font-weight: 600;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* 来源 Footer 样式 (修改版：数据来源：Icon + Text) */
/* 来源 Footer */
.source-footer {
margin-top: auto;
padding-top: 0.75rem;
border-top: 1px solid #f1f5f9;
display: flex;
align-items: center;
justify-content: flex-end; /* 右对齐 */
justify-content: flex-end;
font-size: 11px;
}
.source-label {
color: #94a3b8; /* 浅灰色标签 */
color: #94a3b8;
margin-right: 4px;
}
@@ -1347,9 +1065,6 @@ onUnmounted(() => {
font-weight: 500;
}
/* 深一点的灰色文字 */
/* 行动区域 */
.index-module__NV_5cW__actionSection {
max-width: 1400px;
@@ -1357,7 +1072,7 @@ onUnmounted(() => {
text-align: center;
border-radius: 24px;
padding: 3rem;
background: rgba(30, 41, 59, 0.6); /* 深色背景 */
background: rgba(30, 41, 59, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
position: relative;
@@ -1603,31 +1318,6 @@ onUnmounted(() => {
border-color: #e2e8f0;
}
/* 排名样式 */
.dev-rank {
width: 24px;
font-weight: 800;
font-style: italic;
color: #94a3b8;
font-size: 14px;
}
.dev-rank.rank-1 {
color: #fbbf24;
font-size: 18px;
}
.dev-rank.rank-2 {
color: #94a3b8;
font-size: 16px;
}
.dev-rank.rank-3 {
color: #b45309;
font-size: 15px;
}
/* 头像占位 */
.dev-avatar {
width: 36px;
height: 36px;
@@ -1673,49 +1363,4 @@ onUnmounted(() => {
grid-template-columns: 1fr;
}
}
/* 鸿蒙专项板块样式 */
.hm-grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
.hm-tag-icon {
background: linear-gradient(90deg, #007dff, #00c4ff);
color: white;
padding: 2px 10px;
border-radius: 4px;
font-size: 14px;
margin-right: 8px;
font-weight: bold;
}
.hm-rank-card {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
border: 1px solid #f1f5f9;
transition: transform 0.3s ease;
&:hover {
transform: translateY(-5px);
}
}
.hm-rank-card {
// ... 原有样式
border: 1px solid rgba(0, 125, 255, 0.1); // 淡淡的鸿蒙蓝边框
&:hover {
transform: translateY(-5px);
border-color: rgba(0, 125, 255, 0.4);
box-shadow: 0 10px 30px rgba(0, 125, 255, 0.1); // 蓝色系投影
}
}
.hm-tag-icon {
background: linear-gradient(90deg, #007dff, #4da1ff); // 更加纯净的华为/鸿蒙蓝
}
</style>