cbd_pest_data.html 31 KB

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