الجدول

تتكون الجداول من أعمدة قابلة للتكوين ويمكنها عرض قيم كائنات SKOOR أو بيانات من مصدر بيانات خارجي

image-20240730-110122.png

يتوافق كل صف في الجدول مع كائن SKOOR واحد أو صف في مصدر البيانات الخارجي ويمكن أن يسرد قيمه المختلفة.

المرشحات

يمكن تعيين عامل تصفية لكل عمود في مربع حوار التصفية أو في رأس العمود إذا تم تكوينه في عنصر واجهة المستخدم. ويمكن استخدامه لتصفية صفوف الجدول إما لمطابقة سلسلة نصية محددة أو لعرض الصفوف التي تطابق قيمة أو نصًا مدرجًا حاليًا فقط باستخدام قائمة منسدلة. يوفر مربع حوار الفلتر واجهة سهلة الاستخدام لإنشاء فلاتر معقدة بسهولة. في قسم "الفلاتر المضمنة"، يمكنك معرفة كيفية تكوين الفلاتر المضمنة القديمة التي يتم عرضها في العنوان.

داخل مربع حوار التصفية: حدد بسهولة عوامل مثل "يحتوي على" و"يساوي" و"أكبر من" وما إلى ذلك، وأدخل القيم دون الحاجة إلى حفظ الصيغة:

  • مرشحات النطاق: خصيصًا للأعمدة الرقمية وأعمدة التاريخ، يمكنك بسهولة تحديد النطاقات (من...إلى)

  • أدوات اختيار التاريخ والوقت: أدوات اختيار مدمجة لأعمدة التاريخ والطابع الزمني تجعل اختيار نطاقات الوقت أمرًا سهلاً

  • التحديد المتعدد: حدد قيمًا متعددة من قائمة لاستعلامات "IN"

image-20251215-094546.png

أحرف البدل

تدعم جميع عوامل تصفية النص حرف البدل *. وهذا يسمح بالبحث عن أجزاء من سلسلة.

  • Dev*

  • Dev*ment

  • *ment

  • 100*

  • 2022*

الأعمدة التي تحتوي على أرقام أو تواريخ

  • IN(x,y,z)
    حدد قيمة واحدة أو قيم متعددة. تتضمن النتائج فقط السجلات التي تتطابق فيها البيانات الموجودة في العمود مع القيمة الموجودة في عامل التصفية.

  • NOT(IN(x,y,z))
    عكس "in"

  • BETWEEN(x,y)      
    حدد قيمتين. تتضمن النتيجة فقط السجلات التي تكون فيها البيانات الموجودة في العمود بين القيمتين المحددتين.

  • >
    حدد قيمة واحدة. تتضمن النتائج فقط السجلات التي تكون فيها البيانات الموجودة في العمود أكبر من القيمة الموجودة في المرشح.

  • <
    حدد قيمة واحدة. تتضمن النتائج فقط السجلات التي تكون فيها البيانات الموجودة في العمود أقل من القيمة الموجودة في عامل التصفية.

  • >=
    حدد قيمة واحدة أو عدة قيم. تتضمن النتائج فقط السجلات التي تكون فيها البيانات الموجودة في العمود أكبر من أو تساوي القيمة الموجودة في عامل التصفية.

  • <= 
    حدد قيمة واحدة أو عدة قيم. تتضمن النتائج فقط السجلات التي تكون فيها البيانات الموجودة في العمود أقل من أو تساوي القيمة الموجودة في عامل التصفية.

الأعمدة التي تحتوي على نص

  • AND(x,y,z)
    حدد سلسلتين أو أكثر من السلاسل أو الأحرف. تتضمن النتائج السجلات التي تحتوي على جميع السلاسل المحددة فقط.

  • OR(x,y,z)
    حدد سلسلتين أو أكثر من السلاسل أو الأحرف. تتضمن النتائج فقط السجلات التي تحتوي على سلسلة واحدة على الأقل من السلاسل المحددة.

  • NOT(x)
    حدد حرفًا أو سلسلة. تتضمن النتائج فقط السجلات التي لا تحتوي على السلسلة المحددة.

يمكن أيضًا تداخل عوامل تصفية النص.

إعادة تعيين المرشحات

