關於郵政平臺報警彈窗以及表單數據接入支持拖拽的方法

時間 2019-11-19

標籤關於郵政平臺報警以及表單數據支持方法欄目 HTML 简体版

原文原文鏈接

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

.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;chrome

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

}
.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>api

/*點擊處理報警 */
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>