wsbjsz.htm 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>报警参数设置</title>
  5. <style type="text/css">
  6. .cotainer{
  7. display: flex;
  8. flex-direction: column;
  9. margin: 14px;
  10. }
  11. .dclgz{
  12. flex-direction: row;
  13. display: flex;
  14. color: #353a84;
  15. font-weight: bold;
  16. border-top: solid #c4c2c2 1px;
  17. border-bottom: solid #c4c2c2 1px;
  18. margin-bottom: 8px;
  19. padding-top: 3px;
  20. font-size: 0.22rem;
  21. }
  22. .dclgz>div{
  23. flex:0.5;
  24. text-align: center;
  25. }
  26. .square{
  27. width: 15px;
  28. height: 15px;
  29. margin-top: 4px;
  30. margin-left: 4px;
  31. border: solid white 1px;
  32. }
  33. tbody>:first-child{
  34. text-align: center;
  35. background-color: #c3dafb;
  36. color: black;
  37. }
  38. tbody > tr{
  39. border-bottom: 1px solid #b7b5b56e;
  40. }
  41. .check{
  42. width: 20px;
  43. height: 16px;
  44. }
  45. table tr td {
  46. font-size: 0.22rem;
  47. text-align: center;
  48. }
  49. tr>:last-child{
  50. text-align: left;
  51. }
  52. .check{
  53. position: relative;
  54. top: 5px;
  55. }
  56. .sjhmbox{
  57. display: flex;
  58. margin-bottom: 6px;
  59. }
  60. .sjhmbox:>nth-child(1){
  61. width: 46%;
  62. }
  63. .sjhmbox:>nth-child(2){
  64. width: 29%;
  65. }
  66. .sjhmbox>span{
  67. width: 50px;
  68. font-size: 19px;
  69. margin-left: 13px;
  70. }
  71. input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea {
  72. margin: 0;
  73. height: 28px;
  74. line-height: inherit;
  75. border: 1px solid rgba(189, 175, 175, 0.29);
  76. }
  77. input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea {
  78. line-height: 10px;
  79. width: 100%;
  80. height: 27px;
  81. padding: 2px 5px;
  82. -webkit-user-select: text;
  83. border: 1px solid rgba(0,0,0,.2);
  84. border-radius: 9px;
  85. outline: 0;
  86. color: black !important;
  87. background-color: #fff;
  88. -webkit-appearance: none;
  89. text-align: center;
  90. }
  91. .bz{
  92. width: 86px !important;
  93. margin-left: 20px !important;
  94. }
  95. .bjtip{
  96. color: #479de8;
  97. font-size: 11px;
  98. padding-top: 5px;
  99. }
  100. .save{
  101. width: 75px;
  102. background-color: #41d841;
  103. height: 25px;
  104. text-align: center;
  105. border-radius: 20px;
  106. color: white;
  107. font-size: 16px;
  108. font-weight: bold;
  109. padding-top: 1px;
  110. margin-top: 11px;
  111. margin-left: 38%;
  112. }
  113. input::-webkit-input-placeholder {
  114. color: #999;
  115. }
  116. input::-moz-placeholder {
  117. /* Mozilla Firefox 19+ */
  118. color: blue;
  119. }
  120. input:-moz-placeholder {
  121. /* Mozilla Firefox 4 to 18 */
  122. color: blue;
  123. }
  124. input:-ms-input-placeholder {
  125. /* Internet Explorer 10-11 */
  126. color: blue;
  127. }
  128. </style>
  129. <script type="text/javascript">
  130. $(".checkAll").on("tap" , function(){
  131. var checked = $(this).prop("checked");
  132. if(checked == false) {
  133. checked = true;
  134. }else {
  135. checked = false;
  136. }
  137. $(this).parent().parent().next().next().find(".check").prop("checked" , checked);
  138. })
  139. $(".check-item").on("tap" , function(){
  140. var checked = $(this).parent().parent().prev().prev().find(".check").prop("checked");
  141. if(checked == false) {
  142. $(this).prop("checked" , true);
  143. }
  144. })
  145. //模拟服务器端获得的联系人数据
  146. /**
  147. var iscroll;
  148. /**
  149. * 初始化滚动条
  150. * */
  151. iscroll = new IScroll(".wsclIscroll",{
  152. scrollbars: true,
  153. fadeScrollbars:true,
  154. scrollbars: 'custom',
  155. shrinkScrollbars:'clip',
  156. click:true
  157. });
  158. setTimeout(function(){
  159. iscroll.refresh();
  160. }, 100);
  161. var sjhm = $("#sjhm").val().split("#");
  162. var sjbz = $("#sjbz").val().split("#");
  163. var collection = [];
  164. for ( i = 0; i < sjhm.length; i++) {
  165. collection[i] = {
  166. "id": i+1,
  167. "phoneNumber": sjhm[i],
  168. "tips": sjhm.length <= sjbz.length ? sjbz[i] : ""
  169. };
  170. }
  171. var bjConnects = {
  172. "attribute": "contacts",
  173. "belong": "hkbj",
  174. "collection": collection,
  175. "RW": true
  176. };
  177. //初始化写入报警联系人信息
  178. jQuery.each(bjConnects.collection, function (i, col) {
  179. var outerDl = $('<div class="sjhmbox ">'
  180. +'<input type="text" class="sjhm" placeholder="请输入手机号码!"/>'
  181. +'<input type="text" class="bz" placeholder="备注"/>'
  182. +'<span onclick="add(this,iscroll)">+</span>'
  183. +'<span onclick="del(this,iscroll)">-</span>'
  184. +'</div>');
  185. $(outerDl.find("input")[0]).val(col.phoneNumber);
  186. $(outerDl.find("input")[1]).val(col.tips);
  187. $("#sj").append(outerDl);
  188. });
  189. $(".save").on("tap" , function(){
  190. var kg = "";
  191. var bjxw = "";
  192. var sjhm = "";
  193. var bz = "";
  194. $(".checkAll").each(function(){
  195. if($(this).prop("checked") == true) {
  196. kg += "1#"
  197. }else {
  198. kg += "0#"
  199. }
  200. })
  201. kg = kg.substring(0 , kg.length - 1);
  202. $(".check-item").each(function(){
  203. var num = 0;
  204. if($(this).prop("checked") == true) {
  205. num = 1;
  206. }else {
  207. num = 0;
  208. }
  209. if($(this).hasClass("checkpt")){
  210. num += ",";
  211. }
  212. if($(this).hasClass("checkdx")){
  213. num += "#";
  214. }
  215. bjxw += num;
  216. })
  217. bjxw = bjxw.substring(0 , bjxw.length - 1);
  218. $(".sjhm").each(function(){
  219. sjhm += $(this).val() + "#";
  220. })
  221. sjhm = sjhm.substring(0 , sjhm.length - 1);
  222. $(".bz").each(function(){
  223. bz += $(this).val() + "#";
  224. })
  225. bz = bz.substring(0 , bz.length - 1);
  226. jQuery.ajax({
  227. url : "saveWsclBjsz.htm",
  228. type : "get",
  229. data : {
  230. "mcid" : $("#mcid").val(),
  231. "kg" : kg,
  232. "bjxw" : bjxw,
  233. "sjhm" : sjhm,
  234. "bz" : bz
  235. },
  236. dataType : "json",
  237. async : true,
  238. success : function(data) {
  239. mui.alert("保存成功!");
  240. }
  241. })
  242. })
  243. /**
  244. * 添加手机号
  245. * */
  246. function add(obj,iscroll){
  247. if ($(".phoneBox").find(".sjhmbox").length < 3) {
  248. var outerdiv = $('<div class="sjhmbox ">'
  249. +'<input type="text" class="sjhm" placeholder="请输入手机号码!"/>'
  250. +'<input type="text" class="bz" placeholder="备注"/>'
  251. +'<span onclick="add(this,iscroll)">+</span>'
  252. +'<span onclick="del(this,iscroll)">-</span>'
  253. +'</div>');
  254. $(obj).parent().parent().append(outerdiv);
  255. iscroll.refresh();
  256. }else{
  257. mui.alert('最多只能添加3条', '提示');
  258. }
  259. }
  260. /**
  261. * 删除手机号
  262. * */
  263. function del(obj,iscroll){
  264. if($(".sjhmbox").length==1){
  265. mui.alert('无法删除唯一手机号码', '提示');
  266. }else{
  267. $(obj).parent().remove();
  268. iscroll.refresh();
  269. }
  270. }
  271. </script>
  272. </head>
  273. <body>
  274. <section class="wsclIscroll" style="background: #fff;">
  275. <input type="hidden" id="sjhm" value="$!wsclBjsz.sjhm" />
  276. <input type="hidden" id="sjbz" value="$!wsclBjsz.bz" />
  277. <div class="cotainer">
  278. <div>
  279. <div class="dclgz">
  280. <div>故障预警</div>
  281. <div>维保提醒</div>
  282. </div>
  283. <div>
  284. <table style="width:100%;">
  285. <tr style="text-align: center;">
  286. <td>报警开关</td>
  287. <td style="width: 54%;">预警项</td>
  288. <td>报警行为</td>
  289. </tr>
  290. #foreach($!obj in $!bjlist)
  291. <tr>
  292. <td>
  293. <div><input type="checkbox" class="check checkAll" #if("$!obj.kg" == "1") checked = "checked" #end/>打开</div>
  294. </td>
  295. <td data-for="$!obj.dx">$obj.yjx</td>
  296. <td>
  297. <!-- <div><input type="checkbox" class="check checkpt check-item" #if("$!obj.ptts" == "1") checked #end/>平台推送</div> -->
  298. <div><span>短信</span></div>
  299. </td>
  300. </tr>
  301. #end
  302. </table>
  303. </div>
  304. <div class="dclgz">
  305. <span>报警手机</span>
  306. <span class="bjtip">(保存后10分钟内生效)</span>
  307. </div>
  308. <div class="phoneBox" id="sj">
  309. </div>
  310. <div>
  311. <div class="save">保存</div>
  312. </div>
  313. </div>
  314. </div>
  315. </section>
  316. </body>
  317. </html>