关于邮政平台报警弹窗以及表单数据接入支持拖拽的方法

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GPS管理</title>

.message-warn-color{color:red};

.alert-message{
width: 300px;
height: 150px;
border: 3px solid #E1E6E9;
position: fixed;
right: 0;
background:white;
bottom: -160px;
z-index: 999;
}
.alert-message-delete{
width: 26px;
height: 26px;
position: absolute;
right: 0px;
top: 4px;
}
.alert-message-delete span{
display: block;
width: 24px;
height: 2px;
background-color: white;
position: absolute;
top:12px
}
.alert-message-delete span:nth-of-type(1){
transform: rotate(45deg);
}
.alert-message-delete span:nth-of-type(2){
transform: rotate(-45deg);
}
/*报警信息列表样式*/
.warn-message-tab{
width: 900px;
height: 360px;
border: 3px solid silver;
position: absolute;
top: 140px;
left: 440px;
display: none;
z-index: 999999;
background-color: white;
}
.warn-search div{
display: inline-block;
margin-left: 12px;
}
#warnTabDiv{
height:255px;
overflow:auto;
}
#warnTab td{
border: 1px solid skyblue;
}
#warnTab th{
text-align: center;
}
#warnTab tbody tr:nth-of-type(odd){background: #C8D9AE;}
#warnTab tbody tr:nth-of-type(even){background: #E2EBD5;}

/*报警处理弹框样式开始*/
.warn-message-common{
width: 440px;
height: 360px;
border: 3px solid silver;
position: fixed;
top: 160px;
left: 700px;
display: none;
z-index: 999999;
background-color: white;
}
.warn-search-view>div{
margin-bottom: 12px;

}
.warn-search-set>div{
margin: 12px 0px;

}
.warn-search-view>div>span,.warn-search-set>div>span{
display: inline-block;
width: 160px;
text-align: right;
}
.warn-search-button{
padding: 20px 0 0 20%;
}
.warn-search-button button{
margin: 0 50px;
}
</style>

/*点击处理报警 */
var handleindex = "";
var outlineinfo = "";
var lienceid = "";
var alamtype = "";
var autotruid = "";
$("body").on("click",".warn-handle",function(){
$(".warn-message-handle").css("display","block");
var dataindex1 = this.id.replace("handle","")
$(".warn-message-handle").css("display","block");
handleindex = dataindex1;
$.get("/hbgps/outlineinfo/guanli",function(datalist){
outlineinfo = datalist[dataindex1].outlineinfo;
lienceid = datalist[dataindex1].lienceid;
alamtype = datalist[dataindex1].alamtype;
mancurse = datalist[dataindex1].mancurse;
demo = datalist[dataindex1].demo;
autotruid =datalist[dataindex1].autotruid;
$("#emscarHandle").val(datalist[dataindex1].lienceid);
$("#emstimeHandle").val(datalist[dataindex1].outtm);
$("#emstypeHandle").val(datalist[dataindex1].alamtype);
},"json");
})

/*点击报警详情按钮 */
$("body").on("click",".warn-information",function(){
var dataindex = this.id.replace("but","")
$(".warn-message-information").css("display","block");
$.get("/hbgps/outlineinfo/guanli",function(datalist){
$("#emsWarnCar").val(datalist[dataindex].lienceid);
$("#emsWarnTime").val(datalist[dataindex].outtm);
$("#emsWarnType").val(datalist[dataindex].alamtype);
$("#emsWarnCause").val(datalist[dataindex].mancurse);
$("#emsWarnBeizhu").val(datalist[dataindex].demo);
},"json");
})

$("#warnMessageOn").click(function(){
var mancurse = $("#emscauseHandle").val();
var demo = $("#emsbeizhuHandle").val();
console.log(mancurse);
alert(demo)
if(demo != ""){
$.post("/hbgps/outlineinfo/chuli",{outlineinfo:outlineinfo,autotruid:autotruid,lienceid:lienceid,alamtype:alamtype,mancurse:mancurse,demo:demo}
,"json");
$(".warn-message-handle").css("display","none");
$("#handleChoose"+handleindex).html("已处理");
}else{
alert("请填写备注信息")
}
})
$("#warnMessageOff").click(function(){
$(".warn-message-handle").css("display","none");
})
$("#warnMessageClose").click(function(){
$(".warn-message-information").css("display","none");
})
/*点击搜索按钮进行搜索请求*/

