wl gantt

wl-แกนต์

การแนะนำ

แผนภูมิแกนต์เรียกอีกอย่างว่าแผนภูมิแท่งแนวนอน แผนภูมิแท่ง และแผนภูมิความคืบหน้าของแผนการผลิต ใช้แผนภูมิแท่งเพื่อแสดงความสัมพันธ์ภายในของโครงการ กำหนดการ และความคืบหน้าของระบบที่เกี่ยวข้องกับเวลาอื่นๆ ในช่วงเวลาหนึ่ง ตั้งชื่อตามผู้เสนอชื่อ นายเฮนรี ลอเรนซ์ แกนต์
ปลั๊กอินแกนต์ที่มีชื่อเสียงที่สุดในตลาดได้ครอบครองโลกมาเป็นเวลานาน แต่ไม่มีข้อยกเว้น: พวกเขาเรียกเก็บค่าธรรมเนียมหรือใช้งานยากมากและพึ่งพาเทคโนโลยีที่เก่ามาก ซึ่งบางคนที่มือใหม่ที่เข้าสู่อุตสาหกรรมทุกวันนี้ไม่เคยได้ยินเรื่องนี้มาก่อน
[jQueryGantt][plusgantt][dhtmlx] ปฏิเสธไม่ได้ว่าพวกมันทรงพลังมาก ทั้งในแง่ของประสิทธิภาพและฟังก์ชันการทำงาน แต่ความต้องการทางธุรกิจส่วนใหญ่ไม่จำเป็นต้องมีพฤติกรรมดังกล่าวเพื่อตอบสนองความต้องการ ในทางกลับกัน เอกสารที่หายากของเทคโนโลยีโบราณทำให้นักพัฒนาเริ่มต้นได้ยาก (เวอร์ชันที่ต้องชำระเงินไม่มีเอกสารให้ด้วยซ้ำ และเจ้านายของคุณจะไม่จัดหาเงินเพื่อซื้อใบอนุญาตอย่างแน่นอน)
พื้นหลังของการเกิดขึ้นของ wl-gantt คือความเสียหายใหญ่หลวงที่ฉันได้รับเมื่อใช้ปลั๊กอิน B***Gantt ในโครงการ Vue ของบริษัท: มันขึ้นอยู่กับ extjs (ฉันไม่เคยได้ยินเรื่องนี้มาก่อนตั้งแต่ฉันอยู่ใน อุตสาหกรรมเป็นเวลา 17 ปี) ไม่มีเอกสารการพัฒนา และไม่มีภาษาจีน ข้อมูลและซอร์สโค้ดถูกเข้ารหัส และการพัฒนาอาศัยตัวอย่างการพิมพ์ทั้งหมดเพื่อค้นหาคุณลักษณะ wl-gantt เป็นปลั๊กอินแผนภูมิแกนต์ที่ใช้ Vue และ elementUi ได้รับการพัฒนาโดยทาสโค้ด 896 ในเวลา 1 ชั่วโมงที่เหลือ
ฟังก์ชันที่มีให้ได้แก่: การตรวจสอบโดยอัตโนมัติว่าข้อมูลต้นฉบับเป็นไปตามกฎการจัดกำหนดการงานของโครงการ กฎก่อนงานเริ่มต้นหลังจากสิ้นสุด ปีและเดือน|ปีและสัปดาห์|การสลับช่วงวันที่ ManthAndDay และตัวจัดการก่อนงานในตัว
ข้อดีของมัน: เรียบง่ายมากและใช้งานง่าย และกำหนดค่าได้สูง ทำให้ข้อมูลที่ไม่เข้าเกณฑ์ราบรื่นและแจ้งพร้อมท์โดยอัตโนมัติ และจะไม่มีข้อยกเว้นเกิดขึ้นโดยไม่มีเหตุผล
มันค่อยๆ เติบโตขึ้น และในระยะต่อไป มันจะได้เรียนรู้:
1. การกำหนดค่าช่วงเวลา YearAndMonth, monthAndDay, yearAndWeek [เสร็จสิ้นแล้ว ตำแหน่งเริ่มต้นและสิ้นสุดของกริดเดือนและสัปดาห์จำเป็นต้องได้รับการปรับปรุง]
2. ตัวเลือกงานล่วงหน้าในตัว [เสร็จสมบูรณ์]
3. รวมฟังก์ชั่นการเชื่อมโยงที่เลือกทั้งหมดตารางต้นไม้ [เสร็จสมบูรณ์]
4. เพิ่มและลบการเรียกกลับงาน [เสร็จสมบูรณ์]
4. สายเชื่อมต่องาน
5. การแจ้งเตือนแบบลอยตัวที่กำหนดเองสำหรับงาน
6. และข้อกำหนดทั้งหมดที่คุณคิดว่าจำเป็นต้องใช้