يمكن إعادة تعيين جميع المرشحات (استعادة الإعدادات الافتراضية) أو مسحها باستخدام الرابط المخصص لذلك أعلى الجدول أو في مربع حوار المرشحات:

image-20251215-093504.pngimage-20251215-093553.png

المرشحات المضمنة والقيم الافتراضية

يمكن عرض المرشحات مضمنة في رأس العمود إذا تم تحديد "إظهار في الرأس" في إعدادات العمود، مما يعرض أيضًا حقول الإعدادات القديمة "مطابقة النص" و"المرشح الافتراضي".

image-20251215-093925.png

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

image-20251215-094141.png

العناوين والأعمدة الثابتة

يمكن تكوين عدد ثابت من العناوين والأعمدة في إعدادات الجدول:

image-20240730-084047.png

التجميع والتجميع الفرعي

يمكن تجميع الصفوف ذات القيم الرقمية (المجموع، المتوسط، الحد الأدنى، الحد الأقصى). بالإضافة إلى ذلك، يمكن تجميع القيم حسب قيم الأعمدة وتجميعها مرة أخرى:

أنواع الأعمدة

لمزيد من التفاصيل حول تحرير الأعمدة، راجع القسم أدناه تفاصيل العمود

يمكن تكوين أنواع الأعمدة التالية:

الإعداد

الوصف

الاسم

يعرض اسم كائن SKOOR

النوع

يعرض نوع كائن SKOOR

النوع الفرعي

يعرض النوع الفرعي لكائن SKOOR

الحالة

يعرض حالة كائن SKOOR. يمكن تصور الحالة إما على شكل مصباح أو نص بسيط. يؤدي النقر على الحالة إلى فتح سجل حالة الكائن

إحصائيات الحالة

يعرض النسبة المئوية لحالة معينة خلال نطاق زمني محدد لكائن SKOOR (يمكن تخصيص الحالة والنطاق الزمني)

الخاصية

يعرض خاصية معينة لكائن SKOOR

العدد

يحسب عدد كائنات SKOOR بناءً على عملية تصفية أو بحث

القيمة

يعرض قيمة كائن SKOOR

اسم الجهاز

إذا كان الصف يحتوي على كائن من نوع job، يتم عرض اسم الجهاز ذي الصلة

الوالد

يعرض الكائن الأصلي للكائن الحالي

الأسباب

سبب الحالات غير المتطابقة مع "OK"

الرسالة

الرسائل الناتجة عن المهام

تحديد

يعرض علامة للاختيار

الصيانة

يعرض عمليات الصيانة المخطط لها والجارية لكائن SKOOR

مصدر البيانات

يعرض قيمة عمود لصف مصدر البيانات

استعلام البيانات

يعرض قيمة عمود في استعلام البيانات

التعبير

يعرض تعبيرًا محددًا في صف الجدول

التعليق

يضيف تعليقات توضيحية إلى صف الجدول


تحرير عنصر واجهة المستخدم "الجدول":

الأساسيات

ينقسم تكوين الجدول إلى جزأين.

  • في الجزء الأول، يتم تكوين الإعدادات العامة للجدول مثل رأس الجدول، وعدد الصفوف في كل صفحة، أو وظائف التجميع

  • أما الجزء الثاني، قسم مصدر البيانات، فيتعلق بالبيانات الفعلية في الجدول، والتي يتم إنشاؤها بشكل أساسي بواسطة كائنات SKOOR أو تخزينها في قاعدة بيانات. في هذا القسم، يمكن تحميل البيانات وتصفيتها وإثرائها بواسطة التراكبات، وما إلى ذلك

    • يمكن تحميل كائنات SKOOR باستخدام مرشح الكائنات. كل كائن يتم إنشاؤه بواسطة المرشح ينتج عنه صف واحد في الجدول

    • يمكن الاستعلام عن قواعد البيانات باستخدام نوع البحث "مصدر البيانات" (الجداول أو طرق العرض) أو "استعلام البيانات" (SQL)

إعدادات الجدول

image-20240405-150409.png

الإعداد

الوصف

حجم الصفحة

عدد الصفوف المرئية في كل صفحة. إذا كان هناك المزيد من الصفوف، يتم عرض أداة تحديد الصفحة

يتم تجاهل حجم الصفحة إذا تم تعيين وضع المحور لأي أعمدة.

