Расписание расписания на основе Vue — общее расписание

Vue.js

common-schedule

Планирование расписания на основе Vue, установка значения детализации в соответствии с разной степенью детализации отображения времени, поддержка года/месяца/дня/часа

Установить

npm install common-schedule

Практическая сцена

Добавить график переключения для автомобилей

код реализации

Установите уровень детализации на день

<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目标'
            },
        ],
    }
  }
Индивидуальный ежедневный план

Код ссылки

Установите степень детализации на час

Если вам нужно разделеть на полчаса, установите HalapSplit: 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: '吃晚餐', //
            },

        ],
    },
   }
Индивидуальный долгосрочный план

Формат справочных данных

Установить детализацию по году

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' Время начала (должно быть в формате ГГГГ-ММ-ДД ЧЧ:мм:сс)
end String '2018-12-12 12:00:00' Время окончания (должно быть в формате ГГГГ-ММ-ДД ЧЧ:мм:сс)
granularity String 'час' необязательный ['год', 'месяц', 'день'] гранулярность времени
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 Пользовательские детали
Категории