$("#warnSearchBtn").click(function(){
var searchWarndate = $("#searchWarndate").val();
var searchWarncar = $("#searchWarncar").val();
var searchWarnhandle = $("#searchWarnhandle").val();
var searchWarntype = $("#searchWarntype").val();
if($("#searchWarndate").val() != ""){
$.ajax({
url: "/hbgps/outlineinfo/chaxun"
, type: "POST"
, data: {outtm:searchWarndate, lienceid:searchWarncar, misccd:searchWarnhandle,alamtype:searchWarntype}
// 请求成功时执行
,dataType:"json"
, success: function(data){
var tabRow ="";
for(var i=0;i<data.length;i++){
var typeNum = data[i].alamtype;
var handleNum = data[i].misccd;
var warnType = "";
var warnHandle = "";
switch(typeNum)
{
case "02": warnType = "长时间停车";
break;
case "03": warnType = "作业超时";
break;
case "06": warnType = "偏离线路";
break;
case "08": warnType = "晚点";
break;
case "09": warnType = "未发班";
break;
}
switch(handleNum)
{
case "0": warnHandle = "未处理";
break;
case "1": warnHandle = "已处理";
break;
}
var te ="<tr><td>"+data[i].outtm+"</td><td>"+data[i].lienceid+"</td><td>"+data[i].ylmc+"</td><td>"+warnType+"</td><td>"+warnHandle+"</td><td><button id='handle{1}' class='warn-handle'>处理</button><button id='but{0}' class='warn-information'>详情</button></td></tr>"
te=te.replace("{0}",i+"");
te=te.replace("{1}",i+"");
tabRow +=te;
}
$("#warnTab tr:nth-child(1)").nextAll().remove();
$("#warnTab tr:nth-child(1)").after(tabRow);
}
});
$("#messageTisi").html("");
}else{
$("#messageTisi").html("*请填写报警日期");
}

})

// 点击搜索按钮请求数据结束
})()
});
</script>
<script>
var m_cSignalr = '';

var m_cUserId = '1001';

// 图片url
var m_cPicUrl = '';

// 视频树列表
//ES.MapView.TabPanel.VideoTree = ES.MapView.TabPanel.SiteTree.extend({
//});

