基於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>
複製代碼

參數說明

屬性

名稱	類型	默認	描述
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	自定義詳情