Alert.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>告警总览</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  8. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  9. <meta http-equiv="pragma" content="no-cache">
  10. <meta http-equiv="Cache" content="no-cache">
  11. <meta http-equiv="cache-control" content="no-cache, must-revalidate">
  12. <meta http-equiv="expires" content="0">
  13. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  14. <!--引入 element-ui 的样式,-->
  15. <link rel="stylesheet" href="../css/element.css">
  16. <link rel="stylesheet" href="../css/style.css">
  17. <link rel="stylesheet" href="../css/base.css">
  18. <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  19. <script type="text/javascript">
  20. document.write('<script src="../js/yz/init.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  21. document.write('<script src="../js/yz/shipLi.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  22. document.write('<script src="../js/yz/ysy-mj456.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  23. </script>
  24. <script>
  25. checkLogin();
  26. </script>
  27. </head>
  28. <style type="text/css">
  29. *{
  30. margin: 0;
  31. padding: 0;
  32. box-sizing: border-box;
  33. }
  34. body{
  35. height: 100vh;
  36. color:#000;
  37. overflow: hidden;
  38. }
  39. li{
  40. list-style: none;
  41. }
  42. .tools{
  43. display: flex;
  44. align-items: center;
  45. padding: 10px 0 15px;
  46. }
  47. .tools>div{
  48. display: flex;
  49. align-items: center;
  50. width: 225px;
  51. margin-right: 20px;
  52. overflow: hidden;
  53. border-radius: 4px;
  54. /* border: 1px solid #d4d4d4; */
  55. }
  56. .tools>div>div{
  57. text-align: center;
  58. width: 80px;
  59. color: #fff;
  60. }
  61. .tools>div input{
  62. padding: 6px;
  63. font-size: 16px;
  64. width: calc(100% - 80px);
  65. border: none;
  66. outline: none;
  67. color: #fff;
  68. border-left: 1px solid #d4d4d4;
  69. background-color:transparent;
  70. }
  71. .tools input[type="date" i]::-webkit-calendar-picker-indicator {
  72. margin-left: 10px;
  73. background-image: url(../imgs/date.png);
  74. }
  75. .tools button{
  76. padding: 9px 20px;
  77. border-radius: 4px;
  78. margin-right: 20px;
  79. }
  80. .warmli ul{
  81. display: none;
  82. }
  83. .warmli li{
  84. font-size: 13px;
  85. color: #94d1ff;
  86. padding: 7px 0 7px 28px;
  87. }
  88. .warmli li.act{
  89. color: #fff;
  90. background-color: #0081FF;
  91. }
  92. .toolBar{
  93. justify-content: flex-start !important;
  94. color: #fff;
  95. }
  96. .toolBar .iconfont {
  97. font-size: 20px;
  98. cursor: pointer;
  99. }
  100. .toolBar>div{
  101. margin-right: 10px;
  102. }
  103. .toolBar .pagenum{
  104. color: #fff;
  105. padding: 5px 10px;
  106. margin: 0 15px;
  107. border-radius: 4px;
  108. background-color: #FF5722;
  109. }
  110. .toolBar input{
  111. background-color: #fff;
  112. padding: 4px;
  113. width: 50px;
  114. }
  115. .detailli{
  116. width:24%;
  117. margin: 0 0.5% 10px;
  118. color:#94d1ff;
  119. }
  120. .detailli i{
  121. margin-right: 4px;
  122. }
  123. @media screen and (max-width: 700px) {
  124. .detailli{
  125. width:100%;
  126. }
  127. }
  128. </style>
  129. <body>
  130. <div class="yz_container">
  131. <div class="yz_aside">
  132. <div>
  133. <div class="warmli">
  134. <div class="padding-tb-sm padding-lr-xs yz_cursor" style="color: #5793f3;">
  135. <i class="iconfont icon-jian margin-right-xs"></i>
  136. 告警总览
  137. </div>
  138. <ul style="display: block;">
  139. <li class="act" data-type="alljc">告警总览</li>
  140. </ul>
  141. </div>
  142. <div class="warmli">
  143. <div class="padding-tb-sm padding-lr-xs yz_cursor" style="color: #5793f3;">
  144. <i class="iconfont icon-jia margin-right-xs"></i>
  145. 行为告警
  146. </div>
  147. <ul>
  148. <!-- <li data-type="pljs">疲劳驾驶</li> -->
  149. <li data-type="qycr">区域警戒</li>
  150. <li data-type="lgjc">离岗检测</li>
  151. <li data-type="cyjc">抽烟检测</li>
  152. <li data-type="ddhjc">打电话检测</li>
  153. </ul>
  154. </div>
  155. <div class="warmli">
  156. <div class="padding-tb-sm padding-lr-xs yz_cursor" style="color: #5793f3;">
  157. <i class="iconfont icon-jia margin-right-xs"></i>
  158. 物品识别
  159. </div>
  160. <ul>
  161. <li data-type="kzjc">口罩检测</li>
  162. <li data-type="aqmjc">安全帽检测</li>
  163. <!-- <li data-type="yhjc">烟火检测</li> -->
  164. </ul>
  165. </div>
  166. </div>
  167. </div>
  168. <div class="yz_main">
  169. <div class="tools">
  170. <div class="Sense">
  171. <div>开始时间</div>
  172. <input type="date" class="startDate">
  173. </div>
  174. <div class="Sense">
  175. <div>结束时间</div>
  176. <input type="date" class="endDate">
  177. </div>
  178. <button type="button" class="bg-blue" onclick="seachLi()">查询</button>
  179. </div>
  180. <div style="height: calc(100% - 105px);overflow-y: auto;">
  181. <div class="flex flex-wrap" id="liView">
  182. </div>
  183. <div class="flex align-center justify-center nodata" style="height: 100%;display: none;">
  184. <img src="../imgs/nodata.png" alt="" style="width: 40%;">
  185. </div>
  186. </div>
  187. <div class="toolBar">
  188. <div data-num="first" class="iconfont icon-left-start" style="font-size: 18px;"></div>
  189. <div data-num="-1" class="iconfont icon-left"></div>
  190. <div class="pagenum" id="pageTxt">1</div>
  191. <div data-num="1" class="iconfont icon-right iconsty" style="font-size: 22px;"></div>
  192. <div data-num="last" class="iconfont icon-right-end" style="font-size: 18px;"></div>
  193. <div style="margin: 0 20px;">共 <span id="allPgage">0</span> 页</div>
  194. <div>共 <span id="allNum">0</span> 条记录</div>
  195. </div>
  196. </div>
  197. </div>
  198. </body>
  199. <script type="text/javascript">
  200. document.write('<script src="../js/yz/alertPc.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  201. </script>
  202. </html>