|
|
<!DOCTYPE html>
|
|
|
<head>
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
|
<link href="__PUBLIC__/style/bootstrap.css" rel="stylesheet">
|
|
|
<link href="__PUBLIC__/style/font-awesome.css" rel="stylesheet">
|
|
|
<link href="__PUBLIC__/style/weather-icons.css" rel="stylesheet">
|
|
|
|
|
|
<!--Beyond styles-->
|
|
|
<link id="beyond-link" href="__PUBLIC__/style/beyond.css" rel="stylesheet" type="text/css">
|
|
|
<link href="__PUBLIC__/style/demo.css" rel="stylesheet">
|
|
|
<link href="__PUBLIC__/style/typicons.css" rel="stylesheet">
|
|
|
<link href="__PUBLIC__/style/animate.css" rel="stylesheet">
|
|
|
<link rel="stylesheet" type="text/css" href="__IMG__/bdmap/css/bmap.css"/>
|
|
|
<title>抽水蓄能电站智能化状态监测系统</title>
|
|
|
<style type="text/css">
|
|
|
html {
|
|
|
height: 100%
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
height: 100%;
|
|
|
margin: 0px;
|
|
|
padding: 0px
|
|
|
}
|
|
|
|
|
|
/*#container {*/
|
|
|
/*float: left;*/
|
|
|
/*height: 100%;*/
|
|
|
/*width: 30%*/
|
|
|
/*}*/
|
|
|
|
|
|
/*#center {*/
|
|
|
/*height: 100%;*/
|
|
|
/*float: left;*/
|
|
|
/*width: 30%;*/
|
|
|
/*}*/
|
|
|
/*#right {*/
|
|
|
/*background-color: #7e8186;*/
|
|
|
/*height: 100%;*/
|
|
|
/*width: 40%;*/
|
|
|
/*margin-left:60%;*/
|
|
|
/*}*/
|
|
|
.anchorBL{display:none;}
|
|
|
.infodiv{
|
|
|
max-width: 400px;
|
|
|
}
|
|
|
.mytable {
|
|
|
padding: 0;
|
|
|
margin: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border-collapse:collapse;
|
|
|
}
|
|
|
|
|
|
.mytable td {
|
|
|
border: 1px solid #C1DAD7;
|
|
|
background: #fff;
|
|
|
font-size:10px;
|
|
|
padding: 6px 6px 6px 12px;
|
|
|
color: #4f6b72;
|
|
|
text-wrap: normal;
|
|
|
}
|
|
|
.mytable th {
|
|
|
border: 1px solid #C1DAD7;
|
|
|
background: #82d2ff;
|
|
|
font-size:12px;
|
|
|
padding: 6px 6px 6px 12px;
|
|
|
color: #4f6b72;
|
|
|
}
|
|
|
.mytable thead th{
|
|
|
border: 1px solid #C1DAD7;
|
|
|
background: #1c87ff;
|
|
|
color:white;
|
|
|
font-size:12px;
|
|
|
padding: 6px 6px 6px 12px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
|
|
|
</style>
|
|
|
<script type="text/javascript" src="__IMG__/bdmap/js/apiv2.0.min.js"></script>
|
|
|
<script type="text/javascript" src="__IMG__/bdmap/js/jquery-1.7.1.js"></script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<div style="height:60px; background-color: #e9e7da;">
|
|
|
<table width="100%" style="border-collapse: collapse; height: 60px;"><tr><td width="220px"><div id="jnkc"></div></td><td align="center" ><img src="__PUBLIC__/images/title01.png"/></td><td width="220px" style="text-align: left;vertical-align: middle"><a id="alarm-fullscreen-toggler" class="fullscreen" ><i class="glyphicon glyphicon-fullscreen" style="height: 18px"></i></a></td></tr></table>
|
|
|
</div>
|
|
|
<div class="page-body">
|
|
|
<div class="row">
|
|
|
<div class="col-xs-12 col-sm-6 col-md-4" >
|
|
|
<div class="widget flat radius-bordered">
|
|
|
<div class="widget-header bg-themeprimary">
|
|
|
<span class="widget-caption">站点分布图</span>
|
|
|
<a class="sidebar-toggler" style="line-height: 34px;padding-right:5px" href="#">
|
|
|
<i class="collapse-icon fa fa-bars"></i>
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
<div class="widget-body">
|
|
|
<div class="widget-main ">
|
|
|
<div id="container" style="height: 609px"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<div class="col-xs-12 col-sm-6 col-md-4" >
|
|
|
<div class="widget flat radius-bordered">
|
|
|
<div class="widget-header bg-themeprimary">
|
|
|
<span class="widget-caption ">一次接线图</span>
|
|
|
<a class="sidebar-toggler" style="line-height: 34px;padding-right:5px" href="#">
|
|
|
<i class="collapse-icon fa fa-bars"></i>
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
<div class="widget-body">
|
|
|
<div class="widget-main ">
|
|
|
<div id="center" style="height: 609px">
|
|
|
<iframe id="iframe1" scrolling="no" frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ height="100%"
|
|
|
width="100%" src="__IMG__/bdmap/hongping.html"></iframe>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<div class="col-xs-12 col-sm-6 col-md-4">
|
|
|
<div class="widget flat radius-bordered">
|
|
|
<div class="widget-header bg-themeprimary">
|
|
|
<span class="widget-caption">统计图表</span>
|
|
|
<a class="sidebar-toggler" style="line-height: 34px;padding-right:5px" href="#">
|
|
|
<i class="collapse-icon fa fa-bars"></i>
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
<div class="widget-body">
|
|
|
<div class="widget-main ">
|
|
|
<div id="right" style="height: 609px">
|
|
|
<iframe id="iframe2" scrolling="no" frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ height="100%"
|
|
|
width="100%" src="{:url('/index/dztj')}"></iframe>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</body>
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
// 对Date的扩展，将 Date 转化为指定格式的String
|
|
|
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
|
|
|
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
|
|
|
// 例子：
|
|
|
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
|
|
|
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
|
|
|
Date.prototype.Format = function (fmt) { //author: meizz
|
|
|
var o = {
|
|
|
"M+": this.getMonth() + 1, //月份
|
|
|
"d+": this.getDate(), //日
|
|
|
"h+": this.getHours(), //小时
|
|
|
"m+": this.getMinutes(), //分
|
|
|
"s+": this.getSeconds(), //秒
|
|
|
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
|
|
"S": this.getMilliseconds() //毫秒
|
|
|
};
|
|
|
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
|
|
for (var k in o)
|
|
|
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
|
|
return fmt;
|
|
|
}
|
|
|
$('#alarm-fullscreen-toggler').on('click', function(e) {
|
|
|
var element = document.documentElement;
|
|
|
if (!$('body').hasClass("full-screen")) {
|
|
|
$('body').addClass("full-screen");
|
|
|
$('#alarm-fullscreen-toggler').addClass("active");
|
|
|
if (element.requestFullscreen) {
|
|
|
element.requestFullscreen();
|
|
|
} else if (element.mozRequestFullScreen) {
|
|
|
element.mozRequestFullScreen();
|
|
|
} else if (element.webkitRequestFullscreen) {
|
|
|
element.webkitRequestFullscreen();
|
|
|
} else if (element.msRequestFullscreen) {
|
|
|
element.msRequestFullscreen();
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
$('body').removeClass("full-screen");
|
|
|
$('#alarm-fullscreen-toggler').removeClass("active");
|
|
|
if (document.exitFullscreen) {
|
|
|
document.exitFullscreen();
|
|
|
} else if (document.mozCancelFullScreen) {
|
|
|
document.mozCancelFullScreen();
|
|
|
} else if (document.webkitCancelFullScreen) {
|
|
|
document.webkitCancelFullScreen();
|
|
|
} else if (document.msExitFullscreen) {
|
|
|
document.msExitFullscreen();
|
|
|
}
|
|
|
|
|
|
}
|
|
|
});
|
|
|
var fullscreen=function(){
|
|
|
elem=document.body;
|
|
|
if(elem.webkitRequestFullScreen){
|
|
|
elem.webkitRequestFullScreen();
|
|
|
}else if(elem.mozRequestFullScreen){
|
|
|
elem.mozRequestFullScreen();
|
|
|
}else if(elem.requestFullScreen){
|
|
|
elem.requestFullscreen();
|
|
|
}else{
|
|
|
//浏览器不支持全屏API或已被禁用
|
|
|
}
|
|
|
}
|
|
|
var exitFullscreen=function(){
|
|
|
var elem=document;
|
|
|
if(elem.webkitCancelFullScreen){
|
|
|
elem.webkitCancelFullScreen();
|
|
|
}else if(elem.mozCancelFullScreen){
|
|
|
elem.mozCancelFullScreen();
|
|
|
}else if(elem.cancelFullScreen){
|
|
|
elem.cancelFullScreen();
|
|
|
}else if(elem.exitFullscreen){
|
|
|
elem.exitFullscreen();
|
|
|
}else{
|
|
|
//浏览器不支持全屏API或已被禁用
|
|
|
}
|
|
|
}
|
|
|
//toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。
|
|
|
//charAt() 方法可返回指定位置的字符。第一个字符位置为 0, 第二个字符位置为 1,以此类推.
|
|
|
//getDay() 方法可返回一周（0~6）的某一天的数字。
|
|
|
setInterval("jnkc.innerHTML=' '+new Date().Format('yyyy年MM月dd日 hh:mm:ss')+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);
|
|
|
var map = new BMap.Map("container",{minZoom : 4,maxZoom : 15 }); // 创建地图实例
|
|
|
map.addControl(new BMap.NavigationControl({
|
|
|
anchor: BMAP_ANCHOR_TOP_RIGHT, // 靠左上角位置
|
|
|
type: BMAP_NAVIGATION_CONTROL_LARGE, // LARGE类型
|
|
|
}));
|
|
|
var point = new BMap.Point(106.404, 39.915); // 创建点坐标
|
|
|
map.centerAndZoom(point, 5); // 初始化地图，设置中心点坐标和地图级别
|
|
|
//var infoWindow;
|
|
|
function addMarker(id,mc,coordinate,scale,voltagegrade,note,svgurl) {
|
|
|
var pointstr=coordinate.split(",");
|
|
|
if(pointstr.length<2)
|
|
|
{
|
|
|
return;
|
|
|
}
|
|
|
var markpoint = new BMap.Point(parseFloat(pointstr[0]), parseFloat(pointstr[1]));
|
|
|
var myIcon = new BMap.Icon("__IMG__/bdmap/images/marker_red_sprite.png ", new BMap.Size(23, 25), {
|
|
|
offset: new BMap.Size(10, 25),
|
|
|
imageOffset: new BMap.Size(0, 0) // 设置图片偏移
|
|
|
});
|
|
|
var infostr="<div class='infodiv'><table class='mytable'>";
|
|
|
infostr=infostr+"<thead><tr class='title'><th colspan='2'>"+mc+"</th></tr></thead>";
|
|
|
infostr=infostr+"<tr style='display: none'><th>id</th><td>"+id+"</td></tr>";
|
|
|
infostr=infostr+"<tr><th>电压等级</th><td>"+voltagegrade+"kV</td></tr>";
|
|
|
infostr=infostr+"<tr><th>规模</th><td>"+scale+"</td></tr>";
|
|
|
infostr=infostr+"<tr><th>简介</th><td>"+note+"</td></tr>";
|
|
|
infostr = infostr+"</table></div>";
|
|
|
infostr=infostr.replace(/null/g,"");
|
|
|
var infoWindow= new BMap.InfoWindow(infostr); // 创建信息窗口对象
|
|
|
var marker = new BMap.Marker(markpoint, {icon: myIcon});
|
|
|
map.addOverlay(marker);
|
|
|
var len = mc.length;
|
|
|
var label = new BMap.Label(mc, {offset: new BMap.Size(-5 * (len-1), -20)});
|
|
|
label.setStyle({
|
|
|
color : "#000000",
|
|
|
fontSize : "13px",
|
|
|
border :"2",
|
|
|
});
|
|
|
marker.setLabel(label);
|
|
|
//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
|
|
|
marker.addEventListener("click", function () {
|
|
|
//marker.setAnimation(BMAP_ANIMATION_DROP); //跳动的动画
|
|
|
$('#iframe1').attr('src', '__IMG__/bdmap/'+svgurl);
|
|
|
$('#iframe2').attr('src', "{:url('/index/sbtj')}");
|
|
|
|
|
|
});
|
|
|
marker.addEventListener("mouseover", function () {
|
|
|
map.openInfoWindow(infoWindow, markpoint); //开启信息窗口
|
|
|
});
|
|
|
marker.addEventListener("mouseout", function () {
|
|
|
map.closeInfoWindow(infoWindow, markpoint); //开启信息窗口
|
|
|
});
|
|
|
|
|
|
}
|
|
|
$.getJSON('http://192.168.1.75/index.php/map/bdmap', function (data) {
|
|
|
for(var i=0;i<data.length;i++)
|
|
|
{
|
|
|
var id=data[i].id;
|
|
|
var mc=data[i].mc;
|
|
|
var coordinate=data[i].coordinate;
|
|
|
var scale=data[i].scale;
|
|
|
var voltagegrade=data[i].voltagegrade;
|
|
|
var note=data[i].note;
|
|
|
var svgurl=data[i].svgurl;
|
|
|
if(id && mc && coordinate) {
|
|
|
addMarker(id, mc, coordinate, scale, voltagegrade, note, svgurl);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
|
|
|
map.enableKeyboard()
|
|
|
map.addControl(new BMap.NavigationControl({
|
|
|
anchor: BMAP_ANCHOR_TOP_RIGHT, // 靠左上角位置
|
|
|
type: BMAP_NAVIGATION_CONTROL_LARGE, // LARGE类型
|
|
|
}));
|
|
|
</script>
|
|
|
</html>
|