إظهار جميع الصفحات في التقرير

إذا لم يتم تحديد هذا الخيار، فستظهر الصفحة الأولى فقط من الجدول المقسم إلى صفحات في التقارير

إظهار الصفوف الفارغة

عرض الصفوف الفارغة إذا كان عدد الصفوف أقل من حجم الصفحة.

إظهار الرأس

إظهار أو إخفاء رأس الجدول. يرجى ملاحظة أنه يتم دائمًا استخدام عوامل تصفية الأعمدة الافتراضية، حتى إذا تم إخفاء عمود أو رأس الجدول بالكامل

رأس ثابت

يظل العنوان مرئيًا عند التمرير الرأسي للصفوف. يتطلب هذا عادةً تكوين ارتفاع عنصر واجهة المستخدم لتمكين التمرير بداخله.

لون خلفية الصفوف البديل

يتم عرض الصفوف المتجاورة بألوان مختلفة قليلاً لزيادة سهولة القراءة

عدد الأعمدة الثابتة

عدد الأعمدة بدءًا من اليسار التي ستظل مرئية عند التمرير أفقيًا

صف التجميع

يضيف صفًا يحتوي على القيم المجمعة إلى الجدول.

  • ينطبق فقط على الأعمدة الرقمية التي تم تمكين خيار "إظهار القيمة المجمعة" فيها

موضع صف التجميع

عرض القيم المجمعة في أعلى الجدول أو أسفله

عدد أعمدة التجميع الفرعي

يضيف صف تجميع بناءً على عمود واحد أو أكثر

  • إذا تم تعيينه على عمودين، فسيتم إضافة عنوان صف التجميع إلى العمود الثالث، متبوعًا بالقيم المجمعة

  • لن تتم إضافة عناوين التجميع مثل "المجموع الفرعي" أو "المتوسط" إلى الأعمدة من النوع الرقمي أو نوع التاريخ

  • يمكن تشغيل التجميع أو إيقافه في تكوين العمود

إظهار التجميعات الفرعية المتداخلة

يضيف مجموعًا فرعيًا على مجموعة قيم مجمعة. يوضح المثال التالي إجمالي جميع الفروع بالإضافة إلى المجموع الفرعي لكل فرع وقسم 

الاحتفاظ بالفلاتر

إذا كانت خيار "الاحتفاظ بالمرشحات" نشطًا، فلن يتم مسح مرشحات الأعمدة الديناميكية عند تغيير الصفحة

السماح بالتصدير

يمكن تصدير البيانات إلى تنسيقات CSV أو XLSX

إجراء النقر

حدد الإجراء المطلوب تنفيذه عند النقر فوق عنصر في الجدول.

تتوفر العناصر النائبة التالية:

${params.<paramName>}

${object}

${customObject}

${columns.<columnName>}

${columnName}

${value}

توفير معلمة تصفية الجدول

يوفر عامل التصفية المطبق حاليًا كمعلمة URL، بما في ذلك عوامل تصفية الرأس ومصفوفة التصفية واستعلام البحث. يمكن استخدام هذا لتمرير عامل التصفية هذا إلى عناصر واجهة مستخدم أخرى تحتاج إلى عرض المعلومات بناءً على العناصر المعروضة حاليًا.

اسم معلمة تصفية الجدول

اسم معلمة URL لتصفية الجدول. القيمة الافتراضية هي tableFilter.

التدوير

يسمح بتوزيع الأعمدة عموديًا أو أفقيًا أو كليهما بناءً على القيم.

مصدر البيانات

الإعداد

الوصف

نوع البحث

حدد مصدر البيانات المطلوب. تتغير حقول جزء مصدر البيانات من التكوين وفقًا لنوع البحث

كائن، الكائنات أدناه

حدد كائنًا واحدًا أو أكثر من كائنات SKOOR باستخدام عوامل تصفية الكائنات العامة

مصدر البيانات

حدد قاعدة بيانات. يتم تكوين قواعد البيانات في قسم البيانات والكائنات

الجدول

حدد أحد الجداول أو طرق العرض في قاعدة البيانات

استعلام البيانات

حدد استعلام بيانات. يتم تكوين استعلامات البيانات في قسم "البيانات والكائنات"

تطبيق استعلام مصفوفة التصفية

