最近在做大屏展示，其中一个需求是展示生产过程中投料情况，效果类似甘特图。
思路：1.先得到整个过程的开始时间startTime和结束时间endTime。计算出整个过长经历的时长。
2.计算横向坐标的开始时间start和结束时间end，坐标的开始时间为生产开始时间-百分之十的生产时长，即start = startTime – 0.1h；坐标的结束时间为生产结束时间+百分之十的生产时长，即end = endTime + 0.1h.
3.确定横纵坐标值，先计算横计算坐标间隔，我固定了横坐标的打点数，直接用横坐标结束时间-坐标开始时间除以点数+1，即 (end-start) / (number +1)。得到间隔之后就可以计算出横坐标值。纵坐标值直接使用物料名称
4.显示每个料的投放情况显示出来。显示是用的div,每种物料的投料时长就是div的长度。
注意：计算宽度的时候需要依据自己的实际情况进行调整
效果
代码
<template> <div class="Gantt"> <div class="content" ref="scrollbar"> <!-- --> <div class="info" style="margin-top: 2px; overflow: scroll; overflow-x: hidden;height: calc(100vh * 220 / 1080);" > <div id="gui-content" class="gui-content"> <div class="gui-list clear room-gui-list" v-for="task in taskList" :key="task.materialId" > <div id="name" class="fasten ellipsis" :title="task.name"> {{ task.name }} </div> <div class="gui-tab"> <li v-for="(o, i) in config.xAxis" :key="i" :style="{ width: 100 / (number + 1) + '%', cursor: 'pointer', }" ></li> </div> <template v-if="task.materialId"> <div v-for="(item, index) in task.materialData" :key="index" class="meet-item-one" v-bind:class="[ !item.status ? 'meet-color-having' : 'meet-color-finished', ]" :style="{ left: getLeftTime(item.startTime) + '%', width: getWidth(item) + '%', backgroundColor: item.color, // opacity:0.8 }" v-show="getWidth(item) != 0" @click="edit(item)" > <el-popover placement="top-start" trigger="hover" :style="{fontSize:'10px',padding:'0px'}" > <p>{{'开始：'+item.startTime}}</p> <p>{{'结束：'+item.endTime}}</p> <div slot="reference" class="meet-item-one-content"> <p class="ellipsis" >{{ item.content }}</p> </div> </el-popover> </div> </template> </div> </div> </div> <!-- --> <div class="time-bar clear"> <div class="gui-table clear"> <li :style="{ width: 100 / (number + 1) +'%', }" v-for="(item, index) in config.xAxis" :key="index" > <div class="gui-cle"></div> <div class="gui-lit"></div> <div class="gui-title"><span class="">{{item.xAxis}}</span></div> </li> </div> </div> </div> </div> </template> <script> import {Popover,Scrollbar} from 'element-ui' export default { name: "GanttDemo", data() { return { date: "", number:6, xInterval:0.1, config: {xAxis:[]}, taskList: [ { materialId: "1", name: "物料一", startTime: "2022-11-16 08:00:00", endTime: "2022-11-16 20:00:00", materialData: [ { materialId: "1", id: "14444", status: 0, startTime: '2022-11-16 08:00:00', endTime: '2022-11-16 12:00:00', color:"#32c5e9", content:"800", }, { materialId: "1", id: "15555", status: 0, startTime: '2022-11-16 18:30:10', endTime: '2022-11-16 20:00:00', color:"#32c5e9", content:"600", }, ], }, { materialId: "2", name: "物料二", startTime: "2022-11-16 20:00:00", endTime: "2022-11-16 23:30:00", materialData:[{ materialId: "2", id: "223865", status: 0, startTime: '2022-11-16 20:00:00', endTime: '2022-11-16 23:30:00', color:"#eb865e", content:"800", }, ] },{ materialId: "3", name: "物料三", startTime: "2022-11-16 15:00:00", endTime: "2022-11-16 16:30:00", materialData:[{ materialId: "3", id: "31", status: 0, startTime: '2022-11-16 15:00:00', endTime: '2022-11-16 16:30:00', color:"#eb865e", content:"500", }, ] },{ materialId: "4", name: "物料四", startTime: "2022-11-16 12:00:00", endTime: "2022-11-16 16:30:00", materialData:[{ materialId: "4", id: "41", status: 0, startTime: '2022-11-16 12:00:00', endTime: '2022-11-16 16:30:00', color:"#eb865e", content:"450", }, ] },{ materialId: "5", name: "物料五", startTime: "2022-11-16 11:00:00", endTime: "2022-11-16 15:30:00", materialData:[{ materialId: "5", id: "51", status: 0, startTime: '2022-11-16 11:00:00', endTime: '2022-11-16 15:30:00', color:"#eb865e", content:"300", }, ] },{ materialId: "6", name: "物料六", startTime: "2022-11-16 11:00:00", endTime: "2022-11-16 12:30:00", materialData:[{ materialId: "6", id: "61", status: 0, startTime: '2022-11-16 11:00:00', endTime: '2022-11-16 12:30:00', color:"#eb865e", content:"200", }, ] },{ materialId: "7", name: "物料七", startTime: "2022-11-16 09:00:00", endTime: "2022-11-16 10:30:00", materialData:[{ materialId: "7", id: "71", status: 0, startTime: '2022-11-16 09:00:00', endTime: '2022-11-16 10:30:00', color:"#eb865e", content:"300", }, ] }, ] }; }, components:{ elPopover: Popover, elScrollbar:Scrollbar, }, props:{ }, watch:{ }, mounted(){ this.getConfig(); }, methods: { getLeftTime(cTime) { const dTime = new Date(cTime).getTime(); const leftTime = new Date(this.config.startTime).getTime(); const time = (dTime - leftTime) / (1000 * 60 * 60); // 小时数 const leftPercent = 0.88 * (time * 100) / (this.xInterval * (this.number+1)) ; return leftPercent + 12; }, getWidth(item) { const _left1 = this.getLeftTime(item.startTime); const _left2 = this.getLeftTime(item.endTime); return _left2 - _left1; }, edit(item) { console.log(item); }, getConfig(){ if(this.taskList.length>0){ let startTime = this.taskList[0].startTime; let endTime = this.taskList[0].endTime; console.log(endTime) for(let index in this.taskList){ let task = this.taskList[index]; let start1 = startTime?new Date(startTime):new Date(); let start2 = new Date(task.startTime); if(start1 > start2 && null != task.startTime){ startTime = task.startTime; } let end1 = new Date(endTime); let end2 = new Date(task.endTime?task.endTime:start2); if(end1 < end2){ endTime = task.endTime; } } let hour =((new Date(endTime)).getTime() - (new Date(startTime)).getTime()); this.config.start = startTime; this.config.end = endTime; this.config.startTime = this.getDateTime(new Date((new Date(startTime)).getTime()-0.1*hour)); this.config.endTime = this.getDateTime(new Date((new Date(endTime)).getTime()+0.1*hour)); hour = ((new Date(this.config.endTime)).getTime() - (new Date(this.config.startTime)).getTime()); this.config.hour = hour; if(hour){ this.xInterval = (hour / (this.number+1)) / (1000*60*60); } this.config.xAxis = [] let hh = (new Date(this.config.startTime)).getHours() < 10 ? '0' + (new Date(this.config.startTime)).getHours() : (new Date(this.config.startTime)).getHours(); let mm = (new Date(this.config.startTime)).getMinutes() < 10 ? '0' + (new Date(this.config.startTime)).getMinutes() : (new Date(this.config.startTime)).getMinutes(); let xOne = hh +":" +mm; this.config.xAxis.push({xAxis:xOne}); for(let i = 0;i < this.number;i++){ console.log(); let node = (new Date(this.config.startTime)).getTime()+(this.xInterval * 60 *60 * 1000 * ( i + 1 )); let nodeHh = (new Date(node)).getHours() < 10 ? '0' + (new Date(node)).getHours() : (new Date(node)).getHours(); let nodeMm = (new Date(node)).getMinutes() < 10 ? '0' + (new Date(node)).getMinutes() : (new Date(node)).getMinutes(); let nodeX = nodeHh + ":" + nodeMm; this.config.xAxis.push({xAxis:nodeX}); } } }, getDateTime(time){ let year = time.getFullYear(); //获取年 2021 let month = time.getMonth() + 1; // 获取月 5 let day = time.getDate(); // 获取天 11 let h = time.getHours() < 10 ? '0' + time.getHours() : time.getHours(); // 获取小时 18 let m = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes(); // 获取分钟 42 let s = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds(); // 获取秒 51 let dataTime = year + '-' + month + '-' + day + ' ' + h + ':' + m + ':' + s; return dataTime; }, } }; </script> <style lang="scss" scoped > .Gantt { padding: calc(100vw * 20 / 1920 );; border-radius: 3px; /* border: 1px solid red; */ height: 100%; box-sizing: border-box; display: flex; flex-direction: column-reverse; position: relative; } .content { padding-top: calc(100vw * 20 / 1920 ); } .content /deep/ .el-scrollbar{ height: calc(100vh * 220 / 1080); .el-scrollbar__wrap { overflow-x: hidden; } } .content /deep/ .el-scrollbar__view { height: 100%; // display: flex; // flex-direction: column-reverse; } .Gantt .gui-table, .gui-tab { font-size: calc(100vw * 12 / 1920 ); color: #333; margin: 0; width: 88%; float: right; white-space: nowrap; height: calc(100vh * 48 / 1080 ); } .Gantt .gui-table li { position: relative; border-top: solid 1px #1ba5fa; z-index: 666; word-wrap: break-word; } .Gantt .gui-table li { cursor: default; } .Gantt .gui-table li{ float: left; text-align: left; width: 8.9%; height: calc(100vh * 48 / 1080 ); line-height: calc(100vh * 48 / 1080 ); /* cursor: pointer; */ white-space: pre-wrap; } .Gantt .gui-table .gui-title{ line-height: calc(100vh * 24 / 1080 ); position: relative; width: 100%; } .Gantt .gui-table .gui-title span{ line-height: calc(100vh * 24 / 1080 ); color: rgba(255,255,255,.7); position: absolute; left: -50%; text-align: center; width: 100%; } .gui-tab li { float: left; text-align: left; width: 8.9%; height: calc(100vh * 28 / 1080 ); line-height: calc(100vh * 28 / 1080 ); /* cursor: pointer; */ white-space: pre-wrap; } .Gantt .gui-cle { position: absolute; left: -5px; top: -5px; width: 6px; height: 6px; background: #fff; border-radius: 50%; border: solid 2px #1ba5fa; z-index: 666; } .Gantt .gui-lit { position: absolute; left: 0; top: -3px; width: 3px; height: 3px; background: #fff; border-radius: 50%; border: solid 1px #1ba5fa; margin-left: 50%; z-index: 666; } .clear { *zoom: 1; } .clear:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; font-size: 0; } .Gantt .fasten { width: 12%; float: left; height: calc(100vh * 28 / 1080 ); text-align: center; line-height: calc(100vh * 28 / 1080 ); font-size: calc(100vw * 12 / 1920 ); color: rgba(255, 255, 255, .7); border-right: solid 1px #1ba5fa; /* word-break: break-word; white-space: pre-line; */ } .Gantt .gui-table{ font-size: calc(100vw * 12 / 1920 ); color: #333; margin: 0; width: 88%; float: right; white-space: nowrap; height: calc(100vh * 48 / 1080 ); } .gui-tab { font-size: calc(100vw * 12 / 1920 ); color: #333; margin: 0; width: 88%; float: right; white-space: nowrap; height: calc(100vh * 28 / 1080 ); } /* .Gantt .gui-list:first-child { background: #fff; } */ .Gantt .gui-list { position: relative; display: flex; } .Gantt .meet-color-finished { background: #4dc394; } .Gantt .meet-color-having { background: #eb865e; } .Gantt .meet-item-one { color: #000; text-align: center; position: absolute; height: calc(100vh * 26 / 1080 ); left: 12%; top: 1px; color: #fafafa; font: 14px/60px microsoft yahei; /* padding: 0 5px; */ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow: hidden; cursor: pointer; width: 20%; line-height: calc(100vh * 26 / 1080 ); } li { list-style: none; } .Gantt .meet-item-one-content{ height: 100%; } .ellipsis { overflow: hidden; margin-top: 0; white-space: nowrap; text-overflow: ellipsis; line-height: calc(100vh * 28 / 1080 ); } .info,.gui-content{ display: flex; flex-direction: column-reverse; } .info::-webkit-scrollbar { width : 5px; height: 1px; } .info::-webkit-scrollbar-thumb { box-shadow: 0px 1px 3px rgba(144,147,153,.3) inset; /*滚动条的内阴影*/ border-radius: 10px; /*滚动条的圆角*/ background-color: rgba(144,147,153,.3); /*滚动条的背景颜色*/ } .info::-webkit-scrollbar-track { box-shadow: 0px 1px 3px #071e4a inset; /*滚动条的背景区域的内阴影*/ border-radius: 10px; /*滚动条的背景区域的圆角*/ background-color: #071e4a; /*滚动条的背景颜色*/ } /* .gui-yAxis{ position: absolute; height: 100%; border: solid 1px #1ba5fa; } */ </style>