<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>结果趋势表格</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/echarts.min.js"></script>
<style type="text/css">
.w5 {
width: 50px;
}
.w10 {
width: 120px;
}
.t-r {
text-align: right;
}
.t-d {
padding-bottom: 5px;
}
.m-b {
margin-left: 10px;
}
.chart-m {
width: 360px;
height: 260px;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="bg-info">
<div class="t-d" style="padding: 20px 10px;">
<label>最近期数：</label>
<select id="period" class="w10">
<option value="100">100</option>
<option value="50">50</option>
<option value="30">30</option>
<option value="10">10</option>
</select>
</div>
</div>
<div style="height: 240px;">
<div style="width: 100%;">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="mainA" class="chart-m"></div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="mainB" class="chart-m"></div>
</div>
<div style="width: 100%;">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="mainC" class="chart-m"></div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="mainD" class="chart-m"></div>
</div>
</div>
<div class="bg-info">
<div class="t-d" style="padding: 20px 10px;">
<label>碰撞个数：</label>
<select id="codes" class="w10">
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
</select>
</div>
</div>
<div>
</div>
<div class="zhong" style="overflow: scroll;max-height: 490px;">
<table class="table table-hover">
<tr>
<th>时间</th>
<th>期数</th>
<th>结果</th>
<th>A100</th>
<th>B100</th>
<th>C100</th>
<th>D100</th>
<th>A50</th>
<th>B50</th>
<th>C50</th>
<th>D50</th>
<th>A30</th>
<th>B30</th>
<th>C30</th>
<th>D30</th>
<th>A10</th>
<th>B10</th>
<th>C10</th>
<th>D10</th>
</tr>
<tbody class="t-body">
</tbody>
</table>
</div>
</div>
<script>
// 期数
var limitNum = 100;
// 碰撞个数
var codeNum = 7;
$(document).ready(function () {
start()
compare();
})
$('#period').change(function() {
limitNum = ($(this).children('option:selected').val());
start()
})
$('#codes').change(function() {
codeNum = ($(this).children('option:selected').val());
compare()
})
// 基于准备好的dom，初始化echarts实例
var chartA = echarts.init(document.getElementById('mainA'));
var chartB = echarts.init(document.getElementById('mainB'));
var chartC = echarts.init(document.getElementById('mainC'));
var chartD = echarts.init(document.getElementById('mainD'));
function start() {
$.ajax({
type: "post",
url: "/queryHistoryList",
dataType: "json",
data: {
'limit': limitNum
},
success: function (data) {
// console.log(data)
refresh(data)
},
error: function (err) {
console.log(err)
}
});
}
function compare() {
$.ajax({
type: "post",
url: "/queryHistoryListAll",
dataType: "json",
success: function (data) {
// console.log(data)
showList(data)
},
error: function (err) {
console.log(err)
}
});
}
function refresh(data) {
var dA = []
var nA = []
for (var i = 0; i < data['a'].length; i++) {
dA.push(data['a'][i]['a']);
nA.push(data['a'][i]['num']);
}
// 指定图表的配置项和数据
var optionA = {
title: {
text: 'A位'
},
tooltip: {},
legend: {
data: ['AAAA']
},
xAxis: {
data: dA
},
yAxis: {},
series: [{
name: 'A位',
type: 'bar',
data: nA
}]
};
// 使用刚指定的配置项和数据显示图表。
chartA.setOption(optionA);
var dB = []
var nB = []
for (var i = 0; i < data['b'].length; i++) {
dB.push(data['b'][i]['b']);
nB.push(data['b'][i]['num']);
}
// 指定图表的配置项和数据
var optionB = {
title: {
text: 'B位'
},
tooltip: {},
legend: {
data: ['BBBB']
},
xAxis: {
data: dB
},
yAxis: {},
series: [{
name: 'B位',
type: 'bar',
data: nB
}]
};
// 使用刚指定的配置项和数据显示图表。
chartB.setOption(optionB);
var dC = []
var nC = []
for (var i = 0; i < data['c'].length; i++) {
dC.push(data['c'][i]['c']);
nC.push(data['c'][i]['num']);
}
// 指定图表的配置项和数据
var optionC = {
title: {
text: 'C位'
},
tooltip: {},
legend: {
data: ['CCCC']
},
xAxis: {
data: dC
},
yAxis: {},
series: [{
name: 'C位',
type: 'bar',
data: nC
}]
};
// 使用刚指定的配置项和数据显示图表。
chartC.setOption(optionC);
var dD = []
var nD = []
for (var i = 0; i < data['d'].length; i++) {
dD.push(data['d'][i]['d']);
nD.push(data['d'][i]['num']);
}
// 指定图表的配置项和数据
var optionD = {
title: {
text: 'D位'
},
tooltip: {},
legend: {
data: ['DDDD']
},
xAxis: {
data: dD
},
yAxis: {},
series: [{
name: 'D位',
type: 'bar',
data: nD
}]
};
// 使用刚指定的配置项和数据显示图表。
chartD.setOption(optionD);
}
function showList(data){
var zhongHtml = '';
for (var i = 0; i < data.length; i++) {
var z = data[i]
var code = ''
if (z['a']){
code = z['a'] + ',' +z['b'] + ',' +z['c'] + ',' +z['d'];
} else {
code = '-';
}
zhongHtml += '<tr>';
zhongHtml += '<td>';
zhongHtml += z['day'];
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += z['period'] || "-";
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += code;
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += compareSame(z['a'], z['A100']);
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += compareSame(z['b'], z['B100']);
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += compareSame(z['c'], z['C100']);
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += compareSame(z['d'], z['D100']);
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += compareSame(z['a'], z['A50']);
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += compareSame(z['b'], z['B50']);
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += compareSame(z['c'], z['C50']);
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += compareSame(z['d'], z['D50']);
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += compareSame(z['a'], z['A30']);
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += compareSame(z['b'], z['B30']);
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += compareSame(z['c'], z['C30']);
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += compareSame(z['d'], z['D30']);
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += compareSame(z['a'], z['A10']);
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += compareSame(z['b'], z['B10']);
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += compareSame(z['c'], z['C10']);
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += compareSame(z['d'], z['D10']);
zhongHtml += '</td>';
zhongHtml += '</tr>';
}
$('.t-body').html(zhongHtml)
$('.z-nums').html('概率列表（<span class="text-danger">' + data.length + '</span>）')
}
/**
* 比对位置
* @param code
* @param data
* @returns {string|*}
*/
function compareSame(code, data) {
if(code){
var d = data.replace(/,/g, '');
// console.log(d.substring(0, 7))
if (d.length > codeNum && d.substring(0, codeNum).indexOf(code)!=-1) {
return '<span style="color: #ff0000;">' + data + '</span>';
} else if (d.length <= codeNum && d.indexOf(code) != -1){
return '<span style="color: #ff0000;">' + data + '</span>';
}
}
return data;
}
</script>
</body>
</html>
