hanzhengyi
/
admin1


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488
							<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<style type="text/css">
		html,body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";font-size:14px; background:url('./images/bg4.png')}
		#allmap{width: 100%; min-height: 380px; display: flex; justify-content: center;align-items: center;}
		.optionpanel{margin: 10px auto;}
		#r-result{  margin:0 auto; width:500px; position: absolute; bottom:0px;}
		.anchorBL,.BMap_omCtrl{display:none;}
		
		img
			{
			opacity:0.85; 
			}
		.header{
		width: 100%;
		min-height: 80px; 
		height: 11%;
		display: flex;
		letter-spacing:80px;
		font-size:45px;
	  color: aqua;
    justify-content: center;
    align-items: center;
    background:url('./images/header.png') no-repeat center;
    background-size: contain;
			}
	 	.cod-shadow{
	 	      	box-shadow:0 0 23px #50e4fe inset;
            -webkit-box-shadow:0 0 23px #50e4fe inset;
            -moz-box-shadow:0 0 23px #50e4fe inset;
            -o-box-shadow:0 0 23px #50e4fe inset;
	 		}	
	 		.alarming{
	 			color: #fff;
	 			}
	 .col-height{
	 	 min-height:300px;
	 	 height:80%;
	 	 padding:10px;
	 	}			
	</style>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script src="./js/echarts.js"></script>
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4FjGxlxzQrIkl7BxwMPl6da5yMxsXwp4"></script>
	<title>个性底图设置模板Demo页</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
  <div class="col-md-12 " style="padding:0px;">
  <div class="header"> 中泰科技</div>
    </div>
</div>	
<div class="row">
  <div class="col-sm-6 col-md-6 cod-shadow" style="padding-top:10px; padding-bottom:8px; padding-right:8px;" >
  	
  <div id="allmap"></div> 

  	</div>
  <div class="col-xs-6 col-md-6 cod-shadow" style="padding-top:10px; padding-bottom:8px;">	
  	  <div id="mainMap" style="height:380px;"></div>
  	  </div>
</div>

<div id="searchResultPanel" style=" position: absolute; border:1px solid #C0C0C0; width:220px; height:auto; display:none;"></div>
<div class="row">
  <div class="col-xs-6 col-sm-4 cod-shadow">
  	<div class="alarming col-height"  name="东海楼一楼左配电箱（护士站）">
            <p>单位名称：<span>杨浦区社会福利院</span></p>
            <p>设备名称：<span> 东海楼一楼左配电箱（护士站）</span></p>
            <p>报警类型：<span class="blue">漏电</span></p>
            <p>序列号码：<span>3300075</span></p>
            <p>报警时间：<span>2017/08/23 09:46:50</span></p>
        </div></div>
  <div class="col-xs-6 col-sm-4 cod-shadow"><div id="main" class="col-height" ></div></div>
  <div class="col-xs-6 col-sm-4 cod-shadow"><div id="mainline" class="col-height" ></div></div>
</div>
</div>