إذا تم تكوين أداة مصفوفة التصفية على لوحة المعلومات، يتم تطبيق عوامل التصفية الخاصة بتلك الأداة إذا تطابقت أعمدة كلتا الأداتين

استعلام البحث

حدد المرشحات كما هو موضح في محرر استعلام مصدر البيانات

التعليقات

حدد "السماح بالتعليقات التوضيحية" لتمكين ميزة التعليقات التوضيحية. تأكد من تعريف عمود واحد أو أكثر كمفتاح هنا، والذي يُستخدم لتعيين كل تعليق توضيحي إلى صف بيانات:

الأعمدة

انقر فوق "مزامنة الأعمدة" لإضافة جميع الأعمدة المتاحة من الجدول أو استعلام البيانات الذي تم تكوينه. إذا تم استخدام مجموعة فرعية فقط من الأعمدة المتاحة، فانقر فوق "إضافة عمود" لإضافة أعمدة أو حذف الأعمدة غير المستخدمة بعد مزامنة جميع الأعمدة. لتغيير ترتيب الأعمدة، ما عليك سوى سحب عناصر الأعمدة وإفلاتها.

افتح الإعدادات بالنقر فوق عنصر عمود:

image-20240830-125521.png

الإعداد

الوصف

النوع

يعتمد نوع العمود على "نوع البحث" المحدد في قسم "مصدر البيانات" في الأداة

الاسم

اسم العمود. يتم عرض هذا الاسم في رأس الجدول

العنوان

حقل التعبير لاستخدام العناصر النائبة كعنوان للعمود، وإذا كان فارغًا، فسيتم استخدام القيمة الموجودة في "الاسم".

التشغيل عند النقر المزدوج

يتم تشغيل الإجراء المحدد في قسم ClickAction فقط بالنقر المزدوج

العرض

العرض الدقيق بالبكسل أو النسبة المئوية (اختياري)

العرض الأدنى

الحد الأدنى لعرض العمود بالبكسل أو النسبة المئوية (اختياري)

المحاذاة

محاذاة النص إلى اليسار أو الوسط أو اليمين

ارتفاع العنوان

ارتفاع العنوان بالبكسل

نوع الفلتر

نوع المرشح الديناميكي

  • لا شيء

  • تحديد (تصفية حسب القيم المتاحة من الجدول الحالي)

  • نص (تصفية حسب النص)

  • تحديد متعدد

عرض في العنوان

متاح فقط إذا تم تعيين نوع التصفية على "text" أو "select".
يسمح بعرض التصفية في رأس العمود بدلاً من مربع حوار التصفية.

إذا تم تحديده، فسيتم عرض مطابقة النص القديم والتصفية الافتراضية.

إذا لم يتم تحديده، يظهر حقل مشغل/قيمة افتراضية مدمج.

مطابقة النص

متاح فقط إذا تم تعيين نوع التصفية على "text".

يحدد سلوك مرشح الجدول.

  • exact (مطابقة النص): يقوم بمطابقة دقيقة.

  • contains: يطابق إذا كانت القيمة تحتوي على نص التصفية.

  • starts_with: تتم المطابقة إذا كانت القيم تبدأ بنص التصفية.

  • ends_with: يطابق إذا كانت القيم تنتهي بنص التصفية.

يمكن استخدام حرف البدل * في جميع أوضاع مطابقة النص (حتى في exact)

التصفية الافتراضية

يمكن ضبط نص التصفية الديناميكي مسبقًا. يرجى ملاحظة أن التصفية نشطة حتى إذا لم يتم عرض العمود

أولوية الفرز

قم بتعيين أولوية الفرز لجعل العمود قابلاً للفرز. يتم فرز الصفوف وفقًا لأولوية الفرز. إذا كان لعمودين نفس أولوية الفرز، يتم تحديد الأولوية حسب أسبقية العمود

اتجاه الفرز الافتراضي

الترتيب تصاعدي أو تنازلي بشكل افتراضي

إظهار

ما إذا كان سيتم عرض العمود (افتراضيًا) أم لا. يرجى ملاحظة أن عوامل التصفية الافتراضية نشطة حتى بالنسبة للأعمدة المخفية

إخفاء إذا كان فارغًا

