datashow2 operation guangling
This commit is contained in:
parent
dabf935a79
commit
67932f2f2e
|
|
@ -2,12 +2,12 @@
|
|||
function update() {
|
||||
if ($('#mapshowinput').length) {
|
||||
source.clear()
|
||||
$.get('../api/mapshow?a=risk', function (res) {
|
||||
$.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) {
|
||||
$.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
|
||||
|
|
@ -18,7 +18,7 @@ function update() {
|
|||
setPoint(data)
|
||||
}
|
||||
})
|
||||
$.get('../api/mapshow?a=miss', function (res) {
|
||||
$.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
|
||||
|
|
@ -29,7 +29,7 @@ function update() {
|
|||
setPoint(data)
|
||||
}
|
||||
})
|
||||
$.get('../api/mapshow?a=operation', function (res) {
|
||||
$.get('/api/mapshow?a=operation', function (res) {
|
||||
console.log(res)
|
||||
for (let i = 0, len = res.length; i < len; i++) {
|
||||
var data = res[i]
|
||||
|
|
@ -44,4 +44,4 @@ function update() {
|
|||
})
|
||||
}
|
||||
}
|
||||
var t1 = window.setInterval(update, 1000 * 60)
|
||||
var t1 = window.setInterval(update, 1000 * 60 * 5)
|
||||
|
|
@ -0,0 +1,395 @@
|
|||
<!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/js/util2.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_center">
|
||||
<div class="center_top">
|
||||
<div id="map" class="map" style="width:100%;height:100%;outline: #4A74A8 solid 0.15em;">
|
||||
</div>
|
||||
<input type='hidden' id='mapshowinput'></input>
|
||||
<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 class="tablebox">
|
||||
|
||||
<div class="tbl-header">
|
||||
<table cellspacing="0" cellpadding="0" border="0">
|
||||
<thead>
|
||||
<tr height="40">
|
||||
<th colspan="7" style="background-color: red;">危险作业列表</th>
|
||||
</tr>
|
||||
<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>
|
||||
</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 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)
|
||||
update()
|
||||
})
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
|
||||
var MyMarhq = '';
|
||||
var Mylist = '';
|
||||
clearInterval(Mylist);
|
||||
$('.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 > 10) {
|
||||
$('.tbl-body tbody').html($('.tbl-body tbody').html() + $('.tbl-body tbody').html());
|
||||
$('.tbl-body').css('top', '0');
|
||||
var tblTop = 0;
|
||||
var speedhq = 100; // 数值越大越慢
|
||||
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);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -99,6 +99,8 @@
|
|||
style="display:none;color: #eee5e7;cursor: pointer;" onclick="setup()">预警设置</a>
|
||||
<a style="color: #eee5e7;cursor: pointer;" href="datashow" target="_blank" class="easyui-linkbutton"
|
||||
iconCls="fa-desktop" plain=true>数据大屏</a>
|
||||
<a style="color: #eee5e7;cursor: pointer;" href="html/datashow2" target="_blank" class="easyui-linkbutton"
|
||||
iconCls="fa-desktop" plain=true>数据大屏2</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -99,6 +99,7 @@ urlpatterns = [
|
|||
path('html/operproce',views.operproce),#操作规程
|
||||
path('html/addoperproce',views.addoperproce),
|
||||
path('html/operproce/detail/<int:id>/',views.operprocedetail),#责任制度观看详情
|
||||
path('html/datashow2/',views.datashow2),
|
||||
#html页面
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -490,6 +490,12 @@ def addoperproce(req):#责任制
|
|||
def operprocedetail(req, id):
|
||||
return render(req, 'operprocedetail.html', {'id': id})
|
||||
|
||||
def datashow2(req):
|
||||
return render(req,'datashow2.html')
|
||||
|
||||
|
||||
|
||||
|
||||
def mainhtml(req):
|
||||
# 计算一些数据
|
||||
userid = req.session['userid']
|
||||
|
|
@ -5079,6 +5085,14 @@ def apioperation(req):
|
|||
a = a[startnum:endnum].values('zyid', 'zylx__dickeyname', 'zynum',
|
||||
'zyfzr__name', 'zynr', 'zyzt', 'submittime', 'todouser__name','zyqy__name')
|
||||
return HttpResponse(transjson(total, a), content_type="application/json")
|
||||
elif a == 'liston':
|
||||
userid = req.session['userid']
|
||||
usecomp = User.objects.get(userid=userid).usecomp
|
||||
objs = Operation.objects.filter(
|
||||
usecomp=usecomp, deletemark=1).exclude(zyzt__zyzt='已关闭')
|
||||
total = objs.count()
|
||||
objs = objs.values('zyid', 'zylx__dickeyname', 'zynum','zyfzr__name', 'zynr','zyqy__name','zyqy__id','zybm__partname','kssj').annotate(num=Count('zyry'))
|
||||
return HttpResponse(transjson(total, objs), content_type="application/json")
|
||||
elif a == 'exportexcel':
|
||||
userid = req.session['userid']
|
||||
usecomp = User.objects.get(userid=userid).usecomp
|
||||
|
|
|
|||
Loading…
Reference in New Issue