前端可排程的vue 排程甘特图
2024-05-16 00:55:49
话不多说 直接上图 结合全网的开源码，又根据echart 图 做出了前端可排程的vue 排程甘特图
首先要引入echart 模板 这里就不再赘述了 在这里插入图片描述
之后对它进行魔改 将横轴改为时间 纵轴改为所需要展示的东西名称
仅对option 进行更改即可
然后自己引入数据源
const dataSource = [{id: 1,versionCode: '2023131134241',lineCode: 'P1111',lineName: '组装线体',orderNo: 'G-764356',productName: '防爆灯',beginTime: '2023-01-24 00:00:00',endTime: '2023-01-25 00:00:00',},{id: 2,versionCode: '2023131134242',lineCode: 'P1112',lineName: '合成线体',orderNo: 'G-764357',productName: '螺丝灯',beginTime: '2023-01-24 00:00:00',endTime: '2023-01-27 00:00:00',},{id: 3,versionCode: '2023131134243',lineCode: 'P1113',lineName: '辊压线体',orderNo: 'G-764358',productName: '鼠标灯',beginTime: '2023-01-24 00:00:00',endTime: '2023-01-25 00:00:00',},{id: 4,versionCode: '2023131134244',lineCode: 'P1111',lineName: '组装线体',orderNo: 'G-764359',productName: '布料灯',beginTime: '2023-01-26 00:00:00',endTime: '2023-01-28 00:00:00',},{id: 5,versionCode: '2023131134245',lineCode: 'P1114',lineName: '切割线体',orderNo: 'G-764351',productName: '飘带灯',beginTime: '2023-01-24 00:00:00',endTime: '2023-01-25 00:00:00',},{id: 6,versionCode: '2023131134246',lineCode: 'P1111',lineName: '组装线体',orderNo: 'G-764352',productName: '石板灯',beginTime: '2023-01-29 00:00:00',endTime: '2023-01-31 00:00:00',},{id: 7,versionCode: '2023131134247',lineCode: 'P1112',lineName: '合成线体',orderNo: 'G-764353',productName: '铁板灯',beginTime: '2023-01-27 00:00:00',endTime: '2023-01-28 00:00:00',},{id: 8,versionCode: '2023131134248',lineCode: 'P1114',lineName: '切割线体',orderNo: 'G-764354',productName: '棉花灯',beginTime: '2023-01-25 00:00:00',endTime: '2023-01-26 00:00:00',},{id: 9,versionCode: '2023131134249',lineCode: 'P1113',lineName: '辊压线体',orderNo: 'G-764355',productName: '兔子灯',beginTime: '2023-01-25 00:00:00',endTime: '2023-01-29 00:00:00',},]
数据源加号后 对显示进行调整即可 在最后附上核心代码 之后有需要全部源码的小伙伴可以联系我
数据源目前是写死的哦 方便展示 ，后期可以自己定义后台接口获取
<script>
//导入包//然后
export default {components: { HeatMap },name: 'cproductct',data() {return {versionList: [],queryParams: {pageNum: 1,pageSize: 100000,sort: undefined,sortType: undefined,versionCode: undefined,},}},created() {this.HistoryList()},mounted() {this.drawLine()},watch: {},computed: {},beforeDestrory() {},destroyed() {},methods: {//得到版本下拉列表HistoryList() {GetHistoryList().then((res) => {if (res.code == 200) {this.versionList = res.data}})},//得到现有版本的数据getList() {listCScheduleHistory(this.queryParams).then((res) => {if (res.code == 200) {this.dataList = res.data.resultconsole.log(this.dataList, ' 数据列表')}})},//柱状图drawLine() {var data = []var startTime = undefinedconst dataSource = [{id: 1,versionCode: '2023131134241',lineCode: 'P1111',lineName: '组装线体',orderNo: 'G-764356',productName: '防爆灯',beginTime: '2023-01-24 00:00:00',endTime: '2023-01-25 00:00:00',},{id: 2,versionCode: '2023131134242',lineCode: 'P1112',lineName: '合成线体',orderNo: 'G-764357',productName: '螺丝灯',beginTime: '2023-01-24 00:00:00',endTime: '2023-01-27 00:00:00',},{id: 3,versionCode: '2023131134243',lineCode: 'P1113',lineName: '辊压线体',orderNo: 'G-764358',productName: '鼠标灯',beginTime: '2023-01-24 00:00:00',endTime: '2023-01-25 00:00:00',},{id: 4,versionCode: '2023131134244',lineCode: 'P1111',lineName: '组装线体',orderNo: 'G-764359',productName: '布料灯',beginTime: '2023-01-26 00:00:00',endTime: '2023-01-28 00:00:00',},{id: 5,versionCode: '2023131134245',lineCode: 'P1114',lineName: '切割线体',orderNo: 'G-764351',productName: '飘带灯',beginTime: '2023-01-24 00:00:00',endTime: '2023-01-25 00:00:00',},{id: 6,versionCode: '2023131134246',lineCode: 'P1111',lineName: '组装线体',orderNo: 'G-764352',productName: '石板灯',beginTime: '2023-01-29 00:00:00',endTime: '2023-01-31 00:00:00',},{id: 7,versionCode: '2023131134247',lineCode: 'P1112',lineName: '合成线体',orderNo: 'G-764353',productName: '铁板灯',beginTime: '2023-01-27 00:00:00',endTime: '2023-01-28 00:00:00',},{id: 8,versionCode: '2023131134248',lineCode: 'P1114',lineName: '切割线体',orderNo: 'G-764354',productName: '棉花灯',beginTime: '2023-01-25 00:00:00',endTime: '2023-01-26 00:00:00',},{id: 9,versionCode: '2023131134249',lineCode: 'P1113',lineName: '辊压线体',orderNo: 'G-764355',productName: '兔子灯',beginTime: '2023-01-25 00:00:00',endTime: '2023-01-29 00:00:00',},]// 一堆颜色集，画每一个图块需要const Colors = ['#BB86D7','#FFAFF0','#5BC3EB','#B5E2FA','#A9D5C3','#73DCFF','#DCB0C6','#F9CDA5','#FBE6D2','#B5E2FA','#B8FFCE','#FFE4E2','#F7AF9D','#BBF9B4','#FFEE93','#2CEAA3','#ECC2C2','#C8CACA',]const { keys } = Objectlet machines = dataSource.reduce((acc, cur) => {acc[cur.lineName] ? acc[cur.lineName].push(cur) : (acc[cur.lineName] = [cur])return acc}, {})let workpieces = dataSource.reduce((acc, cur) => {acc[cur.id] ? acc[cur.id].push(cur) : (acc[cur.id] = [cur])return acc}, {})let workpieceColors = {} // 颜色映射keys(workpieces).forEach((v, i) => (workpieceColors[v] = Colors[i]))//let data = [];// 关键keys(machines).forEach((k) => {machines[k].forEach((v) => {// beginTime endTime\var data1 = new Date(v.beginTime)var data2 = new Date(v.endTime)var s1 = data1.getTime()var s2 = data2.getTime()let duration = s2 - s1data.push({name: v.id, // 图块名称value: [k, v.beginTime, v.endTime, duration,v.orderNo,v.productName], // 名称， 起始时间， 终止时间，持续时间itemStyle: {normal: {color: workpieceColors[v.id], // 图块颜色},},})})})//基于准备好的dom，初始化echarts实例let myChart = echarts.init(document.getElementById('myChart'))// 绘制图表myChart.setOption({tooltip: {show: true,trigger: 'item',triggerOn: 'mousemove|click',textStyle: {//数值样式fontSize: '7px',color: '#666'},formatter: function (params) {return '生成产品 :' + params.value[5] + '<br/>'+ '开始时间 :'+ params.value[1] +'<br/>'+ '结束时间 :' + params.value[2] + '<br/>'+ '备注 :'},},title: {text: '排程甘特图',left: 'center',},dataZoom: [{type: 'slider',filterMode: 'weakFilter',showDataShadow: false,top: 600,labelFormatter: '',},{type: 'inside',filterMode: 'weakFilter',},],grid: {height: 500,},xAxis: {type: 'category',data: ['2023-01-24 00:00:00','2023-01-25 00:00:00','2023-01-26 00:00:00','2023-01-27 00:00:00','2023-01-28 00:00:00','2023-01-29 00:00:00','2023-01-30 00:00:00','2023-01-31 00:00:00','2023-02-01 00:00:00','2023-02-02 00:00:00','2023-02-03 00:00:00',],// min: startTime,// scale: true,show: true,name: '时间',nameLocation: 'end',axisTick: {show: true,},axisLabel: {formatter: '{value} ',},},yAxis: {type: 'category',data: keys(machines),name: '线体',nameLocation: 'end',axisTick: {show: true,}, // data: ,axisLabel: {formatter: '{value} ',},},series: [{name: 'xilie',type: 'custom',renderItem: function (params, api) {var categoryIndex = api.value(0)var start = api.coord([api.value(1), categoryIndex])var end = api.coord([api.value(2), categoryIndex])var height = api.size([0, 1])[1] * 0.6var rectShape = echarts.graphic.clipRectByRect({x: start[0],y: start[1] - height / 2,width: end[0] - start[0],height: height,},{x: params.coordSys.x,y: params.coordSys.y,width: params.coordSys.width,height: params.coordSys.height,},)return (rectShape && {type: 'rect',// transition: ['shape'],shape: rectShape,style: api.style(),})},label: {show: true,position: 'center',formatter: function (params) {return params.value[4]},textStyle: {fontSize: '15px',color: '#666',lineHeight: 70,},},itemStyle: {opacity: 0.8,},encode: {x: [1, 2],y: 0,},// data: data,data: data,},],})},},
}
</script>帮到了你 我就很开心
前端可排程的vue 排程甘特图相关推荐
- 甘特图 知乎_APS生产排程软件基础知识-计划甘特图
概述:生产计划甘特图是显示生产计划的最常用方式,不仅可以直观地显示计划,计划是否合理.是否有冲突都一目了然.甘特图也为用户修改计划提供了方便快速的工具.本文以PlanmateAPS为例,介绍计划甘特图 ...
- 【Vue.JS】纯 Vue.js 制作甘特图
效果图 在线预览 GitHub链接(包含 knockoutJS 版本与 Vue 版本) 推荐组合效果 推荐与双表头固定效果组合,实现如上例中横表头(日期)纵向固定,纵表头(类型)横向固定效果. 参照连 ...
- vue+echarts画甘特图
vue项目中添加echarts,只需要增加echarts依赖,然后在main.js中引入echarts就可以使用了. 1.npm install echarts --save 2.修改main.js ...
- 在vue中展示甘特图
甘特图 一.子组件模板 二.需要引入的组件 三.需要在mounted定义相关格式 ①设置日期格式 ②显示操作按钮 ③日期列显示 ④显示的列配置 ⑤左右容器分别有滚动条 ⑥task 内容文本 ⑦task ...
- vue+element实现甘特图
1.先上效果图 2.使用el-table:需要合并的单元格遍历出来 <el-tablemax-height="500"class="wl-gantt-table&q ...
- 使用思维导图的甘特图进行项目排期
版权声明:本文为博主原创文章,未经博主允许不得转载. 近期在做设计文档及部分项目的整体排期时,使用了甘特图进行项目排期. 这样做的优势是,可先在思维导图中对项目按里程碑.模块.工作量等维度进行拆分,然 ...
- 在vue中element ui 结合frappe-gantt实现一个简单的甘特图功能
在vue中创建甘特图步骤请参考: https://editor.csdn.net/md/?articleId=130145782 2. 结合element ui 实现甘特图功能 实现效果: 2.1 下 ...
- 什么是APS高级计划排程（高级计划排产）可视化甘特图，有哪些应用效果？
本文所述甘特图例取自茗鹤 APS . 茗鹤APS工单生产计划表甘特图 工单生产计划表甘特图说明:工单生产计划表甘特图水平轴是时间,单位为周.日.小时.分钟.计划排程时间则精确到秒,垂直方向显示的是生产 ...
- 干货 | 10分钟给上万客服排好班，携程大规模客服排班算法实践
作者简介 博天,携程高级研发经理,关注大规模约束优化问题的建模和算法设计. 一.背景 客户服务部门是携程以服务质量赢得客户信赖的基石,其拥有上万名一线的客服,每天进线量巨大:且伴随着业务量的起伏,每一 ...
最新文章
- [LeetCode 120] - 三角形(Triangle)
- rh9.0虚拟机dmesg启动过程分析(2)
- 海康威视连续采图与单步采图_c#
- 从 HTTP 到 HTTP/3 的发展简史
- 全球及中国高强度钢行业发展态势与市场规模分析报告2022版
- jsp 下拉列表选取触发function_Bootstrap下拉菜单样式
- 和计算机互动英语,计算机专业英语互动教学方法探讨
- 数据结构 - 哈希表(用数组+链表实现存储员工信息，添加增删查功能)
- 【牛客 - 303K第十五届浙江大学宁波理工学院程序设计大赛（同步赛）】Technology Tree（树形dp，tricks）
- BugkuCTF-Crypto题贝斯家
- CentOS 6.X启动流程
- block--内存管理
- android 实现论坛界面,android界面开发之主流UI布局范例
- php的正则匹配方法preg_match_all问题
- 图像分割（二）--Graph Cuts
- ACCESS使用技巧三则
- Mobile开发(绘制背景图片)
- JDBC之CallableStatement执行存储过程
- npm报错：npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
- C语言 单引号 双引号问题