62 lines
2.0 KiB
Vue
62 lines
2.0 KiB
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>
|