cbd_pest_data.1.html 29 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093
  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. overflow: hidden;
  16. background: #fff;
  17. }
  18. /* table th {
  19. white-space: nowrap;
  20. }
  21. table td {
  22. white-space: nowrap;
  23. }
  24. .form-group {
  25. display: inline-block;
  26. }
  27. #distpicker5 {
  28. display: inline-block;
  29. }
  30. .unusual-title,
  31. .enter-form {
  32. margin: 6px 0;
  33. }
  34. .form-group {
  35. display: inline-block;
  36. margin-top: 6px;
  37. }
  38. .sx-title {
  39. margin-left: 20px;
  40. }
  41. .btn-shaixuan {
  42. margin-left: 40px;
  43. }
  44. .fl {
  45. float: left;
  46. }
  47. .fr {
  48. float: right;
  49. }
  50. .clearfix:after {
  51. content: "";
  52. display: block;
  53. clear: both;
  54. height: 0;
  55. visibility: hidden;
  56. }
  57. .clearfix {
  58. *zoom: 1;
  59. }
  60. .container-wrap {
  61. margin: 30px 0;
  62. }
  63. .container-cartogram>div {
  64. width: 100%;
  65. margin: 0 10px;
  66. height: 300px;
  67. text-align: center;
  68. line-height: 300px;
  69. font-size: 22px;
  70. color: #8a8a8a;
  71. position: relative;
  72. }
  73. .container-cartogram>div>div {
  74. width: 100%;
  75. height: 100%;
  76. }
  77. .container-cartogram>div>.hint {
  78. width: 100%;
  79. height: 100%;
  80. position: absolute;
  81. }
  82. .widget-content {
  83. overflow-x: scroll;
  84. padding-top: 0;
  85. }
  86. .searchBox {
  87. text-align: right;
  88. margin-right: 100px;
  89. margin-bottom: 30px;
  90. }
  91. #searchBtn {
  92. margin-bottom: 10px;
  93. margin-left: 10px;
  94. } */
  95. body {
  96. overflow: hidden;
  97. background: #fff;
  98. }
  99. .searchCover {
  100. margin: 20px 0;
  101. }
  102. .peatdata {
  103. padding: 0 1px 0 0;
  104. min-width: 750px;
  105. overflow-x: scroll;
  106. }
  107. .table,
  108. .table.table-striped>thead>tr>th {
  109. text-align: center;
  110. }
  111. table td {
  112. vertical-align: middle !important;
  113. }
  114. .nullData {
  115. width: 100%;
  116. height: 500px;
  117. background: #ddd;
  118. text-align: center;
  119. line-height: 500px;
  120. font-size: 20px;
  121. border: 1px solid #ddd;
  122. }
  123. .container-wrap {
  124. margin: 30px 0;
  125. }
  126. .container-cartogram>div {
  127. width: 100%;
  128. margin: 0 10px;
  129. height: 300px;
  130. text-align: center;
  131. line-height: 300px;
  132. font-size: 22px;
  133. color: #8a8a8a;
  134. position: relative;
  135. }
  136. .container-cartogram>div>div {
  137. width: 100%;
  138. height: 100%;
  139. }
  140. .container-cartogram>div>.hint {
  141. width: 100%;
  142. height: 100%;
  143. position: absolute;
  144. }
  145. .fl {
  146. float: left;
  147. }
  148. .fr {
  149. float: right;
  150. }
  151. .clearfix:after {
  152. content: "";
  153. display: block;
  154. clear: both;
  155. height: 0;
  156. visibility: hidden;
  157. }
  158. .clearfix {
  159. *zoom: 1;
  160. }
  161. #wormType {
  162. min-width: 150px;
  163. }
  164. .timeStage {
  165. display: none;
  166. }
  167. .downTitle {
  168. text-align: right;
  169. line-height: 27px;
  170. padding-left: 0;
  171. margin-bottom: 5px;
  172. }
  173. .downContent {
  174. padding-left: 0;
  175. margin-bottom: 5px;
  176. }
  177. .title{
  178. font-size: 20px;
  179. border-left: 5px solid #438eb9;
  180. padding-left: 12px;
  181. color: #438eb9;
  182. font-weight: 700;
  183. }
  184. .manualBtn{
  185. float: right;
  186. }
  187. </style>
  188. </head>
  189. <body>
  190. <div class="content">
  191. <div class="page-header">
  192. <span class="headerPlace" onclick="goback()">
  193. <img src="{% static '/img/gobackIcon.png' %}" alt="">返回
  194. </span>
  195. </div>
  196. <div>
  197. <div class="title">
  198. 自动害虫统计
  199. </div>
  200. <button type="button" onclick="openDetialPage('manual_pest_data?e_id={{ equip_id }}')" class="btn btn-sm btn-primary manualBtn">手动害虫统计</button>
  201. </div>
  202. <div class="searchCover">
  203. 统计图筛选条件:
  204. <input type="text" id="searchTime" autocomplete="off" style="width: 180px;">
  205. <input type="hidden" id="begin" name="begin">
  206. <input type="hidden" id="end" name="end">
  207. <button type="button" onclick="datsub_filter()" class="btn btn-sm btn-primary">筛选</button>
  208. 害虫种类:
  209. <select name="" id="wormType">
  210. <option value="">暂无害虫种类</option>
  211. </select>
  212. </div>
  213. <div class="container-wrap">
  214. <div class="container-cartogram clearfix">
  215. <div class="echartsBox fl" style="width:63%">
  216. <div class="hint"></div>
  217. <div class="fl" id="line-chart"></div>
  218. </div>
  219. <div class="echartsBox fl" style="width:30%">
  220. <div class="hint"></div>
  221. <div class="fl" id="pie-chart"></div>
  222. </div>
  223. </div>
  224. <div>
  225. <input id="imei" type="hidden" type="text" value={{ equip_id }}>
  226. </div>
  227. </div>
  228. <div class="searchCover">
  229. 统计图筛选条件:
  230. <input type="text" id="tableSearchTime" autocomplete="off" style="width: 180px;">
  231. <input type="hidden" id="tableBegin" name="begin">
  232. <input type="hidden" id="tableEnd" name="end"> 种类查找:
  233. <div style="display: inline-block;width: 187px;">
  234. <form class="layui-form" action="" lay-filter="demoForm">
  235. <select name="pestCategory" id="pestCategory" lay-verify="" lay-search>
  236. <option value="">害虫种类为空</option>
  237. </select>
  238. </form>
  239. </div>
  240. <button type="button" onclick="table_sub_filter()" class="btn btn-sm btn-primary">筛选</button>
  241. <button type="button" class="btn btn-success btn-sm" onclick="decideExport()">导出</button>
  242. </div>
  243. <div class="innerTable peatdata">
  244. <table id="datatable" class="table table-striped table-hover">
  245. <thead>
  246. <tr>
  247. <!-- <th>设备ID</th>
  248. <th>设备名称</th> -->
  249. <th>害虫名称</th>
  250. <th>害虫数量</th>
  251. <!-- <th>作物名称</th> -->
  252. <!-- <th>虫害程度</th> -->
  253. <!-- <th>拍照时间</th> -->
  254. <th>统计时间</th>
  255. </tr>
  256. </thead>
  257. <tbody>
  258. {% for i in descs %}
  259. <tr>
  260. <td>{{ i.pest_name }}</td>
  261. <td>{{ i.pest_num }}</td>
  262. <td>{{ i.crop_name }}</td>
  263. <td>{{ i.pest_case }}</td>
  264. <td>{{ i.add_time }}</td>
  265. <!-- <td>
  266. <a class="fpsb-link" href="allot?uname={{ user.username }}" style="display: inline-block;">
  267. <button class="btn btn-primary btn-shaixuan">分配设备</button>
  268. </a>
  269. </td> -->
  270. </tr>
  271. {% endfor %}
  272. </tbody>
  273. </table>
  274. <div class="fenpei-bottom ">
  275. <input type="hidden" id="totalPage" value={{ nums }}>
  276. <div id="page" style="text-align: center;"></div>
  277. </div>
  278. </div>
  279. <!-- 导出提示框 -->
  280. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  281. <div class="modal-dialog" role="document">
  282. <div class="modal-content">
  283. <div class="modal-header">
  284. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  285. <span aria-hidden="true">&times;</span>
  286. </button>
  287. <h4 class="modal-title" id="myModalLabel">导出信息</h4>
  288. </div>
  289. <div class="modal-body">
  290. <div class="row">
  291. <div class="col-xs-3 downTitle">文件名称:</div>
  292. <div class="col-xs-8 downContent" style=>
  293. <input type="text" id="filename" placeholder="请输入文件的名称" maxlength="15" class="col-xs-12">
  294. </div>
  295. <div class="col-xs-3 downTitle">下载类型:</div>
  296. <div class="col-xs-8 downContent">
  297. <select name="downtype" id="downtype" onchange="downtype(this)" class="col-xs-12">
  298. <option value="1">全部</option>
  299. <option value="2">时间段</option>
  300. </select>
  301. </div>
  302. <div class="col-xs-3 downTitle timeStage">时间段:</div>
  303. <div class="col-xs-8 downContent timeStage">
  304. <input type="text" id="timSelectBox3" autocomplete="off" placeholder="请选择时间段 " class="col-xs-12">
  305. <input type="hidden" id="downbegin" name="begin">
  306. <input type="hidden" id="downend" name="end">
  307. </div>
  308. </div>
  309. </div>
  310. <div class="modal-footer">
  311. <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
  312. <button type="button" class="btn btn-primary btn-sm" onclick="operation()">下载</button>
  313. </div>
  314. </div>
  315. </div>
  316. </div>
  317. </div>
  318. <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
  319. <script src="{% static '/lib/layui/layui.all.js' %}"></script>
  320. <!-- 统计图 -->
  321. <script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
  322. <script src="{% static '/lib/js/echarts.min.js' %}"></script>
  323. <script src="{% static '/js/reportmanage/cbd_pest_library.js' %}?versions=0.5.0" type="text/javascript"></script>
  324. <script>
  325. $.ajaxSetup({
  326. data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
  327. });
  328. </script>
  329. <!-- <script src="{% static '/js/common.js' %}?versions=0.5.0" type="text/javascript"></script> -->
  330. <script>
  331. layui.use(['laydate', 'form'], function () {
  332. var laydate = layui.laydate;
  333. var form = layui.form;
  334. var _layDateMark = (new Date()).getTime();
  335. $('#searchTime').attr('lay-key', '11' + _layDateMark);
  336. $('#tableSearchTime').attr('lay-key', '22' + _layDateMark);
  337. $('#timSelectBox3').attr('lay-key', '33' + _layDateMark);
  338. //执行一个laydate实例
  339. laydate.render({
  340. elem: '#searchTime' //指定元素
  341. , type: 'date'
  342. , range: true
  343. , done: function (value, date) {
  344. var dateArray = value.split(' - ')
  345. $('#begin').val(dateArray[0]);
  346. $('#end').val(dateArray[1]);
  347. }
  348. });
  349. //执行一个laydate实例
  350. laydate.render({
  351. elem: '#tableSearchTime' //指定元素
  352. , type: 'date'
  353. , range: true
  354. , done: function (value, date) {
  355. var dateArray = value.split(' - ')
  356. $('#tableBegin').val(dateArray[0]);
  357. $('#tableEnd').val(dateArray[1]);
  358. }
  359. });
  360. //执行一个laydate实例
  361. laydate.render({
  362. elem: '#timSelectBox3' //指定元素
  363. , range: true
  364. , done: function (value, date) {
  365. var dateArray = value.split(' - ')
  366. $('#downbegin').val(dateArray[0])
  367. $('#downend').val(dateArray[1])
  368. }
  369. });
  370. });
  371. $.ajax({
  372. url: 'pest_at_ah',
  373. type: 'post',
  374. data: {
  375. e_id: $('#imei').val(),
  376. 'tbegin': '',
  377. 'tend': ''
  378. },
  379. beforeSend: function (XMLHttpRequest) {
  380. layui.use(['layer'], function () {
  381. var layer = layui.layer;
  382. //注意,layer.msg默认3秒自动关闭,如果数据加载耗时比较长,需要设置time
  383. loadingFlag= layer.msg('正在读取数据,请稍候……', { icon: 16, shade: 0.01,shadeClose:false});
  384. })
  385. },
  386. complete: function (XMLHttpRequest, textStatus) {
  387. layer.close(loadingFlag);
  388. },
  389. dataType: "json",
  390. success: function (data) {
  391. wormEcharts(data)
  392. }
  393. })
  394. $.ajax({
  395. url: 'pest_statis_form',
  396. type: 'post',
  397. data: {
  398. e_id: $('#imei').val(),
  399. page: 1
  400. },
  401. // beforeSend: function (XMLHttpRequest) {
  402. // layui.use(['layer'], function () {
  403. // var layer = layui.layer;
  404. // //注意,layer.msg默认3秒自动关闭,如果数据加载耗时比较长,需要设置time
  405. // loadingFlag= layer.msg('正在读取数据,请稍候……', { icon: 16, shade: 0.01,shadeClose:false});
  406. // })
  407. // },
  408. // complete: function (XMLHttpRequest, textStatus) {
  409. // layer.close(loadingFlag);
  410. // },
  411. dataType: "json",
  412. success: function (data) {
  413. if (data.dat.length) {
  414. var str = '<option value="">害虫种类</option>';
  415. for (var i = 0; i < data.kind.length; i++) {
  416. str += '<option value="' + data.kind[i] + '">' + insect_dict[data.kind[i]] + '</option>';
  417. }
  418. $('#pestCategory').html(str);
  419. var form = layui.form;
  420. form.render('select');
  421. $('#page').parent().show();
  422. pestFill_Table('datatable', data.dat);
  423. } else {
  424. $('#page').parent().hide();
  425. datFill_null_Table('datatable');
  426. $('#pestCategory').html('<option value="">害虫种类为空</option>');
  427. var form = layui.form;
  428. form.render('select');
  429. }
  430. initPage(data.nums)
  431. }
  432. })
  433. function downtype(obj) {
  434. if ($(obj).val() == 2) {
  435. $('.timeStage').show();
  436. } else {
  437. $('.timeStage').hide();
  438. $('#downbegin').val('');
  439. $('#downend').val('');
  440. $('#downtimSelectBox').val('');
  441. }
  442. }
  443. // 导出提示框
  444. function decideExport() {
  445. $('#myModal').modal('toggle')
  446. }
  447. //导出
  448. function operation() {
  449. if (!$('#filename').val()) {
  450. layer.msg("请填写文件名!", { time: 2000 });
  451. return false;
  452. }
  453. if ($('#downtype').val() == 2) {
  454. if (!($('#downbegin').val() && $('#downbegin').val())) {
  455. layer.msg("请选择时间段!", { time: 2000 });
  456. return false;
  457. }
  458. }
  459. window.location.href = 'pest_export?id=' + $('#imei').val() + '&begin=' + $('#downbegin').val() + '&end=' + $('#downend').val() + '&filename=' + $('#filename').val()
  460. }
  461. function initPage(count, parameter, tbegin, tend, pestCategory) {
  462. layui.use('laypage', function () {
  463. var laypage = layui.laypage;
  464. laypage.render({
  465. elem: 'page' //注意,这里的 test1 是 ID,不用加 # 号
  466. , count: count
  467. , theme: '#428BCA'
  468. , layout: ['prev', 'page', 'next', 'skip']
  469. , jump: function (obj, first) {
  470. if (!first) {
  471. $.ajax({
  472. url: 'pest_statis_form',
  473. type: 'post',
  474. data: {
  475. req: parameter,
  476. e_id: $('#imei').val(),
  477. page: obj.curr,
  478. tbegin: tbegin,
  479. tend: tend,
  480. pestCategory: pestCategory
  481. },
  482. beforeSend: function (XMLHttpRequest) {
  483. layui.use(['layer'], function () {
  484. var layer = layui.layer;
  485. //注意,layer.msg默认3秒自动关闭,如果数据加载耗时比较长,需要设置time
  486. loadingFlag= layer.msg('正在读取数据,请稍候……', { icon: 16, shade: 0.01,shadeClose:false });
  487. })
  488. },
  489. complete: function (XMLHttpRequest, textStatus) {
  490. layer.close(loadingFlag);
  491. },
  492. dataType: "json",
  493. success: function (data) {
  494. if (data.dat.length) {
  495. $('#page').parent().show();
  496. pestFill_Table('datatable', data.dat);
  497. } else {
  498. $('#page').parent().hide();
  499. datFill_null_Table('datatable');
  500. }
  501. }
  502. })
  503. }
  504. }
  505. })
  506. })
  507. }
  508. function datFill_null_Table(table_id) {
  509. $("#datatable tr:not(:first)").remove();
  510. var table = document.getElementById(table_id).children[1];
  511. var row = table.insertRow(table.rows.length);
  512. var c1 = row.insertCell(0);
  513. c1.setAttribute('colspan', '16');
  514. c1.setAttribute('class', 'nullData');
  515. c1.innerHTML = "暂无数据";
  516. scrollBar();
  517. }
  518. function datFill_Table(table_id, dat) {
  519. var table = document.getElementById(table_id).children[1];
  520. for (var i = 0; i < dat.length - 1; i++) {
  521. var row = table.insertRow(table.rows.length);
  522. if (dat[i].length == 0) { continue; }
  523. //JSON字符串转换JSON对象
  524. // var stat = eval('(' + dat[i].cbd_data + ')');
  525. var c1 = row.insertCell(0);
  526. c1.innerHTML = dat[i].pest_name;
  527. var c2 = row.insertCell(1);
  528. c2.innerHTML = dat[i].pest_num;
  529. var c3 = row.insertCell(2);
  530. if (dat[i].crop_name == '') {
  531. c3.innerHTML = '无';
  532. } else {
  533. c3.innerHTML = dat[i].crop_name;
  534. }
  535. var c4 = row.insertCell(3);
  536. if (dat[i].pest_case == '') {
  537. c4.innerHTML = '无';
  538. } else {
  539. c4.innerHTML = dat[i].pest_case;
  540. }
  541. var c5 = row.insertCell(4);
  542. c5.innerHTML = dat[i].add_time;
  543. }
  544. }
  545. function pestFill_Table(table_id, dat) {
  546. $("#datatable tr:not(:first)").remove();
  547. var table = document.getElementById(table_id).children[1];
  548. for (var i = 0; i < dat.length; i++) {
  549. var row = table.insertRow(table.rows.length);
  550. var row = table.insertRow(table.rows.length);
  551. var c1 = row.insertCell(0);
  552. c1.innerHTML = insect_dict[dat[i].pest];
  553. var c2 = row.insertCell(1);
  554. c2.innerHTML = dat[i].pestnum;
  555. var c3 = row.insertCell(2);
  556. c3.innerHTML = dat[i].time;
  557. }
  558. scrollBar();
  559. }
  560. var lineChart = echarts.init(document.getElementById('line-chart'));
  561. lineOption = {
  562. title: {
  563. text: '害虫统计',
  564. textStyle: {
  565. color: '#029eef',
  566. fontSize: 14
  567. }
  568. },
  569. legend: {
  570. 'right': '10%',
  571. data: ['温度', '湿度', '害虫个数']
  572. },
  573. tooltip: {
  574. trigger: 'axis',
  575. formatter: function (params) {
  576. if (params.length > 1) {
  577. var returnData = '';
  578. var time = '';
  579. for (let g in params) {
  580. if (params[g].componentIndex == 1) {
  581. returnData += params[g].seriesName + ':' + params[g].value + 'RH<br/>';
  582. } else if (params[g].componentIndex == 2) {
  583. returnData += params[g].seriesName + ':' + params[g].value + '°C<br/>';
  584. } else {
  585. returnData += params[g].seriesName + ':' + params[g].value + '只<br/>';
  586. }
  587. time = params[g].axisValue;
  588. // returnData += params[g].seriesName + ':' + params[g].value + '<br/>';
  589. }
  590. return time + '<br/>' + returnData;
  591. }
  592. }
  593. },
  594. xAxis: {
  595. data: []
  596. },
  597. yAxis: [{
  598. axisLine: { show: true },
  599. type:'value'
  600. }],
  601. toolbox: {
  602. left: 'center',
  603. },
  604. dataZoom: {
  605. show: true
  606. },
  607. grid: {
  608. left: '3%',
  609. right: '4%',
  610. bottom: '6%',
  611. containLabel: true
  612. },
  613. series: []
  614. }
  615. window.onresize = function () {
  616. //当窗口发生变化时图表显示
  617. lineChart.resize();
  618. pieChart.resize();
  619. }
  620. var color = ['#5689f2', '#00c1de', '#4caf50', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800'];
  621. var pieChart = echarts.init(document.getElementById('pie-chart'));
  622. pieOption = {
  623. title: {
  624. text: '害虫比例',
  625. textStyle: {
  626. color: '#029eef'
  627. }
  628. },
  629. tooltip: {
  630. trigger: 'item',
  631. formatter: "{a} <br/>{b} : {c} ({d}%)"
  632. },
  633. legend: {
  634. orient: 'vertical',
  635. left: 'right',
  636. data: []
  637. },
  638. grid: {
  639. left: '3%',
  640. right: '4%',
  641. bottom: '6%',
  642. containLabel: true
  643. },
  644. series: [
  645. {
  646. name: '害虫种类',
  647. type: 'pie',
  648. radius: '55%',
  649. radius: ['50%', '70%'],
  650. data: [],
  651. itemStyle: {
  652. emphasis: {
  653. shadowBlur: 10,
  654. shadowOffsetX: 0,
  655. shadowColor: 'rgba(0, 0, 0, 0.5)'
  656. }
  657. }
  658. }
  659. ]
  660. };
  661. function wormEcharts(dat) {
  662. var category = []; //害虫种类
  663. var lineVal = []; //折线数据(时间+值+温淑渡)
  664. var typeValue = []; //饼状图值
  665. var timelist = []; //饼状图时间
  666. var legend = ['温度', '湿度', '害虫个数'];
  667. var kindNum = dat.kind;
  668. var type1 = [];
  669. var typeValue = [];
  670. if (dat.kind.length) {
  671. for (var i = 0; i < dat.dat.length; i++) {
  672. if (dat.dat[i].result) {
  673. for (var jj = 0; jj < dat.dat[i].result.split('#').length; jj++) {
  674. var serialNum1 = dat.dat[i].result.split('#')[jj].split(',');
  675. if (type1.indexOf(serialNum1[0]) == -1) {
  676. var arr = [];
  677. type1.push(serialNum1[0]);
  678. // arr.push(serialNum1[1]);
  679. typeValue.push(parseInt(serialNum1[1]));
  680. } else {
  681. var curnum = typeValue[type1.indexOf(serialNum1[0])];
  682. typeValue[type1.indexOf(serialNum1[0])] = parseInt(curnum) + parseInt(serialNum1[1])
  683. }
  684. }
  685. }
  686. // 害虫比例
  687. if (type1.length) {
  688. pieOption.series[0].data = [];
  689. for (var a = 0; a < type1.length; a++) {
  690. var data = '{ value:' + typeValue[a] + ', name:"' + insect_dict[type1[a]] + '"}';
  691. pieOption.series[0].data.push(eval('(' + data + ')'));
  692. }
  693. $('#pie-chart').prev().html('').css('z-index', 0);
  694. pieChart.setOption(pieOption);
  695. } else {
  696. pieOption.series[0].data = [];
  697. pieChart.setOption(pieOption);
  698. $('#pie-chart').prev().html('暂无害虫数据').css('z-index', 99);
  699. }
  700. if (dat.dat[i].result && dat.dat[i].ah && dat.dat[i].at) { //判断是否有温湿度和害虫结果
  701. for (var jj = 0; jj < dat.dat[i].result.split('#').length; jj++) {
  702. var serialNum1 = dat.dat[i].result.split('#')[jj].split(',');
  703. if (category.indexOf(serialNum1[0]) == -1) {
  704. category.unshift(serialNum1[0]);//添加种类
  705. var currval = {
  706. time: [],
  707. val: [],
  708. at: [],
  709. ah: []
  710. }
  711. currval.time.unshift(dat.dat[i].time);
  712. currval.val.unshift(serialNum1[1]);
  713. currval.at.unshift((dat.dat[i].at / 10).toFixed(2));
  714. currval.ah.unshift((dat.dat[i].ah / 10).toFixed(2));
  715. lineVal.unshift(currval)
  716. } else {
  717. lineVal[category.indexOf(serialNum1[0])].time.unshift(dat.dat[i].time);
  718. lineVal[category.indexOf(serialNum1[0])].val.unshift(serialNum1[1]);
  719. lineVal[category.indexOf(serialNum1[0])].at.unshift((dat.dat[i].at / 10).toFixed(2));
  720. lineVal[category.indexOf(serialNum1[0])].ah.unshift((dat.dat[i].ah / 10).toFixed(2));
  721. }
  722. }
  723. }
  724. if (i == dat.dat.length - 1) {
  725. console.log(category)
  726. if(dat.msg_conf.length>2){
  727. var msg_conf = eval('('+dat.msg_conf+')');
  728. var appointPestNameArr = msg_conf.appointPestName.split('#');
  729. var appointPestNumArr = msg_conf.appointPestNum.split('#');
  730. }else{
  731. var msg_conf = {"newPest":"on","newPestName":"","pestCategory":"off","pestCategoryNum":"","appointPest":"off","appointPestName":[],"appointPestNum":"","pestTotal":"off","pestTotalNum":"","pestWarn":"off","phone":"15038203087"};
  732. var appointPestNameArr = [];
  733. var appointPestNumArr = [];
  734. }
  735. // 折线
  736. var html = '';
  737. for (var z = 0; z < category.length; z++) {
  738. html += '<option value="' + z + '">' + insect_dict[category[z]] + '</option>';
  739. if (z == category.length - 1) {
  740. if (html) {
  741. $('#wormType').html(html)
  742. } else {
  743. $('#wormType').html('<option value="">暂无害虫种类</option>')
  744. }
  745. }
  746. }
  747. //害虫种类切换
  748. $('#wormType').on('change', function () {
  749. var val = $(this).val();
  750. lineChart.clear();
  751. lineOption.series = [];
  752. for (var s = 0; s < 3; s++) {
  753. if (s == 0) {
  754. valarr = lineVal[val].at;
  755. } else if (s == 1) {
  756. valarr = lineVal[val].ah;
  757. } else {
  758. valarr = lineVal[val].val;
  759. }
  760. lineOption.series.unshift({
  761. name: legend[s],
  762. type: 'line',
  763. data: valarr,
  764. itemStyle: {
  765. normal: {
  766. color: color[s],
  767. shadowBlur: 1,
  768. shadowColor: color[s],
  769. borderColor: color[s],
  770. borderWidth: 2,
  771. backgroundColor: 'transparent'
  772. }
  773. },
  774. areaStyle: {
  775. normal: {
  776. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  777. offset: 0,
  778. color: color[s]
  779. }, {
  780. offset: 1,
  781. color: 'rgba(255, 2555, 255, 0.2)'
  782. }]),
  783. }
  784. }
  785. });
  786. if((appointPestNameArr.indexOf(category[val]) != -1 ) && s == 2){
  787. lineOption.series.unshift({
  788. name: '平行于y轴的趋势线',
  789. type: 'line',
  790. markLine: {
  791. name: 'aa',
  792. data: [
  793. {
  794. name: '阈值',
  795. yAxis: appointPestNumArr[appointPestNameArr.indexOf(category[val])],
  796. lineStyle: {//设置折线色颜色
  797. color: 'red'
  798. },
  799. },
  800. ],
  801. symbol: ['none', 'arrow'],//将箭头向左 默认值是向右的
  802. label: {
  803. show: true,
  804. position: 'middle',//markline描述位于中间 right,left,middle
  805. formatter: '{b}: {c}',//显示name中的描述
  806. }
  807. }
  808. })
  809. }
  810. if (s == 2) {
  811. $('#line-chart').prev().html('').css('z-index', 0);
  812. lineOption.xAxis.data = lineVal[val].time;
  813. lineChart.setOption(lineOption);
  814. }
  815. }
  816. })
  817. //填充统计图数据
  818. if ($('#wormType').val()) {
  819. lineChart.clear();
  820. lineOption.series = [];
  821. for (var s = 0; s < 3; s++) {
  822. if (s == 0) {
  823. valarr = lineVal[0].at;
  824. } else if (s == 1) {
  825. valarr = lineVal[0].ah;
  826. } else {
  827. valarr = lineVal[0].val;
  828. }
  829. lineOption.series.unshift({
  830. name: legend[s],
  831. type: 'line',
  832. data: valarr,
  833. itemStyle: {
  834. normal: {
  835. color: color[s],
  836. shadowBlur: 1,
  837. shadowColor: color[s],
  838. borderColor: color[s],
  839. borderWidth: 2,
  840. backgroundColor: 'transparent'
  841. }
  842. },
  843. areaStyle: {
  844. normal: {
  845. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  846. offset: 0,
  847. color: color[s]
  848. }, {
  849. offset: 1,
  850. color: 'rgba(255, 2555, 255, 0.2)'
  851. }]),
  852. }
  853. }
  854. });
  855. if((appointPestNameArr.indexOf(category[0]) != -1 ) && s == 2){
  856. lineOption.series.unshift({
  857. name: '平行于y轴的趋势线',
  858. type: 'line',
  859. markLine: {
  860. name: 'aa',
  861. data: [
  862. {
  863. name: '阈值',
  864. yAxis: appointPestNumArr[appointPestNameArr.indexOf(category[0])],
  865. lineStyle: {//设置折线色颜色
  866. color: 'red'
  867. },
  868. },
  869. ],
  870. symbol: ['none', 'arrow'],//将箭头向左 默认值是向右的
  871. label: {
  872. show: true,
  873. position: 'middle',//markline描述位于中间 right,left,middle
  874. formatter: '{b}: {c}',//显示name中的描述
  875. }
  876. }
  877. })
  878. }
  879. if (s == 2) {
  880. $('#line-chart').prev().html('').css('z-index', 0);
  881. lineOption.xAxis.data = lineVal[0].time;
  882. lineChart.setOption(lineOption);
  883. }
  884. }
  885. }
  886. }
  887. }
  888. }
  889. if (!dat.kind.length) {
  890. lineChart.clear();
  891. lineOption.series = [];
  892. // if (lineOption.series[0]) {
  893. // lineOption.series[0].data = [];
  894. // lineOption.series[1].data = [];
  895. // lineOption.series[2].data = [];
  896. // } else {
  897. // lineOption.series = [];
  898. // }
  899. lineOption.xAxis.data = [];
  900. pieOption.series[0].data = [];
  901. lineChart.setOption(lineOption);
  902. pieChart.setOption(pieOption);
  903. $('#line-chart').prev().html('暂无害虫数据').css('z-index', 99);
  904. $('#pie-chart').prev().html('暂无害虫数据').css('z-index', 99);
  905. $('#wormType').html('<option value="">暂无害虫种类</option>')
  906. }
  907. }
  908. pieChart.on("click", function (param) {
  909. pieConsole(param, '')
  910. });
  911. function pieConsole(param, type) {
  912. $.each($('#wormType').children(), function (idx, ele) {
  913. if (pieOption.series[param.seriesIndex].data[param.dataIndex].name == $(ele).html()) {
  914. $('#wormType').val($(ele).val())
  915. $('#wormType').change()
  916. }
  917. })
  918. // 获取data长度
  919. // console.log(pieOption.series[0].data.length);
  920. // 获取地N个data的值
  921. // console.log(pieOption);
  922. // 获取series中param.dataIndex事件对应的值
  923. // console.log(param.value);
  924. // console.log(param.name);
  925. // console.log(pieOption.series[param.seriesIndex].data[param.dataIndex].value);
  926. // console.log(pieOption.series[param.seriesIndex].data[param.dataIndex].name);
  927. //   clickFunc(param.dataIndex);//执行点击效果,触发相应js函数
  928. //param具体包含的方法见 https://blog.csdn.net/allenjay11/article/details/76033232
  929. // getPieData(type, param.name)
  930. //刷新页面
  931. // location.reload();
  932. // window.location.reload();
  933. }
  934. function datsub_filter() {
  935. var tbegin = $('#begin').val();
  936. var tend = $('#end').val();
  937. if (tbegin && tend) {
  938. $.ajax({
  939. url: 'pest_at_ah',
  940. type: 'post',
  941. data: {
  942. req: 'filter',
  943. 'e_id': $('#imei').val(),
  944. tbegin: tbegin,
  945. tend: tend
  946. },
  947. beforeSend: function (XMLHttpRequest) {
  948. layui.use(['layer'], function () {
  949. var layer = layui.layer;
  950. //注意,layer.msg默认3秒自动关闭,如果数据加载耗时比较长,需要设置time
  951. loadingFlag= layer.msg('正在读取数据,请稍候……', { icon: 16, shade: 0.01,shadeClose:false });
  952. })
  953. },
  954. complete: function (XMLHttpRequest, textStatus) {
  955. layer.close(loadingFlag);
  956. },
  957. dataType: "json",
  958. success: function (data) {
  959. wormEcharts(data)
  960. }
  961. })
  962. } else {
  963. layer.msg('请填写时间段')
  964. }
  965. }
  966. function table_sub_filter() {
  967. var pestCategory = $('#pestCategory').val();
  968. var tbegin = $('#tableBegin').val();
  969. var tend = $('#tableEnd').val();
  970. if ((tbegin && tend) || pestCategory) {
  971. $.ajax({
  972. url: 'pest_statis_form',
  973. type: 'post',
  974. data: {
  975. req: 'filter',
  976. 'e_id': $('#imei').val(),
  977. tbegin: tbegin,
  978. tend: tend,
  979. pestCategory: pestCategory,
  980. page: 1
  981. },
  982. beforeSend: function (XMLHttpRequest) {
  983. layui.use(['layer'], function () {
  984. var layer = layui.layer;
  985. //注意,layer.msg默认3秒自动关闭,如果数据加载耗时比较长,需要设置time
  986. loadingFlag= layer.msg('正在读取数据,请稍候……', { icon: 16, shade: 0.01,shadeClose:false });
  987. })
  988. },
  989. complete: function (XMLHttpRequest, textStatus) {
  990. layer.close(loadingFlag);
  991. },
  992. dataType: "json",
  993. success: function (data) {
  994. if (data.dat.length) {
  995. $('#page').parent().show();
  996. pestFill_Table('datatable', data.dat);
  997. } else {
  998. $('#page').parent().hide();
  999. datFill_null_Table('datatable');
  1000. }
  1001. initPage(data.nums, 'filter', tbegin, tend, pestCategory);
  1002. }
  1003. })
  1004. } else {
  1005. layer.msg('请至少选择一项筛选')
  1006. }
  1007. }
  1008. </script>
  1009. </body>
  1010. </html>