<template>
|
<div class="warehouse-dashboard">
|
<!-- 导航栏 -->
|
<nav class="navbar">
|
<div class="nav-container">
|
<h1 class="logo">仓库调度系统</h1>
|
<ul class="nav-links">
|
<li
|
v-for="(warehouse, index) in warehouses"
|
:key="index"
|
:class="{ active: activeWarehouse === index }"
|
@click="switchWarehouse(index)"
|
>
|
{{ warehouse.name }}
|
</li>
|
</ul>
|
</div>
|
</nav>
|
|
<!-- 主内容区 - 动态渲染选中的仓库页面 -->
|
<main class="content-area">
|
<component :is="currentComponent" class="warehouse-content"></component>
|
</main>
|
</div>
|
</template>
|
|
<script>
|
import { ref, computed } from 'vue';
|
// 导入各个仓库的组件
|
import BoardWarehouse from './deviceMonitoring/BoardWarehouse.vue';
|
import TestFrameWarehouse from './deviceMonitoring/TestFrameWarehouse.vue';
|
import SolderMaskWarehouse from './deviceMonitoring/SolderMaskWarehouse.vue';
|
import PpWarehouse from './deviceMonitoring/PpWarehouse.vue';
|
import InkWarehouse from './deviceMonitoring/InkWarehouse.vue';
|
import AuxiliaryWarehouse from './deviceMonitoring/AuxiliaryWarehouse.vue';
|
import DryFilmWarehouse from './deviceMonitoring/DryFilmWarehouse.vue';
|
|
export default {
|
setup() {
|
// 定义仓库列表
|
const warehouses = [
|
{ name: '板材仓', component: BoardWarehouse },
|
{ name: '测试架仓', component: TestFrameWarehouse },
|
{ name: '阻焊仓', component: SolderMaskWarehouse },
|
{ name: 'PP仓', component: PpWarehouse },
|
{ name: '油墨仓', component: InkWarehouse },
|
{ name: '辅料仓', component: AuxiliaryWarehouse },
|
{ name: '成品仓', component: BoardWarehouse },
|
{ name: '干膜仓', component: DryFilmWarehouse},
|
];
|
|
// 当前选中的仓库索引
|
const activeWarehouse = ref(0);
|
|
// 切换仓库
|
const switchWarehouse = (index) => {
|
activeWarehouse.value = index;
|
};
|
|
// 根据选中的仓库获取当前要渲染的组件
|
const currentComponent = computed(() => {
|
return warehouses[activeWarehouse.value].component;
|
});
|
|
return {
|
warehouses,
|
activeWarehouse,
|
switchWarehouse,
|
currentComponent
|
};
|
}
|
};
|
</script>
|
|
<style scoped>
|
.warehouse-dashboard {
|
display: flex;
|
flex-direction: column;
|
min-height: 100vh;
|
}
|
|
.navbar {
|
background-color: #2c3e50;
|
color: white;
|
padding: 0 20px;
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
}
|
|
.nav-container {
|
max-width: 1200px;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 60px;
|
}
|
|
.logo {
|
margin: 0;
|
font-size: 1.5rem;
|
font-weight: 600;
|
}
|
|
.nav-links {
|
display: flex;
|
list-style: none;
|
margin: 0;
|
padding: 0;
|
gap: 1px;
|
}
|
|
.nav-links li {
|
padding: 0 15px;
|
height: 60px;
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
background-color: #34495e;
|
}
|
|
.nav-links li:hover {
|
background-color: #3d5a7c;
|
}
|
|
.nav-links li.active {
|
background-color: #3498db;
|
font-weight: 500;
|
box-shadow: inset 0 -3px 0 #2980b9;
|
}
|
|
.content-area {
|
flex: 1;
|
padding: 20px;
|
background-color: #f5f7fa;
|
}
|
|
.warehouse-content {
|
background-color: white;
|
border-radius: 8px;
|
padding: 20px;
|
min-height: calc(100vh - 100px);
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
}
|
</style>
|
