<template>
|
<div class="multi-system-dashboard">
|
<!-- 头部 -->
|
<header>
|
<div class="header-container">
|
<div class="system-title">欢迎进入多体系建设信息化系统</div>
|
|
<!-- <div class="admin-info" @click="handleAdminClick" ref="adminInfoRef">-->
|
<!-- <div class="admin-icon">-->
|
<!-- <i class="fas fa-user-cog"></i>-->
|
<!-- </div>-->
|
<!-- <div class="admin-details">-->
|
<!-- <div class="admin-name">admin</div>-->
|
<!-- <div class="admin-role">系统管理员</div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
|
<div class="admin-info">
|
<div class="admin-icon">
|
<img src="../assets/images/avator.png" class="user-avatar" />
|
</div>
|
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
|
<div class="admin-details">
|
<div class="admin-name">{{userName}}</div>
|
<div class="admin-role">{{userTypeName}}</div>
|
</div>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item command="password">
|
<span>修改密码</span>
|
</el-dropdown-item>
|
<el-dropdown-item divided command="logout">
|
<span>退出登录</span>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</div>
|
</div>
|
</header>
|
|
<!-- 主体内容 -->
|
<div class="menu-container">
|
<section class="welcome-section">
|
<div class="welcome-decoration"></div>
|
<h1 class="welcome-title">多体系建设信息化系统</h1>
|
<p class="welcome-subtitle">
|
本系统集成多个国际与国内管理体系标准，为企业提供全面、协同、高效的信息化管理平台。通过统一门户实现质量管理、信息安全、职业健康安全、项目管理等多体系的无缝集成与协同运作，助力企业标准化、数字化、智能化发展。
|
</p>
|
</section>
|
|
<section class="systems-grid">
|
<!-- 使用v-for循环渲染系统卡片 -->
|
<div
|
v-for="(system, index) in systems"
|
:key="system.id"
|
class="system-card"
|
:class="`card-${index + 1}`"
|
@click="handleSystemLinkClick(system.id)"
|
@mouseenter="handleCardHover(system, true)"
|
@mouseleave="handleCardHover(system, false)"
|
ref="cardRefs"
|
>
|
<div class="card-decoration"></div>
|
<div class="system-header">
|
<div class="system-icon-container">
|
<div class="system-icon" ref="iconRefs">
|
<img :src="system.icon"/>
|
</div>
|
<h3 class="system-name">{{ system.name }}</h3>
|
</div>
|
</div>
|
<p class="system-desc">{{ system.description }}</p>
|
<a
|
href="#"
|
class="system-link"
|
@click.stop="handleSystemLinkClick(system.id)"
|
>
|
进入系统 <el-icon><Right /></el-icon>
|
</a>
|
</div>
|
</section>
|
</div>
|
|
<!-- 底部 -->
|
<footer>
|
<div class="footer-decoration"></div>
|
<div class="footer-container">
|
<div class="copyright-section">
|
<div class="copyright">
|
© 2025 多体系建设信息化系统 | 中国科学院苏州纳米技术与纳米仿生研究所 版权所有
|
</div>
|
<div class="version">版本号 V1.0.0</div>
|
</div>
|
</div>
|
</footer>
|
<user-dialog ref="reviewRef"></user-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, nextTick } from 'vue'
|
import {ElMessage, ElMessageBox} from "element-plus";
|
import {getToken, removeToken} from "@/utils/auth";
|
import userDialog from '@/views/build/conpanyFunctionConsult/staffManage/staffRegister/components/staffDialog.vue'
|
import shield from '@/assets/icons/shield-alt.png'
|
import lock from '@/assets/icons/lock.png'
|
import hat from '@/assets/icons/hard-hat.png'
|
import diagram from '@/assets/icons/project-diagram.png'
|
import clipboard from '@/assets/icons/clipboard-check.png'
|
import chartLine from '@/assets/icons/chart-line.png'
|
|
import Cookies from "js-cookie";
|
import useUserStore from "@/store/modules/user";
|
import {useRouter} from "vue-router";
|
|
// 响应式数据
|
const systems = ref([
|
{
|
id: 1,
|
name: '国军标9001C质量管理体系',
|
description: '基于GJB9001C-2017标准，专为军工产品研制、生产、维修和服务单位设计。',
|
icon: shield,
|
color: '#1a56db'
|
},
|
{
|
id: 2,
|
name: 'ISO27001信息安全体系',
|
description: '遵循ISO/IEC 27001:2022标准，帮助企业建立、实施、维护和持续改进信息安全管理体系。',
|
icon: lock,
|
color: '#0d9488'
|
},
|
{
|
id: 3,
|
name: 'ISO45001安全体系',
|
description: '基于ISO45001:2018标准，系统化管理职业健康安全风险，预防工伤和健康损害。',
|
icon: hat,
|
color: '#10b981'
|
},
|
{
|
id: 4,
|
name: '项目管理控制',
|
description: '集成PMBOK和PRINCE2最佳实践的项目管理平台，支持项目全生命周期管理。',
|
icon: diagram,
|
color: '#7c3aed'
|
},
|
{
|
id: 5,
|
name: '承制评价系统',
|
description: '针对承制单位资格管理的综合系统，确保承制单位持续满足军用产品承制要求。',
|
icon: clipboard,
|
color: '#f97316'
|
},
|
{
|
id: 6,
|
name: '新体系评价系统',
|
description: '面向新兴管理体系标准的评估与导入平台，支持新标准的适应性评估和实施规划。',
|
icon: chartLine,
|
color: '#ef4444'
|
}
|
])
|
|
// Refs
|
const adminInfoRef = ref(null)
|
const cardRefs = ref([])
|
const iconRefs = ref([])
|
const router = useRouter()
|
const route = useRoute();
|
const reviewRef = ref();
|
const userInfo = ref();
|
const userName = ref('')
|
const userTypeName = ref('')
|
// 方法
|
const handleAdminClick = () => {
|
if (adminInfoRef.value) {
|
adminInfoRef.value.style.transform = 'scale(0.94)'
|
setTimeout(() => {
|
if (adminInfoRef.value) {
|
adminInfoRef.value.style.transform = ''
|
}
|
alert('管理员菜单已打开')
|
}, 150)
|
}
|
}
|
|
function handleCommand(command) {
|
switch (command) {
|
case "info":
|
getInfo();
|
break;
|
case "logout":
|
logout();
|
break;
|
case "password":
|
editPsd();
|
break;
|
default:
|
break;
|
}
|
}
|
|
const handleSystemLinkClick = (systemId) => {
|
if(systemId == 1){
|
router.push({ path: "/menuIndex"});
|
}else{
|
ElMessage.warning('系统正在开发中...')
|
}
|
}
|
|
function getInfo() {
|
reviewRef.value.openDialog('view',userInfo.value)
|
}
|
function editPsd() {
|
reviewRef.value.openDialog('pwd',userInfo.value)
|
}
|
// 退出登录
|
function logout() {
|
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
removeToken()
|
location.href = '/homePage';
|
|
}).catch(() => { });
|
}
|
|
const handleCardHover = (system, isEnter) => {
|
const cardIndex = systems.value.findIndex(s => s.id === system.id)
|
if (cardIndex !== -1 && iconRefs.value[cardIndex]) {
|
iconRefs.value[cardIndex].style.transform = isEnter ? 'scale(1.04)' : 'scale(1)'
|
iconRefs.value[cardIndex].style.transition = 'transform 0.3s ease'
|
}
|
}
|
|
// 页面加载后计算高度并调整
|
const adjustLayout = () => {
|
const bodyHeight = document.body.scrollHeight
|
const windowHeight = window.innerHeight
|
|
// 获取DOM元素
|
const welcomeSection = document.querySelector('.welcome-section')
|
const systemsGrid = document.querySelector('.systems-grid')
|
const footer = document.querySelector('footer')
|
|
// 如果内容超过屏幕高度，进行微调
|
if (bodyHeight > windowHeight) {
|
if (welcomeSection) welcomeSection.style.marginBottom = '1.5rem'
|
if (systemsGrid) {
|
systemsGrid.style.gap = '1.2rem'
|
systemsGrid.style.marginBottom = '2rem'
|
}
|
if (footer) footer.style.padding = '1.2rem 1.8rem'
|
if (welcomeSection) welcomeSection.style.padding = '1.8rem 1.5rem'
|
}
|
}
|
|
// 生命周期钩子
|
onMounted(() => {
|
if(getToken()){
|
userInfo.value = JSON.parse(Cookies.get('userInfo'))
|
userName.value = userInfo.value.username
|
userTypeName.value = userInfo.value.userType == 0 ? '系统管理员' : (userInfo.value.userType == 1 || userInfo.value.userType == 2 || userInfo.value.userType == 3) ? '企业用户' :userInfo.value.userType == 6 ? '企业管理员' :userInfo.value.userType == 4 ? '其他' : '学员'
|
}
|
|
const userStore = useUserStore()
|
userStore.roles = []
|
// 等待DOM更新完成后执行
|
nextTick(() => {
|
adjustLayout()
|
|
// 渐显效果
|
document.body.style.opacity = '0'
|
document.body.style.transition = 'opacity 0.5s ease'
|
|
setTimeout(() => {
|
document.body.style.opacity = '1'
|
}, 100)
|
})
|
|
// 监听窗口大小变化
|
window.addEventListener('resize', adjustLayout)
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
body {
|
background-color: #f8fafc;
|
color: #1f2937;
|
min-height: 100vh;
|
display: flex;
|
flex-direction: column;
|
overflow-y: auto;
|
}
|
|
.multi-system-dashboard{
|
width: 100%;
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.menu-container {
|
flex: 1;
|
overflow-y: auto;
|
max-width: 1600px;
|
width: 100%;
|
margin: 1rem auto;
|
padding: 0 1.8rem;
|
scrollbar-width: none; /* Firefox */
|
-ms-overflow-style: none; /* IE and Edge */
|
}
|
}
|
|
/* 头部样式 - 更加紧凑 */
|
header {
|
width: 100%;
|
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
|
color: white;
|
padding: 0.8rem 1.8rem;
|
box-shadow: 0 3px 10px rgba(30, 58, 138, 0.12);
|
}
|
|
.header-container {
|
max-width: 1600px;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.system-title {
|
font-size: 1.5rem;
|
font-weight: 700;
|
letter-spacing: 0.2px;
|
}
|
|
.admin-info {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
background: rgba(255, 255, 255, 0.15);
|
padding: 8px 16px;
|
border-radius: 10px;
|
backdrop-filter: blur(4px);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
transition: all 0.3s ease;
|
cursor: pointer;
|
}
|
|
.admin-info:hover {
|
background: rgba(255, 255, 255, 0.25);
|
}
|
|
.admin-icon {
|
background: linear-gradient(135deg, #f59e0b, #f97316);
|
width: 36px;
|
height: 36px;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.admin-details {
|
display: flex;
|
flex-direction: column;
|
color: #fff;
|
}
|
|
.admin-name {
|
font-weight: 600;
|
font-size: 0.95rem;
|
margin-bottom: 0.2rem;
|
}
|
|
.admin-role {
|
font-size: 0.75rem;
|
opacity: 0.9;
|
}
|
|
|
.welcome-section {
|
position: relative;
|
text-align: center;
|
margin-bottom: 1rem;
|
padding: 2rem;
|
background: white;
|
border-radius: 16px;
|
box-shadow: 0 5px 15px -4px rgba(0, 0, 0, 0.07);
|
overflow: hidden;
|
border: 1px solid rgba(226, 232, 240, 0.8);
|
}
|
|
.welcome-decoration {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 3px;
|
background: linear-gradient(90deg,
|
#1a56db,
|
#0d9488,
|
#7c3aed,
|
#f97316
|
);
|
}
|
|
.welcome-title {
|
font-size: 1.5rem;
|
margin: 0 0 0.8rem;
|
font-weight: 800;
|
color: #1a56db;
|
}
|
|
.welcome-subtitle {
|
font-size: 0.95rem;
|
color: #4b5563;
|
max-width: 900px;
|
margin: 0 auto;
|
line-height: 1.5;
|
font-weight: 400;
|
}
|
|
/* 系统入口网格 - 更加紧凑 */
|
.systems-grid {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 1rem;
|
margin-bottom: 2.5rem;
|
width: 100%;
|
}
|
|
/* 为每个系统卡片分配不同的颜色主题 */
|
.system-card.card-1 { --card-color: #1a56db; }
|
.system-card.card-2 { --card-color: #0d9488; }
|
.system-card.card-3 { --card-color: #10b981; }
|
.system-card.card-4 { --card-color: #7c3aed; }
|
.system-card.card-5 { --card-color: #f97316; }
|
.system-card.card-6 { --card-color: #ef4444; }
|
|
.system-card {
|
background: white;
|
border-radius: 14px;
|
overflow: hidden;
|
box-shadow: 0 5px 15px -4px rgba(0, 0, 0, 0.07);
|
transition: all 0.3s ease;
|
cursor: pointer;
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
position: relative;
|
width: 100%;
|
}
|
|
.system-card:hover {
|
transform: translateY(-4px);
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
}
|
|
.card-decoration {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 3px;
|
background: linear-gradient(90deg,
|
var(--card-color),
|
color-mix(in srgb, var(--card-color) 70%, white)
|
);
|
}
|
|
.system-header {
|
padding: 0.8rem 1.5rem;
|
position: relative;
|
}
|
|
.system-icon-container {
|
display: flex;
|
align-items: center;
|
gap: 14px;
|
|
}
|
|
.system-icon {
|
background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 80%, white));
|
width: 48px;
|
height: 48px;
|
border-radius: 12px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: white;
|
img{
|
width: 24px;
|
height: 24px;
|
}
|
}
|
|
.system-name {
|
font-size: 1.25rem;
|
font-weight: 700;
|
color: var(--card-color);
|
flex-grow: 1;
|
line-height: 1.25;
|
}
|
|
.system-desc {
|
padding: 0 1.5rem 1.2rem;
|
flex-grow: 1;
|
color: #4b5563;
|
line-height: 1.5;
|
font-size: 0.9rem;
|
margin: 0;
|
}
|
|
.system-link {
|
display: block;
|
padding: 0.8rem;
|
text-align: center;
|
background: linear-gradient(90deg,
|
var(--card-color),
|
color-mix(in srgb, var(--card-color) 80%, white)
|
);
|
color: white;
|
font-weight: 600;
|
text-decoration: none;
|
transition: all 0.3s ease;
|
font-size: 0.95rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
gap: 7px;
|
}
|
|
.system-link:hover {
|
background: linear-gradient(90deg,
|
color-mix(in srgb, var(--card-color) 90%, black),
|
var(--card-color)
|
);
|
}
|
|
/* 底部样式 - 更加紧凑 */
|
footer {
|
width: 100%;
|
height: 100px;
|
background: linear-gradient(90deg, #111827 0%, #1f2937 100%);
|
color: white;
|
padding: 1.5rem 1.8rem;
|
margin-top: auto;
|
position: relative;
|
}
|
|
.footer-decoration {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 2px;
|
background: linear-gradient(90deg,
|
#1a56db,
|
#0d9488,
|
#7c3aed
|
);
|
}
|
|
.footer-container {
|
max-width: 1600px;
|
margin: 0 auto;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 0.8rem;
|
}
|
|
.copyright-section {
|
text-align: center;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
gap: 0.4rem;
|
}
|
|
.copyright {
|
font-size: 0.9rem;
|
color: #d1d5db;
|
line-height: 1.3;
|
}
|
|
.version {
|
display: inline-block;
|
background: rgba(59, 130, 246, 0.2);
|
color: #60a5fa;
|
padding: 4px 12px;
|
border-radius: 16px;
|
font-size: 0.85rem;
|
font-weight: 600;
|
letter-spacing: 0.2px;
|
border: 1px solid rgba(96, 165, 250, 0.3);
|
}
|
|
/* 响应式调整 */
|
@media (max-width: 1300px) {
|
.systems-grid {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
}
|
|
@media (max-width: 900px) {
|
header {
|
padding: 0.7rem 1.5rem;
|
}
|
|
.system-title {
|
font-size: 1.4rem;
|
}
|
|
.menu-container {
|
padding: 0 1.5rem;
|
margin: 0.8rem auto;
|
}
|
|
.welcome-section {
|
padding: 1.5rem;
|
margin-bottom: 0.8rem;
|
}
|
|
.welcome-title {
|
font-size: 1.3rem;
|
}
|
|
.welcome-subtitle {
|
font-size: 0.9rem;
|
}
|
|
.systems-grid {
|
gap: 1rem;
|
margin-bottom: 2rem;
|
}
|
|
.system-header {
|
padding: 0.6rem 1.3rem;
|
}
|
|
.system-desc {
|
padding: 0 1.3rem 1rem;
|
font-size: 0.85rem;
|
}
|
|
.system-link {
|
padding: 0.7rem;
|
}
|
}
|
|
@media (max-width: 700px) {
|
.systems-grid {
|
grid-template-columns: 1fr;
|
}
|
|
.header-container {
|
flex-direction: column;
|
gap: 0.8rem;
|
text-align: center;
|
}
|
|
.admin-info {
|
padding: 7px 14px;
|
}
|
|
.welcome-title {
|
font-size: 1.2rem;
|
}
|
|
.system-name {
|
font-size: 1.2rem;
|
}
|
|
footer {
|
padding: 1.2rem 1.5rem;
|
}
|
}
|
|
@media (max-width: 480px) {
|
.menu-container {
|
padding: 0 1.2rem;
|
}
|
|
.welcome-section {
|
padding: 1rem 1.2rem;
|
}
|
|
.welcome-title {
|
font-size: 1rem;
|
}
|
|
.system-header {
|
padding: 0.5rem 1.2rem;
|
}
|
|
.system-icon {
|
width: 42px;
|
height: 42px;
|
}
|
|
.system-name {
|
font-size: 1.15rem;
|
}
|
|
.copyright {
|
font-size: 0.85rem;
|
}
|
|
.version {
|
font-size: 0.8rem;
|
}
|
}
|
|
/* 确保在一个屏幕内显示 */
|
@media (min-height: 900px) {
|
.menu-container {
|
margin: 1rem auto;
|
}
|
|
.welcome-section {
|
margin-bottom: 1rem;
|
padding: 2rem;
|
}
|
|
.systems-grid {
|
gap: 1rem;
|
margin-bottom: 3rem;
|
}
|
}
|
</style>
|
