593 lines
22 KiB
HTML
593 lines
22 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/style.css" />
|
||
|
||
<link rel="icon" href="/media/favicon.ico" type="image/x-icon" />
|
||
<link rel="stylesheet" type="text/css" href="/static/safesite/mystatic/css/loading.css">
|
||
<link rel="stylesheet" type="text/css" href="/static/safesite/easyui/themes/default/easyui.css">
|
||
<link rel="stylesheet" type="text/css" href="/static/safesite/easyui/themes/icon.css">
|
||
<link rel="stylesheet" type="text/css" href="/static/safesite/mystatic/css/mystyle.css" />
|
||
<link rel="stylesheet" type="text/css" href="/static/safesite/mystatic/css/font-awesome.min.css">
|
||
<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/easyui/jquery.easyui.min.js"></script>
|
||
<script type="text/javascript" src="/static/safesite/mystatic/js/jquery.serializejson.min.js"></script>
|
||
<script type="text/javascript" src="/static/safesite/easyui/locale/easyui-lang-zh_CN.js"></script>
|
||
<script type="text/javascript" src="/static/safesite/mystatic/js/echarts.min.js"></script>
|
||
<script type="text/javascript" src="/static/safesite/mystatic/js/chart.js"></script>
|
||
<script type="text/javascript" src="/static/safesite/mystatic/js/util.js"></script>
|
||
<script type="text/javascript" src="/static/safesite/mystatic/js/loading.js"></script>
|
||
<script type="text/javascript" src="/static/safesite/mystatic/layer/layer.js"></script>
|
||
<script type="text/javascript" src="/static/safesite/mystatic/js/datagrid-export.js"></script>
|
||
<script type="text/javascript" src="/static/safesite/mystatic/js/jquery-qrcode-0.17.0.min.js"></script>
|
||
<script src="https://cdn.bootcss.com/ckeditor/4.8.0/ckeditor.js"></script>
|
||
<script type="text/javascript" src="/static/safesite/mystatic/openlayer/ol.js"></script>
|
||
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
|
||
|
||
</head>
|
||
<body>
|
||
<header>
|
||
企业安全管理数据统计
|
||
<span id=localtime style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span>
|
||
</header>
|
||
<div id="content">
|
||
<div class="content_left">
|
||
<div class="dtuplc">
|
||
<div id="yhztt" style="height:80%;"></div>
|
||
|
||
</div>
|
||
|
||
<div class="online">
|
||
<div class="title"><img src="/static/safesite/mystatic/images/bigdata/icon01.png" /> 隐患大类分布</div>
|
||
<div id="yhlbt" style="height:80%;"></div>
|
||
</div>
|
||
<!--
|
||
DTU和PLC完
|
||
-->
|
||
<div class="industry" >
|
||
<div class="title"><img src="/static/safesite/mystatic/images/bigdata/icon02.png" /> 隐患数量趋势</div>
|
||
<div class="industry_con" id="yhqst" ></div>
|
||
</div>
|
||
</div>
|
||
<div class="content_center">
|
||
<div class="center_top">
|
||
<div class="title"><img src="/static/safesite/mystatic/images/bigdata/icon03.png" /> 平台数据分布</div>
|
||
<div class="center_top_con" id="distribution_map">
|
||
<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>
|
||
<div class="center_bot">
|
||
<table class='panel-table' bordercolor="#0d48e0" border="1">
|
||
<thead bgcolor="#0e4ae0" align="center" >
|
||
<tr height="40">
|
||
<th colspan="7" bgcolor="#FF0000"> 隐患排查</th>
|
||
</tr>
|
||
<tr>
|
||
<th>编号</th>
|
||
<th>流程状态</th>
|
||
<th>隐患等级</th>
|
||
<th>隐患类别</th>
|
||
<th>隐患评估</th>
|
||
<th>发现人</th>
|
||
<th>下一步处理人</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for t in troubles %}
|
||
<tr class="aaa" style="font-size: 16px;" align="center" >
|
||
<td>{{ t.yhnum }}</td>
|
||
<td>{{ t.get_yhzt_display }}</td>
|
||
<td>{{ t.yhdj|default:"" }}</td>
|
||
<td>{{ t.yhlb|default:"" }}</td>
|
||
<td>{{ t.yhpg|default:"" }}</td>
|
||
<td>{{ t.fxr.name }}</td>
|
||
<td>{{ t.todouser.name }}</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="content_right">
|
||
<div class="report">
|
||
<div class="report1">
|
||
<p>线下培训</p>
|
||
<small>{{px}}条</small>
|
||
</div>
|
||
<div class="report2">
|
||
<p>行为观察</p>
|
||
<small>{{xw}} 条</small>
|
||
</div>
|
||
</div>
|
||
<div class="news_report">
|
||
<div class="title"><img src="/static/safesite/mystatic/images/bigdata/icon05.png" /> 本月安全状态</div>
|
||
<div id="map1div" style="width: 100%; height:100%;float:left;"></div>
|
||
</div>
|
||
<div class="data_box">
|
||
<div class="title"><img src="/static/safesite/mystatic/images/bigdata/icon06.png" /> 预警预测趋势图</div>
|
||
<div id="map2div" style="width:100%; height:80%;float:left;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--遮罩层-->
|
||
<div class="bgPop"></div>
|
||
<!--弹出框-->
|
||
<div class="pop">
|
||
<div class="pop-top">
|
||
报警记录
|
||
<span class="pop-close">Ｘ</span>
|
||
</div>
|
||
<div class="pop-content">
|
||
<table class="panel-table" bordercolor="#deefff" border="1">
|
||
<thead bgcolor="#971212" align="center" >
|
||
<tr height="38">
|
||
<th>字段</th>
|
||
<th>字段</th>
|
||
<th>字段</th>
|
||
<th>字段</th>
|
||
<th>字段</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="aaa" style="font-size: 16px;" align="center" >
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
</tr>
|
||
<tr class="aaa" style="font-size: 16px;" align="center" >
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
</tr>
|
||
<tr class="aaa" style="font-size: 16px;" align="center" >
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
</tr>
|
||
|
||
<tr class="aaa" style="font-size: 16px;" align="center" >
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="pop-foot">
|
||
<input type="button" value="确定" class="pop-cancel pop-close">
|
||
</div>
|
||
</div>
|
||
<script>
|
||
$(document).ready(function () {
|
||
$('.pop-close').click(function () {
|
||
$('.bgPop,.pop').hide();
|
||
});
|
||
$('.click_pop').click(function () {
|
||
$('.bgPop,.pop').show();
|
||
});
|
||
})
|
||
|
||
</script>
|
||
<!--遮罩层-->
|
||
<div class="bgPop2"></div>
|
||
<!--弹出框-->
|
||
<div class="pop2">
|
||
<div class="pop-top">
|
||
历史记录
|
||
<span class="pop-close">Ｘ</span>
|
||
</div>
|
||
<div class="pop-content">
|
||
<table class="panel-table" bordercolor="#deefff" border="1">
|
||
<thead bgcolor="#10aaa5" align="center" >
|
||
<tr height="38">
|
||
<th>字段</th>
|
||
<th>字段</th>
|
||
<th>字段</th>
|
||
<th>字段</th>
|
||
<th>字段</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="aaa" style="font-size: 16px;" align="center" >
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
</tr>
|
||
<tr class="aaa" style="font-size: 16px;" align="center" >
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
</tr>
|
||
<tr class="aaa" style="font-size: 16px;" align="center" >
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
</tr>
|
||
|
||
<tr class="aaa" style="font-size: 16px;" align="center" >
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
<td> </td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="pop-foot">
|
||
<input type="button" value="确定" class="pop-cancel pop-close">
|
||
</div>
|
||
</div>
|
||
<script>
|
||
$(document).ready(function () {
|
||
$('.pop-close').click(function () {
|
||
$('.bgPop2,.pop2').hide();
|
||
});
|
||
$('.click_pop2').click(function () {
|
||
$('.bgPop2,.pop2').show();
|
||
});
|
||
})
|
||
|
||
</script>
|
||
<!--遮罩层-->
|
||
<div class="bgPop3"></div>
|
||
<!--弹出框-->
|
||
<div class="pop3">
|
||
<div class="pop-top">
|
||
组态应用
|
||
<span class="pop-close">Ｘ</span>
|
||
</div>
|
||
<div class="pop-content">
|
||
组态应用
|
||
</div>
|
||
<div class="pop-foot">
|
||
<input type="button" value="确定" class="pop-cancel pop-close">
|
||
</div>
|
||
</div>
|
||
<script>
|
||
$(document).ready(function () {
|
||
$('.pop-close').click(function () {
|
||
$('.bgPop3,.pop3').hide();
|
||
});
|
||
$('.click_pop3').click(function () {
|
||
$('.bgPop3,.pop3').show();
|
||
});
|
||
})
|
||
|
||
</script>
|
||
|
||
<!-- 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 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)
|
||
mapupdate()
|
||
})
|
||
|
||
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'
|
||
anchor = [0.9, 50]
|
||
}
|
||
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 setPointOnly(i) {
|
||
var pointFeature = new ol.Feature({
|
||
geometry: new ol.geom.Point(i.location),
|
||
id: i.id,
|
||
name: i.name,
|
||
type: i.type2,
|
||
num: i.number
|
||
});
|
||
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)
|
||
}
|
||
function opendetail(id) {
|
||
closepopup()
|
||
var myw = screen.availWidth * 0.5;
|
||
opendg('区域详情', 'html/areadetail?id=' + id, myw)
|
||
|
||
}
|
||
|
||
</script>
|
||
<!-- right center -->
|
||
<script type="text/javascript">
|
||
//获取相关参数并绘图
|
||
$.ajax({
|
||
type: "GET",
|
||
url: '../setup?a=setup',
|
||
datatype: 'json',
|
||
processData: false,
|
||
contentType: false,
|
||
beforeSend: function () { },
|
||
success: function (data) {
|
||
$.get('../api/tool?a=servertime',function(res){
|
||
if(res.code==1){
|
||
bindmap1_no_text('map1div', data,res.year,res.month);
|
||
}
|
||
})
|
||
bindmap2_no_text('map2div', data);
|
||
},
|
||
});
|
||
</script>
|
||
<!-- left center -->
|
||
<script>
|
||
bindmap3_o_no_test('yhlbt', { 'year': year, 'month': month });
|
||
//bindmap4_o('yhpgt', { 'year': year, 'month': month });
|
||
|
||
bindmap7_no_text('yhqst');
|
||
bindmap8_no_text('yhztt');
|
||
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|