cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

头部搜索对接开源软件列表

Browse Source
This commit is contained in:
付民康
2025-03-20 20:51:16 +08:00
parent 2e46635146
commit 61b7acc34c
6 changed files with 188 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/AdvanceSearch/index.vue
View File

@@ -53,7 +53,13 @@
</d-col>
<d-col :span="8">
<d-form-item field="industry" label="行业">
<d-input v-model="formData.industry" placeholder="请输入行业" />
<d-select
:options="industryList"
:allow-clear="true"
v-model="formData.industry"
placeholder="请选择行业"
></d-select>
<!-- <d-input v-model="formData.industry" placeholder="请输入行业" />-->
</d-form-item>
</d-col>
</d-row>
@@ -70,6 +76,9 @@
<script setup lang="ts">
import { ref, defineEmits, defineProps, watch, onMounted } from 'vue';
import { searchLanguageList } from '@/api/jyh';
import { useGlobalInfoStore } from '@/stores/Global';
const globalInfo = useGlobalInfoStore();
const industryList = globalInfo.industryList;
const props = defineProps({
layout: {
type: String,

30
src/components/Header/Search.vue
View File

@@ -18,8 +18,8 @@
</li>
<template #menu>
<ul class="list-menu">
<li class="menu-item" v-for="option in industryOptions" @click="onCategoryChange(option)">
{{ option }}
<li class="menu-item" v-for="option in industryList" @click="onCategoryChange(option)">
{{ option.name }}
</li>
</ul>
</template>
@@ -46,30 +46,32 @@ const globalInfo = useGlobalInfoStore();
const route = useRoute();
const router = useRouter();
const softwareName = ref(globalInfo.headerSearch.softwareName);
const searchType = ref(globalInfo.headerSearch.searchType);
const softwareName = ref('');
const searchType = ref('软件');
const position = ref(['right-start', 'right-end']);
const industryOptions = ref(['通信', '军工', '金融', '能源']);
// const industryOptions = ref(['通信', '军工', '金融', '能源']);
const placeholder = ref('「开搜」：一搜即达，开发者的AI搜索');
const industryList = globalInfo.industryList;
const onCategoryChange = (event) => {
searchType.value = event;
globalInfo.updateHeaderSearch({ softwareName: softwareName.value, searchType: searchType.value });
searchType.value = event?.name || '软件';
globalInfo.updateHeaderSearch({ softwareName: softwareName.value, searchType: event.value });
}
const search = () => {
window.open(`${import.meta.env.VITE_BASE_URL}repoList?softwareName=${softwareName.value ? softwareName.value : ''}&searchType=${searchType.value}`, '_blank')
window.open(`${import.meta.env.VITE_BASE_URL}repoList?softwareName=${softwareName.value ? softwareName.value : ''}&searchType=${getIndustryValue(searchType.value)}`, '_blank')
};
const handleClear = () => {
globalInfo.updateHeaderSearch({ softwareName: ''.value, searchType: searchType.value });
};
watch(() => route.query?.val, (newVal) => {
microApp.setData('micoro-app-homeweb-app', { type: 'search', data: newVal || '' });
});
const getIndustryValue = (name) => {
const industry = industryList.find(item => item.name === name);
return industry ? industry.value : ''; // 如果找不到，返回默认值
};
const handleDataChange = ({ name, type, data }) => {
if (name === 'micoro-app-homeweb-app') {
@@ -84,8 +86,8 @@ const handleDataChange = ({ name, type, data }) => {
onMounted(() => {
globalInfo.updateHeaderSearch({ softwareName: route.query.softwareName ? route.query.softwareName : '', searchType: route.query.searchType || '软件' });
softwareName.value = route.query.softwareName;
searchType.value = route.query.searchType || '软件';
// softwareName.value = route.query.softwareName;
// searchType.value = route.query.searchType || '软件';
});
onUnmounted(() => {

5
src/components/TableSetting/index.vue
View File

@@ -5,7 +5,7 @@
<div v-if="showColumnList" ref="columnListRef" class="column-list">
<div class="column-list-header">
<span class="title1">展示列设置</span>
<a class="title2">恢复默认</a>
<a @click="emits('setDefult')" class="title2">恢复默认</a>
</div>
<div class="column-list-body">
<d-checkbox
@@ -35,7 +35,7 @@ const props = defineProps({
});
// 定义 emit，用于更新 showColumnList
const emits = defineEmits(['update:show-column-list']);
const emits = defineEmits(['update:show-column-list','setDefult']);
// 切换多选列表的显示
const toggleColumnList = () => {
@@ -101,6 +101,7 @@ onUnmounted(() => {
text-align: left;
}
.title2 {
cursor: pointer;
color: #5E7CE0;
font-family: 苹方-简;
font-weight: regular;

15
src/stores/Global/index.ts
View File

@@ -19,6 +19,18 @@ export const useGlobalInfoStore = defineStore('globalInfo', () => {
softwareName: ''
})
const industryList = ref([
{ value: 'Finance', name: '金融' },
{ value: 'E_Government_Electronic_Government', name: '电力' },
{ value: 'Public_Communication_and_Information_Services', name: '电信' },
{ value: 'petroleum', name: '石油' },
{ value: 'transportation', name: '交通' },
{ value: 'education', name: '教育' },
{ value: 'medical', name: '医疗' },
{ value: 'military', name: '军工' },
{ value: 'aerospace', name: '航空航天' },
]);
const menuInfo = computed(() => {
// 当前菜单
return globalMenuInfo.value[menuType.value] || [];
@@ -125,6 +137,7 @@ export const useGlobalInfoStore = defineStore('globalInfo', () => {
setShowTools,
setNamespaceType,
setGlobalTheme,
updateHeaderSearch
updateHeaderSearch,
industryList
};
});

4
src/views/Jyh/Search/Components/BatchVerify.vue
View File

@@ -302,12 +302,12 @@ const gotoDetail = (row) => {
};
// 分页
const changeIndex = () => {
getReleaseList();
// getReleaseList();
};
const changeSize = () => {
pager.value.pageIndex = 1;
getReleaseList();
// getReleaseList();
};
const repoFun = (arr: any) => {

174
src/views/Jyh/Search/Components/OssQuery.vue
View File

@@ -1,9 +1,69 @@
<template>
<div class="secret-container">
<div class="search-form">
<AdvanceSearch v-model="newFormData" class="px-20">
<template #operation><div></div></template>
</AdvanceSearch>
<d-form layout='horizontal' :label-align="'end'">
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="name" label="软件名称">
<d-input placeholder="请输入软件名称" v-model="newFormData.softwareName" />
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="version" label="软件版本">
<d-input placeholder="请输入软件版本" v-model="newFormData.softwareVersion" />
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="license" label="license">
<d-input placeholder="请输入license名称" v-model="newFormData.licenseName" />
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="dependency" label="依赖软件名称">
<d-input placeholder="请输入依赖软件名称" v-model="newFormData.dependentSoftware" />
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="language" label="编程语言">
<d-select
:options="languageList"
:allow-clear="true"
v-model="newFormData.programmingLanguage"
placeholder="请选择编程语言"
></d-select>
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="date" label="版本发布日期">
<d-range-date-picker-pro
v-model="newFormData.dateRange"
style="width: 100%"
:placeholder="['开始日期', '结束日期']"
/>
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="interestTag" label="兴趣标签">
<d-input placeholder="请输入兴趣标签" v-model="newFormData.interestTag" />
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="industry" label="行业">
<d-select
:key="newFormData.industry"
:options="industryList"
:allow-clear="true"
v-model="newFormData.industry"
placeholder="请选择行业"
></d-select>
</d-form-item>
</d-col>
</d-row>
</d-form>
<div class="jyh-form-operation">
<d-button @click="getReleaseList" class="mr-2" variant="solid">搜索</d-button>
<d-button variant="solid" color="secondary" @click="clear">清空</d-button>
@@ -11,7 +71,7 @@
<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"/>
<TableSetting :columns="columns" @setDefult="setDefult" :show-column-list="showColumnList" @update:show-column-list="updateShowColumnList"/>
</div>
</div>
<div class="mt-3 px-20">
@@ -48,7 +108,7 @@
<a>{{ scope.row.smStatus }}</a>
</template>
<template v-else-if="column.key === 'industryCategory'">
<d-tag type="success">{{ scope.row.industryCategory }}</d-tag>
<d-tag type="success">{{ getIndustryName(scope.row.industryCategory) }}</d-tag>
</template>
<template v-else-if="column.key === 'programmingLanguage'">
<d-tag type="success">{{ scope.row.programmingLanguage }}</d-tag>
@@ -108,7 +168,7 @@
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,watch } from 'vue';
import { ref, reactive, onMounted, watch, nextTick } from 'vue';
import { getGroupClaList, setGroupClaStatus, deleteGroupCla } from '@/api/cla';
import { useRouter, useRoute } from 'vue-router';
import { GModal } from '@/components/Setting/index';
@@ -122,28 +182,29 @@ import OrgModal from './OrgModal.vue'
import NoData from '@/components/NoData/NoData.vue';
import { useAccountStore } from '@/stores/user';
const { formatTime } = useTimeFormat();
import { releasePage } from '@/api/jyh';
import { releasePage, searchLanguageList } from '@/api/jyh';
import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
import { useGlobalInfoStore } from '@/stores/Global';
const router = useRouter();
const route = useRoute();
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([]);
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 languageList = ref([]);
const globalInfo = useGlobalInfoStore();
const headerSearch = ref(globalInfo.headerSearch)
const industryList = ref(globalInfo.industryList);
const newFormData = ref({
licenseName: '',
searchType: headerSearch.value.searchType ? headerSearch.value.searchType : 'software',
searchType: 'software',
softwareName: '',
softwareVersion: '',
dependentSoftware: '',
@@ -153,13 +214,13 @@ const newFormData = ref({
dateRange: ['', '']
})
watch(() => globalInfo.headerSearch, (newVal: any) => {
headerSearch.value = newVal;
console.log(newVal)
newFormData.value.searchType = newVal.searchType;
newFormData.value.softwareName = newVal.softwareName;
getReleaseList();
}, { deep: true })
// watch(() => globalInfo.headerSearch, (newVal: any) => {
// headerSearch.value = newVal;
// console.log(newVal)
// newFormData.value.searchType = newVal.searchType;
// newFormData.value.softwareName = newVal.softwareName;
// getReleaseList();
// }, { deep: true })
const pager = ref({
total: 10,
@@ -177,6 +238,29 @@ const openDelete = (row: any) => {
deletevModels.value = true;
};
const defultColumns = ref([
{ key: 'softwareName', label: '软件名称', visible: true, filterable: true, sortable: false },
{ key: 'softwareVersion', label: '软件版本', visible: true, filterable: true, sortable: false },
{ key: 'securityScore', label: '软件评分', visible: true, filterable: false, sortable: true },
{ key: 'licenseCount', label: 'License数量', visible: true, filterable: false, sortable: false },
{ key: 'industryCategory', label: '行业类型', visible: true, filterable: true, sortable: false },
{ key: 'primaryLanguage', label: '编程语言', visible: true, filterable: true, sortable: false },
{ key: 'codeLines', label: '代码量', visible: true, filterable: false, sortable: false },
{ key: 'sourceDownloadUrl', label: '源码包下载地址', visible: true, filterable: false, sortable: false },
{ key: 'releaseDate', label: '版本发布时间', visible: false, filterable: true, sortable: true },
{ key: 'dependencyCount', label: '依赖软件数', visible: false, filterable: false, sortable: false },
{ key: 'productComponentUsage', label: '产品成分使用量', visible: false, filterable: false, sortable: false },
{ key: 'vulnerabilityCount', label: '漏洞数量', visible: false, filterable: false, sortable: false },
{ key: 'communityName', label: '开发商', visible: false, filterable: true, sortable: false },
{ key: 'contributorCountries', label: '贡献者国家/地区分布', visible: false, filterable: false, sortable: false },
{ key: 'contributorOrganizations', label: '贡献者组织/公司分布', visible: false, filterable: false, sortable: false },
{ key: 'communityHash', label: '社区hash值', visible: false, 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: 'eolDate', label: '社区EOL时间', visible: false, filterable: true, sortable: true },
]);
// 定义 columns 数据
const columns = ref([
{ key: 'softwareName', label: '软件名称', visible: true, filterable: true, sortable: false },
@@ -208,11 +292,16 @@ const showColumnList = ref(false);
const countryModalRef = ref(null);
const orgModalRef = ref(null);
const getIndustryName = (value) => {
const industry = industryList.value.find(item => item.value === value);
return industry ? industry.name : '未知行业'; // 如果找不到，返回默认值
};
// 清空高级搜索
const clear = () => {
newFormData.value = {
licenseName: '',
searchType: headerSearch.value.searchType ? headerSearch.value.searchType : 'software',
searchType: 'software',
softwareName: '',
softwareVersion: '',
dependentSoftware: '',
@@ -224,6 +313,10 @@ const clear = () => {
getReleaseList();
}
// 打开模态框的方法
const setDefult = () => {
columns.value = defultColumns.value
};
// 打开模态框的方法
const openCountryModal = () => {
if (countryModalRef.value) {
@@ -252,8 +345,6 @@ const openOrgChart = (row) => {
orgVisible.value = true;
};
const router = useRouter();
const route = useRoute();
// 跳转
const gotoDetail = (row) => {
// 后续请换成params，暂时params传参没传过去
@@ -324,7 +415,14 @@ const signCla = (row: any) => {
const getReleaseList = async() => {
const { data, error } = await releasePage({
...newFormData.value,
softwareName: newFormData.value.softwareName || '',
searchType: newFormData.value.searchType || '',
softwareVersion: newFormData.value.softwareVersion || '',
programmingLanguage: newFormData.value.programmingLanguage || '',
interestTag: newFormData.value.interestTag || '',
industry: newFormData.value.industry || '',
licenseName: newFormData.value.licenseName || '',
dependentSoftware: newFormData.value.dependentSoftware || '',
releaseDateStart: newFormData.value.dateRange&&newFormData.value.dateRange.length>0?newFormData.value.dateRange[0]:'',
releaseDateEnd: newFormData.value.dateRange&&newFormData.value.dateRange.length>0?newFormData.value.dateRange[1]:'',
current: pager.value.pageIndex,
@@ -338,16 +436,30 @@ const getReleaseList = async() => {
}
};
const getLanguageList = async () => {
const res: any = await searchLanguageList();
if (!res.error) {
languageList.value = res.data.data;
}
};
onMounted(async() => {
newFormData.value.industry = route.query.searchType || '';
newFormData.value.softwareName = route.query.softwareName || '';
nextTick(() => {
getReleaseList();
})
// getReleaseList();
getLanguageList();
});
onMounted(() => {
const query: any = route.query;
newFormData.value = {
...query
};
});
// onMounted(() => {
// const query: any = route.query;
// newFormData.value = {
// ...query
// };
// });
</script>
<style scoped lang="scss">