This commit is contained in:
曹前明 2022-05-31 07:12:22 +08:00
commit 9bb1a5054d
10 changed files with 732 additions and 138 deletions

View File

@ -1,6 +1,6 @@
<div class="easyui-layout" style="width:100%;height:100%;">
<div data-options="region:'west', title:'排放口', split:true, border:false" style="width: 300px;height:100%;">
<div data-options="region:'west', title:'废气排放口', split:true, border:false" style="width: 300px;height:100%;">
<div id="drainTableBar">
<a onclick="addDrain()" class="easyui-linkbutton" data-options="iconCls: 'fa-plus',plain: true">新增</a>
<a onclick="editDrain()" class="easyui-linkbutton" data-options="iconCls: 'fa-pencil',plain: true">编辑</a>
@ -8,7 +8,7 @@
</div>
<table id="drainTable" style="height:100%"></table>
</div>
<div data-options="region:'center',title:'监测记录',split:true,border:false" style="height:100%;">
<div data-options="region:'center',title:'废气监测记录',split:true,border:false" style="height:100%;">
<div id="gasEmitTableBar">
<a onclick="addGasEmitRecord()" class="easyui-linkbutton"
data-options="iconCls: 'fa-plus',plain: true">新增</a>

View File

@ -1,6 +1,6 @@
<div class="easyui-layout" style="width:100%;height:100%;">
<div data-options="region:'west', title:'排放口', split:true, border:false" style="width: 300px;height:100%;">
<div data-options="region:'west', title:'废水排放口', split:true, border:false" style="width: 300px;height:100%;">
<div id="drainTableBar">
<a onclick="addDrain()" class="easyui-linkbutton" data-options="iconCls: 'fa-plus',plain: true">新增</a>
<a onclick="editDrain()" class="easyui-linkbutton" data-options="iconCls: 'fa-pencil',plain: true">编辑</a>
@ -8,14 +8,12 @@
</div>
<table id="drainTable" style="height:100%"></table>
</div>
<div data-options="region:'center',title:'监测记录',split:true,border:false" style="height:100%;">
<div id="gasEmitTableBar">
<a onclick="addGasEmitRecord()" class="easyui-linkbutton"
data-options="iconCls: 'fa-plus',plain: true">新增</a>
<a onclick="delGasEmitRecord()" class="easyui-linkbutton"
data-options="iconCls: 'fa-trash',plain: true">删除</a>
<div data-options="region:'center',title:'废水监测记录',split:true,border:false" style="height:100%;">
<div id="detectionTableBar">
<a onclick="adddetection()" class="easyui-linkbutton" data-options="iconCls: 'fa-plus',plain: true">新增</a>
<a onclick="deldetection()" class="easyui-linkbutton" data-options="iconCls: 'fa-trash',plain: true">删除</a>
</div>
<table id="gasEmitTable" style="height:100%"></table>
<table id="detectionTable" style="height:100%"></table>
</div>
</div>
<div id="drainDialog" class="easyui-dialog" style="width:400px;height:200px;padding:5px 15px;"
@ -34,64 +32,45 @@
</div>
</form>
</div>
<div id="gasEmitDialog" class="easyui-dialog" style="width:400px;height:800px;padding:5px 15px;"
<div id="detectionDialog" class="easyui-dialog" style="width:700px;height:600px;padding:20px 25px;"
data-options="resizable:true,modal:true,closed:true,border:false">
<form method="post" id="gasEmitForm">
<form method="post" id="detectionForm">
<input name="id" type="hidden">
<input name="drain" type="hidden" id="gasEmitForm_drain">
<div style="margin-bottom:10px">
<input name="watch_time" data-options="label:'监测时间', editable:false, labelWidth:120" class="easyui-datetimebox" style="width:300px;" required ></input>
<input name="number" data-options="label:'排放口编码', labelWidth:100" class="easyui-textbox" style="width:600px;" required></input>
</div>
<div style="margin-bottom:10px">
<input name="jcDate" data-options="label:'监测日期', editable:false, labelWidth:100" class="easyui-datebox" style="width:300px;" required ></input>
<input name="jctime" data-options="label:'监测时间', editable:false, labelWidth:100" class="easyui-datetimespinner" style="width:300px;" required ></input>
</div>
<div style="margin-bottom:10px">
<input name="out_smoke" data-options="label:'出:标态干烟气量', labelWidth:120, min:0,precision:2" class="easyui-numberbox" style="width:300px;" required></input>
<input name="ckhxxyl" data-options="label:'出口化学需氧量mg/L',labelWidth:180" class="easyui-numberbox" style="width:300px;" required></input>
<input name="ckshxll" data-options="label:'出口生化需氧量mg/L', labelWidth:180" class="easyui-numberbox" style="width:300px;" required></input>
</div>
<div style="margin-bottom:10px">
<input name="out_o2" data-options="label:'出:氧含量', labelWidth:120, min:0,precision:2" class="easyui-numberbox" style="width:300px;" required></input>
<input name="ckad" data-options="label:'出口氨氮mg/L',labelWidth:180" class="easyui-numberbox" style="width:300px;" required></input>
<input name="ckxfw" data-options="label:'出口悬浮物mg/L', labelWidth:180" class="easyui-numberbox" style="width:300px;" required></input>
</div>
<div style="margin-bottom:10px">
<input name="out_so2" data-options="label:'出:二氧化硫', labelWidth:120, min:0,precision:2" class="easyui-numberbox" style="width:300px;" required></input>
<input name="jkhxxyl" data-options="label:'进口化学需氧量mg/L',labelWidth:180" class="easyui-numberbox" style="width:300px;" required></input>
<input name="jkshxll" data-options="label:'进口生化需氧量mg/L', labelWidth:180" class="easyui-numberbox" style="width:300px;" required></input>
</div>
<div style="margin-bottom:10px">
<input name="out_so2_s" data-options="label:'出:二氧化硫:折标', labelWidth:120, min:0,precision:2" class="easyui-numberbox" style="width:300px;" required></input>
</div>
<div style="margin-bottom:10px">
<input name="out_particle" data-options="label:'出:颗粒物', labelWidth:120, min:0,precision:2" class="easyui-numberbox" style="width:300px;" required></input>
</div>
<div style="margin-bottom:10px">
<input name="out_particle_s" data-options="label:'出:颗粒物:折标', labelWidth:120, min:0,precision:2" class="easyui-numberbox" style="width:300px;" required></input>
</div>
<div style="margin-bottom:10px">
<input name="out_nox" data-options="label:'出:氮氧化物', labelWidth:120, min:0,precision:2" class="easyui-numberbox" style="width:300px;" required></input>
</div>
<div style="margin-bottom:10px">
<input name="out_nox_s" data-options="label:'出:氮氧化物:折标', labelWidth:120, min:0,precision:2" class="easyui-numberbox" style="width:300px;" required></input>
</div>
<div style="margin-bottom:10px">
<input name="in_smoke" data-options="label:'入:标态干烟气量', labelWidth:120, min:0,precision:2" class="easyui-numberbox" style="width:300px;" required></input>
</div>
<div style="margin-bottom:10px">
<input name="in_o2" data-options="label:'入:氧含量', labelWidth:120, min:0,precision:2" class="easyui-numberbox" style="width:300px;" required></input>
</div>
<div style="margin-bottom:10px">
<input name="in_so2" data-options="label:'入:二氧化硫', labelWidth:120, min:0,precision:2" class="easyui-numberbox" style="width:300px;" required></input>
</div>
<div style="margin-bottom:10px">
<input name="in_so2_s" data-options="label:'入:二氧化硫:折标', labelWidth:120, min:0,precision:2" class="easyui-numberbox" style="width:300px;" required></input>
</div>
<div style="margin-bottom:10px">
<input name="in_particle" data-options="label:'入:颗粒物', labelWidth:120, min:0,precision:2" class="easyui-numberbox" style="width:300px;" required></input>
</div>
<div style="margin-bottom:10px">
<input name="in_particle_s" data-options="label:'入:颗粒物:折标', labelWidth:120, min:0,precision:2" class="easyui-numberbox" style="width:300px;" required></input>
</div>
<div style="margin-bottom:10px">
<input name="in_nox" data-options="label:'入:氮氧化物', labelWidth:120, min:0,precision:2" class="easyui-numberbox" style="width:300px;" required></input>
</div>
<div style="margin-bottom:10px">
<input name="in_nox_s" data-options="label:'入:氮氧化物:折标', labelWidth:120, min:0,precision:2" class="easyui-numberbox" style="width:300px;" required></input>
<input name="jkad" data-options="label:'进口氨氮mg/L',labelWidth:180" class="easyui-numberbox" style="width:300px;" required></input>
<input name="jkxfw" data-options="label:'进口悬浮物mg/L', labelWidth:180" class="easyui-numberbox" style="width:300px;" required></input>
</div>
<div style="text-align: center;">
<a class="easyui-linkbutton" iconCls="fa-floppy-o" onclick="saveGasEmitRecord()">保存</a>
<a class="easyui-linkbutton" iconCls="fa-floppy-o" onclick="savedetection()">保存</a>
</div>
</form>
</div>
@ -102,10 +81,10 @@
$('#operator__nameFormItem').textbox('setValue', top.$('#in').attr('show'));
}
}
var drain_action_url = '/api/enp/drain/create/';
var drain_action_url = '/api/enp/drains/create/';
var record_action_url = '/api/enp/gasemit/create/';
$('#drainTable').datagrid({
url: '/api/enp/drain/list/',
url: '/api/enp/drains/list/',
rownumbers: true,
singleSelect: true,
striped: true,
@ -119,33 +98,33 @@
{ field: 'name', title: '排放口名称', width: 100 },
]],
onClickRow: function (index, row) {
$('#gasEmitTable').datagrid({
url: '/api/enp/gasemit/list/?drain=' + row.id
$('#detectionTable').datagrid({
url: '/api/enp/detection/list/?drain=' + row.id
})
}
});
$('#gasEmitTable').datagrid({
url: '/api/enp/gasemit/list/',
$('#detectionTable').datagrid({
url: '/api/enp/detection/list/',
rownumbers: true,
singleSelect: true,
striped: true,
method: 'get',
toolbar: '#gasEmitTableBar',
toolbar: '#detectionTableBar',
border: false,
fitColumns: true,
columns: [[
{ field: 'id', title: 'ID', hidden: true },
{ field: 'id', title: 'ID', hidden: true },
{ field: 'drain', title: 'drain', hidden: true },
{ field: 'drain__name', title: '排放口 ', width: 100 },
{ field: 'watch_time', title: '监测时间', width: 100 },
{ field: 'out_smoke', title: '出:干烟含量', width: 100 },
{ field: 'out_o2', title: '出:氧含量', width: 100 },
{ field: 'out_so2', title: '出:二氧化硫', width: 100 },
{ field: 'out_so2_s', title: '出:二氧化硫折标', width: 100 },
{ field: 'out_particle', title: '出:颗粒物', width: 100 },
{ field: 'out_particle_s', title: '出:颗粒物折标', width: 100 },
{ field: 'out_nox', title: '出:氮氧化物', width: 100 },
{ field: 'out_nox_s', title: '出:氮氧化物折标', width: 100 },
{ field: 'drain__name', title: '排放口 ', width: 200 },
{ field: 'jcDate', title: '监测日期', width: 200 },
{ field: 'jctime', title: '监测时间', width: 200 },
{ field: 'ckhxxyl', title: '出:化学需氧量mg/L', width: 200 },
{ field: 'ckshxll', title: '出:生化需氧量mg/L', width: 200 },
{ field: 'ckad', title: '出:氨氮mg/L', width: 200 },
{ field: 'ckxfw', title: '出:悬浮物mg/L', width: 200 },
{ field: 'jkhxxyl', title: '进:化学需氧量mg/L', width: 200 },
{ field: 'jkshxll', title: '进:生化需氧量mg/L', width: 200 },
{ field: 'jkad', title: '进:氨氮mg/L', width: 200 },
{ field: 'jkxfw', title: '进:悬浮物mg/L', width: 200 },
]],
onClickRow: function (index, row) {
@ -154,27 +133,15 @@
function addDrain() {
$('#drainDialog').dialog('open').dialog('setTitle', '新增排放口').window('center');
$('#drainForm').form('clear');
drain_action_url = '/api/enp/drain/create/'
}
function addGasEmitRecord() {
var row = $('#drainTable').datagrid('getSelected');
if(row){
$('#gasEmitDialog').dialog('open').dialog('setTitle', '新增记录').window('center');
$('#gasEmitForm').form('clear');
$('#gasEmitForm_drain').attr('value', row.id);
record_action_url = '/api/enp/gasemit/create/';
}else{
$.messager.alert('提示', '请先选择左侧排放口!');
}
drain_action_url = '/api/enp/drains/create/'
}
function editDrain(){
var row = $('#draineTable').datagrid('getSelected');
if(row){
$('#drainDialog').dialog('open').dialog('setTitle', '编辑排放口').window('center');
$('#drainForm').form('load', row);
drain_action_url = '/api/enp/drain/update/'}
drain_action_url = '/api/enp/drains/update/'}
else{
$.messager.alert('提示', '请选择一条数据!');
}
@ -197,24 +164,7 @@
},
});
}
function saveGasEmitRecord() {
var data = $('#gasEmitForm').serializeJSON();
$.ajax({
type: "POST",
url: record_action_url,
data: JSON.stringify(data),
datatype: "json",
processData: false,
contentType: "application/json;charset=utf-8",
beforeSend: function () {
return $('#gasEmitForm').form('validate')
},
success: function (data) {
$("#gasEmitTable").datagrid('reload');
$("#gasEmitDialog").dialog("close");
},
});
}
function delDrain() {
var row = $('#drainTable').datagrid('getSelected');
if (row) {
@ -223,7 +173,7 @@
var data = { id: row.id }
$.ajax({
type: "POST",
url: '/api/enp/drain/delete/',
url: '/api/enp/drains/delete/',
data: JSON.stringify(data),
datatype: "json",
beforeSend: function () { },
@ -242,22 +192,70 @@
}
else { $.messager.alert('提示', '请选择一条数据!'); }
}
function delGasEmitRecord() {
var row = $('#gasEmitTable').datagrid('getSelected');
//新增
function adddetection() {
var row = $('#drainTable').datagrid('getSelected');
if(row){
$('#detectionDialog').dialog('open').dialog('setTitle', '新增记录').window('center');
$('#detectionForm').form('clear');
$('#gasEmitForm_drain').attr('value', row.id);
record_action_url = '/api/enp/detection/create/';
}else{
$.messager.alert('提示', '请先选择左侧排放口!');
}
}
var detection_action_url = '/api/enp/detection/create/';
//保存数据
function savedetection() {
var data = $('#detectionForm').serializeJSON();
$.ajax({
type: "POST",
url: detection_action_url,
data: JSON.stringify(data),
datatype: "json",
processData: false,
contentType: "application/json;charset=utf-8",
beforeSend: function () {
return $('#detectionForm').form('validate')
},
success: function (data) {
$("#detectionTable").datagrid('reload');
$("#detectionDialog").dialog("close");
},
});
}
//编辑数据
function edidetection(){
var row = $('#detectionTable').datagrid('getSelected');
if(row){
$('#detectionDialog').dialog('open').dialog('setTitle', '编辑废水污染物检测结').window('center');
$('#detectionForm').form('load', row);
detection_action_url = '/api/enp/detection/update/'}
else{
$.messager.alert('提示', '请选择一条数据!');
}
}
//删除数据
function deldetection(){
var row = $('#detectionTable').datagrid('getSelected');
if (row) {
$.messager.confirm('提示', '确定删除吗?', function (r) {
if (r) {
var data = { id: row.id }
$.ajax({
type: "POST",
url: '/api/enp/gasemit/delete/',
url: '/api/enp/detection/delete/',
data: JSON.stringify(data),
datatype: "json",
beforeSend: function () { },
success: function (data) {
if (data.code == 1) {
$("#gasEmitTable").datagrid('reload');
// $("#gasEmitTable").datagrid('reload');
$("#detectionTable").datagrid('reload');
$("#detectionTable").datagrid('reload');
}
else {
$.messager.alert('提示', '操作失败!');
@ -268,5 +266,6 @@
});
}
else { $.messager.alert('提示', '请选择一条数据!'); }
}
</script>

View File

@ -3,7 +3,10 @@ from . import views
urlpatterns = [
path('waste/<str:action>/', views.ApiWaste),
path('drain/<str:action>/', views.ApiDrain),
path('drain/<str:action>/', views.ApiDrainq),#排气口
path('drains/<str:action>/', views.ApiDrains),#排水口
path('draindt/<str:action>/', views.ApiDraindt),#排口地图
path('normalwasterecord/<str:action>/', views.ApiNormalWasteRecord),
path('dwastemakelist/<str:action>/', views.ApiDWasteMakeList),
path('dwastemakerecord/<str:action>/', views.ApiDWasteMakeRecord),

View File

@ -404,9 +404,11 @@ def ApiDetection(request, action):
user = User.objects.get(userid=request.session['userid'])
if action == 'list':
objs = Detection.objects.filter(usecomp=user.usecomp, is_deleted=False)
if request.GET.get('drain', None):
objs = objs.filter(drain=request.GET.get('drain'))
total = objs.count()
startnum, endnum = fenye(request)
objs = objs.order_by('-create_time')[startnum:endnum].values('id', 'number', 'jcDate', 'jctime', 'ckhxxyl', 'ckshxll',
objs = objs.order_by('-create_time')[startnum:endnum].values('id', 'drain' , 'drain__name', 'drain__number','jcDate', 'jctime', 'ckhxxyl', 'ckshxll',
'ckad', 'ckxfw', 'jkhxxyl', 'jkshxll', 'jkad', 'jkxfw')
return HttpResponse(transjson(total, objs), content_type="application/json")
elif action == 'create':
@ -415,7 +417,7 @@ def ApiDetection(request, action):
obj.create_by = user
obj.update_by = user
obj.usecomp = user.usecomp
obj.number = data['number']
obj.drain = Drain.objects.get(id=data['drain'])
obj.jcDate = data['jcDate']
obj.jctime = data['jctime']
obj.ckhxxyl = data['ckhxxyl']
@ -429,25 +431,7 @@ def ApiDetection(request, action):
obj.save()
return JsonResponse({"code":1})
elif action == 'update':
data = json.loads(request.body.decode('utf-8'))
obj = Detection.objects.get(id=data['id'])
obj.create_by = user
obj.update_by = user
obj.usecomp = user.usecomp
obj.number = data['number']
obj.jcDate = data['jcDate']
obj.jctime = data['jctime']
obj.ckhxxyl = data['ckhxxyl']
obj.ckshxll = data['ckshxll']
obj.ckad = data['ckad']
obj.ckxfw = data['ckxfw']
obj.jkhxxyl = data['jkhxxyl']
obj.jkshxll = data['jkshxll']
obj.jkad = data['jkad']
obj.jkxfw = data['jkxfw']
obj.save()
return JsonResponse({"code":1})
elif action == 'delete':
data = json.loads(request.body.decode('utf-8'))
obj = Detection.objects.get(id=data['id'])
@ -685,11 +669,11 @@ def ApiDWasteHandleRecord(request,action):
obj = DWasteHandleRecord.objects.get(id=data['id'])
obj.delete()
return JsonResponse({"code":1})
def ApiDrain(request, action):
#排气排放口
def ApiDrainq(request, action):
user = User.objects.get(userid=request.session['userid'])
if action == 'list':
objs = Drain.objects.filter(usecomp=user.usecomp, is_deleted=False)
objs = Drain.objects.filter(usecomp=user.usecomp, is_deleted=False,type=20)
total = objs.count()
startnum, endnum = fenye(request)
objs = objs.order_by('id')[startnum:endnum].values('id', 'number', 'name')
@ -702,6 +686,7 @@ def ApiDrain(request, action):
data = json.loads(request.body.decode('utf-8'))
obj= Drain()
obj.number = data['number']
obj.type = 20
obj.name = data['name']
obj.create_by = user
obj.update_by = user
@ -717,11 +702,69 @@ def ApiDrain(request, action):
data = json.loads(request.body.decode('utf-8'))
obj = Drain.objects.get(id=data['id'])
obj.number = data['number']
obj.type = 20
obj.name = data['name']
obj.update_by=user
obj.save()
return JsonResponse({"code":1})
#排水排放口
def ApiDrains(request, action):
user = User.objects.get(userid=request.session['userid'])
if action == 'list':
objs = Drain.objects.filter(usecomp=user.usecomp, is_deleted=False,type=10)
total = objs.count()
startnum, endnum = fenye(request)
objs = objs.order_by('id')[startnum:endnum].values('id', 'number', 'name')
return HttpResponse(transjson(total, objs), content_type="application/json")
elif action == 'combobox':
objs = Drain.objects.filter(usecomp=user.usecomp, is_deleted=False).order_by('id')
data = objs.values('id', 'number', 'name')
return JsonResponse(list(data), safe=False)
elif action == 'create':
data = json.loads(request.body.decode('utf-8'))
obj= Drain()
obj.number = data['number']
obj.name = data['name']
obj.type = 10
obj.create_by = user
obj.update_by = user
obj.usecomp = user.usecomp
obj.save()
return JsonResponse({"code":1})
elif action == 'delete':
data = json.loads(request.body.decode('utf-8'))
obj = Drain.objects.get(id=data['id'])
obj.delete()
return JsonResponse({"code":1})
elif action == 'update':
data = json.loads(request.body.decode('utf-8'))
obj = Drain.objects.get(id=data['id'])
obj.number = data['number']
obj.type = 10
obj.name = data['name']
obj.update_by=user
obj.save()
return JsonResponse({"code":1})
#排口用于地图
def ApiDraindt(request, action):
user = User.objects.get(userid=request.session['userid'])
if action == 'list':
objs = Drain.objects.filter(usecomp=user.usecomp, is_deleted=False)
total = objs.count()
startnum, endnum = fenye(request)
objs = objs.order_by('id')[startnum:endnum].values('id', 'number', 'name','type','location')
return HttpResponse(transjson(total, objs), content_type="application/json")
#首页展示地图
elif action == 'allmap':
objs = Drain.objects.filter(usecomp=user.usecomp, is_deleted=False).values('id', 'number', 'name','type','location')
return HttpResponse(json.dumps(list(objs)), content_type="application/json")
elif action == 'bind':
data = json.loads(request.body.decode('utf-8'))
Drain.objects.filter(id=data['id']).update(location=data['polygon'])
return JsonResponse({"code": 1})
#排气监测数据
def ApiGasEmit(request,action):
user = User.objects.get(userid=request.session['userid'])
if action == 'list':

View File

@ -602,6 +602,7 @@ function mapupdate() {
}
})
$.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
@ -635,6 +636,21 @@ function mapupdate() {
setPoint(data)
}
})
//监测地图,排口获取
$.get('/api/enp/draindt/allmap', function (res) {
console.log(res);
for (let i = 0; i < res.length; i++) {
var data = res[i]
data.id = data.id
data.number = data.number
data.location = data.location
data.name = data.name
data.type = 'pk'
setPoint(data)
}
})
}
}
function checksession(){

View File

@ -0,0 +1,289 @@
<div class="easyui-layout" style="width:100%;height:100%;">
<div data-options="region:'west',split:true,border:false" style="width:240px;height:100%;">
<div id="dtlb" height="30%" title="监测地图列表">
<ul id="dtlbtree" data-options="animate:true,"></ul>
</div>
<!-- <div id="gwfl" height="30%"></div> -->
<div id="qylb" height="70%" title="排口列表">
<ul id="qylblist" data-options="animate:true,toolbar:'#qylbbar'" style="height:100%"></ul>
</div>
</div>
<input type="file" id="file" name="" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none" />
<div data-options="region:'center',title:'监测地图',split:true,border:false" style="height:100%;">
<div id="qybar" style="padding:5px;height:auto;">
<a id="changedt" onclick="changedt()" class="easyui-linkbutton"
data-options="iconCls:'fa-pencil',plain:true">更换地图</a>
<a id="drawqy" onclick="drawqy()" class="easyui-linkbutton" data-options="iconCls:'fa-pencil',plain:true"
style="display:none">标记点位</a>
</div>
<div id="map0" class="map" style="width:100%;height:auto;outline: #4A74A8 solid 0.15em;margin-bottom: 10px;">
</div>
</div>
</div>
<script>
var map, source, vector, draw, polygon;// global so we can remove it later
$.get('api/map?a=default', function (res) {
$('#map0').empty()
map = initMap(res.pic)
$('#qylblist').datagrid({ url: '/api/enp/draindt/list/' })
})
$('#dtlb').panel()
$('#qylb').panel()
$('#dtlbtree').tree({
url: 'api/map?a=tree',
animate: true,
loadFilter: function (rows) {
return convert(rows);
},
formatter: function (node) {
var s = node.text;
if (node.children) {
s += '&nbsp;<span style=\'color:blue\'>(' + node.children.length + ')</span>';
}
return s;
},
onSelect: function (row) {
$('#qylblist').datagrid({ url: '/api/enp/draindt/list/' })
$('#drawqy').hide()
$('#changedt').show()
$('#map').empty()
map = initMap(row.pic)
}
});
$('#qylblist').datagrid({
url: '',
rownumbers: true,
singleSelect: true,
striped: true,
method: 'get',
border: false,
columns: [[
{ field: 'id', title: 'ID', hidden: true },
{ field: 'number', title: '排放口编号', width: 100 },
{ field: 'name', title: '排放口名称', width: 100 },
{ field: 'location', title: '坐标', width: 100 },
{ field: 'type', title: '排口类型', width: 100, formatter: function (value, row, index) {
switch (value) {
case 10: return '排水'; break;
case 20: return '排气'; break;
}
}
}
]],
onClickRow: function (index, row) {
$('#drawqy').show()//绘制区域
$('#changedt').hide()//更换地图
showArea()
}
});
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: url,
projection: projection,
imageExtent: extent
})
})
],
target: 'map0',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 2.3,
maxZoom: 8
})
});
source = new ol.source.Vector({ wrapX: false });
vector = new ol.layer.Vector({
source: source
});
map.addLayer(vector);//加载图层
return map
}
function drawqy() {
var row = $('#qylblist').datagrid('getSelected');
if (row) {
if (row.type != null) {
$.messager.confirm('提示', '该区域已绑定,是否重新绑定?', function (r) {
if (r) {
source.clear()
drawarea()
}
});
}else{
drawarea()
}
}
else {
$.messager.alert('提示', '请先选择左侧区域!');
}
}
function delqy(){
var row = $('#qylblist').datagrid('getSelected');
if (row) {
$.messager.confirm('提示', '确定删除吗?', function (r) {
if (r) {
$.get('api/area?a=del&id='+row.id,function(res){
if(res.code==1){
$('#qylblist').datagrid('reload');
}else{
$.messager.alert('提示','您无权删除!');
}
})
}
});
}
else {
$.messager.alert('提示', '请先选择区域!');
}
}
function editqy(){
var row = $('#qylblist').datagrid('getSelected');
if (row) {
opendg('编辑区域','html/area/edit/'+row.id.toString())
}
else {
$.messager.alert('提示', '请先选择区域!');
}
}
//标记点位
function drawarea() {
draw = new ol.interaction.Draw({
source: source,
type: 'Point'
});
map.addInteraction(draw);
draw.on('drawend', function (e) {
polygon = e.feature.getGeometry().getCoordinates();
//polygon = coordinates_Point
console.log(polygon)
map.removeInteraction(draw);
var pointFeature = new ol.Feature({
geometry: new ol.geom.Point(polygon),
});
pointFeature.setStyle(createPointStyle(pointFeature));
source.addFeature(pointFeature)
saveqy()
});
}
function saveqy() {
var row = $('#qylblist').datagrid('getSelected');
var data = { 'id': row.id, 'polygon': polygon}
$.ajax({
type: "POST",
url: '/api/enp/draindt/bind/',
data: JSON.stringify(data),
datatype: "json",
contentType: "application/json;charset=utf-8",
beforeSend: function () { },
success: function (res) {
$('#qylblist').datagrid('reload')
},
});
}
var createPointStyle = function (feature) {
return new ol.style.Style({
/**{olx.style.IconOptions}类型*/
image: new ol.style.Icon(
({
anchor: [0.5, 60],
anchorOrigin: 'top-right',
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
offsetOrigin: 'top-right',
// offset:[0,10],
//图标缩放比例
// scale:0.5,
//透明度
opacity: 0.75,
//图标的url
src: '/static/safesite/mystatic/images/icon4.png'
})
),
text: new ol.style.Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基准线
font: 'normal 14px 微软雅黑', //文字样式
text: feature.get('name'), //文本内容
})
});
}
var createPolygonStyle = function (feature) {
return new ol.style.Style({
fill:new ol.style.Fill({
color: 'rgba(255,255,255, 0.5)'
}),
text: new ol.style.Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基准线
font: 'normal 14px 微软雅黑', //文字样式
text: feature.get('name'), //文本内容
})
});
}
function changedt() {
var row = $('#dtlbtree').tree('getSelected');
if (row) {
$('#file').click()
}
else {
$.messager.alert('提示', '请先选择左侧地图!');
}
}
document.getElementById('file').onchange = function () {
var fileObj = this.files[0];
var url = 'upfile'
var form = new FormData();
form.append("upfile", fileObj); // 文件对象
xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
xhr.open("post", url, true); //post方式url为服务器请求地址true 该参数规定请求是否异步处理。
xhr.onload = function (evt) { //服务断接收完文件返回的结果
var data = JSON.parse(evt.target.responseText);
if (data.code = 1) {
$('#map').empty()
map = initMap(data.filepath)
var row = $('#dtlbtree').tree('getSelected');
$.post('api/map?a=update', { 'id': row.id, 'name': row.name, 'pic': data.filepath }, function (res) {
$('#dtlbtree').tree('reload');
})
} else { alert("上传失败!"); }
}; //请求完成
xhr.onerror = function (evt) { alert("上传失败!"); }; //请求失败
xhr.send(form); //开始上传发送form数据
}
function showArea() {
map.removeInteraction(draw);
source.clear()
var row = $('#qylblist').datagrid('getSelected');
if (row.location != null) {
var polygonFeature = new ol.Feature({
geometry: new ol.geom.Point(row.location),
});
var pointFeature = new ol.Feature({
geometry: new ol.geom.Point(row.location),
});
//newFeature1.setStyle(createPointStyle(newFeature1));
pointFeature.setStyle(createPointStyle(pointFeature));
polygonFeature.setStyle(createPolygonStyle(polygonFeature));
source.addFeature(polygonFeature)
source.addFeature(pointFeature)
}
}
</script>

