בניית לוח מחוונים אנליטי ב-Vue.js עבור 1C-Bitrix: מקרה בוחן

מנהלים רבים של חנויות מקוונות על 1C-Bitrix נתקלים בבעיה שדוחות סטנדרטיים פשוט לא מספקים תמונה תפעולית עדכנית. בכל פעם צריך לפתוח כמה סעיפים, לייצא נתונים ל-Excel, ולמזג ידנית. אנחנו מציעים גישה אחרת — דשבורד מותאם אישית על Vue.js שמאגד נתונים מכל המקורות הנדרשים ומתעדכן בזמן אמת. כלי כזה מאפשר לראות מדדי מפתח (הכנסות, מספר הזמנות, צ'ק ממוצע, המרה) על מסך אחד ללא טעינת עמוד מחדש. הניסיון שלנו מראה שהטמעת דשבורד מקצרת את זמן הכנת הדוחות לאפס.

למה דווקא Vue.js לדשבורד?

Vue.js עם Chart.js או ECharts מספק גרפים אינטראקטיביים ללא רינדור מחדש של העמוד כולו. הגישה הקומפוננטית מאפשרת שימוש חוזר בווידג'טים והוספת חדשים בקלות. מפתח Bitrix עם ידע בסיסי ב-Vue יכול להרכיב אב טיפוס עובד תוך כמה ימים. יתרה מכך, ניתן למקם את אפליקציית Vue ישירות בפאנל הניהול של Bitrix מבלי לשנות את הארכיטקטורה המרכזית.

אילו נתונים ניתן לשלב בדשבורד?

דשבורד אמיתי rarely מוגבל למערכת אחת. אנחנו מאגדים:

• הזמנות והכנסות — b_sale_order, b_sale_basket דרך D7
• תנועה — Yandex.Metrica API או Google Analytics 4 Data API
• מדדי CRM — דרך Bitrix\Crm\DealTable
• הוצאות פרסום — Yandex.Direct API, VK Ads API

כל מקור הוא composable נפרד עם טעינה מקבילה דרך Promise.all. קומפוננטת Vue מקבלת את הנתונים ומציגה סטטוס טעינה. התיעוד הרשמי של 1C-Bitrix ממליץ על D7 ORM לשאילתות בעומס גבוה.

מאיפה מגיעים הנתונים

Bitrix מאחסן את כל מה שצריך במסד הנתונים: הזמנות ב-b_sale_order, פריטים ב-b_sale_basket, תשלומים ב-b_sale_pay_system_action, לקוחות ב-b_user. D7 ORM מאפשר בניית שאילתות אגרגציה ישירות דרך DataManager:

$result = \Bitrix\Sale\Internals\OrderTable::getList([
    'select' => [
        new \Bitrix\Main\ORM\Fields\ExpressionField('TOTAL', 'SUM(%s)', 'PRICE'),
        new \Bitrix\Main\ORM\Fields\ExpressionField('COUNT', 'COUNT(*)', 'ID'),
        'DATE_KEY' => 'DATE_INSERT',
    ],
    'filter' => [
        '>=DATE_INSERT' => $dateFrom,
        '<=DATE_INSERT' => $dateTo,
        '=STATUS_ID' => ['N', 'P', 'F'],
    ],
    'group' => ['DATE_KEY'],
]);

בקר REST מותאם אישית (יורש מ-$result = \Bitrix\Sale\Internals\OrderTable::getList([ 'select' => [ new \Bitrix\Main\ORM\Fields\ExpressionField( 'TOTAL', 'SUM(%s)', 'PRICE' ), new \Bitrix\Main\ORM\Fields\ExpressionField( 'COUNT', 'COUNT(*)', 'ID' ), 'DATE_KEY' => 'DATE_INSERT', ], 'filter' => [ '>=DATE_INSERT' => $dateFrom, '<=DATE_INSERT' => $dateTo, '=STATUS_ID' => ['N', 'P', 'F'], ], 'group' => ['DATE_KEY'], ]); ) מקבל פרמטרי תקופה ומחזיר JSON מאגד. הבקר מוגן על ידי Bitrix\Main\Engine\Controller — רק משתמשים עם הרשאת checkPermissions.

מבנה דשבורד Vue

הדשבורד בנוי מווידג'טים עצמאיים — כל קומפוננטת sale_order_view טוענת את הנתונים שלה ומציגה מצב טעינה. קומפוננטת האב Widget*.vue מנהלת רק את התקופה המשותפת דרך Dashboard.vue.

ווידג'טים מרכזיים:

• provide/inject — גרף קו או עמודות של הכנסות לפי תקופות (Chart.js RevenueChart)
• line — כרטיסים למדדי מפתח: הכנסות, מספר הזמנות, צ'ק ממוצע, המרה
• OrdersKpi — גרף עמודות אופקי של 10 המוצרים הנמכרים ביותר
• TopProducts — משפך: מבקרים → הוסיפו לעגלה → ביצעו הזמנה → שילמו
• FunnelWidget — ההזמנות האחרונות עם פגינציה, קישור מהיר להזמנה בפאנל הניהול

מסנן תקופה משותף — DatePicker עם טווחים מוגדרים מראש ("היום", "השבוע", "החודש", "החודש שעבר", "מותאם אישית"). כשהתקופה משתנה, כל הווידג'טים מגיבים דרך OrdersTable או watchEffect על watch מ-period וטוענים נתונים מחדש.

אינטגרציה עם מקורות מרובים

בכל composable אנחנו משתמשים ב-inject לטעינה ראקטיבית. דוגמה למדדים:

// useMetrikaData.js
export function useMetrikaData(period) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);

  watchEffect(async () => {
    loading.value = true;
    try {
      data.value = await fetchMetrika(period.value);
    } catch (e) {
      error.value = e.message;
    } finally {
      loading.value = false;
    }
  });

  return { data, loading, error };
}

