wl gantt

wl-gantt

Perkenalan

Bagan Gantt juga disebut bagan batang horizontal, bagan batang, dan bagan kemajuan rencana produksi. Ini menggunakan diagram batang untuk menampilkan hubungan internal proyek, jadwal, dan kemajuan sistem terkait waktu lainnya dari waktu ke waktu. Dinamakan menurut pengusulnya, Tuan Henry Laurence Gantt.
Plug-in gantt paling terkenal di pasaran telah lama menduduki dunia. Mereka kuno dan kuat. Namun tanpa kecuali: mereka mengenakan biaya atau sangat sulit digunakan dan bergantung pada teknologi yang sangat tua, yang beberapa di antaranya bahkan belum pernah didengar oleh para pemula yang memasuki industri ini.
[jQueryGantt] [plusgantt] [dhtmlx] Tidak dapat disangkal bahwa mereka sangat kuat, baik dari segi kinerja dan fungsionalitas. Namun sebagian besar kebutuhan bisnis tidak memerlukan raksasa seperti itu untuk memenuhi kebutuhannya. Di sisi lain, langkanya dokumentasi teknologi kuno menyulitkan pengembang untuk memulai (versi berbayar bahkan tidak menyediakan dokumentasi, dan atasan Anda pasti tidak akan memberikan uang untuk membeli lisensi).
Latar belakang munculnya wl-gantt adalah kerugian besar yang saya derita saat menggunakan plug-in B***Gantt di proyek Vue perusahaan: ini didasarkan pada extjs (Saya belum pernah mendengarnya sejak saya berada di industri selama 17 tahun), tidak ada dokumentasi pengembangan yang disediakan, dan tidak ada bahasa Mandarin. Data dan kode sumber dienkripsi, dan pengembangan sepenuhnya bergantung pada contoh pencetakan untuk menemukan atribut. wl-gantt adalah plug-in gantt Gantt chart berdasarkan Vue dan elementUi. Ini dikembangkan oleh budak kode 896 dalam 1 jam tersisa.
Fungsi yang disediakannya meliputi: secara otomatis memeriksa apakah data sumber mematuhi aturan penjadwalan tugas proyek, aturan pratugas yang dimulai setelah akhir, peralihan rentang tanggal tahunDanbulan|tahunDanMinggu|ManthAndDay, dan pengelola pratugas bawaan.
Keuntungannya: sangat sederhana dan mudah digunakan, dan sangat dapat dikonfigurasi, secara otomatis memuluskan data yang tidak memenuhi syarat dan memberikan petunjuk, dan tidak ada pengecualian yang akan terjadi tanpa alasan.
Ia bertumbuh secara bertahap, dan pada tahap selanjutnya, ia akan belajar:
1. Konfigurasi rentang waktu TahunDanBulan, BulanDanHari, TahunDanMinggu [selesai, posisi awal dan akhir kisi bulan dan minggu perlu disempurnakan]
2. Pemilih pra-tugas bawaan [Selesai]
3. Integrasikan fungsi tautan semua pilihan tabel pohon [Selesai]
4. Menambah dan menghapus panggilan balik tugas [Selesai]
4. Jalur koneksi tugas
5. Perintah mengambang yang disesuaikan untuk tugas
6. Dan semua persyaratan yang menurut Anda perlu Anda gunakan

Demo daring - GitHub

Perbandingan antara wl-gantt dan plug-in gangster yang banyak digunakan di pasaran

wl-gantt memiliki tampilan yang sederhana dan menyegarkan, sangat mudah digunakan, dan sangat dapat dikonfigurasi.

jquery Gantt berukuran besar, tua dan jelek tetapi dokumentasinya jelas

js gantt aku tak mau bicara lebih banyak lagi

dhtmlxGantt kuat dan komprehensif; namun sulit digunakan dan tidak cocok untuk kerangka kerja modern dan perpustakaan UI. Sulit untuk menerapkannya dengan sempurna dalam proyek.

