i5anin / order-book.vue3

Демо версия сайта

Задание

Выполнены задачи:

1. Создан компонент "Биржевой стакан" на Vue.js, отображающий цены и количества для каждого ордера.

2. Вычисляется и отображается спред, представляющий разницу между лучшей ценой на покупку и продажу.

3. Реализована подписка на стрим биржевого стакана с использованием API метода GET /orderbook-stream.

4. Получение наших ордеров осуществляется через API метод GET /orders.

5. Обеспечена корректная обработка обновлений данных, получаемых из стрима.

6. Предусмотрена обработка ошибок и исключительных ситуаций при взаимодействии с API.

Тестовая версия доступна по ссылке:

Структура файлов:

public
├── favicon.ico
├── index.html
├── assets
│   └── logo.png
└── fonts
    └── UniSansHeavy.otf
src
├── App.vue
├── main.js
├── components
│   ├── LoadingSpinner.vue
│   ├── OrderBook.vue
│   ├── OrderTable.vue
│   └── SpreadInfo.vue
└── store
    ├── api.js
    └── store.js

1. OrderBook.vue: Это главный компонент, отвечающий за отображение списка ордеров и расчет разницы в ценах (спреда). Он содержит заголовки, две таблицы с ордерами (продажа и покупка) и компонент Spread для отображения спреда. Он также обрабатывает данные, полученные через WebSocket и API запросы.
2. OrderTable.vue: Это компонент, отвечающий за отображение таблицы с ордерами. Он принимает массив ордеров через свойство orders и отображает их в виде строк таблицы. Компонент также проверяет, является ли ордер пользовательским и применяет соответствующий стиль. Он также имеет методы для форматирования цены, количества и общей стоимости ордера.
3. SpreadInfo.vue: Это компонент, отвечающий за отображение разницы в ценах (спреда). Он принимает значение спреда через свойство spread и отображает его на странице. Компонент также имеет метод для форматирования значения спреда.
4. LoadingIndicator.vue: является компонентом, отвечающим за отображение индикатора загрузки. Он использует фреймворк UI Element Plus для создания интерфейса.