165 lines
4.0 KiB
Vue
165 lines
4.0 KiB
Vue
<template>
|
|
<div class="acid-container">
|
|
<div class="acid-sidebar">
|
|
<el-menu
|
|
:default-active="activeMenu"
|
|
class="sidebar-menu"
|
|
@select="handleMenuSelect"
|
|
>
|
|
<el-menu-item index="inventory">
|
|
<i class="el-icon-box"></i>
|
|
<span slot="title">库存</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="processing">
|
|
<i class="el-icon-s-operation"></i>
|
|
<span slot="title">WIP</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="report">
|
|
<i class="el-icon-document"></i>
|
|
<span slot="title">报表</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="shipping">
|
|
<i class="el-icon-truck"></i>
|
|
<span slot="title">发货</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="quality">
|
|
<i class="el-icon-warning-outline"></i>
|
|
<span slot="title">品质</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="performance">
|
|
<i class="el-icon-coin"></i>
|
|
<span slot="title">实绩</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="rollConfig">
|
|
<i class="el-icon-s-tools"></i>
|
|
<span slot="title">配辊</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="rollHistory">
|
|
<i class="el-icon-time"></i>
|
|
<span slot="title">换辊</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="stoppage">
|
|
<i class="el-icon-warning"></i>
|
|
<span slot="title">停机</span>
|
|
</el-menu-item>
|
|
<!-- <el-menu-item index="realTime">
|
|
<i class="el-icon-time"></i>
|
|
<span slot="title">实时</span>
|
|
</el-menu-item> -->
|
|
</el-menu>
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<component :is="currentComponent" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Inventory from './components/Inventory.vue';
|
|
import Processing from './components/Processing.vue';
|
|
import Report from './components/Report.vue';
|
|
import Shipping from './components/Shipping.vue';
|
|
import Quality from './components/Quality.vue';
|
|
import Performance from './components/Performance.vue';
|
|
import RealTime from './components/RealTime.vue';
|
|
import RollConfig from '@/views/timing/roll/index.vue';
|
|
import RollHistory from '@/views/timing/roll/history.vue';
|
|
import Stoppage from '@/views/timing/stoppage/index.vue';
|
|
|
|
export default {
|
|
name: 'AcidSystem',
|
|
components: {
|
|
Inventory,
|
|
Processing,
|
|
Report,
|
|
Shipping,
|
|
Quality,
|
|
Performance,
|
|
RealTime,
|
|
RollConfig,
|
|
RollHistory,
|
|
Stoppage
|
|
},
|
|
data() {
|
|
return {
|
|
activeMenu: 'inventory',
|
|
};
|
|
},
|
|
computed: {
|
|
currentComponent() {
|
|
const componentMap = {
|
|
inventory: 'Inventory',
|
|
processing: 'Processing',
|
|
report: 'Report',
|
|
shipping: 'Shipping',
|
|
quality: 'Quality',
|
|
performance: 'Performance',
|
|
realTime: 'RealTime',
|
|
rollConfig: 'RollConfig',
|
|
rollHistory: 'RollHistory',
|
|
stoppage: 'Stoppage',
|
|
};
|
|
return componentMap[this.activeMenu];
|
|
},
|
|
},
|
|
methods: {
|
|
handleMenuSelect(index) {
|
|
this.activeMenu = index;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.app-container {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.acid-container {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: calc(100vh - 84px);
|
|
background-color: #f5f7fa;
|
|
}
|
|
|
|
.acid-sidebar {
|
|
width: 100px;
|
|
background-color: #fff;
|
|
border-right: 1px solid #e4e7ed;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
|
|
|
|
.sidebar-menu {
|
|
border: none;
|
|
background-color: transparent;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
border-right: none;
|
|
|
|
::v-deep .el-menu-item {
|
|
color: #606266;
|
|
padding: 0 20px;
|
|
font-size: 14px;
|
|
|
|
&:hover {
|
|
background-color: #ecf5ff;
|
|
color: #409eff;
|
|
}
|
|
|
|
&.is-active {
|
|
background-color: #ecf5ff;
|
|
color: #409eff;
|
|
border-right: 3px solid #409eff;
|
|
}
|
|
|
|
i {
|
|
font-size: 18px;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|