set.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <!DOCTYPE html>
  2. <html lang="en" class="no-js">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>期权管理系统</title>
  8. <meta name="description" content="期权管理系统" />
  9. <meta name="keywords" content="期权管理系统" />
  10. <link rel="stylesheet" type="text/css" href="../script/lib/layui/css/layui.css" />
  11. <script src="../script/lib/jquery/jquery.min.js"></script>
  12. <script src="../script/lib/layui/layui.js"></script>
  13. <script src="../script/lib/echarts/echarts.common.min.js"></script>
  14. <script><{Dever::script()}></script>
  15. <script src="../script/dever/core.js"></script>
  16. <link rel="stylesheet" type="text/css" href="../css/main.css" />
  17. <link rel="stylesheet" type="text/css" href="../css/custom-bars.css" />
  18. </head>
  19. <body>
  20. <div class="container">
  21. <header class="codrops-header">
  22. <h1>期权管理系统</h1>
  23. </header>
  24. <section class="content">
  25. <article class="flexy-grid">
  26. <h3>点击开始进行期权交付</h3>
  27. <div class="site-main-button" style="margin-top: 20px; margin-bottom: 0;">
  28. <button class="layui-btn layui-btn-danger site-main-active" data-type="set">设置</button>
  29. <button class="layui-btn layui-btn-danger site-main-active" data-type="loading">开始</button>
  30. </div>
  31. </article>
  32. <div class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="main">
  33. <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
  34. </div>
  35. </section>
  36. <!-- Related demos -->
  37. </div>
  38. <script>
  39. var data;
  40. var total = 0;
  41. var n = 0;
  42. var j;
  43. var DISABLED = 'layui-btn-disabled';
  44. layui.use(['element','layer'], function(){
  45. var $ = layui.jquery
  46. ,element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
  47. var layer = layui.layer;
  48. function loop(i,othis)
  49. {
  50. if (data[i]) {
  51. $('h3').html(data[i]['name']);
  52. i = i+1;
  53. n = parseFloat(parseFloat(i) * parseFloat(j));
  54. if (n >= 100) {
  55. n = 100;
  56. othis.removeClass(DISABLED);
  57. }
  58. element.progress('main', n+'%');
  59. setTimeout(function(){loop(i,othis)}, 1000);
  60. }
  61. }
  62. function showAlert(msg, func, title, index, t)
  63. {
  64. if (!title) {
  65. title = '温馨提示';
  66. }
  67. var type = 0;
  68. if (msg.indexOf('<') != -1) {
  69. type = 1;
  70. }
  71. if (t) {
  72. type = t;
  73. }
  74. var config = {
  75. type: 0,
  76. title: title,
  77. shade: 0.1,
  78. shadeClose : true,
  79. content: msg
  80. };
  81. if (index) {
  82. config.zIndex = index;
  83. }
  84. config.scrollbar = false;
  85. if (type == 1) {
  86. config.type = 1;
  87. config.btn = ['保存', '关闭'];
  88. config.area = '500px';
  89. }
  90. config.cancel = config.btn2 = function(index)
  91. {
  92. layer.close(index);
  93. };
  94. if (func) {
  95. config.yes = function(index)
  96. {
  97. func(index);
  98. };
  99. } else {
  100. config.yes = config.cancel;
  101. }
  102. config.success = function() {
  103. //$('.layui-layer-content').css('padding', '10px');
  104. }
  105. config.end = function() {
  106. $('.layui-layer-content').css('overflow-x', 'auto');
  107. $('#update_button').show();
  108. }
  109. var index = layer.open(config);
  110. }
  111. function setIndex()
  112. {
  113. var value = $("#setIndex").val().split('-');
  114. var url = '<{$url}>';
  115. var start = value[0];
  116. var end = value[1];
  117. $.getJSON(url, {start:start,end:end}, function(t) {
  118. state = 1;
  119. total = t.data.total;
  120. data = t.data.list;
  121. layer.closeAll();
  122. });
  123. }
  124. //触发事件
  125. var active = {
  126. set: function(){
  127. //element.progress('main', '50%')
  128. 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()});
  129. }
  130. ,loading: function(othis) {
  131. if (total <= 0) {
  132. alert('请先设置');
  133. return;
  134. }
  135. if(othis.hasClass(DISABLED)) return;
  136. othis.addClass(DISABLED);
  137. j = 100/total;
  138. element.progress('main', '0%');
  139. loop(0, othis);
  140. return;
  141. if (n < 100) {
  142. n = 100;
  143. element.progress('main', n+'%');
  144. othis.removeClass(DISABLED);
  145. }
  146. },
  147. };
  148. $('.site-main-active').on('click', function(){
  149. var othis = $(this), type = $(this).data('type');
  150. active[type] ? active[type].call(this, othis) : '';
  151. });
  152. });
  153. </script>
  154. </body>
  155. </html>