wsclMain.htm 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>wsclMain</title>
  6. <link rel="stylesheet" href="views/wscl/common.css" />
  7. <style type="text/css">
  8. .suosou{
  9. height: 0.72rem;
  10. z-index: 1;
  11. padding: 0.38rem 0;
  12. border-bottom: 1px solid #eee;
  13. }
  14. #wrap .suosou ul.nav.nav-pills.navbar-fixed-bottom.nav-justified{
  15. background: #fff;
  16. justify-content: center;
  17. padding: 0.12rem 0;
  18. }
  19. #wrap .suosou ul.nav-pills>li+li {
  20. margin-left: 0;
  21. }
  22. #wrap .suosou ul.nav.nav-pills.navbar-fixed-bottom.nav-justified li a{
  23. color: #67889D;
  24. padding: 0.05rem 0.2rem;
  25. border: 1px solid #7BA3B9;
  26. border-radius: 0.08rem;
  27. }
  28. .suosouLicolor{
  29. color: #fff !important;
  30. background-color: #6C98B1 !important;
  31. }
  32. </style>
  33. <script type="text/javascript">
  34. var jroll;
  35. $(function(){
  36. $("#kb").hide();
  37. $("#bjsz").hide();
  38. jroll = new JRoll('#iscrollwsclX',{
  39. id: "dome1",
  40. scrollX: true,
  41. scrollY: false,
  42. });
  43. //设置二级菜单横向滚动的宽度
  44. var deviceW = $("body").width();
  45. var iscrollXwid = $(".iscrollwsclX li").outerWidth() * $(".iscrollwsclX li").length;
  46. if (iscrollXwid >= deviceW) {
  47. $(".iscrollwsclX ul").css("width","auto");
  48. } else {
  49. $(".iscrollwsclX ul").css("width","100%");
  50. }
  51. setTimeout(function(){
  52. jroll.refresh();
  53. }, 500);
  54. haifm.loadMobilePage("wsclMenu", "wsclYckzIndex.htm?mcid=" + $("#mcid").val());
  55. $("#iscrollwsclX ul").on("tap", "a", function(){
  56. var type = $(this).data("for");
  57. $("#iscrollwsclX ul a").removeClass("suosouLicolor");
  58. $(this).addClass("suosouLicolor");
  59. haifm.loadMobilePage("wsclMenu", "wscl" + type + "Index.htm?mcid=" + $("#mcid").val());
  60. if(type == "Gzyj") {
  61. $("#flzPanel").addClass("glyphicon-phone");
  62. }else {
  63. $("#flzPanel").removeClass("glyphicon-phone");
  64. }
  65. if (type == "Yckz") {
  66. $(".save").show();
  67. $("#kb").hide();
  68. } else {
  69. $(".save").hide();
  70. $("#kb").show();
  71. }
  72. });
  73. $("#flzPanel").on("tap", function(){
  74. $("#bjsz").show();
  75. $("#qtsz").hide();
  76. $(".suosou").hide();
  77. haifm.loadMobilePage("wsclMenu", "wsclBjszIndex.htm?mcid=" + $("#mcid").val());
  78. });
  79. });
  80. function backSy() {
  81. haifm.loadMobilePage("haifm", "haifmvMain.htm?mcid=" + $("#mcid").val());
  82. }
  83. function backOther(){
  84. $("#bjsz").hide();
  85. $("#qtsz").show();
  86. $(".suosou").show();
  87. haifm.loadMobilePage("wsclMenu", "wsclGzyjIndex.htm?mcid=" + $("#mcid").val());
  88. }
  89. </script>
  90. </head>
  91. <body>
  92. <input type="hidden" id="mcid" name="mcid" value="$!mcid" />
  93. <div id="wrap">
  94. <header id="qtsz">
  95. <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="javascript:backSy()"></span>
  96. <p>$!mcmc</p>
  97. <span class="glyphicon glyphicon-ok save" aria-hidden="true" onclick="saveWsclYckz();"></span>
  98. <span id="kb"></span>
  99. </header>
  100. <header id="bjsz">
  101. <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="javascript:backOther()"></span>
  102. <p id="title">报警设置</p>
  103. <span class="glyphicon" aria-hidden="true" id="flzPanel"></span>
  104. </header>
  105. <div class="suosou iscrollwsclX" id="iscrollwsclX">
  106. <ul class="nav nav-pills navbar-fixed-bottom nav-justified" style="justify-content: space-between;">
  107. <li><a class="mui-tab-item suosouLicolor" id="yckz" data-for="Yckz">远程控制</a></li>
  108. <li><a class="mui-tab-item" id="sszt" data-for="Sszt">实时组态</a></li>
  109. <li><a class="mui-tab-item" id="ssjc" data-for="Ssjc">实时检测</a></li>
  110. <li><a class="mui-tab-item" id="gzyj" data-for="Gzyj">故障预警</a></li>
  111. </ul>
  112. </div>
  113. <div class="middle" id="wsclMenu"></div>
  114. </div>
  115. <!--遮罩-->
  116. <div id="overlay"></div>
  117. </body>
  118. </html>