态势感知平台-武汉市开源建设生态增加鸿蒙生态图

src/views/Jyh/Community/index.vue

@@ -34,7 +34,7 @@
         <div class="index-module__NV_5cW__chartsGrid">
 
           <div class="index-module__NV_5cW__chartCard list-card">
-            <h3 class="chartCard__title">武汉优质开源项目榜单</h3>
+            <h3 class="chartCard__title">武汉优质开源项目榜</h3>
             <div class="chartCard__container list-container"
                  ref="scrollContainer1"
                  @mouseenter="pauseScroll(1)"
@@ -89,8 +89,8 @@
           <div class="index-module__NV_5cW__chartCard list-card">
             <div class="flex justify-center pb-2">
               <div class="language-tab" @click="switchTab">
-                <span :class="{ active: activeTab === 0 }">开源创新联盟优秀项目</span>
+                <span :class="{ active: activeTab === 0 }">2024武汉优秀开源项目</span>
-                <span :class="{ active: activeTab === 1 }">武汉优秀开源项目</span>
+                <span :class="{ active: activeTab === 1 }">2025武汉优秀开源项目</span>
               </div>
             </div>
 
@@ -282,6 +282,105 @@
         </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">
@@ -437,13 +536,18 @@ const chinaExcellentProjects = ref([
 
 // 武汉知名社区数据
 const wuhanCommunities = ref([
-  { name: 'Deepin (深度)', type: '操作系统', slogan: '最大的国产桌面操作系统开源社区' },
+  { name: '黄鹤开源社区', type: '核心生态', slogan: '国家级、城市级开源社区平台，武汉开源生态的核心枢纽' },
-  { name: 'OpenHarmony 武汉', type: '万物互联', slogan: '华科/武大等高校深度参与的终端操作系统' },
+  { name: '深度社区 (Deepin)', type: '操作系统', slogan: '全球最大桌面操作系统社区之一，全球用户超过 750 万' },
-  { name: 'MindSpore 武汉', type: '人工智能', slogan: '昇思全场景AI框架武汉开发者社区' },
+  { name: '极狐社区 (GitLab China)', type: 'DevOps', slogan: '全球第二大开源托管平台 GitLab 在汉设立的中国发行版及开发者社区' },
-  { name: 'IoTDB 社区', type: '工业物联网', slogan: '源自清华在汉广泛应用的工业时序数据库' },
+  { name: '开源鸿蒙社区 (OpenHarmony)', type: '万物互联', slogan: '国家级生态创新中心，设有全国首个分委会' },
-  { name: 'GoFrame 社区', type: '后端开发', slogan: '模块化、全栈式、模块化的Go语言开发框架' },
+  { name: 'PostgreSQL 中文社区', type: '数据库', slogan: '全球四大开源数据库之一的运营中心设在武汉' },
-  { name: '飞桨 (PaddlePaddle)', type: '深度学习', slogan: '百度武汉开源生态开发者汇聚地' },
+  { name: '武汉大学开源社区', type: '学术社团', slogan: '老牌社团，涉及 Linux、嵌入式、深度学习等方向' },
-  { name: '极狐 GitLab 武汉', type: 'DevOps', slogan: '开源信息基础设施与协同开发平台' }
+  { name: '武汉大学 OpenHarmony 俱乐部', type: '万物互联', slogan: '专注于华为开源鸿蒙生态' },
+  { name: '华中科技大学开源社团', type: '学术社团', slogan: '常年组织 LUG (Linux User Group) 及黑客松活动' },
+  { name: '武汉理工大学开源联盟', type: '学术社团', slogan: '聚焦计算机科学与软件工程方向' },
+  { name: '华中师范大学', type: '兴趣小组', slogan: '开源技术兴趣小组' },
+  { name: '中南民族大学', type: '兴趣小组', slogan: '开源技术兴趣小组' },
+  { name: '湖北大学', type: '兴趣小组', slogan: '开源技术兴趣小组' }
 ]);
 
 const activeCommunityTab = ref(0);
@@ -591,6 +695,8 @@ const isEmpty = ref({
 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) => {
@@ -815,6 +921,7 @@ const initCharts = () => {
 const init = () => {
   nextTick(() => {
     initCityProjectChart();
+    initHmEnterpriseChart();
     initTalentChart();
     initDeveloperChart();
     initCommunityRankChart();
@@ -825,6 +932,8 @@ const init = () => {
 
     autoScroll(1);
     autoScroll(2);
+    autoScroll(3);
+    autoScroll(4);
     startCommunityScroll();
     startDeveloperScroll();
   });
@@ -835,6 +944,90 @@ const unInit = () => {
   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();
 });
@@ -1480,4 +1673,49 @@ 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>