fix: 1 修改大屏标题 不同分辨率下避免遮挡问题 2、智慧助手增加可以上下调节尺寸功能
This commit is contained in:
parent
8ecaf99a9a
commit
b87baf1e6b
@ -4,28 +4,13 @@
|
|||||||
<!-- 顶部导航栏 -->
|
<!-- 顶部导航栏 -->
|
||||||
<header class="dashboard-header">
|
<header class="dashboard-header">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
|
<img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" />
|
||||||
<img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
|
<img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" />
|
||||||
<h1 class="main-title">
|
|
||||||
<div class="title-line"></div>
|
|
||||||
<span class="title-text">智慧科研评估系统</span>
|
|
||||||
<div class="title-line"></div>
|
|
||||||
</h1>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="year-selector">
|
<h1 class="main-title">
|
||||||
<el-dropdown>
|
<span class="title-text">智慧科研评估系统</span>
|
||||||
<span class="el-dropdown-link">
|
</h1>
|
||||||
2025 <el-icon class="el-icon--right"><arrow-down /></el-icon>
|
<div class="header-placeholder"></div> <!-- 用于平衡布局的占位元素 -->
|
||||||
</span>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item>2023</el-dropdown-item>
|
|
||||||
<el-dropdown-item>2024</el-dropdown-item>
|
|
||||||
<el-dropdown-item>2025</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</div> -->
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- 仪表盘内容 - 三列布局 -->
|
<!-- 仪表盘内容 - 三列布局 -->
|
||||||
@ -126,10 +111,21 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 智能助手 -->
|
<!-- 智能助手 -->
|
||||||
<div class="dashboard-panel" style="flex: 4 1 0;">
|
<div class="dashboard-panel" ref="assistantPanel" style="flex: 4 1 0; position: relative; z-index: 111111; ">
|
||||||
<h2>智能助手</h2>
|
<div class="panel-header">
|
||||||
|
<div class="drag-handle" @mousedown="startResize">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M9 5H7V7H9V5Z" fill="currentColor"/>
|
||||||
|
<path d="M9 11H7V13H9V11Z" fill="currentColor"/>
|
||||||
|
<path d="M9 17H7V19H9V17Z" fill="currentColor"/>
|
||||||
|
<path d="M15 5H13V7H15V5Z" fill="currentColor"/>
|
||||||
|
<path d="M15 11H13V13H15V11Z" fill="currentColor"/>
|
||||||
|
<path d="M15 17H13V19H15V17Z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h2>智能助手</h2>
|
||||||
|
</div>
|
||||||
<div class="assistant-container">
|
<div class="assistant-container">
|
||||||
<div class="assistant-header">
|
<div class="assistant-header">
|
||||||
<img :src="dashboardData2?.logoUrl" class="assistant-avatar" />
|
<img :src="dashboardData2?.logoUrl" class="assistant-avatar" />
|
||||||
@ -141,7 +137,7 @@
|
|||||||
<div v-html="dashboardData2?.prompt"></div>
|
<div v-html="dashboardData2?.prompt"></div>
|
||||||
</div>
|
</div>
|
||||||
<div v-for="(message, index) in chatMessages" :key="index"
|
<div v-for="(message, index) in chatMessages" :key="index"
|
||||||
:class="['message', message.role === 'user' ? 'user-message' : 'assistant-message']">
|
:class="['message', message.role === 'user' ? 'user-message' : 'assistant-message']">
|
||||||
<div v-html="message.content"></div>
|
<div v-html="message.content"></div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isLoading" class="assistant-message loading-message">
|
<div v-if="isLoading" class="assistant-message loading-message">
|
||||||
@ -213,6 +209,65 @@ const awardsChartRef = ref(null)
|
|||||||
const fundingChartRef = ref(null)
|
const fundingChartRef = ref(null)
|
||||||
const teacherServiceChartRef = ref(null) // 新增教师服务图表DOM引用
|
const teacherServiceChartRef = ref(null) // 新增教师服务图表DOM引用
|
||||||
|
|
||||||
|
// 添加ref和响应式数据
|
||||||
|
const assistantPanel = ref(null)
|
||||||
|
const isResizing = ref(false)
|
||||||
|
const startY = ref(0)
|
||||||
|
const startHeight = ref(0)
|
||||||
|
// 开始调整大小
|
||||||
|
// 保持原有的resize逻辑不变,但修改触发方式
|
||||||
|
const startResize = (e) => {
|
||||||
|
// 阻止事件冒泡,避免与面板内部交互冲突
|
||||||
|
e.stopPropagation()
|
||||||
|
|
||||||
|
isResizing.value = true
|
||||||
|
startY.value = e.clientY
|
||||||
|
startHeight.value = parseInt(document.defaultView.getComputedStyle(assistantPanel.value).height, 10)
|
||||||
|
|
||||||
|
// 添加鼠标移动和释放事件监听
|
||||||
|
document.addEventListener('mousemove', handleResize)
|
||||||
|
document.addEventListener('mouseup', stopResize)
|
||||||
|
|
||||||
|
// 设置光标样式
|
||||||
|
document.body.style.cursor = 'row-resize'
|
||||||
|
document.body.style.userSelect = 'none'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 其他resize相关函数保持不变
|
||||||
|
const handleResize = (e) => {
|
||||||
|
if (!isResizing.value) return
|
||||||
|
|
||||||
|
const dy = e.clientY - startY.value
|
||||||
|
const newHeight = startHeight.value - dy
|
||||||
|
|
||||||
|
// 限制最小和最大高度
|
||||||
|
const minHeight = 200 // 最小高度
|
||||||
|
const maxHeight = window.innerHeight - 100 // 最大高度
|
||||||
|
|
||||||
|
if (newHeight > minHeight && newHeight < maxHeight) {
|
||||||
|
assistantPanel.value.style.flex = 'none'
|
||||||
|
assistantPanel.value.style.height = `${newHeight}px`
|
||||||
|
|
||||||
|
// 调整后立即重新计算工程研究中心图表
|
||||||
|
nextTick(() => {
|
||||||
|
const labBarChart = echarts.getInstanceByDom(labBarChartRef.value)
|
||||||
|
const labLineChart = echarts.getInstanceByDom(labLineChartRef.value)
|
||||||
|
if (labBarChart) labBarChart.resize()
|
||||||
|
if (labLineChart) labLineChart.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const stopResize = () => {
|
||||||
|
isResizing.value = false
|
||||||
|
document.removeEventListener('mousemove', handleResize)
|
||||||
|
document.removeEventListener('mouseup', stopResize)
|
||||||
|
document.body.style.cursor = ''
|
||||||
|
document.body.style.userSelect = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 教研人才图表数据
|
// 教研人才图表数据
|
||||||
const researcherData = ref({
|
const researcherData = ref({
|
||||||
datax: [],
|
datax: [],
|
||||||
@ -1583,4 +1638,35 @@ onUnmounted(() => {
|
|||||||
padding: 15px 0;
|
padding: 15px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
/* 可拖动icon样式 */
|
||||||
|
.drag-handle {
|
||||||
|
cursor: move;
|
||||||
|
padding: 5px;
|
||||||
|
margin-right: 10px;
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
transition: all 0.2s;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-handle:hover {
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
background-color: rgba(73, 134, 255, 0.3);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-handle svg {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 调整面板头部样式 */
|
||||||
|
.assistant-panel .panel-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: move; /* 整个头部可拖动 */
|
||||||
|
user-select: none; /* 防止拖动时选中文本 */
|
||||||
|
}
|
||||||
</style>
|
</style>
|
@ -3,14 +3,13 @@
|
|||||||
<!-- 顶部导航栏 -->
|
<!-- 顶部导航栏 -->
|
||||||
<header class="dashboard-header">
|
<header class="dashboard-header">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
|
<img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" />
|
||||||
<img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
|
<img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" />
|
||||||
<h1 class="main-title">
|
|
||||||
<div class="title-line"></div>
|
|
||||||
<span class="title-text">智慧科研评估系统</span>
|
|
||||||
<div class="title-line"></div>
|
|
||||||
</h1>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h1 class="main-title">
|
||||||
|
<span class="title-text">智慧科研评估系统</span>
|
||||||
|
</h1>
|
||||||
|
<div class="header-placeholder"></div> <!-- 用于平衡布局的占位元素 -->
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- 主内容区域 -->
|
<!-- 主内容区域 -->
|
||||||
@ -664,7 +663,7 @@ watch(filteredLabs, () => {
|
|||||||
border: 2px solid rgba(38,47,80,0.3);
|
border: 2px solid rgba(38,47,80,0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-header {
|
/* .dashboard-header {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -702,7 +701,7 @@ watch(filteredLabs, () => {
|
|||||||
|
|
||||||
.title-text {
|
.title-text {
|
||||||
margin: 0 30px;
|
margin: 0 30px;
|
||||||
}
|
} */
|
||||||
|
|
||||||
.content-container {
|
.content-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -3,14 +3,13 @@
|
|||||||
<!-- 顶部导航栏 -->
|
<!-- 顶部导航栏 -->
|
||||||
<header class="dashboard-header">
|
<header class="dashboard-header">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
|
<img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" />
|
||||||
<img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
|
<img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" />
|
||||||
<h1 class="main-title">
|
|
||||||
<div class="title-line"></div>
|
|
||||||
<span class="title-text">智慧科研评估系统</span>
|
|
||||||
<div class="title-line"></div>
|
|
||||||
</h1>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h1 class="main-title">
|
||||||
|
<span class="title-text">智慧科研评估系统</span>
|
||||||
|
</h1>
|
||||||
|
<div class="header-placeholder"></div> <!-- 用于平衡布局的占位元素 -->
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- 主内容区域 -->
|
<!-- 主内容区域 -->
|
||||||
@ -418,7 +417,7 @@ const openTeacherDetail = (teacher) => {
|
|||||||
/* 防止页面整体出现滚动条 */
|
/* 防止页面整体出现滚动条 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-header {
|
/* .dashboard-header {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -456,7 +455,7 @@ const openTeacherDetail = (teacher) => {
|
|||||||
|
|
||||||
.title-text {
|
.title-text {
|
||||||
margin: 0 30px;
|
margin: 0 30px;
|
||||||
}
|
} */
|
||||||
|
|
||||||
.content-container {
|
.content-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -306,4 +306,109 @@ h2{
|
|||||||
.teacher-card {
|
.teacher-card {
|
||||||
min-height: 400px;
|
min-height: 400px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.dashboard-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
height: 80px;
|
||||||
|
background-color: rgba(12, 22, 51, 0.8);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
flex: 1; /* 占据可用空间 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo img {
|
||||||
|
height: 40px;
|
||||||
|
object-fit: contain;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
margin: 0;
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
white-space: nowrap;
|
||||||
|
/* background: linear-gradient(90deg, transparent, rgba(73, 134, 255, 0.3), transparent); */
|
||||||
|
padding: 0 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title::before,
|
||||||
|
.main-title::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 200px;
|
||||||
|
height: 4px;
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(73, 134, 255, 0.8));
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title::before {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title::after {
|
||||||
|
right: 0;
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-placeholder {
|
||||||
|
flex: 1; /* 与logo对称的占位元素 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式调整 */
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.dashboard-header {
|
||||||
|
height: 60px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo img {
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title {
|
||||||
|
font-size: 28px;
|
||||||
|
padding: 0 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title::before,
|
||||||
|
.main-title::after {
|
||||||
|
width: 150px;
|
||||||
|
height: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 响应式调整 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.dashboard-header {
|
||||||
|
height: 60px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo img {
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title {
|
||||||
|
font-size: 24px;
|
||||||
|
padding: 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title::before,
|
||||||
|
.main-title::after {
|
||||||
|
width: 30px;
|
||||||
|
height: 2px;
|
||||||
|
}
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user