基于Vue的日程排班表

admin管理员组

文章数量:1794759

基于Vue的日程排班表

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> 参数说明 属性 名称类型默认描述

datas	Object	{}	展示数据
start	String	‘2018-8-12 12:00:00’	开始时间(必须为此格式，YYYY-MM-DD HH:mm:ss)
end	String	‘2018-12-12 12:00:00’	结束时间(必须为此格式，YYYY-MM-DD HH:mm:ss)
granularity	String	‘hour’ 可选值[‘year’,‘month’, ‘day’]	时间粒度
width	Number	200	宽度
height	Number	70	高度
halfSplit	Boolean	false	是否分半展示时间粒度[如一小时分为0-30分 、30-60分]

方法 名称类型参数描述

addHandle	Function	item	添加日程事件
removeHandle	Function	item	删除日程事件

slot 名称描述

time	自定义时间线
content	自定义日程内容
x-name	自定义名称内容
detail	自定义详情

本文标签： 日程Vue