</body>
</html>
<script type="text/javascript" src="http://lbsyun.baidu.com/custom/stylelist.js"></script>
<script type="text/javascript">

	var map = new BMap.Map("allmap");
	window.map = map;
	var point = new BMap.Point(121.48,31.22);

	map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
	map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
	map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
	map.enableScrollWheelZoom();                            //启用滚轮放大缩小
	map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
	map.disable3DBuilding();
	map.centerAndZoom(point, 9); 
	/*map.addEventListener("click",function(e){
		alert(e.point.lng + "," + e.point.lat);
	});*/

	//代码使用如下,即可. 模板页可以查看http://lbsyun.baidu.com/custom/list.htm      
	//map.setMapStyle({style:'midnight'});

	changeMapStyle('midnight');

	function changeMapStyle(style){
		map.setMapStyle({style:style});
		$('#desc').html(mapstyles[style].desc);
	}
	

	
	
	//创建小狐狸
	/*var pt = new BMap.Point(121.37401,31.113346);
	
	var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
	map.addOverlay(marker2);              // 将标注添加到地图中	*/
	var myIcon = new BMap.Icon("./images/1.png", new BMap.Size(30,30));
	var myIcon1 = new BMap.Icon("./images/2.png", new BMap.Size(30,30));
		var data_info = [[121.37401,31.113346,"地址：上海市闵行区莘松六村34栋",1],
		                 [121.37426,31.113455,"地址：上海市闵行区莘松六村33栋",0]
		                 ,[121.481152,31.235372,"地址：上海市人民广场",0]
		                 ,[121.398378,31.237817 ,"地址：上海市普陀区申汉大厦-c座",1]
		                 ,[121.399029,31.240878,"地址：上海市普陀区五芳斋大厦",0]
		                 ,[121.254655,31.142278,"地址：xxxx",0]
		                 ,[121.223156,31.140878,"地址：zzzzzz",0]];
	var opts = {
				width : 250,     // 信息窗口宽度
				height: 80,     // 信息窗口高度
				title : "信息窗口" , // 信息窗口标题
				enableMessage:true//设置允许信息窗发送短息
			   };
	for(var i=0;i<data_info.length;i++){
		var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]),{icon:(data_info[i][3]==1)?myIcon1:myIcon});  // 创建标注
		var content = data_info[i][2];
		map.addOverlay(marker);               // 将标注添加到地图中
		if(data_info[i][3]==1){
		marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
	    }
		addClickHandler(content,marker);
	}
	function addClickHandler(content,marker){
		marker.addEventListener("click",function(e){
			openInfo(content,e)}
		);
	}
	function openInfo(content,e){
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}
	
	
	
 require.config({
        paths: {
            echarts: './js'
        }
    });
    
    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/pie',
            'echarts/chart/map'
        ],
        function (ec) {
        	
        	//饼图
            var myChart = ec.init(document.getElementById('main'));
            myChart.setOption({
                title : {
        text: '',
        subtext: '',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
    	  textStyle:{color: '#fff'},
        orient : 'vertical',
        x : 'left',
        data:['接入点位','报警点位','报警次数']
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true, 
                type: ['pie', 'funnel'],
                option: {
                    funnel: {
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'left',
                        max: 1548
                    }
                }
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'访问来源',
            type:'pie',
            radius : '70%',
            center: ['50%', '60%'],
            data:[
                {value:198, name:'接入点位',itemStyle:{
                  normal:{color:'#3FDCFD'}
              }},
                {value:5, name:'报警点位',itemStyle:{
                  normal:{color:'#F84145'}
              }},
                {value:300, name:'报警次数',itemStyle:{
                  normal:{color:'#6495ED'}
              }}
            ]
        }
    ]
            });
            
           //--- 柱 ---
            var myChart1 = ec.init(document.getElementById('mainline'),'dark');
            myChart1.setOption({
    title : {
    	 
        text: '2017报警记录',
        textStyle:{color: '#50e4fe'},
    },
    grid :{
    	x:80,
    	y:50,
    	x2:30,
    	y2:40,
    	borderWidth:0,
    },
    tooltip : {
    	  textStyle:{color: '#fff'},
        trigger: 'axis',
     axisPointer:{type: 'none'}
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'value',
            boundaryGap : [0, 0.01],
            axisLabel : {    
			                show:true,
			                length: 10,
			                textStyle: {
			                    color: '#fff'
			                }
			            },
			      splitLine:{
　　　　    show:false
　　         }      
			        
        }
    ],
    yAxis : [
        {
            type : 'category',
            data : ['接入点位','报警点位','报警次数'],
			      axisLabel : {    
			                show:true,
			                length: 10,
			                textStyle: {
			                    color: '#fff'
			                }
			            },
			      splitLine:{
　　　　    show:false
　　           }          
			        }
			        
    ],
    series : [
        {
        	  
            name:'2017年',
            type:'bar',
           itemStyle : { normal: {label : {show: true, position: 'right'}}},
            data:[{
                value:198,
                itemStyle:{
                  normal:{color:'#3FDCFD'}
              }
              },{
                value:5,
                itemStyle:{
                  normal:{color:'#F84145'}
              }
              },{
                value:300,
                itemStyle:{
                  normal:{color:'#6495ED'}
              }
              }]
        }
    ]
}); 
            
            
            // --- 地图 ---
            var myChart2 = ec.init(document.getElementById('mainMap'));
            myChart2.setOption( {
   title : {
        text: '上海城市设备监控',
        subtext: '',
        x:'center',
        textStyle:{
								    fontSize: 18,
								    fontWeight: 'bolder',
								    color: '#50e4fe'
						      }   
    },
    tooltip : {
        trigger: 'axis',
        formatter:{name}
    }    ,
    legend: {
    	  textStyle:{color: '#fff'},
        orient: 'vertical',
        x:'left',
        data:['报警']
    },
    dataRange: {
        min : 0,
        max : 300,
        calculable : true,
        color: ['red','#0974de','#004881','lightgreen']
    },
    toolbox: {
        show : true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    series : [
     {
            name: '',
            type: 'map',
            mapType: '上海',
            hoverable: false,
            itemStyle:{
                normal:{label:{show:true, textStyle: {
                            color: '#fff'
                        }}}
            },
            data : [ {name: '闵行区',value: 100},
                    {name: '黄浦区',value: 165},
                    {name: '徐汇区',value: 155},
                    {name: '长宁区',value: 95},
                    {name: '静安区',value: 90},
                    {name: '普陀区',value: 100},
                    {name: '虹口区',value: 110},
                    {name: '宝山区',value: 120},
                    {name: '嘉定区',value: 130},
                    {name: '浦东新区',value:140 },
                    {name: '松江区',value: 150},
                    {name: '金山区',value: 160},
                    {name: '青浦区',value: 170},
                    {name: '崇明县',value: 180},
                    {name: '奉贤区',value: 190},
                    {name: '卢湾区',value: 210},
                    {name: '闸北区',value: 195},
                    {name: '南汇区',value: 205},
                    {name: '杨浦区',value: 200}]
        },
        {
            name: '正常',
            type: 'map',
            mapType: '上海',
            hoverable: false,
            roam:true,
            data : [ ],
            markPoint : {
                symbolSize: 5,       // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
                itemStyle: {
                    normal: {
                        borderColor: '#000',
                        borderWidth: 1,            // 标注边线线宽，单位px，默认为1
                        label: {
                            show: false
                        }
                    },
                    emphasis: {
                        borderColor: '#1e90ff',
                        borderWidth: 5,
                        label: {
                            show: false
                        }
                    }
                },
                data : [
                    {name: "上海", value: 0},
                    { name:"上海市闵行区莘松六村34栋",value:0},
                    {name: "上海市普陀区五芳斋大厦", value: 0},
                    {name: "上海市普陀区五芳斋大厦", value: 0},
                    {name: "上海市人民广场", value:0}
                   
                ]
            },
            geoCoord: {
                "上海":[121.48,31.22],
                "上海市闵行区莘松六村34栋":[121.37401,31.113346],
                "上海市闵行区莘松六村33栋":[121.37426,31.113455],
                "上海市人民广场":[121.481152,31.235372],
                "上海市普陀区五芳斋大厦":[121.399029,31.240878]
                
                
                
            }
        },
        {
            name: '报警',
            type: 'map',
            mapType: '上海',
            data:[],
            markPoint : {
                symbol:'emptyCircle',
              
                symbolSize : function (v){
                    return 10 + v/100
                },
                effect : {
                    show: true,
                    color :'red'
                },
                itemStyle:{
                    normal:{
                        label:{show:false}
                    }
                },
                data : [
                   // {name: "上海市人民广场", value:300},
                    {name: "上海市普陀区申汉大厦-c座", value:300 }
                   // {name: "上海市普陀区五芳斋大厦", value: 300},
                    //{name: "上海市闵行区莘松六村33栋", value: 300}
                ]
            },
            geoCoord: {
                //"上海市闵行区莘松六村33栋":[121.37426,31.113455],
                //"上海市人民广场":[121.481152,31.235372],
                "上海市普陀区申汉大厦-c座":[121.398378,31.237817]
               // "上海市普陀区五芳斋大厦":[121.399029,31.240878],
            }
        }
    ]
});
        }
         );	
	
</script>