frappe-gantt memiliki sedikit fungsi

bryntum adalah satu-satunya yang lebih indah, tetapi memiliki kemampuan konfigurasi yang buruk dan tidak dapat digabungkan dengan komponen; ia melaporkan kesalahan dan kerusakan tanpa memverifikasi kebenaran data sumber; aturannya kaku dan tidak sesuai dengan biaya tahunan; adalah $950; ini sangat kuat tetapi dokumentasinya hanya memberikan pengenalan singkat dan penggunaan terperinci

Perbarui instruksi

03-04-2020 Pemuatan lambat 20-02-2020 Gantt yang diperbarui, lihat deskripsi versi 1.0.1 untuk detailnya 14-12-2019 Gantt yang diperbarui, menambahkan kolom tugas front-end bawaan, mendukung front-end multi-pilihan dan front-end pilihan tunggal, dan secara otomatis Memverifikasi legalitas pra-tugas data sumber. 2019-12-3 Perbarui gantt. 1. Tabel mendukung sebagian besar Attributes dan Events dari el-tabel. Lihat daftar detail di bawah; 2. Kolom nama menambahkan dukungan untuk fungsi konten berformat nameFormatter 3. Kolom tanggal diubah menjadi klik untuk menampilkan edit kotak masukan.
2-12-2019 Memperbarui tanggal gantt.1 untuk yearAndMonth、monthAndDay、yearAndWeek , lihat版本记录1 untuk detailnya; 2 memperbaiki masalah tidak adanya panggilan balik dalam beberapa perubahan waktu.

Sudah mendukung parameter el-tabel dan daftar event

    :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"

Mulailah dengan cepat

npm i wl-gantt --save

atau

npm i wl-gantt -S

import wlGantt from 'wl-gantt'

import "wl-gantt/lib/wl-gantt.css"

Vue.use(wlGantt)

dokumen

Parameter atribut

