feat(phase-2): add trend chart analysis - grid view of number history
This commit is contained in:
@@ -47,6 +47,11 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
|
||||
$(document).off('click', '.btn-missingnum').on('click', '.btn-missingnum', function () {
|
||||
Controller.api.showMissingNumDialog();
|
||||
});
|
||||
|
||||
// 走势图按钮事件
|
||||
$(document).off('click', '.btn-trend').on('click', '.btn-trend', function () {
|
||||
Controller.api.showTrendDialog();
|
||||
});
|
||||
},
|
||||
add: function () {
|
||||
Controller.api.bindevent();
|
||||
@@ -140,6 +145,130 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 显示走势图弹窗
|
||||
*/
|
||||
showTrendDialog: function () {
|
||||
var html = '<div style="padding:20px;">' +
|
||||
'<div class="form-group" style="border-bottom:1px solid #eee;padding-bottom:10px;margin-bottom:10px;">' +
|
||||
' <label style="margin-right:15px;">' + __('Query Type') + '：</label>' +
|
||||
' <label class="radio-inline" style="margin-right:15px;">' +
|
||||
' <input type="radio" name="trend-type" value="all" checked> ' + __('All Numbers') +
|
||||
' </label>' +
|
||||
' <label class="radio-inline">' +
|
||||
' <input type="radio" name="trend-type" value="special"> ' + __('Special Only') +
|
||||
' </label>' +
|
||||
'</div>' +
|
||||
'<div class="form-group">' +
|
||||
' <label>' + __('Query Periods') + '：</label>' +
|
||||
' <input type="number" id="trend-periods" class="form-control" value="30" min="10" max="100" style="width:120px;display:inline-block;">' +
|
||||
' <button class="btn btn-primary" id="btn-trend-query" style="margin-left:10px;"><i class="fa fa-search"></i> ' + __('Query') + '</button>' +
|
||||
'</div>' +
|
||||
'<div id="trend-result" style="margin-top:15px;overflow-x:auto;"></div>' +
|
||||
'</div>';
|
||||
|
||||
Layer.open({
|
||||
type: 1,
|
||||
title: __('Trend Chart'),
|
||||
area: ['90%', '80%'],
|
||||
content: html,
|
||||
shadeClose: false,
|
||||
maxmin: true,
|
||||
success: function (layero, index) {
|
||||
$('#btn-trend-query', layero).on('click', function () {
|
||||
var periods = parseInt($('#trend-periods', layero).val()) || 30;
|
||||
var type = $('input[name="trend-type"]:checked', layero).val();
|
||||
Controller.api.queryTrend(periods, type, layero);
|
||||
});
|
||||
$('input[name="trend-type"]', layero).on('change', function () {
|
||||
var periods = parseInt($('#trend-periods', layero).val()) || 30;
|
||||
Controller.api.queryTrend(periods, $(this).val(), layero);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 查询走势图
|
||||
*/
|
||||
queryTrend: function (periods, type, layero) {
|
||||
var $btn = $('#btn-trend-query', layero);
|
||||
$btn.prop('disabled', true);
|
||||
$('#trend-result', layero).html('<div class="text-center"><i class="fa fa-spinner fa-spin"></i> ' + __('Loading') + '</div>');
|
||||
$.ajax({
|
||||
url: 'history/trendData',
|
||||
type: 'GET',
|
||||
data: {periods: periods, type: type},
|
||||
dataType: 'json',
|
||||
success: function (ret) {
|
||||
if (ret.code == 1) {
|
||||
Controller.api.renderTrend(ret.data, type, layero);
|
||||
} else {
|
||||
$('#trend-result', layero).html('<div class="alert alert-danger">' + (ret.msg || __('Query failed')) + '</div>');
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
$('#trend-result', layero).html('<div class="alert alert-danger">' + __('Query failed') + '</div>');
|
||||
},
|
||||
complete: function () {
|
||||
$btn.prop('disabled', false);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 渲染走势图（网格形式）
|
||||
*/
|
||||
renderTrend: function (data, type, layero) {
|
||||
var expects = data.expects;
|
||||
var rows = data.data;
|
||||
var colorMap = data.colorMap;
|
||||
|
||||
if (!expects || expects.length === 0) {
|
||||
$('#trend-result', layero).html('<div class="alert alert-info">' + __('No data available') + '</div>');
|
||||
return;
|
||||
}
|
||||
|
||||
var getColor = function (num) {
|
||||
var color = colorMap[num];
|
||||
if (!color) return '#95a5a6';
|
||||
if (color.indexOf('红') !== -1) return '#e74c3c';
|
||||
if (color.indexOf('蓝') !== -1) return '#3498db';
|
||||
if (color.indexOf('绿') !== -1) return '#2ecc71';
|
||||
return '#95a5a6';
|
||||
};
|
||||
|
||||
var html = '<table class="table table-bordered table-condensed" style="font-size:12px;white-space:nowrap;">';
|
||||
html += '<thead><tr><th>期号</th>';
|
||||
if (type === 'special') {
|
||||
html += '<th style="text-align:center;">特码</th>';
|
||||
} else {
|
||||
for (var c = 1; c <= 7; c++) {
|
||||
html += '<th style="text-align:center;">' + c + '</th>';
|
||||
}
|
||||
}
|
||||
html += '</tr></thead><tbody>';
|
||||
|
||||
for (var i = 0; i < expects.length; i++) {
|
||||
html += '<tr><td>' + expects[i] + '</td>';
|
||||
if (type === 'special') {
|
||||
var num = rows[i].num7;
|
||||
var color = getColor(num);
|
||||
html += '<td style="text-align:center;"><span style="display:inline-block;width:28px;height:28px;line-height:28px;text-align:center;border-radius:50%;color:#fff;background-color:' + color + ';font-weight:bold;">' + num + '</span></td>';
|
||||
} else {
|
||||
for (var j = 1; j <= 7; j++) {
|
||||
var val = rows[i]['num' + j];
|
||||
var c = getColor(val);
|
||||
html += '<td style="text-align:center;"><span style="display:inline-block;width:28px;height:28px;line-height:28px;text-align:center;border-radius:50%;color:#fff;background-color:' + c + ';font-weight:bold;">' + val + '</span></td>';
|
||||
}
|
||||
}
|
||||
html += '</tr>';
|
||||
}
|
||||
html += '</tbody></table>';
|
||||
|
||||
$('#trend-result', layero).html(html);
|
||||
},
|
||||
|
||||
/**
|
||||
* 显示遗漏号码分析弹窗
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user