软件列表支持贡献者分布点击弹窗

src/views/Jyh/Search/Components/CountryModal.vue

@@ -0,0 +1,84 @@
+<template>
+  <d-modal
+    title="贡献者分布"
+    v-model="visible"
+    class="file-search-modal"
+    :style="{ width: '800px' }"
+    @close="handleClose"
+  >
+    <Card simple class="jyh-card mb-4" style="box-shadow: none;padding: 0">
+      <d-chart :option="optionConChart" style="width: 100%; height: 400px"></d-chart>
+      <p class="text-center mt-translate-y">国家/地球分布</p>
+    </Card>
+    <template #footer>
+      <d-modal-footer style="text-align: center;">
+        <d-button variant="solid" color="primary"  @click="handleClose">确认</d-button>
+        <d-button @click="handleClose">取消</d-button>
+      </d-modal-footer>
+    </template>
+  </d-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, defineExpose, reactive } 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}%'
+    },
+    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: '#2070F3',
+        borderRadius: [5, 5, 0, 0]
+      }
+    }
+  ]
+});
+
+// 控制模态框显示/隐藏
+const visible = ref(false);
+
+// 打开模态框
+const openModal = () => {
+  visible.value = true;
+};
+
+// 关闭模态框
+const handleClose = () => {
+  visible.value = false;
+};
+
+// 暴露方法，供父组件调用
+defineExpose({
+  openModal,
+});
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+
+</style>

src/views/Jyh/Search/Components/OrgModal.vue

@@ -0,0 +1,84 @@
+<template>
+  <d-modal
+    title="贡献者分布"
+    v-model="visible"
+    class="file-search-modal"
+    :style="{ width: '800px' }"
+    @close="handleClose"
+  >
+    <Card simple class="jyh-card mb-4" style="box-shadow: none;padding: 0">
+      <d-chart :option="optionOrgChart" style="width: 100%; height: 400px"></d-chart>
+      <p class="text-center mt-translate-y">组织/公司分布</p>
+    </Card>
+    <template #footer>
+      <d-modal-footer style="text-align: center;">
+        <d-button variant="solid" color="primary"  @click="handleClose">确认</d-button>
+        <d-button @click="handleClose">取消</d-button>
+      </d-modal-footer>
+    </template>
+  </d-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, defineExpose, reactive } from 'vue';
+import { DChart } from 'vue-devui/echarts';
+
+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 visible = ref(false);
+
+// 打开模态框
+const openModal = () => {
+  visible.value = true;
+};
+
+// 关闭模态框
+const handleClose = () => {
+  visible.value = false;
+};
+
+// 暴露方法，供父组件调用
+defineExpose({
+  openModal,
+});
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+
+</style>

src/views/Jyh/Search/Components/OssQuery.vue

@@ -53,12 +53,16 @@
                 <d-tag type="success">{{ scope.row.programmingLanguage }}</d-tag>
               </template>
               <template v-else-if="column.key === 'contributorCountries'">
-                <span class="mr-2">美国 3.57%</span>
+                <div style="cursor: pointer" @click="openCountryModal(column)">
-                <d-tag color="gray">+3</d-tag>
+                  <span class="mr-2">美国 3.57%</span>
+                  <d-tag color="gray">+3</d-tag>
+                </div>
               </template>
               <template v-else-if="column.key === 'contributorOrganizations'">
-                <span class="mr-2">microsoft 3.57%</span>
+                <div style="cursor: pointer" @click="openOrgModal(column)">
-                <d-tag color="gray">+3</d-tag>
+                  <span class="mr-2">microsoft 3.57%</span>
+                  <d-tag color="gray">+3</d-tag>
+                </div>
               </template>
               <template v-else-if="column.key === 'sourceCodeDownload'">
                 <a>{{ scope.row.sourceCodeDownload }}</a>
@@ -88,6 +92,12 @@
       <span class="inline-block text-G900 text-sm font-normal leading-[20px] break-all">你确认删除此项：{{ item.cla_name }}
         ？</span>
     </GModal>
+
+    <!-- 引入子组件 -->
+    <CountryModal ref="countryModalRef" />
+
+    <!-- 引入子组件 -->
+    <OrgModal ref="orgModalRef" />
   </div>
 </template>
 
@@ -104,6 +114,8 @@ import { reqCatch } from '@/utils/catch';
 import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
 import { Message } from 'vue-devui';
 import { storeToRefs } from 'pinia';
+import CountryModal from './CountryModal.vue'
+import OrgModal from './OrgModal.vue'
 import { useAccountStore } from '@/stores/user';
 const { namespace } = getOrgInfo();
 const userInfo = useAccountStore();
@@ -111,6 +123,8 @@ const { isLogin } = storeToRefs(userInfo);
 
 // 定义 tableKey，用于强制刷新表格
 const tableKey = ref(0);
+const countryVisible = ref(false);
+const orgVisible = ref(false);
 const tableData = ref([
   {
     softwareName: 'eslint-plugin-import',
@@ -400,12 +414,37 @@ const columns = ref([
 
 // 定义 showColumnList 状态
 const showColumnList = ref(false);
+// 获取子组件的引用
+const countryModalRef = ref(null);
+const orgModalRef = ref(null);
 
+// 打开模态框的方法
+const openCountryModal = () => {
+  if (countryModalRef.value) {
+    countryModalRef.value.openModal(); // 调用子组件的方法
+  }
+};
+// 打开模态框的方法
+const openOrgModal = () => {
+  if (orgModalRef.value) {
+    orgModalRef.value.openModal(); // 调用子组件的方法
+  }
+};
 // 更新 showColumnList 的方法
 const updateShowColumnList = (newValue) => {
   showColumnList.value = newValue;
   tableKey.value++; // 更新 tableKey，强制刷新表格
 };
+// 更新 showColumnList 的方法
+const openCountryChart = (row) => {
+  // selectRow.value = row;
+  countryVisible.value = true;
+};
+// 更新 showColumnList 的方法
+const openOrgChart = (row) => {
+  // selectRow.value = row;
+  orgVisible.value = true;
+};
 
 const router = useRouter();
 const route = useRoute();

src/views/Jyh/Version/Detail/index.vue

@@ -13,8 +13,8 @@
           <div class="header-div">
             <span class="span1">版本：</span><span class="span2">{{ softwareData.version }}</span>
             <span class="split"></span>
-            <span class="span1">生命周期状态：</span><span class="span2">{{ softwareData.lifecycle }}</span>
+<!--            <span class="span1">生命周期状态：</span><span class="span2">{{ softwareData.lifecycle }}</span>-->
-            <span class="split"></span>
+<!--            <span class="split"></span>-->
             <span class="span1">集成风险：</span>
             <d-tag color="#F6933B">{{ softwareData.risk }}</d-tag>
           </div>