feat(dashboard): 新增波色转移概率表格,与区域转移概率并排展示

This commit is contained in:
2026-04-25 23:31:18 +08:00
parent af15aef37d
commit 8c8dec620e
3 changed files with 112 additions and 5 deletions
+29 -3
View File
@@ -85,10 +85,13 @@ define(['jquery'], function ($) {
html += '<div class="dash-section"><h4>🔢 尾数频率</h4><div id="tail-chart" style="width:100%;height:220px;"></div></div>';
// 区域转移概率
// 区域转移概率 + 波色转移概率
if (zt && zt.matrix && zt.matrix.length > 0) {
html += '<div class="dash-section"><h4>🔄 区域转移概率</h4><div style="font-size:12px;color:#999;margin-bottom:8px;">当前共 ' + zt.total_transitions + ' 次区域转移 | 行=上一期特码所在区域,列=下一期特码所在区域</div>';
html += '<table class="table table-bordered table-condensed text-center" style="max-width:600px;margin:0 auto;"><thead><tr><th style="width:80px;position:relative;"><div style="width:100%;height:35px;border-bottom:1px solid #e5e5e5;position:relative;"><span style="position:absolute;top:2px;right:5px;font-size:12px;">区域</span><span style="position:absolute;bottom:2px;left:5px;font-size:12px;">特码</span></div></th>';
var cwt = data.colorwavetransition;
html += '<div class="dash-section"><h4>🔄 转移概率</h4><div class="row">';
// 左侧:区域转移
html += '<div class="col-sm-7"><div style="font-size:12px;color:#999;margin-bottom:8px;">区域转移(共 ' + zt.total_transitions + ' 次)</div>';
html += '<table class="table table-bordered table-condensed text-center" style="margin:0 auto;"><thead><tr><th style="width:80px;position:relative;"><div style="width:100%;height:35px;border-bottom:1px solid #e5e5e5;position:relative;"><span style="position:absolute;top:2px;right:5px;font-size:12px;">区域</span><span style="position:absolute;bottom:2px;left:5px;font-size:12px;">特码</span></div></th>';
for (var z = 0; z < zt.zones.length; z++) {
html += '<th>' + zt.zones[z] + '</th>';
}
@@ -105,6 +108,29 @@ define(['jquery'], function ($) {
html += '</tr>';
}
html += '</tbody></table></div>';
// 右侧:波色转移
if (cwt && cwt.matrix && cwt.matrix.length > 0) {
html += '<div class="col-sm-5"><div style="font-size:12px;color:#999;margin-bottom:8px;">波色转移(共 ' + cwt.total_transitions + ' 次)</div>';
html += '<table class="table table-bordered table-condensed text-center" style="margin:0 auto;"><thead><tr><th style="width:70px;position:relative;"><div style="width:100%;height:35px;border-bottom:1px solid #e5e5e5;position:relative;"><span style="position:absolute;top:2px;right:5px;font-size:12px;">区域</span><span style="position:absolute;bottom:2px;left:5px;font-size:12px;">特码</span></div></th>';
for (var z = 0; z < cwt.colors.length; z++) {
html += '<th>' + cwt.colors[z] + '</th>';
}
html += '</tr></thead><tbody>';
var cwColors = ['#e74c3c', '#3498db', '#2ecc71'];
for (var r = 0; r < 3; r++) {
html += '<tr><td style="font-weight:bold;color:' + cwColors[r] + ';">' + cwt.colors[r] + '</td>';
for (var c = 0; c < 3; c++) {
var pct = cwt.probabilities[r][c];
var cnt = cwt.matrix[r][c];
var bg = pct > 40 ? cwColors[r] : pct > 20 ? cwColors[c] : pct > 0 ? '#95a5a6' : '#f5f5f5';
var txt = pct > 20 ? '#fff' : '#333';
html += '<td style="background-color:' + bg + ';color:' + txt + ';">' + cnt + '次<br>' + pct + '%</td>';
}
html += '</tr>';
}
html += '</tbody></table></div>';
}
html += '</div></div>';
}
// 热力图部分