Design/EasySoft-ZenTaoPMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

Merge branch 'chart_async' into 'master'

Browse Source 
Chart async

See merge request easycorp/zentaopms!7389
This commit is contained in:
孙广明
2023-04-12 09:32:31 +00:00
parent 0c6c34b46f f8f4c3363e
commit f27939941b
4 changed files with 59 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
module/chart/css/preview.css
+1 -1
View File
@@ -48,6 +48,6 @@
.filter-items{display: flex; flex: 1; flex-wrap: wrap;}
.filter-item{padding: 0 16px 5px 0;}
.filter-item-grow{flex-grow: 1;}
.queryBtn{display: flex; align-items: center; padding-bottom: 5px;}
.queryBtn{display: flex; align-items: center; padding-bottom: 5px; flex-basis: 60px;}
.filterBox .picker-selections{width: 128px; height: 32px; overflow: hidden; text-overflow: clip; white-space: nowrap;}
module/chart/js/common.js
+12
View File
@@ -17,6 +17,7 @@ function ajaxGetChart(check = true, chart = DataStorage.chart, echart = window.e
var data = JSON.parse(resp);
if(echart)
{
echart.resize();
echart.clear();
echart.setOption(data, true);
$('.btn-export').removeClass('hidden');
@@ -24,6 +25,17 @@ function ajaxGetChart(check = true, chart = DataStorage.chart, echart = window.e
});
}
function resizeChart()
{
var filterHeight = $('.main-col .cell #filterContent').height();
$('.main-col .cell #draw').css('height', 'calc(100% - ' + (filterHeight + 16) + 'px)')
if(echart)
{
echart.resize();
}
}
/**
* Init picker.
*
module/chart/js/preview.js
+41 -20
View File
@@ -7,19 +7,22 @@ $(function()
chartMap = new Map();
if(charts.length > 0)
{
charts.forEach(function(chart)
var chartPros = charts.map(function(chart)
{
var echartDom = $('#chartDraw' + chart.currentGroup + chart.id).get(0);
var echartDom = $('#chartDraw' + chart.currentGroup + '_' + chart.id).get(0);
var echart = echarts.init(echartDom);
ajaxGetChart(false, chart, echart);
renderFilters(chart);
chartMap.set(chart.currentGroup + chart.id, chart);
chartMap.set(chart.cudrrentGroup + chart.id, chart);
return renderFilters(chart);
});
}
calcPreviewGrowFilter();
$('body').resize(() => {calcPreviewGrowFilter(true);});
Promise.all(chartPros).then(function()
{
calcPreviewGrowFilter();
$('body').resize(() => {calcPreviewGrowFilter(true);});
});
}
$('[data-toggle="tooltip"]').tooltip();
})
@@ -127,12 +130,13 @@ function calcPreviewGrowFilter(resize = false)
/* When body resize, resize echarts. */
if(resize)
{
var echartDom = $('#chartDraw' + chart.currentGroup + chart.id).get(0);
var echartDom = $('#chartDraw' + chart.currentGroup + '_' + chart.id).get(0);
var echart = echarts.init(echartDom);
echart.resize();
}
var $filterItems = $('#filterItems' + chart.currentGroup + chart.id + ' .filter-items');
var $filterBox = $('#filterItems' + chart.currentGroup + '_' + chart.id);
var $filterItems = $filterBox.find('.filter-items');
/* When refreshing this page, ZenTao load this page twice, when the first load isn't complete, jump back to index and load the second time,
the first load can't calc filter width, can't get the element using jQuery at first load. */
var hasInit = true;
@@ -146,8 +150,12 @@ function calcPreviewGrowFilter(resize = false)
var domWidth = $filterItems[0].getBoundingClientRect().width;
var nowWidth = domWidth;
var lineWrap = false;
var nowCount = 0;
var canGrowTotal = 0;
$filterBox.find('.query-inside').addClass('hidden');
$filterBox.find('.query-outside').addClass('hidden');
chart.filters.forEach(function(filter, index)
{
var nowItem = '.filter-item-' + index;
@@ -169,6 +177,7 @@ function calcPreviewGrowFilter(resize = false)
canGrowTotal += nowCount;
nowWidth = domWidth - filterWidth;
nowCount = 1;
lineWrap = true;
}
});
@@ -179,24 +188,36 @@ function calcPreviewGrowFilter(resize = false)
var nowItem = '.filter-item-' + index;
if(canGrowTotal >= index + 1) $filterItems.find(nowItem).addClass('filter-item-grow');
});
var queryType =(!lineWrap && nowWidth >= 60) ? '.query-inside' : '.query-outside';
$filterBox.find(queryType).removeClass('hidden');
});
}
function renderFilters(chart)
{
if(chart.filters.length == 0) return;
var fieldNames = {};
Object.keys(chart.fieldSettings).forEach(function(key){fieldNames[key] = chart.fieldSettings[key].name;});
$.post(createLink('chart', 'ajaxGetFilterForm', 'chartID=' + chart.id), {fieldList: fieldNames, fieldSettings: chart.fieldSettings, filters: chart.filters, langs: chart.langs}, function(resp)
return new Promise(function(resolve, reject)
{
resp = JSON.parse(resp);
chart.filters.forEach(function(filter, index)
if(chart.filters.length == 0)
{
var $filterItems = $('#filterItems' + chart.currentGroup + chart.id + ' .filter-items');
$filterItems.append(renderFilterItem(filter, resp, index));
resolve();
return;
}
var fieldNames = {};
Object.keys(chart.fieldSettings).forEach(function(key){fieldNames[key] = chart.fieldSettings[key].name;});
$.post(createLink('chart', 'ajaxGetFilterForm', 'chartID=' + chart.id), {fieldList: fieldNames, fieldSettings: chart.fieldSettings, filters: chart.filters, langs: chart.langs}, function(resp)
{
resp = JSON.parse(resp);
var $filterItems = $('#filterItems' + chart.currentGroup + '_' + chart.id + ' .filter-items');
chart.filters.forEach(function(filter, index)
{
$filterItems.append(renderFilterItem(filter, resp, index));
});
$filterItems.append(queryDom);
resolve();
});
});
})
}
function renderFilterItem(filter, resp, index, step)
module/chart/view/preview.html.php
+5 -3
View File
@@ -20,6 +20,8 @@
<?php js::set('WIDTH_INPUT', $config->chart->widthInput);?>
<?php js::set('WIDTH_DATE', $config->chart->widthDate);?>
<?php js::set('pickerHeight', $config->bi->pickerHeight);?>
<?php $queryDom = "<div class='queryBtn query-inside hidden'> <button type='submit' id='submit' class='btn btn-primary btn-query' data-loading='Loading...'>{$lang->chart->query}</button></div>";?>
<?php js::set('queryDom', $queryDom);?>
<div id='mainMenu' class='clearfix main-position'>
<div class='btn-toolBar pull-left parent-position'>
@@ -92,13 +94,13 @@
</div>
</div>
<div class='panel-body'>
<div id="filterItems<?php echo $chart->currentGroup;?><?php echo $chart->id;?>" class='filterBox'>
<div id="filterItems<?php echo $chart->currentGroup . '_';?><?php echo $chart->id;?>" class='filterBox'>
<div class='filter-items'></div>
<?php if(!empty($chart->filters)):?>
<div class='queryBtn'><?php echo html::submitButton($lang->chart->query, "data-chart={$chart->currentGroup}{$chart->id}", 'btn btn-primary btn-query');?></div>
<div class='queryBtn query-outside'><?php echo html::submitButton($lang->chart->query, "data-chart={$chart->currentGroup}{$chart->id}", 'btn btn-primary btn-query');?></div>
<?php endif;?>
</div>
<div id="chartDraw<?php echo $chart->currentGroup;?><?php echo $chart->id;?>" data-group="<?php echo $chart->currentGroup;?>" data-id="<?php echo $chart->id;?>" class='echart-content'></div>
<div id="chartDraw<?php echo $chart->currentGroup . '_';?><?php echo $chart->id;?>" data-group="<?php echo $chart->currentGroup;?>" data-id="<?php echo $chart->id;?>" class='echart-content'></div>
</div>
</div>
<?php endforeach;?>