* task #7660, improve UI for cmmigantt block.

This commit is contained in:
Catouse
2020-08-26 13:52:25 +08:00
parent 6f4f9a061e
commit e0cd53d4cf
5 changed files with 56 additions and 47 deletions
+1 -1
View File
@@ -1118,7 +1118,7 @@ class block extends control
$productID = isset($this->session->product) ? 0 : $this->session->product;
if($productID && !array_key_exists($productID, $products)) $productID = 0;
$this->view->plans = $this->loadModel('programplan')->getDataForGantt($this->session->program, $productID, 0, 'task');
$this->view->plans = $this->loadModel('programplan')->getDataForGantt($this->session->program, $productID, 0, 'task', false);
$this->view->products = $products;
$this->view->productID = $productID;
}
+9 -8
View File
@@ -1,7 +1,7 @@
/**
* Delete block.
*
* @param int $index
*
* @param int $index
* @access public
* @return void
*/
@@ -26,8 +26,8 @@ function deleteBlock(index)
/**
* Sort blocks.
*
* @param array $orders format is {'blockid' : 1, 'block1' : 2}
*
* @param array $orders format is {'blockid' : 1, 'block1' : 2}
* @param function $callback
* @access public
* @return void
@@ -65,7 +65,7 @@ function refreshBlock($panel, afterRefresh)
else
{
$panel.children('.panel-move-handler,style,script').remove();
$panel.find('.panel-body,.empty-tip').replaceWith($data);
$panel.find('.panel-body,.empty-tip').first().replaceWith($data);
}
$panel.find('.progress-pie').progressPie();
if($.isFunction(afterRefresh))
@@ -78,6 +78,7 @@ function refreshBlock($panel, afterRefresh)
});
}
$panel.find('.tablesorter').sortTable();
$panel.find('.chosen').chosen();
initTableHeader($panel);
$(".sparkline").sparkline();
}).fail(function()
@@ -121,7 +122,7 @@ function initTableHeader($wrapper)
if(!$table.length || !$table.children('thead').length || ($panel.find('#assigntomeBlock').length && $panel.find('#assigntomeBlock > div').length > 1)) return;
var isFixed = $panel.find('.panel-body').height() < $table.outerHeight();
$panel.toggleClass('with-fixed-header', isFixed);
var $header = $panel.children('.table-header-fixed').toggle(isFixed);
if(!isFixed)
@@ -194,7 +195,7 @@ function checkRefreshProgress($dashboard, doneCallback)
* @param index $index
* @access public
* @return void
*/
*/
function hiddenBlock(index)
{
$.getJSON(createLink('block', 'delete', 'index=' + index + '&module=' + module + '&type=hidden'), function(data)
@@ -240,7 +241,7 @@ $(function()
{
resizeBlock(e.element.data('id'), isSideCol ? 4 : 8);
});
e.element.toggleClass('block-sm', isSideCol);
}
}).on('click', '.refresh-panel', function()
+22 -14
View File
@@ -1,6 +1,9 @@
<div class="panel-body">
<div id='cmmiGantt'>
<?php echo html::select('cmmiGanttProductID', $products, $productID, "class='form-control chosen'"); ?>
<?php if(empty($plans['data'])): ?>
<div class='empty-tip'><?php echo $lang->programplan->noData;?></div>
<?php else:?>
<div class='gantt clearfix'>
<div class='gantt-plans pull-left'></div>
<div class='gantt-container scrollbar-hover'>
@@ -9,6 +12,7 @@
</div>
</div>
</div>
<?php endif;?>
</div>
<style>
.block-cmmigantt > .panel-body {overflow: visible!important}
@@ -27,13 +31,24 @@
.gantt-col {position: absolute; z-index: 0; top: 0; border-right: 1px dotted #dddee4}
.gantt-col-time {position: absolute; top: -18px; left: 0}
.gantt-today {position: absolute; top: -16px; left: 0; bottom: 0; border-left: #00da88 dotted 1px;}
.gantt-today > div {position: absolute; top: 0; left: 0; font-size: 12px; line-height: 16px; padding: 0 5px; background: #00da88; color: #fff; white-space: nowrap; z-index: 10;}
.gantt-today > div {position: absolute; top: 0; left: 0; font-size: 12px; line-height: 14px; padding: 0 3px; background: #00da88; color: #fff; white-space: nowrap; z-index: 10;}
</style>
<script>
function initCmmiGanttBlock()
{
var ganttData = <?php echo $plans; ?>;
if(!ganttData.data) ganttData = {data: []};
/* Init product select control */
var $cmmiGanttProductID = $('#cmmiGanttProductID');
$cmmiGanttProductID.on('change', function()
{
$.get(createLink('product', 'ajaxSetState', 'productID=' + $cmmiGanttProductID.val()), function()
{
refreshBlock($cmmiGanttProductID.closest('.panel'));
});
});
<?php if(!empty($plans['data'])): ?>
var ganttData = <?php echo json_encode($plans['data']); ?>;
if(!ganttData) return;
var plans = [];
var tasks = [];
@@ -46,7 +61,7 @@
var TIME_GAP_STEP = 7;
var MIN_COL_WIDTH = 60;
$.each(ganttData.data, function(index, item)
$.each(ganttData, function(index, item)
{
plansMap[item.id] = item;
if(item.type === 'plan' && item.parent === '0')
@@ -110,16 +125,6 @@
$ganttContainer.css('left', $plans.width() + 15);
$ganttCanvas.css('height', canvasHeight);
var $cmmiGanttProductID = $('#cmmiGanttProductID');
if(!$cmmiGanttProductID.data('chosen')) $cmmiGanttProductID.chosen();
$cmmiGanttProductID.on('change', function()
{
$.get(createLink('product', 'ajaxSetState', 'productID=' + $cmmiGanttProductID.val()), function()
{
refreshBlock($cmmiGanttProductID.closest('.panel'));
});
});
/* Layout gantt */
layoutGantt();
$(window).on('resize', layoutGantt);
@@ -186,7 +191,10 @@
var day = Number.parseInt(dateStr[2].length > 3 ? dateStr[0] : dateStr[2], 10);
return new Date(year, month - 1, day).getTime();
}
<?php endif;?>
}
initCmmiGanttBlock();
</script>
</div>
+21 -22
View File
@@ -8,13 +8,12 @@ $maxConsumed = 0;
<div class='panel-body'>
<div class='table-row'>
<div class='table-col chart-titles'>
<?php foreach($programs as $program):?>
<?php
$maxTeamCount = max($program->teamCount, $maxTeamCount);
$maxConsumed = max($program->consumed, $maxConsumed);
?>
<div class='chart-title text-ellipsis'><strong><?php echo $program->name;?></strong></div>
<div class='chart-title text-ellipsis'><span><?php echo $program->name;?></span></div>
<?php endforeach;?>
</div>
<div class='table-col chart-rows'>
@@ -47,26 +46,26 @@ $maxConsumed = 0;
</div>
</div>
<style>
.block-programteam .panel-body {margin-top: -10px;}
.chart-titles {width: 110px; padding-right: 10px; padding-top: 30px; position: relative; z-index: 1;}
.chart-rows {position: relative; z-index: 0;}
.chart-title {width: 100px; line-height: 20px; padding: 5px 0; height: 30px;}
.chart-title > strong {background: #fff;}
.chart-col-title {line-height: 20px; margin-bottom: 10px; padding: 0 10px;}
.program-team, .program-consumed {padding: 0;}
.program-team {border-right: 1px solid #e5e8ec;}
.program-team > .chart-col-title {text-align: right;}
.chart-col-item {height: 30px; padding: 5px 0; position: relative;}
.chart-col-text {width: 50px; position: absolute; top: 5px; line-height: 20px; left: 0;}
.program-team .chart-col-item {padding-left: 50px; position: relative;}
.program-team .chart-col-item:before {position: absolute; content: ' '; z-index: 0; left: -100px; top: 14px; right: 0; border-top: 1px dotted #e5e8ec;}
.program-consumed .chart-col-item {padding-right: 50px;}
.chart-col-item .progress {background: none; border-radius: 0; overflow: visible; margin: 6px 0 0 0; position: relative; z-index: 1;}
.chart-col-item .progress > .progress-bar {border-radius: 0; position: relative; min-width: 1px;}
.program-team .chart-col-item .progress > .progress-bar {float: right; background-color: #39cfff;}
.chart-col-item .progress .progress-text {position: absolute; top: -6px; color: #333; width: 50px; line-height: 20px; white-space: nowrap; overflow: visible;}
.program-team .progress .progress-text {text-align: right; left: -50px; padding-right: 5px;}
.program-consumed .progress .progress-text {text-align: left; right: -50px; padding-left: 5px;}
.block-programteam .panel-body {margin-top: -10px}
.chart-titles {width: 110px; padding-right: 10px; padding-top: 30px; position: relative; z-index: 1}
.chart-rows {position: relative; z-index: 0}
.chart-title {width: 100px; line-height: 20px; padding: 5px 0; height: 30px}
.chart-title > span {background: #fff}
.chart-col-title {line-height: 20px; margin-bottom: 10px; padding: 0 10px}
.program-team, .program-consumed {padding: 0}
.program-team {border-right: 1px solid #e5e8ec}
.program-team > .chart-col-title {text-align: right}
.chart-col-item {height: 30px; padding: 5px 0; position: relative}
.chart-col-text {width: 50px; position: absolute; top: 5px; line-height: 20px; left: 0}
.program-team .chart-col-item {padding-left: 50px; position: relative}
.program-team .chart-col-item:before {position: absolute; content: ' '; z-index: 0; left: -100px; top: 14px; right: 0; border-top: 1px dotted #e5e8ec}
.program-consumed .chart-col-item {padding-right: 50px}
.chart-col-item .progress {background: none; border-radius: 0; overflow: visible; margin: 6px 0 0 0; position: relative; z-index: 1}
.chart-col-item .progress > .progress-bar {border-radius: 0; position: relative; min-width: 1px}
.program-team .chart-col-item .progress > .progress-bar {float: right; background-color: #39cfff}
.chart-col-item .progress .progress-text {position: absolute; top: -6px; color: #333; width: 50px; line-height: 20px; white-space: nowrap; overflow: visible}
.program-team .progress .progress-text {text-align: right; left: -50px; padding-right: 5px}
.program-consumed .progress .progress-text {text-align: left; right: -50px; padding-left: 5px}
</style>
</div>
<?php endif;?>
+3 -2
View File
@@ -106,10 +106,11 @@ class programplanModel extends model
* @param int $productID
* @param int $baselineID
* @param string $selectCustom
* @param bool $returnJson
* @access public
* @return string
*/
public function getDataForGantt($programID, $productID, $baselineID = 0, $selectCustom = '')
public function getDataForGantt($programID, $productID, $baselineID = 0, $selectCustom = '', $returnJson = true)
{
$this->loadModel('stage');
@@ -240,7 +241,7 @@ class programplanModel extends model
$datas['data'][$index]->taskProgress = $progress;
}
return json_encode($datas);
return $returnJson ? json_encode($datas) : $datas;
}
public function getTotalPercent($plan)