การสาธิตออนไลน์ - GitHub

การเปรียบเทียบระหว่าง wl-gantt และปลั๊กอินนักเลงที่ใช้กันอย่างแพร่หลายในตลาด

wl-gantt มีรูปลักษณ์ที่เรียบง่ายและสดชื่น ใช้งานง่ายมาก และกำหนดค่าได้สูง

jquery Gantt มีขนาดใหญ่ เก่าและน่าเกลียด แต่มีเอกสารประกอบที่ชัดเจน

js gantt ฉันไม่อยากพูดมากกว่านี้

dhtmlxGantt มีประสิทธิภาพและครอบคลุม อย่างไรก็ตาม ใช้งานได้ยากและไม่เหมาะกับเฟรมเวิร์กสมัยใหม่และไลบรารี UI เป็นเรื่องยากที่จะนำไปใช้ในโปรเจ็กต์ได้อย่างสมบูรณ์แบบ

frappe-gantt มีฟังก์ชั่นไม่กี่อย่าง

bryntum เป็นเพียงสิ่งเดียวที่สวยงามกว่า แต่มีความสามารถในการกำหนดค่าต่ำและไม่สามารถรวมกับส่วนประกอบต่างๆ ได้ โดยจะรายงานข้อผิดพลาดและข้อขัดข้องโดยไม่ตรวจสอบความถูกต้องของข้อมูลต้นฉบับ กฎมีความเข้มงวดและไม่สอดคล้องกับค่าธรรมเนียมรายปี คือ 950$; มันมีประสิทธิภาพ แต่เอกสารประกอบให้เพียงการแนะนำสั้น ๆ และการใช้งานโดยละเอียดเท่านั้น สามารถพิมพ์ลงบนคอนโซลได้เท่านั้น

อัปเดตคำแนะนำ

2020-04-03 Lazy Loading 2020-02-20 อัปเดตแกนต์ ดูคำอธิบายเวอร์ชัน 1.0.1 สำหรับรายละเอียด 14-12-2019 อัปเดตแกนต์ เพิ่มคอลัมน์งานส่วนหน้าในตัว รองรับส่วนหน้าแบบเลือกได้หลายรายการ และ ส่วนหน้าแบบเลือกเดียว และตรวจสอบความถูกต้องตามกฎหมายของงานข้อมูลต้นฉบับล่วงหน้าโดยอัตโนมัติ 2019-12-3 อัปเดตแกนต์ 1. ตารางรองรับ Attributes และ Events ส่วนใหญ่ของ el-table ดูรายการโดยละเอียดด้านล่าง 2. คอลัมน์ชื่อเพิ่มการรองรับฟังก์ชันเนื้อหาที่จัดรูปแบบ nameFormatter 3. คอลัมน์วันที่ถูกเปลี่ยนเป็นคลิกเพื่อแสดง แก้ไขช่องป้อนข้อมูล
2019-12-2 อัปเดตวันที่ gantt.1 เพื่อ yearAndMonth、monthAndDay、yearAndWeek ดู版本记录1 เพื่อดูรายละเอียด 2 แก้ไขปัญหาไม่มีการโทรกลับในบางครั้งที่เปลี่ยนแปลง

