test-result-list.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
  1. <!DOCTYPE html>
  2. <html class="remModel">
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8">
  6. <meta http-equiv="Cache-Control" content="no-cache,no-store,must-revalidate">
  7. <meta http-equiv="pragma" content="no-cache">
  8. <meta http-equiv="expires" content="0">
  9. <meta name="format-detection" content="telphone=no,email=no"/>
  10. <meta name="viewport"
  11. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
  12. <title>测试:设备测试</title>
  13. <link rel="stylesheet" href="/components/lib/mui.min.css"/>
  14. <link rel="stylesheet" href="/components/custom/css/common.css"/>
  15. <link rel="stylesheet" href="/app/css/xyf.common.min.css"/>
  16. <style>
  17. /*用户布局*/
  18. .dev-test-card .logicalCode {
  19. font-size: .34rem;
  20. }
  21. .dev-test-card .imei {
  22. font-size: .3rem;
  23. color: #8f8f94
  24. }
  25. .dev-test-card .bindTime {
  26. font-size: .28rem;
  27. float: right;
  28. color: #8f8f94
  29. }
  30. .dev-test-card .custom-signal {
  31. height: 18px;
  32. width: auto;
  33. right: auto;
  34. padding: 0 2px;
  35. }
  36. .dev-test-card .main-info *, .dev-test-card .sub-info * {
  37. vertical-align: middle;
  38. }
  39. .dev-test-card .card-top {
  40. padding-bottom: 8px;
  41. }
  42. .dev-test-card .card-left {
  43. width: 70%;
  44. float: left;
  45. }
  46. .dev-test-card .card-right {
  47. width: 30%;
  48. float: left;
  49. text-align: right;
  50. }
  51. .dev-test-card .card-right button {
  52. padding: 0 20px;
  53. line-height: 34px;
  54. }
  55. .dev-test-card .card-bottom p {
  56. width: 50%;
  57. float: left;
  58. color: #555;
  59. margin: 4px 0;
  60. }
  61. .dev-test-card .card-bottom span {
  62. vertical-align: middle;
  63. }
  64. .dev-test-card .result-text {
  65. font-size: .36rem;
  66. }
  67. </style>
  68. </head>
  69. <body>
  70. <div class="mui-input-group mui-reset">
  71. <form class="mui-row" action="">
  72. <div class="mui-col-xs-12 mui-col-sm-12">
  73. <div class="mui-input-row mui-search">
  74. <input type="search" class="mui-input-clear" id="searchKey" placeholder="设备编号">
  75. </div>
  76. </div>
  77. </form>
  78. </div>
  79. <!--下拉刷新容器-->
  80. <div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="margin-top: 54px">
  81. <div class="mui-scroll">
  82. <!--数据列表-->
  83. <ul class="group-wrap mui-table-view ">
  84. </ul>
  85. </div>
  86. </div>
  87. </body>
  88. <script type="text/html" id="model">
  89. <li class="mui-table-view-cell dev-test-card">
  90. <div class="mui-row">
  91. <div class="card-top main-info">
  92. <span class="logicalCode"></span>
  93. <span class="imei"></span>
  94. <img data-unicode="124" src="/app/img/icon_xinhao_-bad.png" class="custom-signal status ">
  95. <span class="bindTime"></span>
  96. </div>
  97. <div class="card-bottom clearfix">
  98. <div class="card-left clearfix">
  99. <p><span class="result-title">绑定结果:</span><span class="result-text iconfont bind"></span></p>
  100. <p><span class="result-title">上电结果:</span><span class="result-text iconfont electrify"></span></p>
  101. <p><span class="result-title">远程上分:</span><span class="result-text iconfont remoteUpper"></span></p>
  102. <p><span class="result-title">线下投币:</span><span class="result-text iconfont coin"></span></p>
  103. </div>
  104. <div class="card-right">
  105. <button type="button" class="mui-btn mui-btn-blue okBtn" onclick="confirmTest()">确认</button>
  106. <span class="confirm c-success mui-hidden">已确认</span>
  107. </div>
  108. </div>
  109. </div>
  110. </li>
  111. </script>
  112. <script src="/components/lib/jquery.min.js"></script>
  113. <script src="/app/js/xyf.common.js"></script>
  114. <script src="/components/lib/mui.min.js"></script>
  115. <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  116. <script src="/components/custom/js/common.js"></script>
  117. <script>
  118. var pageType = "devTest";
  119. var condition;
  120. var pageIndex = 0;
  121. var pageSize = 10;
  122. var total = 0;
  123. var searchKey = "";
  124. $(function () {
  125. //如果调到子页面,返回后还是保留查询条件
  126. var orRecordBack = getQueryString('orRecord');
  127. if (orRecordBack) {
  128. history.replaceState(null, null, "users.html");//清除orRecord
  129. }
  130. //获取条件缓存数据
  131. if (orRecordBack) {
  132. condition = localStorage.condition ? JSON.parse(localStorage.condition)[pageType] : null;
  133. } else {
  134. condition = null;
  135. }
  136. /*根据缓存渲染已有条件数据*/
  137. if (condition) {
  138. if (condition.searchKey) {
  139. searchKey = condition.searchKey;
  140. $("#searchKey").val(searchKey);
  141. }
  142. }
  143. });
  144. var setCondition = function () {
  145. var data = {
  146. searchKey: searchKey,
  147. };
  148. var conArr = localStorage.condition ? JSON.parse(localStorage.condition) : {};
  149. conArr[pageType] = data;
  150. localStorage.condition = JSON.stringify(conArr);
  151. };
  152. //人工确认结果是否正确
  153. function confirmTest() {
  154. var target = $(event.target);
  155. var li = target.closest("li");
  156. var id = li.attr("data-id");
  157. var url = "/test/confirmTestResult";
  158. var data = {
  159. id: id
  160. };
  161. //频繁的操作,POST太闪
  162. sendRequestWithHeaders(url, "GET", get_token_headers("Tester"), data, function (res) {
  163. if (res.result == 1) {
  164. li.find(".confirm").removeClass("mui-hidden");
  165. li.find("button").addClass("mui-hidden");
  166. } else {
  167. mui.toast("操作失败");
  168. }
  169. })
  170. }
  171. mui.init({
  172. pullRefresh: {
  173. container: '#pullrefresh',
  174. up: {
  175. contentrefresh: '正在加载...',
  176. contentnomore: '没有更多数据了...',
  177. callback: pullupRefresh
  178. }
  179. }
  180. });
  181. //关键字搜索
  182. document.onkeydown = function (ev) {
  183. if (ev.keyCode == 13) {
  184. ev.preventDefault();
  185. search();
  186. }
  187. };
  188. function search() {
  189. pageIndex = 0;
  190. $('.group-wrap').html("");
  191. mui('#pullrefresh').pullRefresh().refresh(true);//重置上拉加载
  192. searchKey = $("#searchKey").val();
  193. pullupRefresh();//刷新数据
  194. }
  195. function pullupRefresh() {
  196. pageIndex++;
  197. var url = "/test/getTestResultList?random=" + Math.random() * 1000;
  198. var data = {
  199. "pageIndex": pageIndex,
  200. "pageSize": pageSize,
  201. searchKey: searchKey
  202. };
  203. setCondition();//设置条件到缓存
  204. sendRequestWithHeaders(url, "GET", get_token_headers("Tester"), data, function (res) {
  205. if (res.result == 1) {
  206. if (pageIndex == 1) {
  207. total = res.para.total;
  208. if (total == 0) {
  209. $('#pullrefresh').addClass('mui-hidden');
  210. $("body").append('<div class="nomore"></div>');
  211. }
  212. }
  213. mui('#pullrefresh').pullRefresh().endPullupToRefresh((pageIndex * pageSize >= total));
  214. var groupWrap = $('.group-wrap');
  215. var length = res.para.items.length;
  216. for (var i = 0; i < length; i++) {
  217. var obj = res.para.items[i];
  218. var html = $("#model").html();
  219. html = $(html);
  220. html.attr("data-id", obj.id);//本条记录的ID
  221. html.find(".logicalCode").text(obj.logicalCode);
  222. html.find(".bindTime").text(obj.bindTime);
  223. html.find(".imei").text("(" + obj.imei + ")");
  224. html.find(".bind").addClass(obj.bind ? "icon-success c-success" : "icon-warn c-red");
  225. html.find(".electrify").addClass(obj.electrify ? "icon-success c-success" : "icon-warn c-red");
  226. html.find(".remoteUpper").addClass(obj.remoteUpper ? "icon-success c-success" : "icon-warn c-red");
  227. html.find(".coin").addClass(obj.coin ? "icon-success c-success" : "icon-warn c-red");
  228. //如果其中一项没通过,则不能显示按钮
  229. if (obj.bind && obj.electrify && obj.remoteUpper && obj.coin) {
  230. }else{
  231. html.find(".card-right").addClass("mui-hidden");
  232. }
  233. if (obj.confirm) {
  234. html.find(".confirm").removeClass("mui-hidden");
  235. html.find("button").addClass("mui-hidden");
  236. }
  237. _SignalOperate.setSignalImgName(true, obj.signal);
  238. html.find(".status").attr('src', '/app/img/' + _SignalOperate.signalImgName);
  239. groupWrap.append(html);
  240. }
  241. } else {
  242. mui.toast(res.description);
  243. }
  244. });
  245. }
  246. if (mui.os.plus) {
  247. mui.plusReady(function () {
  248. setTimeout(function () {
  249. mui('#pullrefresh').pullRefresh().pullupLoading();
  250. }, 1000);
  251. });
  252. } else {
  253. mui.ready(function () {
  254. mui('#pullrefresh').pullRefresh().pullupLoading();
  255. });
  256. }
  257. /**
  258. * 信号操作
  259. * @type {{signalImgName: string, setSignalImgName: _SignalOperate.setSignalImgName}}
  260. * @private
  261. */
  262. var _SignalOperate = {
  263. signalImgName: '',
  264. /**
  265. * 设置暂时的信号图片
  266. * @param online 在线
  267. * @param signal 信号值
  268. *
  269. */
  270. setSignalImgName: function (online, signal) {
  271. /* DEV_STATUS_ON_IDLE = 0;空闲
  272. DEV_STATUS_ON_BUSY = 1;在线繁忙,用户投币了,但还没有开始洗
  273. DEV_STATUS_OFF_IDLE = 2; 离线 无人投币却离线,一般是盒子设备真断电离线了
  274. DEV_STATUS_OFF_BUSY = 3; 离线繁忙 投币了,开始工作,设备断电*/
  275. //如果设备离线或是设备工作后离线,则灰化图片
  276. if (online == 2 || online == 3) {
  277. this.gray = true;
  278. } else {
  279. this.gray = false;
  280. }
  281. if (online == 2) {
  282. this.signalImgName = 'icon_xinhao_empty.png';
  283. return;
  284. }
  285. if (signal == 0) {
  286. this.signalImgName = 'icon_xinhao_empty.png';
  287. } else if (signal > 0 && signal <= 8) {
  288. this.signalImgName = 'icon_xinhao_empty.png';
  289. } else if (signal >= 9 && signal <= 16) {
  290. this.signalImgName = 'icon_xinhao_-bad.png';
  291. } else if (signal >= 17 && signal <= 24) {
  292. this.signalImgName = 'icon_xinhao_-fine.png';
  293. } else {
  294. this.signalImgName = 'icon_xinhao_excellent.png';
  295. }
  296. }
  297. };
  298. </script>
  299. </html>