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.
576 lines
21 KiB
576 lines
21 KiB
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>专家抽取</title>
|
|
<link rel="stylesheet" href="../../component/layui/css/layui.css" />
|
|
<script src="../../zj_js/jquery.min.js"></script>
|
|
<script src="../../component/layui/layui.js"></script>
|
|
<script src="../../component/pear/xm-select.js"></script>
|
|
<style>
|
|
.wrapDiv {
|
|
width: 80%;
|
|
width: 1310px;
|
|
margin: 0 auto;
|
|
/* text-align: center; */
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.leftBox {
|
|
float: left;
|
|
width: 750px;
|
|
height: 500px;
|
|
margin: 0 auto;
|
|
margin-top: 0px;
|
|
clear: both;
|
|
border: 1px solid #cccccc;
|
|
border-radius: 6px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
|
|
#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;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.selectedName {
|
|
float: right;
|
|
width: 536px;
|
|
height: 500px;
|
|
border: 1px solid #cccccc;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.woo-theme-color {
|
|
color: #2d8cf0 !important;
|
|
}
|
|
|
|
.woo-tool-span {
|
|
margin: 0 3px;
|
|
position: relative;
|
|
top: -1px;
|
|
cursor: pointer;
|
|
}
|
|
</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 class="layui-form-item layui-inline">
|
|
<label style="width: auto;font-size: 14px;font-weight: bold;" class="layui-form-label"
|
|
style="width: auto;">抽取设置</label>
|
|
|
|
</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="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: auto;">
|
|
<input type="text" lay-affix="clear" id="start_num" lay-verify="number" class="layui-input"
|
|
style="width: 100px;">
|
|
</div>
|
|
<div class="layui-input-inline" style="width: auto;">
|
|
~
|
|
</div>
|
|
<div class="layui-input-inline" style="width: auto;">
|
|
<input type="text" lay-affix="clear" id="end_num" lay-verify="number" class="layui-input"
|
|
style="width: 100px;">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item layui-inline">
|
|
<button type="button" class="layui-btn" id="screen"><i
|
|
class="layui-icon layui-icon-search"></i>专家筛选</button>
|
|
</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: -115px;font-weight: bold;">专家抽取结果</label>
|
|
<div id="selectedName" class="selectedName">
|
|
<table class="layui-hide" id="tableData"></table>
|
|
|
|
<script type="text/html" id="table-bar">
|
|
<span class="woo-tool-span woo-tool-text-span" lay-event="change"><a
|
|
class="woo-theme-color">换一个</a></span>
|
|
</script>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-form-item layui-inline">
|
|
<label class="layui-form-label" style="width: auto;padding: 9px 0 !important;">抽取人数：</label>
|
|
<div class="layui-input-inline" style="width: 63px;">
|
|
<input type="number" id="personCount" value="3" placeholder="" autocomplete="off" class="layui-input"
|
|
min="1" max="20" step="1" lay-affix="number">
|
|
</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>
|
|
<button type="button" class="layui-btn layui-bg-red" id="clear">清空结果</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
layui.use('table', function () {
|
|
var table = layui.table;
|
|
var arr = [];
|
|
var arrTemp = [];
|
|
|
|
var tableData = [];
|
|
var selectTableData = [];
|
|
var finalTableData = [];
|
|
|
|
var lingyuSelectArr = [1, 2, 3, 4, 5, 6, 7, 8];
|
|
var fenleiSelectArr = [3, 4];
|
|
|
|
var orgArrCount = arr.length;
|
|
var currentSelectNum = 0;
|
|
|
|
var ysId = GetQueryString("ys_id");
|
|
|
|
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"
|
|
}
|
|
});
|
|
|
|
lingyuSelect.setValue(lingyuSelectArr);
|
|
|
|
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"
|
|
}
|
|
});
|
|
|
|
fenleiSelect.setValue(fenleiSelectArr);
|
|
|
|
initForm();
|
|
|
|
// 初始化表单
|
|
function initForm() {
|
|
// 动态创建图层
|
|
dynamicCreateBox();
|
|
}
|
|
|
|
// 动态创建层
|
|
function dynamicCreateBox() {
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
async: false,
|
|
url: "/dsBase/zjcq/getZjcqList?lx_ids=" + fenleiSelectArr.join(',') + "&ly_ids=" + lingyuSelectArr.join(','),
|
|
success: function (res) {
|
|
arr = res;
|
|
}
|
|
});
|
|
|
|
for (var i = 0; i < arr.length; i++) {
|
|
var div = document.createElement("div");
|
|
div.innerText = arr[i].xm;
|
|
div.className = "nameBox";
|
|
div.id = i;
|
|
div.addEventListener('click', function () {
|
|
|
|
console.log(arr);
|
|
|
|
var _id = this.id;
|
|
|
|
if (!arrTemp.includes(_id)) {
|
|
setFinalColor(_id);
|
|
arrTemp.push(_id);
|
|
selectTableData.push(arr[_id]);
|
|
} else {
|
|
clearIndexBoxColor(_id);
|
|
arrTemp = arrTemp.filter(function (item) {
|
|
return item !== _id;
|
|
});
|
|
selectTableData = selectTableData.filter(function (item) {
|
|
return item.person_id !== arr[_id].person_id;
|
|
});
|
|
}
|
|
tableRender();
|
|
});
|
|
$("#leftBox").append(div);
|
|
};
|
|
}
|
|
|
|
// 清空小方格颜色
|
|
function clearBoxColor() {
|
|
$("#leftBox").children("div").each(function () {
|
|
$(this).css({
|
|
'background-color': '',
|
|
'color': '#000',
|
|
'border': '1px solid #cccccc'
|
|
});
|
|
});
|
|
}
|
|
|
|
|
|
function clearIndexBoxColor(_index) {
|
|
$("#leftBox").children("div").each(function () {
|
|
var thisText = ($(this).text());
|
|
var selectedName = arr[_index].xm;
|
|
|
|
if (thisText == selectedName) {
|
|
$(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].xm;
|
|
|
|
if (thisText == selectedName) {
|
|
$(this).css({
|
|
'background-color': '#ffb800',
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// 设置选中小方格颜色
|
|
function setFinalColor(_index) {
|
|
$("#leftBox").children("div").each(function () {
|
|
var thisText = ($(this).text());
|
|
var selectedName = arr[_index].xm;
|
|
|
|
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();
|
|
|
|
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);
|
|
|
|
tableData.push(arr[num]);
|
|
|
|
setFinalColor(num);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
$("#screen").click(function () {
|
|
if (lingyuSelect.getValue().length == 0 || fenleiSelect.getValue().length == 0) {
|
|
alert("请选择领域或分类");
|
|
return;
|
|
}
|
|
var fenleiSelectIds = fenleiSelect.getValue().map(function (item) {
|
|
return item.id;
|
|
}).join(',');
|
|
|
|
var lingyuSelectIds = lingyuSelect.getValue().map(function (item) {
|
|
return item.id;
|
|
}).join(',');
|
|
|
|
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
async: false,
|
|
url: "/dsBase/zjcq/getZjcqList?lx_ids=" + fenleiSelectIds + "&ly_ids=" + lingyuSelectIds + "&start=" + $("#start_num").val() + "&end=" + $("#end_num").val(),
|
|
success: function (res) {
|
|
arr = res;
|
|
}
|
|
});
|
|
|
|
$('#leftBox').empty();
|
|
|
|
for (var i = 0; i < arr.length; i++) {
|
|
var div = document.createElement("div");
|
|
div.innerText = arr[i].xm;
|
|
div.className = "nameBox";
|
|
$("#leftBox").append(div);
|
|
};
|
|
|
|
});
|
|
|
|
|
|
$("#clear").click(function () {
|
|
arrTemp = [];
|
|
tableData = [];
|
|
selectTableData = [];
|
|
clearBoxColor();
|
|
tableRender();
|
|
});
|
|
|
|
$("#save").click(function () {
|
|
if (finalTableData.length == 0) {
|
|
alert("请先抽取专家");
|
|
return;
|
|
} else {
|
|
var personIds = finalTableData.map(function (item) {
|
|
return item.person_id;
|
|
}).join(',');
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
dataType: "json",
|
|
url: "/dsBase/zjcq/saveZjcq",
|
|
data: {
|
|
"ys_id": ysId,
|
|
"person_ids": personIds
|
|
},
|
|
success: function (res) {
|
|
if (res.success) {
|
|
layer.msg("保存成功！", {
|
|
icon: 1,
|
|
time: 1300
|
|
}, function () {
|
|
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
|
parent.layui.table.reload("data-table");
|
|
});
|
|
} else {
|
|
alert(res.message);
|
|
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
$('#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();
|
|
|
|
currentSelectNum = getRandomInt(arr.length - 1);
|
|
|
|
// 设置选中小方格颜色
|
|
setBoxColor();
|
|
|
|
}, 50);
|
|
this.value = "停止";
|
|
this.innerHTML = "停止";
|
|
|
|
} else {
|
|
// 清除计时器
|
|
clearInterval(timeId);
|
|
|
|
// 添加选中人
|
|
appendSelectedName();
|
|
tableRender();
|
|
|
|
// 移除
|
|
// arr.splice(currentSelectNum, 1);
|
|
this.value = "重新抽取";
|
|
this.innerHTML = "重新抽取";
|
|
}
|
|
});
|
|
|
|
function tableRender() {
|
|
|
|
finalTableData = selectTableData.concat(tableData);
|
|
|
|
table.render({
|
|
elem: '#tableData',
|
|
cols: [[ //标题栏
|
|
{ title: '序号', align: 'center', type: 'numbers', width: 55 },
|
|
{ field: 'xm', align: 'center', title: '姓名', width: 75 },
|
|
{ field: 'telephone', align: 'center', title: '电话', width: 125 },
|
|
{ field: 'dw', title: '单位', width: 200 },
|
|
{ title: '操作', width: 75, toolbar: '#table-bar' }
|
|
]],
|
|
height: '500',
|
|
data: finalTableData,
|
|
cellExpandedMode: "tips",
|
|
page: false, // 是否显示分页
|
|
limit: 50 // 每页默认显示的数量
|
|
});
|
|
}
|
|
|
|
table.on('tool(tableData)', function (obj) {
|
|
if (obj.event === 'change') {
|
|
var num;
|
|
do {
|
|
num = getRandomInt(arr.length - 1);
|
|
} while (arrTemp.includes(num));
|
|
arrTemp.push(num);
|
|
|
|
var index1 = tableData.findIndex(function (item) {
|
|
return item.person_id === obj.data.person_id;
|
|
});
|
|
|
|
var index2 = selectTableData.findIndex(function (item) {
|
|
return item.person_id === obj.data.person_id;
|
|
});
|
|
|
|
if (index1 > -1) {
|
|
tableData.splice(index1, 1, arr[num]);
|
|
}
|
|
|
|
if (index2 > -1) {
|
|
selectTableData.splice(index2, 1, arr[num]);
|
|
}
|
|
|
|
// tableData.splice(obj.index, 1, arr[num]);
|
|
tableRender();
|
|
}
|
|
});
|
|
|
|
function getRandomInt(max) {
|
|
min = 0; // 确保min是整数
|
|
max = Math.floor(max); // 确保max是整数
|
|
return Math.floor(Math.random() * (max - min + 1)) + min; // 返回介于min和max之间的整数
|
|
}
|
|
|
|
function GetQueryString(name, istop) {
|
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
|
var r = window.location.search.substr(1).match(reg);
|
|
if (typeof (istop) != "undefined") r = top.location.search.substr(1).match(reg);
|
|
|
|
if (r != null) return unescape(r[2]);
|
|
return null;
|
|
}
|
|
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |