wl gantt

wl-gantt

مقدمة

يُطلق على مخطط جانت أيضًا اسم المخطط الشريطي الأفقي والمخطط الشريطي ومخطط تقدم خطة الإنتاج. ويستخدم مخططًا شريطيًا لعرض العلاقات الداخلية للمشاريع والجداول الزمنية وتقدم النظام الآخر المرتبط بالوقت بمرور الوقت. سميت على اسم مقدم الاقتراح، السيد هنري لورانس جانت.
أشهر المكونات الإضافية جانت في السوق احتلت العالم لفترة طويلة، فهي قديمة وقوية. ولكن بدون استثناء: فهي تفرض رسومًا أو يصعب استخدامها للغاية وتعتمد على تكنولوجيا قديمة جدًا، وبعضها لم يسمع عنها المبتدئون الذين يدخلون الصناعة اليوم.
[jQueryGantt] [plusgantt] [dhtmlx] لا يمكن إنكار أنها قوية جدًا، سواء من حيث الأداء أو الوظيفة. لكن معظم احتياجات الأعمال لا تتطلب مثل هذا العملاق لتلبية الاحتياجات. من ناحية أخرى، فإن التوثيق الشحيح للتقنيات القديمة يجعل من الصعب على المطورين البدء (النسخة المدفوعة لا توفر حتى الوثائق، ومن المؤكد أن رئيسك لن يوفر المال لشراء الترخيص).
خلفية ظهور wl-gantt هي الضرر الكبير الذي تعرضت له عند استخدام البرنامج الإضافي B***Gantt في مشروع Vue الخاص بالشركة: فهو يعتمد على extjs (لم أسمع به مطلقًا منذ أن كنت في الصناعة لمدة 17 عامًا)، لا يتم توفير وثائق التطوير، ولا توجد بيانات باللغة الصينية، ويتم تشفير كود المصدر، ويعتمد التطوير بالكامل على أمثلة الطباعة للعثور على السمات. wl-gantt عبارة عن مكون إضافي لمخطط جانت يعتمد على Vue وelementUi، وقد تم تطويره بواسطة تابع كود 896 في الساعة المتبقية.
تشمل الوظائف التي يوفرها ما يلي: التحقق تلقائيًا مما إذا كانت بيانات المصدر تتوافق مع قواعد جدولة مهام المشروع، وقواعد ما قبل المهمة التي تبدأ بعد النهاية، وتبديل نطاق التاريخ yearAndmonth|yearAndWeek|ManthAndDay، ومدير المهام المسبق المدمج.
مزاياه: بسيط للغاية وسهل الاستخدام، وقابل للتكوين بدرجة كبيرة، مما يؤدي تلقائيًا إلى تسوية البيانات غير المؤهلة وإعطاء المطالبات، ولن تحدث أي استثناءات بدون سبب.
فهو يكبر تدريجياً، وفي المرحلة التالية سوف يتعلم:
1. تكوين النطاق الزمني YearAndMonth، MonthAndDay، yearAndWeek [اكتمل، يجب تحسين مواضع البداية والنهاية لشبكات الشهر والأسبوع]
2. محدد المهام المسبقة المدمج [مكتمل]
3. دمج وظيفة الربط المحددة للجدول الشجري [مكتمل]
4. إضافة وإزالة ردود الاتصال للمهام [مكتمل]
4. خط اتصال المهام
5. مطالبات عائمة مخصصة للمهام
6. وجميع المتطلبات التي تعتقد أنك بحاجة إلى استخدامها

العرض التوضيحي عبر الإنترنت - جيثب

مقارنة بين wl-gantt والمكونات الإضافية المستخدمة على نطاق واسع في السوق

يتميز wl-gantt بمظهر بسيط ومنعش، وسهل الاستخدام للغاية، وقابل للتكوين بشكل كبير.

jquery Gantt ضخم وقديم وقبيح لكن الوثائق واضحة

js gantt لا أريد أن أقول المزيد

dhtmlxGantt قوي وشامل، ومع ذلك، فمن الصعب استخدامه وغير مناسب للأطر الحديثة ومكتبات واجهة المستخدم.

فراب جانت لديه وظائف قليلة

bryntum هو الوحيد الأجمل، ولكن قابليته للتكوين ضعيفة ولا يمكن دمجه مع المكونات؛ فهو يبلغ عن الأخطاء والأعطال دون التحقق من صحة بيانات المصدر؛ سعره 950 دولارًا؛ وهو قوي ولكن الوثائق توفر فقط مقدمة مختصرة واستخدامًا تفصيليًا لا يمكن طباعته إلا على وحدة التحكم

تحديث التعليمات

