458 lines
18 KiB
HTML
458 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv='refresh' content='1600'>
|
||
<title>数据大屏</title>
|
||
<link rel="stylesheet" href="/static/safesite/mystatic/css/bigdata/style2.css" />
|
||
<link rel="icon" href="/media/favicon.ico" type="image/x-icon" />
|
||
<link rel="stylesheet" type="text/css" href="/static/safesite/mystatic/openlayer/ol.css">
|
||
<script type="text/javascript" src="/static/safesite/easyui/jquery.min.js"></script>
|
||
<script type="text/javascript" src="/static/safesite/mystatic/openlayer/ol.js"></script>
|
||
<script type="text/javascript" src="/static/safesite/mystatic/openlayer/polyfill.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<header>
|
||
企业环保数据显示大屏
|
||
</header>
|
||
<div class="center_top">
|
||
<div id="map" class="map" style="width:100%;height:100%;outline: #4A74A8 solid 0.15em;">
|
||
</div>
|
||
<div id='mapshowinput'></div>
|
||
<div id="popup" class="ol-popup">
|
||
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
||
<div id="popup-content"></div>
|
||
</div>
|
||
</div>
|
||
<div class="center_bot">
|
||
<div height="40" style="background-color: red;font-weight:bold;text-align: center;">危险作业列表
|
||
</div>
|
||
<div class="tablebox">
|
||
<div class="tbl-header">
|
||
<table cellspacing="0" cellpadding="0" border="0">
|
||
<thead>
|
||
<tr>
|
||
<th>作业编号</th>
|
||
<th>作业类型</th>
|
||
<th>作业区域</th>
|
||
<th>作业部门</th>
|
||
<th>作业负责人</th>
|
||
<th>作业人数</th>
|
||
<th>开始时间</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody style="opacity:0;"></tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="tbl-body">
|
||
<table cellspacing="0" cellpadding="0" border="0">
|
||
<thead>
|
||
<tr>
|
||
<th>作业编号</th>
|
||
<th>作业类型</th>
|
||
<th>作业区域</th>
|
||
<th>作业部门</th>
|
||
<th>作业负责人</th>
|
||
<th>作业人数</th>
|
||
<th>开始时间</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- center -->
|
||
<style>
|
||
.ol-popup {
|
||
position: absolute;
|
||
background-color: white;
|
||
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
border: 1px solid #cccccc;
|
||
bottom: 12px;
|
||
left: -50px;
|
||
min-width: 280px;
|
||
}
|
||
|
||
.ol-popup:after,
|
||
.ol-popup:before {
|
||
top: 100%;
|
||
border: solid transparent;
|
||
content: " ";
|
||
height: 0;
|
||
width: 0;
|
||
position: absolute;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.ol-popup:after {
|
||
border-top-color: white;
|
||
border-width: 10px;
|
||
left: 48px;
|
||
margin-left: -10px;
|
||
}
|
||
|
||
.ol-popup:before {
|
||
border-top-color: #cccccc;
|
||
border-width: 11px;
|
||
left: 48px;
|
||
margin-left: -11px;
|
||
}
|
||
|
||
.ol-popup-closer {
|
||
text-decoration: none;
|
||
position: absolute;
|
||
top: 2px;
|
||
right: 8px;
|
||
}
|
||
|
||
.ol-popup-closer:after {
|
||
content: "✖";
|
||
}
|
||
</style>
|
||
<script>
|
||
var map, source, vector;// global so we can remove it later
|
||
var popuplist = [];
|
||
var MyMarhq = ''; //列表滚动定时
|
||
var Mylist = ''; //作业列表定时获取
|
||
var Updatepoint = ''; //图标定时获取
|
||
var Updatepopup = '';//popup定时获取
|
||
var container = document.getElementById("popup");
|
||
var content = document.getElementById("popup-content");
|
||
var popupCloser = document.getElementById("popup-closer");
|
||
var overlay = new ol.Overlay({
|
||
//设置弹出框的容器
|
||
element: container,
|
||
//是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
|
||
autoPan: false
|
||
});
|
||
$.get('/api/map?a=default', function (res) {
|
||
$('#map').empty()
|
||
map = initMap(res.pic)
|
||
updatepo()
|
||
})
|
||
|
||
function initMap(url) {
|
||
var extent = [0, 0, 1920, 1080];
|
||
var projection = new ol.proj.Projection({
|
||
code: 'xkcd-image',
|
||
units: 'pixels',
|
||
extent: extent
|
||
});
|
||
map = new ol.Map({
|
||
layers: [
|
||
new ol.layer.Image({
|
||
source: new ol.source.ImageStatic({
|
||
url: 'http://' + window.location.host + '/' + url,
|
||
projection: projection,
|
||
imageExtent: extent
|
||
})
|
||
})
|
||
],
|
||
target: 'map',
|
||
view: new ol.View({
|
||
projection: projection,
|
||
center: ol.extent.getCenter(extent),
|
||
zoom: 2.3,
|
||
maxZoom: 8
|
||
}),
|
||
controls: ol.control.defaults().extend([new ol.control.FullScreen()])
|
||
});
|
||
source = new ol.source.Vector({ wrapX: false });
|
||
vector = new ol.layer.Vector({
|
||
source: source
|
||
});
|
||
map.addLayer(vector);//加载图层
|
||
map.on('pointermove', function (e) {
|
||
|
||
//在点击时获取像素区域
|
||
var pixel = map.getEventPixel(e.originalEvent);
|
||
var feature = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
|
||
//在视口中遍历所有具有像素颜色的图层，如果图层存在，则返回
|
||
return feature;
|
||
});
|
||
if (feature) {
|
||
var data = feature.getProperties()
|
||
//设置弹出框内容，可以HTML自定义
|
||
var html = "<p style='color:green;font-weight:bold' >" + data.name + "</p>"
|
||
if (data.type == 'yh') {
|
||
html = html + "<p style='color:blue'>事故隐患数量:" + data.num.toString() + "</p>"
|
||
}
|
||
else if (data.type == 'ws') {
|
||
html = html + "<p style='color:blue'>未遂事件数量:" + data.num.toString() + "</p>"
|
||
}
|
||
else if (data.type == 'zy') {
|
||
html = html + "<p style='color:blue'>危险作业数量:" + data.num.toString() + "</p>"
|
||
for (let i = 0; i < data.list.length; i++) {
|
||
html = html + "<p style='color:red'>" + (i + 1).toString() + ":" + data.list[i].zylx__dickeyname + "--" + data.list[i].zybm__partname + "--" + data.list[i].zyfzr__name + "--作业人数" + data.list[i].num.toString() + "</p>"
|
||
}
|
||
}
|
||
else if (data.type == 'fx') {
|
||
html = html + "<p style='color:blue'>风险等级:" + data.risklevel + "</p>"
|
||
}
|
||
content.innerHTML = html;
|
||
//设置overlay的显示位置
|
||
overlay.setPosition(e.coordinate);
|
||
//显示overlay
|
||
map.addOverlay(overlay);
|
||
}
|
||
else {
|
||
closepopup()
|
||
}
|
||
});
|
||
map.on('click', function (e) {
|
||
var coordinate = e.coordinate;
|
||
var feature = map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
|
||
return feature;
|
||
});
|
||
if (feature) {
|
||
var data = feature.getProperties()
|
||
opendetail(data.id)
|
||
}
|
||
});
|
||
popupCloser.onclick = function () {
|
||
closepopup()
|
||
return false;
|
||
};
|
||
return map
|
||
}
|
||
function closepopup() {
|
||
overlay.setPosition(undefined);
|
||
popupCloser.blur();
|
||
}
|
||
var createPolygonStyle = function (feature) {
|
||
var data = feature.getProperties()
|
||
var color
|
||
if (data.risklevel == "重大风险") {
|
||
color = 'rgb(255,0,0,0.6)'
|
||
} else if (data.risklevel == "一般风险") {
|
||
color = 'rgb(255,255,0,0.6)'
|
||
} else if (data.risklevel == "较大风险") {
|
||
color = 'rgb(255,165,0,0.6)'
|
||
} else {
|
||
color = 'rgb(0,0,255,0.6)'
|
||
}
|
||
return new ol.style.Style({
|
||
fill: new ol.style.Fill({
|
||
color: color
|
||
}),
|
||
|
||
text: new ol.style.Text({
|
||
textAlign: 'center', //位置
|
||
textBaseline: 'middle', //基准线
|
||
font: 'normal 14px 微软雅黑', //文字样式
|
||
text: data.name, //文本内容
|
||
fill: new ol.style.Fill({
|
||
color: 'rgb(255,255,255)'
|
||
}),
|
||
// stroke: new ol.style.Stroke({
|
||
// width: 0.5,
|
||
// color: [255, 0, 255, 0.5]
|
||
// }),
|
||
})
|
||
|
||
});
|
||
}
|
||
var createPointStyle = function (feature) {
|
||
var data = feature.getProperties()
|
||
if (data.type == 'yh') {
|
||
src = '/static/safesite/mystatic/images/mapyh.png'
|
||
anchor = [0.9, 50]
|
||
} else if (data.type == 'ws') {
|
||
src = '/static/safesite/mystatic/images/mapws.png'
|
||
anchor = [0.1, 50]
|
||
}
|
||
else if (data.type == 'zy') {
|
||
src = '/static/safesite/mystatic/images/mapzy.png'
|
||
anchor = [0.5, 50]
|
||
}
|
||
else {
|
||
src = '/static/safesite/mystatic/images/icon1.png'
|
||
}
|
||
return new ol.style.Style({
|
||
/**{olx.style.IconOptions}类型*/
|
||
image: new ol.style.Icon(
|
||
({
|
||
anchor: anchor,
|
||
anchorOrigin: 'top-right',
|
||
anchorXUnits: 'fraction',
|
||
anchorYUnits: 'pixels',
|
||
offsetOrigin: 'top-right',
|
||
// offset:[0,10],
|
||
//图标缩放比例
|
||
// scale:0.5,
|
||
//透明度
|
||
opacity: 0.75,
|
||
//图标的url
|
||
src: src
|
||
})
|
||
),
|
||
text: new ol.style.Text({
|
||
textAlign: 'center', //位置
|
||
textBaseline: 'middle', //基准线
|
||
font: 'normal 14px 微软雅黑', //文字样式
|
||
//text: feature.get('name'), //文本内容
|
||
})
|
||
|
||
});
|
||
}
|
||
function setPoint(i) {
|
||
var extent = ol.extent.boundingExtent(i.polygon[0]);
|
||
var center = ol.extent.getCenter(extent);
|
||
var pointFeature = new ol.Feature({
|
||
geometry: new ol.geom.Point(center),
|
||
id: i.id,
|
||
name: i.name,
|
||
type: i.type,
|
||
num: i.num,
|
||
list: i.list
|
||
});
|
||
pointFeature.setStyle(createPointStyle(pointFeature));
|
||
source.addFeature(pointFeature)
|
||
}
|
||
function setPolygon(i) {
|
||
var polygonFeature = new ol.Feature({
|
||
geometry: new ol.geom.Polygon(i.polygon),
|
||
id: i.id,
|
||
name: i.name,
|
||
type: 'fx',
|
||
risklevel: i.risklevel
|
||
});
|
||
polygonFeature.setStyle(createPolygonStyle(polygonFeature));
|
||
source.addFeature(polygonFeature)
|
||
}
|
||
|
||
|
||
|
||
clearInterval(Mylist, Updatepoint);
|
||
$('.tbl-body tbody').empty();
|
||
$('.tbl-header tbody').empty();
|
||
var str = '';
|
||
var Items = []
|
||
function getOperlist() {
|
||
$.get('/api/operation?a=liston', function (res) {
|
||
clearInterval(MyMarhq);
|
||
Items = res.rows
|
||
str = ''
|
||
$.each(Items, function (i, item) {
|
||
str = str + '<tr>' +
|
||
'<td>' + item.zynum + '</td>' +
|
||
'<td>' + item.zylx__dickeyname + '</td>' +
|
||
'<td>' + item.zyqy__name + '</td>' +
|
||
'<td>' + item.zybm__partname + '</td>' +
|
||
'<td>' + item.zyfzr__name + '</td>' +
|
||
'<td>' + item.num + '</td>' +
|
||
'<td>' + item.kssj + '</td>' +
|
||
'</tr>'
|
||
});
|
||
$('.tbl-body tbody').html(str);
|
||
$('.tbl-header tbody').html(str);
|
||
if (Items.length > 9) {
|
||
$('.tbl-body tbody').html($('.tbl-body tbody').html() + $('.tbl-body tbody').html());
|
||
$('.tbl-body').css('top', '0');
|
||
var tblTop = 0;
|
||
var speedhq = 80; // 数值越大越慢
|
||
var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();
|
||
function Marqueehq() {
|
||
if (tblTop <= -outerHeight * Items.length) {
|
||
tblTop = 0;
|
||
} else {
|
||
tblTop -= 1;
|
||
}
|
||
$('.tbl-body').css('top', tblTop + 'px');
|
||
}
|
||
MyMarhq = setInterval(Marqueehq, speedhq);
|
||
// 鼠标移上去取消事件
|
||
$(".tbl-header tbody").hover(function () {
|
||
clearInterval(MyMarhq);
|
||
}, function () {
|
||
clearInterval(MyMarhq);
|
||
MyMarhq = setInterval(Marqueehq, speedhq);
|
||
})
|
||
|
||
}
|
||
})
|
||
}
|
||
getOperlist();
|
||
Mylist = setInterval("getOperlist()", 1000 * 60 * 10);
|
||
//map定时显示,每5分钟请求一次
|
||
function updatepo() {
|
||
if ($('#mapshowinput').length) {
|
||
source.clear()
|
||
// $.get('/api/mapshow?a=risk', function (res) {
|
||
// for (let i = 0, len = res.length; i < len; i++) {
|
||
// setPolygon(res[i])
|
||
// }
|
||
// })
|
||
// $.get('/api/mapshow?a=trouble', function (res) {
|
||
// for (let i = 0, len = res.length; i < len; i++) {
|
||
// var data = res[i]
|
||
// data.id = data.yhqy__id
|
||
// data.num = data.num
|
||
// data.polygon = data.yhqy__polygon
|
||
// data.name = data.yhqy__name
|
||
// data.type = 'yh'
|
||
// setPoint(data)
|
||
// }
|
||
// })
|
||
// $.get('/api/mapshow?a=miss', function (res) {
|
||
// for (let i = 0, len = res.length; i < len; i++) {
|
||
// var data = res[i]
|
||
// data.id = data.missqy__id
|
||
// data.num = data.num
|
||
// data.polygon = data.missqy__polygon
|
||
// data.name = data.missqy__name
|
||
// data.type = 'ws'
|
||
// setPoint(data)
|
||
// }
|
||
// })
|
||
// $.get('/api/mapshow?a=operation', function (res) {
|
||
// for (let i = 0, len = res.length; i < len; i++) {
|
||
// var data = res[i]
|
||
// data.id = data.zyqy__id
|
||
// data.num = data.num
|
||
// data.polygon = data.zyqy__polygon
|
||
// data.name = data.zyqy__name
|
||
// data.type = 'zy'
|
||
// data.list = data.zylist
|
||
// popuplist.push(data)
|
||
// setPoint(data)
|
||
// }
|
||
// })
|
||
}
|
||
}
|
||
Updatepoint = setInterval(updatepo, 1000 * 60 * 5)
|
||
function showpopup(){
|
||
var len = popuplist.length
|
||
if(len != 0){
|
||
|
||
var index = Math.floor(Math.random()*len)
|
||
let po = popuplist[index]
|
||
var extent = ol.extent.boundingExtent(po.polygon[0]);
|
||
var center = ol.extent.getCenter(extent);//中心点
|
||
var html = "<p style='color:green;font-weight:bold' >" + po.name + "</p>"
|
||
html = html + "<p style='color:blue'>危险作业数量:" + po.num.toString() + "</p>"
|
||
for (let i = 0; i < po.list.length; i++) {
|
||
html = html + "<p style='color:red'>" + (i + 1).toString() + ":" + po.list[i].zylx__dickeyname + "--" + po.list[i].zybm__partname + "--" + po.list[i].zyfzr__name + "--作业人数" + po.list[i].num.toString() + "</p>"
|
||
}
|
||
content.innerHTML = html;
|
||
overlay.setPosition(undefined);
|
||
popupCloser.blur();
|
||
//设置overlay的显示位置
|
||
overlay.setPosition(center);
|
||
//显示overlay
|
||
map.addOverlay(overlay);
|
||
}
|
||
}
|
||
Updatepopup = setInterval(showpopup, 1000 * 5)
|
||
</script>
|
||
</body>
|
||
|
||
</html> |