hjkzbjcs.htm 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>hjkzbjcs-报警设置</title>
  5. <style type="text/css"></style>
  6. <style>
  7. @media (device-height:1024px) and (-webkit-min-device-pixel-ratio:2){/* 兼容ipad */
  8. .nav-pills{
  9. font-size: 20px;
  10. }
  11. .kzbjcsIscroll{
  12. font-size: 22px;
  13. bottom: 60px !important;
  14. }
  15. #channelSet dl.dl-horizontal dt span.glyphicon-alert, #alarmSet dl.dl-horizontal dt span.glyphicon-alert, #deviceAlarmSet dl.dl-horizontal dt span.glyphicon-alert{
  16. font-size: 35px;
  17. }
  18. #channelSet dl.dl-horizontal dd input, #alarmSet dl.dl-horizontal dd input, #deviceAlarmSet dl.dl-horizontal dd input{
  19. height: 38px;
  20. line-height: 38px;
  21. }
  22. #channelSet dl.dl-horizontal dd span.caret, #alarmSet dl.dl-horizontal dd span.caret, #deviceAlarmSet dl.dl-horizontal dd span.caret{
  23. top: 55%;
  24. }
  25. .caret{
  26. border-top: 10px dashed;
  27. border-right: 10px solid transparent;
  28. border-left: 10px solid transparent
  29. }
  30. #bjMenu1 ul.nav-pills{
  31. height: 60px;
  32. }
  33. #bjMenu1 ul.nav-pills li{
  34. font-size: 20px;
  35. line-height: 60px;
  36. height: 60px;
  37. }
  38. .modal-dialog{
  39. margin-left: -280px !important;
  40. font-size: 20px;
  41. }
  42. #alertPreferences{
  43. font-size: 22px;
  44. }
  45. #alertPhone{
  46. font-size: 22px;
  47. }
  48. }
  49. #overlay{
  50. background: #000;
  51. filter: alpha(opacity=50); /* IE的透明度 */
  52. opacity: 0.5; /* 透明度 */
  53. position: absolute;
  54. top: 0px;
  55. left: 0px;
  56. width: 100%;
  57. height: 100%;
  58. z-index: 1041; /* 此处的图层要大于页面 */
  59. display:none;
  60. }
  61. .xgmsgbox{
  62. display:none;
  63. position: absolute;
  64. top: 50%;
  65. left: 50%;
  66. background: #fff;
  67. z-index: 9999;
  68. border: 1px solid rgba(0,0,0,0.2);
  69. border-radius: 3px;
  70. -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5);
  71. box-shadow: 0 3px 9px rgba(0,0,0,0.5);
  72. margin-left: -135px;
  73. margin-top: -135px;
  74. height: 300px;
  75. }
  76. .xgmsgbox>h4{
  77. margin: 0;
  78. text-align: center;
  79. padding: 15px;
  80. border-bottom: 1px solid #e5e5e5;
  81. background-color: #f4f2f2;
  82. }
  83. .xgmsgbox>.footerBox{
  84. display: flex;
  85. justify-content: center;
  86. align-items: center;
  87. border-top: 1px solid #e5e5e5;
  88. padding: 15px;
  89. margin-top: 186px;
  90. }
  91. .xgmsgbox>.footerBox>button{
  92. padding: 6px 40px;
  93. background-color: #28ce6f;
  94. border: none;
  95. margin:0 5px;
  96. color: #fff;
  97. }
  98. .iscrollCenter{
  99. padding: 0 40px;
  100. position: absolute;
  101. width: 100%;
  102. overflow: hidden;
  103. height: 186px;
  104. top: 50px;
  105. }
  106. .iscrollCenter>.listcenter>li{
  107. height: 40px;
  108. display: flex;
  109. align-items: center;
  110. position: relative;
  111. }
  112. .listcenter .checkBox>input{
  113. visibility: hidden;
  114. }
  115. .checkBox {
  116. width: 20px;
  117. height: 20px;
  118. line-height: 20px;
  119. background: #ddd;
  120. display: inline-block;
  121. border-radius: 100%;
  122. position: absolute;
  123. -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
  124. -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
  125. box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
  126. right: 0;
  127. top: 10px;
  128. }
  129. .checkBox>label {
  130. display: block;
  131. width: 16px;
  132. height: 16px;
  133. border-radius: 50%;
  134. -webkit-transition: all .5s ease;
  135. -moz-transition: all .5s ease;
  136. -o-transition: all .5s ease;
  137. -ms-transition: all .5s ease;
  138. transition: all .5s ease;
  139. position: absolute;
  140. top: 2px;
  141. left: 2px;
  142. z-index: 1;
  143. background: transparent;
  144. -webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
  145. -moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
  146. box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
  147. }
  148. .checkBox>input[type=checkbox]:checked + label {
  149. background: #1abc9c;
  150. }
  151. .chooseDweb>.checkBox+span{
  152. text-indent: 0.2rem;
  153. }
  154. .spanColor{
  155. -webkit-transition: all .5s ease;
  156. color:#1abc9c;
  157. font-weight: bold;
  158. }
  159. #alertBanner{
  160. z-index:1050;
  161. }
  162. #addWrapper{
  163. position: fixed;
  164. bottom: 60px;
  165. width: 100%;
  166. }
  167. .addButton{
  168. position: relative;
  169. background-color: #39e605;
  170. box-shadow: 0 5px 11px rgba(98,98,102,0.25);
  171. font-size: 30px;
  172. width: 40px;
  173. height: 40px;
  174. line-height: 35px;
  175. margin: 0 auto;
  176. text-align: center;
  177. color: white;
  178. border-radius: 100%;
  179. }
  180. .infoBottom{
  181. position: absolute;
  182. width: 100%;
  183. text-align: center;
  184. bottom: 35px;
  185. color: rgba(176,176,176,0.68);
  186. }
  187. .Phone .dl-horizontal{
  188. padding: 10px 0;
  189. }
  190. .dl-horizontal{
  191. margin: 0 !important;
  192. height: 60px;
  193. line-height: 60px;
  194. }
  195. .Phone div dl.dl-horizontal dd{
  196. text-align: center;
  197. height: 31px;
  198. line-height: 31px;
  199. padding: 0 10px;
  200. }
  201. .Phone div dl.dl-horizontal dd input{
  202. width: 100%;
  203. height: 31px;
  204. line-height: 31px;
  205. border: 1px solid rgba(56,49,49,0.19)
  206. }
  207. .glyphicon-trash{
  208. color: red;
  209. }
  210. .glyphicon-ok{
  211. color: greenyellow;
  212. }
  213. /* 滚动条样式 */
  214. .iScrollVerticalScrollbar {
  215. position: absolute;
  216. z-index: 9999;
  217. width: 3px;
  218. bottom: 2px;
  219. top: 2px;
  220. right: 2px;
  221. overflow: hidden;
  222. }
  223. .iScrollVerticalScrollbar.iScrollBothScrollbars {
  224. bottom: 18px;
  225. }
  226. .iScrollIndicator {
  227. position: absolute;
  228. right: 0;
  229. background: rgba(0, 0, 0);
  230. border: 2px solid rgba(0, 0, 0, 0.5);
  231. border-radius: 8px;
  232. }
  233. </style>
  234. <script type="text/javascript" src="views/haifm/mc/hjkz/hjkzbjcs.js"></script>
  235. </head>
  236. <body>
  237. <input type="hidden" id="jqid" value="$!xtHkbjbjcs.jqid"/>
  238. <input type="hidden" id="bjpzsl" value="$!xtHkbjbjcs.bjcsList.size()" />
  239. <input type="hidden" id="zsid" value="$!zsid"/>
  240. <input type="hidden" id="type" value="$!type"/>
  241. <input type="hidden" id="zsbz" value="$!daZsda.zsbz"/>
  242. <main>
  243. <div class="navbar-fixed-top">
  244. <span class="glyphicon glyphicon-menu-left" onclick="javascript:bjcsBackUrl();"></span>
  245. <h4>报警设置</h4>
  246. #if ("$!xt_hjkz_bjcs_update" == "true" || "$!xt_flz_bjcs_update" == "true")
  247. <span class="saveBtn" onclick="javascript:savebjcs('bc')">保存</span>
  248. #else
  249. <span class="saveBtn"></span>
  250. #end
  251. </div>
  252. </main>
  253. <div class="row navbar-fixed-bottom nav1" style="top:38px; height:30px;" id="dh">
  254. <ul class="nav nav-pills row" id="navTip">
  255. <li class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="left:13px;">等级</li>
  256. <li class="col-xs-4 col-sm-4 col-md-4 col-lg-4">内容</li>
  257. <li class="col-xs-6 col-sm-6 col-md-6 col-lg-6">行为</li>
  258. </ul>
  259. </div>
  260. <main id="alarmSet" style="margin-top:0;">
  261. <div class="kzbjcsIscroll" style="width: 100%;margin-top: 0;margin-bottom: 0;position: absolute;bottom: 30px;top: 68px;">
  262. <div>
  263. <div class="wrapper clearfix" id="alarmContent">
  264. #set($count = 1)
  265. #foreach($!obj in $!xtHkbjbjcs.bjcsList)
  266. <dl #if("$!obj.lxid" == "6" && "$!obj.lxmc" == "温差过大") class="dl-horizontal hidden" #else class="dl-horizontal" #end style="border-bottom:0;">
  267. <input type="hidden" value="$!obj.lxid" id="lxid$!count"/>
  268. <input type="hidden" value="$!obj.bjjb" id="bjjb$!count"/>
  269. <dt class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
  270. <span class="glyphicon glyphicon-alert" data-degree="$!obj.bjjb" data-input="xwkgtxt$!count"></span></dt>
  271. <dd class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">$!obj.bjjb</dd>
  272. <dd class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
  273. <input type="text" placeholder="选择报警内容" data-toggle="modal" value="$!obj.xwnr"
  274. #if("$!obj.xwkg" == "") data-box="1111111" #else data-box="$!obj.xwkg" #end
  275. id="xwkgtxt$!count" data-name="xwkgtxt" readonly="readonly" data-target="#checkboxWrapper"
  276. #if("$!obj.bjjb" == "0") disabled="disabled" #end>
  277. <span class="caret"></span>
  278. </dd>
  279. </dl>
  280. #set($count = $count + 1)
  281. #end
  282. </div>
  283. </div>
  284. </div>
  285. <div class="wrapper clearfix" id="alertPreferences" style="margin-top: 0;">
  286. <input type="hidden" value="$!xtBjzpz.jqid" id="pzjqid">
  287. <ul class="nav nav-pills row">
  288. <li class="col-xs-4 col-sm-4 col-md-4 col-lg-4">内容</li>
  289. <li class="col-xs-8 col-sm-8 col-md-8 col-lg-8">数值</li>
  290. </ul>
  291. <dl class="dl-horizontal" style="border-bottom:0;">
  292. <dd class="col-xs-6 col-sm-6 col-md-6 col-lg-6">高温报警值(℃)</dd>
  293. <dd class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="text-align:center;">
  294. <input type="text" value="$!xtBjzpz.gwbjz" id="gwbjz" maxlength="6"
  295. onfocus="if(!/^[0-9]+(\.[0-9]{1})?$/.test(this.value))this.value=''"
  296. onblur="if(!/^[0-9]+(\.[0-9]{1})?$/.test(this.value))this.value=''"
  297. onafterpaste='this.value=this.value.replace(/[^\d\.]/gi,"");this.value=this.value.replace(/^(\d+\.\d{1})\S*$/,"$1");this.value=this.value.replace(/^\.{1}$/, "");this.value=this.value.replace(/^(\d+\.)\.$/, "$1")'
  298. onKeyUp='this.value=this.value.replace(/[^\d\.]/gi,"");this.value=this.value.replace(/^(\d+\.\d{1})\S*$/,"$1");this.value=this.value.replace(/^\.{1}$/, "");this.value=this.value.replace(/^(\d+\.)\.$/, "$1")'/>
  299. </dd>
  300. </dl>
  301. <dl class="dl-horizontal" style="border-bottom:0;">
  302. <dd class="col-xs-6 col-sm-6 col-md-6 col-lg-6">低温报警值(℃)</dd>
  303. <dd class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="text-align:center;">
  304. <input type="text" value="$!xtBjzpz.dwbjz" id="dwbjz" maxlength="6"
  305. onfocus="if(!/^[0-9]+(\.[0-9]{1})?$/.test(this.value))this.value=''"
  306. onblur="if(!/^[0-9]+(\.[0-9]{1})?$/.test(this.value))this.value=''"
  307. onafterpaste='this.value=this.value.replace(/[^\d\.]/gi,"");this.value=this.value.replace(/^(\d+\.\d{1})\S*$/,"$1");this.value=this.value.replace(/^\.{1}$/, "");this.value=this.value.replace(/^(\d+\.)\.$/, "$1")'
  308. onKeyUp='this.value=this.value.replace(/[^\d\.]/gi,"");this.value=this.value.replace(/^(\d+\.\d{1})\S*$/,"$1");this.value=this.value.replace(/^\.{1}$/, "");this.value=this.value.replace(/^(\d+\.)\.$/, "$1")'/>
  309. </dd>
  310. </dl>
  311. <dl class="dl-horizontal hidden" style="border-bottom:0;">
  312. <dd class="col-xs-6 col-sm-6 col-md-6 col-lg-6">温差过大报警值(℃)</dd>
  313. <dd class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="text-align:center;">
  314. <input type="text" value="99" id="wcbjz" maxlength="6"
  315. onfocus="if(!/^[0-9]+(\.[0-9]{1})?$/.test(this.value))this.value=''"
  316. onblur="if(!/^[0-9]+(\.[0-9]{1})?$/.test(this.value))this.value=''"
  317. onafterpaste='this.value=this.value.replace(/[^\d\.]/gi,"");this.value=this.value.replace(/^(\d+\.\d{1})\S*$/,"$1");this.value=this.value.replace(/^\.{1}$/, "");this.value=this.value.replace(/^(\d+\.)\.$/, "$1")'
  318. onKeyUp='this.value=this.value.replace(/[^\d\.]/gi,"");this.value=this.value.replace(/^(\d+\.\d{1})\S*$/,"$1");this.value=this.value.replace(/^\.{1}$/, "");this.value=this.value.replace(/^(\d+\.)\.$/, "$1")'/>
  319. </dd>
  320. </dl>
  321. <dl class="dl-horizontal hidden" style="border-bottom:0;">
  322. <dd class="col-xs-6 col-sm-6 col-md-6 col-lg-6">高湿度报警值(RH)</dd>
  323. <dd class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="text-align:center;">
  324. <input type="text" value="$!xtBjzpz.gsbjz" id="gsbjz" maxlength="6"
  325. onfocus="if(!/^[0-9]+(\.[0-9]{1})?$/.test(this.value))this.value=''"
  326. onblur="if(!/^[0-9]+(\.[0-9]{1})?$/.test(this.value))this.value=''"
  327. onafterpaste='this.value=this.value.replace(/[^\d\.]/gi,"");this.value=this.value.replace(/^(\d+\.\d{1})\S*$/,"$1");this.value=this.value.replace(/^\.{1}$/, "");this.value=this.value.replace(/^(\d+\.)\.$/, "$1")'
  328. onKeyUp='this.value=this.value.replace(/[^\d\.]/gi,"");this.value=this.value.replace(/^(\d+\.\d{1})\S*$/,"$1");this.value=this.value.replace(/^\.{1}$/, "");this.value=this.value.replace(/^(\d+\.)\.$/, "$1")'/>
  329. </dd>
  330. </dl>
  331. <dl class="dl-horizontal" style="border-bottom:0;">
  332. <dd class="col-xs-6 col-sm-6 col-md-6 col-lg-6">高氨气报警值(PPM)</dd>
  333. <dd class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="text-align:center;">
  334. <input type="text" value="$!xtBjzpz.gabjz" id="gabjz" maxlength="6"
  335. onfocus="if(!/^[0-9]+(\.[0-9]{1})?$/.test(this.value))this.value=''"
  336. onblur="if(!/^[0-9]+(\.[0-9]{1})?$/.test(this.value))this.value=''"
  337. onafterpaste='this.value=this.value.replace(/[^\d\.]/gi,"");this.value=this.value.replace(/^(\d+\.\d{1})\S*$/,"$1");this.value=this.value.replace(/^\.{1}$/, "");this.value=this.value.replace(/^(\d+\.)\.$/, "$1")'
  338. onKeyUp='this.value=this.value.replace(/[^\d\.]/gi,"");this.value=this.value.replace(/^(\d+\.\d{1})\S*$/,"$1");this.value=this.value.replace(/^\.{1}$/, "");this.value=this.value.replace(/^(\d+\.)\.$/, "$1")'/>
  339. </dd>
  340. </dl>
  341. </div>
  342. <input type="hidden" id="sjhm" value="$!sjhm" />
  343. <input type="hidden" id="sjbz" value="$!sjbz" />
  344. <input type="hidden" id="sjjqid" value="$!sjjqid" />
  345. </main>
  346. <div class="wrapper clearfix" id="alertPhone">
  347. <div class="wrapper clearfix" id="alertPhone1">
  348. <ul class="nav nav-pills row">
  349. <li class="col-xs-5 col-sm-5 col-md-5 col-lg-5">报警器手机号</li>
  350. <li class="col-xs-5 col-sm-5 col-md-5 col-lg-5">备注</li>
  351. <li class="col-xs-2 col-sm-2 col-md-2 col-lg-2">操作</li>
  352. </ul>
  353. <div class="Phone2 Phone"style="width: 100%;margin-top: 0;margin-bottom: 0;position: absolute;bottom: 500px;top: 72px;">
  354. <div>
  355. <dl class='dl-horizontal'>
  356. <dd class='col-xs-5 col-sm-5 col-md-5 col-lg-5'>
  357. <input type='number' name='bjqsjhm' id="bjqsjhm" value ="$!bjqsjhm">
  358. </dd>
  359. <dd class='col-xs-5 col-sm-5 col-md-5 col-lg-5'>
  360. <input type='text' name='bjqsjbz' id="bjqsjbz" value="$!bjqsjbz" maxlength='100'>
  361. </dd>
  362. <dd class='col-xs-2 col-sm-2 col-md-2 col-lg-2'>
  363. <span class='glyphicon glyphicon-ok'></span>
  364. </dd>
  365. </dl>
  366. </div>
  367. </div>
  368. </div>
  369. <ul class="nav nav-pills row" style="margin-top: 95px;">
  370. <li class="col-xs-5 col-sm-5 col-md-5 col-lg-5">手机号</li>
  371. <li class="col-xs-5 col-sm-5 col-md-5 col-lg-5">备注</li>
  372. <li class="col-xs-2 col-sm-2 col-md-2 col-lg-2">操作</li>
  373. </ul>
  374. <div class="Phone1 Phone" style="width: 100%;margin-top: 0;margin-bottom: 0;position: absolute;bottom: 30px;top: 200px;">
  375. <div></div>
  376. </div>
  377. <div id="addWrapper">
  378. <div class="addButton emerge">+</div>
  379. </div>
  380. <div class="infoBottom">本页面信息在保存后十分钟内生效</div>
  381. </div>
  382. <div class="row navbar-fixed-bottom" id="bjMenu1">
  383. <ul class="nav nav-pills">
  384. #if("$!type" == "flz")
  385. <li data-show="alarmContent" class="active col-xs-6 col-sm-6 col-md-6 col-lg-6">报警开关</li>
  386. <li data-show="alertPhone" class="col-xs-6 col-sm-6 col-md-6 col-lg-6">报警手机</li>
  387. #else
  388. <li data-show="alarmContent" class="active col-xs-4 col-sm-4 col-md-4 col-lg-4">报警开关</li>
  389. <li data-show="alertPreferences" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">报警参数</li>
  390. <li data-show="alertPhone" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">报警手机</li>
  391. #end
  392. </ul>
  393. </div>
  394. <!-- 报警内容多选弹出窗口 -->
  395. <div class="modal" id="checkboxWrapper">
  396. <div class="modal-dialog" style="margin: 0;position: absolute;width: 75%;top: 50%;left: 50%;margin-top: -180px; margin-left: -138px;">
  397. <div class="modal-content">
  398. <div class="modal-header">
  399. <h4 class="modal-title">选择报警行为</h4>
  400. </div>
  401. <div class="modal-body">
  402. <ul class="list" id="alarmCheckbox">
  403. #foreach($!obj in $!xtHkbjbjcs.gzxwList)
  404. <li>
  405. <div class="icheckbox_green">
  406. <input type="checkbox" id="checkbox-$!obj.dmid">
  407. <ins class="iCheck-helper"></ins>
  408. </div>
  409. <label for="checkbox-$!obj.dmid">$!obj.dmmc</label>
  410. </li>
  411. #end
  412. </ul>
  413. </div>
  414. <div class="modal-footer">
  415. <button type="button" class="btn save" data-dismiss="modal" id="save">确定</button>
  416. </div>
  417. </div>
  418. </div>
  419. </div>
  420. <div id="tb" style="z-index: 1040;position: fixed;bottom: 50px;right: 18px;width: 50px;height: 50px;line-height: 50px;border: 1px solid #ccc;text-align: center;box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);text-shadow: 1px 1px 1px rgba(255,255,255, .22);color: #515151;background : -webkit-linear-gradient( top , #d3d3d3 0%, #8a8a8a 100%);border-radius: 50%;">同步</div>
  421. <div id="overlay"></div>
  422. <div class="xgmsgbox">
  423. <h4 id = "damc">$!damc</h4>
  424. <div class="iscrollCenter">
  425. <ul class="listcenter">
  426. #foreach ($!obj in $!zsdaList)
  427. <li>
  428. <div id="tb" class="checkBox">
  429. <input type="checkbox" name="checkBox" id="dmid" value="$!obj.id" />
  430. <label for="dmid"></label>
  431. </div>
  432. <span>$!obj.zsmc</span>
  433. </li>
  434. #end
  435. </ul>
  436. </div>
  437. <div class="footerBox">
  438. <button type="button" class="btn btn-default qd" onclick="savebjcs()">确定</button>
  439. <button type="button" class="btn btn-default qx">取消</button>
  440. </div>
  441. </div>
  442. </body>
  443. </html>