03-04-2020 تحميل بطيء 20-02-2020 تم تحديث جانت، راجع وصف الإصدار 1.0.1 للحصول على التفاصيل 14-12-2019 تم تحديث جانت، وإضافة عمود مهام أمامي مدمج، ودعم الواجهة الأمامية متعددة التحديد و واجهة أمامية ذات تحديد واحد، والتحقق تلقائيًا من شرعية المهام المسبقة لبيانات المصدر. 2019-12-3 تحديث جانت. 1. يدعم الجدول معظم Attributes Events الجدول. راجع القائمة التفصيلية أدناه؛ 2. يضيف عمود الاسم دعمًا لوظيفة المحتوى المنسق nameFormatter . 3. يتم تغيير عمود التاريخ إلى النقر للعرض تحرير مربع الإدخال.
2019-12-2 تم ​​تحديث تاريخ gantt.1 yearAndMonth、monthAndDay、yearAndWeek ، راجع版本记录1 للحصول على التفاصيل؛ 2 تم إصلاح مشكلة عدم رد الاتصال في بعض التغييرات الزمنية.

يدعم بالفعل معلمات الجدول وقائمة الأحداث

    :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	نوع التاريخ	نوع رأس تاريخ منطقة مخطط جانت	خيط	الشهر واليوم والسنة والشهر والسنة واليوم	yearAndMonth	-
3	TreeProps	عناصر تكوين جدول الشجرة	هدف	-	-	انظر الدعائم أدناه
4	تاريخ البدء	وقت بدء المشروع	سلسلة، كائن	مطلوب	-	ملاحظة: لا يشترط أن يكون الجدول الزمني للمهمة ضمن وقت بدء المشروع، وعندما يتجاوز وقت المهمة وقت المشروع، سيتم تحديث وقت المشروع
5	تاريخ الانتهاء	وقت نهاية المشروع	سلسلة، كائن	مطلوب	-	ملاحظة: لا يشترط أن يكون الجدول الزمني للمهمة ضمن وقت بدء المشروع، وعندما يتجاوز وقت المهمة وقت المشروع، سيتم تحديث وقت المشروع
6	checkSource	ما إذا كان سيتم التحقق من أن البيانات المصدر تتوافق مع القواعد	منطقية	-	-	تحقق من البيانات المصدر لتعديل الوقت الذي لا يلبي المواصفات تلقائيًا إلى القيمة المتوقعة التي تفي بالقواعد.
7	علاجIdAsIdentityId	ما إذا كان سيتم استخدام المعرف كمعرف الزيادة التلقائية	منطقية	-	خطأ شنيع	إذا كان الأمر كذلك، فيرجى التأكد من أن المعرف عبارة عن رقم قصير وليس سلسلة أو دليل أطول.
8	autoGanttDateType	ضبط نوع النطاق الزمني جانت تلقائيًا للحصول على قواعد محددة، راجع版本记录1	منطقية	-	حقيقي	-
9	nameFormatter	وظيفة محتوى تنسيق عمود الاسم	وظيفة	-	-	الوظيفة (الصف، العمود، قيمة الخلية، الفهرس)
10	سمات الجدول الأخرى	عنوان الوثيقة	-	-	-	-
11	usePreColumn	ما إذا كان سيتم استخدام شريط المهام الأمامي المدمج	منطقية	-	خطأ شنيع	-
12	preMultiple	هل يمكن إجراء تحديدات متعددة للمهام المطلوبة مسبقًا؟	منطقية	-	حقيقي	إذا تم تمكين الاختيار المتعدد، فيجب أن يكون الحقل المسبق هو Array، وإلا فيمكن أن يكون NumberString
13	preFormatter	وظيفة تنسيق عمود محتوى البادئة	وظيفة	-	-	إذا لم يتم تمريره، فسيتم ربطه وفقًا prop name字段+，
14	فارغةCellText	العنصر النائب لخلية القيمة الخالية	خيط	-	'-'	-
15	useCheckColumn	ما إذا كان سيتم استخدام عمود مربع الاختيار المدمج أم لا	منطقية	-	خطأ شنيع	-
16	useIndexColumn	ما إذا كان سيتم استخدام عمود الرقم التسلسلي المدمج	منطقية	-	خطأ شنيع	-
17	يحرر	هل هي قابلة للتحرير؟	منطقية	-	حقيقي	-
18	com.parentChild	عند استخدام مربعات الاختيار، ما إذا كانت العلاقة بين الوالدين والطفل	منطقية	-	حقيقي	يجب تكوين حقول الدعائم الخاصة بالمعرف والأطفال
19	جانت فقط	ما إذا كان سيتم عرض الرسومات فقط	منطقية	-	خطأ شنيع	-
20	كسول	نفس الجدول	منطقية	-	خطأ شنيع	-
واحد وعشرون	حمولة	نفس الجدول	وظيفة	-	-	-
إثنان وعشرون	contextMenuOptions	انقر بزر الماوس الأيمن فوق عنصر تكوين النافذة العائمة، إذا كان موجودًا، فانقر فوق gantt للنقر بزر الماوس الأيمن لعرض معلومات النافذة العائمة التي تم تكوينها.	صفيف	-	-	تتضمن خصائص الكائن في المصفوفة ما يلي: * اسم عرض التسمية @param {String} * حقل دعم @param {String} * رمز @param {String} فئة رمز الخط الاختياري
ثلاثة وعشرين	useRealTime	ما إذا كان سيتم استخدام وقت البدء الفعلي ووقت الانتهاء الفعلي، إذا تم تمكينه، فسيتم عرض شريط بني-أحمر للوقت الفعلي خارج الشريط الأزرق للوقت المخطط.	منطقية	-	خطأ شنيع	-
أربعة وعشرون	com.useCard	ما إذا كان سيتم استخدام نافذة التمرير للجدول	منطقية	-	خطأ شنيع	-

