Files
Situation-Awareness-Platfor…/src/views/Jyh/Search/Components/OssQuery.vue
2025-03-18 16:07:53 +08:00

618 lines
20 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="secret-container">
<div class="search-form">
<AdvanceSearch v-model="newFormData" class="px-20">
<template #operation>
<gc-form-operation class="jyh-form-operation">
<d-button class="mr-2" variant="solid">筛选</d-button>
<d-button variant="solid" color="secondary">清空</d-button>
</gc-form-operation>
<div class="left-btn">
<d-button v-if="isLogin" class="output-btn" icon="icon-share" variant="text">导出</d-button>
<span v-if="isLogin" style="height: 14px" class="split"></span>
<TableSetting :columns="columns" :show-column-list="showColumnList" @update:show-column-list="updateShowColumnList"/>
</div>
</template>
</AdvanceSearch>
</div>
<div class="mt-3 px-20">
<d-table :key="tableKey" class="jyh-table" v-if="tableData.length" :striped="false" :data="tableData" table-layout="auto">
<!-- 索引列 -->
<d-column type="index" width="40"></d-column>
<!-- 动态渲染列 -->
<template v-for="column in columns" :key="column.key">
<d-column
v-if="column.visible"
:field="column.key"
:header="column.label"
:filterable="column.filterable"
:filter-list="column.filterList"
:sortable="column.sortable"
@filter-change="handleFilterChange"
>
<!-- 自定义列内容 -->
<template #default="scope">
<template v-if="column.key === 'versionName'">
<a>{{ scope.row.versionName }}</a>
</template>
<template v-else-if="column.key === 'version'">
<a @click="gotoDetail(scope.row)">{{ scope.row.version }}</a>
</template>
<template v-else-if="column.key === 'softwareVersion'">
<a @click="gotoDetail(scope.row)">{{ scope.row.softwareVersion }}</a>
</template>
<template v-else-if="column.key === 'smStatus'">
<a>{{ scope.row.smStatus }}</a>
</template>
<template v-else-if="column.key === 'industryCategory'">
<d-tag type="success">{{ scope.row.industryCategory }}</d-tag>
</template>
<template v-else-if="column.key === 'programmingLanguage'">
<d-tag type="success">{{ scope.row.programmingLanguage }}</d-tag>
</template>
<template v-else-if="column.key === 'contributorCountries'">
<div style="cursor: pointer" @click="openCountryModal(column)">
<span class="mr-2">美国 3.57%</span>
<d-tag color="gray">+3</d-tag>
</div>
</template>
<template v-else-if="column.key === 'contributorOrganizations'">
<div style="cursor: pointer" @click="openOrgModal(column)">
<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>
</template>
<template v-else>
{{ scope.row[column.key] }}
</template>
</template>
</d-column>
</template>
</d-table>
<DataPanel v-else skeleton :card="false" :empty="true">
</DataPanel>
</div>
<div class="mt-20 mb-20 flex justify-end">
<d-pagination size="md" :page-size-options="[10, 20, 50]" :total="pager.total"
v-model:pageSize="pager.pageSize" v-model:pageIndex="pager.pageIndex" :max-items="5"
:can-change-page-size="true" :can-view-total="true" total-item-text="总计" @page-index-change="changeIndex()"
@page-size-change="changeSize()" />
</div>
<!-- 删除组件 -->
<GModal v-model="deletevModels" ref="deleteModal" title="删除?" @confirm="confirmDelete" showWarnIcon
confirmColor="danger">
<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>
<script setup lang="ts">
import AdvanceSearch from '@/components/AdvanceSearch/index.vue'
import SettingTitle from '@/components/Setting/SettingTitle/index.vue';
import SettingText from '@/components/Setting/SettingText/index.vue';
import { ref,reactive, onMounted } from 'vue';
import { getGroupClaList, setGroupClaStatus, deleteGroupCla } from '@/api/cla';
import { useRouter, useRoute } from 'vue-router';
import { GModal } from '@/components/Setting/index';
import TableSetting from '@/components/TableSetting/index.vue';
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();
const { isLogin } = storeToRefs(userInfo);
// 定义 tableKey用于强制刷新表格
const tableKey = ref(0);
const countryVisible = ref(false);
const orgVisible = ref(false);
const tableData = ref([
{
softwareName: 'eslint-plugin-import',
softwareVersion: '2.29.0',
releaseDate: '2025-03-10',
licenseCount: 3,
dependencyCount: 15,
productComponentUsage: ['供应链系统A', '供应链系统B'],
codeSize: '150KB',
vulnerabilityCount: 5,
industryCategory: '软件开发工具',
developer: 'ESLint团队',
contributorCountries: ['美国', '中国', '德国'],
contributorOrganizations: ['Google', 'Microsoft', 'Alibaba'],
programmingLanguage: 'JavaScript',
communityHash: 'a1b2c3d4',
softwareScore: 8.5,
sourceCodeDownload: 'https://github.com/eslint/eslint-plugin-import',
copyright: 'MIT License',
externalVulnerabilitySource: 'CVE-2025-1234',
versionDescription: '修复了若干安全漏洞',
compatibilityRisk: '低',
communityEOL: '2028-12-31',
},
{
softwareName: 'react',
softwareVersion: '18.2.0',
releaseDate: '2025-02-15',
licenseCount: 1,
dependencyCount: 10,
productComponentUsage: ['供应链系统C'],
codeSize: '500KB',
vulnerabilityCount: 2,
industryCategory: '前端框架',
developer: 'Facebook',
contributorCountries: ['美国', '加拿大', '英国'],
contributorOrganizations: ['Facebook', 'Netflix', 'Airbnb'],
programmingLanguage: 'JavaScript',
communityHash: 'e5f6g7h8',
softwareScore: 9.0,
sourceCodeDownload: 'https://github.com/facebook/react',
copyright: 'MIT License',
externalVulnerabilitySource: 'CVE-2025-5678',
versionDescription: '新增了并发渲染功能',
compatibilityRisk: '中',
communityEOL: '2030-12-31',
},
{
softwareName: 'vue',
softwareVersion: '3.2.0',
releaseDate: '2025-01-20',
licenseCount: 1,
dependencyCount: 8,
productComponentUsage: ['供应链系统D'],
codeSize: '300KB',
vulnerabilityCount: 1,
industryCategory: '前端框架',
developer: 'Evan You',
contributorCountries: ['中国', '美国', '日本'],
contributorOrganizations: ['Alibaba', 'Tencent', 'Baidu'],
programmingLanguage: 'JavaScript',
communityHash: 'i9j0k1l2',
softwareScore: 9.2,
sourceCodeDownload: 'https://github.com/vuejs/vue',
copyright: 'MIT License',
externalVulnerabilitySource: 'CVE-2025-9101',
versionDescription: '优化了性能',
compatibilityRisk: '低',
communityEOL: '2029-12-31',
},
{
softwareName: 'webpack',
softwareVersion: '5.75.0',
releaseDate: '2025-04-05',
licenseCount: 2,
dependencyCount: 20,
productComponentUsage: ['供应链系统E'],
codeSize: '1MB',
vulnerabilityCount: 3,
industryCategory: '构建工具',
developer: 'Webpack团队',
contributorCountries: ['美国', '德国', '俄罗斯'],
contributorOrganizations: ['Google', 'Microsoft', 'Yandex'],
programmingLanguage: 'JavaScript',
communityHash: 'm3n4o5p6',
softwareScore: 8.8,
sourceCodeDownload: 'https://github.com/webpack/webpack',
copyright: 'MIT License',
externalVulnerabilitySource: 'CVE-2025-1122',
versionDescription: '修复了构建性能问题',
compatibilityRisk: '高',
communityEOL: '2027-12-31',
},
{
softwareName: 'babel',
softwareVersion: '7.20.0',
releaseDate: '2025-03-25',
licenseCount: 1,
dependencyCount: 12,
productComponentUsage: ['供应链系统F'],
codeSize: '400KB',
vulnerabilityCount: 4,
industryCategory: '编译器',
developer: 'Babel团队',
contributorCountries: ['美国', '英国', '印度'],
contributorOrganizations: ['Facebook', 'Netflix', 'Uber'],
programmingLanguage: 'JavaScript',
communityHash: 'q7r8s9t0',
softwareScore: 8.7,
sourceCodeDownload: 'https://github.com/babel/babel',
copyright: 'MIT License',
externalVulnerabilitySource: 'CVE-2025-3344',
versionDescription: '新增了对新语法的支持',
compatibilityRisk: '中',
communityEOL: '2026-12-31',
},
{
softwareName: 'typescript',
softwareVersion: '5.0.0',
releaseDate: '2025-05-01',
licenseCount: 1,
dependencyCount: 5,
productComponentUsage: ['供应链系统G'],
codeSize: '2MB',
vulnerabilityCount: 0,
industryCategory: '编程语言',
developer: 'Microsoft',
contributorCountries: ['美国', '中国', '加拿大'],
contributorOrganizations: ['Microsoft', 'Google', 'Alibaba'],
programmingLanguage: 'TypeScript',
communityHash: 'u1v2w3x4',
softwareScore: 9.5,
sourceCodeDownload: 'https://github.com/microsoft/TypeScript',
copyright: 'Apache License 2.0',
externalVulnerabilitySource: '无',
versionDescription: '新增了装饰器功能',
compatibilityRisk: '低',
communityEOL: '2035-12-31',
},
{
softwareName: 'jest',
softwareVersion: '29.0.0',
releaseDate: '2025-06-10',
licenseCount: 1,
dependencyCount: 18,
productComponentUsage: ['供应链系统H'],
codeSize: '600KB',
vulnerabilityCount: 2,
industryCategory: '测试工具',
developer: 'Facebook',
contributorCountries: ['美国', '德国', '法国'],
contributorOrganizations: ['Facebook', 'Netflix', 'Spotify'],
programmingLanguage: 'JavaScript',
communityHash: 'y5z6a7b8',
softwareScore: 9.1,
sourceCodeDownload: 'https://github.com/facebook/jest',
copyright: 'MIT License',
externalVulnerabilitySource: 'CVE-2025-5566',
versionDescription: '优化了测试性能',
compatibilityRisk: '中',
communityEOL: '2032-12-31',
},
{
softwareName: 'docker',
softwareVersion: '24.0.0',
releaseDate: '2025-07-15',
licenseCount: 1,
dependencyCount: 25,
productComponentUsage: ['供应链系统I'],
codeSize: '10MB',
vulnerabilityCount: 6,
industryCategory: '容器化工具',
developer: 'Docker Inc.',
contributorCountries: ['美国', '英国', '澳大利亚'],
contributorOrganizations: ['Docker Inc.', 'Google', 'Amazon'],
programmingLanguage: 'Go',
communityHash: 'c9d0e1f2',
softwareScore: 9.3,
sourceCodeDownload: 'https://github.com/docker/docker',
copyright: 'Apache License 2.0',
externalVulnerabilitySource: 'CVE-2025-7788',
versionDescription: '新增了对ARM架构的支持',
compatibilityRisk: '高',
communityEOL: '2030-12-31',
},
{
softwareName: 'kubernetes',
softwareVersion: '1.28.0',
releaseDate: '2025-08-20',
licenseCount: 1,
dependencyCount: 30,
productComponentUsage: ['供应链系统J'],
codeSize: '15MB',
vulnerabilityCount: 8,
industryCategory: '容器编排工具',
developer: 'CNCF',
contributorCountries: ['美国', '中国', '德国'],
contributorOrganizations: ['Google', 'Red Hat', 'IBM'],
programmingLanguage: 'Go',
communityHash: 'g3h4i5j6',
softwareScore: 9.4,
sourceCodeDownload: 'https://github.com/kubernetes/kubernetes',
copyright: 'Apache License 2.0',
externalVulnerabilitySource: 'CVE-2025-9900',
versionDescription: '优化了集群管理功能',
compatibilityRisk: '高',
communityEOL: '2033-12-31',
},
{
softwareName: 'postgresql',
softwareVersion: '15.0.0',
releaseDate: '2025-09-25',
licenseCount: 1,
dependencyCount: 7,
productComponentUsage: ['供应链系统K'],
codeSize: '8MB',
vulnerabilityCount: 3,
industryCategory: '数据库',
developer: 'PostgreSQL团队',
contributorCountries: ['美国', '加拿大', '日本'],
contributorOrganizations: ['PostgreSQL Inc.', 'Amazon', 'Microsoft'],
programmingLanguage: 'C',
communityHash: 'k7l8m9n0',
softwareScore: 9.6,
sourceCodeDownload: 'https://github.com/postgres/postgres',
copyright: 'PostgreSQL License',
externalVulnerabilitySource: 'CVE-2025-1122',
versionDescription: '新增了JSONB索引功能',
compatibilityRisk: '低',
communityEOL: '2035-12-31',
},
]);
const formData = ref({ title: '',type: '', useType: '',formData:'',select: '',time1:null,name:'',versionCode:'',pulishTime:'' });
const typeOptions = reactive(['主软件', '依赖软件']);
const riskOptions = reactive(['低', '中', '高']);
const useTypeOptions = reactive(['软件', '文档', '文档+软件']);
const isUseOptions = reactive(['是', '否']);
const newFormData = ref({
license: '',
searchWord: '',
version: '',
dependentSoftware: '',
programmingLanguage: '',
dateRange: ['', '']
})
const pager = ref({
total: 10,
pageIndex: 1,
pageSize: 10
});
// 删除弹窗
const item = ref('');
const deleteModal = ref();
const deletevModels = ref(false);
const openDelete = (row: any) => {
item.value = row;
deleteModal.value.showFlag = true;
deletevModels.value = true;
};
// 定义 columns 数据
const columns = ref([
{ key: 'softwareName', label: '软件名称', visible: true, filterable: true, sortable: false },
{ key: 'softwareVersion', label: '软件版本', visible: true, filterable: true, sortable: false },
{ key: 'releaseDate', label: '版本发布时间', visible: true, filterable: true, sortable: true },
{ key: 'licenseCount', label: 'License数量', visible: true, filterable: false, sortable: false },
{ key: 'dependencyCount', label: '依赖软件数', visible: true, filterable: false, sortable: false },
{ key: 'productComponentUsage', label: '产品成分使用量', visible: false, filterable: false, sortable: false },
{ key: 'codeSize', label: '代码量', visible: true, filterable: false, sortable: false },
{ key: 'vulnerabilityCount', label: '漏洞数量', visible: true, filterable: false, sortable: false },
{ key: 'industryCategory', label: '行业分类', visible: true, filterable: true, sortable: false },
{ key: 'developer', label: '开发商', visible: false, filterable: true, sortable: false },
{ key: 'contributorCountries', label: '贡献者国家/地区分布', visible: true, filterable: false, sortable: false },
{ key: 'contributorOrganizations', label: '贡献者组织/公司分布', visible: true, filterable: false, sortable: false },
{ key: 'programmingLanguage', label: '编程语言', visible: false, filterable: true, sortable: false },
{ key: 'communityHash', label: '社区hash值', visible: false, filterable: false, sortable: false },
{ key: 'softwareScore', label: '软件评分', visible: false, filterable: false, sortable: true },
{ key: 'sourceCodeDownload', label: '源码包下载地址', visible: true, filterable: false, sortable: false },
{ key: 'copyright', label: 'CopyRight', visible: false, filterable: false, sortable: false },
{ key: 'externalVulnerabilitySource', label: '外部漏洞源的软件名称', visible: false, filterable: true, sortable: false },
{ key: 'versionDescription', label: '版本描述', visible: false, filterable: false, sortable: false },
{ key: 'compatibilityRisk', label: '兼容性风险描述', visible: false, filterable: false, sortable: false },
{ key: 'communityEOL', label: '社区EOL时间', visible: false, filterable: true, sortable: true },
]);
// 定义 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();
// 跳转
const gotoDetail = (row) => {
// 后续请换成params暂时params传参没传过去
router.push({
path: 'repoDetail/' + row.version
});
};
// 分页
const changeIndex = () => {
// getGroupClaListData();
};
const changeSize = () => {
pager.value.pageIndex = 1;
// getGroupClaListData();
};
const repoFun = (arr: any) => {
return arr ? (arr.length > 3 ? arr.slice(0, 3) : arr) : [];
};
// 编辑
const editRow = (row: any) => {
// 后续请换成params暂时params传参没传过去
router.push({
path: 'cla/edit/' + row.object_id,
query: { cla: row.cla, pageType: 'edit' }
});
};
// 确认删除
const confirmDelete = async (e: any) => {
// const res = await reqCatch(deleteGroupCla, { group_id: namespace.value, cla_id: item.value.object_id });
// if (!res.error) {
// getGroupClaListData();
// }
};
// 去成员页
const goMember = (row: any) => {
// 后续请换成params暂时params传参没传过去,注意路由有个:claID
router.push({
path: 'cla/claId/member',
query: { claId: row.object_id, claName: row.cla_name, group_path: namespace.value, pageType: 'edit' }
});
};
const getGroupClaListData = async () => {
// const params = {
// group_id: namespace.value,
// page: pager.value.pageIndex,
// per_page: pager.value.pageSize
// };
// const res = await reqCatch(getGroupClaList, params);
// if (!res.error) {
// tableData.value = res?.data?.data?.content;
// pager.value.total = res.data.data.total;
// }
};
getGroupClaListData();
const setClaStatus = async (row: any) => {
// const params = {
// group_id: namespace.value,
// cla_id: row.object_id,
// status: row.status
// };
// const res = await reqCatch(setGroupClaStatus, params);
// if (!res.error) {
// Message.success('操作成功!');
// getGroupClaListData();
// }
};
const signCla = (row: any) => {
router.push('/cla/' + row.object_id);
};
onMounted(() => {
const query: any = route.query;
newFormData.value = {
...query
};
});
</script>
<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';
.secret-container {
position: relative;
.secret-op {
position: absolute;
right: 0;
top: 0;
}
}
.error {
color: $devui-contrast;
}
:deep(.devui-table__row td) {
padding-top: 16px;
padding-bottom: 16px;
}
:deep(.devui-tag .devui-tag--default) {
background-color: #fff;
border-radius: 12px;
padding: 4px 8px;
font-size: 12px;
line-height: 16px;
margin-right: 8px;
border: 1px solid #E3E3EE;
}
.one-line {
word-break: break-all;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.title {
font-size: 14px;
font-weight: 400;
color: #9a9b9c;
line-height: 20px;
}
.cur-title {
font-size: 14px;
font-weight: 500;
color: #2d2d2e;
line-height: 20px;
}
.search-form {
position: relative;
border-radius: 8px 0px 8px 8px;
//background: #F2F5FC;
.left-btn {
position: absolute;
right: 28px;
bottom: 4px;
}
.output-btn {
color: #191919;
font-family: HarmonyOS Sans SC;
font-weight: regular;
font-size: 14px;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
}
.secret-breadcrumb {
padding: 7px 20px 12px;
background: #ffffff;
}
</style>