<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>期权管理系统</title>
<meta name="description" content="期权管理系统" />
<meta name="keywords" content="期权管理系统" />
<link rel="stylesheet" type="text/css" href="../script/lib/layui/css/layui.css" />
<script src="../script/lib/jquery/jquery.min.js"></script>
<script src="../script/lib/layui/layui.js"></script>
<script src="../script/lib/echarts/echarts.common.min.js"></script>
<script><{Dever::script()}></script>
<script src="../script/dever/core.js"></script>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<link rel="stylesheet" type="text/css" href="../css/custom-bars.css" />
<style>
.layui-progress-big, .layui-progress-big .layui-progress-bar{
height: 50px;
}
.layui-progress-text {
font-size: 30px;
line-height: 45px;
}
</style>
</head>
<body>
<div class="container">
<header class="codrops-header">
<h1 style="font-size:30px">期权管理系统</h1>
</header>
<section class="content" style="margin:0 auto;width:1000px;">
<article class="flexy-grid">
<h3 style="font-size: 50px;">点击开始进行期权导入</h3>
</article>
<div class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="main">
<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
</div>
</section>
<!-- Related demos -->
<div style="margin:0 auto;width: 100px;">
<div class="site-main-button" style="margin-top: 20px; margin-bottom: 0;">
<button class="layui-btn layui-btn-danger site-main-active" data-type="set" style="display:none;">设置</button>
<button class="layui-btn layui-btn-danger site-main-active" data-type="loading">开始</button>
</div>
</div>
</div>
<script>
var data = <{$list}>;
var total = '<{$total}>';
var n = 0;
var j;
var DISABLED = 'layui-btn-disabled';
layui.use(['element','layer'], function(){
var $ = layui.jquery
,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
var layer = layui.layer;
function loop(i,othis)
{
if (data[i]) {
$('h3').html(data[i]['name']);
i = i+1;
n = parseInt(parseFloat(i) * parseFloat(j));
if (n >= 100) {
n = 100;
othis.removeClass(DISABLED);
}
element.progress('main', n+'%');
setTimeout(function(){loop(i,othis)}, 1000);
} else {
$('h3').html('完成');
othis.removeClass(DISABLED);
element.progress('main', '100%');
}
}
function showAlert(msg, func, title, index, t)
{
if (!title) {
title = '温馨提示';
}
var type = 0;
if (msg.indexOf('<') != -1) {
type = 1;
}
if (t) {
type = t;
}
var config = {
type: 0,
title: title,
shade: 0.1,
shadeClose : true,
content: msg
};
if (index) {
config.zIndex = index;
}
config.scrollbar = false;
if (type == 1) {
config.type = 1;
config.btn = ['保存', '关闭'];
config.area = '500px';
}
config.cancel = config.btn2 = function(index)
{
layer.close(index);
};
if (func) {
config.yes = function(index)
{
func(index);
};
} else {
config.yes = config.cancel;
}
config.success = function() {
//$('.layui-layer-content').css('padding', '10px');
}
config.end = function() {
$('.layui-layer-content').css('overflow-x', 'auto');
$('#update_button').show();
}
var index = layer.open(config);
}
function setIndex()
{
var value = $("#setIndex").val().split('-');
var url = '<{$url}>';
var start = value[0];
var end = value[1];
$.getJSON(url, {start:start,end:end}, function(t) {
total = t.data.total;
data = t.data.list;
layer.closeAll();
});
}
//触发事件
var active = {
set: function(){
//element.progress('main', '50%')
showAlert('<form class="layui-form" style="margin:10px"><div class="layui-form-item"><label class="layui-form-label">索引</label><div class="layui-input-block"><input type="text" id="setIndex" name="" placeholder="请输入账户索引，间隔用-隔开" autocomplete="off" class="layui-input"></div></div></form>', function() {setIndex()});
}
,loading: function(othis) {
if (total <= 0) {
alert('请先设置');
return;
}
if(othis.hasClass(DISABLED)) return;
othis.addClass(DISABLED);
j = 100/total;
element.progress('main', '0%');
loop(0, othis);
return;
if (n < 100) {
n = 100;
element.progress('main', n+'%');
othis.removeClass(DISABLED);
}
},
};
$('.site-main-active').on('click', function(){
var othis = $(this), type = $(this).data('type');
active[type] ? active[type].call(this, othis) : '';
});
});
</script>
</body>
</html>