في السابق ، استخدمت React + Antdesign لتنفيذ مخطط توقيت بسيط ، لكن في وقت لاحق كان لدي متطلبات أكثر تعقيدًا وتطلب من 2000 مهمة في نفس الوقت ، والتي تضمنت مشكلات في الأداء. تسبب العرض التوضيحي الذي يلبي الاحتياجات التالية بشكل أساسي ، لكن آلية عرض React تسببت في مشاكل في الأداء الرئيسية. عالق جدا. بعد التفكير في الأمر ، قررت استخدام الموسيقى التصويرية الأصلية JS+CSS+HTML لتنفيذها ، لأن الأداء تحت الموسيقى التصويرية الأصلية JS هو الأفضل. دعنا نتحدث عن متطلبات الإصدار الجديد:
يتم عرض المهمة في بنية شجرة على اليسار ، قابلة للطي
يوضح الجانب الأيمن طول الوقت الذي تستغرقه المهمة
تحتاج إلى استخدام خطوط لربط العلاقة بين المهام
يمكنك التكبير على الحق في عرض حالة المهمة التفصيلية
عند التكبير ، تظل الرسومات بنسبة معينة إلى كلا الطرفين مع الماوس كمركز.
عند تحجيم الرسم البياني ، فهذا يعني أن الوقت المستغرق للمهمة والإحداثيات تحتاج إلى التغيير وفقًا لذلك وفقًا لنسبة تكبير الصورة.
عندما يتحرك الماوس على مخطط التوقيت ، يبدو أن الخط يطالب بالوقت الحالي والمعلومات.
صعوبات التنفيذ
تكبير الماوس ، تكبير المحور X
يولد Mouse Zoom تحجيم المحور X لمخطط التوقيت. يوفر تحجيم مخططات التوقيت ثلاث أفكار هنا:
هل اعتراض البيانات ، واعتراض البيانات قبل وبعد خوارزمية معينة ، ثم إعادة تقديم الصفحة بأكملها
استخدم Scalex من CSS3 لتوسيع نطاق مخطط التوقيت
يتم عرض التغيير الفعلي لعرض مخطط التوقيت DOM ، وطول المهمة ، وطول خطوط التوصيل ، والوقت المتوقع المطلوب لمهمة تشغيل المهمة في النسب المئوية.
مزايا وعيوب ثلاث أفكار:
المزايا: ليست هناك حاجة لتشغيل سمات CSS الخاصة بـ DOM ، وهي أكثر ملاءمة لإعادة تقديمها بينهما. العيوب: لاستخدام DOM REDRAW ، فإنه يستهلك أداءً شديدًا وهو بطيء جدًا عند تقديم عدد كبير من المهام.
المزايا: فقط قم بتغيير CSS DOM ، والتحميل بسرعة ومعالجة أكثر. العيوب: الحوسبة مزعجة.
المزايا: التحميل السريع وسلس للغاية. العيوب: ستكون هناك أخطاء معينة عند استخدام حسابات النسبة المئوية ، وسوف تراها عند تكبيرها إلى حد ما. (يتم النظر في كل المسألة ، أنا أستخدم النوع الثالث)
// الوظيفة التي تحسب نسبة العرض // نهاية الوقت: وقت الانتهاء من المهمة // وقت البدء: وقت بدء المهمة // maxtime: القيمة القصوى لجميع المهام // mintime: الحد الأدنى لقيمة جميع المهام وقت البدء // الوقت: كل ترتيب تصاعدي لوقت بدء المهمة ووقت الانتهاء // task_width: طول المهمة ، طول خط الاتصال الأفقي ، القيمة اليسرى لخط الاتصال العمودي const widthfun = function (endtime ، وقت البدء ، maxtime ، mintime) {const task_width = ((((((((((((((((((((( رقم (نهاية الوقت) - الرقم (وقت البدء))) / ((maxtime || الوقت [time.length - 1]) - (mintime || time [0])) * (body_width - tree_box_dom.offsetwidth)) / dom.offset width )تكبير الماوس ، حافظ على الماوس كمركز ، تكبير على كلا الجانبين
دعونا نضع مخطط عملية الاستدلال أولاً:
// شرح الشكل أعلاه // dom = dom من مخطط التوقيت // doml1 ، domel2 = dom.scrollleft ؛ // domel1 يمثل dom.scrollleft السابق ؛ // domel2 يمثل dom.scrollleft الحالي ؛ يمثل التيار يمثل مقياس التكبير // scale1 تكبير آخر مرة // tree_dom.dom.offsetwidth يمثل عرض الشجرة على اليسار // clientx1 المسافة من الجانب الأيسر من موضع الماوس في آخر مرة = e.clientx - tree_dom.offsetwidth // clientx2 تمثل المسافة من موضع الماوس الحالي إلى مخطط التوقيت // التوسع مع الماوس كمركز ، الصيغة هي: doml2 = domel1 (scale/scale1) + clientx1 (scale/scale/ Scale1) - E.Clientx + Tree_dom.OffsetWidth // Formula Explanation: // 1. Scale/Scale1 يمثل نسبة التحجيم في هذا الوقت باستثناء نسبة التحجيم في النسبة السابقة ، مما يشير إلى نسبة التحجيم الحالية // عرض سيتم قياس حجم اليسار أيضًا أثناء التحجيم الثاني ، لذلك يجب أن يكون العرض على اليسار مضاعفًا بمقياس التحجيم // العرض على الجانب الأيسر من مسافة موضع الماوس من مخطط التوقيت عند التكبير ، لذلك أنت تكبير ، لذلك أنت يجب أن تتكاثر أيضًا بمقياس التحجيم // المسافة الفعلية على الجانب الأيسر من مسافة موضع الماوس من مخطط التوقيت في النهاية تساوي تحجيم طول رمز التمرير الأيسر // time_box_parent.scrollleft = (time_box_parent. scrollleft + e.clientx - tree_box_dom.offsetwidth) * (Scale_x / Scale_x1) - E.Clien TX + Tree_box_dom.offsetWidth ؛
استخدم الاتصالات لتمثيل العلاقات بين المهام
يخطط:
عند استخدامها ، يتم رسم CSS3 + JS + HTML5 مع عناصر زائفة.
لف الصور الزاوية اليمنى مع DOM وضبط موقعها وارتفاعها.
ارسم مع الملصقات
إيجابيات وسلبيات:
المزايا: لا تتم إضافة علامات إضافية ، وهو أمر مفيد لتقديمه. العيوب: تولد مهمة الوالدين مهام أطفال متعددة ، ومن الصعب إضافة الفئات الزائفة وتعيين ارتفاع وعرض الفئات الزائفة.
المزايا: مريحة ، فقط احسب ارتفاع مهمة الطفل من مهمة الوالدين. العيوب: عندما يكون هناك الكثير من المهام ، سيكون هناك العديد من الصور ، والتي ستؤثر بشكل كبير على الأداء.
المزايا: يتم التحكم في ارتفاع وموضع كل عنصر بشكل فردي ، مع ارتفاع القدرة على التحكم ولون التغذية المرتدة. العيوب: تمت إضافة المزيد من العناصر ، والتي لها تأثير على التقديم (أنا أستخدم النوع الثالث ، وهو طريقة غبية. يمكن لرجال الكبير طريقة أفضل تقديم اقتراحات ، شكرًا لك)
أفكار التنفيذ:
استخدم متغيرًا لتسجيل عمق التسلسل الهرمي لكل مهمة. استخدم المتغيرات المتراكمة للحصول على ارتفاع الخط العمودي والقيمة العليا للخط الأفقي في نسبة معينة. (استخدم وظيفة النسبة المئوية للعرض أعلاه)
الوحدة الزمنية: يوم ، ساعة ، دقيقة ، ثانية
هذه فكرة تنفيذ بسيطة نسبيا:
نظرًا لأن مقياس Time 4 لهذا العرض التوضيحي هو مقياس ، حدد ما إذا كان الفرق بين الحد الأدنى للطابع الزمني والحد الأقصى للوقت يقسم على 4 ، ما إذا كان لا يزال هناك يوم واحد (60 * 60 * 24 ، تم تحويله إلى ثوان) ، ونزول اطلب من كبير إلى صغير الحصول على الوحدة الزمنية.