ES.mapView = function () {

var nMapHeight = $(window).height();
var nMapWidth = $(window).width() - 260;

// 页面通信参数
var oPage = new ES.MapView.Page('MapView', {});
ES.MapView.oPage = oPage;
// 菜单
var oMenu = new ES.MapView.Menu(oPage, {oMenuConfig:{
ul: {
'class': 'ex-layout-menu ex-theme-menu ec-avg-md-1',
li: [
{
'class': 'flip',
i: {'class': 'ec-icon-truck'},
span: {html: '车辆'},
'tree-title': '组织架构',
'list-title': '车辆',
'data-band': 'MapView:VehLst.onAllSearch',
'data-param': 'vehTree',
'Object':'ES.MapView.TabPanel.VehTree',
'ListView':'ES.MapView.TabPanel.VehLst',
'list-url':'/hbgps/gisCar/pageCarInfo',

},
{
'class': 'flip',
i: {'class': 'ec-icon-road'},
span: {html: '运营车辆'},
'tree-title': '运营油路',
'list-title': '车辆',
'data-band': 'MapView:VehLst.onAllSearch',
'data-param': 'oprRoadTree',
'Object':'ES.MapView.TabPanel.VehTree',
'ListView':'ES.MapView.TabPanel.VehLst',
'list-url':'/hbgps/gisCar/CarInfo',

},
{
'class': 'ec-active flip',
i: {'class': 'ec-icon-sitemap'},
span: {html: '站点'},
'tree-title': '站点地图',
'data-band': 'MapView:VehLst.onAllSearch',
'data-param': 'site',
'Object':'ES.MapView.TabPanel.SiteTree'
},
{
'class': 'flip',
i: {'class': 'ec-icon-code-fork'},
span: {html: '线路'},
'tree-title': '线路',
'data-band': 'MapView:VehLst.onAllSearch',
'data-param': 'lineTree',
'Object':'ES.MapView.TabPanel.LineTree'
},
//{
// 'class': 'flip',
// i: {'class': 'message-warn iconfont icon-xingzhuang5kaobei2'},
//},

]
}
}
});

// 容器内容布局
var oLayoutContent = new ES.MapView.LayoutContent(oPage, { nWidth: nMapWidth, nHeight: nMapHeight });

// 地图布局
var oMapLayout = new ES.MapControl.Layout(oPage, { cDidId: 'MapView' });

// 初始化地图控件
var oMapMaster = new L.MapLib.MapMaster.Map(oPage, {
cDidId: 'MapView',
oMapOption: {
zoomControl: false,
layers: [],
center: new L.LatLng(30.569356, 114.302444),
zoom: 13
},
nMapWidth: nMapWidth,
nMapHeight: nMapHeight
});
// 加载地图
oMapMaster.loadMapMaster();

//var oToolArea = new ES.MapControl.ESMapToolArea(oMapMaster, { cUrl: ES.oConfig.cPoiUrl, cCity: '武汉' });
var oToolBox = new ES.MapControl.ESMapToolBox(oMapMaster, {});
var oToolTile = new ES.MapControl.ESMapTile(oMapMaster, {});

var oToolFull = new ES.MapControl.ESMapFull(oMapMaster,
{acParentDivClass: [ 'ex-layout-maptool', 'ex-theme-maptool',
'ex-map-top',
'ex-map-left'
],});

new ES.MapControl.AlarmList(oMapMaster, {});
// 创建鹰眼地图

var osm2 = new L.TileLayer(L.MapLib.MapMaster.TileProvider[4].cMap, {minZoom: 0, maxZoom: 13, subdomains: L.MapLib.MapMaster.TileProvider[4].acSubdomains });
var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(oMapMaster.getMap());

new ES.MapView.LineLayer(oPage, {});
new ES.MapView.SiteLayer(oPage, {});

// 定时请求轨迹数据
new ES.MapView.ReqTrack(oPage, {});

new ES.MapView.LiveMange(oPage, {});

// 车辆图表
new ES.MapView.VehLayer(oPage,{});

var oCluster = new ES.MapView.VehClusterLayer(oPage,{});

oCluster.getData(86400);

$(window).resize(
function () {
var nHeight = $(window).height();
var nWidth = $(window).width() - 260;

oMapMaster.reflesh(nWidth, nHeight);

oLayoutContent.reflesh(nWidth, nHeight);
// 广播消息
oPage.fire('window:resize');
});

// 在页面上监听左侧面板改变事件，然后来刷新地图
oPage.on('MapView:LayoutContent.resize', function (oData) {
oMapMaster.reflesh(oData.nWidth);
}, oPage);

oPage.on('MapView:EventReport', function (oData) {
if (oData && oData.oGpsInfo) {
var data = oData.oGpsInfo;
eventPush({ siteid: data.SiteId, imgs: data.Images, desc: data.AlarmTypeName || "" });
}
})
};

