dashboard/src/components/ResearchDetail.vue
2025-06-09 14:59:40 +08:00

315 lines
6.9 KiB
Vue

<template>
<div class="detail-page">
<!-- 顶部导航栏 -->
<header class="dashboard-header">
<div class="logo">
<img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
<img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
<h1 class="main-title">
<div class="title-line"></div>
<span class="title-text">智慧科研评估系统</span>
<div class="title-line"></div>
</h1>
</div>
</header>
<div class="page-header">
<button class="back-button" @click="goBack">
<el-icon><back /></el-icon> 返回仪表盘
</button>
<h1>科研成果详情</h1>
</div>
<div class="page-content">
<!-- 筛选条件 -->
<div class="filter-panel">
<h2>筛选条件</h2>
<div class="filter-form">
<div class="filter-row">
<div class="filter-item">
<label>时间范围</label>
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</div>
<div class="filter-item">
<label>成果类型</label>
<el-select v-model="researchType">
<el-option label="全部" value="" />
<el-option label="论文" value="paper" />
<el-option label="专利" value="patent" />
</el-select>
</div>
<div class="filter-item">
<label>学院</label>
<el-select v-model="college">
<el-option label="全部" value="" />
<el-option label="计算机学院" value="cs" />
<el-option label="材料学院" value="material" />
</el-select>
</div>
</div>
<div class="filter-buttons">
<el-button type="primary">应用筛选</el-button>
<el-button>重置</el-button>
</div>
</div>
</div>
<!-- 数据表格 -->
<div class="table-panel">
<h2>研究成果列表</h2>
<el-table :data="tableData" style="width: 100%" border>
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="title" label="标题" min-width="250" />
<el-table-column prop="author" label="作者" width="150" />
<el-table-column prop="type" label="类型" width="100" />
<el-table-column prop="journal" label="期刊/来源" width="180" />
<el-table-column prop="date" label="发表日期" width="120" />
<el-table-column prop="citations" label="引用次数" width="100" />
<el-table-column label="操作" width="120">
<template #default>
<el-button size="small">查看</el-button>
<el-button size="small" type="primary">导出</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
layout="prev, pager, next"
:total="100"
/>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
// 跳转回仪表盘
const emit = defineEmits(['back-to-dashboard', 'logout'])
const goBack = () => {
emit('back-to-dashboard')
}
// 处理Logo点击事件
const handleLogoClick = () => {
emit('logout')
}
// 筛选条件
const dateRange = ref([])
const researchType = ref('')
const college = ref('')
// 模拟表格数据
const tableData = ref([
{
id: 1,
title: '基于深度学习的图像识别算法研究',
author: '张三, 李四',
type: '论文',
journal: 'IEEE Transactions on Image Processing',
date: '2024-10-15',
citations: 25
},
{
id: 2,
title: '新型高效电池材料的合成与表征',
author: '王五, 赵六',
type: '论文',
journal: 'Advanced Materials',
date: '2024-09-22',
citations: 18
},
{
id: 3,
title: '一种新型智能机器人控制方法',
author: '张三, 王五',
type: '专利',
journal: '国家知识产权局',
date: '2024-08-10',
citations: 0
},
{
id: 4,
title: '高性能计算在流体力学中的应用',
author: '李四, 赵六',
type: '论文',
journal: 'Journal of Computational Physics',
date: '2024-07-05',
citations: 12
},
{
id: 5,
title: '纳米材料在催化领域的应用研究',
author: '王五, 张三',
type: '论文',
journal: 'ACS Catalysis',
date: '2024-06-18',
citations: 30
}
])
</script>
<style scoped>
.detail-page {
width: 100%;
min-height: 100vh;
background-color: #0c1633;
color: white;
}
.dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
background-color: #1a2b56;
padding: 0 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.logo {
display: flex;
align-items: center;
}
.logo img {
height: 40px;
margin-right: 10px;
}
.main-title {
display: flex;
align-items: center;
margin: 0;
font-size: 18px;
font-weight: bold;
}
.title-line {
width: 20px;
height: 2px;
background-color: #fff;
margin: 0 10px;
}
.title-text {
color: #fff;
}
.page-header {
display: flex;
align-items: center;
padding: 15px 20px;
background-color: #1a2b56;
}
.back-button {
display: flex;
align-items: center;
background: none;
border: none;
color: #4080ff;
cursor: pointer;
margin-right: 20px;
font-size: 14px;
}
.page-header h1 {
margin: 0;
font-size: 20px;
}
.page-content {
padding: 20px;
}
.filter-panel, .table-panel {
background-color: #1a2b56;
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
}
.filter-panel h2, .table-panel h2 {
margin-top: 0;
margin-bottom: 20px;
font-size: 18px;
}
.filter-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.filter-item {
flex: 1;
}
.filter-item label {
display: block;
margin-bottom: 5px;
}
.filter-buttons {
display: flex;
gap: 10px;
}
.pagination {
margin-top: 20px;
text-align: right;
}
/* Element Plus 暗色主题定制 */
:deep(.el-input__wrapper),
:deep(.el-select .el-input__wrapper) {
background-color: #2a3b66;
box-shadow: none;
}
:deep(.el-input__inner) {
color: white;
}
:deep(.el-table) {
background-color: transparent;
color: white;
}
:deep(.el-table th.el-table__cell) {
background-color: #2a3b66;
color: white;
}
:deep(.el-table tr) {
background-color: #1a2b56;
}
:deep(.el-table td.el-table__cell) {
color: white;
border-bottom-color: rgba(255, 255, 255, 0.1);
}
:deep(.el-button) {
border: 1px solid #4080ff;
color: #4080ff;
background: transparent;
}
:deep(.el-button--primary) {
background-color: #4080ff;
color: white;
}
</style>