123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>报警参数设置</title>
- <style type="text/css">
-
- .cotainer{
- display: flex;
- flex-direction: column;
- margin: 14px;
- }
- .dclgz{
- flex-direction: row;
- display: flex;
- color: #353a84;
- font-weight: bold;
- border-top: solid #c4c2c2 1px;
- border-bottom: solid #c4c2c2 1px;
- margin-bottom: 8px;
- padding-top: 3px;
- font-size: 0.22rem;
- }
- .dclgz>div{
- flex:0.5;
- text-align: center;
- }
- .square{
- width: 15px;
- height: 15px;
- margin-top: 4px;
- margin-left: 4px;
- border: solid white 1px;
- }
- tbody>:first-child{
- text-align: center;
- background-color: #c3dafb;
- color: black;
- }
- tbody > tr{
- border-bottom: 1px solid #b7b5b56e;
- }
- .check{
- width: 20px;
- height: 16px;
- }
- table tr td {
- font-size: 0.22rem;
- text-align: center;
- }
- tr>:last-child{
- text-align: left;
- }
- .check{
- position: relative;
- top: 5px;
- }
- .sjhmbox{
- display: flex;
- margin-bottom: 6px;
- }
- .sjhmbox:>nth-child(1){
- width: 46%;
- }
- .sjhmbox:>nth-child(2){
- width: 29%;
- }
- .sjhmbox>span{
- width: 50px;
- font-size: 19px;
- margin-left: 13px;
- }
- 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 {
- margin: 0;
- height: 28px;
- line-height: inherit;
- border: 1px solid rgba(189, 175, 175, 0.29);
- }
- 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 {
- line-height: 10px;
- width: 100%;
- height: 27px;
- padding: 2px 5px;
- -webkit-user-select: text;
- border: 1px solid rgba(0,0,0,.2);
- border-radius: 9px;
- outline: 0;
- color: black !important;
- background-color: #fff;
- -webkit-appearance: none;
- text-align: center;
- }
- .bz{
- width: 86px !important;
- margin-left: 20px !important;
- }
- .bjtip{
- color: #479de8;
- font-size: 11px;
- padding-top: 5px;
- }
- .save{
- width: 75px;
- background-color: #41d841;
- height: 25px;
- text-align: center;
- border-radius: 20px;
- color: white;
- font-size: 16px;
- font-weight: bold;
- padding-top: 1px;
- margin-top: 11px;
- margin-left: 38%;
- }
- input::-webkit-input-placeholder {
- color: #999;
- }
- input::-moz-placeholder {
- /* Mozilla Firefox 19+ */
- color: blue;
- }
- input:-moz-placeholder {
- /* Mozilla Firefox 4 to 18 */
- color: blue;
- }
- input:-ms-input-placeholder {
- /* Internet Explorer 10-11 */
- color: blue;
- }
- </style>
- <script type="text/javascript">
- $(".checkAll").on("tap" , function(){
- var checked = $(this).prop("checked");
- if(checked == false) {
- checked = true;
- }else {
- checked = false;
- }
- $(this).parent().parent().next().next().find(".check").prop("checked" , checked);
- })
- $(".check-item").on("tap" , function(){
- var checked = $(this).parent().parent().prev().prev().find(".check").prop("checked");
- if(checked == false) {
- $(this).prop("checked" , true);
- }
- })
- //模拟服务器端获得的联系人数据
- /**
- var iscroll;
- /**
- * 初始化滚动条
- * */
- iscroll = new IScroll(".wsclIscroll",{
- scrollbars: true,
- fadeScrollbars:true,
- scrollbars: 'custom',
- shrinkScrollbars:'clip',
- click:true
- });
- setTimeout(function(){
- iscroll.refresh();
- }, 100);
-
- var sjhm = $("#sjhm").val().split("#");
- var sjbz = $("#sjbz").val().split("#");
- var collection = [];
- for ( i = 0; i < sjhm.length; i++) {
- collection[i] = {
- "id": i+1,
- "phoneNumber": sjhm[i],
- "tips": sjhm.length <= sjbz.length ? sjbz[i] : ""
- };
- }
- var bjConnects = {
- "attribute": "contacts",
- "belong": "hkbj",
- "collection": collection,
- "RW": true
- };
- //初始化写入报警联系人信息
- jQuery.each(bjConnects.collection, function (i, col) {
- var outerDl = $('<div class="sjhmbox ">'
- +'<input type="text" class="sjhm" placeholder="请输入手机号码!"/>'
- +'<input type="text" class="bz" placeholder="备注"/>'
- +'<span onclick="add(this,iscroll)">+</span>'
- +'<span onclick="del(this,iscroll)">-</span>'
- +'</div>');
- $(outerDl.find("input")[0]).val(col.phoneNumber);
- $(outerDl.find("input")[1]).val(col.tips);
- $("#sj").append(outerDl);
- });
- $(".save").on("tap" , function(){
- var kg = "";
- var bjxw = "";
- var sjhm = "";
- var bz = "";
- $(".checkAll").each(function(){
- if($(this).prop("checked") == true) {
- kg += "1#"
- }else {
- kg += "0#"
- }
- })
- kg = kg.substring(0 , kg.length - 1);
- $(".check-item").each(function(){
- var num = 0;
- if($(this).prop("checked") == true) {
- num = 1;
- }else {
- num = 0;
- }
- if($(this).hasClass("checkpt")){
- num += ",";
- }
- if($(this).hasClass("checkdx")){
- num += "#";
- }
- bjxw += num;
- })
- bjxw = bjxw.substring(0 , bjxw.length - 1);
- $(".sjhm").each(function(){
- sjhm += $(this).val() + "#";
- })
- sjhm = sjhm.substring(0 , sjhm.length - 1);
- $(".bz").each(function(){
- bz += $(this).val() + "#";
- })
- bz = bz.substring(0 , bz.length - 1);
- jQuery.ajax({
- url : "saveWsclBjsz.htm",
- type : "get",
- data : {
- "mcid" : $("#mcid").val(),
- "kg" : kg,
- "bjxw" : bjxw,
- "sjhm" : sjhm,
- "bz" : bz
- },
- dataType : "json",
- async : true,
- success : function(data) {
- mui.alert("保存成功!");
- }
- })
-
-
- })
-
- /**
- * 添加手机号
- * */
- function add(obj,iscroll){
- if ($(".phoneBox").find(".sjhmbox").length < 3) {
- var outerdiv = $('<div class="sjhmbox ">'
- +'<input type="text" class="sjhm" placeholder="请输入手机号码!"/>'
- +'<input type="text" class="bz" placeholder="备注"/>'
- +'<span onclick="add(this,iscroll)">+</span>'
- +'<span onclick="del(this,iscroll)">-</span>'
- +'</div>');
- $(obj).parent().parent().append(outerdiv);
- iscroll.refresh();
- }else{
- mui.alert('最多只能添加3条', '提示');
- }
- }
- /**
- * 删除手机号
- * */
- function del(obj,iscroll){
- if($(".sjhmbox").length==1){
- mui.alert('无法删除唯一手机号码', '提示');
- }else{
- $(obj).parent().remove();
- iscroll.refresh();
- }
- }
- </script>
- </head>
- <body>
- <section class="wsclIscroll" style="background: #fff;">
- <input type="hidden" id="sjhm" value="$!wsclBjsz.sjhm" />
- <input type="hidden" id="sjbz" value="$!wsclBjsz.bz" />
- <div class="cotainer">
- <div>
- <div class="dclgz">
- <div>故障预警</div>
- <div>维保提醒</div>
- </div>
- <div>
- <table style="width:100%;">
- <tr style="text-align: center;">
- <td>报警开关</td>
- <td style="width: 54%;">预警项</td>
- <td>报警行为</td>
- </tr>
- #foreach($!obj in $!bjlist)
- <tr>
- <td>
- <div><input type="checkbox" class="check checkAll" #if("$!obj.kg" == "1") checked = "checked" #end/>打开</div>
- </td>
- <td data-for="$!obj.dx">$obj.yjx</td>
- <td>
- <!-- <div><input type="checkbox" class="check checkpt check-item" #if("$!obj.ptts" == "1") checked #end/>平台推送</div> -->
- <div><span>短信</span></div>
- </td>
- </tr>
- #end
- </table>
- </div>
- <div class="dclgz">
- <span>报警手机</span>
- <span class="bjtip">(保存后10分钟内生效)</span>
- </div>
- <div class="phoneBox" id="sj">
-
- </div>
- <div>
- <div class="save">保存</div>
- </div>
- </div>
- </div>
-
- </section>
- </body>
- </html>
|