qxz_report.html 22 KB

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