基于Vue的日程排班表 - common-schedule

原创

于 2019-08-24 10:28:01 发布 · 1.6w 阅读

38 ·

CC 4.0 BY-SA版权

common-schedule

基于Vue的日程排班表，根据不同的时间显示粒度设置granularity的值，支持年/月/日/小时

安装

npm install common-schedule

实用场景

为车辆添加班线计划

在这里插入图片描述

实现代码

设置粒度为day

<commonSchedule
      start="2019-08-01 07:00:00"
      end="2019-8-31 23:30:00"
      :datas="scheduleData"
      :width="160"
      :height="80"
      granularity="day"
      @addHandle="addHandle"
      @removeHandle="removeHandle"
    >
</commonSchedule>
// 参考数据
const scheduleData = {
    '川A43HU9': {
        xName: '川A43HU9', 
        sche: [
            {
                start: '2019-08-2 12:30', // 开始时间
                end: '2019-08-5 15:30', // 结束时间
                eventName: '成都-上海', // 
            },
        ],
    },
    '渝B89UER': {
        xName: '渝B89UER',
        sche: [
            {
                start: '2019-08-5 17:30', // 开始时间
                end: '2019-08-6 18:30', // 结束时间
                eventName: '北京-西安'
            },
        ],
    },
 }