hanzhengyi
/
admin1


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630
							<!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">
<link href="__PUBLIC__/B-JUI/themes/css/bootstrap.css" rel="stylesheet">
<!-- ECharts -->
 <script src="__PUBLIC__/B-JUI/plugins/echarts/echarts.js"></script>
 <script src="__PUBLIC__/B-JUI/js/jquery-1.11.3.min.js"></script>
 <script src="__PUBLIC__/B-JUI/plugins/bootstrap.min.js"></script>
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4FjGxlxzQrIkl7BxwMPl6da5yMxsXwp4"></script>
	<title> 监控中心 </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" class="boxping"></div> 

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

<div class="row"> 
	
	<div class="col-xs-6 col-sm-4 col-md-4 cod-shadow">
  	 <div id="main" class="col-height" ></div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-4 cod-shadow" >
  		<div class="col-height" >
  	 <div class="monitoring-title">
      <!--<i class="bell" id="bell" title="关闭声音"></i>-->
     <p class="waringShow" title="当前报警设备(2个)">当前报警设备(2个)</p>
     <span class="monitoring_up">
     <img src="__PUBLIC__/images/map/5.png" class="monitoring_up_img" title="列表形式查看报警">
     </span>
      </div>
    <div id="banners"><!-- 轮播部分 -->
      <ul class="imgList"><!-- 图片部分 -->
      <li> <div class="zt-text">
            <p>单位名称：<span>上海市普陀区申汉大厦-c座</span></p>
            <p>设备名称：<span> yyyyyy</span></p>
            <p>报警类型：<span class="blue">火警</span></p>
            <p>序列号码：<span>3300075</span></p>
            <p>报警时间：<span>2017/08/23 09:46:50</span></p>
          </div>  
     </li>
     <li> <div class="zt-text">
            <p>单位名称：<span>上海市人民广场</span></p>
            <p>设备名称：<span> xxxxx</span></p>
            <p>报警类型：<span class="blue">烟雾</span></p>
            <p>序列号码：<span>3300075</span></p>
            <p>报警时间：<span>2017/08/23 09:46:50</span></p>
          </div>  
     </li>
      </ul>
      <div style="display:none;">
      <audio id="bgMusic">
     <source = src="__PUBLIC__/music/jb.wav" type="audio/mp3">
     </audio>
      	<!--<img src="./img/prev.png" width="20px" height="40px" id="prev">
      <img src="./img/next.png" width="20px" height="40px" id="next">--></div>

    </div>
   </div> 
     </div>   

  <div class="col-xs-6 col-sm-4 col-md-4 cod-shadow">
  	 <div id="mainline" class="col-height" ></div>
  </div>
</div>
<div id="searchResultPanel" style=" position: absolute; border:1px solid #C0C0C0; width:220px; height:auto; display:none;"></div>
</body>
</html>
<style type="text/css">
	  .boxping{
	  position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #0c1a35;
    z-index: 999;
    color: #fff;
    }
		html,body{overflow-y:hidden; margin:0px;padding:0px; font-family:cursive; font-size:14px; background:url('__PUBLIC__/images/map/bg4.png');}
		#allmap{width: 100%; display:flex; justify-content: center;align-items: center;}
		.optionpanel{margin: 10px auto;}
		#r-result{  margin:0 auto; width:500px; position: absolute; bottom:0px;}
		.anchorTR,.BMap_stdMpPan,.BMap_stdMpZoom,.anchorBL{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-size: contain;
    background:url('__PUBLIC__/images/map/header.png') no-repeat center;
   
			}
	 	.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;
	 		}
	 	.cod-shadow2{
	 	      	box-shadow:0 0 80px #c91527 inset;
            -webkit-box-shadow:0 0 80px #c91527 inset;
            -moz-box-shadow:0 0 80px #c91527 inset;
            -o-box-shadow:0 0 80px #c91527 inset;
	 		}			
	 .col-height{
	   color: #fff;
	 	 min-height:300px;
	 	 height:80%;
	 	 padding:10px;
	 	}		
	  ul,li{list-style: none; margin:0px;padding:0px;}
   a{text-decoration: none;}
 
  #banners{position:relative; width: 400px; margin:0px auto; overflow: hidden;clear: both;}
  .imgList{position:relative; width:10000px; z-index: 10;  margin:0px; padding:0px;}
  .imgList li{
  	float:left; display: inline;
  	width:400px;
  	color: #fff;
	 	padding:10px 30px;
	 	line-height:30px;
  	 }
	.zt-text{
		 } 	 
  .waringShow{font-size: 16px;
    color: #ff0101;
    display: inline-block;
    width: 146px;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0px;}
  .monitoring_up {
    float: left;
    animation: myAnimation .95s infinite;
    -webkit-animation: myAnimation .95s infinite;
    cursor: pointer;
    position: absolute;
  }  
  #prev,
  #next{position: absolute; top:80px; z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
  #prev{left: 10px;}
  #next{right: 10px;}
  #prev:hover,
  #next:hover{opacity: 0.5;filter:alpha(opacity=50);}			
	</style>
