machineManage.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>网站管理</title>
  6. <script src="../../js/min-loader-next.js"></script>
  7. </head>
  8. <body class="content">
  9. <div class="order-body">
  10. <div class="order-tiaojian back-gray">
  11. <div class="tiaojian-part1" id = "conditions">
  12. <div class="fl f12-gray4-op mt4">所选条件:</div>
  13. </div>
  14. <div class="tiaojian-part2 fr demoTable" >
  15. <button class="layui-btn order-bnt1" data-type="reload" >搜索</button>
  16. <button class="layui-btn order-bnt2" data-type="reset">重置</button>
  17. <span id="anniu"></span>
  18. <a href="#" id="toggle" class="top">收起</a>
  19. </div>
  20. </div>
  21. <form class="layui-form" action="javascript:void(0)" id = "formName">
  22. <div class="order-select back-border" id="content">
  23. <div class="layui-inline">
  24. <label class="f12-gray4">机台名称:</label>
  25. <input onchange = "changeSelectCon(1,this,'inp')" class="search-select" type="text" name="machineName" id ="machineName" value="" placeholder="请输入机器名称" />
  26. </div>
  27. <div class="layui-inline">
  28. <label class="f12-gray4">机台号:</label>
  29. <input onchange = "changeSelectCon(2,this,'qpp')" class="search-select" type="text" name="machineId" id ="machineId" value="" placeholder="请输入机台号" />
  30. </div>
  31. <div class="layui-inline">
  32. <label class="f12-gray4">商户号:</label>
  33. <input onchange = "changeSelectCon(2,this,'mch')" class="search-select" type="text" name="mchntId" id ="mchntId" value="" placeholder="请输入商户号" />
  34. </div>
  35. <div class="layui-inline">
  36. <label class="f12-gray4">机器类型:</label>
  37. <div class="" style="display:inline-block" id = 'equType'></div>
  38. </div>
  39. <div class="layui-inline">
  40. <label class="f12-gray4">状态:</label>
  41. <div class="" style="display:inline-block" id = 'state'></div>
  42. </div>
  43. <div class="d-dashed" style="margin: 10px 0;"></div>
  44. <div class="layui-inline">
  45. <label class="f12-gray4">在线机器数:</label>
  46. <div class="layui-input-inline">
  47. <input type="text" class="layui-input" id="online" name="online" style="border:none;color: red" disabled="disabled" class="search-select">
  48. </div>
  49. </div>
  50. <div class="layui-inline">
  51. <label class="f12-gray4">离线机器数:</label>
  52. <div class="layui-input-inline">
  53. <input type="text" class="layui-input" id="unOnline" name="unOnline" style="border:none;color: red" disabled="disabled" class="search-select">
  54. </div>
  55. </div>
  56. </div>
  57. </form>
  58. </div>
  59. <div class="shadow-content" style="margin:1.5rem;">
  60. <table id="newsManage" lay-filter="tableFilter"></table>
  61. </div>
  62. <!--操作功能-->
  63. <script type="text/html" id="barDemo">
  64. <a class="layui-btn layui-btn-xs" lay-event="equCode">二维码</a>
  65. <a class="layui-btn layui-btn-xs" lay-event="detail">查看货道</a>
  66. <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  67. <a class="layui-btn layui-btn-xs" lay-event="gameFreightwayManage">游戏购</a>
  68. {{# if(d.songStatus == '00'){ }}
  69. <a class="layui-btn layui-btn-xs" lay-event="close">关闭音乐</a>
  70. {{# } }}
  71. {{# if(d.songStatus == '01'){ }}
  72. <a class="layui-btn layui-btn-xs" lay-event="open">开启音乐</a>
  73. {{# } }}
  74. {{# if(d.branchid == '88888888'){ }}
  75. <a class="layui-btn layui-btn-xs" lay-event="bangding">绑定商户</a>
  76. {{# } }}
  77. </script>
  78. <script type="text/html" id="switchTwo">
  79. <div style="width:90px;height:70px">
  80. {{#
  81. if(!isEmpty(d.imgUrl)&& d.url != "null"){ }}
  82. <img src="{{ d.imgUrl}}">
  83. {{# } }}
  84. </div>
  85. </script>
  86. <script>
  87. //新增机器
  88. $(document).on('click','#addMachine', function(){
  89. openMainTabPage('201001-01', ' 新增机器', 'machineManage/addmachine.html', '', '201001', reload);
  90. });
  91. //解绑机台号
  92. $(document).on('click','#deleteMachine', function(){
  93. openMainTabPage('201001-04', ' 解绑机台号', 'machineManage/deleteMachine.html', '', '201001', reload);
  94. });
  95. $("#toggle").click(function() {
  96. $(this).html($("#content").is(":hidden") ? "收起" + "<i class='iconfont up iconSelect_drop-down'/></i>" : "展开" +
  97. "<i class='iconfont up iconSelect_drop-down'/></i>");
  98. $("#content").slideToggle();
  99. });
  100. layui.use('laydate', function(){
  101. var laydate = layui.laydate;
  102. //日期范围
  103. laydate.render({
  104. elem: '#strDate'
  105. ,range: true
  106. ,format:'yyyyMMdd'
  107. ,done: function(value, date, endDate){
  108. changeSelectCon(0,"strDate",'date',value)
  109. }
  110. });
  111. })
  112. layui.use('form', function(){
  113. $.request({
  114. action : '../../MachineManageAction/queryFunction',
  115. data : { branchId: ""},
  116. success : function(data) {
  117. if (data.data.length>0){
  118. for (var i =0;i<data.data.length;i++){
  119. if (data.data[i].name =='新增按钮'){
  120. $('#anniu').html(data.data[i].html);
  121. }
  122. }
  123. }
  124. }
  125. });
  126. });
  127. var table;
  128. layui.use('table', function(){
  129. table = layui.table;
  130. table.render({
  131. id : 'newsManage'
  132. ,elem: '#newsManage'
  133. ,limit:10
  134. ,url: '../MachineManageAction/queryEqumentInf' //数据接口
  135. ,method: 'post'
  136. ,where:{MINView:"JSON", token: 'sasasas'}
  137. ,page: true //开启分页
  138. ,cols: [[ //表头
  139. {type:'numbers', title: '序号',width:'5%', fixed: true, align: 'center'}
  140. ,{field: 'machineNo', title: '机台号', width:"8%", sort: true, fixed: 'left'}
  141. ,{field: 'name', title: '机器名称', width:"10%"}
  142. ,{field: 'branchName', title: '所属商户', width:"10%"}
  143. ,{field: 'creditChannels', title: '收款通道', width:"10%"}
  144. ,{field: 'stateDesc', title: '状态', width:"5%"}
  145. ,{field: 'payeeNo', title: '支付账号', width:"10%"}
  146. ,{field: 'exchangeRate', title: '汇率', width:"5%"}
  147. ,{field: 'equTypeDesc', title: '机器类型', width:"5%"}
  148. ,{field: 'ioiCardNumber', title: '物联卡号', width:"5%"}
  149. ,{field: 'createTime', title: '创建时间', width:"10%"}
  150. ,{field: 'operate', title: '操作', width: "30%", toolbar: '#barDemo',fixed: 'right'}
  151. ]]
  152. ,done: function(res, curr, count){
  153. //如果是异步请求数据方式,res即为你接口返回的信息。
  154. console.log(res);
  155. //得到当前页码
  156. console.log(curr);
  157. //得到数据总量
  158. console.log(count);
  159. $('#online').val(res.online);
  160. $('#unOnline').val(res.unOnline);
  161. }
  162. ,even: true //开启隔行背景
  163. });
  164. // 监听工具条(操作)
  165. table.on('tool(tableFilter)', function(obj){ //注:tool是工具条事件名,tableFilter是table原始容器的属性 lay-filter="对应的值"
  166. var data = obj.data; //获得当前行数据
  167. var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
  168. var tr = obj.tr; //获得当前行 tr 的DOM对象
  169. var id = data.id;
  170. if(layEvent == 'detail'){ //查看
  171. showDetail(data);
  172. } else if(layEvent == 'close'){ //关闭音乐
  173. layer.confirm('真的要关闭音乐吗', function(index){
  174. $.request({
  175. action : '../../MachineManageAction/closeSong',
  176. data : {
  177. id : id ,//机器名
  178. status :"01"
  179. },
  180. success : function(data) {
  181. //成功后刷新
  182. var btn=$(".layui-laypage-btn")[0];
  183. btn.click();
  184. layer.alert('操作成功!', {
  185. icon: 6,
  186. title: "提示"
  187. });
  188. },
  189. error : function(data) {
  190. layer.alert('操作失败!', {
  191. icon: 5,
  192. title: "提示"
  193. });
  194. }
  195. });
  196. });
  197. }else if(layEvent == 'open'){ //开音乐
  198. layer.confirm('真的要开启音乐吗', function(index){
  199. $.request({
  200. action : '../../MachineManageAction/closeSong',
  201. data : {
  202. id : id ,//机器名
  203. status :"00"
  204. },
  205. success : function(data) {
  206. //成功后刷新
  207. var btn=$(".layui-laypage-btn")[0];
  208. btn.click();
  209. layer.alert('操作成功!', {
  210. icon: 6,
  211. title: "提示"
  212. });
  213. },
  214. error : function(data) {
  215. layer.alert('操作失败!', {
  216. icon: 5,
  217. title: "提示"
  218. });
  219. }
  220. });
  221. });
  222. }else if(layEvent == 'edit'){ //编辑
  223. editDetail(data);
  224. }else if(layEvent =='equCode'){//二维码
  225. layui.sessionData("ROW_DATA", {key:"NOW_ROW", value:data});
  226. layer.open({
  227. type: 2,
  228. title: '查看二维码',
  229. shadeClose: true,
  230. shade: 0.6,
  231. area: ['50%', '80%'],
  232. content: 'erWm.html'
  233. });
  234. }else if(layEvent =='gameFreightwayManage'){
  235. // 寄存当前数据
  236. layui.sessionData("ROW_DATA", {key:"NOW_ROW", value:data});
  237. openMainTabPage('201001-05', '游戏购', 'gameFreightwayManage/gameFreightwayManage.html', '', '201001', reload);
  238. }else if(layEvent == 'bangding'){ //编辑
  239. checkmchnt(data);
  240. }
  241. });
  242. var $ = layui.$, active = {
  243. reload: function(){
  244. reload();
  245. }
  246. ,reset: function(){
  247. $('#formName')[0].reset();
  248. $("#conditions").html('<div class="fl f12-gray4-op mt4">所选条件:</div>');
  249. }
  250. };
  251. $('.layui-btn').on('click', function(){
  252. var type = $(this).data('type');
  253. active[type] ? active[type].call(this) : '';
  254. });
  255. });
  256. function reload() {
  257. var strDate = $('#strDate').val();
  258. var machineName = $('#machineName').val();
  259. var machineId = $('#machineId').val();
  260. var mchntId = $('#mchntId').val();
  261. var equType = $("select[name='equType']").val();
  262. var state = $("select[name='state']").val();
  263. var paramId = '1';
  264. //执行重载
  265. table.reload('newsManage', {
  266. page: {
  267. curr: 1 //重新从第 1 页开始
  268. }
  269. ,where: {
  270. strDate : strDate,
  271. machineName : machineName,
  272. paramId : paramId,
  273. mchntId : mchntId,
  274. machineId : machineId,
  275. equType : equType,
  276. state : state
  277. }
  278. });
  279. }
  280. // function showDetail(data) {
  281. // var params = {};
  282. // params.columnNumber = 2; //每行显示两个字段
  283. // // 要显示的数据
  284. // params.fields = [
  285. // {field: 'id', title: 'ID'}
  286. // ,{field: 'title', title: '标题'}
  287. // ,{field: 'moduleDesc', title: '模块'}
  288. // ,{field: 'statusDesc', title: '状态'}
  289. // ,{field: 'createuser', title: '创建人'}
  290. // ,{field: 'createtime', title: '创建日期'}
  291. // ,{field: 'modifyuser', title: '修改人'}
  292. // ,{field: 'modifytime', title: '修改时间'}
  293. // ];
  294. // // 寄存当前数据
  295. // setNowRowData(data, params);
  296. // layer.open({
  297. // type: 2,
  298. // title: '消息详情',
  299. // shadeClose: true,
  300. // shade: 0.8,
  301. // //maxmin: true, //开启最大化最小化按钮
  302. // area: ['800px', '500px'],
  303. // content: '../../web/showDetail.html'
  304. // });
  305. // }
  306. function changeSelectCon(index, t, type, dateValue){
  307. if (type == "date") {
  308. if (isEmpty(dateValue)) {
  309. $("#search" + index).remove();
  310. } else {
  311. $("#search" + index).remove();
  312. if (isEmpty($("#search" + index).attr("name"))) {
  313. $("#conditions").append(getSelectConHtml(index, t, type,dateValue));
  314. }
  315. }
  316. } else if (type == 'inp') {
  317. if (isEmpty($(t).val())) {
  318. $("#search" + index).remove();
  319. } else {
  320. $("#search" + index).remove();
  321. if (isEmpty($("#search" + index).attr("name"))) {
  322. $("#conditions").append(getSelectConHtml(index, t, type));
  323. }
  324. }
  325. } else if (type == 'qpp') {
  326. if (isEmpty($(t).val())) {
  327. $("#search" + index).remove();
  328. } else {
  329. $("#search" + index).remove();
  330. if (isEmpty($("#search" + index).attr("name"))) {
  331. $("#conditions").append(getSelectConHtml(index, t, type));
  332. }
  333. }
  334. }else if (type == 'mch') {
  335. if (isEmpty($(t).val())) {
  336. $("#search" + index).remove();
  337. } else {
  338. $("#search" + index).remove();
  339. if (isEmpty($("#search" + index).attr("name"))) {
  340. $("#conditions").append(getSelectConHtml(index, t, type));
  341. }
  342. }
  343. }else {
  344. if (isEmpty($(t).val())) {
  345. $("#search" + index).remove();
  346. } else {
  347. $("#search" + index).remove();
  348. if (isEmpty($("#search" + index).attr("name"))) {
  349. $(t).attr("id","subjects");
  350. $("#conditions").append(getSelectConHtml(index, t, type));
  351. }
  352. }
  353. }
  354. }
  355. var array = new Array('时间','标题','机台号');
  356. function getSelectConHtml(index, t, type,dateValue){
  357. var name;
  358. var value;
  359. if(type == "inp"){
  360. value = t.value.substr(0,5)+"..";
  361. }
  362. if (type == "date") {
  363. value = dateValue;
  364. }
  365. if (type == "qpp") {
  366. value = t.value.substr(0,5)+"..";
  367. }
  368. if (type == "mch") {
  369. value = t.value.substr(0,5)+"..";
  370. }
  371. if(type == "sel"){
  372. value = $("#state").find("option:selected").text();
  373. }
  374. if (type == "date") {
  375. name = $("#"+t).attr("id");
  376. } else {
  377. name = $(t).attr("id");
  378. }
  379. var html = '<div class="fl xuanzhong-active" id = "search' + index + '" name = "' + name + '" onclick = "removeSearch(this)">' +
  380. '<div class="fl">' + array[index] + '</div>' +
  381. ':<i>'+value+'</i>' +
  382. '<svg class="icon" aria-hidden="true">' +
  383. '<use xlink:href="#iconicon_close1"></use>' +
  384. '</svg>' +
  385. '</div>';
  386. return html;
  387. }
  388. function removeSearch(t) {
  389. if ($(t).attr("name") == 'subjects') {
  390. initSelect('state', "ORDER_STT", "state", ' ', true);
  391. form.render();
  392. $(t).remove();
  393. } else {
  394. $("#"+$(t).attr("name")).val('');
  395. $(t).remove();
  396. }
  397. }
  398. //编辑
  399. function editDetail(data) {
  400. // 寄存当前数据
  401. layui.sessionData("ROW_DATA", {key:"NOW_ROW", value:data});
  402. openMainTabPage('201001-02', ' 编辑', 'machineManage/editmachine.html', '', '201001', reload);
  403. }
  404. //查看货道
  405. function showDetail(data) {
  406. // 寄存当前数据
  407. layui.sessionData("ROW_DATA", {key:"NOW_ROW", value:data});
  408. openMainTabPage('201001-03', ' 查看货道', 'machineManage/machineDetail.html', '', '201001', reload);
  409. }
  410. function checkmchnt(data){
  411. openMainTabPage('201001-06', '绑定商户', 'machineManage/chooseBranch.html?equId='+data.id, '', '201001', reload);
  412. }
  413. initSelect('equType', "EQUIPMENT_TYPE", "equType", ' ', true);
  414. initSelect('state', "EQUIPMENT_STATE", "state", ' ', true);
  415. </script>
  416. </body>
  417. </html>