รองรับพารามิเตอร์ el-table และรายการเหตุการณ์แล้ว

    :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	ตรวจสอบแหล่งที่มา	ไม่ว่าจะตรวจสอบว่าข้อมูลต้นฉบับเป็นไปตามกฎหรือไม่	บูลีน	-	-	ตรวจสอบแหล่งข้อมูลเพื่อแก้ไขเวลาที่ไม่ตรงตามข้อกำหนดโดยอัตโนมัติให้เป็นค่าที่คาดหวังซึ่งตรงตามกฎ
7	รักษา IdAsIdentityId	จะใช้ id เป็น id ที่เพิ่มขึ้นอัตโนมัติหรือไม่	บูลีน	-	เท็จ	หากเป็นเช่นนั้น โปรดตรวจสอบให้แน่ใจว่า ID นั้นเป็นตัวเลขสั้น แทนที่จะเป็นสตริงหรือ guid ที่ยาวกว่า
8	autoGanttDateType	ปรับประเภทช่วงเวลาแกนต์โดยอัตโนมัติ สำหรับกฎเฉพาะ โปรดดู版本记录1	บูลีน	-	จริง	-
9	ชื่อฟอร์แมตเตอร์	ฟังก์ชันเนื้อหารูปแบบคอลัมน์ชื่อ	การทำงาน	-	-	ฟังก์ชั่น (แถว, คอลัมน์, ค่าเซลล์, ดัชนี)
10	คุณสมบัติตารางอื่น ๆ	ที่อยู่เอกสาร	-	-	-	-
11	ใช้PreColumn	ว่าจะใช้แถบงานด้านหน้าในตัวหรือไม่	บูลีน	-	เท็จ	-
12	ก่อนหลายรายการ	สามารถเลือกได้หลายรายการสำหรับงานที่จำเป็นเบื้องต้นหรือไม่	บูลีน	-	จริง	หากเปิดใช้งานการเลือกหลายรายการ ฟิลด์ก่อนหน้าจะต้องเป็น Array ไม่เช่นนั้นอาจเป็น NumberString ได้
13	พรีฟอร์แมตเตอร์	ฟังก์ชั่นการจัดรูปแบบคอลัมน์คำนำหน้าเนื้อหา	การทำงาน	-	-	หากไม่ผ่านจะประกบกันตาม prop name字段+，
14	ข้อความเซลล์ว่างเปล่า	ตัวยึดตำแหน่งเซลล์ค่า Null	สตริง	-	-	-
15	ใช้ CheckColumn	จะใช้คอลัมน์ช่องทำเครื่องหมายในตัวหรือไม่	บูลีน	-	เท็จ	-
16	ใช้IndexColumn	ว่าจะใช้คอลัมน์หมายเลขซีเรียลในตัวหรือไม่	บูลีน	-	เท็จ	-
17	แก้ไข	สามารถแก้ไขได้หรือไม่?	บูลีน	-	จริง	-
18	ผู้ปกครองเด็ก	เมื่อใช้ช่องทำเครื่องหมายว่ามีความสัมพันธ์แบบพ่อแม่ลูกหรือไม่	บูลีน	-	จริง	ต้องกำหนดค่าฟิลด์ id และฟิลด์ย่อยของอุปกรณ์ประกอบฉาก
19	แกนต์เท่านั้น	ไม่ว่าจะแสดงเฉพาะกราฟิกหรือไม่	บูลีน	-	เท็จ	-
20	ขี้เกียจ	เช่นเดียวกับ el-table	บูลีน	-	เท็จ	-
ยี่สิบเอ็ด	โหลด	เช่นเดียวกับ el-table	การทำงาน	-	-	-
ยี่สิบสอง	บริบทตัวเลือกเมนู	คลิกขวาที่รายการการกำหนดค่าหน้าต่างลอย หากมีอยู่ ให้คลิกแกนต์เพื่อคลิกขวาเพื่อแสดงข้อมูลหน้าต่างลอยที่กำหนดค่าไว้	อาร์เรย์	-	-	คุณสมบัติของวัตถุในอาร์เรย์ประกอบด้วย: * @param {String} ชื่อที่แสดงป้ายกำกับ * @param {String} prop bound field * @param {String} ไอคอน คลาสไอคอนแบบอักษรเสริม
ยี่สิบสาม	ใช้เรียลไทม์	ไม่ว่าจะใช้เวลาเริ่มต้นจริงและเวลาสิ้นสุดจริงหรือไม่ หากเปิดใช้งาน แถบสีน้ำตาลแดงของเวลาจริงจะแสดงอยู่นอกแถบสีน้ำเงินของเวลาที่วางแผนไว้	บูลีน	-	เท็จ	-
ยี่สิบสี่	ใช้การ์ด	จะใช้หน้าต่างโฮเวอร์ของตารางหรือไม่	บูลีน	-	เท็จ	-

