statistics.html 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. <!DOCTYPE html>
  2. <html lang="zh-cmn-Hans">
  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 name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8">
  10. <link rel="stylesheet" href="./lib/layui/css/layui.css">
  11. <link rel="stylesheet" href="./css/font.css">
  12. <link rel="stylesheet" href="./css/xadmin.css">
  13. <script src="./lib/jquery.min.js"></script>
  14. <script src="./lib/layui/layui.js" charset="utf-8"></script>
  15. <script src="./js/xadmin.js"></script>
  16. <script src="../other/js/functions.js"></script>
  17. <script src="../other/public/echarts.js" type="text/javascript" charset="utf-8"></script>
  18. <script src="./js/statistics.js"></script>
  19. <script src="./js/echarts.min.js"></script>
  20. <style>
  21. .search {
  22. display: inline-block;
  23. margin-left: 20px;
  24. }
  25. #realName {
  26. display: inline-block;
  27. }
  28. .fault {
  29. display: inline-block;
  30. height: 60px!important;
  31. width: 100px;
  32. }
  33. /* .list_tup a {
  34. display: block;
  35. width: 500px;
  36. height: 100px;
  37. padding: 10px 12px;
  38. border-radius: 5px;
  39. }
  40. .list_tup .mask {
  41. position: absolute;
  42. left: 0;
  43. top: 0;
  44. z-index: 1;
  45. display: none;
  46. width: 271px;
  47. height: 150px;
  48. background-color: #f5f5f5;
  49. border-radius: 15px;
  50. opacity: .1;
  51. filter: alpha(opacity=10);
  52. } */
  53. /* .list_tup .detials {
  54. float: right;
  55. width: 198px;
  56. /* margin-top: -140px; */
  57. /* display: block; */
  58. /* position: absolute;
  59. top: 11px;
  60. left: 30%; */
  61. /* } */
  62. .layui-table-header {
  63. border-width: 0 0 1px;
  64. display: none;
  65. border: 0px;
  66. /* overflow: hidden; */
  67. }
  68. .layui-table-cell {
  69. height: auto;
  70. widows: auto;
  71. white-space: normal;
  72. }
  73. #box {
  74. position: absolute;
  75. left: 30%;
  76. top: 40%;
  77. }
  78. #box p {
  79. color: #666;
  80. font-size: 20px;
  81. line-height: 20px;
  82. width: 140px;
  83. overflow: hidden;
  84. text-overflow: ellipsis;
  85. white-space: nowrap;
  86. clear: both;
  87. }
  88. /* 去掉表格下面的空格 */
  89. .layui-border-box {
  90. height: 573px!important;
  91. }
  92. .layui-table-body {
  93. height: 572px!important;
  94. }
  95. /* .layui-table-main {
  96. height: 800px!important;
  97. } */
  98. </style>
  99. </head>
  100. <body class="layui-anim layui-anim-up">
  101. <div class="x-body">
  102. <form class="layui-form">
  103. <a class="layui-btn layui-btn-sm" style="padding-left: 10px" href="javascript:location.replace(location.href);" title="刷新">
  104. <i class="layui-icon" style="line-height:30px">&#xe669;</i>刷新
  105. </a>
  106. <button id="tolead" class="layui-btn layui-btn-sm " style="padding-left: 10px;padding-right: 10px;">
  107. <i class="layui-icon">&#xe67c;</i>导入</button>
  108. <button id="exportLog" class="layui-btn layui-btn-sm " style="padding-left: 10px;padding-right: 10px;">
  109. <i class="layui-icon">&#xe67d;</i> 导出</button>
  110. <div class="search">
  111. <div class="layui-form-item" style="display: inline-block; width: 25%;">
  112. <select name="city" xm-select="select1">
  113. <option value="1" >机型一</option>
  114. <option value="2" selected="selected">机型二</option>
  115. <option value="3">机型三</option>
  116. <option value="4" selected="selected">机型四</option>
  117. <option value="5">机型五</option>
  118. </select>
  119. </div>
  120. <div class="layui-inline" style="display: inline-block;margin-left: 1%;">
  121. <input type="text" placeholder="起始时间" id="startTime" name="startTime" class="layui-input test-item">
  122. </div>
  123. <div class="layui-inline">
  124. <input type="text" placeholder="终止时间" id="endTime" name="endTime" class="layui-input test-item">
  125. </div>
  126. <div class="layui-inline" style="display: inline-block;">
  127. <button type="button" class="layui-btn layui-btn-sm" id="sure">确定</button>
  128. </div>
  129. </div>
  130. </form>
  131. <div class="layui-row" id="table">
  132. <div class="layui-col-md6">
  133. <div id="main" style="height:450%;position: relative;"></div>
  134. </div>
  135. </div>
  136. <div class="layui-row">
  137. <div class="layui-col-md6">
  138. <div id="max" style="height:450%;position: relative;"></div>
  139. </div>
  140. </div>
  141. <div class="layui-row" style="position:absolute;top:113px; right:-350px;width:75%">
  142. <div class="layui-col-md6">
  143. <table id="faultrecord" class="layui-table" lay-filter="faultrecord" lay-data="{id:'faultrecord'}">
  144. </table>
  145. <!-- <div id="pagination"></div> -->
  146. </div>
  147. </div>
  148. <script type="text/html" id="typeTpl">
  149. <div class="fault">{{d.device_name}}</div>
  150. </script>
  151. <script type="text/html" id="type">
  152. <div>
  153. <div class="list_tup">
  154. <a target="_blank " href="chapter.html" title="民用飞机设计与研究 ">
  155. <div class="detials">
  156. <h3>机型:{{d.aircraft_type}}</h3>
  157. <h3>故障性质:{{d.fault_degree}}</h3>
  158. <h3>故障原因: {{d.fault_reason}}</h3>
  159. </div>
  160. </a>
  161. </div>
  162. </div>
  163. </script>
  164. <script type="text/html" id="book">
  165. <a target="_blank " href="chapter.html">
  166. <div class="book">
  167. <h3>故障描述:{{d.fault_content}}</h3>
  168. <h3>故障信息来源:{{d.info_sources}}
  169. </h3>
  170. <h3>排除方法:{{d.repair_method}}</h3>
  171. </div>
  172. </a>
  173. </script>
  174. </div>
  175. </body>
  176. <script>
  177. layui.use('laydate', function() {
  178. var laydate = layui.laydate;
  179. //执行一个laydate实例
  180. laydate.render({
  181. elem: '#startTime', //指定元素
  182. isInitValue: false,
  183. trigger: "click"
  184. });
  185. });
  186. layui.use('laydate', function() {
  187. var laydate = layui.laydate;
  188. //执行一个laydate实例
  189. laydate.render({
  190. elem: '#endTime', //指定元素
  191. isInitValue: false,
  192. trigger: "click"
  193. });
  194. });
  195. function get() {
  196. var total = sessionStorage.getItem("name")
  197. }
  198. get()
  199. var myChart = echarts.init(document.getElementById('main'));
  200. var myCharte = echarts.init(document.getElementById('max'));
  201. option = {
  202. xAxis: {
  203. type: 'category',
  204. data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  205. },
  206. yAxis: {
  207. type: 'value'
  208. },
  209. series: [{
  210. data: [150, 230, 224, 218, 135, 147, 260],
  211. type: 'line'
  212. }]
  213. };
  214. option1 = {
  215. tooltip: {
  216. trigger: 'item'
  217. },
  218. legend: {
  219. top: '5%',
  220. left: 'center'
  221. },
  222. series: [{
  223. name: '访问来源',
  224. type: 'pie',
  225. radius: ['40%', '70%'],
  226. avoidLabelOverlap: false,
  227. label: {
  228. show: false,
  229. position: 'center'
  230. },
  231. emphasis: {
  232. label: {
  233. show: true,
  234. fontSize: '40',
  235. fontWeight: 'bold'
  236. }
  237. },
  238. labelLine: {
  239. show: false
  240. },
  241. data: [{
  242. value: 1048,
  243. name: '搜索引擎'
  244. }, {
  245. value: 735,
  246. name: '直接访问'
  247. }, {
  248. value: 580,
  249. name: '邮件营销'
  250. }, {
  251. value: 484,
  252. name: '联盟广告'
  253. }, {
  254. value: 300,
  255. name: '视频广告'
  256. }]
  257. }]
  258. };
  259. myChart.setOption(option);
  260. myCharte.setOption(option1);
  261. </script>
  262. </html>