Vue结合Element UI的el-table打造加工工序甘特图可视化解决方案
引言
在玻璃加工行业，高效管理切割、磨边、洗、钢化、丝印等复杂工序对于提升生产效率至关重要。本文将介绍如何利用Vue.js框架结合Element UI组件库，自定义实现一个工序甘特图，以可视化展示各道工序的时间线与进度，为生产调度带来便利。
目录
- 引言
- 渲染效果
- 拖拽滚动，同产品高亮
- 小时高度，宽度改变动态效果
- 全部代码：
- 优化
- 优化内容：减少timeInterval的调用，拖动滚动效果，同产品高亮效果。
渲染效果
同产品高亮
拖拽滚动，同产品高亮
小时高度，宽度改变动态效果
全部代码：
优化
优化内容：减少timeInterval的调用，拖动滚动效果，同产品高亮效果。
切换视图 开始排产 负荷调整建议 查看物料到货计划 导出 打印 锁定排产 解锁排产 0 ? 'width:' + tableWidth + 'px;' : 'width:239px;height:100%' " :key="tableKey" :cell-style="iCellStyle" :fit="false" :data="tableData" border align="center" size="mini" :span-method="tableSpanMethod" > {{ scope.row.index1.label }} { scope.row.index2.label }} --> {{ scope.row.index2.label }} { scope.row.index3.label }} --> {{ scope.row.index3.label }} {{ hourArrItem }} 信息
工序：{{ workItem.workOrder }}
产品名称：{{ workItem.materialName }}
产品编码：{{ workItem.materialNo }}
产线名称：{{ workItem.productLineName }}
产线编码：{{ workItem.productLineSn }}
设备名称：{{ scope.row.index3.label }}
开始时间：{{ workItem.startTime }}
结束时间：{{ workItem.endTime }}
交期时间：{{ workItem.deliverTime }}
工作中心描述：{{ workItem.workCenterDesc }}
工作中心编码：{{ workItem.workCenterSn }}
状态：换线
状态：休息
小时宽度: { isFillScreen ? "退出全屏" : "全屏" }} -->