إخفاء العمود إذا لم يكن هناك صف في الجدول يحتوي على قيمة لهذا العمود

إخفاء على الشاشات الصغيرة

إخفاء العمود إذا لم يتناسب مع الشاشة

إخفاء التكرارات

إخفاء القيم المتكررة. يمكن استخدام هذا لتحقيق نوع من التجميع:

دمج الصفوف المكررة

إظهار صف واحد فقط من بين جميع الصفوف التي تحتوي على نفس القيمة في هذا العمود 

إظهار القيمة المجمعة

تشغيل أو إيقاف تشغيل هذه القيمة في صفوف التجميع أعلى أو أسفل الجدول

اتجاه العنوان

رأس أفقي أو عمودي. إذا اخترت العمودي، يجب عليك ضبط ارتفاع الرأس على قيمة مناسبة (لأسباب فنية، لا يمكن تحديد حجم الرأس تلقائيًا)

العرض بتنسيق HTML

تفسير علامات HTML في هذا العمود

فئة شرطية

خاصة بأعمدة "العدد".
استخدم هذا الخيار لتحديد فئات شرطية للقيم، مما يسمح بتصميم الأنماط باستخدام هذه الفئات.

كائن مخصص

اضبطه لاستخدام كائن SKOOR مخصص

إعدادات أنواع الأعمدة

الاسم

يعرض اسم كائن الصف. لا توجد إعدادات متاحة.

النوع

يعرض نوع كائن الصف. لا توجد إعدادات متاحة.

النوع الفرعي

يعرض النوع الفرعي لكائن الصف. لا توجد إعدادات متاحة.

الحالة

يعرض حالة كائن الصف على شكل مصباح أو نص.

الإعداد

الوصف

نوع العرض

حدد كيفية عرض حالة كائن SKOOR:

  • مصباحimage-20240903-073725.png

  • التنسيقimage-20240903-073739.png

العمود

العمود الذي يمكن العثور فيه على الحالة.

جميع الحالات في القائمة

عرض جميع الحالات في الفلتر.

image-20240903-171330.png

عندما يعرض نوع البحث كائنات SKOOR، يمكن تعريف إجراء النقر للعمود. من خلال تنشيط "كائن مخصص"، يمكنك عرض حالة كائن SKOOR عشوائي (تم تحديده بواسطة مرشح الكائنات). 

عندما يكون نوع البحث هو مصدر البيانات أو استعلام البيانات، حدد العمود الذي يحتوي على الحالات المطلوبة من القائمة المنسدلة "العمود":

إذا تم استخدام عمود الحالة في جدول قائم على مصدر البيانات أو استعلام البيانات، يمكن تعيين القيم إلى الحالات (SKOOR Dashboard >= 7.1.2).

لتعيين قيم متعددة لحالة واحدة، يمكن تعريف القيم كقائمة مفصولة بفواصل.

إحصائيات الحالة

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

الإعداد

الوصف

الحالة

حدد الحالة التي تريد الحصول على إحصائياتها

الصيانة على أنها "موافق"

تحديد ما إذا كان يجب اعتبار الصيانة على أنها "مكتملة"

وظيفة التجميع

حدد دالة التجميع التي سيتم استخدامها في حساب إحصائيات الولاية.

الخاصية

يعرض خاصية كائن الصف.

العدد

يعد الكائنات بناءً على مرشح الكائنات

يقبل حقل الشروط العناصر النائبة المعتادة.

للحصول على مرجع إلى كائن الصف، يمكن استخدام مقتطف الشرط التالي:

{
  "item": "id",
  "operator": "eq",
  "expression": %id%
}

من الممكن أيضًا تعيين فئة مخصصة لعدد معين. وهذا مفيد بشكل خاص لتلوين الأعداد التي تزيد عن قيمة محددة:

الفئات المفيدة:

  • bold

  • رئيسي

  • ثانوي

  • تحذير

  • موافق

القيمة

يعرض قيمة كائن الصف. من خلال تنشيط كائن مخصص، يمكنك عرض قيمة أي كائن SKOOR (تم تحديده بواسطة مرشح الكائنات). 

يمكن تعريف القيمة بواسطة مفتاح القيمة الخاص بها. تقبل قيم الإرجاع وقيم السلسلة الفهرس في صيغة المصفوفة (على سبيل المثال returnValue[0]) أو اسم الوحدة المحددة.

