态势感知平台-武汉开源城市生态建设页面增加两个榜单

src/views/Jyh/Community/components/HarmonyEcoCharts.vue

@@ -58,6 +58,7 @@
           <div class="language-tab">
             <span :class="{ active: activeDevTab === 0 }" @click="switchDevTab(0)">鸿蒙开发者城市分布</span>
             <span :class="{ active: activeDevTab === 1 }" @click="switchDevTab(1)">鸿蒙明星开发者贡献榜</span>
+            <span :class="{ active: activeDevTab === 2 }" @click="switchDevTab(2)">鸿蒙明星开发者贡献榜(武汉)</span>
           </div>
         </div>
 
@@ -102,6 +103,45 @@
               </div>
             </div>
           </div>
+
+          <div v-show="activeDevTab === 2"
+               class="chartCard__container list-container"
+               ref="scrollContainerWhHmDev"
+               @mouseenter="pauseScroll('whHmDev')"
+               @mouseleave="resumeScroll('whHmDev')">
+            <div class="developer-list">
+              <div class="developer-item" v-for="(item, index) in [...whHmDevelopers, ...whHmDevelopers]" :key="index">
+                <div class="dev-avatar" :style="{ background: getAvatarBg(index) }">
+                  {{ item.name.charAt(0).toUpperCase() }}
+                </div>
+
+                <div class="dev-info">
+                  <div class="dev-name-row">
+                    <span class="dev-name">{{ item.name }}</span>
+                    <span class="dev-employer-tag">{{ item.employer }}</span>
+                  </div>
+                  <div class="dev-stats">
+                    <span class="stat-add">++{{ item.added }}</span>
+                    <span class="stat-sep">/</span>
+                    <span class="stat-del">--{{ item.deleted }}</span>
+                  </div>
+                </div>
+
+                <div class="dev-medal">
+                  <div class="score-container">
+                    <span class="score-label">总修改</span>
+                    <span class="score-val" :class="{ 'top-three': (index % whHmDevelopers.length) < 3 }">
+                      {{ item.score }}
+                    </span>
+                  </div>
+                  <svg v-if="(index % whHmDevelopers.length) < 3" class="medal-icon" viewBox="0 0 24 24">
+                    <path fill="#f59e0b"
+                          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>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
 
         <div class="source-footer">
@@ -118,6 +158,7 @@
           <div class="language-tab">
             <span :class="{ active: activeEntTab === 0 }" @click="switchEntTab(0)">开源企业城市分布</span>
             <span :class="{ active: activeEntTab === 1 }" @click="switchEntTab(1)">开源企业贡献榜</span>
+            <span :class="{ active: activeEntTab === 2 }" @click="switchEntTab(2)">武汉企业贡献榜</span>
           </div>
         </div>
 
@@ -149,6 +190,32 @@
               </div>
             </div>
           </div>