// 开始执行的地方
$(function () {
// 地图控件相关配置
ES.MapControl.Config = {
// 地图中心点配置
oRegionConfig: {
cSwitchName: '区域',
cDefaultCityName: '武汉市',
dLng: 114.302444,
dLat: 30.569356,
// 地图显示的乘积
nLevel: 15,
},

// 地图中心点位置信息
oRegionRep: {
cUrl: '/MapView/GetRealRegion',
oParam: { nDeptId: 1 }
},
};

//
ES.oConfig = {

// 工地树配置
site: {
core: {
'animation': 0,
'check_callback': true,

'state': { 'opened': true },
'data': {
'url': '/hbgps/gisCar/getStationTree',
'type':'POST',
'data':{'name':'-1'}
}
},
plugins: ['checkbox', 'types', 'search', 'state', 'unique'],
},

// 实时监控车辆树
vehTree: {
plugins: ['checkbox', 'types', 'search', 'unique'],
core: {
'animation': 0,
'check_callback': true,

'state': { 'opened': true },

'data': {
'url': '/hbgps/gisCar/getDept'
},

},
},

// 实时监控路网树配置
lineTree: {
plugins: ['checkbox', 'types', 'search', 'unique'],
core: {
'animation': 0,
'check_callback': true,

'state': { 'opened': true },
'data': {
'url': '/hbgps/gisCar/getYLTree',
'type':'POST',
'data':{'name':'-1'}
},
dblclick_toggle: true,
},
},

oprRoadTree:{
plugins: ['checkbox', 'types', 'search', 'unique'],
core: {
'animation': 0,
'check_callback': true,

'state': { 'opened': true },
'data': {
'url': '/hbgps/gisCar/getYou',
'type':'POST',
'data':{'name':'-1'}
},
dblclick_toggle: true,
},

},

// 当前用户的部门id
nDeptId: 1,

// 车辆出入记录,第一次加载
cVehInOutUrl: '/MapView/GetRealRegion',

// 查询车辆告警明细，第一次加载查询记录
cAlarmUrl: '',

// poi 查询服务
cPoiUrl: m_cSignalr + '/api/poi/GetInterestPoint',

// 获得车辆实时的位置信息
cCurPosUrl: m_cSignalr + '/hbgps/gisCar/getHeart',

// 监控页面获得工地信息
cRoadUrl: '/hbgps/gisCar/track',

// 聚会接口
cClusterUrl:'/hbgps/gisCar/juhe',

// 工地颜色配置
oSiteConfig: {
stroke: true,
color: '#0FFF05',
dashArray: null,
lineCap: null,
lineJoin: null,
weight: 3,
opacity: 1,
fill: true,
fillColor: null,
fillOpacity: 0.2,
clickable: true,
smoothFactor: 1.0,
noClip: false
},
// 边界颜色配置
oBoundConfig: {
stroke: true,
color: '#f75e05',
dashArray: null,
lineCap: null,
lineJoin: null,
weight: 1,
opacity: 0.8,
fill: true,
fillColor: null,
fillOpacity: 0.1,
clickable: true,
smoothFactor: 1.0,
noClip: false
},
// 实时监控线样式
oLiveLineConfig: {
opacity: 1,
color: 'blue',
weight: 3,

},

// 实时监控线样式
oLiveRoadConfig: {
opacity: 1,
color: '#049c3e',
weight: 5,

},

// 实时监控线样式
oLiveBRoadConfig: {
opacity: 1,
color: '#049c3e',
weight: 5,
},

// 实时监控圆样式
oLiveCircleMarkerConfig: {
fill: true,
fillColor: '#fff',
radius: 3,
weight: 1,
opacity: 1,
fillOpacity: 1
},

//实时跟踪外层圆的样式
oLiveCircleConfig: {
stroke: true,
color: '#FF3300',
dashArray: null,
lineCap: null,
lineJoin: null,
weight: 1,
opacity: 1,
fill: true,
fillColor: null,
fillOpacity: 0.2,
clickable: true,
smoothFactor: 1.0,
noClip: false
},

// 监控车辆个数
nMonitorCnt: 1,

};

ES.mapView({
nUserId: '1001',
});
});

</script>

</head>
<body>

<div class="ex-layout-main">

</div>

<div class="alert-message">
<div class="alert-message-delete alert-message-deletex">
<span></span>
<span></span>
</div>
<p id="alertMessageTitle"style="background: #009142;color: white;font-size: 16px;padding: 4px 10px;">提示!</p>
<a href="javascript:void(0);">
<p class="alert-message-text" style="text-align: center;font-size: 16px;margin-top: 30px;"></p>
<p class="alert-tiaozhuan" style="text-align: center;font-size: 12px;color: red;">备注：点击可查看报警详细信息</p>
</a>
</div>