الإعداد

الوصف

اسم القيمة

حدد اسم قيمة كائن SKOOR.

إظهار الوحدة

تحديد ما إذا كان سيتم عرض وحدة تلك القيمة أم لا.

وظيفة التجميع

حدد دالة التجميع التي سيتم تطبيقها على القيمة.

اسم الجهاز

يعرض اسم الجهاز ذي الصلة إذا كان الكائن عبارة عن مهمة.

الأصل

يعرض الكائن الأصلي للكائن الحالي.

الأسباب

السبب وراء وجود الكائنات في حالة مثل "رئيسي" أو "ثانوي" أو "تحذير".

الرسالة

يعرض رسالة معلومات المهمة إن كانت متوفرة.

تحديد 

يضيف خيارات لإضافة أو إزالة الصيانة بالإضافة إلى مربع اختيار لكل صف.

عمليات الصيانة

يعرض عمليات الصيانة الحالية.

مصدر البيانات

يعرض قيمة عمود من جدول مصدر البيانات.

يمكن ضبط دالة التجميع لتجميع قيم العمود.

إذا كان العمود من النوع العائم، فمن الممكن ضبط دقة القيمة.

الإعداد

الوصف

العمود

حدد العمود المطلوب من مصدر البيانات.

وحدة المصدر

وحدة البيانات في العمود.

وحدة الهدف

الوحدة المستهدفة لتحويل القيم إليها.

إظهار الوحدة

عرض الوحدة في رأس الجدول.

وظيفة التجميع

حدد دالة التجميع المراد تطبيقها على قيمة العمود.

الدقة

تعيين دقة القيمة (للأرقام العائمة).

تنسيق الوقت

حدد تنسيق الوقت المفضل.

وضع المحور

يجب ضبط دالة التجميع على "تجميع" لإظهار هذا الإعداد.

إنشاء أعمدة ديناميكيًا استنادًا إلى قيم هذا العمود.

الخيارات:

  • يُنشئ العمود
    أعمدة بناءً على قيم هذا العمود. يأخذ

استعلام البيانات

يعرض قيمة عمود لاستعلام البيانات. تنطبق خيارات التكوين نفسها الخاصة بمصادر البيانات أيضًا على أعمدة استعلام البيانات.

التعبير

يمكن لأعمدة التعبير حساب القيم من الأعمدة الأخرى التي تم تكوينها في أداة الجدول هذه. يمكن الإشارة إلى الأعمدة الأخرى بطريقتين:

  • ${columns.<column name>}

  • ${columns[“<اسم العمود”]}

في <اسم العمود>، حدد بالضبط الاسم الذي تم تكوينه في العمود المعني (على سبيل المثال، حرف كبير في البداية)

يرجى زيارة صفحة العناصر النائبة للحصول على مزيد من التفاصيل.

التعليق

باستخدام هذا النوع من الأعمدة، يمكن للمستخدمين إثراء بيانات مصدر البيانات أو استعلام البيانات بالتعليقات التوضيحية. هناك خمسة أنواع من أعمدة التعليقات التوضيحية:

الإعداد

الوصف

نوع العرض

قائمة منسدلة تحتوي على نوع التعليق التوضيحي المطلوب:

  • زر

  • الحالة

  • الوصف

  • تم الإنشاء

  • المستخدم

زر

يضيف زرًا إلى كل صف من الجدول لإضافة تعليقات توضيحية.

كما يمكن هنا تكوين مجموعة ثابتة من الحالات مع الانتقالات الممكنة بينها. انقر على زر "إضافة" لإضافة الحالات:

يجب تكوين انتقال من الحالة غير المحددة. وإلا، لن يمكن إضافة أي تعليقات توضيحية على الإطلاق

الحالة

عرض حالة التعليق التوضيحي الحالية لكل صف

الوصف

عرض وصف التعليق التوضيحي الحالي

تم الإنشاء

عرض تاريخ إنشاء التعليق التوضيحي

المستخدم

عرض اسم المستخدم الذي أنشأ التعليق التوضيحي

يرجى زيارة صفحة التعليقات لمزيد من التفاصيل.

إعدادات العمود المتقدمة

إجراءات النقر