+
+          <div v-show="activeEntTab === 2"
+               class="chartCard__container list-container"
+               ref="scrollContainerWhEnt"
+               @mouseenter="pauseScroll('whEnt')"
+               @mouseleave="resumeScroll('whEnt')">
+            <div class="project-list">
+              <div class="project-item" v-for="(item, index) in [...whEnterprises, ...whEnterprises]" :key="index">
+                <div class="project-rank-wrapper">
+            <span class="project-rank" :style="(index % whEnterprises.length) < 3 ? 'background:#f59e0b' : ''">
+              {{ (index % whEnterprises.length) + 1 }}
+            </span>
+                </div>
+                <div class="project-info">
+                  <div style="display:flex; align-items:center; gap:8px">
+                    <span class="project-name">{{ item.name }}</span>
+                    <span class="ent-city-badge">{{ item.city }}</span>
+                  </div>
+                  <span class="project-desc">{{ item.business }}</span>
+                </div>
+                <div class="project-meta">
+                  <span class="ent-remark-badge">{{ item.remark }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
 
         <div class="source-footer">
@@ -318,6 +385,21 @@ const hmDevelopers = [
   { name: 'ch****0', employer: '华为', added: '498,437', deleted: '17,953', score: '516,390' }
 ];
 
+// 武汉鸿蒙开发者贡献榜数据
+const whHmDevelopers = [
+  { name: 'wu****001', employer: '华为武汉', added: '420,150', deleted: '15,230', score: '435,380' },
+  { name: 'wh****dev', employer: '小米武汉', added: '380,200', deleted: '12,100', score: '392,300' },
+  { name: 'hg****coder', employer: '光谷软件园', added: '350,500', deleted: '8,500', score: '359,000' },
+  { name: 'hb****eng', employer: '华中科技大学', added: '320,100', deleted: '25,400', score: '345,500' },
+  { name: 'wh****star', employer: '烽火科技', added: '290,300', deleted: '18,600', score: '308,900' },
+  { name: 'cc****wu', employer: '达梦数据库', added: '275,400', deleted: '10,200', score: '285,600' },
+  { name: 'wh****pro', employer: '华工科技', added: '260,150', deleted: '14,300', score: '274,450' },
+  { name: 'gd****ir', employer: '高德红外', added: '245,200', deleted: '9,800', score: '255,000' },
+  { name: 'jl****laser', employer: '锐科激光', added: '230,100', deleted: '11,500', score: '241,600' },
+  { name: 'wh****iot', employer: '精伦电子', added: '215,300', deleted: '13,200', score: '228,500' }
+];
+
+//开源企业贡献榜
 const hmEnterprises = [
   { name: '华为技术有限公司', city: '深圳', business: '鸿蒙系统核心开发与生态建设', remark: '鸿蒙发起者' },
   { name: '润和软件', city: '南京', business: '鸿蒙生态解决方案提供商', remark: '核心合作伙伴' },
@@ -331,6 +413,20 @@ const hmEnterprises = [
   { name: '创维集团', city: '深圳', business: '鸿蒙智能家电产品', remark: '家电制造商' }
 ];
 
+// 武汉企业贡献榜数据
+const whEnterprises = [
+  { name: '华为武汉研究所', city: '武汉', business: '鸿蒙系统研发与测试', remark: '核心技术团队' },
+  { name: '小米武汉分公司', city: '武汉', business: '鸿蒙生态应用开发', remark: '生态合作伙伴' },
+  { name: '烽火科技', city: '武汉', business: '鸿蒙通信协议适配', remark: '网络设备供应商' },
+  { name: '光谷软件园', city: '武汉', business: '鸿蒙开发者支持', remark: '产业孵化基地' },
+  { name: '华工科技', city: '武汉', business: '鸿蒙智能硬件开发', remark: '智能制造伙伴' },
+  { name: '达梦数据库', city: '武汉', business: '鸿蒙数据库适配', remark: '基础软件厂商' },
+  { name: '锐科激光', city: '武汉', business: '鸿蒙工业控制系统', remark: '工业互联网伙伴' },
+  { name: '高德红外', city: '武汉', business: '鸿蒙智能传感系统', remark: '传感器厂商' },
+  { name: '精伦电子', city: '武汉', business: '鸿蒙物联网设备', remark: 'IoT设备商' },
+  { name: '凡谷电子', city: '武汉', business: '鸿蒙通讯组件开发', remark: '通信器件商' }
+];
+
 // 全国高校分布数据
 const uniCityData = [
   { name: '北邮', value: 52 },
@@ -541,14 +637,18 @@ const getAvatarBg = (index: number) => {
 
 const scrollContainerHmProject = ref<HTMLDivElement | null>(null);
 const scrollContainerHmDev = ref<HTMLDivElement | null>(null);
-const scrollTimers: { [key: string]: NodeJS.Timeout | null } = { hmProject: null, hmDev: null };
+const scrollTimers: { [key: string]: NodeJS.Timeout | null } = { hmProject: null, hmDev: null, hmEnt: null, whEnt: null, whHmDev: null };
 const scrollContainerHmEnt = ref<HTMLDivElement | null>(null);
+const scrollContainerWhEnt = ref<HTMLDivElement | null>(null);
+const scrollContainerWhHmDev = ref<HTMLDivElement | null>(null);
 
 const autoScroll = (key: string) => {
   let container;
   if (key === 'hmProject') container = scrollContainerHmProject.value;
   else if (key === 'hmDev') container = scrollContainerHmDev.value;
   else if (key === 'hmEnt') container = scrollContainerHmEnt.value;
+  else if (key === 'whEnt') container = scrollContainerWhEnt.value;
+  else if (key === 'whHmDev') container = scrollContainerWhHmDev.value;
   else if (key === 'uni') container = scrollContainerUni.value;
   if (!container) return;
   const list = container.firstElementChild as HTMLElement;
@@ -755,17 +855,31 @@ const switchTab = (idx: number) => {
 
 const switchDevTab = (idx: number) => {
   activeDevTab.value = idx;
-  nextTick(() => idx === 0 ? initHmDevCityChart() : (pauseScroll('hmDev'), resumeScroll('hmDev')));
+  nextTick(() => {
+    if (idx === 0) initHmDevCityChart();
+    else if (idx === 1) {
+      pauseScroll('hmDev');
+      resumeScroll('hmDev');
+    }
+    else if (idx === 2) {
+      pauseScroll('whHmDev');
+      resumeScroll('whHmDev');
+    }
+  });
 };
 
 const switchEntTab = (idx: number) => {
   activeEntTab.value = idx;
   nextTick(() => {
     if (idx === 0) initHmEntCityChart();
-    else {
+    else if (idx === 1) {
       pauseScroll('hmEnt');
       resumeScroll('hmEnt');
     }
+    else if (idx === 2) {
+      pauseScroll('whEnt');
+      resumeScroll('whEnt');
+    }
   });
 };
 
@@ -785,6 +899,8 @@ onMounted(() => {
     autoScroll('hmProject');
     autoScroll('hmDev');
     autoScroll('hmEnt');
+    autoScroll('whEnt');
+    autoScroll('whHmDev');
     initUniCityChart(); // 初始化高校分布图
     autoScroll('uni');   // 启动高校列表滚动
     window.addEventListener('resize', handleResize);
@@ -797,6 +913,7 @@ onUnmounted(() => {
   enterpriseChart?.dispose();
   cityChart?.dispose();
   devCityChart?.dispose();
+  entCityChart?.dispose();
 });
 </script>