nomor seri	parameter	menjelaskan	jenis	Nilai opsional	nilai bawaan	Melihat
1	data	data	Himpunan	-	[]	-
2	tipe tanggal	tipe header tanggal area bagan gantt	Rangkaian	bulanDanHari, tahunDanBulan, tahunDanHari	tahunDanBulan	-
3	alat peraga pohon	Item konfigurasi tabel pohon	Obyek	-	-	Lihat alat peraga di bawah
4	tanggal mulai	Waktu mulai proyek	Tali、Objek	Diperlukan	-	Catatan: Garis waktu tugas tidak harus berada dalam waktu mulai proyek, dan ketika waktu tugas melebihi waktu proyek, waktu proyek akan diperbarui
5	tanggal akhir	Waktu berakhirnya proyek	Tali、Objek	Diperlukan	-	Catatan: Garis waktu tugas tidak harus berada dalam waktu mulai proyek, dan ketika waktu tugas melebihi waktu proyek, waktu proyek akan diperbarui
6	periksaSumber	Apakah akan memeriksa apakah data sumber mematuhi aturan	Boolean	-	-	Periksa data sumber untuk secara otomatis mengubah waktu yang tidak memenuhi spesifikasi ke nilai yang diharapkan yang memenuhi aturan.
7	perlakukanIdAsIdentityId	Apakah akan menggunakan id sebagai id kenaikan otomatis	Boolean	-	PALSU	Jika demikian, harap pastikan bahwa ID tersebut berupa angka pendek, bukan string atau panduan yang lebih panjang.
8	autoGanttDateType	Secara otomatis menyesuaikan jenis rentang waktu gantt. Untuk aturan spesifik, lihat版本记录1	Boolean	-	BENAR	-
9	namaFormatter	Fungsi konten format kolom nama	Fungsi	-	-	Fungsi (baris, kolom, cellValue, indeks)
10	Atribut Tabel Lainnya	Alamat dokumen	-	-	-	-
11	gunakanPreColumn	Apakah akan menggunakan bilah tugas depan bawaan	Boolean	-	PALSU	-
12	praBeberapa	Bisakah beberapa pilihan dibuat untuk tugas-tugas prasyarat?	Boolean	-	BENAR	Jika multi-pilihan diaktifkan, kolom awal harus berupa Array, jika tidak maka dapat berupa NumberString
13	praFormatter	Fungsi pemformatan kolom konten awalan	Fungsi	-	-	Jika tidak lolos maka akan disambung sesuai dengan prop name字段+，
14	kosongCellText	Placeholder sel nilai nol	Rangkaian	-	'-'	-
15	gunakanCheckColumn	Apakah akan menggunakan kolom kotak centang bawaan	Boolean	-	PALSU	-
16	gunakanIndexColumn	Apakah akan menggunakan kolom nomor seri bawaan	Boolean	-	PALSU	-
17	sunting	Apakah itu dapat diedit?	Boolean	-	BENAR	-
18	orang tuaAnak	Saat menggunakan kotak centang, apakah ada hubungan orangtua-anak	Boolean	-	BENAR	Bidang id dan anak-anak dari alat peraga harus dikonfigurasi
19	hanya gantt	Apakah hanya menampilkan grafik saja	Boolean	-	PALSU	-
20	malas	Sama seperti el-tabel	Boolean	-	PALSU	-
dua puluh satu	memuat	Sama seperti el-tabel	Fungsi	-	-	-
dua puluh dua	konteksMenuOptions	Klik kanan item konfigurasi jendela mengambang. Jika ada, klik gantt untuk mengklik kanan untuk menampilkan informasi jendela mengambang yang dikonfigurasi.	Himpunan	-	-	Properti objek dalam array meliputi: * @param {String} nama tampilan label * @param {String} bidang terikat prop * @param {String} ikon kelas ikon font opsional
dua puluh tiga	gunakan RealTime	Apakah akan menggunakan waktu mulai aktual dan waktu berakhir aktual. Jika diaktifkan, bilah waktu aktual berwarna coklat-merah akan ditampilkan di luar bilah biru waktu yang direncanakan.	Boolean	-	PALSU	-
dua puluh empat	gunakanCard	Apakah akan menggunakan jendela hover tabel	Boolean	-	PALSU	-

item konfigurasi alat peraga

nomor seri	parameter	menjelaskan	nilai bawaan
1	anak-anak	Bidang anak, subkumpulan data, direpresentasikan sebagai tabel pohon	anak-anak
2	nama	Bidang yang digunakan untuk menampilkan nama	nama
3	PENGENAL	Id setiap bagian data harus unik	PENGENAL
4	pid	Bidang id simpul induk dari setiap bagian data	pid
5	tanggal mulai	Bidang waktu mulai setiap bagian data	tanggal mulai
6	tanggal akhir	Bidang waktu akhir setiap bagian data	tanggal akhir
7	identitasId	Id penambahan data otomatis	identitasId
8	orang tua	Pohon id induk bertambah secara otomatis, dipisahkan koma	orang tua
9	pra	Bidang tugas pendahulunya, nilai bidang harus berupa id tugas pendahulunya	pra
10	memiliki anak-anak	Tentukan baris mana yang berisi node anak	memiliki anak-anak
11	tanggal mulai nyata	bidang waktu mulai sebenarnya	tanggal akhir nyata
12	tanggal akhir nyata	bidang waktu akhir aktual	tanggal akhir nyata

Acara

nomor seri	nama acara	menjelaskan	parameter panggilan balik
1	perubahan waktu	Dipicu ketika waktu tugas berubah	function(row) adalah data baris saat ini pada gilirannya
2	Acara Meja Lainnya	Alamat dokumen	-
3	praperubahan	Peristiwa modifikasi tugas pendahulunya	function(row) adalah data baris saat ini pada gilirannya
4	Ganti nama	acara modifikasi nama	function(row) adalah data baris saat ini pada gilirannya
5	tugasTambahkan	Tambahkan acara tugas	function(row) adalah data baris saat ini pada gilirannya
6	tugasHapus	Hapus acara tugas	function(row) adalah data baris saat ini pada gilirannya

