sugar_tccd_data.html 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789
  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/layui/css/layui.css' %}">
  10. <style type="text/css">
  11. body {
  12. overflow: hidden;
  13. background: #fff;
  14. }
  15. /* 返回 */
  16. .headerPlace {
  17. font-size: 22px;
  18. color: #418fbb;
  19. cursor: pointer;
  20. }
  21. .headerPlace img {
  22. vertical-align: middle;
  23. margin-right: 10px;
  24. margin-top: -4px;
  25. }
  26. .userinfo .fa {
  27. font-size: 18px;
  28. color: #26b3ff;
  29. margin: 0px 5px;
  30. }
  31. /* 右侧操作按钮 */
  32. .refresh {
  33. text-align: right;
  34. }
  35. .echartsParent {
  36. display: flex;
  37. justify-content: space-around;
  38. }
  39. .echartsParent>div {
  40. width: 50%;
  41. height: 400px;
  42. position: relative;
  43. }
  44. button.btn.btn-sm.btn-white.active {
  45. background: #428bca !important;
  46. color: #fff !important;
  47. }
  48. .echartsParent .echartsBox .hint {
  49. width: 100%;
  50. height: 100%;
  51. position: absolute;
  52. text-align: center;
  53. line-height: 400px;
  54. font-size: 22px;
  55. color: #8a8a8a;
  56. }
  57. .downTitle {
  58. text-align: right;
  59. line-height: 27px;
  60. padding-left: 0;
  61. margin-bottom: 5px;
  62. }
  63. .downContent {
  64. padding-left: 0;
  65. margin-bottom: 5px;
  66. }
  67. .timeStage {
  68. display: none;
  69. }
  70. </style>
  71. </head>
  72. <body>
  73. <div class="content">
  74. <div class="page-header">
  75. <span class="headerPlace" onclick="back()">
  76. <img src="{% static '/img/gobackIcon.png' %}" alt="">返回
  77. </span>
  78. </div>
  79. <div class="userinfocover">
  80. <div class="row ">
  81. <div class="col-xs-8 userinfo">
  82. <i class="fa fa-user-o" aria-hidden="true"></i>
  83. <!-- 设备编号:
  84. <span class="userinfoTitle" id="devNum"></span> -->
  85. 设备ID:
  86. <span class="userinfoTitle" id="equip_id"></span>
  87. <!-- 设备名称:
  88. <span class="userinfoTitle" id="equip_name"></span> -->
  89. <!-- 上报时间:
  90. <span class="userinfoTitle" id="upl_time"></span>
  91. 位置:
  92. <span class="userinfoTitle" id="curr_area"></span> -->
  93. </div>
  94. <div class="col-xs-4 refresh">
  95. <!-- <button class="btn btn-sm btn-info" onclick='sendexamineSIM()'>
  96. <i class="ace-icon fa fa-search align-top bigger-125 icon-on-right"></i>
  97. SIM卡查询
  98. </button> -->
  99. <!-- <button type="button" class="btn btn-sm btn-warning" id="operationBtn" >拍照</button> -->
  100. <!-- <button type="button" class="btn btn-sm btn-success" onclick="reloadPage()">刷新</button> -->
  101. </div>
  102. </div>
  103. <br />
  104. <div class="searchCover">
  105. 统计图时间段搜索:
  106. <button type="button" onclick="getCharts(this,1)" class="btn btn-sm btn-white">当天</button>
  107. <button type="button" onclick="getCharts(this,2)" class="btn btn-sm btn-white active">本月</button>
  108. <button type="button" onclick="getCharts(this,3)" class="btn btn-sm btn-white">半年</button>
  109. <button type="button" onclick="getCharts(this,4)" class="btn btn-sm btn-white">本年</button>
  110. <!-- <input type="text" id="timSelectBox" autocomplete="off" placeholder="请选择时间段 "> -->
  111. <input type="hidden" id="begin" name="begin">
  112. <input type="hidden" id="end" name="end">
  113. <!-- <button type="button" onclick="dtl_sub_filter()" class="btn btn-sm btn-primary">筛选</button> -->
  114. </div>
  115. <div class="echartsParent">
  116. <div>
  117. <div class="echartsBox fl">
  118. <div class="hint"></div>
  119. <div class="fl" id="line-chart"></div>
  120. </div>
  121. </div>
  122. <div>
  123. <div class="echartsBox fl">
  124. <div class="hint"></div>
  125. <div class="fl" id="line-chart2"></div>
  126. </div>
  127. </div>
  128. </div>
  129. <div>
  130. <div class="searchCover">
  131. 数据列表时间段搜索:
  132. <input type="text" id="dataSelectBox" autocomplete="off" placeholder="请选择时间段 ">
  133. <input type="hidden" id="databegin" name="begin">
  134. <input type="hidden" id="dataend" name="end">
  135. <button type="button" onclick="data_sub_filter()" class="btn btn-sm btn-primary">筛选</button>
  136. <!-- <button type="button" onclick="operation()" class="btn btn-sm btn-success">导出</button> -->
  137. <!-- <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">导出</button> -->
  138. <button type="button" class="btn btn-success btn-sm" onclick="decideExport()">导出</button>
  139. </div>
  140. <div>
  141. <table class="layui-hide" id="test" lay-filter="test"></table>
  142. </div>
  143. <div class="fenpei-bottom">
  144. <!-- <input type="hidden" id="totalPage" value={{ nums }}> -->
  145. <input type="hidden" id="totalPage" value=32>
  146. <div id="page" style="text-align: center;"></div>
  147. </div>
  148. </div>
  149. </div>
  150. <!-- 导出提示框 -->
  151. <!-- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  152. <div class="modal-dialog" role="document">
  153. <div class="modal-content">
  154. <div class="modal-header">
  155. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  156. <span aria-hidden="true">&times;</span>
  157. </button>
  158. <h4 class="modal-title" id="myModalLabel">导出信息</h4>
  159. </div>
  160. <div class="modal-body">
  161. <div class="row">
  162. <div class="col-xs-3 downTitle">文件名称:</div>
  163. <div class="col-xs-8 downContent" style=>
  164. <input type="text" id="filename" placeholder="请输入文件的名称" maxlength="15"
  165. class="col-xs-12">
  166. </div>
  167. <div class="col-xs-3 downTitle">下载类型:</div>
  168. <div class="col-xs-8 downContent">
  169. <select name="downtype" id="downtype" onchange="downtype(this)" class="col-xs-12">
  170. <option value="1">全部</option>
  171. <option value="2">时间段</option>
  172. </select>
  173. </div>
  174. <div class="col-xs-3 downTitle timeStage">时间段:</div>
  175. <div class="col-xs-8 downContent timeStage">
  176. <input type="text" id="timSelectBox3" autocomplete="off" placeholder="请选择时间段 "
  177. class="col-xs-12">
  178. <input type="hidden" id="downbegin" name="begin">
  179. <input type="hidden" id="downend" name="end">
  180. </div>
  181. </div>
  182. </div>
  183. <div class="modal-footer">
  184. <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
  185. <button type="button" class="btn btn-primary btn-sm" onclick="operation()">下载</button>
  186. </div>
  187. </div>
  188. </div>
  189. </div> -->
  190. </div>
  191. <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
  192. <script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
  193. <script src="{% static '/lib/layui/layui.all.js' %}"></script>
  194. <script src="{% static '/lib/js/highcharts.js'%}" type="text/javascript"></script>
  195. <script src="{% static '/js/common.js' %}?versions=0.5.0"></script>
  196. <script type="text/javascript">
  197. $.ajaxSetup({
  198. data: {
  199. csrfmiddlewaretoken: '{{ csrf_token }}'
  200. },
  201. });
  202. $(window).resize(function () {
  203. scrollBar()
  204. });
  205. var chart;
  206. var chart2;
  207. $(function () {
  208. currpage = getQueryString('currpage') || 1;
  209. equipName = getQueryString('equipName') || '';
  210. equipId = getQueryString('equipId') || '';
  211. id = getQueryString('id') || '';
  212. etype = getQueryString('etype') || '';
  213. // 时间插件初始化
  214. $('#equip_id').html(id)
  215. layui.use('laydate', function () {
  216. var laydate = layui.laydate;
  217. var _layDateMark = (new Date()).getTime();
  218. $('#timSelectBox').attr('lay-key', '11' + _layDateMark);
  219. //执行一个laydate实例
  220. laydate.render({
  221. elem: '#timSelectBox' //指定元素
  222. ,
  223. range: true,
  224. done: function (value, date) {
  225. var dateArray = value.split(' - ')
  226. $('#begin').val(dateArray[0])
  227. $('#end').val(dateArray[1])
  228. }
  229. });
  230. $('#dataSelectBox').attr('lay-key', '22' + _layDateMark);
  231. laydate.render({
  232. elem: '#dataSelectBox' //指定元素
  233. ,
  234. range: true,
  235. done: function (value, date) {
  236. var dateArray = value.split(' - ')
  237. $('#databegin').val(dateArray[0])
  238. $('#dataend').val(dateArray[1])
  239. }
  240. });
  241. //执行一个laydate实例
  242. $('#timSelectBox3').attr('lay-key', '33' + _layDateMark);
  243. laydate.render({
  244. elem: '#timSelectBox3' //指定元素
  245. ,
  246. range: true,
  247. done: function (value, date) {
  248. var dateArray = value.split(' - ')
  249. $('#downbegin').val(dateArray[0])
  250. $('#downend').val(dateArray[1])
  251. }
  252. });
  253. });
  254. getData(1)
  255. getChartsData('', '', 24 * 60 * 60 * 1000)
  256. scrollBar()
  257. })
  258. function data_sub_filter() {
  259. getData(1)
  260. }
  261. var dataArr = {
  262. dat: [{
  263. sex_trap: '{"imei":"123","iccid":"89860401101700076471","csq":29,"dver":"1.0.1","proj":"SEX_TRAP2","ds":1,"ws":1,"cbs":0,"rps":0,"tps":0,"dps":0,"bps":0,"ts":0,"st":20,"et":2,"cv":18000,"bv":12800,"at":"0","ah":"0","infr_ct":25,"volt_ct":100,"dat_f":5,"pic_f":10,"bt_ct":10,"lng":"113.67336","lat":"34.815187","stamp":"20180301211805"}',
  264. upl_time: "2020-02-29 17:41:11",
  265. is_online: "0",
  266. off_time: "2020-02-29 18:00:13",
  267. },
  268. {
  269. sex_trap: '{"imei":"456","iccid":"89860401101700076471","csq":29,"dver":"1.0.1","proj":"SEX_TRAP3","ds":1,"ws":1,"cbs":0,"rps":0,"tps":0,"dps":0,"bps":0,"ts":0,"st":20,"et":2,"cv":18000,"bv":12800,"at":"0","ah":"0","infr_ct":25,"volt_ct":100,"dat_f":5,"pic_f":10,"bt_ct":10,"lng":"113.67336","lat":"34.815187","stamp":"20180301211805"}',
  270. upl_time: "2020-02-28 17:41:11",
  271. is_online: "1",
  272. off_time: "2020-02-28 18:00:13",
  273. },
  274. {
  275. sex_trap: '{"imei":"789","iccid":"89860401101700076471","csq":29,"dver":"1.0.1","proj":"SEX_TRAP1","ds":1,"ws":1,"cbs":0,"rps":0,"tps":0,"dps":0,"bps":0,"ts":0,"st":20,"et":2,"cv":18000,"bv":12800,"at":"0","ah":"0","infr_ct":25,"volt_ct":100,"dat_f":5,"pic_f":10,"bt_ct":10,"lng":"113.67336","lat":"34.815187","stamp":"20180301211805"}',
  276. upl_time: "2020-02-27 17:41:11",
  277. is_online: "0",
  278. off_time: "2020-02-27 18:00:13",
  279. },
  280. {
  281. sex_trap: '{"imei":"867038032102765","iccid":"89860401101700076471","csq":29,"dver":"1.0.1","proj":"SEX_TRAP3","ds":1,"ws":1,"cbs":0,"rps":0,"tps":0,"dps":0,"bps":0,"ts":0,"st":20,"et":2,"cv":18000,"bv":12800,"at":"0","ah":"0","infr_ct":25,"volt_ct":100,"dat_f":5,"pic_f":10,"bt_ct":10,"lng":"113.67336","lat":"34.815187","stamp":"20180301211805"}',
  282. upl_time: "2020-02-26 17:41:11",
  283. is_online: "0",
  284. off_time: "2020-02-26 18:00:13",
  285. }],
  286. nums: 55
  287. }
  288. // 数据请求
  289. function getData(page) {
  290. var begin = $('#databegin').val();
  291. var end = $('#dataend').val();
  292. $.ajax({
  293. url: 'tccb_data',
  294. type: 'post',
  295. data: {
  296. e_id: id,
  297. page: page,
  298. begin: begin,
  299. end: end,
  300. etype: etype
  301. },
  302. dataType: 'json',
  303. success: function (data) {
  304. renderTable(processingData(data));
  305. renderPage(page, data)
  306. scrollBar()
  307. },
  308. error: function (type) {
  309. console.log(type);
  310. }
  311. })
  312. }
  313. // renderTable(processingData(dataArr));
  314. // renderPage(1,dataArr)
  315. // 1当天 2本月 3半年 4本年
  316. function getCharts(obj, flag) {
  317. $('#timSelectBox').val('')
  318. $('#begin').val('')
  319. $('#end').val('')
  320. if ($(obj).hasClass('active')) {
  321. return false;
  322. } else {
  323. $('.searchCover .btn-white').removeClass('active');
  324. $(obj).addClass('active')
  325. }
  326. var newDate = new Date();
  327. var begin;
  328. var end;
  329. var endNewDate = new Date(newDate.getTime() + 24 * 60 * 60 * 1000);
  330. end = endNewDate.getFullYear() + '-' + (endNewDate.getMonth() + 1) + '-' + endNewDate.getDate();
  331. if (flag == 1) {
  332. end = getTime(-1);
  333. begin = getTime(0);
  334. var spaceNum = 60 * 60 * 1000;
  335. } else if (flag == 2) {
  336. begin = getTime(30);
  337. var spaceNum = 24 * 60 * 60 * 1000;
  338. } else if (flag == 3) {
  339. begin = getTime(182.5);
  340. var spaceNum = 30 * 24 * 60 * 60 * 1000;
  341. } else if (flag == 4) {
  342. begin = getTime(365);
  343. var spaceNum = 30 * 24 * 60 * 60 * 1000;
  344. }
  345. getChartsData(begin, end, spaceNum)
  346. }
  347. function getChartsData(begin, end, spaceNum) {
  348. $.ajax({
  349. url: 'tccb_chart',
  350. type: 'post',
  351. data: {
  352. begin: begin,
  353. end: end,
  354. e_id: id
  355. },
  356. dataType: 'json',
  357. success: function (data) {
  358. if (!data.length) {
  359. $('#line-chart').prev().html('暂无环境温湿度数据').css('z-index', 99);
  360. $('#line-chart2').prev().html('暂无信号强度数据').css('z-index', 99);
  361. if (chart) {
  362. var seriesList = chart.series; //获得图表的所有序列
  363. var seriesCount = seriesList.length;
  364. //通过for循环删除序列数据
  365. for (var i = 0; i < seriesCount; i++) {
  366. chart.series[0].remove();
  367. }
  368. }
  369. if (chart2) {
  370. var seriesList = chart2.series; //获得图表的所有序列
  371. var seriesCount = seriesList.length;
  372. //通过for循环删除序列数据
  373. for (var i = 0; i < seriesCount; i++) {
  374. chart2.series[0].remove();
  375. }
  376. }
  377. return false;
  378. } else {
  379. $('#line-chart').prev().html('').css('z-index', 0);
  380. $('#line-chart2').prev().html('').css('z-index', 0);
  381. }
  382. // var temp = eval('(' + data + ')');
  383. var temp = data;
  384. var atData = [];
  385. var ahData = [];
  386. var csqData = [];
  387. for (var i = 0; i < temp.length; i++) {
  388. var arr1 = [],
  389. arr2 = [],
  390. arr3 = [];
  391. var thisTime = temp[i].tim;
  392. thisTime = thisTime.replace(/-/g, '/');
  393. var time = new Date(thisTime);
  394. timestamp = time.getTime() + 8 * 3600000;
  395. // console.log(timestamp)
  396. arr1.push(timestamp);
  397. arr1.push(parseFloat(temp[i].at / 10));
  398. arr2.push(timestamp);
  399. arr2.push(parseFloat(temp[i].ah / 10));
  400. arr3.push(parseFloat((temp[i].csq)));
  401. atData.unshift(arr1);
  402. ahData.unshift(arr2);
  403. csqData.unshift(arr3)
  404. if (i == temp.length - 1) {
  405. renderCharts(atData, ahData, csqData, spaceNum)
  406. }
  407. }
  408. if (!temp.length) {
  409. $('#line-chart').prev().html('暂无环境温度数据').css('z-index', 99);
  410. $('#line-chart2').prev().html('暂无环境湿度数据').css('z-index', 99);
  411. } else {
  412. $('#line-chart').prev().html('').css('z-index', 0);
  413. $('#line-chart2').prev().html('').css('z-index', 0);
  414. }
  415. },
  416. error: function (type) { }
  417. })
  418. }
  419. Highcharts.setOptions({
  420. // 所有语言文字相关配置都设置在 lang 里
  421. lang: {
  422. resetZoom: '重置',
  423. resetZoomTitle: '重置缩放比例'
  424. }
  425. });
  426. function renderCharts(atData, ahData, csqData, tickInterval) {
  427. chart = Highcharts.chart('line-chart', {
  428. chart: {
  429. type: 'spline',
  430. zoomType: 'x',
  431. selectionMarkerFill: 'rgba(0,0,0, 0.2)',
  432. resetZoomButton: {
  433. // 按钮定位
  434. position: {
  435. align: 'right', // by default
  436. verticalAlign: 'top', // by default
  437. x: -20,
  438. y: -50
  439. },
  440. }
  441. },
  442. title: {
  443. text: '环境温度(°C)湿度(RH)'
  444. },
  445. subtitle: {
  446. // text: '非规律性时间内的变化'
  447. },
  448. xAxis: {
  449. crosshair: true, //十字基准线
  450. type: 'datetime',
  451. dateTimeLabelFormats: { //根据时间间距X轴自动显示哪种格式
  452. millisecond: '%H:%M:%S.%L',
  453. second: '%H:%M:%S',
  454. minute: '%H:%M',
  455. hour: '%H:%M',
  456. day: '%m-%d',
  457. week: '%m-%d',
  458. month: '%Y-%m',
  459. year: '%Y'
  460. },
  461. // dateTimeLabelFormats: {
  462. // week: '%m/%d'
  463. // },
  464. // tickInterval: 7 * 24 * 3600 * 1000,
  465. tickInterval: tickInterval,
  466. // minRange: 20
  467. },
  468. colors: ['#39F', '#6CF', '#036', '#000', '#6CF',],
  469. yAxis: {
  470. title: {
  471. text: '环境温湿度变化'
  472. },
  473. },
  474. credits: { //去掉默认的highcharts.com
  475. enabled: false
  476. },
  477. tooltip: {
  478. // crosshairs: true,
  479. shared: true, //折线共享
  480. headerFormat: '<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>',
  481. },
  482. plotOptions: {
  483. spline: {
  484. marker: {
  485. enabled: true,
  486. radius: 3, //曲线点半径,默认是4
  487. symbol: 'diamond' //曲线点类型:”circle”, “square”, “diamond”, “triangle”,”triangle-down”,默认是”circle”
  488. }
  489. }
  490. },
  491. series: [{
  492. name: '环境温度',
  493. data: atData,
  494. tooltip: {
  495. valueSuffix: '°C'
  496. }
  497. },
  498. {
  499. name: '环境湿度',
  500. data: ahData,
  501. tooltip: {
  502. valueSuffix: '%RH'
  503. }
  504. },
  505. ]
  506. });
  507. chart2 = Highcharts.chart('line-chart2', {
  508. chart: {
  509. type: 'spline',
  510. zoomType: 'x',
  511. selectionMarkerFill: 'rgba(0,0,0, 0.2)',
  512. resetZoomButton: {
  513. // 按钮定位
  514. position: {
  515. align: 'right', // by default
  516. verticalAlign: 'top', // by default
  517. x: -20,
  518. y: -50
  519. },
  520. }
  521. },
  522. title: {
  523. text: '信号强度'
  524. },
  525. subtitle: {
  526. // text: '非规律性时间内的变化'
  527. },
  528. xAxis: {
  529. crosshair: true, //十字基准线
  530. type: 'datetime',
  531. dateTimeLabelFormats: { //根据时间间距X轴自动显示哪种格式
  532. millisecond: '%H:%M:%S.%L',
  533. second: '%H:%M:%S',
  534. minute: '%H:%M',
  535. hour: '%H:%M',
  536. day: '%m-%d',
  537. week: '%m-%d',
  538. month: '%Y-%m',
  539. year: '%Y'
  540. },
  541. // dateTimeLabelFormats: {
  542. // week: '%m/%d'
  543. // },
  544. // tickInterval: 7 * 24 * 3600 * 1000,
  545. tickInterval: tickInterval,
  546. // minRange: 20
  547. },
  548. colors: ['#036', '#39F', '#6CF', '#000', '#6CF',],
  549. yAxis: {
  550. title: {
  551. text: '信号强度'
  552. },
  553. },
  554. credits: { //去掉默认的highcharts.com
  555. enabled: false
  556. },
  557. tooltip: {
  558. // crosshairs: true,
  559. shared: true, //折线共享
  560. headerFormat: '<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>',
  561. },
  562. plotOptions: {
  563. spline: {
  564. marker: {
  565. enabled: true,
  566. radius: 3, //曲线点半径,默认是4
  567. symbol: 'diamond' //曲线点类型:”circle”, “square”, “diamond”, “triangle”,”triangle-down”,默认是”circle”
  568. }
  569. }
  570. },
  571. series: [
  572. {
  573. name: '信号强度',
  574. data: csqData,
  575. tooltip: {
  576. valueSuffix: ''
  577. }
  578. },
  579. ]
  580. });
  581. }
  582. // 获取想要时间 num为天数
  583. function getTime(num) {
  584. // 先获取当前时间
  585. var curDate = (new Date()).getTime();
  586. // 将半年的时间单位换算成毫秒
  587. var halfYear = num * 24 * 3600 * 1000;
  588. var pastResult = curDate - halfYear; // 半年前的时间(毫秒单位)
  589. // 日期函数,定义起点为半年前
  590. var pastDate = new Date(pastResult),
  591. pastYear = pastDate.getFullYear(),
  592. pastMonth = pastDate.getMonth() + 1,
  593. pastDay = pastDate.getDate();
  594. return pastYear + '-' + pastMonth + '-' + pastDay;
  595. }
  596. function processingData(data) {
  597. if (data.nums) {
  598. var dataArr = data.dat;
  599. var newDataArr = [];
  600. console.log(dataArr)
  601. for (var i = 0; i < dataArr.length; i++) {
  602. var tccb_trap = eval('(' + dataArr[i].tccb_data + ')');
  603. tccb_trap.upl_time = dataArr[i].upl_time;
  604. tccb_trap.is_online = dataArr[i].is_online;
  605. tccb_trap.off_time = dataArr[i].off_time;
  606. tccb_trap.equip_name = dataArr[i].equip_name || '--';
  607. tccb_trap.dev_num = tccb_trap.dev_num || '--';
  608. newDataArr.push(tccb_trap);
  609. if (i == dataArr.length - 1) {
  610. return newDataArr;
  611. }
  612. }
  613. } else {
  614. return [];
  615. }
  616. }
  617. function renderTable(newDataArr) {
  618. layui.use(['table'], function () {
  619. var table = layui.table;
  620. table.render({
  621. elem: '#test'
  622. // ,url:'/demo/table/user/'
  623. , skin: 'line' //行边框风格
  624. , even: true //开启隔行背景
  625. // ,size: 'lg' //小尺寸的表格
  626. , data: newDataArr
  627. // , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
  628. , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
  629. , cols: [[
  630. { field: 'dev_num', align: 'center', title: '设备名称', minWidth: 50 }
  631. , { field: 'at', align: 'center', title: '环境温度(°C)', templet: function (d) { if (d.at == "") { return '--' } else { return d.at / 10 } } }
  632. , { field: 'ah', align: 'center', title: '环境湿度(RH)', templet: function (d) { if (d.ah == "") { return '--' } else { return d.ah /10 } } }
  633. , { field: 'csq', align: 'center', title: '信号强度' }
  634. , { field: 'vbatstatus', align: 'center', title: '电池状态', minWidth: 100, templet: function (d) { if (d.vbatstatus == '0') { return '正常' } else if (d.vbatstatus == '1') { return '电量过低' } } }
  635. , { field: 'vbat', align: 'center', title: '电压(V)', templet: function (d) { return d.vbat } }
  636. , { field: 'dver', align: 'center', title: '设备版本', templet: function (d) { return d.dver } }
  637. , { field: 'upl_time', align: 'center', title: '上报时间', minWidth: 200 }
  638. ]]
  639. });
  640. // //监听行工具事件
  641. // table.on('tool(test)', function(obj){
  642. // var data = obj.data;
  643. // console.log(data)
  644. // if(obj.event == 'lookall'){
  645. // window.location.href = 'sex_trap_detail?id='+data.imei+'&currpage='+$(".layui-laypage-skip .layui-input").val() +'&equipName='+$('#ename').val()+'&equipId='+$('#eId').val()
  646. // }
  647. // });
  648. });
  649. }
  650. function renderPage(currpage, data) {
  651. var begin = $('#databegin').val();
  652. var end = $('#dataend').val();
  653. //调用分页
  654. layui.use(['laypage'], function () {
  655. var laypage = layui.laypage;
  656. laypage.render({
  657. elem: 'page'
  658. , count: data.nums
  659. , curr: currpage
  660. , theme: '#428BCA'
  661. , layout: ['prev', 'page', 'next', 'skip']
  662. , jump: function (obj, first) {
  663. //首次不执行
  664. if (!first) {
  665. $.ajax({
  666. url: 'tccb_data',
  667. type: 'post',
  668. data: {
  669. e_id: id,
  670. page: obj.curr,
  671. begin: begin,
  672. end: end,
  673. etype: etype
  674. },
  675. dataType: 'json',
  676. success: function (data) {
  677. renderTable(processingData(data));
  678. },
  679. error: function (type) {
  680. console.log(type)
  681. }
  682. })
  683. }
  684. }
  685. });
  686. })
  687. }
  688. // 判断主流浏览器
  689. function decideExport() {
  690. $('#myModal').modal('toggle')
  691. }
  692. //导出
  693. function operation() {
  694. if (!$('#filename').val()) {
  695. layer.msg("请填写文件名!", { time: 2000 });
  696. return false;
  697. }
  698. if ($('#downtype').val() == 2) {
  699. if (!($('#downbegin').val() && $('#downbegin').val())) {
  700. layer.msg("请选择时间段!", { time: 2000 });
  701. return false;
  702. }
  703. }
  704. window.location.href = 'cbd_data_export?id=' + $('#equip_id').val() + '&begin=' + $('#downbegin').val() + '&end=' + $('#downend').val() + '&filename=' + $('#filename').val()
  705. }
  706. // 窗口改变iframe高度改变
  707. $(window).resize(function () {
  708. if ($('.content').height() > 750) {
  709. $('#iframe-main', parent.document).css('height', $('.content').height() + 20)
  710. } else {
  711. $('#iframe-main', parent.document).css('height', '750px')
  712. }
  713. });
  714. function downtype(obj) {
  715. if ($(obj).val() == 2) {
  716. $('.timeStage').show();
  717. } else {
  718. $('.timeStage').hide();
  719. $('#downbegin').val('');
  720. $('#downend').val('');
  721. $('#downtimSelectBox').val('');
  722. }
  723. }
  724. function getQueryString(name) {
  725. let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  726. let url = window.location.href.split('?')[1].match(reg);
  727. // console.log(url)
  728. if (url != null) {
  729. return decodeURI(url[2]) //decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
  730. } else {
  731. return null
  732. }
  733. }
  734. function back() {
  735. var url = 'tccb_detail?equipId=' + equipId + '&equipName=' + equipName + '&currpage=' + currpage + '&id=' + id;
  736. location.href = url;
  737. }
  738. </script>
  739. </body>
  740. </html>