yf_zd
/
yfwlwCut


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
							{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
	<title>地图预警</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="{% static '/css/matrix-style2.css' %}" />
	<link rel="stylesheet" href="{% static '/css/matrix-media.css' %}" />
	<link rel="stylesheet" href="{% static '/css/page.css' %}" />
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=TcRPmrsiZUqdUBWoELrUArRkCRC36KMx"></script>
	<style type="text/css">
		body {
			overflow: hidden;
		}

		.line1 {
			margin-top: 20px;
			color: #C23531;
		}

		.line1 div {
			float: left;
			height: 20px;
			background-color: #C23531;
			width: 174px;
		}

		.line2 {
			margin-top: 20px;
			color: #2F4554;
		}

		.line2 div {
			float: left;
			background-color: #2F4554;
			width: 123px;
			height: 20px;
		}

		.line3 {
			margin-top: 20px;
			color: #61A0A8;
		}

		.line3 div {
			float: left;
			background-color: #61A0A8;
			width: 0px;
			height: 20px;
		}
	</style>
</head>

<body>
	<div class="content">
		<div id="content-header">
			<h1 class="tb-fpsb" style="display: inline-block;">
				预警
			</h1>
			<span id="">
				> 地图预警
			</span>
		</div>
		<div class="warning-box">
			<div class="warning-map" id="warning-map"></div>
			<div id="bing" style=" width:50%;height:300px; float: left;"></div>
			<div style="float: left;width: 30%;margin: 3% 3%;">
				<p style="font-size: 20px;text-align: center;margin-bottom: 60px; ">预警百分比</p>
				<div class="line1">
					<div></div>
					<span style="margin-left: 10px;">气象设备预警58%</span>
				</div>
				<div class="line2">
					<div></div>
					<span style="margin-left: 10px;">杀虫灯预警41%</span>
				</div>
				<div class="line3">
					<div></div>
					<span style="margin-left: 10px;">虫情测报预警0%</span>
				</div>
			</div>
		</div>
		<!--  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span12"> 
        <div class="pie-type-box">
          <div class="widget-title"> <span class="icon"> <i class="icon-signal"></i> </span>
            <h5>Bar chart</h5>
          </div>
          <div class="widget-content">
            <div class="chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div> -->
	</div>

	<!-- <script src="{% static 'js/bootstrap.min.js' %}"></script> 
<script src="{% static 'js/jquery.flot.min.js' %}"></script> 
<script src="{% static 'js/jquery.flot.pie.min.js' %}"></script> 
<script src="{% static 'js/matrix.charts.js' %}"></script> 
<script src="{% static 'js/matrix.js' %}"></script>  -->
<script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static '/lib/js/echarts.min.js' %}"></script>	

	<script type="text/javascript">

		if ($('.content').height() > 750) {
			$('#iframe-main', parent.document).css('height', $('.content').height() + 20)
		} else {
			$('#iframe-main', parent.document).css('height', '750px')
		}

		var chart = echarts.init(document.getElementById('bing'));
		option = {
			title: {
				x: 'center'
			},
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b} : {c} ({d}%)"
			},
			legend: {
			},
			series: [
				{
					name: '预警百分比',
					type: 'pie',
					radius: '55%',
					center: ['50%', '60%'],
					data: [
						{ value: 58, name: '气象设备' },
						{ value: 41, name: '杀虫灯' },
						{ value: 0, name: '虫情测报' },
					],
					itemStyle: {
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		};
		chart.setOption(option);

	</script>

	<script type="text/javascript">

		//百度地图API功能
		var map = new BMap.Map("warning-map");        // 创建地图实例  
		var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
		map.centerAndZoom(point, 13);  // 初始化地图，设置中心点坐标和地图级别  
		map.enableScrollWheelZoom(true);
		map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
		map.addControl(new BMap.ScaleControl());   // 添加比例尺控件     

		var geolocation = new BMap.Geolocation();
		geolocation.getCurrentPosition(function (r) {
			if (this.getStatus() == BMAP_STATUS_SUCCESS) {
				var mk = new BMap.Marker(r.point);
				map.addOverlay(mk);
				map.panTo(r.point);
			}
			else {
				alert('failed' + this.getStatus());
			}
		}, { enableHighAccuracy: true });
		//关于状态码
		//BMAP_STATUS_SUCCESS	检索成功。对应数值“0”。
		//BMAP_STATUS_CITY_LIST	城市列表。对应数值“1”。
		//BMAP_STATUS_UNKNOWN_LOCATION	位置结果未知。对应数值“2”。
		//BMAP_STATUS_UNKNOWN_ROUTE	导航结果未知。对应数值“3”。
		//BMAP_STATUS_INVALID_KEY	非法密钥。对应数值“4”。
		//BMAP_STATUS_INVALID_REQUEST	非法请求。对应数值“5”。
		//BMAP_STATUS_PERMISSION_DENIED	没有权限。对应数值“6”。(自 1.1 新增)
		//BMAP_STATUS_SERVICE_UNAVAILABLE	服务不可用。对应数值“7”。(自 1.1 新增)
		//BMAP_STATUS_TIMEOUT	超时。对应数值“8”。(自 1.1 新增)


		// 添加带有定位的导航控件
		var navigationControl = new BMap.NavigationControl({
			// 靠左上角位置
			anchor: BMAP_ANCHOR_TOP_LEFT,
			// LARGE类型
			type: BMAP_NAVIGATION_CONTROL_LARGE,
			// 启用显示定位
			enableGeolocation: true
		});
		map.addControl(navigationControl);
		// 添加定位控件
		var geolocationControl = new BMap.GeolocationControl();
		geolocationControl.addEventListener("locationSuccess", function (e) {
			// 定位成功事件
			var address = '';
			address += e.addressComponent.province;
			address += e.addressComponent.city;
			address += e.addressComponent.district;
			address += e.addressComponent.street;
			address += e.addressComponent.streetNumber;
		});
		geolocationControl.addEventListener("locationError", function (e) {
			// 定位失败事件
			alert(e.message);
		});
		map.addControl(geolocationControl);


		function getBoundary() {


		}

		getBoundary();


	</script>

</body>

</html>