砂糖
73c461f0e4
- 添加实时跟踪页面，支持查询Gauge和Shape数据 - 新增实绩页面，展示钢卷生产数据和工艺图表 - 优化钢卷追踪结果展示，增加创建步骤卷号显示 - 调整酸轧系统菜单结构，新增"实绩"和"实时"选项 - 扩展工艺图表展示，增加开卷机、温度等参数 - 修改计划列表分页大小为10 - 移除无用代码和注释
144 lines
3.3 KiB
Vue
144 lines
3.3 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="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';
|
|
|
|
export default {
|
|
name: 'AcidSystem',
|
|
components: {
|
|
Inventory,
|
|
Processing,
|
|
Report,
|
|
Shipping,
|
|
Quality,
|
|
Performance,
|
|
RealTime
|
|
},
|
|
data() {
|
|
return {
|
|
activeMenu: 'inventory',
|
|
};
|
|
},
|
|
computed: {
|
|
currentComponent() {
|
|
const componentMap = {
|
|
inventory: 'Inventory',
|
|
processing: 'Processing',
|
|
report: 'Report',
|
|
shipping: 'Shipping',
|
|
quality: 'Quality',
|
|
performance: 'Performance',
|
|
realTime: 'RealTime',
|
|
};
|
|
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>
|