รายการการกำหนดค่าอุปกรณ์ประกอบฉาก

หมายเลขซีเรียล	พารามิเตอร์	แสดงให้เห็น	ค่าเริ่มต้น
1	เด็ก	ฟิลด์ย่อยซึ่งเป็นชุดย่อยของข้อมูล ซึ่งแสดงเป็นตารางแผนผัง	เด็ก
2	ชื่อ	ช่องที่ใช้แสดงชื่อ	ชื่อ
3	บัตรประจำตัวประชาชน	รหัสของข้อมูลแต่ละชิ้นจะต้องไม่ซ้ำกัน	บัตรประจำตัวประชาชน
4	ปิ๊ด	ช่อง ID โหนดพาเรนต์ของข้อมูลแต่ละชิ้น	ปิ๊ด
5	วันที่เริ่มต้น	ฟิลด์เวลาเริ่มต้นของข้อมูลแต่ละชิ้น	วันที่เริ่มต้น
6	วันที่สิ้นสุด	ฟิลด์เวลาสิ้นสุดของข้อมูลแต่ละชิ้น	วันที่สิ้นสุด
7	รหัสประจำตัว	รหัสการเพิ่มข้อมูลอัตโนมัติ	รหัสประจำตัว
8	ผู้ปกครอง	ต้นไม้ ID หลักที่เพิ่มขึ้นอัตโนมัติ โดยคั่นด้วยเครื่องหมายจุลภาค	ผู้ปกครอง
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	โหลดทรี	เรียกตารางต้นไม้แบบ Lazy Loading ด้วยตนเอง	function(row) คือข้อมูลแถวที่จะขยายตามลำดับ
2	โหลด TreeAdd	อัปเดตโหนดย่อยของตารางแผนผังหลังจากโหลดแบบ Lazy Loading	function(id, list) คือ id โหนดที่จะอัปเดตและรายการโหนดย่อยที่จะเพิ่ม โปรดทราบว่านี่คือรายการที่ผสานและข้อมูลโหนดย่อยดั้งเดิม
3	โหลด TreeRemove	ลบโหนดย่อยที่โหลดข้อมูลอย่างเกียจคร้าน	function(id, list) คือ id โหนดที่จะอัปเดตและ rowKey ของไบต์ย่อยที่จะถูกลบ

สล็อต

หมายเลขซีเรียล	ชื่อ	แสดงให้เห็น
1	ราคา	ใช้เพื่อแทรกคอลัมน์หน้าชื่อในรายการ หากไม่ได้ผล คุณต้องเพิ่ม fixed
2	-	คอลัมน์ที่แทรกระหว่างคอลัมน์เริ่มต้นและแผนภูมิแกนต์

บันทึกเวอร์ชัน

