qxz_report1.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835
  1. {% load staticfiles %}
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8" />
  6. <link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
  7. <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
  8. <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
  9. <link rel="stylesheet" href="{% static '/lib/css/ace-skins.min.css' %}">
  10. <link rel="stylesheet" href="{% static '/lib/css/ace-rtl.min.css' %}">
  11. <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
  12. <link rel="stylesheet" href="{% static '/css/loading.css' %}?versions=0.5.0" />
  13. <style type="text/css">
  14. body {
  15. background: #fff;
  16. }
  17. /* 菜单 */
  18. .menu_body .nulldata {
  19. line-height: 80px;
  20. text-align: center;
  21. height: 80px;
  22. background: #eee;
  23. }
  24. .menu_list {
  25. margin-top: 10px;
  26. }
  27. .menu_head {
  28. height: 30px;
  29. line-height: 30px;
  30. padding-left: 10px;
  31. font-size: 12px;
  32. color: #313131;
  33. cursor: pointer;
  34. border: 1px solid #e1e1e1;
  35. border-top: 0px solid #e1e1e1;
  36. position: relative;
  37. background: #f1f1f1 url(../static/img/jia.png) center right 5px no-repeat;
  38. margin: 0;
  39. word-break: keep-all;
  40. white-space: nowrap;
  41. overflow: hidden;
  42. text-overflow: ellipsis;
  43. }
  44. .menu_body {
  45. height: auto;
  46. overflow: hidden;
  47. line-height: 38px;
  48. border-left: 1px solid #e1e1e1;
  49. border-right: 1px solid #e1e1e1;
  50. }
  51. .menu_body a {
  52. display: block;
  53. height: 32px;
  54. line-height: 32px;
  55. padding-left: 10px;
  56. color: #525252;
  57. background: #fff;
  58. text-decoration: none;
  59. border-bottom: 1px solid #e1e1e1;
  60. }
  61. .menu_list .current {
  62. background: #f1f1f1 url(../static/img/jian.png) center right 5px no-repeat;
  63. font-weight: bold;
  64. color: #313131;
  65. }
  66. .menu_body .menu-active {
  67. color: #00bcd4;
  68. border-left: solid 3px #00bcd4;
  69. }
  70. .currAstive {
  71. background-color: #00bcd4;
  72. color: #fff;
  73. }
  74. .equipPage {
  75. line-height: 34px;
  76. text-align: center;
  77. }
  78. /* 统计图 */
  79. .searchCover {
  80. text-align: right;
  81. }
  82. .container-cartogram>div {
  83. width: 100%;
  84. margin: 0 10px;
  85. height: 400px;
  86. text-align: center;
  87. line-height: 300px;
  88. font-size: 22px;
  89. color: #8a8a8a;
  90. position: relative;
  91. }
  92. .container-cartogram>div>div {
  93. width: 100%;
  94. height: 100%;
  95. }
  96. .container-cartogram>div>.hint {
  97. width: 100%;
  98. height: 100%;
  99. position: absolute;
  100. }
  101. .container-cartogram .echartsBox {
  102. width: 100%;
  103. margin: 0 10px;
  104. height: 500px;
  105. text-align: center;
  106. line-height: 500px;
  107. font-size: 22px;
  108. color: #8a8a8a;
  109. position: relative;
  110. }
  111. .container-cartogram .echart {
  112. width: 100%;
  113. height: 100%;
  114. }
  115. .container-cartogram .hint {
  116. width: 100%;
  117. height: 100%;
  118. position: absolute;
  119. }
  120. /* 表格 */
  121. .tablesearchCover {
  122. text-align: left;
  123. margin: 20px 0 20px 3px;
  124. }
  125. .table,
  126. .table.table-striped>thead>tr>th {
  127. text-align: center;
  128. }
  129. .table>thead:first-child>tr:first-child>th {
  130. cursor: default;
  131. }
  132. /* 统计图提示 */
  133. .echartsHint {
  134. float: left;
  135. margin-left: 5%;
  136. line-height: 30px;
  137. font-weight: 700;
  138. }
  139. .timeStage {
  140. display: none;
  141. }
  142. .downTitle {
  143. text-align: right;
  144. line-height: 27px;
  145. padding-left: 0;
  146. margin-bottom: 5px;
  147. }
  148. .downContent {
  149. padding-left: 0;
  150. margin-bottom: 5px;
  151. }
  152. </style>
  153. <body>
  154. <div class="content">
  155. <div class="container" style="width:98%">
  156. <div class="row">
  157. <!-- 左菜单 -->
  158. <div class="col-xs-12 col-sm-3 col-md-2">
  159. <div class="input-group">
  160. <input type="text" class="form-control" id="searchImei" name="searchImei"
  161. placeholder="输入编号或名称查询">
  162. <div class="input-group-btn">
  163. <button type="button" id="searchBtn" class="btn btn-default no-border btn-sm">
  164. <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
  165. </button>
  166. </div>
  167. </div>
  168. <!-- 下拉框 -->
  169. <!-- 在线状态 -->
  170. {{role}}
  171. {% if role == "superuser" %}
  172. <div class="layui-input-block">
  173. <p class="">在线状态:</p>
  174. <select name="status" lay-verify="required" id="selectId" class="iptScreen">
  175. <option value="" selected>全部</option>
  176. <option value="0">离线</option>
  177. <option value="1">在线</option>
  178. </select>
  179. <div class="input-group-btnA">
  180. <button type="button" id="searchBtnA" class="btn btn-default no-border btn-sm">
  181. <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
  182. </button>
  183. </div>
  184. </div>
  185. <!-- 所属公司 -->
  186. <div class="layui-input-block">
  187. <p class="">所属公司:</p>
  188. <select name="company" lay-verify="required" id="selectIdA" class="iptScreen">
  189. <option value="" selected>全部</option>
  190. <option value="15">云飞</option>
  191. <option value="8">新普惠</option>
  192. </select>
  193. <div class="input-group-btnA">
  194. <button type="button" id="searchBtnB" class="btn btn-default no-border btn-sm">
  195. <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
  196. </button>
  197. </div>
  198. </div>
  199. {% endif %}
  200. <div id="firstpane" class="menu_list">
  201. <p class="menu_head current" id="area_322">设备列表</p>
  202. <div class="menu_body">
  203. <!-- <a href="javascript:;" title="设备15112501" class="text-overflow" id="15112501" data-pid="322">设备15112501</a> -->
  204. </div>
  205. <div class="equipPage">
  206. <!-- <button class="btn btn-minier btn-yellow"><i class="fa fa-sort-up" aria-hidden="true"></i></button> -->
  207. <input type="button" class="btn btn-minier btn-yellow" onclick="gotofirstpage()" value="首页">
  208. <button class="btn btn-minier btn-yellow" id="jianPage"
  209. onclick="changePage('jian')">上一页</button>
  210. <span id="currentpage">1</span>页
  211. <button class="btn btn-minier btn-yellow" id="addPage"
  212. onclick="changePage('add')">下一页</button>
  213. <span id="totelpage">4</span>页
  214. </div>
  215. </div>
  216. </div>
  217. <!-- 右 -->
  218. <div class="col-xs-12 col-sm-9 col-md-10">
  219. <div class="echartsHint">
  220. <span>*</span>
  221. e代表通道
  222. </div>
  223. <div class="searchCover">
  224. 时间段搜索:
  225. <input type="text" id="timSelectBox" placeholder="请选择时间段 ">
  226. <input type="hidden" id="begin" name="begin">
  227. <input type="hidden" id="end" name="end">
  228. <button type="button" onclick="sub_filter()" class="btn btn-sm btn-primary">筛选</button>
  229. </div>
  230. <!-- 统计图 -->
  231. <div class="container-cartogram">
  232. <div class="echartsBox fl">
  233. <div class="hint"></div>
  234. <div class="fl" id="line-chart"></div>
  235. </div>
  236. </div>
  237. </div>
  238. </div>
  239. </div>
  240. <div>
  241. <div class="searchCover tablesearchCover">
  242. 时间段搜索:
  243. <input type="text" id="timSelectBox2" placeholder="请选择时间段 ">
  244. <input type="hidden" id="tableBegin" name="begin">
  245. <input type="hidden" id="tableEnd" name="end">
  246. <button type="button" onclick="table_filter()" class="btn btn-sm btn-primary">筛选</button>
  247. <button type="button" class="btn btn-success btn-sm" onclick="decideExport()">导出</button>
  248. </div>
  249. <table id="datatable" class="table table-striped table-hover">
  250. </table>
  251. <div class="fenpei-bottom">
  252. <div id="page" style="text-align: center;"></div>
  253. </div>
  254. <!-- 导出提示框 -->
  255. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  256. <div class="modal-dialog" role="document">
  257. <div class="modal-content">
  258. <div class="modal-header">
  259. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  260. <span aria-hidden="true">&times;</span>
  261. </button>
  262. <h4 class="modal-title" id="myModalLabel">导出信息</h4>
  263. </div>
  264. <div class="modal-body">
  265. <div class="row">
  266. <div class="col-xs-3 downTitle">文件名称:</div>
  267. <div class="col-xs-8 downContent" style=>
  268. <input type="text" id="filename" placeholder="请输入文件的名称" maxlength="15"
  269. class="col-xs-12">
  270. </div>
  271. <div class="col-xs-3 downTitle">下载类型:</div>
  272. <div class="col-xs-8 downContent">
  273. <select name="downtype" id="downtype" onchange="downtype(this)" class="col-xs-12">
  274. <option value="1">全部</option>
  275. <option value="2">时间段</option>
  276. </select>
  277. </div>
  278. <div class="col-xs-3 downTitle timeStage">时间段:</div>
  279. <div class="col-xs-8 downContent timeStage">
  280. <input type="text" id="timSelectBox3" autocomplete="off" placeholder="请选择时间段 "
  281. class="col-xs-12">
  282. <input type="hidden" id="downbegin" name="begin">
  283. <input type="hidden" id="downend" name="end">
  284. </div>
  285. </div>
  286. </div>
  287. <div class="modal-footer">
  288. <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
  289. <button type="button" class="btn btn-primary btn-sm" onclick="operation()">下载</button>
  290. </div>
  291. </div>
  292. </div>
  293. </div>
  294. </div>
  295. </div>
  296. <!-- loading -->
  297. <div id="loadingParent">
  298. <div id="loadCenter">
  299. <div class="skype-loader">
  300. <div class="dot">
  301. <div class="first"></div>
  302. </div>
  303. <div class="dot"></div>
  304. <div class="dot"></div>
  305. <div class="dot"></div>
  306. </div>
  307. Logging in...
  308. </div>
  309. </div>
  310. <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
  311. <script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
  312. <script src="{% static '/lib/layui/layui.all.js' %}"></script>
  313. <script src="{% static '/lib/js/echarts.min.js' %}"></script>
  314. <script type="text/javascript">
  315. $.ajaxSetup({
  316. data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
  317. });
  318. </script>
  319. <script>
  320. //默认加载设备列表
  321. getEquipList(1, '');
  322. // 搜索
  323. $('#searchBtn').on('click', function () {
  324. getEquipList(1, $('#searchImei').val())
  325. });
  326. $('#searchImei').on('keyup', function (event) {
  327. if (event.keyCode == 13) {
  328. getEquipList(1, $('#searchImei').val())
  329. }
  330. })
  331. function getEquipList(page, filter) {
  332. $.ajax({
  333. url: 'qxz_page',
  334. type: 'get',
  335. dataType: 'json',
  336. data: {
  337. page: page,
  338. f_id: filter
  339. },
  340. success: function (data) {
  341. if (data.nums) {
  342. var html = '';
  343. var msg = data.ids
  344. var pagecount = Math.ceil(data.nums / 10);
  345. for (var i = 0; i < msg.length; i++) {
  346. if (msg[i].equip_name) {
  347. var equip_name = '设备:' + msg[i].equip_name;
  348. } else {
  349. var equip_name = '设备:' + msg[i].equip_id;
  350. }
  351. html += '<a href="javascript:;" title="设备' + msg[i].equip_id + '" class="text-overflow" id="' + msg[i].equip_id + '" data-pid="322">设备' + equip_name + '</a>'
  352. }
  353. $('#firstpane .menu_body').html(html);
  354. $('.equipPage').show();
  355. $('#totelpage').html(pagecount)
  356. // 菜单栏
  357. $("#firstpane .menu_body:eq(0) a:eq(0)").addClass('menu-active');
  358. $(".menu_body a").click(function () {
  359. $(".menu_head").removeClass("currAstive");
  360. $(".menu_body a").removeClass("menu-active");
  361. $(this).addClass("menu-active");
  362. $(this).parent().prev().addClass('currAstive');
  363. $('#begin').val('');
  364. $('#tableBegin').val('');
  365. $('#tableEnd').val('');
  366. $('#end').val('');
  367. $('#timSelectBox').val('');
  368. $('#timSelectBox2').val('');
  369. var facId = $(this).attr("id");
  370. if (facId && facId != null && facId != "") {
  371. loadCharts(facId);
  372. loadTable(facId);
  373. }
  374. });
  375. loadCharts(msg[0].equip_id);
  376. loadTable(msg[0].equip_id);
  377. } else {
  378. $('.equipPage').hide();
  379. var html = '<a href="javascript:;" class="text-overflow nulldata" data-pid="322">暂未设备</a>'
  380. $('#firstpane .menu_body').html(html);
  381. echartFun([], '');
  382. Fill_null_Table('datatable');
  383. layui.use('laypage', function () {
  384. var laypage = layui.laypage;
  385. laypage.render({
  386. elem: 'page' //注意,这里的 test1 是 ID,不用加 # 号
  387. // , count: 30
  388. , count: 0
  389. , theme: '#428BCA'
  390. , layout: []
  391. , jump: function (obj, first) {
  392. }
  393. });
  394. });
  395. }
  396. },
  397. error: function (type) {
  398. }
  399. })
  400. }
  401. // 日历
  402. layui.use('laydate', function () {
  403. var laydate = layui.laydate;
  404. //执行一个laydate实例
  405. laydate.render({
  406. elem: '#timSelectBox' //指定元素
  407. , range: true
  408. , done: function (value, date) {
  409. var dateArray = value.split(' - ')
  410. $('#begin').val(dateArray[0])
  411. $('#end').val(dateArray[1])
  412. }
  413. });
  414. //执行一个laydate实例
  415. laydate.render({
  416. elem: '#timSelectBox2' //指定元素
  417. , range: true
  418. , done: function (value, date) {
  419. var dateArray = value.split(' - ')
  420. $('#tableBegin').val(dateArray[0])
  421. $('#tableEnd').val(dateArray[1])
  422. }
  423. });
  424. //执行一个laydate实例
  425. var _layDateMark = (new Date()).getTime();
  426. $('#timSelectBox3').attr('lay-key', '33' + _layDateMark);
  427. laydate.render({
  428. elem: '#timSelectBox3' //指定元素
  429. , range: true
  430. , done: function (value, date) {
  431. var dateArray = value.split(' - ')
  432. $('#downbegin').val(dateArray[0])
  433. $('#downend').val(dateArray[1])
  434. }
  435. });
  436. });
  437. //统计图
  438. function loadCharts(facId) {
  439. $.ajax({
  440. url: 'qxz_report_detail_chart',
  441. type: 'post',
  442. dataType: 'json',
  443. data: {
  444. id: facId,
  445. begin: $('#begin').val(),
  446. end: $('#end').val(),
  447. },
  448. beforeSend: function () {
  449. loadFlage = layer.load();
  450. },
  451. complete: function () {
  452. layer.close(loadFlage);
  453. },
  454. success: function (data) {
  455. echartFun(data.dat, facId)
  456. },
  457. error: function (type) {
  458. }
  459. })
  460. }
  461. //数据表格
  462. // function loadTable(facId) {
  463. // $.ajax({
  464. // url: 'qxz_report_detail',
  465. // type: 'get',
  466. // dataType: 'json',
  467. // data: {
  468. // id: facId,
  469. // // begin: $('#begin').val(),
  470. // // end: $('#end').val(),
  471. // },
  472. // success: function (data) {
  473. // console.log(data)
  474. // var category = ['采集时间'];
  475. // if(data.length){
  476. // Fill_Table('datatable', data)
  477. // // for(var i = 0;i<data[0].unit.length;i++){
  478. // // category.push(data[0].unit[i][1])
  479. // // if(i == data[0].unit.length-1){
  480. // // console.log(category)
  481. // // }
  482. // // }
  483. // }
  484. // },
  485. // error: function (type) {
  486. // }
  487. // })
  488. // }
  489. // 设备列表
  490. var waterTempId = [16062009, 16062010, 16062011, 16062012, 16062013, 16062014, 16062015, 16062016, 16062017, 16062018, 16062019, 16062020, 16062021, 16062022, 16062023, 16062024, 16062025];
  491. var currpage = 1;
  492. function changePage(symbol) {
  493. var totelpage = Number($('#totelpage').html());
  494. if (symbol == 'add') {
  495. if (currpage < totelpage) {
  496. currpage++;
  497. $('#currentpage').html(currpage);
  498. $('addPage').attr('disable', 'false')
  499. } else {
  500. $('addPage').attr('disable', 'true')
  501. return false;
  502. }
  503. } else {
  504. if (currpage > 1) {
  505. currpage--;
  506. $('#currentpage').html(currpage);
  507. $('jianPage').attr('disable', 'false')
  508. } else {
  509. $('jianPage').attr('disable', 'true')
  510. return false;
  511. }
  512. }
  513. getEquipList(currpage, $('#searchImei').val())
  514. }
  515. // 首页
  516. function gotofirstpage() {
  517. currpage = 1;
  518. $('#currentpage').html(1);
  519. getEquipList(1, $('#searchImei').val())
  520. }
  521. // 折线图搜索
  522. function sub_filter() {
  523. var currId = $(".menu_body .menu-active").attr("id");
  524. loadCharts(currId)
  525. // console.log(currId)
  526. }
  527. // 表格搜索
  528. function table_filter() {
  529. var currId = $(".menu_body .menu-active").attr("id");
  530. loadTable(currId)
  531. }
  532. // 折线图处理
  533. function echartFun(dat, facId) {
  534. $('#line-chart').prev().html('').css('z-index', 0);
  535. option.series = [];
  536. option.xAxis.data = [];
  537. lineChart.setOption(option, true);
  538. if (dat.length) {
  539. var upTime = []; //
  540. var kindCount = dat[0].e_len;
  541. var seriesDat = [];
  542. var legend = []; //几条折线
  543. for (var i = 0; i < dat.length; i++) {
  544. upTime.unshift(dat[i].upl_time);
  545. for (var j = 0; j < dat[i].unit.length; j++) {
  546. if (i == 0) {
  547. if (dat[0].unit[j][4] == '106' && (waterTempId.indexOf(parseInt(facId)) != -1)) {
  548. var elementName = '水温';
  549. } else {
  550. var elementName = dat[0].unit[j][1];
  551. }
  552. legend.push(dat[0].unit[j][3] + elementName);
  553. }
  554. if (seriesDat[j]) {
  555. seriesDat[j].unshift(parseFloat(dat[i].unit[j][0]));
  556. } else {
  557. var arr = [];
  558. arr.unshift(parseFloat(dat[i].unit[j][0]));
  559. seriesDat[j] = arr;
  560. }
  561. }
  562. if (i == dat.length - 1) {
  563. // console.log(seriesDat)
  564. var legendData = { data: legend }
  565. option.legend = legendData;
  566. for (var count = 0; count < kindCount; count++) {
  567. var data = {
  568. name: legend[count],
  569. type: 'line',
  570. data: seriesDat[count]
  571. }
  572. option.series.push(data);
  573. }
  574. option.xAxis.data = upTime;
  575. setTimeout(function () {
  576. lineChart.setOption(option, true);
  577. })
  578. }
  579. }
  580. } else {
  581. $('#line-chart').prev().html('暂无数据').css('z-index', 99);
  582. option.series = [];
  583. option.xAxis.data = [];
  584. lineChart.setOption(option, true);
  585. }
  586. }
  587. // 滚动条
  588. scrollBar()
  589. function scrollBar() {
  590. // if ($('.content').height() > 750) {
  591. $('#iframe-main', parent.document).css('height', $('.content').height() + 20)
  592. // } else {
  593. // $('#iframe-main', parent.document).css('height', '750px')
  594. // }
  595. }
  596. window.onresize = function () {
  597. lineChart.setOption(option, true);
  598. scrollBar()
  599. }
  600. // 统计图
  601. var lineChart = echarts.init(document.getElementById('line-chart'));
  602. var option = {
  603. title: {
  604. text: '',
  605. textStyle: {
  606. color: '#029eef'
  607. }
  608. },
  609. legend: {
  610. data: []
  611. },
  612. tooltip: {
  613. trigger: 'axis',
  614. },
  615. xAxis: {
  616. data: []
  617. },
  618. yAxis: {
  619. axisLine: { show: true },
  620. },
  621. toolbox: {
  622. left: 'center',
  623. },
  624. dataZoom: [{
  625. // startValue: '2014-06-01'
  626. }, {
  627. type: 'inside'
  628. }],
  629. grid: {
  630. left: '3%',
  631. right: '4%',
  632. bottom: '6%',
  633. containLabel: true
  634. },
  635. series: []
  636. }
  637. setTimeout(function () {
  638. lineChart.setOption(option, true);
  639. })
  640. // 填充表格
  641. function Fill_Table(table_id, data, facId) {
  642. var html = "";
  643. for (var i = 0; i < data.length; i++) {
  644. if (i == 0) {
  645. html += "<thead><tr>";
  646. html += "<th>采集时间</th>";
  647. for (var j = 0; j < data[0].unit.length; j++) {
  648. if (data[0].unit[j][1] == '土壤温度' && (waterTempId.indexOf(parseInt(facId)) != -1)) {
  649. var elementName = '水温';
  650. } else {
  651. var elementName = data[0].unit[j][1];
  652. }
  653. html += "<th title=\'通道" + (data[0].unit[j][3]).substr(1, data[0].unit[j][3].length) + "\'>" + elementName + "(" + data[0].unit[j][2] + ")</th>";
  654. }
  655. html += "</tr></thead>";
  656. }
  657. html += "<tr>";
  658. html += "<td>" + data[i].upl_time + "</td>";
  659. for (var z = 0; z < data[i].unit.length; z++) {
  660. html += "<td>" + data[i].unit[z][0] + "</td>";
  661. }
  662. html += "</tr>";
  663. if (i == data.length - 1) {
  664. $(document.getElementById(table_id)).html(html);
  665. scrollBar()
  666. }
  667. }
  668. }
  669. function Fill_null_Table(table_id) {
  670. var html = "";
  671. html += "<thead><tr><th>采集时间</th><th>风速</th><th>温度</th></tr></thead>";
  672. html += "<tr><td colspan=3 style='line-height:100px'>暂无数据</td></tr>";
  673. $(document.getElementById(table_id)).html(html);
  674. scrollBar()
  675. }
  676. // 分页初始化
  677. function loadTable(facId) {
  678. $.ajax({
  679. url: 'qxz_report_detail?page=1&id=' + facId,
  680. type: 'get',
  681. data: {
  682. begin: $('#tableBegin').val(),
  683. end: $('#tableEnd').val(),
  684. },
  685. dataType: 'json',
  686. beforeSend: function () {
  687. loadFlage = layer.load();
  688. },
  689. complete: function () {
  690. layer.close(loadFlage);
  691. },
  692. success: function (data) {
  693. $(document.getElementById('datatable')).empty();
  694. if (data.dat.length) {
  695. Fill_Table('datatable', data.dat, facId)
  696. layui.use('laypage', function () {
  697. var laypage = layui.laypage;
  698. laypage.render({
  699. elem: 'page' //注意,这里的 test1 是 ID,不用加 # 号
  700. // , count: 30
  701. , count: data.nums
  702. , theme: '#428BCA'
  703. , layout: ['prev', 'page', 'next', 'skip']
  704. , jump: function (obj, first) {
  705. //首次不执行
  706. if (!first) {
  707. $.ajax({
  708. url: 'qxz_report_detail?page=' + obj.curr + '&id=' + facId,
  709. type: 'get',
  710. data: {
  711. begin: $('#tableBegin').val(),
  712. end: $('#tableEnd').val(),
  713. },
  714. dataType: 'json',
  715. success: function (data) {
  716. $(document.getElementById('datatable')).empty();
  717. if (data.dat.length) {
  718. Fill_Table('datatable', data.dat, facId)
  719. }
  720. }
  721. })
  722. }
  723. }
  724. });
  725. });
  726. } else {
  727. Fill_null_Table('datatable');
  728. layui.use('laypage', function () {
  729. var laypage = layui.laypage;
  730. laypage.render({
  731. elem: 'page' //注意,这里的 test1 是 ID,不用加 # 号
  732. // , count: 30
  733. , count: 0
  734. , theme: '#428BCA'
  735. , layout: []
  736. , jump: function (obj, first) {
  737. }
  738. });
  739. });
  740. }
  741. }
  742. })
  743. }
  744. // 导出
  745. function decideExport() {
  746. $('#myModal').modal('toggle')
  747. }
  748. function downtype(obj) {
  749. if ($(obj).val() == 2) {
  750. $('.timeStage').show();
  751. } else {
  752. $('.timeStage').hide();
  753. $('#downbegin').val('');
  754. $('#downend').val('');
  755. $('#downtimSelectBox').val('');
  756. }
  757. }
  758. //导出
  759. function operation() {
  760. if (!$('#filename').val()) {
  761. // layer.msg("请填写文件名!", { time: 2000 });
  762. layer.tips('请填写文件名!', '#filename');
  763. return false;
  764. }
  765. if ($('#downtype').val() == 2) {
  766. if (!($('#downbegin').val() && $('#downbegin').val())) {
  767. layer.tips('请选择时间段!', '#timSelectBox3');
  768. return false;
  769. }
  770. }
  771. var currId = $(".menu_body .menu-active").attr("id");
  772. window.location.href = 'qxz_data_export?id=' + currId + '&begin=' + $('#downbegin').val() + '&end=' + $('#downend').val() + '&filename=' + $('#filename').val()
  773. }
  774. </script>
  775. </body>
  776. </html>