From f534d3f06eee7d2fef209f4ff0268653c4ea867c Mon Sep 17 00:00:00 2001 From: sunhao Date: Sun, 24 Mar 2024 15:33:54 +0800 Subject: [PATCH] * block: story #53162, optimize style of execution statistic block. --- module/block/lang/zh-cn.php | 4 +- .../block/ui/executionstatisticblock.html.php | 395 ++++++++---------- 2 files changed, 185 insertions(+), 214 deletions(-) diff --git a/module/block/lang/zh-cn.php b/module/block/lang/zh-cn.php index c1363e7067..ab77d33dd7 100644 --- a/module/block/lang/zh-cn.php +++ b/module/block/lang/zh-cn.php @@ -625,10 +625,10 @@ $lang->block->executionstatistic->totalLeft = '剩余工时'; $lang->block->executionstatistic->burn = '执行燃尽图'; $lang->block->executionstatistic->story = '需求'; $lang->block->executionstatistic->doneStory = '已完成'; -$lang->block->executionstatistic->totalStory = '总数量'; +$lang->block->executionstatistic->totalStory = '需求总数'; $lang->block->executionstatistic->task = '任务'; $lang->block->executionstatistic->totalTask = '任务总数'; -$lang->block->executionstatistic->undoneTask = '未完成任务'; +$lang->block->executionstatistic->undoneTask = '未完成'; $lang->block->executionstatistic->yesterdayDoneTask = '昨日完成'; $lang->block->executionoverview = new stdclass(); diff --git a/module/block/ui/executionstatisticblock.html.php b/module/block/ui/executionstatisticblock.html.php index d58ff351fd..0cbb03814f 100644 --- a/module/block/ui/executionstatisticblock.html.php +++ b/module/block/ui/executionstatisticblock.html.php @@ -42,52 +42,195 @@ foreach($projects as $projectID => $projectName) $projectItems[] = array('text' => $projectName, 'data-url' => $url, 'data-on' => 'click', 'data-do' => "loadBlock('$block->id', options.url)"); } -$burn = center +/* 燃尽图。Burn chart. */ +$burn = div ( - setClass((!$longBlock ? ' py-6 w-1/2' : '')), - cell + setClass('h-28'), + div(setClass('font-bold mb-2'), $lang->block->executionstatistic->burn), + burn ( - setClass('flex-1 w-full'), - div + set::responsive(false), + set::height(80), + set::referenceLine(true), + set::lineSize(3), + set::data($chartData['burnLine']) + ) +); + +/* 进度环。Progress circle. */ +$progressCircle = progressCircle +( + setClass('relative w-28 h-28 hide-before-init opacity-0 transition-opacity'), + set::percent($execution->progress), + set::size(112), + set::text(false), + set::circleWidth(0.06), + div(span(setClass('text-2xl font-bold'), $execution->progress), '%'), + row + ( + setClass('text-gray items-center gap-1'), + $lang->block->executionstatistic->progress, + icon ( - $longBlock ? setClass('pb-2') : null, - span(setClass('font-bold'), $lang->block->executionstatistic->burn) - ), - div - ( - setClass('py-2 chart line-chart'), - echarts + 'help', + setClass('opacity-50 text-sm cursor-pointer'), + toggle::popover(array ( - set::color(array('#2B80FF', '#17CE97')), - set::grid(array('left' => 0, 'bottom' => 0, 'top' => 0, 'right' => 0)), - set::legend(array('show' => false, 'width' => '100%')), - set::xAxis(array('show' => false, 'type' => 'category', 'data' => $chartData['labels'], 'boundaryGap' => false)), - set::yAxis(array('show' => false)), - set::series - ( - array - ( - array - ( - 'type' => 'line', - 'data' => $chartData['baseLine'], - 'symbolSize' => 0, - 'itemStyle' => array('normal' => array('color' => '#D8D8D8', 'lineStyle' => array('width' => 2, 'color' => '#F1F1F1'))) - ), - array - ( - 'data' => $chartData['burnLine'], - 'type' => 'line', - 'symbolSize' => 0, - 'areaStyle' => array('color' => array('type' => 'linear', 'x' => '0', 'y' => '0', 'x2' => '0', 'y2' => '1', 'colorStops' => array(array('offset' => 0, 'color' => '#DDECFE'), array('offset' => 1, 'color' => '#FFF')), 'global' => false)) - ) - ) - ) - )->size('100%', $longBlock ? 64 : 80) + 'content' => array('html' => $lang->block->tooltips['executionProgress']), + 'placement' => 'bottom', + 'width' => 400, + 'trigger' => 'hover', + 'closeBtn' => false, + 'className' => 'leading-5' + )) ) ) ); +/* 工时信息。 Hours info. */ +$hoursInfo = row +( + setClass('justify-evenly w-full'), + cell + ( + setClass('flex-1 text-center'), + div + ( + span(setClass('text-lg num font-bold'), !empty($execution->totalEstimate) ? $execution->totalEstimate : 0), + span(setClass('text-gray'), 'h') + ), + div + ( + setClass('text-sm text-gray'), + $lang->block->executionstatistic->totalEstimate + ) + ), + cell + ( + setClass('flex-1 text-center'), + div + ( + span(setClass('text-lg num font-bold'), !empty($execution->totalConsumed) ? $execution->totalConsumed : 0), + span(setClass('text-gray'), 'h') + ), + div + ( + setClass('text-sm text-gray'), + $lang->block->executionstatistic->totalConsumed + ) + ), + cell + ( + setClass('flex-1 text-center'), + div + ( + span(setClass('text-lg num font-bold'), !empty($execution->totalLeft) ? $execution->totalLeft : 0), + span(setClass('text-gray'), 'h') + ), + div + ( + setClass('text-sm text-gray'), + $lang->block->executionstatistic->totalLeft + ) + ) +); + +/* 任务故事信息。Task story info. */ +$taskStoryInfo = col +( + setClass('gap-2'), + row + ( + div(setClass('w-12 flex-none'), strong($lang->block->executionstatistic->task)), + row + ( + setClass('flex-auto'), + cell + ( + setClass('w-1/3'), + span(setClass('text-sm text-gray'), $lang->block->executionstatistic->totalTask), + strong(setClass('num ml-2'), $execution->totalTask) + ), + cell + ( + setClass('w-1/3'), + span(setClass('text-sm text-gray'), $lang->block->executionstatistic->undoneTask), + strong(setClass('num ml-2'), $execution->undoneTask) + ), + cell + ( + setClass('w-1/3'), + span(setClass('text-sm text-gray'), $lang->block->executionstatistic->yesterdayDoneTask), + strong(setClass('num ml-2'), $execution->yesterdayDoneTask) + ) + ) + ), + row + ( + div(setClass('w-12 flex-none'), strong($lang->block->executionstatistic->story)), + row + ( + setClass('flex-auto'), + cell + ( + setClass('w-1/3'), + span(setClass('text-sm text-gray'), $lang->block->executionstatistic->totalStory), + strong(setClass('num ml-2'), $execution->totalStory) + ), + cell + ( + setClass('w-1/3'), + span(setClass('text-sm text-gray'), $lang->block->executionstatistic->doneStory), + strong(setClass('num ml-2'), $execution->doneStory) + ) + ) + ) +); + +$blockView = null; +if($longBlock) +{ + $blockView = row + ( + setClass('gap-4 h-full items-center px-4'), + col + ( + setClass('gap-6 w-2/5 flex-none items-center pr-2'), + $progressCircle, + $hoursInfo + ), + col + ( + setClass('gap-6 flex-auto'), + $burn, + $taskStoryInfo + ) + ); +} +else +{ + $blockView = col + ( + setClass('gap-8 px-6 pt-10'), + row + ( + setClass('gap-2 items-center w-full'), + cell + ( + setClass('gap-2 w-2/5 flex-none items-center'), + $progressCircle, + ), + cell + ( + setClass('flex-auto min-w-0'), + $burn + ) + ), + $hoursInfo, + $taskStoryInfo + ); +} + statisticBlock ( to::titleSuffix @@ -96,7 +239,7 @@ statisticBlock ( btn ( - setClass('font-normal rounded-full gray-400-outline size-md ml-3'), + setClass('font-normal rounded-full gray-400-outline size-sm ml-3 text-sm'), set::caret(true), isset($projects[$currentProjectID]) ? $projects[$currentProjectID] : $lang->block->executionstatistic->allProject, ), @@ -107,177 +250,5 @@ statisticBlock set::active($active), set::moreLink(createLink('execution', 'all', 'status=' . $block->params->type)), set::items($items), - div - ( - setClass('flex h-full ' . ($longBlock ? '' : 'col')), - cell - ( - setClass('flex-1'), - $longBlock ? set('width', '70%') : null, - div - ( - setClass('flex h-full ' . ($longBlock ? '' : 'col')), - cell - ( - $longBlock ? set('width', '40%') : null, - setClass('p-4'), - div - ( - setClass('flex align-center justify-around' . ($longBlock ? ' py-4' : '')), - center - ( - setClass('w-1/2'), - center - ( - setClass('relative w-28 h-28 hide-before-init opacity-0 transition-opacity'), - setData(array('zui' => 'ProgressCircle', 'percent' => $execution->progress, 'size' => 112, 'text' => false, 'circle-width' => 0.06)), - div - ( - setClass('center absolute inset-0 num gap-1'), - div(span(setClass('text-2xl font-bold'), $execution->progress), '%'), - div - ( - span - ( - setClass('text-sm text-gray'), - $lang->block->executionstatistic->progress, - icon - ( - setClass('opacity-50 ml-0.5 text-sm cursor-pointer'), - toggle::popover - ( - array - ( - 'content' => array('html' => $lang->block->tooltips['executionProgress']), - 'placement' => 'bottom', - 'width' => 400, - 'closeBtn' => false, - 'className' => 'leading-5' - ) - ), - 'help' - ) - ) - ) - ) - ) - ), - !$longBlock ? $burn : null - ), - cell - ( - setClass('flex justify-evenly gap-1'), - cell - ( - setClass('flex-1 text-center'), - div - ( - span(setClass('text-lg num font-bold'), !empty($execution->totalEstimate) ? $execution->totalEstimate : 0), - span(setClass('text-gray'), 'h') - ), - div - ( - span - ( - setClass('text-sm text-gray'), - $lang->block->executionstatistic->totalEstimate - ) - ) - ), - cell - ( - setClass('flex-1 text-center'), - div - ( - span(setClass('text-lg num font-bold'), !empty($execution->totalConsumed) ? $execution->totalConsumed : 0), - span(setClass('text-gray'), 'h') - ), - div - ( - span - ( - setClass('text-sm text-gray'), - $lang->block->executionstatistic->totalConsumed - ) - ) - ), - cell - ( - setClass('flex-1 text-center'), - div - ( - span(setClass('text-lg num font-bold'), !empty($execution->totalLeft) ? $execution->totalLeft : 0), - span(setClass('text-gray'), 'h') - ), - div - ( - span - ( - setClass('text-sm text-gray'), - $lang->block->executionstatistic->totalLeft - ) - ) - ) - ) - ), - cell - ( - $longBlock ? set('width', '60%') : null, - setClass('px-4 pb-4' . ($longBlock ? ' pt-6' : '')), - $longBlock ? $burn : null, - cell - ( - setClass('pt-6'), - row - ( - div(setClass('w-12 flex-none'), strong($lang->block->executionstatistic->task)), - row - ( - setClass('flex-auto'), - cell - ( - setClass('w-1/3'), - span(setClass('text-sm text-gray'), $lang->block->executionstatistic->totalTask), - strong(setClass('num ml-2'), $execution->totalTask) - ), - cell - ( - setClass('w-1/3'), - span(setClass('text-sm text-gray'), $lang->block->executionstatistic->undoneTask), - strong(setClass('num ml-2'), $execution->undoneTask) - ), - cell - ( - setClass('w-1/3'), - span(setClass('text-sm text-gray'), $lang->block->executionstatistic->yesterdayDoneTask), - strong(setClass('num ml-2'), $execution->yesterdayDoneTask) - ) - ) - ), - row - ( - setClass('pt-3'), - div(setClass('w-12 flex-none'), strong($lang->block->executionstatistic->story)), - row - ( - setClass('flex-auto'), - cell - ( - setClass('w-1/3'), - span(setClass('text-sm text-gray'), $lang->block->executionstatistic->doneStory), - strong(setClass('num ml-2'), $execution->doneStory) - ), - cell - ( - setClass('w-1/3'), - span(setClass('text-sm text-gray'), $lang->block->executionstatistic->totalStory), - strong(setClass('num ml-2'), $execution->totalStory) - ) - ) - ) - ) - ) - ) - ) - ) + $blockView, );