<div class="warn-message-tab">
<p class="warnListTitle" style="background: #009142;color: white;font-size: 16px;padding: 4px 10px;cursor: move; -moz-user-select: none; -webkit-user-select: none;">车辆报警处理明细</p>
<div class="warn-search" style="padding: 10px;">
<div>报警日期：<input type="text" id="searchWarndate" required style="width: 120px;height: 20px;"/></div>
<div>车牌号：<input type="text" id="searchWarncar" style="width: 120px;height: 20px;"/></div>
<div>是否处理：<select name="" id="searchWarnhandle"><option value ="" selected></option><option value ="1">是</option><option value ="0">否</option></select></div>
<div>报警类型：<select name="" id="searchWarntype"><option value ="" selected></option><option value ="02">长时间停车</option><option value ="03">作业超时</option><option value ="06">偏离线路</option><option value ="08">晚点</option><option value ="09">未发班</option></select></div>
<div><button id="warnSearchBtn">查询</button><span id="messageTisi" style="color:red;"></span></div>
</div>
<div id="warnTabDiv" style="box-sizing: border-box;padding: 14px;">
<table id="warnTab" style="text-align: center;">
<tr>
<th width="16%">报警时间</th>
<th width="10%">车牌号</th>
<th width="32%">线路</th>
<th width="20%">报警类型</th>
<th width="8%">是否处理</th>
<th width="16%">操作</th></tr>
</table>
</div>

<div class="alert-message-delete warn-message-delete">
<span></span>
<span></span>
</div>
</div>

<div class="warn-message-handle warn-message-common">
<p class="warnHandleTitle" style="background: #009142;color: white;font-size: 16px;padding: 4px 10px;cursor: move; -moz-user-select: none; -webkit-user-select: none;">报警处理</p>
<div class="warn-search-view" style="padding: 10px 0;">
<div><span>车牌号：</span><input id="emscarHandle" type="text" style="width: 150px; height: 20px;" disabled="disabled"/></div>
<div><span>报警时间：</span><input id="emstimeHandle" type="text" style="width: 150px; height: 20px;" disabled="disabled"/></div>
<div><span>报警类型：</span><select id="emstypeHandle" name="" id="" disabled="disabled"><option value ="02">长时间停车</option><option value ="03">作业超时</option><option value ="06">偏离线路</option><option value ="08">晚点</option><option value ="09">未发班</option></select></div>
</div>
<div class="warn-search-set" style="border: 1px solid darkgray;">
<div><span>违规因素：</span><select name="" id="emscauseHandle"><option value ="00">非人为因素</option><option value ="01">人为因素</option></select></div>
<div><span>备注：</span><textarea id="emsbeizhuHandle" rows="4" cols="26"></textarea></div>
</div>

<div class="warn-search-button">
<button id="warnMessageOn">确认</button>
<button id="warnMessageOff">取消</button>
</div>
</div>

<div class="warn-message-information warn-message-common">
<p class="warnInformationTitle" style="background: #009142;color: white;font-size: 16px;padding: 4px 10px;cursor: move; -moz-user-select: none; -webkit-user-select: none;">报警详细信息</p>
<div class="warn-search-view" style="padding: 10px 0;">
<div><span>车牌号：</span><input id="emsWarnCar" type="text" style="width: 150px;height: 20px;" disabled="disabled"/></div>
<div><span>报警时间：</span><input id="emsWarnTime" type="text" style="width: 150px;height: 20px;" disabled="disabled"/></div>
<div><span>报警类型：</span><select name="" id="emsWarnType" disabled="disabled"><option value ="02">长时间停车</option><option value ="03">作业超时</option><option value ="06">偏离线路</option><option value ="08">晚点</option><option value ="09">未发班</option></select></div>
</div>
<div class="warn-search-set">
<div><span>违规因素：</span><select name="" id="emsWarnCause" disabled="disabled"><option value ="00">非人为因素</option><option value ="01">人为因素</option></select></div>
<div><span>备注：</span><textarea id="emsBeizhu" rows="4" cols="26" disabled="disabled"></textarea></div>
</div>

<div class="warn-search-button" style="padding-left: 35%;">
<button id="warnMessageClose">关闭</button>
</div>
</div>

</body>
</html>

posted @ 2017-12-09 17:10 ____chen 阅读(521) 评论(0) 编辑收藏举报

刷新页面返回顶部

____chen

关于邮政平台报警弹窗以及表单数据接入 支持拖拽的方法

公告

关于邮政平台报警弹窗以及表单数据接入支持拖拽的方法