Создание дашборда аналитики на Vue.js для 1С-Битрикс: кейс и внедрение

Многие руководители интернет-магазинов на 1С-Битрикс сталкиваются с тем, что стандартные отчёты просто не дают оперативной картины. Каждый раз приходится открывать несколько разделов, выгружать данные в Excel и сводить вручную. Мы предлагаем другой подход — кастомный дашборд на Vue.js, который агрегирует данные из всех нужных источников и обновляется в реальном времени. Такой инструмент позволяет видеть ключевые метрики (выручку, количество заказов, средний чек, конверсию) на одном экране без перезагрузки страницы. Наш опыт показывает, что внедрение дашборда сокращает время подготовки отчётов до нуля.

Почему Vue.js для дашборда?

Vue.js с Chart.js или ECharts даёт интерактивные графики без полной перерисовки страницы. Компонентный подход позволяет переиспользовать виджеты и легко добавлять новые. Битрикс-разработчику достаточно базового знания Vue, чтобы за пару дней собрать работающий прототип. Кроме того, Vue-приложение можно разместить прямо в админке Битрикса, не меняя архитектуру ядра.

Какие данные можно объединить на дашборде?

Реальный дашборд редко ограничен одной системой. Мы агрегируем:

• Заказы и выручка — b_sale_order, b_sale_basket через D7
• Трафик — Yandex.Metrika API или Google Analytics 4 Data API
• CRM-показатели — через Bitrix\Crm\DealTable
• Рекламные расходы — Яндекс.Директ API, VK Ads API

Каждый источник — отдельный composable с параллельной загрузкой через Promise.all. Vue-компонент получает данные и отображает статус загрузки. Официальная документация 1С-Битрикс рекомендует D7 ORM для высоконагруженных выборок.

Откуда берутся данные

Битрикс хранит всё необходимое в базе: заказы в 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-контроллер (наследник Bitrix\Main\Engine\Controller) принимает параметры периода и возвращает агрегированный JSON. Контроллер закрыт на checkPermissions — только пользователи с правом sale_order_view.

Структура Vue-дашборда

Дашборд строится из независимых виджетов — каждый Widget*.vue компонент самостоятельно загружает свои данные и отображает состояние загрузки. Родительский Dashboard.vue управляет только общим периодом через provide/inject.

Ключевые виджеты:

• RevenueChart — линейный или столбчатый график выручки по периодам (Chart.js line)
• OrdersKpi — карточки ключевых показателей: выручка, количество заказов, средний чек, конверсия
• TopProducts — горизонтальный bar chart топ-10 товаров по продажам
• FunnelWidget — воронка: посетители → добавили в корзину → оформили заказ → оплатили
• OrdersTable — последние заказы с пагинацией, быстрая ссылка на заказ в админке

Общий фильтр периода — DatePicker с предустановленными диапазонами («Сегодня», «Эта неделя», «Этот месяц», «Прошлый месяц», «Произвольный»). При изменении периода все виджеты получают watchEffect или watch на period из inject и перезагружают данные.

Интеграция с несколькими источниками

В каждом composable используем watchEffect для реактивной загрузки. Пример для метрики:

// 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).

Кейс: дашборд для руководителя интернет-магазина (из нашей практики)

Магазин электроники на Битриксе, 200-400 заказов в день. Проблема: директор ежедневно просил менеджеров собрать отчёт из 1С, панели Битрикса и Метрики. Процесс занимал 40 минут. Мы разработали дашборд, доступный по URL /area51/dashboard/sales/ (в административной части Битрикса, под авторизацией). Технически — страница административного раздела через CAdminSection, на которую монтируется Vue-приложение.

Виджеты: выручка сегодня/вчера/7 дней с тренд-стрелкой, количество заказов по статусам (новые/в обработке/выполнены/отменены), топ-5 товаров за период, сравнение двух периодов на одном графике, показатель брошенных корзин (b_sale_basket с ORDER_ID IS NULL).

Данные по брошенным корзинам — собственный запрос, которого нет в штатных отчётах Битрикса:

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 минут через setInterval — актуальные данные без F5. Экономия времени руководителя — до 40 минут в день (более 10 часов в месяц).

Что входит в работу

• Разработка REST-контроллера с фильтрацией и правами доступа
• Создание набора Vue-виджетов (графики, KPI-карточки, таблицы)
• Интеграция с внешними API (Яндекс.Метрика, Google Analytics, рекламные площадки)
• Настройка тегированного кэширования для быстрой загрузки
• Документация по развёртыванию и обучение сотрудников

Производительность запросов

Агрегирующие запросы по b_sale_order на больших базах (от 100К заказов) требуют индексов. Проверяем через EXPLAIN:

• DATE_INSERT — индекс обязателен для фильтрации по периоду
• Составной индекс (STATUS_ID, DATE_INSERT) — для фильтрации по статусу и периоду одновременно
• Результаты тяжёлых агрегаций кешируем через Bitrix\Main\Data\Cache на 5-15 минут

Хотите получить консультацию по внедрению дашборда? Свяжитесь с нами — оценим ваш проект за один день.