dever-product
/
churen


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
							
<!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>