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

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: '北京-西安'
            },
        ],
    },
 }

定制年度目标

<commonSchedule
      start="2019-01-23 07:00:00"
      end="2019-12-23 23:30:00"
      :datas="scheduleData"
      :width="160"
      :height="80"
      granularity="month"
      @addHandle="addHandle"
      @removeHandle="removeHandle"
    >
</commonSchedule>
  
// 参考数据
const scheduleData = {
    '团队1': {
        xName: '团队1',
        sche: [
            {
                start: '2019-02', // 开始时间
                end: '2019-04', // 结束时间
                eventName: '目标：完成XX目标'
            },
        ],
    },
    '团队2': {
        xName: '团队2',
        sche: [
            {
                start: '2019-01', // 开始时间
                end: '2019-03', // 结束时间
                eventName: '目标：完成XX目标'
            },
        ],
    }
  }

定制每日计划

参考代码

设置粒度为hour

如果需要以半个小时作为分割是，设置halfSplit:true

<commonSchedule
      start="2019-08-23 07:00:00"
      end="2019-08-23 23:30:00"
      :datas="scheduleData"
      :width="160"
      :height="80"
      :halfSplit="true"
      granularity="hour"
      @addHandle="addHandle"
      @removeHandle="removeHandle"
    >
</commonSchedule>
// 参考数据
const scheduleData = {
    '小李': {
        xName: '小李',
        sche: [
            {
                start: '2019-8-23 07:00:00', // 开始时间
                end: '2019-8-23 08:00:00', // 结束时间
                eventName: '任务：起床洗涮', //
            },
            {
                start: '2019-8-23 08:00:00', // 开始时间
                end: '2019-8-23 08:30:00', // 结束时间
                eventName: '吃早餐', //
            },
            {
                start: '2019-8-23 08:30:00', // 开始时间
                end: '2019-8-23 09:00:00', // 结束时间
                eventName: '上班途中', //
            },
            {
                start: '2019-8-23 09:00:00', // 开始时间
                end: '2019-8-23 18:00:00', // 结束时间
                eventName: '上班', //
            },
            {
                start: '2019-8-23 18:00:00', // 开始时间
                end: '2019-8-23 19:00:00', // 结束时间
                eventName: '回家途中', //
            },
            {
                start: '2019-8-23 19:00:00', // 开始时间
                end: '2019-8-23 20:00:00', // 结束时间
                eventName: '吃晚餐', //
            },

        ],
    },
   }

定制长线计划

参考数据格式

设置粒度为year

const scheduleData = {
    '团队1': {
        xName: '团队1',
        sche: [
            {
                start: '2016', // 开始时间
                end: '2018', // 结束时间
                selected: false, // 是否选中 默认false[新增/修改后需将默认设置为false]
                eventName: '目标：完成XX目标', //
            },
        ],
    },
    '团队2': {
        xName: '团队2',
        sche: [
            {
                start: '2014', // 开始时间
                end: '2016', // 结束时间
                selected: false,
                eventName: '目标：完成XX目标'
            },
        ],
    },
  }

使用

<commonSchedule
      start="2016-8-12 12:00:00"
      end="2017-9-12 12:00:00"
      :datas="scheduleData"
      :width="180"
      :height="80"
      granularity="month"
      @addHandle="addHandle"
      @removeHandle="removeHandle"
    >

    </commonSchedule>

参数说明

属性

方法

slot