wl gantt
1.0.0
Диаграмму Ганта также называют горизонтальной гистограммой, гистограммой и диаграммой выполнения производственного плана. Он использует гистограмму для отображения внутренних взаимосвязей проектов, графиков и другого прогресса системы, связанного со временем. Назван в честь автора предложения, г-на Генри Лоуренса Ганта.
Самые известные плагины Ганта на рынке уже давно оккупировали мир. Они древние и мощные. Но все без исключения: они взимают плату или чрезвычайно сложны в использовании и полагаются на очень старые технологии, о некоторых из которых новички, приходящие сегодня в индустрию, даже не слышали.
[jQueryGantt][plusgantt][dhtmlx] Нельзя отрицать, что они очень мощные, как с точки зрения производительности, так и с точки зрения функциональности. Но большинство потребностей бизнеса не требуют такого гиганта для удовлетворения потребностей. С другой стороны, скудная документация древних технологий затрудняет старт разработчиков (платная версия даже не предоставляет документацию, а деньги на покупку лицензии ваш начальник точно не предоставит).
Предпосылкой появления wl-gantt является огромный вред, который я понес при использовании плагина B***Gantt в проекте Vue компании: он основан на extjs (я никогда о нем не слышал с тех пор, как нахожусь в в отрасли в течение 17 лет), документация по разработке не предоставляется, и нет китайского языка. Данные и исходный код зашифрованы, а разработка полностью зависит от печати примеров для поиска атрибутов. wl-gantt — это плагин диаграммы Ганта, основанный на Vue и elementUi. Он был разработан подчиненным кодом 896 за оставшийся 1 час.
Предоставляемые им функции включают в себя: автоматическую проверку соответствия исходных данных правилам планирования задач проекта, правила предварительных задач, начинающиеся после окончания, переключение диапазона дат YearAndmonth|yearAndWeek|ManthAndDay и встроенный менеджер предварительных задач.
Его преимущества: очень простой и удобный в использовании, широкие возможности настройки, автоматическое сглаживание неквалифицированных данных и выдача подсказок, никаких исключений без причины не возникает.
Он постепенно взрослеет и на следующем этапе научится:
1. Настройка временного интервала YearAndMonth, MonthAndDay, YearAndWeek [завершено, необходимо уточнить начальную и конечную позиции сетки месяца и недели]
2. Встроенный селектор предзадач [Завершено]
3. Интегрировать функцию связи всех вариантов в древовидной таблице [Завершено]
4. Добавляйте и удаляйте обратные вызовы задач [Завершено]
4. Линия подключения задачи
5. Настраиваемые плавающие подсказки для задач.
6. И все требования, которые, по вашему мнению, вам необходимо использовать.
wl-gantt имеет простой и свежий внешний вид, очень удобен в использовании и имеет широкие возможности настройки.
jquery Gantt громоздкий, старый и уродливый, но документация понятна.
js gantt, я не хочу говорить больше
dhtmlxGantt — мощный и всеобъемлющий инструмент, однако его сложно использовать и он не подходит для современных фреймворков и UI-библиотек. Его сложно идеально применить в проектах.
у фраппе-ганта мало функций
bryntum — единственный, который красивее, но имеет плохую настраиваемость и не может комбинироваться с компонентами; сообщает об ошибках и сбоях без проверки правильности исходных данных; правила жесткие и не соответствуют годовой плате; стоит 950$; это мощный инструмент, но документация содержит лишь краткое введение и подробное описание использования. Его можно распечатать только на консоли.
2020-04-03 Отложенная загрузка 2020-02-20 Обновлен Gantt, подробности см. в описании версии 1.0.1 2019-12-14 Обновлен Gantt, добавлен встроенный столбец задач внешнего интерфейса, поддерживается внешний интерфейс с множественным выбором и интерфейс с одним выбором и автоматически проверять законность предварительных задач исходных данных. 3 декабря 2019 г. Обновление Ганта. 1. Таблица поддерживает большинство
AttributesиEventsel-table. См. подробный список ниже. 2. В столбце name добавлена поддержка функции форматирования содержимогоnameFormatter. 3. Столбец даты изменен на отображение по щелчку; редактировать поле ввода.
2019-12-2 Обновлена дата gantt.1 дляyearAndMonth、monthAndDay、yearAndWeek, подробности см.版本记录12. Исправлена проблема отсутствия обратного вызова при некоторых изменениях времени.
:fit="fit"
:size="size"
:border="border"
:data="selfData"
:stripe="stripe"
:height="height"
:row-key="rowKey"
:row-style="rowStyle"
:class="dateTypeClass"
:cell-style="cellStyle"
:max-height="maxHeight"
:tree-props="selfProps"
:current-row-key="rowKey"
:row-class-name="rowClassName"
:cell-class-name="cellClassName"
:expand-row-keys="expandRowKeys"
:header-row-style="headerRowStyle"
:header-cell-style="headerCellStyle"
:default-expand-all="defaultExpandAll"
:header-row-class-name="headerRowClassName"
:highlight-current-row="highlightCurrentRow"
:header-cell-class-name="headerCellClassName"
@header-contextmenu="handleHeaderContextMenu"
@selection-change="handleSelectionChange"
@row-contextmenu="handleRowContextMenu"
@current-change="handleCurrentChange"
@cell-mouse-enter="handleMouseEnter"
@cell-mouse-leave="handleMouseLeave"
@expand-change="handleExpandChange"
@filter-change="handleFilterChange"
@cell-dblclick="handleCellDbClick"
@header-click="handleHeaderClick"
@row-dblclick="handleRowDbClick"
@sort-change="handleSortChange"
@cell-click="handleCellClick"
@select-all="handleSelectAll"
@row-click="handleRowClick"
@select="handleSelect"
npm i wl-gantt --save
или
npm i wl-gantt -S
import wlGantt from 'wl-gantt'
import "wl-gantt/lib/wl-gantt.css"
Vue.use(wlGantt)
| серийный номер | параметр | иллюстрировать | тип | Необязательное значение | значение по умолчанию | Уведомление |
|---|---|---|---|---|---|---|
| 1 | данные | данные | Множество | - | [] | - |
| 2 | тип даты | Тип заголовка даты области диаграммы Ганта | Нить | месяцИДень, годИМесяц, годИДень | годимесяц | - |
| 3 | деревоРеквизит | Элементы конфигурации древовидной таблицы | Объект | - | - | Смотрите реквизит ниже |
| 4 | Дата начала | Время начала проекта | Строка、Объект | Необходимый | - | Примечание. Временная шкала задачи не обязательно должна находиться в пределах времени начала проекта. Если время задачи превышает время проекта, время проекта будет обновлено. |
| 5 | КонечнаяДата | Время окончания проекта | Строка、Объект | Необходимый | - | Примечание. Временная шкала задачи не обязательно должна находиться в пределах времени начала проекта. Если время задачи превышает время проекта, время проекта будет обновлено. |
| 6 | checkИсточник | Нужно ли проверять соответствие исходных данных правилам | логическое значение | - | - | Проверьте исходные данные, чтобы автоматически изменить время, не соответствующее спецификациям, на ожидаемое значение, соответствующее правилам. |
| 7 | treatIdAsIdentityId | Использовать ли id в качестве идентификатора автоматического приращения | логическое значение | - | ЛОЖЬ | Если да, убедитесь, что идентификатор представляет собой короткое число, а не длинную строку или идентификатор. |
| 8 | автоГанттдатетип | Автоматическая настройка типа интервала времени Ганта. Конкретные правила см.版本记录1 | логическое значение | - | истинный | - |
| 9 | имяFormatter | Функция содержимого формата столбца имени | Функция | - | - | Функция (строка, столбец, значение ячейки, индекс) |
| 10 | Другие атрибуты таблицы | Адрес документа | - | - | - | - |
| 11 | использоватьPreColumn | Использовать ли встроенную переднюю панель задач | логическое значение | - | ЛОЖЬ | - |
| 12 | preMultiple | Можно ли выбрать несколько вариантов для необходимых задач? | логическое значение | - | истинный | Если включен множественный выбор, поле pre должно быть Array, в противном случае это может быть NumberString. |
| 13 | преформаттер | Функция форматирования столбца префиксного содержимого | Функция | - | - | Если не передать, то будет склеено по prop name字段+， |
| 14 | пустойCellText | Заполнитель ячейки с нулевым значением | Нить | - | '-' | - |
| 15 | использоватьCheckColumn | Использовать ли встроенный столбец флажка | логическое значение | - | ЛОЖЬ | - |
| 16 | использоватьИндексКолумн | Использовать ли встроенный столбец серийного номера | логическое значение | - | ЛОЖЬ | - |
| 17 | редактировать | Это редактируемое? | логическое значение | - | истинный | - |
| 18 | родитель-ребенок | При использовании флажков проверяется, являются ли отношения родитель-потомок | логическое значение | - | истинный | Поля реквизита id и Children должны быть настроены. |
| 19 | GanttOnly | Отображать ли только графику | логическое значение | - | ЛОЖЬ | - |
| 20 | ленивый | То же, что и el-table | логическое значение | - | ЛОЖЬ | - |
| двадцать один | нагрузка | То же, что и el-table | Функция | - | - | - |
| двадцать два | Параметры контекстаМеню | Щелкните правой кнопкой мыши элемент конфигурации плавающего окна, если он существует, нажмите кнопку Ганта, чтобы щелкнуть правой кнопкой мыши, чтобы отобразить информацию о настроенном плавающем окне. | Множество | - | - | Свойства объекта в массиве включают в себя: * @param {String} отображаемое имя метки * @param {String} поле, привязанное к свойству * @param {String} icon дополнительный класс значка шрифта |
| двадцать три | использоватьRealTime | Использовать ли фактическое время начала и фактическое время окончания. Если этот параметр включен, за пределами синей полосы запланированного времени будет отображаться коричнево-красная полоса фактического времени. | логическое значение | - | ЛОЖЬ | - |
| двадцать четыре | использовать карту | Использовать ли наведение таблицы | логическое значение | - | ЛОЖЬ | - |
| серийный номер | параметр | иллюстрировать | значение по умолчанию |
|---|---|---|---|
| 1 | дети | Поле «Дочерние элементы» — подмножество данных, представленное в виде древовидной таблицы. | дети |
| 2 | имя | Поле, используемое для отображения имени | имя |
| 3 | ИДЕНТИФИКАТОР | Идентификатор каждого фрагмента данных должен быть уникальным. | ИДЕНТИФИКАТОР |
| 4 | pid | Поле идентификатора родительского узла каждого фрагмента данных | pid |
| 5 | Дата начала | Поле времени начала каждого фрагмента данных | Дата начала |
| 6 | КонечнаяДата | Поле времени окончания каждого фрагмента данных | КонечнаяДата |
| 7 | идентификатор личности | Идентификатор автоматического увеличения данных | идентификатор личности |
| 8 | родители | Дерево родительских идентификаторов с автоинкрементом, через запятую | родители |
| 9 | предварительно | Поле задачи-предшественника, значение поля должно быть идентификатором задачи-предшественника. | предварительно |
| 10 | имеет детей | Укажите, какие строки содержат дочерние узлы | имеет детей |
| 11 | RealStartDate | Поле фактического времени начала | RealEndDate |
| 12 | RealEndDate | поле фактического времени окончания | RealEndDate |
| серийный номер | название события | иллюстрировать | параметры обратного вызова |
|---|---|---|---|
| 1 | времяИзменить | Срабатывает при изменении времени задачи | function(row) — это, в свою очередь, данные текущей строки |
| 2 | Другие события за столом | Адрес документа | - |
| 3 | до изменения | Событие модификации задачи-предшественника | function(row) — это, в свою очередь, данные текущей строки |
| 4 | имяИзменить | событие изменения имени | function(row) — это, в свою очередь, данные текущей строки |
| 5 | задачаДобавить | Добавить событие задачи | function(row) — это, в свою очередь, данные текущей строки |
| 6 | задачаУдалить | Удалить событие задачи | function(row) — это, в свою очередь, данные текущей строки |
| серийный номер | имя метода | иллюстрировать | параметры обратного вызова |
|---|---|---|---|
| 1 | загрузитьдерево | Вызов таблицы дерева вручную с отложенной загрузкой | function(row) — это информация о строке, которая будет расширена по очереди. |
| 2 | загрузитьдеревоДобавить | Обновите дочерние узлы древовидной таблицы после отложенной загрузки. | function(id, list) — это идентификатор узла, который нужно обновить, и список дочерних узлов, который нужно добавить. Обратите внимание, что это объединенный список и исходные данные дочернего узла. |
| 3 | загрузитьдеревоудалить | Удалите дочерние узлы, которые лениво загружают данные. | function(id, list) — это идентификатор узла, который нужно обновить, и rowKey подбайта, который нужно удалить. |
| серийный номер | имя | иллюстрировать |
|---|---|---|
| 1 | прв | Используется для вставки столбца перед именем в списке. Если не работает, нужно добавить fixed |
| 2 | - | Столбец вставлен между столбцом по умолчанию и диаграммой Ганта. |
1.0.6 Исправлена ошибка, из-за которой график Ганта не планировался динамически, когда дата окончания задачи выходила за пределы диапазона времени проекта. Также было обнаружено, что использование useCard было неудовлетворительным;
1.0.5 При наведении курсора мыши добавить строку списка
Версия 1.0.3 исправляет ошибку отображения временного интервала более одного года и добавляет функцию плавающего окна, вызываемую щелчком правой кнопкой мыши;
Версия 1.0.2 добавляет параметры отложенной загрузки и загрузки, поддерживает отложенную загрузку и предоставляет методы для отложенной загрузки: Методы: 1, 2, 3 добавляет параметр ganttOnly для поддержки только отображения графики;
Версия 1.0.1 добавляет встроенный столбец флажка и столбец серийного номера; добавляет возможность редактирования параметра; изменяет значение параметра конфигурации встроенного столбца передней задачи на false добавляет атрибут связи родитель-потомок для проверки; поле добавляет редактируемую логику для столбца имени, добавляет события задачи;
Версия 1.0.0 добавляет встроенный столбец предварительной задачи, поддерживает предварительную позицию с множественным выбором и предварительную позицию с одним выбором, а также автоматически проверяет законность предварительной задачи исходных данных.
Версия 0.1.6 обновляет Гантт. 1. Таблица поддерживает большинство
AttributesиEventsel-table. 2. В столбце имени добавлена поддержка функции форматированного содержимогоnameFormatter. 3. Столбец даты изменен на поле ввода для редактирования, отображаемое щелчком мыши. Обратите внимание, что параметрrowKeyдолжен передаваться в древовидной таблице, а значением по умолчанию являетсяid.
Версия 0.1.5 обновляет дату Ганта для поддержки
yearAndMonth、monthAndDay、yearAndWeekи автоматической корректировки. Правила таковы: если она превышает 12 месяцев, она автоматически корректируется наyearAndMonth, если она находится в диапазоне от 3 до 12 месяцев. автоматически настраиваютсяyearAndWeek, 2 Month и меньше автоматически настраиваютсяmonthAndDay. Новый параметрautoGanttDateTypeпозволяет определить, следует ли выполнять автоматическую настройку. Если вы хотите отключить автоматическую настройку, убедитесь, что временной интервал как можно меньше, иначе возникнут очевидные проблемы с производительностью. Исправлена проблема, из-за которой вам не перезванивали, когда изменения происходили в определенное время.