عناصر تكوين الدعائم

رقم سري	المعلمة	يوضح	القيمة الافتراضية
1	أطفال	الحقل الفرعي، وهو مجموعة فرعية من البيانات، يتم تمثيله كجدول شجرة	أطفال
2	اسم	الحقل المستخدم لعرض الاسم	اسم
3	بطاقة تعريف	يجب أن يكون معرف كل جزء من البيانات فريدًا	بطاقة تعريف
4	معرف الهوية	حقل معرف العقدة الأصلية لكل جزء من البيانات	معرف الهوية
5	تاريخ البدء	حقل وقت البدء لكل جزء من البيانات	تاريخ البدء
6	تاريخ الانتهاء	حقل وقت الانتهاء لكل جزء من البيانات	تاريخ الانتهاء
7	معرف الهوية	معرف الزيادة التلقائية في البيانات	معرف الهوية
8	آباء	زيادة تلقائية في شجرة معرف الأصل، مفصولة بفواصل	آباء
9	قبل	حقل المهمة السابقة، يجب أن تكون قيمة الحقل هي معرف المهمة السابقة	قبل
10	hasChildren	حدد الصفوف التي تحتوي على العقد الفرعية	hasChildren
11	realStartDate	حقل وقت البدء الفعلي	realEndDate
12	realEndDate	حقل نهاية الوقت الفعلي	realEndDate

الأحداث

رقم سري	اسم الحدث	يوضح	معلمات رد الاتصال
1	timeChange	يتم تشغيله عندما يتغير وقت المهمة	الدالة (الصف) هي بيانات الصف الحالية بدورها
2	أحداث الجدول الأخرى	عنوان الوثيقة	-
3	تغيير مسبق	حدث تعديل المهمة السابقة	الدالة (الصف) هي بيانات الصف الحالية بدورها
4	nameChange	حدث تعديل الاسم	الدالة (الصف) هي بيانات الصف الحالية بدورها
5	TaskAdd	إضافة حدث مهمة	الدالة (الصف) هي بيانات الصف الحالية بدورها
6	TaskRemove	حذف حدث المهمة	الدالة (الصف) هي بيانات الصف الحالية بدورها

طُرق

رقم سري	اسم الطريقة	يوضح	معلمات رد الاتصال
1	تحميلTree	استدعاء التحميل البطيء لجدول الشجرة يدويًا	الدالة (الصف) هي معلومات الصف التي سيتم توسيعها بدورها
2	تحميلTreeAdd	قم بتحديث العقد الفرعية لجدول الشجرة بعد التحميل البطيء	الوظيفة (المعرف، القائمة) هي معرف العقدة المراد تحديثها وقائمة العقدة الفرعية المراد إضافتها. لاحظ أن هذه قائمة مدمجة وبيانات العقدة الفرعية الأصلية.
3	this.loadTreeRemove	قم بإزالة العقد الفرعية التي تقوم بتحميل البيانات بتكاسل	الوظيفة (المعرف، القائمة) هي معرف العقدة المراد تحديثها ومفتاح الصف للبايت الفرعي المراد حذفه.

فتحة

رقم سري	اسم	يوضح
1	prv	يستخدم لإدراج العمود قبل الاسم في القائمة إذا لم ينجح، فأنت بحاجة إلى إضافة fixed
2	-	تم إدراج عمود بين العمود الافتراضي ومخطط جانت

سجل الإصدار

1.0.6 تم إصلاح الخطأ المتمثل في عدم تخطيط الرسم البياني جانت ديناميكيًا عندما تم تغيير تاريخ انتهاء المهمة خارج النطاق الزمني للمشروع، كما تبين أيضًا أن تجربة useCard لم تكن جيدة

1.0.5 إضافة نافذة تحويم صف القائمة

الإصدار 1.0.3، يعمل على إصلاح خطأ عرض النطاق الزمني لأكثر من عام واحد؛ ويضيف وظيفة النافذة العائمة عند النقر بزر الماوس الأيمن

يضيف الإصدار 1.0.2 معلمات كسولة ومعلمات تحميل، ويدعم التحميل البطيء، ويوفر طرقًا للتحميل البطيء: الطرق: 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 ، ويتم تعديل الشهرين أو أقل تلقائيًا إلى monthAndDay . يمكن للمعلمة الجديدة autoGanttDateType إدارة ما إذا كان سيتم الضبط تلقائيًا أم لا. إذا كنت تريد إيقاف الضبط التلقائي، فيرجى التأكد من أن الفترة الزمنية صغيرة قدر الإمكان، وإلا ستكون هناك مشاكل واضحة في الأداء. تم إصلاح مشكلة عدم الاتصال مرة أخرى عند حدوث تغييرات في أوقات معينة.