1. Полное описание задания
Контекст
Вы — junior-разработчик в компании, которая консультирует бизнес по оптимизации процессов. Ваш руководитель попросил создать веб-инструмент для визуальной приоритизации бизнес-процессов клиента.
Инструмент должен позволять:
- Ввести список бизнес-процессов
- Оценить каждый процесс по двум группам критериев (операционная эффективность и стратегическая важность)
- Автоматически рассчитать средние оценки
- Распределить процессы по 4 зонам матрицы
- Сохранить работу в браузере
Матрица приоритизации — напоминание
Матрица строится по двум осям:
- Ось X — текущая операционная эффективность (среднее по операционным критериям)
- Ось Y — стратегическая важность (среднее по стратегическим критериям)
Порог деления — значение 3.0 (из 5).
Зона 1: Срочные изменения
Эффективность < 3.0
Важность ≥ 3.0
Красная зона
Зона 2: Развитие
Эффективность ≥ 3.0
Важность ≥ 3.0
Зелёная зона
Зона 3: Стандартизация
Эффективность < 3.0
Важность < 3.0
Жёлтая зона
Зона 4: Мониторинг
Эффективность ≥ 3.0
Важность < 3.0
Синяя зона
Критерии оценки процесса
Каждый процесс оценивается по 8 критериям (шкала 1–5):
Операционные критерии (4 шт.)
| Критерий | Код в JS | Что оценивает |
|---|---|---|
| Время цикла | cycleTime |
Насколько быстро выполняется процесс |
| Стоимость | cost |
Затраты на единицу выполнения |
| Автоматизация | automation |
Доля автоматизированных шагов |
| Доля переделок | rework |
Как часто приходится переделывать |
Стратегические критерии (4 шт.)
| Критерий | Код в JS | Что оценивает |
|---|---|---|
| Стратегическая значимость | strategicValue |
Вклад в цели организации |
| Критичность | criticality |
Последствия при сбое |
| Инновационный потенциал | innovation |
Возможность применения новых технологий |
| Техдолг | techDebt |
Ограничения текущих ИС |
Шкала оценки
1 = очень плохо, 5 = отлично. Все оценки — целые числа от 1 до 5.
Формулы расчёта
operationalAvg = (cycleTime + cost + automation + rework) / 4
strategicAvg = (strategicValue + criticality + innovation + techDebt) / 4
Определение зоны:
if (operationalAvg < 3.0 && strategicAvg >= 3.0) → Зона 1 (Срочные изменения)
if (operationalAvg >= 3.0 && strategicAvg >= 3.0) → Зона 2 (Развитие)
if (operationalAvg < 3.0 && strategicAvg < 3.0) → Зона 3 (Стандартизация)
if (operationalAvg >= 3.0 && strategicAvg < 3.0) → Зона 4 (Мониторинг)
Начальные данные (для тестирования)
В коде должен быть массив из 6 процессов для демонстрации. Используйте данные из кейса «ТрансЛогистик»:
const initialProcesses = [
{
id: 1,
name: "Приём и обработка заявки",
type: "Основной",
cycleTime: 2, cost: 3, automation: 2, rework: 4,
strategicValue: 5, criticality: 4, innovation: 5, techDebt: 2
},
{
id: 2,
name: "Планирование маршрутов",
type: "Основной",
cycleTime: 1, cost: 2, automation: 1, rework: 5,
strategicValue: 5, criticality: 5, innovation: 5, techDebt: 1
},
{
id: 3,
name: "Исполнение рейса",
type: "Основной",
cycleTime: 3, cost: 3, automation: 2, rework: 3,
strategicValue: 4, criticality: 5, innovation: 4, techDebt: 2
},
{
id: 4,
name: "Расчёт стоимости и счета",
type: "Поддерживающий",
cycleTime: 2, cost: 2, automation: 2, rework: 4,
strategicValue: 3, criticality: 4, innovation: 3, techDebt: 2
},
{
id: 5,
name: "Управление парком (ТО)",
type: "Поддерживающий",
cycleTime: 4, cost: 4, automation: 3, rework: 2,
strategicValue: 3, criticality: 4, innovation: 3, techDebt: 3
},
{
id: 6,
name: "Работа с претензиями",
type: "Управленческий",
cycleTime: 1, cost: 2, automation: 1, rework: 5,
strategicValue: 4, criticality: 3, innovation: 4, techDebt: 1
}
];
Структура файлов проекта
my-priority-matrix/
├── index.html ← разметка страницы
├── style.css ← стили (или style.scss)
└── app.js ← вся логика на vanilla JS
Результат сдачи
- Создайте репозиторий на GitHub (например,
priority-matrix) - Загрузите в него файлы проекта
- Пришлите ссылку на репозиторий преподавателю
- В
README.mdкратко опишите: что делает приложение, как запустить (открытьindex.htmlв браузере)
Распределение времени (рекомендация)
gantt
title План работы на 4 часа
dateFormat HH:mm
axisFormat %H:%M
section Этап 1
HTML-структура и CSS :a1, 00:00, 60min
section Этап 2
Рендеринг таблицы и матрицы :a2, after a1, 70min
section Этап 3
Форма, удаление, фильтры :a3, after a2, 60min
section Этап 4
localStorage и экспорт :a4, after a3, 40min
section Финал
Тестирование и загрузка на GitHub :a5, after a4, 10min
Не успеваете?
Этапы расположены по приоритету. Если не успеваете за 4 часа — сосредоточьтесь на этапах 1–3 (16 баллов). Этап 4 можно доделать дома. Главное — работающее приложение, которое рендерит таблицу и матрицу.