可信代码库-软件详情数据修改
This commit is contained in:
@@ -1,55 +1,118 @@
|
||||
<template>
|
||||
<div class="version-info">
|
||||
<Card simple class="jyh-card mb-4">
|
||||
<div class="card-title">基本信息</div>
|
||||
<div class="card-title">
|
||||
<d-tooltip position="left" content="此内容由AI辅助生成">
|
||||
<img
|
||||
style="width: 14px; height: 14px;display: inline-block"
|
||||
src="@/assets/imgs/jyh/aiLogo.png"
|
||||
/>
|
||||
</d-tooltip>
|
||||
基本信息
|
||||
<!-- <span style="color: #3b82f6;font-size: 12px;font-weight: normal">(该数据由AI生成)</span>-->
|
||||
</div>
|
||||
<d-row class="mb-3">
|
||||
<d-col :span="8">
|
||||
<d-tooltip position="left" content="此内容由AI辅助生成">
|
||||
<img
|
||||
style="width: 14px; height: 14px;display: inline-block"
|
||||
src="@/assets/imgs/jyh/aiLogo.png"
|
||||
/>
|
||||
</d-tooltip>
|
||||
<span class="card-key width-90">社区名称</span>
|
||||
<span class="card-val">{{ infos.communityName }}</span>
|
||||
<span class="card-val">{{propsData.ReleaseInfo?.basicInfo?.communityName || propsData.ReleaseInfo?.criticalSoftwareAIGenerateInfo?.communityName || '--'}}</span>
|
||||
</d-col>
|
||||
<d-col :span="8">
|
||||
<d-tooltip position="left" content="此内容由AI辅助生成">
|
||||
<img
|
||||
style="width: 14px; height: 14px;display: inline-block"
|
||||
src="@/assets/imgs/jyh/aiLogo.png"
|
||||
/>
|
||||
</d-tooltip>
|
||||
<span class="card-key width-90">官网地址</span>
|
||||
<a :href="infos.communityWebsite" class="card-url">{{ infos.communityWebsite }}</a>
|
||||
<a :href="propsData.ReleaseInfo?.basicInfo?.communityWebsite || propsData.ReleaseInfo?.criticalSoftwareAIGenerateInfo?.communityName" class="card-url">{{
|
||||
propsData.ReleaseInfo?.basicInfo?.communityWebsite || propsData.ReleaseInfo?.criticalSoftwareAIGenerateInfo?.communityName ||'--' }}</a>
|
||||
</d-col>
|
||||
<d-col :span="8">
|
||||
<d-tooltip position="left" content="此内容由AI辅助生成">
|
||||
<img
|
||||
style="width: 14px; height: 14px;display: inline-block"
|
||||
src="@/assets/imgs/jyh/aiLogo.png"
|
||||
/>
|
||||
</d-tooltip>
|
||||
<span class="card-key width-90">联系方式</span>
|
||||
<span class="card-val">{{ infos.communityContact }}</span>
|
||||
<span class="card-val">{{
|
||||
propsData.ReleaseInfo?.basicInfo?.communityContact || propsData.ReleaseInfo?.criticalSoftwareAIGenerateInfo?.communityContact ||'--' }}</span>
|
||||
</d-col>
|
||||
</d-row>
|
||||
<d-row class="mb-3">
|
||||
<d-col :span="24">
|
||||
<div class="flex">
|
||||
<d-tooltip position="left" content="此内容由AI辅助生成">
|
||||
<img
|
||||
style="width: 14px; height: 14px;display: inline-block"
|
||||
src="@/assets/imgs/jyh/aiLogo.png"
|
||||
/>
|
||||
</d-tooltip>
|
||||
<span class="card-key width-90 flex-shrink-0">社区描述</span>
|
||||
<span class="card-val flex-grow-1">{{ infos.communityDescription }}</span>
|
||||
<span class="card-val flex-grow-1">{{
|
||||
propsData.ReleaseInfo?.basicInfo?.communityDescription || propsData.ReleaseInfo?.criticalSoftwareAIGenerateInfo?.communityDescription ||'--' }}</span>
|
||||
</div>
|
||||
</d-col>
|
||||
</d-row>
|
||||
</Card>
|
||||
<Card simple class="jyh-card mb-4">
|
||||
<div class="card-title">贡献者分布</div>
|
||||
<div class="card-title">
|
||||
<d-tooltip position="left" content="此内容由AI辅助生成">
|
||||
<img
|
||||
style="width: 14px; height: 14px;display: inline-block"
|
||||
src="@/assets/imgs/jyh/aiLogo.png"
|
||||
/>
|
||||
</d-tooltip>
|
||||
贡献者分布
|
||||
</div>
|
||||
<p class="card-desc">有关Pull Request创建者的公司信息和地区分布(使用公共GitHub信息进行分析)</p>
|
||||
<div class="mt-3">
|
||||
<chart-line ref="chartLine" :companyGraph="infos.companyGraph" :countryGraph="infos.countryGraph" />
|
||||
<chart-bar ref="chartBarRef" :companyGraph="companyGraph" :countryGraph="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';
|
||||
<script setup lang="ts">
|
||||
import ChartBar from '@/components/ChartBar/index.vue';
|
||||
import { computed, defineProps, onMounted, ref } from 'vue';
|
||||
|
||||
const route = useRoute(); // 获取路由对象
|
||||
const propsData = defineProps(['versionId','ReleaseInfo']);
|
||||
|
||||
const chartLine = ref();
|
||||
const infos = ref({});
|
||||
onMounted(async () => {
|
||||
const { data } = await communityInfo(Number(route.params.versionId));
|
||||
infos.value = data?.data?.data || {};
|
||||
chartLine.value.onInited();
|
||||
const chartBarRef = ref();
|
||||
|
||||
const countryGraph = computed(() => {
|
||||
if(propsData.ReleaseInfo.criticalSoftwareAIGenerateInfo&&propsData.ReleaseInfo.criticalSoftwareAIGenerateInfo.contributorCountries) {
|
||||
let countriesObj = JSON.parse(propsData.ReleaseInfo.criticalSoftwareAIGenerateInfo.contributorCountries);
|
||||
return Object.entries(countriesObj).map(([name, value]) => ({
|
||||
name,
|
||||
value
|
||||
}));
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
});
|
||||
|
||||
const companyGraph = computed(() => {
|
||||
if(propsData.ReleaseInfo.criticalSoftwareAIGenerateInfo&&propsData.ReleaseInfo.criticalSoftwareAIGenerateInfo.organizationDistribution) {
|
||||
let countriesObj = JSON.parse(propsData.ReleaseInfo.criticalSoftwareAIGenerateInfo.organizationDistribution);
|
||||
return Object.entries(countriesObj).map(([name, value]) => ({
|
||||
name,
|
||||
value
|
||||
}));
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
chartBarRef.value.onInited();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user