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. 第
  211. <span id="currentpage">1</span>页
  212. <button class="btn btn-minier btn-yellow" id="addPage"
  213. onclick="changePage('add')">下一页</button>
  214. 共
  215. <span id="totelpage">4</span>页
  216. </div>
  217. </div>
  218. </div>
  219. <!-- 右 -->
  220. <div class="col-xs-12 col-sm-9 col-md-10">
  221. <div class="echartsHint">
  222. <span>*</span>
  223. e代表通道
  224. </div>
  225. <div class="searchCover">
  226. 时间段搜索:
  227. <input type="text" id="timSelectBox" placeholder="请选择时间段 ">
  228. <input type="hidden" id="begin" name="begin">
  229. <input type="hidden" id="end" name="end">
  230. <button type="button" onclick="sub_filter()" class="btn btn-sm btn-primary">筛选</button>
  231. </div>
  232. <!-- 统计图 -->
  233. <div class="container-cartogram">
  234. <div class="echartsBox fl">
  235. <div class="hint"></div>
  236. <div class="fl" id="line-chart"></div>
  237. </div>
  238. </div>
  239. </div>
  240. </div>
  241. </div>
  242. <div>
  243. <div class="searchCover tablesearchCover">
  244. 时间段搜索:
  245. <input type="text" id="timSelectBox2" placeholder="请选择时间段 ">
  246. <input type="hidden" id="tableBegin" name="begin">
  247. <input type="hidden" id="tableEnd" name="end">
  248. <button type="button" onclick="table_filter()" class="btn btn-sm btn-primary">筛选</button>
  249. <button type="button" class="btn btn-success btn-sm" onclick="decideExport()">导出</button>
  250. </div>
  251. <table id="datatable" class="table table-striped table-hover">
  252. </table>
  253. <div class="fenpei-bottom">
  254. <div id="page" style="text-align: center;"></div>
  255. </div>
  256. <!-- 导出提示框 -->
  257. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  258. <div class="modal-dialog" role="document">
  259. <div class="modal-content">
  260. <div class="modal-header">
  261. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  262. <span aria-hidden="true">&times;</span>
  263. </button>
  264. <h4 class="modal-title" id="myModalLabel">导出信息</h4>
  265. </div>
  266. <div class="modal-body">
  267. <div class="row">
  268. <div class="col-xs-3 downTitle">文件名称:</div>
  269. <div class="col-xs-8 downContent" style=>
  270. <input type="text" id="filename" placeholder="请输入文件的名称" maxlength="15"
  271. class="col-xs-12">
  272. </div>
  273. <div class="col-xs-3 downTitle">下载类型:</div>
  274. <div class="col-xs-8 downContent">
  275. <select name="downtype" id="downtype" onchange="downtype(this)" class="col-xs-12">
  276. <option value="1">全部</option>
  277. <option value="2">时间段</option>
  278. </select>
  279. </div>
  280. <div class="col-xs-3 downTitle timeStage">时间段:</div>
  281. <div class="col-xs-8 downContent timeStage">
  282. <input type="text" id="timSelectBox3" autocomplete="off" placeholder="请选择时间段 "
  283. class="col-xs-12">
  284. <input type="hidden" id="downbegin" name="begin">
  285. <input type="hidden" id="downend" name="end">
  286. </div>
  287. </div>
  288. </div>
  289. <div class="modal-footer">
  290. <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
  291. <button type="button" class="btn btn-primary btn-sm" onclick="operation()">下载</button>
  292. </div>
  293. </div>
  294. </div>
  295. </div>
  296. </div>
  297. </div>
  298. <!-- loading -->
  299. <div id="loadingParent">
  300. <div id="loadCenter">
  301. <div class="skype-loader">
  302. <div class="dot">
  303. <div class="first"></div>
  304. </div>
  305. <div class="dot"></div>
  306. <div class="dot"></div>
  307. <div class="dot"></div>
  308. </div>
  309. Logging in...
  310. </div>
  311. </div>
  312. <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
  313. <script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
  314. <script src="{% static '/lib/layui/layui.all.js' %}"></script>
  315. <script src="{% static '/lib/js/echarts.min.js' %}"></script>
  316. <script type="text/javascript">
  317. $.ajaxSetup({
  318. data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
  319. });
  320. </script>
  321. <script>
  322. //默认加载设备列表
  323. getEquipList(1, '');
  324. // 搜索
  325. $('#searchBtn').on('click', function () {
  326. getEquipList(1, $('#searchImei').val())
  327. });
  328. $('#searchImei').on('keyup', function (event) {
  329. if (event.keyCode == 13) {
  330. getEquipList(1, $('#searchImei').val())
  331. }
  332. })
  333. function getEquipList(page, filter) {
  334. $.ajax({
  335. url: 'qxz_page',
  336. type: 'get',
  337. dataType: 'json',
  338. data: {
  339. page: page,
  340. f_id: filter
  341. },
  342. success: function (data) {
  343. if (data.nums) {
  344. var html = '';
  345. var msg = data.ids
  346. var pagecount = Math.ceil(data.nums / 10);
  347. for (var i = 0; i < msg.length; i++) {
  348. if (msg[i].equip_name) {
  349. var equip_name = '设备:' + msg[i].equip_name;
  350. } else {
  351. var equip_name = '设备:' + msg[i].equip_id;
  352. }
  353. html += '<a href="javascript:;" title="设备' + msg[i].equip_id + '" class="text-overflow" id="' + msg[i].equip_id + '" data-pid="322">设备' + equip_name + '</a>'
  354. }
  355. $('#firstpane .menu_body').html(html);
  356. $('.equipPage').show();
  357. $('#totelpage').html(pagecount)
  358. // 菜单栏
  359. $("#firstpane .menu_body:eq(0) a:eq(0)").addClass('menu-active');
  360. $(".menu_body a").click(function () {
  361. $(".menu_head").removeClass("currAstive");
  362. $(".menu_body a").removeClass("menu-active");
  363. $(this).addClass("menu-active");
  364. $(this).parent().prev().addClass('currAstive');
  365. $('#begin').val('');
  366. $('#tableBegin').val('');
  367. $('#tableEnd').val('');
  368. $('#end').val('');
  369. $('#timSelectBox').val('');
  370. $('#timSelectBox2').val('');
  371. var facId = $(this).attr("id");
  372. if (facId && facId != null && facId != "") {
  373. loadCharts(facId);
  374. loadTable(facId);
  375. }
  376. });
  377. loadCharts(msg[0].equip_id);
  378. loadTable(msg[0].equip_id);
  379. } else {
  380. $('.equipPage').hide();
  381. var html = '<a href="javascript:;" class="text-overflow nulldata" data-pid="322">暂未设备</a>'
  382. $('#firstpane .menu_body').html(html);
  383. echartFun([], '');
  384. Fill_null_Table('datatable');
  385. layui.use('laypage', function () {
  386. var laypage = layui.laypage;
  387. laypage.render({
  388. elem: 'page' //注意,这里的 test1 是 ID,不用加 # 号
  389. // , count: 30
  390. , count: 0
  391. , theme: '#428BCA'
  392. , layout: []
  393. , jump: function (obj, first) {
  394. }
  395. });
  396. });
  397. }
  398. },
  399. error: function (type) {
  400. }
  401. })
  402. }
  403. // 日历
  404. layui.use('laydate', function () {
  405. var laydate = layui.laydate;
  406. //执行一个laydate实例
  407. laydate.render({
  408. elem: '#timSelectBox' //指定元素
  409. , range: true
  410. , done: function (value, date) {
  411. var dateArray = value.split(' - ')
  412. $('#begin').val(dateArray[0])
  413. $('#end').val(dateArray[1])
  414. }
  415. });
  416. //执行一个laydate实例
  417. laydate.render({
  418. elem: '#timSelectBox2' //指定元素
  419. , range: true
  420. , done: function (value, date) {
  421. var dateArray = value.split(' - ')
  422. $('#tableBegin').val(dateArray[0])
  423. $('#tableEnd').val(dateArray[1])
  424. }
  425. });
  426. //执行一个laydate实例
  427. var _layDateMark = (new Date()).getTime();
  428. $('#timSelectBox3').attr('lay-key', '33' + _layDateMark);
  429. laydate.render({
  430. elem: '#timSelectBox3' //指定元素
  431. , range: true
  432. , done: function (value, date) {
  433. var dateArray = value.split(' - ')
  434. $('#downbegin').val(dateArray[0])
  435. $('#downend').val(dateArray[1])
  436. }
  437. });
  438. });
  439. //统计图
  440. function loadCharts(facId) {
  441. $.ajax({
  442. url: 'qxz_report_detail_chart',
  443. type: 'post',
  444. dataType: 'json',
  445. data: {
  446. id: facId,
  447. begin: $('#begin').val(),
  448. end: $('#end').val(),
  449. },
  450. beforeSend: function () {
  451. loadFlage = layer.load();
  452. },
  453. complete: function () {
  454. layer.close(loadFlage);
  455. },
  456. success: function (data) {
  457. echartFun(data.dat, facId)
  458. },
  459. error: function (type) {
  460. }
  461. })
  462. }
  463. //数据表格
  464. // function loadTable(facId) {
  465. // $.ajax({
  466. // url: 'qxz_report_detail',
  467. // type: 'get',
  468. // dataType: 'json',
  469. // data: {
  470. // id: facId,
  471. // // begin: $('#begin').val(),
  472. // // end: $('#end').val(),
  473. // },
  474. // success: function (data) {
  475. // console.log(data)
  476. // var category = ['采集时间'];
  477. // if(data.length){
  478. // Fill_Table('datatable', data)
  479. // // for(var i = 0;i<data[0].unit.length;i++){
  480. // // category.push(data[0].unit[i][1])
  481. // // if(i == data[0].unit.length-1){
  482. // // console.log(category)
  483. // // }
  484. // // }
  485. // }
  486. // },
  487. // error: function (type) {
  488. // }
  489. // })
  490. // }
  491. // 设备列表
  492. var waterTempId = [16062009, 16062010, 16062011, 16062012, 16062013, 16062014, 16062015, 16062016, 16062017, 16062018, 16062019, 16062020, 16062021, 16062022, 16062023, 16062024, 16062025];
  493. var currpage = 1;
  494. function changePage(symbol) {
  495. var totelpage = Number($('#totelpage').html());
  496. if (symbol == 'add') {
  497. if (currpage < totelpage) {
  498. currpage++;
  499. $('#currentpage').html(currpage);
  500. $('addPage').attr('disable', 'false')
  501. } else {
  502. $('addPage').attr('disable', 'true')
  503. return false;
  504. }
  505. } else {
  506. if (currpage > 1) {
  507. currpage--;
  508. $('#currentpage').html(currpage);
  509. $('jianPage').attr('disable', 'false')
  510. } else {
  511. $('jianPage').attr('disable', 'true')
  512. return false;
  513. }
  514. }
  515. getEquipList(currpage, $('#searchImei').val())
  516. }
  517. // 首页
  518. function gotofirstpage() {
  519. currpage = 1;
  520. $('#currentpage').html(1);
  521. getEquipList(1, $('#searchImei').val())
  522. }
  523. // 折线图搜索
  524. function sub_filter() {
  525. var currId = $(".menu_body .menu-active").attr("id");
  526. loadCharts(currId)
  527. // console.log(currId)
  528. }
  529. // 表格搜索
  530. function table_filter() {
  531. var currId = $(".menu_body .menu-active").attr("id");
  532. loadTable(currId)
  533. }
  534. // 折线图处理
  535. function echartFun(dat, facId) {
  536. $('#line-chart').prev().html('').css('z-index', 0);
  537. option.series = [];
  538. option.xAxis.data = [];
  539. lineChart.setOption(option, true);
  540. if (dat.length) {
  541. var upTime = []; //
  542. var kindCount = dat[0].e_len;
  543. var seriesDat = [];
  544. var legend = []; //几条折线
  545. for (var i = 0; i < dat.length; i++) {
  546. upTime.unshift(dat[i].upl_time);
  547. for (var j = 0; j < dat[i].unit.length; j++) {
  548. if (i == 0) {
  549. if (dat[0].unit[j][4] == '106' && (waterTempId.indexOf(parseInt(facId)) != -1)) {
  550. var elementName = '水温';
  551. } else {
  552. var elementName = dat[0].unit[j][1];
  553. }
  554. legend.push(dat[0].unit[j][3] + elementName);
  555. }
  556. if (seriesDat[j]) {
  557. seriesDat[j].unshift(parseFloat(dat[i].unit[j][0]));
  558. } else {
  559. var arr = [];
  560. arr.unshift(parseFloat(dat[i].unit[j][0]));
  561. seriesDat[j] = arr;
  562. }
  563. }
  564. if (i == dat.length - 1) {
  565. // console.log(seriesDat)
  566. var legendData = { data: legend }
  567. option.legend = legendData;
  568. for (var count = 0; count < kindCount; count++) {
  569. var data = {
  570. name: legend[count],
  571. type: 'line',
  572. data: seriesDat[count]
  573. }
  574. option.series.push(data);
  575. }
  576. option.xAxis.data = upTime;
  577. setTimeout(function () {
  578. lineChart.setOption(option, true);
  579. })
  580. }
  581. }
  582. } else {
  583. $('#line-chart').prev().html('暂无数据').css('z-index', 99);
  584. option.series = [];
  585. option.xAxis.data = [];
  586. lineChart.setOption(option, true);
  587. }
  588. }
  589. // 滚动条
  590. scrollBar()
  591. function scrollBar() {
  592. // if ($('.content').height() > 750) {
  593. $('#iframe-main', parent.document).css('height', $('.content').height() + 20)
  594. // } else {
  595. // $('#iframe-main', parent.document).css('height', '750px')
  596. // }
  597. }
  598. window.onresize = function () {
  599. lineChart.setOption(option, true);
  600. scrollBar()
  601. }
  602. // 统计图
  603. var lineChart = echarts.init(document.getElementById('line-chart'));
  604. var option = {
  605. title: {
  606. text: '',
  607. textStyle: {
  608. color: '#029eef'
  609. }
  610. },
  611. legend: {
  612. data: []
  613. },
  614. tooltip: {
  615. trigger: 'axis',
  616. },
  617. xAxis: {
  618. data: []
  619. },
  620. yAxis: {
  621. axisLine: { show: true },
  622. },
  623. toolbox: {
  624. left: 'center',
  625. },
  626. dataZoom: [{
  627. // startValue: '2014-06-01'
  628. }, {
  629. type: 'inside'
  630. }],
  631. grid: {
  632. left: '3%',
  633. right: '4%',
  634. bottom: '6%',
  635. containLabel: true
  636. },
  637. series: []
  638. }
  639. setTimeout(function () {
  640. lineChart.setOption(option, true);
  641. })
  642. // 填充表格
  643. function Fill_Table(table_id, data, facId) {
  644. var html = "";
  645. for (var i = 0; i < data.length; i++) {
  646. if (i == 0) {
  647. html += "<thead><tr>";
  648. html += "<th>采集时间</th>";
  649. for (var j = 0; j < data[0].unit.length; j++) {
  650. if (data[0].unit[j][1] == '土壤温度' && (waterTempId.indexOf(parseInt(facId)) != -1)) {
  651. var elementName = '水温';
  652. } else {
  653. var elementName = data[0].unit[j][1];
  654. }
  655. html += "<th title=\'通道" + (data[0].unit[j][3]).substr(1, data[0].unit[j][3].length) + "\'>" + elementName + "(" + data[0].unit[j][2] + ")</th>";
  656. }
  657. html += "</tr></thead>";
  658. }
  659. html += "<tr>";
  660. html += "<td>" + data[i].upl_time + "</td>";
  661. for (var z = 0; z < data[i].unit.length; z++) {
  662. html += "<td>" + data[i].unit[z][0] + "</td>";
  663. }
  664. html += "</tr>";
  665. if (i == data.length - 1) {
  666. $(document.getElementById(table_id)).html(html);
  667. scrollBar()
  668. }
  669. }
  670. }
  671. function Fill_null_Table(table_id) {
  672. var html = "";
  673. html += "<thead><tr><th>采集时间</th><th>风速</th><th>温度</th></tr></thead>";
  674. html += "<tr><td colspan=3 style='line-height:100px'>暂无数据</td></tr>";
  675. $(document.getElementById(table_id)).html(html);
  676. scrollBar()
  677. }
  678. // 分页初始化
  679. function loadTable(facId) {
  680. $.ajax({
  681. url: 'qxz_report_detail?page=1&id=' + facId,
  682. type: 'get',
  683. data: {
  684. begin: $('#tableBegin').val(),
  685. end: $('#tableEnd').val(),
  686. },
  687. dataType: 'json',
  688. beforeSend: function () {
  689. loadFlage = layer.load();
  690. },
  691. complete: function () {
  692. layer.close(loadFlage);
  693. },
  694. success: function (data) {
  695. $(document.getElementById('datatable')).empty();
  696. if (data.dat.length) {
  697. Fill_Table('datatable', data.dat, facId)
  698. layui.use('laypage', function () {
  699. var laypage = layui.laypage;
  700. laypage.render({
  701. elem: 'page' //注意,这里的 test1 是 ID,不用加 # 号
  702. // , count: 30
  703. , count: data.nums
  704. , theme: '#428BCA'
  705. , layout: ['prev', 'page', 'next', 'skip']
  706. , jump: function (obj, first) {
  707. //首次不执行
  708. if (!first) {
  709. $.ajax({
  710. url: 'qxz_report_detail?page=' + obj.curr + '&id=' + facId,
  711. type: 'get',
  712. data: {
  713. begin: $('#tableBegin').val(),
  714. end: $('#tableEnd').val(),
  715. },
  716. dataType: 'json',
  717. success: function (data) {
  718. $(document.getElementById('datatable')).empty();
  719. if (data.dat.length) {
  720. Fill_Table('datatable', data.dat, facId)
  721. }
  722. }
  723. })
  724. }
  725. }
  726. });
  727. });
  728. } else {
  729. Fill_null_Table('datatable');
  730. layui.use('laypage', function () {
  731. var laypage = layui.laypage;
  732. laypage.render({
  733. elem: 'page' //注意,这里的 test1 是 ID,不用加 # 号
  734. // , count: 30
  735. , count: 0
  736. , theme: '#428BCA'
  737. , layout: []
  738. , jump: function (obj, first) {
  739. }
  740. });
  741. });
  742. }
  743. }
  744. })
  745. }
  746. // 导出
  747. function decideExport() {
  748. $('#myModal').modal('toggle')
  749. }
  750. function downtype(obj) {
  751. if ($(obj).val() == 2) {
  752. $('.timeStage').show();
  753. } else {
  754. $('.timeStage').hide();
  755. $('#downbegin').val('');
  756. $('#downend').val('');
  757. $('#downtimSelectBox').val('');
  758. }
  759. }
  760. //导出
  761. function operation() {
  762. if (!$('#filename').val()) {
  763. // layer.msg("请填写文件名!", { time: 2000 });
  764. layer.tips('请填写文件名!', '#filename');
  765. return false;
  766. }
  767. if ($('#downtype').val() == 2) {
  768. if (!($('#downbegin').val() && $('#downbegin').val())) {
  769. layer.tips('请选择时间段!', '#timSelectBox3');
  770. return false;
  771. }
  772. }
  773. var currId = $(".menu_body .menu-active").attr("id");
  774. window.location.href = 'qxz_data_export?id=' + currId + '&begin=' + $('#downbegin').val() + '&end=' + $('#downend').val() + '&filename=' + $('#filename').val()
  775. }
  776. </script>
  777. </body>
  778. </html>