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

Merge branch 'master' of https://gitcode.com/hk_openRepo/OpenRepo_Portal into junjie_dev

Browse Source 
# Conflicts:
#	src/views/Jyh/Home/index.vue
This commit is contained in:
@user8949
2025-03-19 13:34:54 +08:00
parent 300faeae48 2676ca2c57
commit 2cfd96f8e6
1 changed files with 71 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/views/Jyh/Home/index.vue
View File

@@ -6,8 +6,14 @@
<h1>可信开源代码库</h1> <h1>可信开源代码库</h1>
</div> </div>
<div class="home-search" ref="homeSearch" :class="{ 'glow-border': inputGlow }"> <div class="home-search" ref="homeSearch" :class="{ 'glow-border': inputGlow }">
<d-input ref="searchInput" placeholder="请输入搜索关键字" @focus="inputFocus" @blur="inputBlur" :autocomplete="'off'" <d-input
v-model="searchStr"> ref="searchInput"
placeholder="请输入搜索关键字"
@focus="inputFocus"
@blur="inputBlur"
:autocomplete="'off'"
v-model="searchStr"
>
<template #prepend> <template #prepend>
<d-dropdown @toggle="onCateToggle($event)"> <d-dropdown @toggle="onCateToggle($event)">
<div class="flex items-center gap-1 cursor-pointer"> <div class="flex items-center gap-1 cursor-pointer">
@@ -25,7 +31,7 @@
<template #menu> <template #menu>
<ul class="list-menu"> <ul class="list-menu">
<li class="menu-item" v-for="option in industryOptions" @click="onCategoryChange(option)"> <li class="menu-item" v-for="option in industryOptions" @click="onCategoryChange(option)">
{{ option }} {{ option }}
</li> </li>
</ul> </ul>
</template> </template>
@@ -36,15 +42,20 @@
</template> </template>
<template #append> <template #append>
<div class="advanced-search" @click="openAdvancedSearch"> <div class="advanced-search" @click="openAdvancedSearch">
<span>高级筛选</span> <span>高级筛选</span>
<d-badge :count="6" :bg-color="'#f0f0f0'"></d-badge> <d-badge :count="6" :bg-color="'#f0f0f0'"></d-badge>
<d-icon :rotate="rotate" name="icon-chevron-down-2"></d-icon> <d-icon :rotate="rotate" name="icon-chevron-down-2"></d-icon>
</div> </div>
</template> </template>
</d-input> </d-input>
<d-dropdown-menu v-model="isOpen" :origin="searchInput?.$el" close-scope="'blank'" <d-dropdown-menu
:offset="offset" :clickOutside="closeOutside"> v-model="isOpen"
<div class="advanced-search-menu" :style="{ width: dropdownWidth + 'px'}"> :origin="searchInput?.$el"
close-scope="'blank'"
:offset="offset"
:clickOutside="closeOutside"
>
<div class="advanced-search-menu" :style="{ width: dropdownWidth + 'px' }">
<AdvanceSearch @submit="submit($event)" @cancel="isOpen = false" class="p-20" :layout="'vertical'"> <AdvanceSearch @submit="submit($event)" @cancel="isOpen = false" class="p-20" :layout="'vertical'">
<template #title> <template #title>
<span class="title">高级筛选</span> <span class="title">高级筛选</span>
@@ -58,18 +69,25 @@
<div class="home-information"> <div class="home-information">
<div class="info-title"> <div class="info-title">
<div class="sub-title"> <div class="sub-title">
<img src="@/assets/imgs/home/informIcon@2x.png"> <img src="@/assets/imgs/home/informIcon@2x.png" />
<span>预警公告</span> <span>预警公告</span>
</div> </div>
<a v-if="isLogin" class="devui-link" @click="checkMore">更多 ></a> <a v-if="isLogin" class="devui-link" @click="checkMore">更多 ></a>
</div> </div>
<div class="info-content"> <div class="info-content">
<d-timeline :direction="'vertical'" :time-position="'right'" :position="'right'"> <d-timeline :direction="'vertical'" :time-position="'right'" :position="'right'">
<d-timeline-item v-for="(item, index) in infoList" :key="index" <d-timeline-item
:dot-color="item.dotColor" :line-color="'var(--devui-form-control-line-hover)'"> v-for="(item, index) in infoList"
:key="index"
:dot-color="item.dotColor"
:line-color="'var(--devui-form-control-line-hover)'"
>
<template #default> <template #default>
<div class="flex items-center justify-between w-full"> <div class="flex items-center justify-between w-full">
<div class="cursor-pointer notice-content flex gap-2 items-center" @click="openWarningDetail(item, index)"> <div
class="cursor-pointer notice-content flex gap-2 items-center"
@click="openWarningDetail(item, index)"
>
<span>{{ item.subject }}</span> <span>{{ item.subject }}</span>
<d-tag v-if="item.importance" :color="tagMap[item.importance].color" size="sm">{{ tagMap[item.importance].text }}</d-tag> <d-tag v-if="item.importance" :color="tagMap[item.importance].color" size="sm">{{ tagMap[item.importance].text }}</d-tag>
</div> </div>
@@ -89,7 +107,7 @@
</div> </div>
</div> </div>
<d-modal class="warning-modal" v-model="warningModalVisable" title="" style="width: 600px;"> <d-modal class="warning-modal" v-model="warningModalVisable" title="" style="width: 600px">
<EarlyWarningDetail :warningData="currentWarning" :type="'user'"></EarlyWarningDetail> <EarlyWarningDetail :warningData="currentWarning" :type="'user'"></EarlyWarningDetail>
</d-modal> </d-modal>
</template> </template>
@@ -98,7 +116,7 @@
import { ref, onMounted, onBeforeUnmount } from 'vue'; import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import AdvanceSearch from '@/components/AdvanceSearch/index.vue'; import AdvanceSearch from '@/components/AdvanceSearch/index.vue';
import { getHomeNoticeList } from '@/api/jyh' import { getHomeNoticeList } from '@/api/jyh';
import EarlyWarningDetail from '@/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue'; import EarlyWarningDetail from '@/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue';
import { useDiscussGetUserInfo } from '@/api/discussion/hook'; import { useDiscussGetUserInfo } from '@/api/discussion/hook';
@@ -109,14 +127,14 @@ const router = useRouter();
const inputGlow = ref(false); const inputGlow = ref(false);
const searchStr = ref(''); const searchStr = ref('');
const position = ref(['right-start', 'right-end']); const position = ref(['right-start', 'right-end']);
const industryOptions = ref(['通信', '军工', '金融', '能源']) const industryOptions = ref(['通信', '军工', '金融', '能源']);
const searchType = ref('软件'); const searchType = ref('软件');
const searchOptions = ref(['软件']); const searchOptions = ref(['软件']);
const offset = ref({ mainAxis: 7 , crossAxis: -10 }); const offset = ref({ mainAxis: 7, crossAxis: -10 });
const isOpen = ref(false); const isOpen = ref(false);
const rotate = ref(0); const rotate = ref(0);
const cateRotate = ref(0); const cateRotate = ref(0);
const infoList = ref([]) const infoList = ref([]);
const warningModalVisable = ref(false); const warningModalVisable = ref(false);
const currentWarning = ref(); const currentWarning = ref();
@@ -152,17 +170,17 @@ const openAdvancedSearch = () => {
const check = () => { const check = () => {
router.push({ router.push({
name: 'Search', name: 'Search',
query: { tab: 'BatchVerify' }, // 通过查询参数指定 Tab query: { tab: 'BatchVerify' } // 通过查询参数指定 Tab
}); });
} };
const closeOutside = () => { const closeOutside = () => {
return false return false;
} };
const submit = (formData) => { const submit = (formData) => {
isOpen.value = false; isOpen.value = false;
router.push({ name: 'Search', query: { searchWord: searchStr, ...formData, searchType: selectedCate.value}}); router.push({ name: 'Search', query: { searchWord: searchStr, ...formData, searchType: selectedCate.value } });
}; };
const inputFocus = () => { const inputFocus = () => {
@@ -171,7 +189,7 @@ const inputFocus = () => {
const inputBlur = () => { const inputBlur = () => {
inputGlow.value = false; inputGlow.value = false;
} };
const updateDropdownWidth = () => { const updateDropdownWidth = () => {
if (homeSearch.value) { if (homeSearch.value) {
@@ -180,20 +198,20 @@ const updateDropdownWidth = () => {
}; };
const search = () => { const search = () => {
router.push({ name: 'Search', query: { searchWord: searchStr.value, searchType: selectedCate.value}}); router.push({ name: 'Search', query: { searchWord: searchStr.value, searchType: selectedCate.value } });
}; };
const onCategoryChange = (cate) => { const onCategoryChange = (cate) => {
selectedCate.value = cate; selectedCate.value = cate;
} };
const onCateToggle = (event) => { const onCateToggle = (event) => {
cateRotate.value = event ? 180 : 0; cateRotate.value = event ? 180 : 0;
} };
const checkMore = () => { const checkMore = () => {
router.push({ name: 'PersonalCenter' }); router.push({ name: 'PersonalCenter' });
} };
const openWarningDetail = (event, index) => { const openWarningDetail = (event, index) => {
infoList.value.forEach((item, i) => { infoList.value.forEach((item, i) => {
@@ -202,11 +220,11 @@ const openWarningDetail = (event, index) => {
} else { } else {
item.dotColor = ''; item.dotColor = '';
} }
}) });
warningModalVisable.value = true; warningModalVisable.value = true;
currentWarning.value = event; currentWarning.value = event;
} };
let resizeObserver: ResizeObserver | null = null; let resizeObserver: ResizeObserver | null = null;
@@ -225,15 +243,14 @@ onBeforeUnmount(() => {
} }
}); });
const getNoticeList = async() => { const getNoticeList = async () => {
const res:any = await getHomeNoticeList(); const res: any = await getHomeNoticeList();
if (!res.error) { if (!res.error) {
infoList.value = res.data.data; infoList.value = res.data.data;
} }
} };
getNoticeList(); getNoticeList();
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@@ -248,7 +265,6 @@ getNoticeList();
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.home-content { .home-content {
font-size: 14px; font-size: 14px;
width: 50%; width: 50%;
@@ -260,6 +276,7 @@ getNoticeList();
.home-title { .home-title {
display: flex; display: flex;
flex-shrink: 0;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 20px; gap: 20px;
@@ -277,6 +294,7 @@ getNoticeList();
.home-search { .home-search {
width: 100%; width: 100%;
height: 40px; height: 40px;
flex-shrink: 0;
background-color: white; background-color: white;
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;
@@ -327,6 +345,7 @@ getNoticeList();
.batch-btn { .batch-btn {
color: $devui-aide-text; color: $devui-aide-text;
width: 150px; width: 150px;
flex-shrink: 0;
background-color: #f0f0f0; background-color: #f0f0f0;
border-color: $devui-aide-text; border-color: $devui-aide-text;
} }
@@ -334,6 +353,8 @@ getNoticeList();
.home-information { .home-information {
width: 100%; width: 100%;
background-color: #f0f0f0; background-color: #f0f0f0;
overflow: auto;
margin-bottom: 20px;
border-radius: 10px; border-radius: 10px;
padding: 12px; padding: 12px;
@@ -378,27 +399,27 @@ getNoticeList();
.glow-border { .glow-border {
border: 1px solid var(--devui-form-control-line, #d7d8da); border: 1px solid var(--devui-form-control-line, #d7d8da);
border-color: var(--devui-form-control-line-active, #5e7ce0) !important; border-color: var(--devui-form-control-line-active, #5e7ce0) !important;
box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08)); box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, 0.08));
transition: border-color 0.3s ease, box-shadow 0.3s ease; transition: border-color 0.3s ease, box-shadow 0.3s ease;
} }
.menu-item { .menu-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 4px; padding: 4px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: var(--devui-list-item-hover-bg, #f2f5fc); background-color: var(--devui-list-item-hover-bg, #f2f5fc);
color: var(--devui-list-item-hover-text, #526ecc); color: var(--devui-list-item-hover-text, #526ecc);
} }
} }
.list-menu { .list-menu {
padding: 8px; padding: 8px;
margin: 0; margin: 0;
width: 100px; width: 100px;
} }
.title { .title {