add.html 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>layui</title>
  6. <meta http-equiv="pragma" content="no-cache"/>
  7. <meta http-equiv="cache-control" content="no-cache,must-revalidate"/>
  8. <meta http-equiv="expires" content="0"/>
  9. <meta name="renderer" content="webkit">
  10. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  11. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  12. {% include '/common/layui_css.html' %}
  13. <link rel="stylesheet" href="/static/lib/layuimini-2/js/lay-module/step-lay/step.css" media="all">
  14. <style>
  15. body {
  16. background-color: #ffffff;
  17. }
  18. .lay-step {
  19. padding-left: 100px!important;
  20. }
  21. .layui-form-select dl {
  22. max-height: 200px;
  23. }
  24. .layui-form-label {
  25. width: 80px;
  26. }
  27. .layui-form-label.required:after {
  28. content: ' *';
  29. color: red;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div>
  35. <div class="layuimini-main">
  36. <div class="layui-fluid">
  37. <div class="layui-card-body">
  38. <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
  39. <div carousel-item>
  40. <div>
  41. <form class="layui-form" style="margin: 0 auto;padding-top: 20px;">
  42. <div class="layui-form-item">
  43. <label class="layui-form-label required">指标名称:</label>
  44. <div class="layui-input-block">
  45. <input type="text" name="name" placeholder="请填写入指标名称" class="layui-input" lay-verify="required" value="新指标001" />
  46. </div>
  47. </div>
  48. <div class="layui-form-item">
  49. <label class="layui-form-label">所在平台:</label>
  50. <div class="layui-input-inline" style="width:300px;">
  51. <select name="type" lay-verify="required">
  52. <option value=""></option>
  53. {% for pt in ptxx_list %}
  54. <option value="{{pt.id}}">{{pt.name}}</option>
  55. {% endfor %}
  56. </select>
  57. </div>
  58. </div>
  59. <div style="text-align: center;">
  60. <div class="layui-input-block" style="margin-left:0;">
  61. <button type="button" class="layui-btn layui-btn-primary exit">关闭</button>
  62. <button class="layui-btn" lay-submit lay-filter="formStep">下一步</button>
  63. </div>
  64. </div>
  65. </form>
  66. </div>
  67. <div>
  68. <form class="layui-form" style="margin: 0 auto;padding-top: 20px;">
  69. <div class="layui-form-item">
  70. <label class="layui-form-label required">app_id:</label>
  71. <div class="layui-input-block">
  72. <input type="text" name="app_id" placeholder="" class="layui-input" lay-verify="required" value="maomingywtg_4409" />
  73. </div>
  74. </div>
  75. <div class="layui-form-item">
  76. <label class="layui-form-label required">app_secret</label>
  77. <div class="layui-input-block">
  78. <input type="text" name="app_secret" placeholder="" class="layui-input" lay-verify="required" value="3pfe0wne6yp7iYyghgzIrPiL7RT25k" />
  79. </div>
  80. </div>
  81. <div class="layui-form-item">
  82. <label class="layui-form-label required">passid:</label>
  83. <div class="layui-input-block">
  84. <input type="text" name="passid" placeholder="" class="layui-input" lay-verify="required" value="C90-44001100" />
  85. </div>
  86. </div>
  87. <div class="layui-form-item">
  88. <label class="layui-form-label required">passtoken:</label>
  89. <div class="layui-input-block">
  90. <input type="text" name="passtoken" placeholder="" class="layui-input" lay-verify="required" value="f94a69b96ff74f1e8bd0b4dac0d4f28e" />
  91. </div>
  92. </div>
  93. <div class="layui-form-item">
  94. <label class="layui-form-label required">service_id:</label>
  95. <div class="layui-input-block">
  96. <input type="text" name="service_id" placeholder="" class="layui-input" lay-verify="required" value="" autocomplete="off" />
  97. </div>
  98. </div>
  99. <div style="text-align: center;">
  100. <div class="layui-input-block" style="margin-left:0;">
  101. <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
  102. <button class="layui-btn" lay-submit lay-filter="formStep2">下一步</button>
  103. </div>
  104. </div>
  105. </form>
  106. </div>
  107. <div>
  108. <form class="layui-form" style="margin: 0 auto;padding-top: 20px;">
  109. <div style="margin-bottom: 20px;">
  110. <div class="x-ce-xace-container" id="jscript-editor" style="height: 300px;width:100%;"></div>
  111. </div>
  112. <div style="text-align: center;">
  113. <div class="layui-input-block" style="margin-left:0;">
  114. <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
  115. <button class="layui-btn" lay-submit lay-filter="formStep3">确认保存</button>
  116. </div>
  117. </div>
  118. </form>
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123. </div>
  124. </div>
  125. </div>
  126. {% include '/common/layui_js.html' %}
  127. <script>
  128. var post_url = "{{post_url}}";
  129. var editor;
  130. layui.use(['form', 'step', 'xAce'], function () {
  131. var $ = layui.jquery,
  132. form = layui.form,
  133. xAce = layui.xAce,
  134. step = layui.step,
  135. layer = layui.layer;
  136. step.render({
  137. elem: '#stepForm',
  138. filter: 'stepForm',
  139. width: '100%',
  140. stepWidth: '500px',
  141. height: '400px',
  142. stepItems: [{
  143. title: '基本信息'
  144. }, {
  145. title: '平台参数'
  146. }, {
  147. title: '数据处理'
  148. }]
  149. });
  150. form.on('submit(formStep)', function (data) {
  151. step.next('#stepForm');
  152. return false;
  153. });
  154. form.on('submit(formStep2)', function (data) {
  155. $.get("/static/js/blank.js?rnd="+new Date(), function(data, status) {
  156. xAce.render({
  157. id: "jscript-editor",
  158. theme: 'eclipse',
  159. lang: "javascript",
  160. initValue: data,
  161. readOnly: false
  162. }).then(res => {
  163. editor = res;
  164. step.next('#stepForm');
  165. return false;
  166. });
  167. }, "text");
  168. return false;
  169. });
  170. form.on('submit(formStep3)', function (data) {
  171. var param = {
  172. name: $("input[name='name']").val(),
  173. type: $("select[name='type']").val()
  174. };
  175. if (param['type'] == 'ztn_data') {
  176. param['app_id'] = $("input[name='app_id']").val();
  177. param['app_secret'] = $("input[name='app_secret']").val();
  178. param['passid'] = $("input[name='passid']").val();
  179. param['passtoken'] = $("input[name='passtoken']").val();
  180. param['service_id'] = $("input[name='service_id']").val();
  181. }
  182. param['params'] = editor.getValue();
  183. console.log(param);
  184. $.post(post_url, JSON.stringify(param), function(r) {
  185. if(r.ret == 0) {
  186. var iframeIndex = parent.layer.getFrameIndex(window.name);
  187. parent.layer.close(iframeIndex);
  188. }
  189. else {
  190. layer.alert(r.msg, { icon: 2 });
  191. }
  192. return false;
  193. });
  194. return false;
  195. });
  196. $('.exit').click(function () {
  197. var iframeIndex = parent.layer.getFrameIndex(window.name);
  198. parent.layer.close(iframeIndex);
  199. });
  200. $('.pre').click(function () {
  201. step.pre('#stepForm');
  202. });
  203. $('.next').click(function () {
  204. step.next('#stepForm');
  205. });
  206. });
  207. </script>
  208. </body>
  209. </html>