yf_zd
/
yfwlwCut


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594
							{% 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">
		/* 返回 */

		.headerPlace {
			font-size: 22px;
			color: #418fbb;
			cursor: pointer;
		}

		.headerPlace img {
			vertical-align: middle;
			margin-right: 10px;
			margin-top: -4px;
		}

		body {
			overflow: hidden;
			background: #fff;
		}

		.searchCover {
			margin: 20px 0;
		}

		.innerTable {
			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;
		}

		.container-wrap {
			overflow-x: scroll;
		}

		.searchCover input {
			width: 180px;
		}

		.timeStage {
			display: none;
		}

		.downTitle {
			text-align: right;
			line-height: 27px;
			padding-left: 0;
			margin-bottom: 5px;
		}

		.downContent {
			padding-left: 0;
			margin-bottom: 5px;
		}

		/*  */

		.userinfo .fa {
			font-size: 18px;
			color: #26b3ff;
			margin: 0px 5px;
		}

		.userinfoTitle {
			margin-right: 30px;
			font-size: 16px;
		}

		button.btn.btn-sm.btn-white.active {
			background: #428bca !important;
			color: #fff !important;
		}
	</style>

</head>

<body>
	<div class="content">
		<div class="page-header">
			<span class="headerPlace" onclick="goback('cbd_report')">
				<!-- <span class="headerPlace" onclick="gobackA()"> -->
				<img src="{% static '/img/gobackIcon.png' %}" alt="">返回
			</span>

		</div>
		<div class="row userinfo">
			<div class="col-xs-11">
				<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 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="timSelectBox" autocomplete="off" placeholder="请选择时间段 ">
			<input type="hidden" id="begin" name="begin">
			<input type="hidden" id="end" name="end">
			<button type="button" onclick="dtl_sub_filter()" class="btn btn-sm btn-primary">筛选</button>

		</div>
		<div class="container-wrap">
			<div class="container-cartogram clearfix">
				<div class="echartsBox fl">
					<div class="hint"></div>
					<div class="fl" id="line-chart"></div>
				</div>
				<!-- <div class="fl" id="bar-chart"></div>
				<div class="fl" id="pie-chart"></div> -->
			</div>

			<div>
				<input id="equip_id" type="hidden" type="text" value={{ equip_id }}>
			</div>
			<div class="searchCover">
				数据列表时间段搜索：
				<input type="text" id="dataSelectBox" autocomplete="off" placeholder="请选择时间段 ">
				<input type="hidden" id="databegin" name="begin">
				<input type="hidden" id="dataend" name="end">
				<button type="button" onclick="data_sub_filter()" class="btn btn-sm btn-primary">筛选</button>
				<!-- <button type="button" onclick="operation()" class="btn btn-sm btn-success">导出</button> -->
				<!-- <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">导出</button> -->
				<button type="button" class="btn btn-success btn-sm" onclick="decideExport()">导出</button>
			</div>
			<div class="innerTable">
				<table id="datatableDet" class="table  table-striped table-hover">
					<thead>
						<tr>
							<th>设备ID</th>
							<th>环境温度(℃)</th>
							<th>环境湿度(%)</th>
							<th>加热仓温度(℃)</th>
							<th>雨控状态</th>
							<th>温控状态</th>
							<th>光控状态</th>
							<th>灯管状态</th> 
							<th>电池电压(V)</th>   
							<th>电池状态</th>    
							<th>纬度</th>
							<th>经度</th>
							<th>上报时间</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
				</table>
				<div class="fenpei-bottom">
					<input type="hidden" id="totalPage" value={{ nums }}>
					<div id="page" style="text-align: center;"></div>
				</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">&times;</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/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
	<script src="{% static '/lib/layui/layui.all.js' %}"></script>
	<script src="{% static '/js/common.js' %}?versions=0.5.0"></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);
		}
	</script>
	<script src="{% static '/js/reportmanage/cbd_report_detail_table.js' %}?versions=0.5.0"
		type="text/javascript"></script>
	<script src="{% static '/js/reportmanage/cbd_report_detail_echarts.js' %}?versions=0.5.0" type="text/javascript"></script>
	<script>
		var chart;
		$(function () {
			// 时间插件初始化
			layui.use('laydate', function () {
				var laydate = layui.laydate;
				var _layDateMark = (new Date()).getTime();
				$('#timSelectBox').attr('lay-key', '11' + _layDateMark);
				//执行一个laydate实例
				laydate.render({
					elem: '#timSelectBox' //指定元素
					,
					range: true,
					done: function (value, date) {
						var dateArray = value.split(' - ')
						$('#begin').val(dateArray[0])
						$('#end').val(dateArray[1])
					}
				});
				$('#dataSelectBox').attr('lay-key', '22' + _layDateMark);
				laydate.render({
					elem: '#dataSelectBox' //指定元素
					,
					range: true,
					done: function (value, date) {
						var dateArray = value.split(' - ')
						$('#databegin').val(dateArray[0])
						$('#dataend').val(dateArray[1])
					}
				});
				//执行一个laydate实例
				$('#timSelectBox3').attr('lay-key', '33' + _layDateMark);
				laydate.render({
					elem: '#timSelectBox3' //指定元素
					,
					range: true,
					done: function (value, date) {
						var dateArray = value.split(' - ')
						$('#downbegin').val(dateArray[0])
						$('#downend').val(dateArray[1])
					}
				});
			});
			var equip_id = document.getElementById("equip_id").value
			$.ajax({
				url: 'cbd_report_detail_chart',
				type: 'post',
				data: {
					req: 'data',
					id: equip_id
				},
				dataType: 'json',
				success: function (data) {
					if (!data.length) {
						$('#line-chart').prev().html('暂无温度数据').css('z-index', 99);
						return false;
					} else {
						$('#line-chart').prev().html('').css('z-index', 0);
					}
					var temp = data;
					var atData = [];
					var ahData = [];
					for (var i = 0; i < temp.length; i++) {
						var arr1 = [],
							arr2 = [];
						var thisTime = temp[i].tim;
						thisTime = thisTime.replace(/-/g, '/');
						var time = new Date(thisTime);
						timestamp = time.getTime() + 8 * 3600000;
						arr1.push(timestamp);
						arr1.push(parseFloat((temp[i].at / 10).toFixed(1)));
						arr2.push(timestamp);
						arr2.push(parseFloat((temp[i].ah / 10).toFixed(1)));

						atData.unshift(arr1);
						ahData.unshift(arr2);
						if (i == temp.length - 1) {
							// atData = [
							// 	[1582976778000,-3],
							// 	[1582978987000,55],
							// 	[1582995597000,8],
							// 	[1582996834000,18],
							// ]
							// ahData = [
							// 	[1582976778000,13],
							// 	[1582978356000,-1],
							// 	[1582978987000,-5],
							// 	[1582994357000,7],
							// ]
							console.log(ahData)
							renderCharts(atData, ahData, 30 * 24 * 60 * 60 * 1000)
						}
					}
				}
			})
		})
		function getChartsData(begin, end, spaceNum) {
			$.ajax({
				url: 'cbd_report_detail_chart',
				type: 'post',
				data: {
					req: 'filter',
					begin: begin,
					end: end,
					id: document.getElementById("equip_id").value
				},
				dataType: 'json',
				success: function (data) {
					if (!data.length) {
						$('#line-chart').prev().html('暂无温度数据').css('z-index', 99);
						if (chart) {
							var seriesList = chart.series; //获得图表的所有序列
							var seriesCount = seriesList.length;
							//通过for循环删除序列数据
							for (var i = 0; i < seriesCount; i++) {
								chart.series[0].remove();
							}
						}

						return false;
					} else {
						$('#line-chart').prev().html('').css('z-index', 0);
					}
					// var temp = eval('(' + data + ')');
					var temp = data;
					var atData = [];
					var ahData = [];
					for (var i = 0; i < temp.length; i++) {
						var arr1 = [],
							arr2 = [];
						var thisTime = temp[i].tim;
						thisTime = thisTime.replace(/-/g, '/');
						var time = new Date(thisTime);
						timestamp = time.getTime() + 8 * 3600000;
						// console.log(timestamp)
						arr1.push(timestamp);
						arr1.push(parseFloat((temp[i].at / 10).toFixed(1)));
						arr2.push(timestamp);
						arr2.push(parseFloat((temp[i].ah / 10).toFixed(1)));

						atData.unshift(arr1);
						ahData.unshift(arr2);
						if (i == temp.length - 1) {
							renderCharts(atData, ahData, spaceNum)
						}
					}
					if (!temp.length) {
						$('#line-chart').prev().html('暂无温度数据').css('z-index', 99);
					} else {
						$('#line-chart').prev().html('').css('z-index', 0);

					}
				},
				error: function (type) { }
			})
		}
		setTimeout(function(){
			Highcharts.setOptions({
				// 所有语言文字相关配置都设置在 lang 里
				lang: {
					resetZoom: '重置',
					resetZoomTitle: '重置缩放比例'
				}
			});
		},3000)
		
		function renderCharts(atData, ahData, tickInterval) {
			chart = Highcharts.chart('line-chart', {
				chart: {
					type: 'spline',
					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', '#036', '#000', '#6CF',],
				yAxis: {
					title: {
						text: '温湿度变化'
					},
				},
				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,
					tooltip: {
						valueSuffix: '°C'
					}
				},
				{
					name: '环境湿度',
					data: ahData,
					tooltip: {
						valueSuffix: '%RH'
					}
				},
				]
			});
		}

		function dtl_sub_filter() {
			$('.searchCover .btn-white').removeClass('active');
			var begin = $('#begin').val();
			var end = $('#end').val();
			if (begin && end) {
				getChartsData(begin, end, 24 * 60 * 60 * 1000)
			} else {
				layer.msg("请选择时间段！", {
					time: 2000
				});
			}

		}
		// 1当天 2本月 3半年  4本年
		function getCharts(obj, flag) {
			$('#timSelectBox').val('')
			$('#begin').val('')
			$('#end').val('')
			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;
			}
			getChartsData(begin, end, spaceNum)
		}
		// 获取想要时间 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 gobackA() {
			window.history.back(-1)
		}
	</script>
</body>

</html>