Situation-Awareness-Platform-Frontend/src/views/Jyh/AI/Home/components/OssDetail/CommunityInfo.vue

<template>
  <div class="version-info">
    <Card simple class="jyh-card mb-4">
      <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">{{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="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">{{
              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">{{
                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">
        <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-bar ref="chartBarRef" :companyGraph="companyGraph" :countryGraph="countryGraph" />
      </div>
    </Card>
  </div>
</template>

<script setup lang="ts">
import ChartBar from '@/components/ChartBar/index.vue';
import { computed, defineProps, onMounted, ref } from 'vue';

const propsData = defineProps(['versionId','ReleaseInfo']);

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>

<style scoped lang="scss">
.card-desc {
  font-size: 12px;
  color: #808080;
}
</style>