اعتمادًا على نوع العمود، يمكن تعريف إجراءات النقر للتفصيل أو للتنقل إلى مكان ما عند النقر. انظر إجراء النقر للحصول على التفاصيل.

تصميم الخلايا

image-20240903-103023.png

من الممكن تخصيص نمط كل خلية في الجدول باستخدام CSS. يمكن القيام بذلك إما باستخدام CSS مضمن (نمط خلية الرأس، نمط خلية الجدول) أو فئات CSS التي يمكن تعريفها في إعدادات النمط في لوحة المعلومات.

الإعداد

الوصف

فئة خلية الرأس

توفير اسم فئة للرأس (يمكن استخدامه في تصميم CSS)

نمط خلية الرأس

تحديد نمط معين للعنوان (في CSS)

فئة خلية الجدول

تحديد اسم فئة للجدول بأكمله (يمكن استخدامه في أنماط CSS)

نمط خلية الجدول

تحديد نمط معين للجدول بأكمله (في CSS)

اتجاه العنوان

رأس أفقي أو عمودي. إذا اخترت العمودي، يجب عليك تعيين ارتفاع الرأس إلى قيمة مناسبة (لأسباب فنية، لا يمكن تحديد حجم الرأس تلقائيًا)

التجاوز

حدد طريقة التعامل الافتراضية مع التجاوزات:

  • التفاف

  • علامة الحذف

تصميم الجداول

الرمز المعتمد على المحتوى

منذ إصدار SKOOR Dashboard 7.1.2، أصبح من الممكن استخدام عمود "state" في الجداول المستندة إلى مصادر البيانات واستعلامات البيانات. يمكن ربط القيم بالحالات ويتم عرض المصابيح المقابلة. انظر https://skoorag.atlassian.net/wiki/spaces/DOC/pages/494473/Table#State لمزيد من التفاصيل.

باستخدام الميزة التي تم تقديمها مع SKOOR Dashboard 7.1.2، سيبدو المثال نفسه أدناه كما يلي:

image-20240809-111948.png

المشكلة

image-20240809-105332.png

يجب استبدال محتوى خلية الجدول (مثل OK) برمز (مثل المصباح الكهربائي).

الحل

  1. تعيين فئة خلية الجدول في إعدادات العمود

image-20240809-105709.png

image-20240809-105813.png

في المثال أعلاه، يتم أخذ قيمة الفئة من العمود الثالث في كل صف. في المثال، سيؤدي ذلك إلى تعيين فئة إلى statusOK.

  1. أضف بعض CSS في مربع حوار إعدادات لوحة التحكم

image-20240809-110249.png
/* Set a lightbulb as default background image for tds with class status */
td.status {
  background-image: url('assets/images/lightbulb-grey.svg');
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: center 6px;
}

/* 
 * Absolute positioned elements (the tooltip in this case) always take the 
 * next not static positioned element as the anchor point
 */
td.status > div {
  position: relative;
  overflow: visible; 
}

/* 
 * Makes the inner td absolute positioned and style the span that it looks like a tooltip.
 * Initially, the tooltip is hidden.
 */
td.status > div > span {    
    padding: 2px;
    display:none;
    position: absolute;
    top: -3px;
    left: 30px;    
    text-align: left;
    background-color: #eff0f1;
    border: 1px solid #c7cbce;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    white-space: nowrap;
}

/* Shows the tooltip on hover */
td.status:hover > div > span {
  display: block;
}

/* 
 * Defines the background image for the defined value. 
 * You need one of those for each possible content, undefined values
 * will display the default image.
 */
td.statusOK {
  background-image: url('assets/images/lightbulb-green.svg');
}

سيؤدي ذلك إلى ظهور رمز جميل يعرض النص الأصلي عند تمرير الماوس فوقه.

يرجى ملاحظة أنه نظرًا لأننا تعاملنا فقط مع فئة statusok، فإن باقي الفئات تحتوي جميعها على المصباح الرمادي القياسي

image-20240809-110459.png

بدلاً من استخدام عنوان URL للملف للصور، من الممكن أيضًا تضمين الصور مباشرةً في CSS باستخدام عناوين URL للبيانات:

td.statusOK {
  background-image: url('data:image/png;base64,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');
}

وستكون النتيجة كما يلي:

image-20240809-111651.png