zoukankan      html  css  js  c++  java
  • 关于邮政平台报警弹窗以及表单数据接入 支持拖拽的方法

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

  • 相关阅读:
    网络基础 港湾FlexHammer5010交换机镜像端口配置
    HttpWatch HttpWatch时间表(HttpWatch Time Charts)
    网络基础 计算机网络速率,带宽,吞吐量概念
    Kubernetes 1.11.2概述和搭建(多节点)
    Ubuntu 搭建docker registry 私有仓库
    Ubuntu 搭建etcd
    python 多线程删除MySQL表
    python 统计MySQL表信息
    基于Prometheus的Pushgateway实战
    基于docker 搭建Elasticsearch6.2.4(centos)
  • 原文地址:https://www.cnblogs.com/chenhuichao/p/8012033.html
Copyright © 2011-2022 走看看