View File

@ -0,0 +1,209 @@
<div id="map1" class="map" style="width:100%;height:auto;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>
<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: true
});
$.get('api/map?a=default', function (res) {
$('#map1').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: url,
projection: projection,
imageExtent: extent
})
})
],
target: 'map1',
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()
console.log(data)
//设置弹出框内容可以HTML自定义
var html = "";
if (data.type == 'pk') {
html = "<p>排口名称:" + data.name + "</p>" + "<p>排口编号:" + data.number + "</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 createPointStyle = function (feature) {
var data = feature.getProperties()
if (data.type == 'pk') {
src = '/static/safesite/mystatic/images/icon1.png'
}
return new ol.style.Style({
/**{olx.style.IconOptions}类型*/
image: new ol.style.Icon(
({
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) {
console.log("setpoint:"+i.location)
var pointFeature = new ol.Feature({
geometry: new ol.geom.Point(i.location),
id: i.id,
name: i.name,
type: i.type,
location: i.location,
number: i.number
});
pointFeature.setStyle(createPointStyle(pointFeature));
source.addFeature(pointFeature)
}
</script>

View File

@ -260,6 +260,13 @@ float: left;">
</div>
</div>
<div id = 'panelxdiv2' style="width:98%;margin-left:1%;margin-right:1%;height:800px;" hidden=true>
<div id="panelx2" class="easyui-panel" data-options="iconCls:'fa-bar-chart'" >
</div>
</div>
<div style="width:100%;height:600px">
<div style="width:70%;float:left;height:100%;margin-top: 10px;" align=center>
@ -333,6 +340,7 @@ float: left;">
</div>
</div>
<script type="text/javascript">
//首页总数统计
$.ajax({
@ -385,6 +393,21 @@ float: left;">
href:'html/mapshow',
title:'地图展示'
})
;
</script>
<script>
$('#panelxdiv2').show()
$('#panelx2').panel({
href:'html/jianceditu',
title:'监测地图展示'
})
;
</script>
{% endif %}
<script>

View File

@ -75,8 +75,10 @@ urlpatterns = [
path('html/safecert/add', views.safecertadd),
path('html/safecert/edit/<int:id>/',views.safecertedit),
path('html/area', views.area),
path('html/areajiance', views.areajiance),#监测地图
path('html/areadetail', views.areadetail),
path('html/mapshow', views.mapshow),
path('html/jianceditu', views.mapshow2),#监测地图
path('html/area/add',views.areaadd),
path('html/area/edit/<int:id>/',views.areaedit),
path('html/equipment',views.equipment),

View File

@ -300,12 +300,18 @@ def areadetail(req):
def mapshow(req):
return render(req, 'mapshow.html')
#监测地图
def mapshow2(req):
return render(req, 'jianceditu.html')
def area(req):
return render(req, 'area.html')
#监测地图
def areajiance(req):
return render(req, 'areajiance.html')
def personaltrain(req):
return render(req, 'personaltrain.html')
@ -7295,6 +7301,10 @@ def apimap(req):
obj = Map.objects.filter(
usecomp__partid=companyid, deletemark=1, default=1).values('id', 'name', 'pic')
return JsonResponse(obj[0])
elif a == 'defaults':
obj = Map.objects.filter(
usecomp__partid=companyid, deletemark=1, default=1).values('id', 'name', 'pic')
return JsonResponse(obj[0])
elif a == 'update':
id = req.POST.get('id')
Map.objects.filter(id=id).update(pic=req.POST.get('pic'))