Situation-Awareness-Platform-Frontend/src/views/Jyh/Version/Detail/CommunityInfo.vue

<template>
  <div class="version-info">
    <Card simple class="jyh-card mb-4">
      <div class="card-title">基本信息</div>
      <d-row class="mb-3">
        <d-col :span="8">
          <span class="card-key width-90">社区名称</span>
          <span class="card-val">{{ infos.communityName }}</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-90">官网地址</span>
          <a :href="infos.communityWebsite" class="card-url">{{ infos.communityWebsite }}</a>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-90">联系方式</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">{{ infos.communityDescription }}</span>
          </div>
        </d-col>
      </d-row>
    </Card>
    <Card simple class="jyh-card mb-4">
      <div class="card-title">贡献者分布</div>
      <p class="card-desc">有关Pull Request创建者的公司信息和地区分布(使用公共GitHub信息进行分析)</p>
      <div class="mt-3">
        <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">
.card-desc {
  font-size: 12px;
  color: #808080;
}
</style>