From 3e52edfeeafc57474035ac82a66ebabcec377ce6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B1=AA=E5=B0=91=E4=BC=9F?= <wsw.sun@qq.com>
Date: Wed, 19 Mar 2025 13:04:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=80=E5=8F=91=E8=80=85=E7=A4=BE?=
 =?UTF-8?q?=E5=8C=BA=E4=BF=A1=E6=81=AFapi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/jyh/index.ts                          |  12 ++
 src/components/ChartLine/index.vue            | 141 +++++++++---------
 .../Jyh/Version/Detail/CommunityInfo.vue      |  27 +++-
 src/views/Jyh/Version/Detail/SBOM.vue         |  10 +-
 4 files changed, 112 insertions(+), 78 deletions(-)

diff --git a/src/api/jyh/index.ts b/src/api/jyh/index.ts
index c1eb934..41e7237 100644
--- a/src/api/jyh/index.ts
+++ b/src/api/jyh/index.ts
@@ -148,6 +148,18 @@ export const dependencyTree = (softwareId: any): Promise<any> => {
     })
   );
 };
+// 获取开发者社区信息
+export const communityInfo = (softwareId: any): Promise<any> => {
+  return reqCatchV2(() =>
+    request({
+      url: `/api/v1/repo/community/info`,
+      method: 'POST',
+      data: {
+        softwareId
+      }
+    })
+  );
+};
 
 // 编辑用户信息（包含订阅默认预警方式）
 export const userEdit = (data: any): Promise<any> => {
diff --git a/src/components/ChartLine/index.vue b/src/components/ChartLine/index.vue
index ccccbde..fffa54f 100644
--- a/src/components/ChartLine/index.vue
+++ b/src/components/ChartLine/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <d-row class="mt-3">
+  <d-row class="mt-3" v-if="inited">
     <d-col :span="12">
       <d-chart :option="optionConChart" style="width: 100%; height: 400px"></d-chart>
       <p class="text-center mt-translate-y">国家/地球分布</p>
@@ -11,80 +11,83 @@
   </d-row>
 </template>
 
-<script setup>
-import { ref, reactive } from 'vue';
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue';
 import { DChart } from 'vue-devui/echarts';
-const optionConChart = reactive({
-  tooltip: {
-    show: true,
-    trigger: 'item'
-  },
-  xAxis: {
-    type: 'category',
-    data: ['美国', '中国', '德国', '瑞士', '法国', '英国', '印度', '日本', '荷兰', '俄罗斯']
-  },
-  yAxis: {
-    // 给y轴添加单位后缀
-    axisLabel: {
-      formatter: '{value}%'
+
+const inited = ref(false);
+
+const props = withDefaults(
+  defineProps<{
+    companyGraph: Array<any>;
+    countryGraph: Array<any>;
+  }>(),
+  {
+    companyGraph: () => [],
+    countryGraph: () => []
+  }
+);
+
+const options = (x: any, y: any, color = '#2070F3') => {
+  return {
+    tooltip: {
+      show: true,
+      trigger: 'item'
     },
-    name: '单位',
-    type: 'value'
-  },
-  series: [
-    {
-      data: [12, 14.8, 23.6, 18.6, 17.3, 13.1, 16, 11.8, 13.9, 16.4],
-      type: 'bar',
-      barWidth: '40%',
-      // 给label添加单位后缀
-      label: {
-        show: true,
-        position: 'top',
-        formatter: '{c}%'
+    xAxis: {
+      type: 'category',
+      data: x
+    },
+    yAxis: {
+      // 给y轴添加单位后缀
+      axisLabel: {
+        formatter: '{value}%'
       },
-      itemStyle: {
-        color: '#2070F3',
-        borderRadius: [5, 5, 0, 0]
+      name: '单位',
+      type: 'value'
+    },
+    series: [
+      {
+        data: y,
+        type: 'bar',
+        barWidth: '40%',
+        // 给label添加单位后缀
+        label: {
+          show: true,
+          position: 'top',
+          formatter: '{c}%'
+        },
+        itemStyle: {
+          color,
+          borderRadius: [5, 5, 0, 0]
+        }
       }
-    }
-  ]
+    ]
+  };
+};
+
+const optionConChart = computed(() => {
+  return options(
+    props.countryGraph.map((d) => d.name),
+    props.countryGraph.map((d) => d.value),
+    '#2070F3'
+  );
+});
+const optionOrgChart = computed(() => {
+  return options(
+    props.companyGraph.map((d) => d.name),
+    props.companyGraph.map((d) => d.value),
+    '#2CB8C9'
+  );
 });
 
-const optionOrgChart = reactive({
-  tooltip: {
-    show: true,
-    trigger: 'item'
-  },
-  xAxis: {
-    type: 'category',
-    data: ['公司1', '公司2', '公司3', '公司4', '公司5', '公司6', '公司7', '公司8', '公司9', '公司10']
-  },
-  yAxis: {
-    // 给y轴添加单位后缀
-    axisLabel: {
-      formatter: '{value}%'
-    },
-    name: '单位',
-    type: 'value'
-  },
-  series: [
-    {
-      data: [12, 14.8, 23.6, 18.6, 17.3, 13.1, 16, 11.8, 13.9, 16.4],
-      type: 'bar',
-      barWidth: '40%',
-      // 给label添加单位后缀
-      label: {
-        show: true,
-        position: 'top',
-        formatter: '{c}%'
-      },
-      itemStyle: {
-        color: '#2CB8C9',
-        borderRadius: [5, 5, 0, 0]
-      }
-    }
-  ]
-});
+const onInited = () => {
+  setTimeout(() => {
+    inited.value = true;
+  }, 100);
+};
+// 向外暴露onInited方法
+defineExpose({ onInited });
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/Jyh/Version/Detail/CommunityInfo.vue b/src/views/Jyh/Version/Detail/CommunityInfo.vue
index 275ce9e..eaeb3ed 100644
--- a/src/views/Jyh/Version/Detail/CommunityInfo.vue
+++ b/src/views/Jyh/Version/Detail/CommunityInfo.vue
@@ -5,25 +5,22 @@
       <d-row class="mb-3">
         <d-col :span="8">
           <span class="card-key width-90">社区名称</span>
-          <span class="card-val">开发者社区</span>
+          <span class="card-val">{{ infos.communityName }}</span>
         </d-col>
         <d-col :span="8">
           <span class="card-key width-90">官网地址</span>
-          <span class="card-val">https://www.huaweicloud.com</span>
+          <span class="card-val">{{ infos.communityWebsite }}</span>
         </d-col>
         <d-col :span="8">
           <span class="card-key width-90">联系方式</span>
-          <span class="card-val">950808-1</span>
+          <span class="card-val">{{ infos.communityContact }}</span>
         </d-col>
       </d-row>
       <d-row class="mb-3">
         <d-col :span="24">
           <div class="flex">
             <span class="card-key width-90 flex-shrink-0">社区描述</span>
-            <span class="card-val flex-grow-1"
-              >华为开发者社区致力于打造华为开发者专属的官方技术交流平台，帮助开发者探索开发实践、交流心得经验、获悉业界动态、解决开发问题。汇聚华为云社区“华为云”领域博
-              客、问答、视频等精彩内容，形成开发者和技术爱好者交流与分享主阵地。</span
-            >
+            <span class="card-val flex-grow-1">{{ infos.communityDescription }}</span>
           </div>
         </d-col>
       </d-row>
@@ -32,14 +29,28 @@
       <div class="card-title">贡献者分布</div>
       <p class="card-desc">有关Pull Request创建者的公司信息和地区分布(使用公共GitHub信息进行分析)</p>
       <div class="mt-3">
-        <chart-line />
+        <chart-line ref="chartLine" :companyGraph="infos.companyGraph" :countryGraph="infos.countryGraph" />
       </div>
     </Card>
   </div>
 </template>
 
 <script setup>
+import { ref, reactive, onMounted } from 'vue';
+import SBOMDetail from './SBOMDetail.vue';
+import { communityInfo } from '@/api/jyh';
+import { useRoute } from 'vue-router';
 import ChartLine from '@/components/ChartLine/index.vue';
+
+const route = useRoute(); // 获取路由对象
+
+const chartLine = ref();
+const infos = ref({});
+onMounted(async () => {
+  const { data } = await communityInfo(Number(route.params.versionId));
+  infos.value = data?.data?.data || {};
+  chartLine.value.onInited();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/Jyh/Version/Detail/SBOM.vue b/src/views/Jyh/Version/Detail/SBOM.vue
index 871c327..bcb4229 100644
--- a/src/views/Jyh/Version/Detail/SBOM.vue
+++ b/src/views/Jyh/Version/Detail/SBOM.vue
@@ -20,9 +20,13 @@
   </d-drawer>
 </template>
 <script setup lang="ts">
-import { ref, reactive } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 import SBOMDetail from './SBOMDetail.vue';
+import { dependencyTree } from '@/api/jyh';
+import { useRoute } from 'vue-router';
+
 const checked = ref(false);
+const route = useRoute(); // 获取路由对象
 const showDetail = ref(false);
 
 const baseTreeTableData1 = ref([
@@ -84,6 +88,10 @@ const baseTreeTableData1 = ref([
 const treeCheckChange = (val, row, selection) => {
   console.log('treeCheckChange', selection);
 };
+
+onMounted(async () => {
+  await dependencyTree(Number(route.params.versionId));
+});
 </script>
 
 <style scoped lang="scss">