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>
参数说明
属性
名称类型默认描述
datasObject{}展示数据
startString‘2018-8-12 12:00:00’开始时间(必须为此格式,YYYY-MM-DD HH:mm:ss)
endString‘2018-12-12 12:00:00’结束时间(必须为此格式,YYYY-MM-DD HH:mm:ss)
granularityString‘hour’ 可选值[‘year’,‘month’, ‘day’]时间粒度
widthNumber200宽度
heightNumber70高度
halfSplitBooleanfalse是否分半展示时间粒度[如一小时分为0-30分 、30-60分]
方法
名称类型参数描述
addHandleFunctionitem添加日程事件
removeHandleFunctionitem删除日程事件
slot
名称描述
time自定义时间线
content自定义日程内容
x-name自定义名称内容
detail自定义详情
Logo

前往低代码交流专区

更多推荐