Metode

nomor seri	nama metode	menjelaskan	parameter panggilan balik
1	loadTree	Memanggil pemuatan lambat tabel pohon secara manual	function(row) adalah informasi baris yang akan diperluas secara bergantian
2	memuatTreeAdd	Perbarui node anak tabel pohon setelah pemuatan lambat	function(id, list) adalah id node yang akan diperbarui dan daftar node anak yang akan ditambahkan. Perhatikan bahwa ini adalah daftar gabungan dan data node anak asli.
3	memuatTreeRemove	Hapus node anak yang lambat memuat data	function(id, list) adalah id node yang akan diperbarui dan rowKey dari subbyte yang akan dihapus.

celah

nomor seri	nama	menjelaskan
1	prv	Digunakan untuk menyisipkan kolom sebelum nama dalam daftar. Jika tidak berhasil, Anda perlu menambahkan fixed
2	-	Kolom disisipkan di antara kolom default dan bagan Gantt

catatan versi

1.0.6 Memperbaiki kesalahan grafik gantt yang tidak direncanakan secara dinamis ketika tanggal akhir tugas diubah di luar rentang waktu proyek; juga ditemukan bahwa pengalaman useCard tidak baik

1.0.5 Tambahkan jendela hover baris daftar

Versi 1.0.3, memperbaiki kesalahan tampilan rentang waktu lebih dari satu tahun; menambahkan fungsi jendela mengambang klik kanan

Versi 1.0.2, menambahkan parameter malas dan memuat, mendukung pemuatan lambat, dan menyediakan metode untuk pemuatan lambat: Metode: 1, 2, 3; menambahkan parameter ganttOnly untuk mendukung tampilan grafik saja

Versi 1.0.1 menambahkan kolom kotak centang bawaan dan kolom nomor seri; menambahkan apakah parameter dapat diedit; mengubah nilai parameter konfigurasi kolom tugas depan menjadi salah; kotak; menambahkan logika yang dapat diedit untuk kolom nama menambahkan, menghapus acara tugas;

Versi 1.0.0 menambahkan kolom pra-tugas bawaan, mendukung pra-posisi multi-seleksi dan pra-posisi pilihan tunggal, dan secara otomatis memverifikasi legalitas pra-tugas data sumber.

Versi 0.1.6 update gantt. 1. Tabel mendukung sebagian besar Attributes dan Events dari el-tabel; 2. Kolom nama menambahkan dukungan untuk fungsi konten berformat nameFormatter ; 3. Kolom tanggal diubah menjadi kotak input edit klik untuk ditampilkan. Perhatikan bahwa parameter rowKey harus diteruskan dalam tabel pohon, dan defaultnya adalah id .

Versi 0.1.5 memperbarui tanggal gantt untuk mendukung tipe yearAndMonth、monthAndDay、yearAndWeek , dan aturannya secara otomatis adalah: jika lebih dari 12 bulan, maka secara otomatis akan menyesuaikan ke yearAndMonth , jika antara 3 bulan dan 12 bulan maka akan otomatis menyesuaikan ke yearAndMonth . akan secara otomatis menyesuaikan ke yearAndWeek , 2 Bulan dan kurang secara otomatis disesuaikan ke monthAndDay . Parameter baru autoGanttDateType dapat mengatur apakah akan menyesuaikan secara otomatis. Jika Anda ingin menonaktifkan penyesuaian otomatis, pastikan rentang waktunya sekecil mungkin, jika tidak maka akan ada masalah kinerja yang jelas. Memperbaiki masalah tidak dipanggil kembali ketika terjadi perubahan pada waktu tertentu.