You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
375 lines
14 KiB
375 lines
14 KiB
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>专家抽取</title>
|
|
<link rel="stylesheet" href="../../component/layui/css/layui.css" />
|
|
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
|
|
<script src="../../component/layui/layui.js"></script>
|
|
<script src="../../component/pear/xm-select.js"></script>
|
|
<style>
|
|
.wrapDiv {
|
|
width: 80%;
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
/* text-align: center; */
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.leftBox {
|
|
float: left;
|
|
width: 750px;
|
|
height: 600px;
|
|
margin: 0 auto;
|
|
margin-top: 0px;
|
|
clear: both;
|
|
border: 1px solid #cccccc;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
#span {
|
|
float: right;
|
|
top: 30px;
|
|
right: 185px;
|
|
}
|
|
|
|
|
|
|
|
.nameBox {
|
|
width: 100px;
|
|
height: 40px;
|
|
float: left;
|
|
border: 1px solid #cccccc;
|
|
margin-left: 20px;
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.selectedName {
|
|
float: right;
|
|
width: 430px;
|
|
height: 600px;
|
|
border: 1px solid #cccccc;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="layui-form">
|
|
|
|
<div class="wrapDiv">
|
|
<div class="layui-row">
|
|
<div class="layui-col-md12">
|
|
<div>
|
|
<label class="layui-form-label"
|
|
style="width: auto;font-size: 14px;font-weight: bold;margin-bottom: 10px;">抽取设置</label>
|
|
</div>
|
|
<div>
|
|
<div class="layui-form-item layui-inline">
|
|
<label class="layui-form-label" style="width: auto;">领域：</label>
|
|
<div class="layui-input-inline" id="lingyu" style="width: 1062px;"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="layui-form-item layui-inline">
|
|
<label class="layui-form-label" style="width: auto;">分类：</label>
|
|
<div class="layui-input-inline" id="fenlei" style="width: 446px;"></div>
|
|
</div>
|
|
|
|
<div class="layui-form-item layui-inline">
|
|
<label class="layui-form-label" style="width: auto;">抽取人数：</label>
|
|
<div class="layui-input-inline" style="width: 100px;">
|
|
<input type="number" id="personCount" value="3" placeholder="" autocomplete="off"
|
|
class="layui-input" min="1" max="20" step="1" lay-affix="number">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md8">
|
|
<label class="layui-form-label" style="width: auto;font-size: 14px;font-weight: bold;">候选专家</label>
|
|
<div id="leftBox" class="leftBox"></div>
|
|
</div>
|
|
<div class="layui-col-md4">
|
|
<label class="layui-form-label"
|
|
style="width: auto;font-size: 14px;left: -46px;font-weight: bold;">专家抽取结果</label>
|
|
<div id="selectedName" class="selectedName">
|
|
<table class="layui-hide" id="tableData"></table>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<button type="button" class="layui-btn layui-bg-orange" id="btn" value="开始抽取">开始抽取</button>
|
|
<button type="button" class="layui-btn layui-bg-blue" id="save">保存结果</button>
|
|
</div>
|
|
|
|
<script>
|
|
layui.use('table', function () {
|
|
var table = layui.table;
|
|
var arr = [
|
|
{ "id": "1", "name": "吉帆", "tel": "13888888881", "org_name": "单位1" },
|
|
{ "id": "2", "name": "静慧", "tel": "13888888882", "org_name": "单位2" },
|
|
{ "id": "3", "name": "嘉歆", "tel": "13888888883", "org_name": "单位3" },
|
|
{ "id": "4", "name": "金枝", "tel": "13888888884", "org_name": "单位4" },
|
|
{ "id": "5", "name": "王大妈", "tel": "13888888885", "org_name": "单位5" },
|
|
{ "id": "6", "name": "老王", "tel": "13888888886", "org_name": "单位6" },
|
|
{ "id": "7", "name": "刘疙瘩", "tel": "13888888887", "org_name": "单位7" },
|
|
{ "id": "8", "name": "杨伟", "tel": "13888888888", "org_name": "单位8" },
|
|
{ "id": "9", "name": "韩晁", "tel": "13888888889", "org_name": "单位9" },
|
|
{ "id": "10", "name": "静涵", "tel": "13888888810", "org_name": "单位10" },
|
|
{ "id": "11", "name": "静曼", "tel": "13888888811", "org_name": "单位11" },
|
|
{ "id": "12", "name": "晶晶", "tel": "13888888812", "org_name": "单位12" },
|
|
{ "id": "13", "name": "靓影", "tel": "13888888813", "org_name": "单位13" },
|
|
{ "id": "14", "name": "嘉宝", "tel": "13888888814", "org_name": "单位14" },
|
|
{ "id": "15", "name": "李静", "tel": "13888888815", "org_name": "单位15" },
|
|
{ "id": "16", "name": "李志", "tel": "13888888816", "org_name": "单位16" },
|
|
{ "id": "17", "name": "李伟", "tel": "13888888817", "org_name": "单位17" },
|
|
{ "id": "18", "name": "家美", "tel": "13888888818", "org_name": "单位18" },
|
|
{ "id": "19", "name": "玉叶", "tel": "13888888819", "org_name": "单位19" },
|
|
{ "id": "20", "name": "静恬", "tel": "13888888820", "org_name": "单位20" },
|
|
{ "id": "21", "name": "王飞", "tel": "13888888821", "org_name": "单位21" }
|
|
];
|
|
|
|
var tableData = [];
|
|
|
|
var orgArrCount = arr.length;
|
|
var currentSelectNum = 0;
|
|
|
|
initForm();
|
|
|
|
var lingyuSelect = xmSelect.render({
|
|
el: '#lingyu',
|
|
name: 'lingyu',
|
|
autoRow: true,
|
|
direction: 'auto',
|
|
tree: {
|
|
show: true,
|
|
expandedKeys: [5],
|
|
},
|
|
toolbar: {
|
|
show: true,
|
|
showIcon: true,
|
|
},
|
|
theme: {
|
|
color: localStorage.getItem("theme-color-color"),
|
|
},
|
|
data: [
|
|
{ name: '教学与德育方面', id: 1 },
|
|
{ name: '智慧校园建设', id: 2 },
|
|
{ name: '常规技术设备', id: 3 },
|
|
{ name: '信息技术装备', id: 4 },
|
|
{ name: '创客指导与应用', id: 5 },
|
|
{ name: '创新实验室建设', id: 6 },
|
|
{ name: '网络技术与安全', id: 7 },
|
|
{ name: '资源建设与应用', id: 8 }
|
|
],
|
|
prop: {
|
|
value: "id"
|
|
}
|
|
});
|
|
|
|
var fenleiSelect = xmSelect.render({
|
|
el: '#fenlei',
|
|
name: 'fenlei',
|
|
autoRow: true,
|
|
direction: 'auto',
|
|
tree: {
|
|
show: true,
|
|
expandedKeys: [5],
|
|
},
|
|
toolbar: {
|
|
show: true,
|
|
showIcon: true,
|
|
},
|
|
theme: {
|
|
color: localStorage.getItem("theme-color-color"),
|
|
},
|
|
data: [
|
|
{ name: '高校', id: 1 },
|
|
{ name: '省直', id: 2 },
|
|
{ name: '县区', id: 3 },
|
|
{ name: '市直', id: 4 },
|
|
{ name: '公司', id: 5 },
|
|
{ name: '职业学校', id: 6 }
|
|
],
|
|
prop: {
|
|
value: "id"
|
|
}
|
|
});
|
|
|
|
// 初始化表单
|
|
function initForm() {
|
|
// 动态创建图层
|
|
dynamicCreateBox();
|
|
}
|
|
|
|
// 动态创建层
|
|
function dynamicCreateBox() {
|
|
for (var i = 0; i < arr.length; i++) {
|
|
var div = document.createElement("div");
|
|
div.innerText = arr[i].name;
|
|
div.className = "nameBox";
|
|
$("#leftBox").append(div);
|
|
};
|
|
}
|
|
|
|
// 清空小方格颜色
|
|
function clearBoxColor() {
|
|
$("#leftBox").children("div").each(function () {
|
|
$(this).css({
|
|
'background-color': '',
|
|
'color': '#000',
|
|
'border': '1px solid #cccccc'
|
|
});
|
|
});
|
|
}
|
|
|
|
// 设置选中小方格颜色
|
|
function setBoxColor() {
|
|
$("#leftBox").children("div").each(function () {
|
|
var thisText = ($(this).text());
|
|
var selectedName = arr[currentSelectNum].name;
|
|
|
|
if (thisText == selectedName) {
|
|
$(this).css({
|
|
'background-color': '#ffb800',
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// 设置选中小方格颜色
|
|
function setFinalColor(_index) {
|
|
$("#leftBox").children("div").each(function () {
|
|
var thisText = ($(this).text());
|
|
var selectedName = arr[_index].name;
|
|
|
|
if (thisText == selectedName) {
|
|
// $(this).css("background-color", "#ffb800");
|
|
// $(this).css("color", "#fffff");
|
|
|
|
$(this).css({
|
|
'background-color': '#ffb800',
|
|
'color': '#fff',
|
|
'border': '1px solid #fff'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function appendSelectedName() {
|
|
|
|
clearBoxColor();
|
|
|
|
var arrTemp = [];
|
|
tableData = [];
|
|
|
|
for (var i = 0; i < $("#personCount").val(); i++) {
|
|
var num;
|
|
do {
|
|
num = getRandomInt(arr.length - 1);
|
|
} while (arrTemp.includes(num));
|
|
arrTemp.push(num);
|
|
|
|
// var div = document.createElement("div");
|
|
// div.innerText = arr[num].name;
|
|
// div.className = "nameBox";
|
|
// $("#selectedName").append(div);
|
|
|
|
tableData.push(arr[num]);
|
|
|
|
setFinalColor(num);
|
|
}
|
|
|
|
}
|
|
|
|
$("#save").click(function () {
|
|
console.log(lingyuSelect.getValue());
|
|
console.log(tableData);
|
|
});
|
|
|
|
$('#btn').click(function () {
|
|
var curentCount = arr.length;
|
|
if (curentCount < 1) {
|
|
alert("没有可选人了");
|
|
// 清空所有层的颜色
|
|
clearBoxColor();
|
|
return;
|
|
}
|
|
// 监视按钮的状态
|
|
if (this.value === "开始抽取" || this.value === "重新抽取") {
|
|
// 定时针
|
|
timeId = setInterval(function () {
|
|
// 清空所有层的颜色
|
|
clearBoxColor();
|
|
|
|
currentSelectNum = getRandomInt(arr.length - 1);
|
|
|
|
// 设置选中小方格颜色
|
|
setBoxColor();
|
|
|
|
}, 30);
|
|
this.value = "停止";
|
|
this.innerHTML = "停止";
|
|
|
|
} else {
|
|
// 清除计时器
|
|
clearInterval(timeId);
|
|
|
|
// 添加选中人
|
|
appendSelectedName();
|
|
tableRender();
|
|
|
|
// 移除
|
|
// arr.splice(currentSelectNum, 1);
|
|
this.value = "重新抽取";
|
|
this.innerHTML = "重新抽取";
|
|
}
|
|
});
|
|
|
|
function tableRender() {
|
|
table.render({
|
|
elem: '#tableData',
|
|
cols: [[ //标题栏
|
|
{ title: '序号', align: 'center', type: 'numbers', width: 50 },
|
|
{ field: 'name', align: 'center', title: '姓名', width: 75 },
|
|
{ field: 'tel', align: 'center', title: '电话', width: 125 },
|
|
{ field: 'org_name', title: '单位', width: 175 }
|
|
]],
|
|
height: '600',
|
|
data: tableData,
|
|
cellExpandedMode: "tips",
|
|
page: false, // 是否显示分页
|
|
limit: 50 // 每页默认显示的数量
|
|
});
|
|
}
|
|
|
|
function getRandomInt(max) {
|
|
min = 0; // 确保min是整数
|
|
max = Math.floor(max); // 确保max是整数
|
|
return Math.floor(Math.random() * (max - min + 1)) + min; // 返回介于min和max之间的整数
|
|
}
|
|
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |