 Матрица Эйзенхауэра — популярный инструмент тайм-менеджмента. Это визуальное представление списка дел, которые отранжированы по двум показателям, обычно это важность и срочность.
|
Например, в "Первой Форме" мы используем этот инструмент для управления задачами разработки и формирования спринта. Задачи (тикеты) ранжируются по показателям значимости (value) и объема трудозатрат (efforts). Из-за нашей специфики использования матрицы ее "углы" называются у нас "Важно, долго", а не "Важно, не срочно", как это обычно принято.
Матрица Эйзенхауера
Матрица реализована с помощью портального блока Smart Html. При наведении мыши на точку всплывает подсказка с кратким описанием, по клику на точку открывается окно с карточкой задачи.
В смарт-выражении отбираются задачи из одной или нескольких категорий, которые вы хотите контролировать. В нашем случае — это категория с тикетами на разработку, где каждому тикету присвоены значения показателей value и efforts. Для позиционирования точки на матрице по этим абсолютным значениям value и efforts вычисляются относительные, как % от максимального.
Выборка для матрицы (запрос T-SQL)
declare @AppPath varchar ( 100 ) = ( select ApplicationPath from Settings ) + '/maintaskform.aspx?TaskID='
declare @Table table ( TaskID int, Link varchar ( 200 ), TaskText varchar ( MAX ), taskEfforts int, taskValue int )
declare @MaxEfforts int
declare @MaxValue int
insert into @Table
select
td.TaskID,
@AppPath + CAST ( td.TaskID as varchar ( 10 ) ) as Link,
td.TaskText,
CAST ( ISNULL ( td.ExtParam222NativeValue, 0 ) as int ) as taskEfforts,
CAST ( ISNULL ( td.ExtParam333NativeValue, 0 ) as int ) as taskValue
from
TasksInSubcat111Denormalized td
where
td.IsClosed = 0
set @MaxEfforts = ( select MAX ( taskEfforts ) from @Table where taskEfforts > 0 and taskValue > 0 )
set @MaxValue = ( select MAX ( taskValue ) from @Table where taskEfforts > 0 and taskValue > 0 )
if ( @MaxEfforts = 0 ) set @MaxEfforts = 1
if ( @MaxValue = 0 ) set @MaxValue = 1
select
TaskID,
Link,
dbo.fnStripTags ( TaskText ) as TaskText,
100 — ( taskEfforts ) * 100 / @MaxEfforts as Efforts,
100 — ( taskValue ) * 100 / @MaxValue as Value,
taskEfforts,
taskValue
from
@Table
where
taskEfforts > 0 and taskValue > 0
Функция dbo.fnStripTags() убирает из текста задачи html-теги, которые могут быть разрешены в отдельных категориях.
|
Шаблон блока
<style>
.tooltip {
z-index: 99999;
background-color: white;
opacity: 0.9;
position: absolute;
border-color: black;
border-style: solid;
border-width: 1px;
padding: 15px;
overflow: visible;
width: 250px;
}
.tooltip-s1 {
opacity: 0.5 !important;
}
.tooltip-s2 {
opacity: 0.3 !important;
}
.t-header{
font-family: Arial, sans-serif;
font-variant: small-caps;
font-size: 10pt;
font-weight: bolder;
}
.t-text {
font-family: Arial, sans-serif;
font-size: 10pt;
font-weight: bold;
}
.point {
background-color: #444502;
border-radius: 5px;
width: 10px;
height: 10px;
display: block;
position: absolute;
cursor: pointer;
}
.container {
overflow: visible;
border-radius: 30px;
position: relative;
width: 55%;
height: 55%;
padding: 10px;
background: linear-gradient(to bottom left, #d4ffdb, #ffd4d4);
}
.container:before {
padding: 70%;
}
.point:hover {
background-color: #f7f5bc;
width: 11px;
height: 11px;
border-radius: 6px;
}
.label-right {
position: relative;
float: right;
}
.label-common {
font-family: Arial, sans-serif;
font-variant: small-caps;
font-size: 10pt;
font-weight: bolder;
}
</style>
<div>
<span class="label-common">Важно, долго</span>
<span class="label-right label-common">Важно, быстро</span>
</div>
<div id="plot" class="container">
{{#smart12345}}
<span class="point" data-tooltip="<a target='blank' href='{{link}}' title='Открыть в новом окне' class='t-header'>{{taskID}}</a>
<p class='t-text'>{{taskText}}</p>
<p class='t-text'>value: {{taskValue}}<br/>efforts: {{taskEfforts}}</p>"
style="left: {{value}}%; top: {{efforts}}%"
onclick="javascript:radopen('{{link}}');">
</span>
{{/smart12345}}
</div>
<div>
<span class="label-common">Не важно, долго</span>
<span class="label-right label-common">Не важно, быстро</span>
</div>
|
Полезные ссылки
Портальный блок Smart Html