<script type="text/javascript">
	$(document).ready(function(){
			var h=$(window).height();
			$('#allmap').css('height',h-410);
			$('#mainMap').css('height',h-410);
		});
	
	window.onresize = function(){
			var h=$(window).height();
			$('#allmap').css('height',h-410);
			$('#mainMap').css('height',h-410);
		}

	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.setMapStyle({style:'midnight'});
	/*map.addEventListener("click",function(e){
		alert(e.point.lng + "," + e.point.lat);
	});*/
	//创建小狐狸
	/*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("__PUBLIC__/images/map/1.png", new BMap.Size(30,30));
	var myIcon1 = new BMap.Icon("__PUBLIC__/images/map/4.png", new BMap.Size(30,30));
	var data_info =	{$data_info};

	/*var data_info2=function(){
		
		return [[121.37401,31.113346,"地址：上海市闵行区莘松六村34栋",0],
		                 [121.37426,31.113455,"地址：上海市闵行区莘松六村33栋",0]
		                 ,[121.481152,31.235372,"地址：上海市人民广场",0]
		                 ,[121.398378,31.237817 ,"地址：上海市普陀区申汉大厦-c座",1]
		                 ,[121.399029,31.240878,"地址：上海市普陀区五芳斋大厦",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: '__PUBLIC__/B-JUI/plugins/echarts/'
        }
    });
    // 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%', '50%'],
            data:[
                {value:198, name:'接入点位',itemStyle:{
                  normal:{color:'#3FDCFD'}
              }},
                {value:2, 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:2,
                itemStyle:{
                  normal:{color:'#F84145'}
              }
              },{
                value:300,
                itemStyle:{
                  normal:{color:'#6495ED'}
              }
              }]
        }
    ]
}); 
            
            
            // --- 地图 ---
            var myChart2 = ec.init(document.getElementById('mainMap'),'dark');
            myChart2.setOption( {
   title : {
        text: '上海城市设备监控',
        subtext: '',
        x:'center',
        textStyle:{
								    fontSize: 18,
								    fontWeight: 'bolder',
								    color: '#50e4fe'
						      }   
    },
    tooltip : {
        trigger: 'axis',
        formatter:{name}
    },
    color:['red','lightgreen','#11abff','#ffdf33','#968ade'],
    legend: {
    	  textStyle:{color: '#fff'},
        orient: 'vertical',
        x:'left',
        data:[{name : '报警',textStyle : {color:'red'}},{name : '正常',textStyle : {color:'lightgreen'}}]
    },
    dataRange: {
    	  show:false,
        min : 0,
        max : 300,
        calculable : true,
        color: ['red','#0974de','#004881','lightgreen']
    },
    toolbox: {
        show : false,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    series : [
     {
            name: 'kkk',
            type: 'map',
            mapType: '上海',
            hoverable: false,
            itemStyle:{
                normal:{label:{show:true, textStyle: {
                            color: '#fff'
                        }}}
            },
            data : {$dataall}
        },
        {
            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 : {$rdatatrue1}
                
                /*[
                    {name:"上海市闵行区莘松六村34栋",value:0},
                    {name: "上海市普陀区五芳斋大厦", value: 0},
                    {name: "上海市普陀区五芳斋大厦", value: 0},
                    {name: "上海市人民广场", value:0}]*/
    				},
            geoCoord: {$rdatatrue2}
            /*{
                "上海市闵行区莘松六村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 : {$rdataerr3}
                /*[
                   // {name: "上海市人民广场", value:300},
                    {name: "上海市普陀区申汉大厦-c座", value:300 }
                   // {name: "上海市普陀区五芳斋大厦", value: 300},
                    //{name: "上海市闵行区莘松六村33栋", value: 300}
                ]*/
            },
            geoCoord: {$rdataerr4}
            /*{
                //"上海市闵行区莘松六村33栋":[121.37426,31.113455],
                //"上海市人民广场":[121.481152,31.235372],
                "上海市普陀区申汉大厦-c座":[121.398378,31.237817]
               // "上海市普陀区五芳斋大厦":[121.399029,31.240878],
            }*/
        }
    ]
});
        }
         );	
         
 
	
 var curIndex = 0, //当前index
      imgLen = $(".imgList li").length; //图片总数
     // 定时器自动变换2.5秒每次
  var autoChange = setInterval(function(){ 
    if(curIndex < imgLen-1){ 
      curIndex ++; 
    }else{ 
      curIndex = 0;
    }
    //调用变换处理函数
    changeTo(curIndex); 
  },5500);
   //左箭头滑入滑出事件处理
  $("#prev").hover(function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  },function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  }); 
  //左箭头点击处理
  $("#prev").click(function(){ 
    //根据curIndex进行上一个图片处理
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  });
  //右箭头滑入滑出事件处理
  $("#banners").hover(function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  },function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  });
  //右箭头点击处理
  $("#next").click(function(){ 
    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
    changeTo(curIndex);
  });
  //清除定时器时候的重置定时器--封装
  function autoChangeAgain(){ 
      autoChange = setInterval(function(){ 
      if(curIndex < imgLen-1){ 
        curIndex ++;
      }else{ 
        curIndex = 0;
      }
    //调用变换处理函数
      changeTo(curIndex); 
    },5500);
    }
  function changeTo(num){ 
    var goLeft = num * 400;
    console.log(goLeft);
    var audio = document.getElementById("bgMusic");
			//播放(继续播放)
			//audio.play();
 
    $(".imgList").animate({left: "-" + goLeft + "px"},500);
    $(".cod-shadow").addClass("cod-shadow2");
    $(".cod-shadow").removeClass("cod-shadow");
    setTimeout(function(){$(".cod-shadow2").addClass("cod-shadow");$(".cod-shadow").removeClass("cod-shadow2");},1000);
  
   
  }
         
	
</script>