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

可信代码库V2版-首页展示页面原型开发

Browse Source
This commit is contained in:
fmk1023
2025-11-11 14:48:43 +08:00
parent f5b59fadd9
commit f1f05c11f6
22 changed files with 1109 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -60,54 +60,168 @@
</d-dropdown-menu>
<d-button icon="search" shape="circle" @click="search"></d-button>
</div>
<d-button v-if="isLogin" @click="check" ref="origin" icon="share" class="batch-btn">批量检索</d-button>
<div class="home-information" v-if="infoList.length > 0">
<div class="info-title">
<div class="sub-title">
<img src="@/assets/imgs/home/informIcon@2x.png" />
<span>预警公告</span>
<div style="width: 70%" class="from-blue-50 to-white">
<!-- 顶部功能按钮 -->
<d-row :gutter="16" class="mb-8 top-btn">
<div style="cursor: pointer" v-for="item in topButtons" :key="item.name" @click="handleButtonClick(item)">
<div style="width: 84px;height: 84px;flex-direction: column;padding: 12px;margin: 0 12px" class="bg-white rounded-lg shadow-md flex items-center justify-center mb-2">
<div>
<img style="width: 32px;height: 32px;margin-bottom: 4px" :src="item.icon" class="text-blue-600 text-xl"></img>
</div>
<div class="text-sm font-medium">{{ item.name }}</div>
</div>
</div>
</d-row>
<!-- <a v-if="accountInfo.op_access_token" class="devui-link" @click="checkMore"
>更多 <i class="icon icon-chevron-right-2"></i>
</a>
<span v-else class="text-blue-500">查看更多，请先登录</span> -->
<div class="dashboard-page">
<d-row :gutter="16" class="main-row">
<!-- 左侧：全球威胁态势实时监控 -->
<d-col :span="14">
<div class="bg-white rounded-xl shadow-md p-4">
<div class="section-title">全球威胁态势实时监控
<a href="#" class="text-blue-600 text-sm">更多 ></a></div>
<d-row :gutter="24" class="threat-row">
<d-col :span="10">
<d-chart :option="lineOption" style="width: 400px; height: 240px"></d-chart>
</d-col>
<d-col :span="8">
<d-chart :option="pieOption" style="width: 240px; height: 240px"></d-chart>
</d-col>
<d-col :span="6">
<div class="data-card">
<div class="data-item">
<span class="data-label">今日检测量</span>
<span class="data-value">128万次</span>
<!-- <span class="data-value">128万次</span>-->
<!-- <span class="data-desc">说明0</span>-->
</div>
<div class="data-item">
<span class="data-label">高危威胁</span>
<span class="data-value danger">327起</span>
<!-- <span class="data-value danger">327起</span>-->
<!-- <span class="data-desc">说明0</span>-->
</div>
</div>
</d-col>
</d-row>
</div>
</d-col>
<!-- 右侧：AI+安全核心能力 -->
<d-col style="height: 320px" :span="10">
<div style="height: 100%" class="bg-white rounded-xl shadow-md p-4">
<div class="section-title">AI+安全核心能力
<router-link :to="{ name: 'aihome' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 ></router-link>
</div>
<d-row :gutter="16" class="ai-capability-row">
<d-col :span="8" v-for="(item, index) in aiCapabilities" :key="index">
<div class="capability-card">
<div class="capability-icon">
<img :src="item.icon" class="text-blue-600 text-2xl"></img>
</div>
<h2 class="capability-title">{{ item.title }}</h2>
<h4>{{ item.rate }}</h4>
<p class="capability-desc">{{ item.desc }}</p>
</div>
</d-col>
</d-row>
</div>
</d-col>
</d-row>
</div>
<div class="info-content">
<d-timeline :direction="'vertical'" :time-position="'right'" :position="'right'">
<d-timeline-item
v-for="(item, index) in infoList"
:key="index"
:dot-color="item.dotColor"
:line-color="'var(--devui-form-control-line-hover)'"
>
<template #default>
<div class="flex items-center justify-between w-full">
<div
class="cursor-pointer notice-content flex gap-2 items-center"
@click="openWarningDetail(item, index)"
>
<span>{{ item.subject }}</span>
<d-tag
v-if="item.importance && tagMap[item.importance]"
:color="tagMap[item.importance].color"
size="sm"
>{{ tagMap[item.importance].text }}</d-tag
>
</div>
<div class="time-container">
<d-icon name="icon-time"></d-icon>
{{ item.publishTime }}
<!-- 团队与成果 + 最新动态 -->
<d-row style="height: 237px" :gutter="16">
<d-col style="height: 100%" :span="8">
<div style="height: 100%" class="bg-white rounded-xl shadow-md p-4 mb-4">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold">团队与成果</h3>
<router-link :to="{ name: 'OurTeam' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 ></router-link>
</div>
<div class="flex flex-col items-center">
<h4 class="font-medium mb-2">顶尖安全团队</h4>
<div class="flex gap-4 mb-3">
<div class="flex flex-col items-center" v-for="member in teamMembers" :key="member.name">
<img src="https://picsum.photos/id/1001/60/60" alt="团队成员" class="w-14 h-14 rounded-full mb-1">
<span class="text-sm font-medium">{{ member.name }}</span>
<span class="text-xs text-gray-500">{{ member.title }}</span>
</div>
</div>
</template>
<template #time>
<span></span>
</template>
</d-timeline-item>
</d-timeline>
</div>
<div class="flex gap-2">
<button class="bg-blue-600 text-white text-xs px-3 py-1 rounded">国家级安全认证团队</button>
<button class="bg-blue-100 text-blue-600 text-xs px-3 py-1 rounded">200+专利技术</button>
<button class="bg-blue-100 text-blue-600 text-xs px-3 py-1 rounded">200+专利技术</button>
</div>
</div>
</div>
</d-col>
<d-col style="height: 100%" :span="16">
<div style="height: 100%" class="bg-white rounded-xl shadow-md p-4">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold">最新动态</h3>
<router-link :to="{ name: 'Insights' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 ></router-link>
</div>
<div class="space-y-3">
<div class="flex gap-2" v-for="news in latestNews" :key="news.year">
<span class="bg-red-100 text-red-600 text-xs px-2 py-0.5 rounded">{{ news.year }}</span>
<div class="flex-1">
<p class="font-medium">{{ news.title }}</p>
<p class="text-xs text-gray-500">{{ news.desc }}</p>
</div>
</div>
</div>
</div>
</d-col>
</d-row>
</div>
<!-- <d-button v-if="isLogin" @click="check" ref="origin" icon="share" class="batch-btn">批量检索</d-button>-->
<!-- <div class="home-information" v-if="infoList.length > 0">-->
<!-- <div class="info-title">-->
<!-- <div class="sub-title">-->
<!-- <img src="@/assets/imgs/home/informIcon@2x.png" />-->
<!-- <span>预警公告</span>-->
<!-- </div>-->
<!-- &lt;!&ndash; <a v-if="accountInfo.op_access_token" class="devui-link" @click="checkMore"-->
<!-- >更多 <i class="icon icon-chevron-right-2"></i>-->
<!-- </a>-->
<!-- <span v-else class="text-blue-500">查看更多，请先登录</span> &ndash;&gt;-->
<!-- </div>-->
<!-- <div class="info-content">-->
<!-- <d-timeline :direction="'vertical'" :time-position="'right'" :position="'right'">-->
<!-- <d-timeline-item-->
<!-- v-for="(item, index) in infoList"-->
<!-- :key="index"-->
<!-- :dot-color="item.dotColor"-->
<!-- :line-color="'var(&#45;&#45;devui-form-control-line-hover)'"-->
<!-- >-->
<!-- <template #default>-->
<!-- <div class="flex items-center justify-between w-full">-->
<!-- <div-->
<!-- class="cursor-pointer notice-content flex gap-2 items-center"-->
<!-- @click="openWarningDetail(item, index)"-->
<!-- >-->
<!-- <span>{{ item.subject }}</span>-->
<!-- <d-tag-->
<!-- v-if="item.importance && tagMap[item.importance]"-->
<!-- :color="tagMap[item.importance].color"-->
<!-- size="sm"-->
<!-- >{{ tagMap[item.importance].text }}</d-tag-->
<!-- >-->
<!-- </div>-->
<!-- <div class="time-container">-->
<!-- <d-icon name="icon-time"></d-icon>-->
<!-- {{ item.publishTime }}-->
<!-- </div>-->
<!-- </div>-->
<!-- </template>-->
<!-- <template #time>-->
<!-- <span></span>-->
<!-- </template>-->
<!-- </d-timeline-item>-->
<!-- </d-timeline>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
@@ -127,6 +241,73 @@ import { useGlobalInfoStore } from '@/stores/Global';
const { updateHeaderSearch } = useGlobalInfoStore();
const { accountInfo } = useAccount();
import { useDiscussGetUserInfo } from '@/api/discussion/hook';
import { DChart } from 'vue-devui/echarts';
import { reactive } from 'vue';
const lineOption = reactive({
tooltip: { show: true, trigger: 'axis' },
grid: {
left: '0%',
right: '3%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'category',
data: ['0', '30', '60', '90', '120', '150', '180', '210', '240'],
axisLine: { lineStyle: { color: '#909399' } },
axisTick: { show: false },
},
yAxis: {
type: 'value',
max: 550,
axisLine: { show: false },
axisTick: { show: false },
splitLine: { lineStyle: { color: '#eee' } },
},
series: [
{
name: '实时威胁A',
data: [0, 150, 250, 200, 350, 400, 450, 500, 550],
type: 'line',
itemStyle: { color: '#ff9f40' },
lineStyle: { color: '#ff9f40' },
symbol: 'circle',
symbolSize: 6,
},
{
name: '实时威胁B',
data: [0, 100, 200, 150, 300, 350, 400, 450, 500],
type: 'line',
itemStyle: { color: '#36a2eb' },
lineStyle: { color: '#36a2eb' },
symbol: 'circle',
symbolSize: 6,
},
],
});
const pieOption = reactive({
tooltip: { show: true, trigger: 'item' },
series: [
{
title: '态势感知',
type: 'pie',
radius: ['40%', '70%'],
data: [
{ name: '态势感知', value: 34, itemStyle: { color: '#ff6384' } },
{ name: '实时威胁', value: 33, itemStyle: { color: '#36a2eb' } },
{ name: '其他', value: 33, itemStyle: { color: '#ffce56' } },
],
label: {
show: true,
formatter: '{b}: {d}%',
position: 'center',
},
labelLine: { show: true },
},
],
});
const route = useRoute();
const router = useRouter();
@@ -147,6 +328,84 @@ const currentWarning = ref();
const { isLogin } = useDiscussGetUserInfo();
const homeSearch = ref(null);
const dropdownWidth = ref(0);
import aqts from '@/assets/imgs/jyh/menu/风险预警.png'
import aqqb from '@/assets/imgs/jyh/menu/许可证检测.png'
import aqjc from '@/assets/imgs/jyh/menu/已知漏洞检测.png'
import aqzk from '@/assets/imgs/jyh/menu/可信治理.png'
import kxrj from '@/assets/imgs/jyh/menu/可信软件.png'
// 顶部功能按钮数据
const topButtons = ref([
{ name: '安全智库', icon: aqzk },
{ name: '安全检测', icon: aqjc },
{ name: '安全情报', icon: aqqb},
{ name: '安全态势', icon: aqts },
{ name: '智能引擎', icon: kxrj },
]);
// 按钮点击事件处理
const handleButtonClick = (item) => {
// 路由映射关系：按钮名称 -> 对应路由name或新页面地址
const routeMap = {
'安全智库': 'Search', // 对应name: 'Search'的路由
'安全检测': 'TestingCenter', // 对应name: 'TestingCenter'的路由
'安全情报': 'Insights', // 对应name: 'Insights'的路由
'智能引擎': 'aihome', // 对应name: 'aihome'的路由
'安全态势': 'https://example.com/security-situation' // 安全态势大屏地址（替换为实际地址）
};
const target = routeMap[item.name];
if (!target) return;
// 区分路由跳转和新页面打开
if (item.name === '安全态势') {
// 安全态势：打开新页面
window.open(target, '_blank');
} else {
// 其他按钮：路由跳转
router.push({ name: target });
}
};
import znjc from '@/assets/imgs/jyh/menu/AI大模型能力.png'
import aiLogo1 from '@/assets/imgs/jyh/ai/aiLogo1.png'
import vulnerabilityForewarning from '@/assets/imgs/jyh/menu/vulnerabilityForewarning.png'
// AI+安全核心能力数据
const aiCapabilities = ref([
{
title: '智能检测引擎',
rate: '（覆盖99.9%样本率）',
desc: '智能检测引擎具备对各类文件、恶意软件的高精度识别能力。',
icon: znjc
},
{
title: '行为分析模型',
rate: '（实时响应<1秒）',
desc: '深度行为分析模型可实时识别异常行为，精准定位威胁根源。',
icon: aiLogo1
},
{
title: '自动溯源系统',
rate: '（覆盖99.9%）',
desc: '自动溯源系统可快速定位威胁来源，助力威胁事件全链路分析。',
icon: vulnerabilityForewarning
},
]);
// 团队成员数据
const teamMembers = ref([
{ name: '主理', title: '安全专家/负责人' },
{ name: '顾问', title: '企业安全专家' },
{ name: '架构', title: '技术架构专家' },
]);
// 最新动态数据
const latestNews = ref([
{ year: '2024', title: '中国头安全实验室等合作的智能决策模型授奖', desc: '智能决策模型在多领域安全决策中表现卓越，获行业权威奖项。', more: true },
{ year: '2023', title: '智能检测引擎从一定论到再超越的与证明', desc: '2024年深度优化检测，在极端场景中达99.9%准确率，性能、智能、召回率再升级。', more: false },
{ year: '2023', title: '新闻网常务委员：邻区区委交换稿与证明', desc: '网络空间安全会议上，邻区、外防负责人、专家会首席等共论，包含新成果实证。', more: false },
]);
const tagMap = {
critical: {
text: '致命',
@@ -332,8 +591,8 @@ getNoticeList();
.home-content {
font-size: 14px;
height: 50%;
width: 50%;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-self: center;
@@ -523,12 +782,165 @@ getNoticeList();
:deep(.devui-timeline-item-data-right) {
width: 80%;
}
</style>
<style>
.warning-modal {
.devui-modal__body {
padding: 0px !important;
// 页面容器基础样式
.bg-gradient-to-b {
background-size: cover;
background-repeat: no-repeat;
}
// 卡片通用样式
.bg-white {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
// 文本样式
.text-lg {
font-size: 18px;
}
.text-sm {
font-size: 14px;
}
.text-xs {
font-size: 12px;
}
.font-bold {
font-weight: 600;
}
.font-medium {
font-weight: 500;
}
// 间距与布局
.mb-8 {
margin-bottom: 24px;
}
.p-4 {
padding: 16px;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.dashboard-page {
//padding: 20px;
////background: #fff;
//border-radius: 8px;
//box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
.chart-card {
padding: 20px;
//background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.section-title {
font-size: 18px;
font-weight: 600;
color: #303133;
margin-bottom: 16px;
display: flex;
justify-content: space-between;
align-items: center;
a {
font-weight: 400;
}
.more-link {
font-size: 14px;
color: #409eff;
text-decoration: none;
}
}
.main-row {
margin-bottom: 20px;
}
.data-card {
//background: #fff;
//border-radius: 8px;
//padding: 16px;
//box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
.data-item {
margin-bottom: 24px;
background: #f1f5fc;
border-radius: 8px;
padding: 16px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
.data-label {
font-size: 14px;
color: #606266;
display: block;
margin-bottom: 8px;
}
.data-value {
font-size: 24px;
font-weight: 600;
color: #303133;
margin-right: 16px;
}
.data-value.danger {
color: #f56c6c;
}
.data-desc {
font-size: 12px;
color: #909399;
float: right;
}
}
}
.ai-capability-row {
height: calc(100% - 46px);
.devui-col {
height: 100%;
}
.capability-card {
height: 100%;
background: #fff;
border-radius: 8px;
padding: 12px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
text-align: center;
.capability-icon {
text-align: center;
margin-bottom: 12px;
img {
display: inline-block;
width: 32px;
}
}
.capability-title {
font-size: 16px;
font-weight: 500;
color: #303133;
margin-bottom: 8px;
}
.capability-desc {
font-size: 14px;
color: #606266;
line-height: 1.5;
}
}
}
}
.top-btn {
display: flex;
justify-content: center;
align-items: center;
}
</style>