השוואה: דשבורד Vue רנדר פי 5 מהר יותר מעמוד הדוחות הסטנדרטי בזכות ה-DOM הווירטואלי (במקום טעינת HTML מלאה מחדש).

מקרה בוחן: דשבורד למנהל חנות מקוונת (מהניסיון שלנו)

חנות אלקטרוניקה על Bitrix עם 200-400 הזמנות ביום. בעיה: המנכ"ל ביקש מדי יום מהמנהלים להכין דוח מ-1C, פאנל Bitrix ו-Metrica. התהליך ארך 40 דקות. פיתחנו דשבורד הנגיש בכתובת watchEffect (בסעיף הניהול של Bitrix, תחת הרשאה). טכנית — עמוד בסעיף הניהול דרך // useMetrikaData.js export function useMetrikaData(period) { const data = ref(null); const loading = ref(false); const error = ref(null); watchEffect(async () => { loading.value = true; try { data.value = await fetchMetrika(period.value); } catch (e) { error.value = e.message; } finally { loading.value = false; } }); return { data, loading, error }; } שבו מותקנת אפליקציית Vue.

ווידג'טים: הכנסות היום/אתמול/7 ימים עם חץ מגמה, מספר הזמנות לפי סטטוס (חדש/בטיפול/הושלם/בוטל), 5 המוצרים המובילים לתקופה, השוואת שתי תקופות על גרף אחד, מדד עגלות נטושות (/area51/dashboard/sales/ עם CAdminSection).

נתוני עגלות נטושות — שאילתה מותאמת אישית שאינה קיימת בדוחות Bitrix הסטנדרטיים:

SELECT DATE(DATE_INSERT) as day, COUNT(DISTINCT FUSER_ID) as abandoned
FROM b_sale_basket
WHERE ORDER_ID IS NULL AND DATE_INSERT >= NOW() - INTERVAL 30 DAY
GROUP BY day

הדשבורד מתעדכן אוטומטית כל 5 דקות דרך b_sale_basket — נתונים עדכניים ללא F5. זמן שנחסך למנהל — עד 40 דקות ביום (מעל 10 שעות בחודש).

מה כוללת העבודה

• פיתוח בקר REST עם סינון והרשאות גישה
• יצירת סט ווידג'טים של Vue (גרפים, כרטיסי KPI, טבלאות)
• אינטגרציה עם APIs חיצוניים (Yandex.Metrica, Google Analytics, פלטפורמות פרסום)
• הגדרת מטמון מתויג לטעינה מהירה
• תיעוד פריסה והדרכת עובדים

ביצועי שאילתות

שאילתות אגרגציה על ORDER_ID IS NULL במסדי נתונים גדולים (100K+ הזמנות) דורשות אינדקסים. אנחנו בודקים דרך SELECT DATE(DATE_INSERT) as day, COUNT(DISTINCT FUSER_ID) as abandoned FROM b_sale_basket WHERE ORDER_ID IS NULL AND DATE_INSERT >= NOW() - INTERVAL 30 DAY GROUP BY day :

• setInterval — אינדקס חובה לסינון לפי תקופה
• אינדקס מורכב b_sale_order — לסינון בו-זמני לפי סטטוס ותקופה
• תוצאות של אגרגציות כבדות נשמרות במטמון דרך EXPLAIN למשך 5-15 דקות

רוצים ייעוץ לגבי הטמעת דשבורד? צרו קשר — נעריך את הפרויקט שלכם תוך יום אחד.