Трекинг транспорта

Разберем каждый из представленных элементов

1. В шапке страницу расположена Строка поиска, с помощью которой пользователь может найти необходимый транспорт по государственному номеру. Если перед этим диспетчер использовал фильтрацию, то поиск будет осуществляться по уже отфильтрованному транспорту;

2. Фильтр

3. Сортировка

4. В левой части страницы вы увидите список транспортных средств подразделения. Каждое ТС будет состоять из:

   • Иконки, обозначающей тип транспорта (Легкова, Грузовая, Спец. Техника, Водовозка). При наведении на иконку транспорта вы увидите, что на месте иконки появилась небольшая мишень, которая, если на нее нажать, найдет данный транспорт на карте города справа;

   • Государственного регистрационного номера;

   • Модели транспортного средства и название подразделения, к которому оно относится;

   • При движении транспорта в правой части блока будет отображена скорость, а также цветовой индикатор, который определяет превышает ли данный транспорт скоростной лимит.

5. По центру страницы расположилась карта города с транспортом в виде условных обозначений.

6. В левой верхней части карты вы можете видеть элементы управления зумом (удаления / приближения).

7. А чуть ниже кнопку для выбора карты, отображаемой на заднем плане.

8. В правой верхней части карты расположена кнопка, при нажатии на которую рядом с каждым транспортным средством на карте появится его название и государственный номер:

9. Каждое транспортное средство на карте обозначается в виде круга с иконкой транспорта по центру. При движении у данного блока появится рамка, цвет которой будет зависеть от текущей скорости ТС.

10. Если несколько транспортных средств находятся рядом друг с другом, они автоматически объединяться в группу с отображением количества ТС в данной группе (3).

Фильтр

При нажатии на кнопку “Фильтр” (2) вы откроете модальное окно со следующими элементами:

1. В первом блоке модальной формы оператор транспортного цеха может выбрать Тип транспорта для отображения (Легковая, Грузовая, Спец. техника, Водовозка).

2. Далее следует раздел Статус ТС, который управляет отображением транспорта в зависимости от его текущего состояния (Доступно, В работе).

3. Самый последний блок - Состояние двигателя - позволяет отобразить транспорт, если он находится в движении или его двигатель в данный момент запущен.

4. В правом верхнем углу расположена кнопка “Сбросить все”, которая задает значения по умолчанию для всех разделов модальной формы.

Сортировка

При нажатии на кнопку “Сортировка” (3) вы откроете модальное окно со следующими элементами:

1. В первом блоке формы оператор может выбрать сортировку списка ТС по ID номеру.

2. А во втором - по текущей Скорости ТС (от самого быстрого до самого медленного и наоборот).

3. В правом верхнем углу расположена кнопка “По умолчанию”, которая задает значения по умолчанию для всех разделов модальной формы.

Модальная форма транспорта

При нажатии на отдельный транспорт из списка (4) с правой стороны откроется окно с характеристиками данного ТС.

Разберем элементы данного окна:

В верхней части формы расположены ID Номер, Тип и Наименование данного транспорта (1), а также его Текущий статус (2) (Доступно, В ремонте).

3. В следующем блоке показаны текущие характеристики ТС такие, как Текущая скорость, Суточный пробег, Моточасы сутки, а также запущен ли в данный момент его двигатель.

4. Чуть ниже расположилась карта города, на которой обозначена геопозиция данного ТС. Для увеличения / уменьшения размеров карты нажмите на кнопку в правом нижнем углу (4.1).

5. Далее оператор может увидеть более детальную информацию по данному транспорту, которая включает в себя: Тип транспорта, Государственный номер, Структурное подразделение, Внешний ID, и Источник данных (от которого поступает информация касательно данного ТС).

6. Для редактирования информации нажмите на кнопку Редактировать в правом верхнем углу.

7. В нижней части модального окна вы увидите форму для просмотра Истории передвижения данного ТС за определенный промежуток времени. Для этого введите дату Начала и Окончания периода в соответствующие поля формы, после чего нажмите на кнопку Показать.

После нажатия вы увидите окно со следующими элементами:

8. По центру экрана отобразится карта города с условным обозначением истории передвижения в виде красной линии с напраляющими стрелками.

9. В левой верхней части карты вы можете видеть элементы управления зумом (удаления/приближения).

10. А чуть ниже кнопку для выбора карты, отображаемой на заднем плане.