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

<%@ 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>


<link rel="stylesheet" href="<%=path%>/Asset/css/ex_ems/exsun_theme.css">
<link rel="stylesheet" href="<%=path%>/Asset/css/ex_ems/exsun_theme_ex.css">

<script src="<%=path%>/Plugin/jquery.min.js"></script>

<script src="<%=path%>/Plugin/jquery-awesomplete.js"></script>
<script src="<%=path%>/Plugin/amazeui.js"></script>

<script src="<%=path%>/Plugin/echarts.min.js"></script>
<script src="<%=path%>/Plugin/jstree.js"></script>
<script src="<%=path%>/Plugin/jquery.dtGrid.js"></script>
<script src="<%=path%>/Plugin/altTemplate.js"></script>
<script src="<%=path%>/Plugin/jquery-dialog-plus.js"></script>



<link rel="stylesheet" href="<%=path%>/Asset/css/exsun_base.css">
<link rel="stylesheet" href="<%=path%>/Asset/css/exsun_layout.css">
<link rel="stylesheet" href="<%=path%>/Asset/css/exsun_layout_map.css">


<link href="<%=path%>/Plugin/leaflet-1.0.2/leaflet.css" rel="stylesheet" />
<link href="<%=path%>/Asset/scripts/MapLib/exsun_map.css" rel="stylesheet" />
<link href="<%=path%>/Asset/scripts/MapLib/ESMapLib.css" rel="stylesheet" />

<script src="<%=path%>/Plugin/leaflet-1.0.2/leaflet-src.js"></script>
<script src="<%=path%>/Asset/scripts/base/MapLib-0.3-src.js"></script>
<script src="<%=path%>/Asset/scripts/MapLib/leaflet.draw.js"></script>
<script src="<%=path%>/Asset/scripts/MapLib/Control.MiniMap.min.js"></script>
<script src="<%=path%>/Asset/scripts/base/ESLib-0.1.2-src.js"></script>

<script src="<%=path%>/Asset/scripts/base/zh-cn.js"></script>
<script src="<%=path%>/Asset/scripts/MapLib/MovingMarker.js"></script>
<script src="<%=path%>/Asset/scripts/MapLib/leaflet.markercluster-src.js"></script>
<script src="<%=path%>/Asset/scripts/site/Page/MapView-0.1.5-src.js"></script>

<style type="text/css">

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

.alert-message{
300px;
height: 150px;
border: 3px solid #E1E6E9;
position: fixed;
right: 0;
background:white;
bottom: -160px;
z-index: 999;
}
.alert-message-delete{
26px;
height: 26px;
position: absolute;
right: 0px;
top: 4px;
}
.alert-message-delete span{
display: block;
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{
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{
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;
160px;
text-align: right;
}
.warn-search-button{
padding: 20px 0 0 20%;
}
.warn-search-button button{
margin: 0 50px;
}
</style>


<script>

/*拖拽方法开始*/
(function($) {
$.fn.dragDiv = function(divWrap) {
return this.each(function() {
var $divMove = $(this);//鼠标可拖拽区域
var $divWrap = divWrap ? $divMove.parents(divWrap) : $divMove;//整个移动区域
var mX = 0, mY = 0;//定义鼠标X轴Y轴
var dX = 0, dY = 0;//定义div左、上位置
var isDown = false;//mousedown标记
if(document.attachEvent) {//ie的事件监听,拖拽div时禁止选中内容,firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
$divMove[0].attachEvent('onselectstart', function() {
return false;
});
}
$divMove.mousedown(function(event) {
var event = event || window.event;
mX = event.clientX;
mY = event.clientY;
dX = $divWrap.offset().left;
dY = $divWrap.offset().top;
isDown = true;//鼠标拖拽启动
});
$(document).mousemove(function(event) {
var event = event || window.event;
var x = event.clientX;//鼠标滑动时的X轴
var y = event.clientY;//鼠标滑动时的Y轴
if(isDown) {
$divWrap.css({"left": x - mX + dX, "top": y - mY + dY});//div动态位置赋值
}
});
$divMove.mouseup(function() {
isDown = false;//鼠标拖拽结束
});
});
};
})(jQuery);
//
$(document).ready(function() {
$(".warnListTitle").dragDiv(".warn-message-tab");//拖拽div头部title
$(".warnHandleTitle").dragDiv(".warn-message-handle");//拖拽div头部title
$(".warnInformationTitle").dragDiv(".warn-message-information");//拖拽div头部title
// $("#alertMessageTitle").dragDiv(".alert-message");//拖拽div头部title
});
//拖拽方法结束
//关于弹窗开始
$(document).ready(function() {
(function(){
requestWarnMessage();

function alertWindow(){
$.get("/hbgps/outlineinfo/baojing",function(data){
//console.log(data)
if(data.length > 0){
var typeNum = data[0].alamtype;
var warnType = "";

switch(typeNum)
{
case "02": warnType = "长时间停车";
break;
case "03": warnType = "作业超时";
break;
case "06": warnType = "偏离线路";
break;
case "08": warnType = "晚点";
break;
case "09": warnType = "未发班";
break;
}
$(".message-warn").css("color","red");

$('.alert-message').animate({bottom:"20px"},400);
var hidden = setTimeout(function(){
$('.alert-message').animate({bottom:"-160px"},400);
},4000);
$('.alert-message-text').html(data[0].lienceid+"在"+data[0].outtm+warnType);

}else{
$(".message-warn").css("color","white");
$('.alert-message-text').html("");
}
},"json")
}
var t = setInterval(alertWindow,5000)
$(".alert-message-deletex").click(function(){
$('.alert-message').animate({bottom:"-160px"},100);
});

$(".message-warn").click(function(){
$(".warn-message-tab").css("display","block");
});
$(".ex-layout-main").on("click",".message-warn",function(){
$(".warn-message-tab").css("display","block");
})

$(".alert-tiaozhuan,.alert-message-text").click(function(){
$(".warn-message-tab").css("display","block");
requestWarnMessage();
}) ;
$(".warn-message-delete").click(function(){
$(".warn-message-tab").css("display","none");
});

function requestWarnMessage(){
$.get("/hbgps/outlineinfo/guanli",function(datalist){
var tabRow ="";
for(var i=0;i<datalist.length;i++){
var typeNum = datalist[i].alamtype;
var handleNum = datalist[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>"+datalist[i].outtm+"</td><td>"+datalist[i].lienceid+"</td><td>"+datalist[i].ylmc+"</td><td>"+warnType+"</td><td id='handleChoose{2}'>"+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+"");
te=te.replace("{2}",i+"");
tabRow +=te;
}
$("#warnTab tr:nth-child(1)").nextAll().remove();
$("#warnTab tr:nth-child(1)").after(tabRow);
},"json");
var dateDay = new Date();
if(dateDay.getDate()<10){
var day = "0"+dateDay.getDate()
}

$("#searchWarndate").val( dateDay.getFullYear()+"-"+(dateDay.getMonth()+1)+"-"+day);
}

/*点击处理报警 */
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=" 120px;height: 20px;"/></div>
<div>车牌号:<input type="text" id="searchWarncar" style=" 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=" 150px; height: 20px;" disabled="disabled"/></div>
<div><span>报警时间:</span><input id="emstimeHandle" type="text" style=" 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=" 150px;height: 20px;" disabled="disabled"/></div>
<div><span>报警时间:</span><input id="emsWarnTime" type="text" style=" 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>

原文地址:https://www.cnblogs.com/chenhuichao/p/8012033.html