1.0.6 แก้ไขข้อผิดพลาดที่กราฟแกนต์ไม่ได้รับการวางแผนแบบไดนามิกเมื่อวันที่สิ้นสุดของงานมีการเปลี่ยนแปลงเกินช่วงเวลาของโครงการ นอกจากนี้ยังพบว่าประสบการณ์การใช้งาน useCard ไม่ดี

1.0.5 เพิ่มหน้าต่างโฮเวอร์แถวรายการ

เวอร์ชัน 1.0.3 แก้ไขข้อผิดพลาดในการแสดงช่วงเวลามากกว่าหนึ่งปี เพิ่มฟังก์ชันหน้าต่างลอยแบบคลิกขวา

เวอร์ชัน 1.0.2 เพิ่มพารามิเตอร์ Lazy และ Load รองรับ Lazy Loading และจัดเตรียมวิธีการสำหรับ Lazy Loading: วิธีการ: 1, 2, 3; เพิ่มพารามิเตอร์ ganttOnly เพื่อรองรับการแสดงกราฟิกเท่านั้น

เวอร์ชัน 1.0.1 เพิ่มคอลัมน์กล่องกาเครื่องหมายในตัวและคอลัมน์หมายเลขซีเรียล เพิ่มว่าพารามิเตอร์สามารถแก้ไขได้หรือไม่ เปลี่ยนค่าพารามิเตอร์การกำหนดค่าคอลัมน์งานด้านหน้าเป็นเท็จ เพิ่มแอตทริบิวต์การเชื่อมโยงหลักและลูกของเช็ค กล่อง เพิ่มตรรกะที่สามารถแก้ไขได้สำหรับคอลัมน์ชื่อ เพิ่ม ลบเหตุการณ์งาน;

เวอร์ชัน 1.0.0 เพิ่มคอลัมน์ก่อนงานในตัว รองรับตำแหน่งล่วงหน้าแบบเลือกได้หลายรายการและตำแหน่งล่วงหน้าแบบเลือกเดี่ยว และตรวจสอบความถูกต้องตามกฎหมายของงานล่วงหน้าของข้อมูลต้นฉบับโดยอัตโนมัติ

เวอร์ชัน 0.1.6 อัปเดตแกนต์ 1. ตารางรองรับ Attributes และ Events ส่วนใหญ่ของ el-table; 2. คอลัมน์ชื่อเพิ่มการสนับสนุนสำหรับฟังก์ชันเนื้อหาที่จัดรูปแบบ nameFormatter ; 3. คอลัมน์วันที่ถูกเปลี่ยนเป็นช่องป้อนข้อมูลแก้ไขแบบคลิกเพื่อแสดง โปรดทราบว่าจะต้องส่งพารามิเตอร์ rowKey ในตารางแผนผัง และค่าเริ่มต้นคือ id

เวอร์ชัน 0.1.5 อัปเดตแกนต์วันที่เพื่อรองรับประเภท yearAndMonth、monthAndDay、yearAndWeek และปรับอัตโนมัติ กฎคือ: หากเกิน 12 เดือน ระบบจะปรับเป็น yearAndMonth โดยอัตโนมัติ หากอยู่ระหว่าง 3 เดือนถึง 12 เดือน จะปรับเป็น yearAndWeek โดยอัตโนมัติ ส่วน 2 เดือนหรือน้อยกว่านั้นจะถูกปรับเป็น monthAndDay โดยอัตโนมัติ พารามิเตอร์ใหม่ autoGanttDateType สามารถจัดการได้ว่าจะปรับโดยอัตโนมัติหรือไม่ หากคุณต้องการปิดการปรับอัตโนมัติ โปรดตรวจสอบให้แน่ใจว่าช่วงเวลามีน้อยที่สุดเท่าที่จะเป็นไปได้ มิฉะนั้นจะเกิดปัญหาด้านประสิทธิภาพที่ชัดเจน แก้ไขปัญหาการไม่ถูกเรียกกลับเมื่อมีการเปลี่ยนแปลงเกิดขึ้นในบางช่วงเวลา