cbd_pest_data.html 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122
  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. overflow: hidden;
  16. background: #fff;
  17. }
  18. /* 返回 */
  19. .headerPlace {
  20. font-size: 22px;
  21. color: #418fbb;
  22. cursor: pointer;
  23. }
  24. .headerPlace img {
  25. vertical-align: middle;
  26. margin-right: 10px;
  27. margin-top: -4px;
  28. }
  29. .searchCover {
  30. margin: 20px 0;
  31. }
  32. .peatdata {
  33. padding: 0 1px 0 0;
  34. min-width: 750px;
  35. overflow-x: scroll;
  36. }
  37. .table,
  38. .table.table-striped>thead>tr>th {
  39. text-align: center;
  40. }
  41. table td {
  42. vertical-align: middle !important;
  43. }
  44. .nullData {
  45. width: 100%;
  46. height: 500px;
  47. background: #ddd;
  48. text-align: center;
  49. line-height: 500px;
  50. font-size: 20px;
  51. border: 1px solid #ddd;
  52. }
  53. .container-wrap {
  54. margin: 30px 0;
  55. }
  56. .container-cartogram>div {
  57. width: 100%;
  58. /* margin: 0 10px; */
  59. height: 300px;
  60. text-align: center;
  61. line-height: 300px;
  62. font-size: 22px;
  63. color: #8a8a8a;
  64. position: relative;
  65. }
  66. .container-cartogram>div>div {
  67. width: 100%;
  68. height: 100%;
  69. }
  70. .container-cartogram>div>.hint {
  71. width: 100%;
  72. height: 100%;
  73. position: absolute;
  74. }
  75. .fl {
  76. float: left;
  77. }
  78. .fr {
  79. float: right;
  80. }
  81. .clearfix:after {
  82. content: "";
  83. display: block;
  84. clear: both;
  85. height: 0;
  86. visibility: hidden;
  87. }
  88. .clearfix {
  89. *zoom: 1;
  90. }
  91. #wormType {
  92. min-width: 150px;
  93. }
  94. .timeStage {
  95. display: none;
  96. }
  97. .downTitle {
  98. text-align: right;
  99. line-height: 27px;
  100. padding-left: 0;
  101. margin-bottom: 5px;
  102. }
  103. .downContent {
  104. padding-left: 0;
  105. margin-bottom: 5px;
  106. }
  107. .title {
  108. font-size: 20px;
  109. border-left: 5px solid #438eb9;
  110. padding-left: 12px;
  111. color: #438eb9;
  112. font-weight: 700;
  113. }
  114. .manualBtn {
  115. float: right;
  116. }
  117. button.btn.btn-sm.btn-white.active {
  118. background: #428bca !important;
  119. color: #fff !important;
  120. }
  121. /* 设备信息 */
  122. .userinfo {
  123. margin: 20px 0;
  124. font-size: 14px;
  125. }
  126. .userinfo .fa {
  127. font-size: 18px;
  128. color: #26b3ff;
  129. margin: 0px 5px;
  130. }
  131. .container-cartogram .wormGather {
  132. width: 17%;
  133. border: 1px solid #ddd;
  134. box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  135. line-height: 34px;
  136. overflow: hidden;
  137. font-size: 12px;
  138. }
  139. .container-cartogram .wormGather>ul {
  140. padding: 0 10px;
  141. }
  142. .container-cartogram .wormGather>ul>li {
  143. display: flex;
  144. justify-content: space-between;
  145. border-bottom: 1px solid #e6e6e6;
  146. }
  147. #timeBox {
  148. font-size: 18px;
  149. }
  150. </style>
  151. </head>
  152. <body>
  153. <div class="content">
  154. <div class="page-header">
  155. <span class="headerPlace" onclick="goback('cbd_report')">
  156. <img src="{% static '/img/gobackIcon.png' %}" alt="">返回
  157. </span>
  158. </div>
  159. <div class="userinfo">
  160. <div class=" ">
  161. <i class="fa fa-user-o" aria-hidden="true"></i>
  162. 设备ID:
  163. <span class="userinfoTitle">{{ equip_id }}</span>
  164. 设备名称:
  165. <span class="userinfoTitle" id="equip_name">{{ename}}</span>
  166. </div>
  167. </div>
  168. <div>
  169. <div class="title">
  170. 自动害虫统计
  171. </div>
  172. <!-- <button type="button" onclick="openPage('manual_pest_data','{{ equip_id }}')" class="btn btn-sm btn-primary manualBtn">手动害虫统计</button> -->
  173. <button type="button" onclick="openDetialPage('manual_pest_data?e_id={{ equip_id }}')" class="btn btn-sm btn-primary manualBtn">手动害虫统计</button>
  174. </div>
  175. <div class="searchCover">
  176. 统计图筛选条件:
  177. <button type="button" onclick="getCharts(this,1)" class="btn btn-sm btn-white">当天</button>
  178. <button type="button" onclick="getCharts(this,2)" class="btn btn-sm btn-white active">近一月</button>
  179. <button type="button" onclick="getCharts(this,3)" class="btn btn-sm btn-white">近半年</button>
  180. <button type="button" onclick="getCharts(this,4)" class="btn btn-sm btn-white">近一年</button>
  181. <input type="text" id="searchTime" autocomplete="off" style="width: 180px;">
  182. <input type="hidden" id="begin" name="begin">
  183. <input type="hidden" id="end" name="end">
  184. <button type="button" onclick="datsub_filter()" class="btn btn-sm btn-primary">筛选</button>
  185. <button type="button" class="btn btn-success btn-sm" onclick="decideExport()">导出</button>
  186. <button type="button" class="btn btn-success btn-sm" onclick="addDataNum('','',24*60*60*1000)">害虫折线调整</button>
  187. </div>
  188. <div style="width:63%;text-align:right">
  189. 害虫种类:
  190. <select name="" id="wormType">
  191. <option value="">暂无害虫种类</option>
  192. </select>
  193. </div>
  194. <div class="container-wrap">
  195. <div class="container-cartogram clearfix">
  196. <div class="echartsBox fl" style="width:65%">
  197. <div class="hint"></div>
  198. <div class="fl" id="line-chart"></div>
  199. </div>
  200. <!-- <div class="echartsBox wormGather fl">
  201. <ul id="wormUl">
  202. </ul>
  203. </div> -->
  204. <div class="echartsBox fl" style="width:35%">
  205. <div class="hint"></div>
  206. <div class="fl" id="pie-chart"></div>
  207. </div>
  208. </div>
  209. <div>
  210. <input id="imei" type="hidden" type="text" value={{ equip_id }}>
  211. </div>
  212. </div>
  213. <div class="searchCover">
  214. 统计图筛选时间:<span id="timeBox"></span>
  215. </div>
  216. <div class="innerTable peatdata">
  217. <table id="datatable" class="table table-striped table-hover">
  218. <thead>
  219. <tr>
  220. <th>害虫名称</th>
  221. <th>害虫数量</th>
  222. <!-- <th>统计时间</th> -->
  223. </tr>
  224. </thead>
  225. <tbody>
  226. </tbody>
  227. <!-- <tbody>
  228. {% for i in descs %}
  229. <tr>
  230. <td>{{ i.pest_name }}</td>
  231. <td>{{ i.pest_num }}</td>
  232. <td>{{ i.crop_name }}</td>
  233. <td>{{ i.pest_case }}</td>
  234. <td>{{ i.add_time }}</td>
  235. </tr>
  236. {% endfor %}
  237. </tbody> -->
  238. </table>
  239. <!-- <div class="fenpei-bottom ">
  240. <input type="hidden" id="totalPage" value={{ nums }}>
  241. <div id="page" style="text-align: center;"></div>
  242. </div> -->
  243. </div>
  244. <!-- 导出提示框 -->
  245. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  246. <div class="modal-dialog" role="document">
  247. <div class="modal-content">
  248. <div class="modal-header">
  249. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  250. <span aria-hidden="true">&times;</span>
  251. </button>
  252. <h4 class="modal-title" id="myModalLabel">导出信息</h4>
  253. </div>
  254. <div class="modal-body">
  255. <div class="row">
  256. <div class="col-xs-3 downTitle">文件名称:</div>
  257. <div class="col-xs-8 downContent" style=>
  258. <input type="text" id="filename" placeholder="请输入文件的名称" maxlength="15"
  259. class="col-xs-12">
  260. </div>
  261. <div class="col-xs-3 downTitle">下载类型:</div>
  262. <div class="col-xs-8 downContent">
  263. <select name="downtype" id="downtype" onchange="downtype(this)" class="col-xs-12">
  264. <option value="1">全部</option>
  265. <option value="2">时间段</option>
  266. </select>
  267. </div>
  268. <div class="col-xs-3 downTitle timeStage">时间段:</div>
  269. <div class="col-xs-8 downContent timeStage">
  270. <input type="text" id="timSelectBox3" autocomplete="off" placeholder="请选择时间段 "
  271. class="col-xs-12">
  272. <input type="hidden" id="downbegin" name="begin">
  273. <input type="hidden" id="downend" name="end">
  274. </div>
  275. </div>
  276. </div>
  277. <div class="modal-footer">
  278. <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
  279. <button type="button" class="btn btn-primary btn-sm" onclick="operation()">下载</button>
  280. </div>
  281. </div>
  282. </div>
  283. </div>
  284. </div>
  285. <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
  286. <script src="{% static '/lib/layui/layui.all.js' %}"></script>
  287. <!-- 统计图 -->
  288. <script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
  289. <!-- <script src="{% static '/lib/js/echarts.min.js' %}"></script> -->
  290. <!-- <script src="{% static '/lib/js/highcharts.js'%}" type="text/javascript"></script> -->
  291. <script src="{% static '/js/common.js' %}?versions=0.5.4"></script>
  292. <script src="{% static '/js/reportmanage/cbd_pest_library.js' %}?versions=0.5.4" type="text/javascript"></script>
  293. <script>
  294. $.ajaxSetup({
  295. data: {
  296. csrfmiddlewaretoken: '{{ csrf_token }}'
  297. },
  298. });
  299. if (!$.fn.highcharts) {
  300. var script = document.createElement("script");
  301. script.type = "text/javascript";
  302. script.src = "../static/lib/js/highcharts.js";
  303. document.body.appendChild(script);
  304. }
  305. function openPage(url, id) {
  306. window.location.href = url + "?e_id=" + id;
  307. }
  308. </script>
  309. <script>
  310. var objTime = {} //当前时间筛选的节点
  311. var insectData = {} //tickInterval, atData, ahData, worm, wormName, plotLine
  312. var num = 10
  313. var numdata = 10
  314. layui.use(['laydate', 'form'], function () {
  315. var laydate = layui.laydate;
  316. var form = layui.form;
  317. var _layDateMark = (new Date()).getTime();
  318. $('#searchTime').attr('lay-key', '11' + _layDateMark);
  319. $('#tableSearchTime').attr('lay-key', '22' + _layDateMark);
  320. $('#timSelectBox3').attr('lay-key', '33' + _layDateMark);
  321. //执行一个laydate实例
  322. laydate.render({
  323. elem: '#searchTime' //指定元素
  324. ,
  325. type: 'date',
  326. range: true,
  327. done: function (value, date) {
  328. var dateArray = value.split(' - ')
  329. $('#begin').val(dateArray[0]);
  330. $('#end').val(dateArray[1]);
  331. }
  332. });
  333. //执行一个laydate实例
  334. laydate.render({
  335. elem: '#tableSearchTime' //指定元素
  336. ,
  337. type: 'date',
  338. range: true,
  339. done: function (value, date) {
  340. var dateArray = value.split(' - ')
  341. $('#tableBegin').val(dateArray[0]);
  342. $('#tableEnd').val(dateArray[1]);
  343. }
  344. });
  345. //执行一个laydate实例
  346. laydate.render({
  347. elem: '#timSelectBox3' //指定元素
  348. ,
  349. range: true,
  350. done: function (value, date) {
  351. var dateArray = value.split(' - ')
  352. $('#downbegin').val(dateArray[0])
  353. $('#downend').val(dateArray[1])
  354. }
  355. });
  356. });
  357. // $.ajax({
  358. // url: 'pest_statis_form',
  359. // type: 'post',
  360. // data: {
  361. // e_id: $('#imei').val(),
  362. // page: 1
  363. // },
  364. // dataType: "json",
  365. // success: function (data) {
  366. // if (data.dat.length) {
  367. // var str = '<option value="">害虫种类</option>';
  368. // for (var i = 0; i < data.kind.length; i++) {
  369. // str += '<option value="' + data.kind[i] + '">' + insect_dict[data.kind[i]] + '</option>';
  370. // }
  371. // $('#pestCategory').html(str);
  372. // var form = layui.form;
  373. // form.render('select');
  374. // $('#page').parent().show();
  375. // pestFill_Table('datatable', data.dat);
  376. // } else {
  377. // $('#page').parent().hide();
  378. // datFill_null_Table('datatable');
  379. // $('#pestCategory').html('<option value="">害虫种类为空</option>');
  380. // var form = layui.form;
  381. // form.render('select');
  382. // }
  383. // // initPage(data.nums)
  384. // }
  385. // })
  386. getWormData('', '', 24 * 60 * 60 * 1000);
  387. function getWormData(tbegin, tend, spaceNum) {
  388. $.ajax({
  389. url: 'pest_at_ah_1',
  390. type: 'post',
  391. data: {
  392. e_id: $('#imei').val(),
  393. 'tbegin': tbegin,
  394. 'tend': tend
  395. },
  396. beforeSend: function (XMLHttpRequest) {
  397. layui.use(['layer'], function () {
  398. var layer = layui.layer;
  399. //注意,layer.msg默认3秒自动关闭,如果数据加载耗时比较长,需要设置time
  400. loadingFlag = layer.msg('正在读取数据,请稍候……', {
  401. icon: 16,
  402. shade: 0.01,
  403. shadeClose: false
  404. });
  405. })
  406. },
  407. complete: function (XMLHttpRequest, textStatus) {
  408. layer.close(loadingFlag);
  409. },
  410. dataType: "json",
  411. success: function (data) {
  412. // console.log(data)
  413. if (tbegin) {
  414. $('#timeBox').html(tbegin + '—' + tend)
  415. } else {
  416. $('#timeBox').html(getTime(30) + '—' + getTime(0))
  417. }
  418. disposeData(data, spaceNum)
  419. },
  420. error: function (type) {
  421. // console.log(type)
  422. }
  423. })
  424. }
  425. // 返回时间戳
  426. function returnTime(time) {
  427. var thisTime = time.replace(/-/g, '/');
  428. var time = new Date(thisTime);
  429. var timestamp = time.getTime() + 8 * 3600000;
  430. return timestamp;
  431. }
  432. // 处理返回数据格式 害虫数据格式[[[23432456,34],[23432421,3]],[[23432456,35],[23432421,76]]]
  433. function disposeData(data, spaceNum) {
  434. var kind = data.kind;
  435. var worm = [];
  436. var atData = [];
  437. var ahData = [];
  438. // console.log(data)
  439. // 折线
  440. var html = '';
  441. if (!kind.length) {
  442. $('#wormType').html('<option value="">暂无害虫种类</option>')
  443. }
  444. for (var z = 0; z < kind.length; z++) {
  445. html += '<option value="' + z + '">' + insect_dict[kind[z]] + '</option>';
  446. if (z == kind.length - 1) {
  447. if (html) {
  448. $('#wormType').html(html)
  449. } else {
  450. $('#wormType').html('<option value="">暂无害虫种类</option>')
  451. }
  452. }
  453. }
  454. // 短信预警线
  455. if (data.msg_conf.length > 2) {
  456. var msg_conf = eval('(' + data.msg_conf + ')');
  457. var appointPestNameArr = msg_conf.appointPestName.split('#');
  458. var appointPestNumArr = msg_conf.appointPestNum.split('#');
  459. } else {
  460. var msg_conf = { "newPest": "on", "newPestName": "", "pestCategory": "off", "pestCategoryNum": "", "appointPest": "off", "appointPestName": [], "appointPestNum": "", "pestTotal": "off", "pestTotalNum": "", "pestWarn": "off", "phone": "15038203087" };
  461. var appointPestNameArr = [];
  462. var appointPestNumArr = [];
  463. }
  464. // console.log(appointPestNameArr)
  465. // console.log(appointPestNumArr)
  466. for (var i = 0; i < data.dat1.length; i++) {
  467. var arr1 = [],
  468. arr2 = [];
  469. arr1.push(returnTime(data.dat1[i].time));
  470. arr1.push(parseFloat((data.dat1[i].at / 10).toFixed(1)));
  471. arr2.push(returnTime(data.dat1[i].time));
  472. arr2.push(parseFloat((data.dat1[i].ah / 10).toFixed(1)));
  473. atData.unshift(arr1);
  474. ahData.unshift(arr2);
  475. if (i == data.dat1.length - 1) {
  476. if (data.dat.length) {
  477. for (var j = 0; j < data.dat.length; j++) {
  478. var secondArr = [];
  479. var currTime = returnTime(data.dat[j].time)
  480. var resultArr = data.dat[j].result.split('#');
  481. for (var z = 0; z < resultArr.length; z++) {
  482. var thirdlyArr = [];
  483. var wormNameNum = resultArr[z].split(',')[0];
  484. var wormValNum = parseInt(resultArr[z].split(',')[1]);
  485. thirdlyArr.push(currTime)
  486. thirdlyArr.push(wormValNum);
  487. var wormIndex = kind.indexOf(wormNameNum);
  488. if (worm[wormIndex]) {
  489. worm[wormIndex].unshift(thirdlyArr);
  490. } else {
  491. worm[wormIndex] = [thirdlyArr];
  492. }
  493. }
  494. if (j == data.dat.length - 1) {
  495. // 短信阈值判断
  496. if (appointPestNameArr.indexOf(kind[0]) != -1) {
  497. var Threshold = appointPestNumArr[appointPestNameArr.indexOf(kind[0])];
  498. } else {
  499. var Threshold = 0;
  500. }
  501. $('#line-chart').prev().html('').css('z-index', 0);
  502. insectData = {
  503. tickInterval: spaceNum,
  504. atData: atData,
  505. ahData: ahData,
  506. worm: worm[0],
  507. wormName: insect_dict[kind[0]],
  508. plotLine: Threshold
  509. }
  510. renderCharts(spaceNum, atData, ahData, worm[0], insect_dict[kind[0]], Threshold);
  511. var drawPieChartData = [];
  512. for (var ss = 0; ss < worm.length; ss++) {
  513. var currWormTotal = 0;
  514. for (var sss = 0; sss < worm[ss].length; sss++) {
  515. currWormTotal += worm[ss][sss][1];
  516. if (sss == worm[ss].length - 1) {
  517. drawPieChartData.push({
  518. name: insect_dict[kind[ss]],
  519. key: ss,
  520. y: currWormTotal
  521. })
  522. }
  523. }
  524. if (ss == worm.length - 1) {
  525. // console.log(drawPieChartData)
  526. drawPieChart(drawPieChartData)
  527. drawList(drawPieChartData)
  528. }
  529. }
  530. //害虫种类切换
  531. $('#wormType').on('change', function () {
  532. var val = $(this).val();
  533. // 短信阈值判断
  534. if (appointPestNameArr.indexOf(kind[val]) != -1) {
  535. var Threshold = appointPestNumArr[appointPestNameArr.indexOf(kind[val])];
  536. } else {
  537. var Threshold = 0;
  538. }
  539. if (chart) {
  540. var seriesList = chart.series; //获得图表的所有序列
  541. var seriesCount = seriesList.length;
  542. //通过for循环删除序列数据
  543. for (var i = 0; i < seriesCount; i++) {
  544. chart.series[0].remove();
  545. }
  546. }
  547. $('#line-chart').prev().html('').css('z-index', 0);
  548. insectData = {
  549. tickInterval: spaceNum,
  550. atData: atData,
  551. ahData: ahData,
  552. worm: worm[val],
  553. wormName: insect_dict[kind[val]],
  554. plotLine: Threshold
  555. }
  556. console.log(insectData)
  557. renderCharts(spaceNum, atData, ahData, worm[val], insect_dict[kind[val]], Threshold);
  558. })
  559. }
  560. }
  561. } else {
  562. insectData = {
  563. tickInterval: spaceNum,
  564. atData: atData,
  565. ahData: ahData,
  566. worm: [],
  567. wormName: '害虫',
  568. plotLine: 0
  569. }
  570. renderCharts(spaceNum, atData, ahData, [], '害虫', 0);
  571. drawPieChart([])
  572. drawList([])
  573. $('#line-chart').prev().html('').css('z-index', 0);
  574. }
  575. }
  576. }
  577. if (data.dat1.length == 0) {
  578. renderCharts(7 * 24 * 3600 * 1000, [], [], [], '害虫', 0);
  579. drawPieChart([])
  580. drawList([])
  581. $('#line-chart').prev().html('暂无温度数据').css('z-index', 99);
  582. }
  583. }
  584. Highcharts.setOptions({
  585. // 所有语言文字相关配置都设置在 lang 里
  586. lang: {
  587. resetZoom: '刷新',
  588. resetZoomTitle: '重置缩放比例'
  589. }
  590. });
  591. function renderCharts(tickInterval, atData, ahData, worm, wormName, plotLine) {
  592. // console.log(worm)
  593. chart = Highcharts.chart('line-chart', {
  594. chart: {
  595. type: 'spline',
  596. zoomType: 'x',
  597. selectionMarkerFill: 'rgba(0,0,0, 0.2)',
  598. resetZoomButton: {
  599. // 按钮定位
  600. position: {
  601. align: 'right', // by default
  602. verticalAlign: 'top', // by default
  603. x: -20,
  604. y: -50
  605. },
  606. }
  607. },
  608. title: {
  609. text: '害虫变化趋势'
  610. },
  611. subtitle: {
  612. // text: '非规律性时间内的变化'
  613. },
  614. xAxis: {
  615. crosshair: true, //十字基准线
  616. type: 'datetime',
  617. dateTimeLabelFormats: { //根据时间间距X轴自动显示哪种格式
  618. millisecond: '%H:%M:%S.%L',
  619. second: '%H:%M:%S',
  620. minute: '%H:%M',
  621. hour: '%H:%M',
  622. day: '%m-%d',
  623. week: '%m-%d',
  624. month: '%Y-%m',
  625. year: '%Y'
  626. },
  627. // dateTimeLabelFormats: {
  628. // week: '%m/%d'
  629. // },
  630. // tickInterval: 7 * 24 * 3600 * 1000,
  631. tickInterval: tickInterval,
  632. // minRange: 20
  633. },
  634. colors: ['#39F', '#6CF', '#ff7100', '#036', '#000', '#6CF',],
  635. yAxis: {
  636. title: {
  637. text: '温湿度变化'
  638. },
  639. plotLines: [{
  640. color: 'red', //线的颜色,定义为红色
  641. dashStyle: 'Dash', //默认是值,这里定义为长虚线
  642. value: plotLine, //定义在那个值上显示标示线,这里是在x轴上刻度为3的值处垂直化一条线
  643. width: 1, //标示线的宽度,2px
  644. label: {
  645. text: '短信预警线', //标签的内容
  646. align: 'right', //标签的水平位置,水平居左,默认是水平居中center
  647. x: 0, //标签相对于被定位的位置水平偏移的像素,重新定位,水平居左10px
  648. style: {
  649. fontSize: '14px',
  650. // fontWeight:'bold'
  651. }
  652. },
  653. }]
  654. },
  655. credits: { //去掉默认的highcharts.com
  656. enabled: false
  657. },
  658. tooltip: {
  659. // crosshairs: true,
  660. shared: true, //折线共享
  661. headerFormat: '<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>',
  662. },
  663. plotOptions: {
  664. spline: {
  665. marker: {
  666. enabled: true,
  667. radius: 3, //曲线点半径,默认是4
  668. symbol: 'diamond' //曲线点类型:”circle”, “square”, “diamond”, “triangle”,”triangle-down”,默认是”circle”
  669. }
  670. }
  671. },
  672. series: [{
  673. name: '环境温度',
  674. data: atData,
  675. tooltip: {
  676. valueSuffix: '°C'
  677. }
  678. },
  679. {
  680. name: '环境湿度',
  681. data: ahData,
  682. tooltip: {
  683. valueSuffix: '%RH'
  684. }
  685. },
  686. {
  687. name: wormName,
  688. data: worm,
  689. tooltip: {
  690. valueSuffix: '只'
  691. }
  692. },
  693. ]
  694. });
  695. }
  696. function addplotLine() {
  697. chart.xAxis[0].addPlotLine({ //在x轴上增加
  698. value: 2, //在值为2的地方
  699. width: 2, //标示线的宽度为2px
  700. color: '#FCFFC5', //标示线的颜色
  701. id: 'plot-line-1' //标示线的id,在删除该标示线的时候需要该id标示
  702. });
  703. }
  704. function downtype(obj) {
  705. if ($(obj).val() == 2) {
  706. $('.timeStage').show();
  707. } else {
  708. $('.timeStage').hide();
  709. $('#downbegin').val('');
  710. $('#downend').val('');
  711. $('#downtimSelectBox').val('');
  712. }
  713. }
  714. // 导出提示框
  715. function decideExport() {
  716. $('#myModal').modal('toggle')
  717. }
  718. //导出
  719. function operation() {
  720. if (!$('#filename').val()) {
  721. layer.msg("请填写文件名!", {
  722. time: 2000
  723. });
  724. return false;
  725. }
  726. if ($('#downtype').val() == 2) {
  727. if (!($('#downbegin').val() && $('#downbegin').val())) {
  728. layer.msg("请选择时间段!", {
  729. time: 2000
  730. });
  731. return false;
  732. }
  733. }
  734. window.location.href = 'pest_export?id=' + $('#imei').val() + '&begin=' + $('#downbegin').val() + '&end=' + $(
  735. '#downend').val() + '&filename=' + $('#filename').val()
  736. }
  737. function initPage(count, parameter, tbegin, tend, pestCategory) {
  738. layui.use('laypage', function () {
  739. var laypage = layui.laypage;
  740. laypage.render({
  741. elem: 'page' //注意,这里的 test1 是 ID,不用加 # 号
  742. ,
  743. count: count,
  744. theme: '#428BCA',
  745. layout: ['prev', 'page', 'next', 'skip'],
  746. jump: function (obj, first) {
  747. if (!first) {
  748. $.ajax({
  749. url: 'pest_statis_form',
  750. type: 'post',
  751. data: {
  752. req: parameter,
  753. e_id: $('#imei').val(),
  754. page: obj.curr,
  755. tbegin: tbegin,
  756. tend: tend,
  757. pestCategory: pestCategory
  758. },
  759. beforeSend: function (XMLHttpRequest) {
  760. layui.use(['layer'], function () {
  761. var layer = layui.layer;
  762. //注意,layer.msg默认3秒自动关闭,如果数据加载耗时比较长,需要设置time
  763. loadingFlag = layer.msg('正在读取数据,请稍候……', {
  764. icon: 16,
  765. shade: 0.01,
  766. shadeClose: false
  767. });
  768. })
  769. },
  770. complete: function (XMLHttpRequest, textStatus) {
  771. layer.close(loadingFlag);
  772. },
  773. dataType: "json",
  774. success: function (data) {
  775. if (data.dat.length) {
  776. $('#page').parent().show();
  777. pestFill_Table('datatable', data.dat);
  778. } else {
  779. $('#page').parent().hide();
  780. datFill_null_Table('datatable');
  781. }
  782. }
  783. })
  784. }
  785. }
  786. })
  787. })
  788. }
  789. function datFill_null_Table(table_id) {
  790. $("#datatable tr:not(:first)").remove();
  791. var table = document.getElementById(table_id).children[1];
  792. var row = table.insertRow(table.rows.length);
  793. var c1 = row.insertCell(0);
  794. c1.setAttribute('colspan', '16');
  795. c1.setAttribute('class', 'nullData');
  796. c1.innerHTML = "暂无数据";
  797. scrollBar();
  798. }
  799. function datFill_Table(table_id, dat) {
  800. var table = document.getElementById(table_id).children[1];
  801. for (var i = 0; i < dat.length - 1; i++) {
  802. var row = table.insertRow(table.rows.length);
  803. if (dat[i].length == 0) {
  804. continue;
  805. }
  806. //JSON字符串转换JSON对象
  807. // var stat = eval('(' + dat[i].cbd_data + ')');
  808. var c1 = row.insertCell(0);
  809. c1.innerHTML = dat[i].pest_name;
  810. var c2 = row.insertCell(1);
  811. c2.innerHTML = dat[i].pest_num;
  812. var c3 = row.insertCell(2);
  813. if (dat[i].crop_name == '') {
  814. c3.innerHTML = '无';
  815. } else {
  816. c3.innerHTML = dat[i].crop_name;
  817. }
  818. var c4 = row.insertCell(3);
  819. if (dat[i].pest_case == '') {
  820. c4.innerHTML = '无';
  821. } else {
  822. c4.innerHTML = dat[i].pest_case;
  823. }
  824. var c5 = row.insertCell(4);
  825. c5.innerHTML = dat[i].add_time;
  826. }
  827. }
  828. function pestFill_Table(table_id, dat) {
  829. $("#datatable tr:not(:first)").remove();
  830. var table = document.getElementById(table_id).children[1];
  831. for (var i = 0; i < dat.length; i++) {
  832. var row = table.insertRow(table.rows.length);
  833. var row = table.insertRow(table.rows.length);
  834. var c1 = row.insertCell(0);
  835. c1.innerHTML = dat[i].name;
  836. var c2 = row.insertCell(1);
  837. c2.innerHTML = dat[i].y;
  838. }
  839. scrollBar();
  840. }
  841. // 绘制饼状图
  842. function drawPieChart(data) {
  843. pieChart = Highcharts.chart('pie-chart', {
  844. chart: {
  845. spacing: [40, 0, 40, 0]
  846. },
  847. title: {
  848. floating: true,
  849. text: '害虫比例'
  850. },
  851. tooltip: {
  852. pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  853. },
  854. credits: { //去掉默认的highcharts.com
  855. enabled: false
  856. },
  857. plotOptions: {
  858. pie: {
  859. allowPointSelect: true,
  860. cursor: 'pointer',
  861. dataLabels: {
  862. enabled: true,
  863. format: '<b>{point.name}</b>: {point.percentage:.1f} %',
  864. style: {
  865. color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
  866. }
  867. },
  868. point: {
  869. events: {
  870. mouseOver: function (e) { // 鼠标滑过时动态更新标题
  871. // 标题更新函数,API 地址:https://api.hcharts.cn/highcharts#Chart.setTitle
  872. pieChart.setTitle({
  873. text: e.target.name + '\t' + e.target.y + ' 只'
  874. });
  875. }
  876. ,
  877. click: function (e) { // 同样的可以在点击事件里处理
  878. // pieChart.setTitle({
  879. // text: e.point.name+ '\t'+ e.point.y + ' %'
  880. // });
  881. // console.log(e)
  882. var valnum = e.point.key
  883. $('#wormType').val(valnum)
  884. $('#wormType').change()
  885. }
  886. }
  887. },
  888. }
  889. },
  890. series: [{
  891. type: 'pie',
  892. innerSize: '80%',
  893. name: '害虫比例',
  894. data: data
  895. }]
  896. }, function (c) { // 图表初始化完毕后的会掉函数
  897. // 环形图圆心
  898. var centerY = c.series[0].center[1],
  899. titleHeight = parseInt(c.title.styles.fontSize);
  900. // 动态设置标题位置
  901. c.setTitle({
  902. y: centerY + titleHeight / 2
  903. });
  904. });
  905. }
  906. // 绘制列表
  907. function drawList(data) {
  908. if (data.length) {
  909. pestFill_Table('datatable', data);
  910. } else {
  911. datFill_null_Table('datatable');
  912. }
  913. }
  914. //点击增加折线图数值
  915. function addDataNum() {
  916. var array = insectData.worm;
  917. num += numdata
  918. var arr = new Array()
  919. for (var i = 0; i < array.length; i++) {
  920. arr[i] = []
  921. arr[i][0] = array[i][0]
  922. // arr[i][1] = array[i][1] + 100
  923. arr[i][1] = array[i][1] + num
  924. }
  925. renderCharts(insectData.tickInterval, insectData.atData, insectData.ahData, arr, insectData.wormName, insectData.plotLine)
  926. }
  927. function getCharts(obj, flag) {
  928. $('#searchTime').val('')
  929. $('#begin').val('')
  930. $('#end').val('')
  931. if ($(obj).hasClass('active')) {
  932. return false;
  933. } else {
  934. $('.searchCover .btn-white').removeClass('active');
  935. $(obj).addClass('active')
  936. }
  937. var newDate = new Date();
  938. var begin;
  939. var end;
  940. var endNewDate = new Date(newDate.getTime() + 24 * 60 * 60 * 1000);
  941. end = endNewDate.getFullYear() + '-' + (endNewDate.getMonth() + 1) + '-' + endNewDate.getDate();
  942. if (flag == 1) {
  943. end = getTime(-1);
  944. begin = getTime(0);
  945. var spaceNum = 60 * 60 * 1000;
  946. } else if (flag == 2) {
  947. begin = getTime(30);
  948. var spaceNum = 24 * 60 * 60 * 1000;
  949. } else if (flag == 3) {
  950. begin = getTime(182.5);
  951. var spaceNum = 30 * 24 * 60 * 60 * 1000;
  952. } else if (flag == 4) {
  953. begin = getTime(365);
  954. var spaceNum = 30 * 24 * 60 * 60 * 1000;
  955. }
  956. getWormData(begin, end, spaceNum);
  957. objTime = {
  958. begin: begin,
  959. end: end
  960. }
  961. // console.log(objTime)
  962. // return objTime
  963. }
  964. // 获取想要时间 num为天数
  965. function getTime(num) {
  966. // 先获取当前时间
  967. var curDate = (new Date()).getTime();
  968. // 将半年的时间单位换算成毫秒
  969. var halfYear = num * 24 * 3600 * 1000;
  970. var pastResult = curDate - halfYear; // 半年前的时间(毫秒单位)
  971. // 日期函数,定义起点为半年前
  972. var pastDate = new Date(pastResult),
  973. pastYear = pastDate.getFullYear(),
  974. pastMonth = pastDate.getMonth() + 1,
  975. pastDay = pastDate.getDate();
  976. return pastYear + '-' + pastMonth + '-' + pastDay;
  977. }
  978. function datsub_filter() {
  979. $('.searchCover .btn-white').removeClass('active');
  980. var tbegin = $('#begin').val();
  981. var tend = $('#end').val();
  982. if (tbegin && tend) {
  983. getWormData(tbegin, tend, 24 * 60 * 60 * 1000)
  984. } else {
  985. layer.msg('请填写时间段')
  986. }
  987. }
  988. function table_sub_filter() {
  989. var pestCategory = $('#pestCategory').val();
  990. var tbegin = $('#tableBegin').val();
  991. var tend = $('#tableEnd').val();
  992. if ((tbegin && tend) || pestCategory) {
  993. $.ajax({
  994. url: 'pest_statis_form',
  995. type: 'post',
  996. data: {
  997. req: 'filter',
  998. 'e_id': $('#imei').val(),
  999. tbegin: tbegin,
  1000. tend: tend,
  1001. pestCategory: pestCategory,
  1002. page: 1
  1003. },
  1004. beforeSend: function (XMLHttpRequest) {
  1005. layui.use(['layer'], function () {
  1006. var layer = layui.layer;
  1007. //注意,layer.msg默认3秒自动关闭,如果数据加载耗时比较长,需要设置time
  1008. loadingFlag = layer.msg('正在读取数据,请稍候……', {
  1009. icon: 16,
  1010. shade: 0.01,
  1011. shadeClose: false
  1012. });
  1013. })
  1014. },
  1015. complete: function (XMLHttpRequest, textStatus) {
  1016. layer.close(loadingFlag);
  1017. },
  1018. dataType: "json",
  1019. success: function (data) {
  1020. if (data.dat.length) {
  1021. $('#page').parent().show();
  1022. pestFill_Table('datatable', data.dat);
  1023. } else {
  1024. $('#page').parent().hide();
  1025. datFill_null_Table('datatable');
  1026. }
  1027. initPage(data.nums, 'filter', tbegin, tend, pestCategory);
  1028. }
  1029. })
  1030. } else {
  1031. layer.msg('请至少选择一项筛选')
  1032. }
  1033. }
  1034. </script>
  1035. </body>
  1036. </html>