| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145 |
- {% load staticfiles %}
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
- <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
- <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
- <link rel="stylesheet" href="{% static '/lib/css/ace-skins.min.css' %}">
- <link rel="stylesheet" href="{% static '/lib/css/ace-rtl.min.css' %}">
- <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
- <link rel="stylesheet" href="{% static '/css/loading.css' %}?versions=0.5.0" />
- <style type="text/css">
- body {
- overflow: hidden;
- background: #fff;
- }
- /* 返回 */
- .headerPlace {
- font-size: 22px;
- color: #418fbb;
- cursor: pointer;
- }
- .headerPlace img {
- vertical-align: middle;
- margin-right: 10px;
- margin-top: -4px;
- }
- .searchCover {
- margin: 20px 0;
- }
- .peatdata {
- padding: 0 1px 0 0;
- min-width: 750px;
- overflow-x: scroll;
- }
- .table,
- .table.table-striped>thead>tr>th {
- text-align: center;
- }
- table td {
- vertical-align: middle !important;
- }
- .nullData {
- width: 100%;
- height: 500px;
- background: #ddd;
- text-align: center;
- line-height: 500px;
- font-size: 20px;
- border: 1px solid #ddd;
- }
- .container-wrap {
- margin: 30px 0;
- }
- .container-cartogram>div {
- width: 100%;
- /* margin: 0 10px; */
- height: 300px;
- text-align: center;
- line-height: 300px;
- font-size: 22px;
- color: #8a8a8a;
- position: relative;
- }
- .container-cartogram>div>div {
- width: 100%;
- height: 100%;
- }
- .container-cartogram>div>.hint {
- width: 100%;
- height: 100%;
- position: absolute;
- }
- .fl {
- float: left;
- }
- .fr {
- float: right;
- }
- .clearfix:after {
- content: "";
- display: block;
- clear: both;
- height: 0;
- visibility: hidden;
- }
- .clearfix {
- *zoom: 1;
- }
- #wormType {
- min-width: 150px;
- }
- .timeStage {
- display: none;
- }
- .downTitle {
- text-align: right;
- line-height: 27px;
- padding-left: 0;
- margin-bottom: 5px;
- }
- .downContent {
- padding-left: 0;
- margin-bottom: 5px;
- }
- .title {
- font-size: 20px;
- border-left: 5px solid #438eb9;
- padding-left: 12px;
- color: #438eb9;
- font-weight: 700;
- }
- .manualBtn {
- float: right;
- }
- button.btn.btn-sm.btn-white.active {
- background: #428bca !important;
- color: #fff !important;
- }
- /* 设备信息 */
- .userinfo {
- margin: 20px 0;
- font-size: 14px;
- }
- .userinfo .fa {
- font-size: 18px;
- color: #26b3ff;
- margin: 0px 5px;
- }
- .container-cartogram .wormGather {
- width: 17%;
- border: 1px solid #ddd;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- line-height: 34px;
- overflow: hidden;
- font-size: 12px;
- }
- .container-cartogram .wormGather>ul {
- padding: 0 10px;
- }
- .container-cartogram .wormGather>ul>li {
- display: flex;
- justify-content: space-between;
- border-bottom: 1px solid #e6e6e6;
- }
- #timeBox {
- font-size: 18px;
- }
- </style>
- </head>
- <body>
- <div class="content">
- <div class="page-header">
- <span class="headerPlace" onclick="goback('cbd_report')">
- <img src="{% static '/img/gobackIcon.png' %}" alt="">返回
- </span>
- </div>
- <div class="userinfo">
- <div class=" ">
- <i class="fa fa-user-o" aria-hidden="true"></i>
- 设备ID:
- <span class="userinfoTitle">{{ equip_id }}</span>
- 设备名称:
- <span class="userinfoTitle" id="equip_name">{{ename}}</span>
- </div>
- </div>
- <div>
- <div class="title">
- 自动害虫统计
- </div>
- <!-- <button type="button" onclick="openPage('manual_pest_data','{{ equip_id }}')" class="btn btn-sm btn-primary manualBtn">手动害虫统计</button> -->
- <button type="button" onclick="openDetialPage('manual_pest_data?e_id={{ equip_id }}')" class="btn btn-sm btn-primary manualBtn">手动害虫统计</button>
- </div>
- <div class="searchCover">
- 统计图筛选条件:
- <button type="button" onclick="getCharts(this,1)" class="btn btn-sm btn-white">当天</button>
- <button type="button" onclick="getCharts(this,2)" class="btn btn-sm btn-white active">近一月</button>
- <button type="button" onclick="getCharts(this,3)" class="btn btn-sm btn-white">近半年</button>
- <button type="button" onclick="getCharts(this,4)" class="btn btn-sm btn-white">近一年</button>
- <input type="text" id="searchTime" autocomplete="off" style="width: 180px;">
- <input type="hidden" id="begin" name="begin">
- <input type="hidden" id="end" name="end">
- <button type="button" onclick="datsub_filter()" class="btn btn-sm btn-primary">筛选</button>
- <button type="button" class="btn btn-success btn-sm" onclick="decideExport()">导出</button>
- <button type="button" class="btn btn-success btn-sm" onclick="addDataNum('','',24*60*60*1000)">害虫折线调整</button>
- </div>
- <div style="width:63%;text-align:right">
- 害虫种类:
- <select name="" id="wormType">
- <option value="">暂无害虫种类</option>
- </select>
- </div>
- <div class="container-wrap">
- <div class="container-cartogram clearfix">
- <div class="echartsBox fl" style="width:65%">
- <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>
- <div class="hint"></div>
- <div class="fl" id="line-chart"></div>
- </div>
- <!-- <div class="echartsBox wormGather fl">
- <ul id="wormUl">
-
- </ul>
- </div> -->
- <div class="echartsBox fl" style="width:35%">
- <div class="hint"></div>
- <div class="fl" id="pie-chart"></div>
- </div>
- </div>
- <div>
- <input id="imei" type="hidden" type="text" value={{ equip_id }}>
- </div>
- </div>
- <div class="searchCover">
- 统计图筛选时间:<span id="timeBox"></span>
- </div>
- <div class="innerTable peatdata">
- <table id="datatable" class="table table-striped table-hover">
- <thead>
- <tr>
- <th>害虫名称</th>
- <th>害虫数量</th>
- <!-- <th>统计时间</th> -->
- </tr>
- </thead>
- <tbody>
- </tbody>
- <!-- <tbody>
- {% for i in descs %}
- <tr>
- <td>{{ i.pest_name }}</td>
- <td>{{ i.pest_num }}</td>
- <td>{{ i.crop_name }}</td>
- <td>{{ i.pest_case }}</td>
- <td>{{ i.add_time }}</td>
- </tr>
- {% endfor %}
- </tbody> -->
- </table>
- <!-- <div class="fenpei-bottom ">
- <input type="hidden" id="totalPage" value={{ nums }}>
- <div id="page" style="text-align: center;"></div>
- </div> -->
- </div>
- <!-- 导出提示框 -->
- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
- <h4 class="modal-title" id="myModalLabel">导出信息</h4>
- </div>
- <div class="modal-body">
- <div class="row">
- <div class="col-xs-3 downTitle">文件名称:</div>
- <div class="col-xs-8 downContent" style=>
- <input type="text" id="filename" placeholder="请输入文件的名称" maxlength="15"
- class="col-xs-12">
- </div>
- <div class="col-xs-3 downTitle">下载类型:</div>
- <div class="col-xs-8 downContent">
- <select name="downtype" id="downtype" onchange="downtype(this)" class="col-xs-12">
- <option value="1">全部</option>
- <option value="2">时间段</option>
- </select>
- </div>
- <div class="col-xs-3 downTitle timeStage">时间段:</div>
- <div class="col-xs-8 downContent timeStage">
- <input type="text" id="timSelectBox3" autocomplete="off" placeholder="请选择时间段 "
- class="col-xs-12">
- <input type="hidden" id="downbegin" name="begin">
- <input type="hidden" id="downend" name="end">
- </div>
- </div>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
- <button type="button" class="btn btn-primary btn-sm" onclick="operation()">下载</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
- <script src="{% static '/lib/layui/layui.all.js' %}"></script>
- <!-- 统计图 -->
- <script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
- <!-- <script src="{% static '/lib/js/echarts.min.js' %}"></script> -->
- <!-- <script src="{% static '/lib/js/highcharts.js'%}" type="text/javascript"></script> -->
- <script src="{% static '/js/common.js' %}?versions=0.5.0"></script>
- <script src="{% static '/js/reportmanage/cbd_pest_library.js' %}?versions=0.5.0" type="text/javascript"></script>
- <script>
- $.ajaxSetup({
- data: {
- csrfmiddlewaretoken: '{{ csrf_token }}'
- },
- });
- if (!$.fn.highcharts) {
- var script = document.createElement("script");
- script.type = "text/javascript";
- script.src = "../static/lib/js/highcharts.js";
- document.body.appendChild(script);
- }
- function openPage(url, id) {
- window.location.href = url + "?e_id=" + id;
- }
- </script>
- <script>
- var objTime = {} //当前时间筛选的节点
- var insectData = {} //tickInterval, atData, ahData, worm, wormName, plotLine
- var num = 10
- var numdata = 10
- layui.use(['laydate', 'form'], function () {
- var laydate = layui.laydate;
- var form = layui.form;
- var _layDateMark = (new Date()).getTime();
- $('#searchTime').attr('lay-key', '11' + _layDateMark);
- $('#tableSearchTime').attr('lay-key', '22' + _layDateMark);
- $('#timSelectBox3').attr('lay-key', '33' + _layDateMark);
- //执行一个laydate实例
- laydate.render({
- elem: '#searchTime' //指定元素
- ,
- type: 'date',
- range: true,
- done: function (value, date) {
- var dateArray = value.split(' - ')
- $('#begin').val(dateArray[0]);
- $('#end').val(dateArray[1]);
- }
- });
- //执行一个laydate实例
- laydate.render({
- elem: '#tableSearchTime' //指定元素
- ,
- type: 'date',
- range: true,
- done: function (value, date) {
- var dateArray = value.split(' - ')
- $('#tableBegin').val(dateArray[0]);
- $('#tableEnd').val(dateArray[1]);
- }
- });
- //执行一个laydate实例
- laydate.render({
- elem: '#timSelectBox3' //指定元素
- ,
- range: true,
- done: function (value, date) {
- var dateArray = value.split(' - ')
- $('#downbegin').val(dateArray[0])
- $('#downend').val(dateArray[1])
- }
- });
- });
- // $.ajax({
- // url: 'pest_statis_form',
- // type: 'post',
- // data: {
- // e_id: $('#imei').val(),
- // page: 1
- // },
- // dataType: "json",
- // success: function (data) {
- // if (data.dat.length) {
- // var str = '<option value="">害虫种类</option>';
- // for (var i = 0; i < data.kind.length; i++) {
- // str += '<option value="' + data.kind[i] + '">' + insect_dict[data.kind[i]] + '</option>';
- // }
- // $('#pestCategory').html(str);
- // var form = layui.form;
- // form.render('select');
- // $('#page').parent().show();
- // pestFill_Table('datatable', data.dat);
- // } else {
- // $('#page').parent().hide();
- // datFill_null_Table('datatable');
- // $('#pestCategory').html('<option value="">害虫种类为空</option>');
- // var form = layui.form;
- // form.render('select');
- // }
- // // initPage(data.nums)
- // }
- // })
- getWormData('', '', 24 * 60 * 60 * 1000);
- function getWormData(tbegin, tend, spaceNum) {
- $.ajax({
- url: 'pest_at_ah_1',
- type: 'post',
- data: {
- e_id: $('#imei').val(),
- 'tbegin': tbegin,
- 'tend': tend
- },
- beforeSend: function (XMLHttpRequest) {
- layui.use(['layer'], function () {
- var layer = layui.layer;
- //注意,layer.msg默认3秒自动关闭,如果数据加载耗时比较长,需要设置time
- loadingFlag = layer.msg('正在读取数据,请稍候……', {
- icon: 16,
- shade: 0.01,
- shadeClose: false
- });
- })
- },
- complete: function (XMLHttpRequest, textStatus) {
- layer.close(loadingFlag);
- },
- dataType: "json",
- success: function (data) {
- // console.log(data)
- if (tbegin) {
- $('#timeBox').html(tbegin + '—' + tend)
- } else {
- $('#timeBox').html(getTime(30) + '—' + getTime(0))
- }
- disposeData(data, spaceNum)
- },
- error: function (type) {
- // console.log(type)
- }
- })
- }
- // 返回时间戳
- function returnTime(time) {
- var thisTime = time.replace(/-/g, '/');
- var time = new Date(thisTime);
- var timestamp = time.getTime() + 8 * 3600000;
- return timestamp;
- }
- // 处理返回数据格式 害虫数据格式[[[23432456,34],[23432421,3]],[[23432456,35],[23432421,76]]]
- function disposeData(data, spaceNum) {
- var kind = data.kind;
- var worm = [];
- var atData = [];
- var ahData = [];
- // console.log(data)
- // 折线
- var html = '';
- if (!kind.length) {
- $('#wormType').html('<option value="">暂无害虫种类</option>')
- }
- for (var z = 0; z < kind.length; z++) {
- html += '<option value="' + z + '">' + insect_dict[kind[z]] + '</option>';
- if (z == kind.length - 1) {
- if (html) {
- $('#wormType').html(html)
- } else {
- $('#wormType').html('<option value="">暂无害虫种类</option>')
- }
- }
- }
- // 短信预警线
- if (data.msg_conf.length > 2) {
- var msg_conf = eval('(' + data.msg_conf + ')');
- var appointPestNameArr = msg_conf.appointPestName.split('#');
- var appointPestNumArr = msg_conf.appointPestNum.split('#');
- } else {
- var msg_conf = { "newPest": "on", "newPestName": "", "pestCategory": "off", "pestCategoryNum": "", "appointPest": "off", "appointPestName": [], "appointPestNum": "", "pestTotal": "off", "pestTotalNum": "", "pestWarn": "off", "phone": "15038203087" };
- var appointPestNameArr = [];
- var appointPestNumArr = [];
- }
- // console.log(appointPestNameArr)
- // console.log(appointPestNumArr)
- for (var i = 0; i < data.dat1.length; i++) {
- var arr1 = [],
- arr2 = [];
- arr1.push(returnTime(data.dat1[i].time));
- arr1.push(parseFloat((data.dat1[i].at / 10).toFixed(1)));
- arr2.push(returnTime(data.dat1[i].time));
- arr2.push(parseFloat((data.dat1[i].ah / 10).toFixed(1)));
- atData.unshift(arr1);
- ahData.unshift(arr2);
- if (i == data.dat1.length - 1) {
- if (data.dat.length) {
- for (var j = 0; j < data.dat.length; j++) {
- var secondArr = [];
- var currTime = returnTime(data.dat[j].time)
- var resultArr = data.dat[j].result.split('#');
- for (var z = 0; z < resultArr.length; z++) {
- var thirdlyArr = [];
- var wormNameNum = resultArr[z].split(',')[0];
- var wormValNum = parseInt(resultArr[z].split(',')[1]);
- thirdlyArr.push(currTime)
- thirdlyArr.push(wormValNum);
- var wormIndex = kind.indexOf(wormNameNum);
- if (worm[wormIndex]) {
- worm[wormIndex].unshift(thirdlyArr);
- } else {
- worm[wormIndex] = [thirdlyArr];
- }
- }
- if (j == data.dat.length - 1) {
- // 短信阈值判断
- if (appointPestNameArr.indexOf(kind[0]) != -1) {
- var Threshold = appointPestNumArr[appointPestNameArr.indexOf(kind[0])];
- } else {
- var Threshold = 0;
- }
- $('#line-chart').prev().html('').css('z-index', 0);
- insectData = {
- tickInterval: spaceNum,
- atData: atData,
- ahData: ahData,
- worm: worm[0],
- wormName: insect_dict[kind[0]],
- plotLine: Threshold
- }
- renderCharts(spaceNum, atData, ahData, worm[0], insect_dict[kind[0]], Threshold);
- var drawPieChartData = [];
- for (var ss = 0; ss < worm.length; ss++) {
- var currWormTotal = 0;
- for (var sss = 0; sss < worm[ss].length; sss++) {
- currWormTotal += worm[ss][sss][1];
- if (sss == worm[ss].length - 1) {
- drawPieChartData.push({
- name: insect_dict[kind[ss]],
- key: ss,
- y: currWormTotal
- })
- }
- }
- if (ss == worm.length - 1) {
- // console.log(drawPieChartData)
- drawPieChart(drawPieChartData)
- drawList(drawPieChartData)
- }
- }
- //害虫种类切换
- $('#wormType').on('change', function () {
- var val = $(this).val();
- // 短信阈值判断
- if (appointPestNameArr.indexOf(kind[val]) != -1) {
- var Threshold = appointPestNumArr[appointPestNameArr.indexOf(kind[val])];
- } else {
- var Threshold = 0;
- }
- if (chart) {
- var seriesList = chart.series; //获得图表的所有序列
- var seriesCount = seriesList.length;
- //通过for循环删除序列数据
- for (var i = 0; i < seriesCount; i++) {
- chart.series[0].remove();
- }
- }
- $('#line-chart').prev().html('').css('z-index', 0);
- insectData = {
- tickInterval: spaceNum,
- atData: atData,
- ahData: ahData,
- worm: worm[val],
- wormName: insect_dict[kind[val]],
- plotLine: Threshold
- }
- renderCharts(spaceNum, atData, ahData, worm[val], insect_dict[kind[val]], Threshold);
- })
- }
- }
- } else {
- insectData = {
- tickInterval: spaceNum,
- atData: atData,
- ahData: ahData,
- worm: [],
- wormName: '害虫',
- plotLine: 0
- }
- renderCharts(spaceNum, atData, ahData, [], '害虫', 0);
- drawPieChart([])
- drawList([])
- $('#line-chart').prev().html('').css('z-index', 0);
- }
- }
- }
- if (data.dat1.length == 0) {
- renderCharts(7 * 24 * 3600 * 1000, [], [], [], '害虫', 0);
- drawPieChart([])
- drawList([])
- $('#line-chart').prev().html('暂无温度数据').css('z-index', 99);
- }
- }
- Highcharts.setOptions({
- // 所有语言文字相关配置都设置在 lang 里
- lang: {
- resetZoom: '刷新',
- resetZoomTitle: '重置缩放比例'
- }
- });
- var echartsType = 'line';
- $('#echartsSwitchBtn').on('click',function(){
- if(echartsType == 'line'){
- echartsType = 'column'
- $(this).html('<i class="fa fa-line-chart" aria-hidden="true"></i>');
- }else{
- echartsType = 'line'
- $(this).html('<i class="fa fa-bar-chart" aria-hidden="true"></i>');
- }
- chart.series[0].update({
- type: echartsType
- });
- chart.series[1].update({
- type: echartsType
- });
- chart.series[2].update({
- type: echartsType
- });
- })
- function renderCharts(tickInterval, atData, ahData, worm, wormName, plotLine) {
- // console.log(worm)
- chart = Highcharts.chart('line-chart', {
- chart: {
- zoomType: 'x',
- selectionMarkerFill: 'rgba(0,0,0, 0.2)',
- resetZoomButton: {
- // 按钮定位
- position: {
- align: 'right', // by default
- verticalAlign: 'top', // by default
- x: -20,
- y: -50
- },
- }
- },
- title: {
- text: '害虫变化趋势'
- },
- subtitle: {
- // text: '非规律性时间内的变化'
- },
- xAxis: {
- crosshair: true, //十字基准线
- type: 'datetime',
- dateTimeLabelFormats: { //根据时间间距X轴自动显示哪种格式
- millisecond: '%H:%M:%S.%L',
- second: '%H:%M:%S',
- minute: '%H:%M',
- hour: '%H:%M',
- day: '%m-%d',
- week: '%m-%d',
- month: '%Y-%m',
- year: '%Y'
- },
- // dateTimeLabelFormats: {
- // week: '%m/%d'
- // },
- // tickInterval: 7 * 24 * 3600 * 1000,
- tickInterval: tickInterval,
- // minRange: 20
- },
- colors: ['#39F', '#6CF', '#ff7100', '#036', '#000', '#6CF',],
- yAxis: {
- title: {
- text: '温湿度变化'
- },
- plotLines: [{
- color: 'red', //线的颜色,定义为红色
- dashStyle: 'Dash', //默认是值,这里定义为长虚线
- value: plotLine, //定义在那个值上显示标示线,这里是在x轴上刻度为3的值处垂直化一条线
- width: 1, //标示线的宽度,2px
- label: {
- text: '短信预警线', //标签的内容
- align: 'right', //标签的水平位置,水平居左,默认是水平居中center
- x: 0, //标签相对于被定位的位置水平偏移的像素,重新定位,水平居左10px
- style: {
- fontSize: '14px',
- // fontWeight:'bold'
- }
- },
- }]
- },
- credits: { //去掉默认的highcharts.com
- enabled: false
- },
- tooltip: {
- // crosshairs: true,
- shared: true, //折线共享
- headerFormat: '<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>',
- },
- plotOptions: {
- spline: {
- marker: {
- enabled: true,
- radius: 3, //曲线点半径,默认是4
- symbol: 'diamond' //曲线点类型:”circle”, “square”, “diamond”, “triangle”,”triangle-down”,默认是”circle”
- }
- }
- },
- series: [{
- name: '环境温度',
- data: atData,
- type:'line',
- tooltip: {
- valueSuffix: '°C'
- }
- },
- {
- name: '环境湿度',
- type:'line',
- data: ahData,
- tooltip: {
- valueSuffix: '%RH'
- }
- },
- {
- name: wormName,
- type:'line',
- data: worm,
- tooltip: {
- valueSuffix: '只'
- }
- },
- ]
- });
- }
- function addplotLine() {
- chart.xAxis[0].addPlotLine({ //在x轴上增加
- value: 2, //在值为2的地方
- width: 2, //标示线的宽度为2px
- color: '#FCFFC5', //标示线的颜色
- id: 'plot-line-1' //标示线的id,在删除该标示线的时候需要该id标示
- });
- }
- function downtype(obj) {
- if ($(obj).val() == 2) {
- $('.timeStage').show();
- } else {
- $('.timeStage').hide();
- $('#downbegin').val('');
- $('#downend').val('');
- $('#downtimSelectBox').val('');
- }
- }
- // 导出提示框
- function decideExport() {
- $('#myModal').modal('toggle')
- }
- //导出
- function operation() {
- if (!$('#filename').val()) {
- layer.msg("请填写文件名!", {
- time: 2000
- });
- return false;
- }
- if ($('#downtype').val() == 2) {
- if (!($('#downbegin').val() && $('#downbegin').val())) {
- layer.msg("请选择时间段!", {
- time: 2000
- });
- return false;
- }
- }
- window.location.href = 'pest_export?id=' + $('#imei').val() + '&begin=' + $('#downbegin').val() + '&end=' + $(
- '#downend').val() + '&filename=' + $('#filename').val()
- }
- function initPage(count, parameter, tbegin, tend, pestCategory) {
- layui.use('laypage', function () {
- var laypage = layui.laypage;
- laypage.render({
- elem: 'page' //注意,这里的 test1 是 ID,不用加 # 号
- ,
- count: count,
- theme: '#428BCA',
- layout: ['prev', 'page', 'next', 'skip'],
- jump: function (obj, first) {
- if (!first) {
- $.ajax({
- url: 'pest_statis_form',
- type: 'post',
- data: {
- req: parameter,
- e_id: $('#imei').val(),
- page: obj.curr,
- tbegin: tbegin,
- tend: tend,
- pestCategory: pestCategory
- },
- beforeSend: function (XMLHttpRequest) {
- layui.use(['layer'], function () {
- var layer = layui.layer;
- //注意,layer.msg默认3秒自动关闭,如果数据加载耗时比较长,需要设置time
- loadingFlag = layer.msg('正在读取数据,请稍候……', {
- icon: 16,
- shade: 0.01,
- shadeClose: false
- });
- })
- },
- complete: function (XMLHttpRequest, textStatus) {
- layer.close(loadingFlag);
- },
- dataType: "json",
- success: function (data) {
- if (data.dat.length) {
- $('#page').parent().show();
- pestFill_Table('datatable', data.dat);
- } else {
- $('#page').parent().hide();
- datFill_null_Table('datatable');
- }
- }
- })
- }
- }
- })
- })
- }
- function datFill_null_Table(table_id) {
- $("#datatable tr:not(:first)").remove();
- var table = document.getElementById(table_id).children[1];
- var row = table.insertRow(table.rows.length);
- var c1 = row.insertCell(0);
- c1.setAttribute('colspan', '16');
- c1.setAttribute('class', 'nullData');
- c1.innerHTML = "暂无数据";
- scrollBar();
- }
- function datFill_Table(table_id, dat) {
- var table = document.getElementById(table_id).children[1];
- for (var i = 0; i < dat.length - 1; i++) {
- var row = table.insertRow(table.rows.length);
- if (dat[i].length == 0) {
- continue;
- }
- //JSON字符串转换JSON对象
- // var stat = eval('(' + dat[i].cbd_data + ')');
- var c1 = row.insertCell(0);
- c1.innerHTML = dat[i].pest_name;
- var c2 = row.insertCell(1);
- c2.innerHTML = dat[i].pest_num;
- var c3 = row.insertCell(2);
- if (dat[i].crop_name == '') {
- c3.innerHTML = '无';
- } else {
- c3.innerHTML = dat[i].crop_name;
- }
- var c4 = row.insertCell(3);
- if (dat[i].pest_case == '') {
- c4.innerHTML = '无';
- } else {
- c4.innerHTML = dat[i].pest_case;
- }
- var c5 = row.insertCell(4);
- c5.innerHTML = dat[i].add_time;
- }
- }
- function pestFill_Table(table_id, dat) {
- $("#datatable tr:not(:first)").remove();
- var table = document.getElementById(table_id).children[1];
- for (var i = 0; i < dat.length; i++) {
- var row = table.insertRow(table.rows.length);
- var row = table.insertRow(table.rows.length);
- var c1 = row.insertCell(0);
- c1.innerHTML = dat[i].name;
- var c2 = row.insertCell(1);
- c2.innerHTML = dat[i].y;
- }
- scrollBar();
- }
- // 绘制饼状图
- function drawPieChart(data) {
- pieChart = Highcharts.chart('pie-chart', {
- chart: {
- spacing: [40, 0, 40, 0]
- },
- title: {
- floating: true,
- text: '害虫比例'
- },
- tooltip: {
- pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
- },
- credits: { //去掉默认的highcharts.com
- enabled: false
- },
- plotOptions: {
- pie: {
- allowPointSelect: true,
- cursor: 'pointer',
- dataLabels: {
- enabled: true,
- format: '<b>{point.name}</b>: {point.percentage:.1f} %',
- style: {
- color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
- }
- },
- point: {
- events: {
- mouseOver: function (e) { // 鼠标滑过时动态更新标题
- // 标题更新函数,API 地址:https://api.hcharts.cn/highcharts#Chart.setTitle
- pieChart.setTitle({
- text: e.target.name + '\t' + e.target.y + ' 只'
- });
- }
- ,
- click: function (e) { // 同样的可以在点击事件里处理
- // pieChart.setTitle({
- // text: e.point.name+ '\t'+ e.point.y + ' %'
- // });
- // console.log(e)
- var valnum = e.point.key
- $('#wormType').val(valnum)
- $('#wormType').change()
- }
- }
- },
- }
- },
- series: [{
- type: 'pie',
- innerSize: '80%',
- name: '害虫比例',
- data: data
- }]
- }, function (c) { // 图表初始化完毕后的会掉函数
- // 环形图圆心
- var centerY = c.series[0].center[1],
- titleHeight = parseInt(c.title.styles.fontSize);
- // 动态设置标题位置
- c.setTitle({
- y: centerY + titleHeight / 2
- });
- });
- }
- // 绘制列表
- function drawList(data) {
- if (data.length) {
- pestFill_Table('datatable', data);
- } else {
- datFill_null_Table('datatable');
- }
- }
- //点击增加折线图数值
- function addDataNum() {
- var array = insectData.worm;
- num += numdata
- var arr = new Array()
- for (var i = 0; i < array.length; i++) {
- arr[i] = []
- arr[i][0] = array[i][0]
- // arr[i][1] = array[i][1] + 100
- arr[i][1] = array[i][1] + num
- }
- renderCharts(insectData.tickInterval, insectData.atData, insectData.ahData, arr, insectData.wormName, insectData.plotLine)
- }
- function getCharts(obj, flag) {
- $('#searchTime').val('')
- $('#begin').val('')
- $('#end').val('')
- echartsType = 'line';
- $('#echartsSwitchBtn').html('<i class="fa fa-bar-chart" aria-hidden="true"></i>');
- if ($(obj).hasClass('active')) {
- return false;
- } else {
- $('.searchCover .btn-white').removeClass('active');
- $(obj).addClass('active')
- }
- var newDate = new Date();
- var begin;
- var end;
- var endNewDate = new Date(newDate.getTime() + 24 * 60 * 60 * 1000);
- end = endNewDate.getFullYear() + '-' + (endNewDate.getMonth() + 1) + '-' + endNewDate.getDate();
- if (flag == 1) {
- end = getTime(-1);
- begin = getTime(0);
- var spaceNum = 60 * 60 * 1000;
- } else if (flag == 2) {
- begin = getTime(30);
- var spaceNum = 24 * 60 * 60 * 1000;
- } else if (flag == 3) {
- begin = getTime(182.5);
- var spaceNum = 30 * 24 * 60 * 60 * 1000;
- } else if (flag == 4) {
- begin = getTime(365);
- var spaceNum = 30 * 24 * 60 * 60 * 1000;
- }
- getWormData(begin, end, spaceNum);
- objTime = {
- begin: begin,
- end: end
- }
- // console.log(objTime)
- // return objTime
- }
- // 获取想要时间 num为天数
- function getTime(num) {
- // 先获取当前时间
- var curDate = (new Date()).getTime();
- // 将半年的时间单位换算成毫秒
- var halfYear = num * 24 * 3600 * 1000;
- var pastResult = curDate - halfYear; // 半年前的时间(毫秒单位)
- // 日期函数,定义起点为半年前
- var pastDate = new Date(pastResult),
- pastYear = pastDate.getFullYear(),
- pastMonth = pastDate.getMonth() + 1,
- pastDay = pastDate.getDate();
- return pastYear + '-' + pastMonth + '-' + pastDay;
- }
- function datsub_filter() {
- $('.searchCover .btn-white').removeClass('active');
- var tbegin = $('#begin').val();
- var tend = $('#end').val();
- if (tbegin && tend) {
- getWormData(tbegin, tend, 24 * 60 * 60 * 1000)
- } else {
- layer.msg('请填写时间段')
- }
- }
- function table_sub_filter() {
- var pestCategory = $('#pestCategory').val();
- var tbegin = $('#tableBegin').val();
- var tend = $('#tableEnd').val();
- if ((tbegin && tend) || pestCategory) {
- $.ajax({
- url: 'pest_statis_form',
- type: 'post',
- data: {
- req: 'filter',
- 'e_id': $('#imei').val(),
- tbegin: tbegin,
- tend: tend,
- pestCategory: pestCategory,
- page: 1
- },
- beforeSend: function (XMLHttpRequest) {
- layui.use(['layer'], function () {
- var layer = layui.layer;
- //注意,layer.msg默认3秒自动关闭,如果数据加载耗时比较长,需要设置time
- loadingFlag = layer.msg('正在读取数据,请稍候……', {
- icon: 16,
- shade: 0.01,
- shadeClose: false
- });
- })
- },
- complete: function (XMLHttpRequest, textStatus) {
- layer.close(loadingFlag);
- },
- dataType: "json",
- success: function (data) {
- if (data.dat.length) {
- $('#page').parent().show();
- pestFill_Table('datatable', data.dat);
- } else {
- $('#page').parent().hide();
- datFill_null_Table('datatable');
- }
- initPage(data.nums, 'filter', tbegin, tend, pestCategory);
- }
- })
- } else {
- layer.msg('请至少选择一项筛选')
- }
- }
- </script>
- </body>
- </html>
|