态势感知平台-武汉市开源生态建设-统计概览1 接口对接

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

@@ -1,36 +1,98 @@
 <template>
   <div class="stats-glass-bar">
     <div class="stat-node">
-      <span class="stat-value">1000W+</span>
+      <span class="stat-value">{{ hmDevelopers }}</span>
       <span class="stat-desc">鸿蒙开发者</span>
     </div>
     <div class="stat-separator"></div>
     <div class="stat-node">
-      <span class="stat-value">60W+</span>
+      <span class="stat-value">{{ hmCertificationDevelopers }}</span>
       <span class="stat-desc">鸿蒙认证开发者</span>
     </div>
     <div class="stat-separator"></div>
     <div class="stat-node">
-      <span class="stat-value">1W+</span>
+      <span class="stat-value">{{ whHmCertificationDevelopers }}</span>
       <span class="stat-desc">武汉鸿蒙认证开发者</span>
     </div>
     <div class="stat-separator"></div>
     <div class="stat-node">
-      <span class="stat-value">728</span>
+      <span class="stat-value">{{ hmProjects }}</span>
       <span class="stat-desc">鸿蒙开源项目</span>
     </div>
     <div class="stat-separator"></div>
     <div class="stat-node">
-      <span class="stat-value">600+</span>
+      <span class="stat-value">{{ hmCompanies }}</span>
       <span class="stat-desc">鸿蒙开源企业</span>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-name: "StatsBar"
-}
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import { hmStatsBarPage3 } from '@/api/jyh/situation';
+
+// 定义响应式数据
+const hmDevelopers = ref<string>('加载中...');
+const hmCertificationDevelopers = ref<string>('加载中...');
+const whHmCertificationDevelopers = ref<string>('加载中...');
+const hmProjects = ref<string>('加载中...');
+const hmCompanies = ref<string>('加载中...');
+
+// 加载状态
+const loading = ref(true);
+
+// 格式化数字的工具函数
+const formatNumber = (num: number, unit: string = ''): string => {
+  if (num >= 100000000) {
+    return (num / 100000000).toFixed(1) + '亿';
+  } else if (num >= 10000) {
+    return (num / 10000).toFixed(1) + '万';
+  } else if (num >= 1000) {
+    return (num / 1000).toFixed(1) + '千';
+  }
+  return num.toString();
+};
+
+// 获取统计数据
+const fetchStats = async () => {
+  try {
+    loading.value = true;
+    const response = await hmStatsBarPage3();
+    
+    if (response.code === 200 && response.data) {
+      const { developer, certificationDeveloper, wuhanCertificationDeveloper, project, company } = response.data;
+      
+      // 格式化数据显示
+      hmDevelopers.value = `${formatNumber(developer)}+`;
+      hmCertificationDevelopers.value = `${formatNumber(certificationDeveloper)}+`;
+      whHmCertificationDevelopers.value = `${formatNumber(wuhanCertificationDeveloper)}+`;
+      hmProjects.value = `${formatNumber(project)}`;
+      hmCompanies.value = `${formatNumber(company)}+`;
+    } else {
+      console.error('获取鸿蒙统计数据失败:', response.msg || '未知错误');
+      // 设置默认值
+      hmDevelopers.value = '1000万+';
+      hmCertificationDevelopers.value = '60万+';
+      whHmCertificationDevelopers.value = '1万+';
+      hmProjects.value = '728';
+      hmCompanies.value = '600+';
+    }
+  } catch (error) {
+    console.error('获取鸿蒙统计数据异常:', error);
+    // 设置默认值
+    hmDevelopers.value = '1000万+';
+    hmCertificationDevelopers.value = '60万+';
+    whHmCertificationDevelopers.value = '1万+';
+    hmProjects.value = '728';
+    hmCompanies.value = '600+';
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchStats();
+});
 </script>
 
 <style lang="scss" scoped>