916117771/amlhc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dashboard): 新增筛号器功能

Browse Source 
在history页面工具栏新增筛号器按钮，点击弹窗显示1-49所有号码（含波色、生肖标识），支持通过尾号下拉选择、生肖/波色按钮切换来过滤号码，被排除的号码变为灰色
This commit is contained in:
leon
2026-04-28 18:58:06 +08:00
parent 7fb2ba4dcf
commit bd6db24c4f
2 changed files with 154 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/admin/view/history/index.html
+1
View File
@@ -18,6 +18,7 @@
<a href="javascript:;" class="btn btn-warning btn-consecutive" title="{:__('Consecutive')}"><i class="fa fa-link"></i> {:__('Consecutive')}</a>
<a href="javascript:;" class="btn btn-default btn-tailnums" title="{:__('Tail Numbers')}"><i class="fa fa-list-ol"></i> {:__('Tail Numbers')}</a>
<a href="javascript:;" class="btn btn-danger btn-specialhotcold" title="{:__('Special Hot/Cold')}"><i class="fa fa-fire"></i> 特码冷热</a>
<a href="javascript:;" class="btn btn-primary btn-numberfilter" title="筛号器"><i class="fa fa-filter"></i> 筛号器</a>
<!-- <a href="javascript:;" class="btn btn-success btn-dashboard" title="{:__('Dashboard')}"><i class="fa fa-tachometer"></i> {:__('Dashboard')}</a>-->
<!-- <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('history/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>-->
</div>
public/assets/js/backend/history.js
+153
View File
@@ -97,6 +97,11 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
$(document).off('click', '.btn-dashboard').on('click', '.btn-dashboard', function () {
Controller.api.showDashboard();
});
// 筛号器按钮事件
$(document).off('click', '.btn-numberfilter').on('click', '.btn-numberfilter', function () {
Controller.api.showNumberFilterDialog();
});
},
add: function () {
Controller.api.bindevent();
@@ -735,6 +740,154 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
$('#shc-result', layero).html(html);
},
/**
* 筛号器弹窗
*/
showNumberFilterDialog: function () {
var html = '<style>.btn-gray{background-color:#d2d2d2!important;border-color:#adadad!important;color:#999!important;}</style>' +
'<div style="padding:20px;">' +
'<div style="margin-bottom:15px;display:flex;gap:15px;align-items:center;flex-wrap:wrap;">' +
' <div class="form-group" style="margin:0;">' +
' <label>尾号筛选：</label>' +
' <select id="nf-tail" class="form-control" style="width:100px;display:inline-block;">' +
' <option value="">全部</option>';
for (var t = 0; t <= 9; t++) {
html += '<option value="' + t + '">' + t + '</option>';
}
html += ' </select>' +
' </div>' +
' <button class="btn btn-default btn-nf-reset" style="margin-left:auto;"><i class="fa fa-refresh"></i> 重置</button>' +
'</div>' +
'<div style="margin-bottom:15px;">' +
' <label style="margin-right:10px;">生肖：</label>' +
' <div id="nf-zodiac" style="display:inline-flex;gap:6px;flex-wrap:wrap;">' +
' <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="鼠">鼠</button>' +
' <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="牛">牛</button>' +
' <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="虎">虎</button>' +
' <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="兔">兔</button>' +
' <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="龙">龙</button>' +
' <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="蛇">蛇</button>' +
' <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="马">马</button>' +
' <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="羊">羊</button>' +
' <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="猴">猴</button>' +
' <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="鸡">鸡</button>' +
' <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="狗">狗</button>' +
' <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="猪">猪</button>' +
' </div>' +
'</div>' +
'<div style="margin-bottom:15px;">' +
' <label style="margin-right:10px;">波色：</label>' +
' <div id="nf-color" style="display:inline-flex;gap:6px;">' +
' <button class="btn btn-default btn-xs nf-color" data-color="红" style="color:#e74c3c;">红波</button>' +
' <button class="btn btn-default btn-xs nf-color" data-color="蓝" style="color:#3498db;">蓝波</button>' +
' <button class="btn btn-default btn-xs nf-color" data-color="绿" style="color:#2ecc71;">绿波</button>' +
' </div>' +
'</div>' +
'<div id="nf-numbers" style="display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;"></div>' +
'</div>';
Layer.open({
type: 1,
title: '筛号器',
area: ['700px', '600px'],
content: html,
shadeClose: true,
success: function (layero, index) {
// 渲染号码网格
Controller.api.renderNumberFilterGrid(layero);
// 尾号下拉选择
$('#nf-tail', layero).on('change', function () {
Controller.api.applyNumberFilters(layero);
});
// 生肖按钮点击
$('.nf-zodiac', layero).on('click', function () {
var $btn = $(this);
$btn.toggleClass('btn-default').toggleClass('btn-gray');
Controller.api.applyNumberFilters(layero);
});
// 波色按钮点击
$('.nf-color', layero).on('click', function () {
var $btn = $(this);
$btn.toggleClass('btn-default').toggleClass('btn-gray');
Controller.api.applyNumberFilters(layero);
});
// 重置按钮
$('.btn-nf-reset', layero).on('click', function () {
$('#nf-tail', layero).val('');
$('.nf-zodiac', layero).removeClass('btn-gray').addClass('btn-default');
$('.nf-color', layero).removeClass('btn-gray').addClass('btn-default');
Controller.api.applyNumberFilters(layero);
});
}
});
},
/**
* 渲染筛号器号码网格
*/
renderNumberFilterGrid: function (layero) {
var html = '';
for (var num = 1; num <= 49; num++) {
var color = Controller.api.getColorByNum(num);
var animal = Controller.api.getAnimalByNum(num);
html += '<div class="nf-number" data-num="' + num + '" data-color="' + (color.indexOf('红') !== -1 ? '红' : color.indexOf('蓝') !== -1 ? '蓝' : '绿') + '" data-animal="' + animal + '" data-tail="' + (num % 10) + '" style="text-align:center;background:#f9f9f9;padding:6px 4px;border-radius:6px;min-width:60px;transition:opacity 0.2s;">' +
'<span style="display:inline-block;width:36px;height:36px;line-height:36px;text-align:center;border-radius:50%;color:#fff;background-color:' + color + ';font-weight:bold;">' + num + '</span>' +
'<div style="font-size:10px;color:#666;line-height:1.2;">' + animal + '</div>' +
'</div>';
}
$('#nf-numbers', layero).html(html);
},
/**
* 应用筛号器过滤条件
*/
applyNumberFilters: function (layero) {
var tailVal = $('#nf-tail', layero).val();
// 收集被点击（置灰）的生肖
var excludedZodiacs = [];
$('.nf-zodiac.btn-gray', layero).each(function () {
excludedZodiacs.push($(this).data('zodiac'));
});
// 收集被点击（置灰）的波色
var excludedColors = [];
$('.nf-color.btn-gray', layero).each(function () {
excludedColors.push($(this).data('color'));
});
$('.nf-number', layero).each(function () {
var $num = $(this);
var num = parseInt($num.data('num'));
var tail = $num.data('tail');
var animal = $num.data('animal');
var color = $num.data('color');
var hidden = false;
// 尾号筛选：选择了具体尾号则隐藏不匹配的
if (tailVal !== '' && parseInt(tailVal) !== tail) {
hidden = true;
}
// 排除的生肖
if (excludedZodiacs.indexOf(animal) !== -1) {
hidden = true;
}
// 排除的波色
if (excludedColors.indexOf(color) !== -1) {
hidden = true;
}
if (hidden) {
$num.css('opacity', '0.25').css('filter', 'grayscale(100%)');
} else {
$num.css('opacity', '1').css('filter', 'none');
}
});
},
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
},