增加查询等待的提示,查询时禁用其它相关操作

wr1207

2023-10-17 e4b02462b2718be6ae677385ca90328e45a61a4d

 mobile/road_search.html

@@ -1,195 +1,196 @@
<!DOCTYPE html>
<html class="no-js css-menubar" lang="zh-cn">

<head>
    <title>上海市道路交通环境监测平台</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 移动设备 viewport -->
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />
    <meta name="author" content="上海市道路交通环境监测平台 http://mars3d.cn" />
    <!-- 360浏览器默认使用Webkit内核 -->
    <meta name="renderer" content="webkit" />
    <!-- Chrome浏览器添加桌面快捷方式（安卓） -->
    <link rel="icon" type="image/png" href="img/favicon/favicon.png" />
    <meta name="mobile-web-app-capable" content="yes" />
    <!-- Safari浏览器添加到主屏幕（IOS） -->
    <link rel="icon" sizes="192x192" href="img/favicon/apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-title" content="MarsGIS" />

    <!--第三方lib-->
    <script type="text/javascript" src="../lib/include-lib.js?time=20210803" libpath="../lib/" include="jquery,jquery.range,bootstrap,bootstrap-checkbox,font-awesome"></script>
    <link href="../css/style.css" rel="stylesheet" />
    <link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../lib/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.css" rel="stylesheet" />
    <script src="../lib/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.js"></script>
    <script src="../lib/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.zh-CN.js"></script>

    <link href="css/dataTime.css" rel="stylesheet" />
    <link href="css/widget_search.css" rel="stylesheet" />

    <script type="text/javascript" src="../js/changable_params.js"></script>
    <script type="text/javascript" src="js/widget_search.js"></script>
    <script type="text/javascript" src="js/widget_search_view.js"></script>   
    <script type="text/javascript" src="../js/function_1001.js"></script>
    
    <style>
        .datetimepicker {
            right: 0;
            border-radius: 0;
        }

        .datetimepicker table {
            width: 100%;
        }

        .pageDiv{
            float: none!important;
            text-align: center;
        }
        .querySelect{
  height: 32px;
  margin-right: 8px;
  background: #304B80;
  border: none;
  color: #fff;
}
.layui-input{
    display: none;
}
.append_test{
    background: #304B80;
    border-bottom: 1px solid #476399;
}
.form-control,
.input-group-addon{
    background: transparent;
    border: none;
    color: #fff;
    position: relative;
}
.input-group-addon::after{
    position: absolute;
    content: " ";
    width: 1px;
    top: 12px;
    bottom: 12px;
    right: 0;
    background: #476399;
}
.loading{
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99;
    background: rgba(0, 0, 0, .6);
}
    </style>
</head>

<body style="background: #304B80;">
    <!--选择时间 开始-->
    <div class="input-group input-group-lg append_test">
        <div style="width:78px; height:44px; line-height: 1; border-radius: 0; font-size: 14px;"
            class="fa fa-globe input-group-addon dropdown-toggle" data-toggle="dropdown">
            <span id="current">小时</span>
        </div>
        <input type='text' class="form-control date" id='appDate' name="appDate"
            style="height:44px;width:100%;display:none;" />
        <input type='text' class="form-control date" id='appDateHour' name="appDateHour"
            style="height:44px;width:100%;" />
        <ul class="dropdown-menu dropdown-menu_datatime">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline" style="margin-bottom: 10px;">
                        <div class="layui-input-inline">
                            <input type="radio" name="datatype" value="hour" title="小时数据" checked>
                            <input type="text" class="layui-input" id="datatype_hour" placeholder="yyyy-mm-dd hh">
                            小时
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="radio" name="datatype" value="day" title="天数据">
                            <input type="text" class="layui-input" id="datatype_day" placeholder="yyyy-mm-dd">
                            天
                        </div>
                    </div>
                </div>
            </div>
        </ul>
    </div>
    <script type="text/javascript" src="js/dataTime.js"></script>
    <!--选择时间 结束-->

    <!--道路查询 开始-->
    <div id="searchDiv" class="searchDiv">
        <select class="querySelect" id="querySelect" >
            <option value="1002">微站</option>
            <option value="1003">TSP</option>
            <option value="1004">监测车辆</option>
            <option value="100500">道路</option>
            <option value="1005">道路路段</option>
            <option value="1006">监测区域</option>
            <option value="1001">国控点</option>            
        </select>
        <input style="flex: 1;" type="text" id="search" class="input_keyword" placeholder="请输入关键字，可为空">
        <button type="button" id="btn" class="btn btn-primary">
            <span id="btn_text">查询</span>
        </button>
    </div>

    <div class="layui-row" id="">
        <form action="" class="am-form" id="listContainer" style="height: calc(100vh - 146px); overflow-y: auto;">
            <table class="layui-table no_bgc_table top_10_table table_Info" id="newsList" lay-skin="nob">
                <thead>
                    <tr style="background:#304b80; color: #fff;">
                        <th width="50">序号</th>
                        <th width="80">
                            <select id="regionSelect" style="width: 100%; background: #304b80; border: none;">
                                <option value="">上海市</option>
                                <option value="黄浦区">黄浦区</option>
                                <option value="浦东新区">浦东新区</option>
                                <option value="静安区">静安区</option>
                                <option value="长宁区">长宁区</option>
                                <option value="徐汇区">徐汇区</option>
                                <option value="闵行区">闵行区</option>
                                <option value="虹口区">虹口区</option>
                                <option value="杨浦区">杨浦区</option>
                                <option value="宝山区">宝山区</option>
                                <option value="嘉定区">嘉定区</option>
                                <option value="青浦区">青浦区</option>
                                <option value="松江区">松江区</option>
                                <option value="金山区">金山区</option>
                                <option value="奉贤区">奉贤区</option>
                                <option value="崇明区">崇明区</option>
                                <option value="普陀区">普陀区</option>
                            </select>
                        </th>
                        <th style="width: calc(100% - 212px); overflow: hidden; text-overflow: ellipsis;" id="newname_a">名称</th>
                        <th width="80"><select style="width: 100%; background: #304b80; border: none;" id="qindex_selection"></select></th>
                    </tr>
                </thead>
                <tbody class="am-u-sm-12" id="searchInfo" style="cursor: pointer;">
                </tbody>
            </table>
        </form>
        <!-- <div id="warning"></div> -->
        <div id="warning" style="color:#ffffff; display:none; position:absolute; top:220px; left:10em;">正在处理，请稍等！</div>
        <div class="page">
            <div id="pageID">
            </div>
            <ul id="page" style="padding: 0;"></ul>
        </div>
    </div>
    <script type="text/javascript" src="js/widget_search_view.js"></script>
    <!--道路查询 结束-->
</body>

<!DOCTYPE html>

<html class="no-js css-menubar" lang="zh-cn">

 
<head>

    <title>上海市道路交通环境监测平台</title>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- 移动设备 viewport -->

    <meta name="viewport"

        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />

    <meta name="author" content="上海市道路交通环境监测平台 http://mars3d.cn" />

    <!-- 360浏览器默认使用Webkit内核 -->

    <meta name="renderer" content="webkit" />

    <!-- Chrome浏览器添加桌面快捷方式（安卓） -->

    <link rel="icon" type="image/png" href="img/favicon/favicon.png" />

    <meta name="mobile-web-app-capable" content="yes" />

    <!-- Safari浏览器添加到主屏幕（IOS） -->

    <link rel="icon" sizes="192x192" href="img/favicon/apple-touch-icon.png" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <meta name="apple-mobile-web-app-title" content="MarsGIS" />

 
    <!--第三方lib-->

    <script type="text/javascript" src="../lib/include-lib.js?time=20210803" libpath="../lib/" include="jquery,jquery.range,bootstrap,bootstrap-checkbox,font-awesome"></script>

    <link href="../css/style.css" rel="stylesheet" />

    <link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <link href="../lib/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.css" rel="stylesheet" />

    <script src="../lib/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.js"></script>

    <script src="../lib/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.zh-CN.js"></script>

 
    <link href="css/dataTime.css" rel="stylesheet" />

    <link href="css/widget_search.css" rel="stylesheet" />

 
    <script type="text/javascript" src="../js/changable_params.js"></script>

    <script type="text/javascript" src="js/widget_search.js"></script>

    <script type="text/javascript" src="js/widget_search_view.js"></script>   
    <script type="text/javascript" src="../js/function_1001.js"></script>

    
    <style>

        .datetimepicker {

            right: 0;

            border-radius: 0;

        }

 
        .datetimepicker table {

            width: 100%;

        }

 
        .pageDiv{

            float: none!important;

            text-align: center;

        }

        .querySelect{

  height: 32px;

  margin-right: 8px;

  background: #304B80;

  border: none;

  color: #fff;

}

.layui-input{

    display: none;

}

.append_test{

    background: #304B80;

    border-bottom: 1px solid #476399;

}

.form-control,

.input-group-addon{

    background: transparent;

    border: none;

    color: #fff;

    position: relative;

}

.input-group-addon::after{

    position: absolute;

    content: " ";

    width: 1px;

    top: 12px;

    bottom: 12px;

    right: 0;

    background: #476399;

}

.loading{

    display: none;

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    z-index: 99;

    background: rgba(0, 0, 0, .6);

}

    </style>

</head>

 
<body style="background: #304B80;">

    <!--选择时间 开始-->

    <div class="input-group input-group-lg append_test">

        <div style="width:78px; height:44px; line-height: 1; border-radius: 0; font-size: 14px;"

            class="fa fa-globe input-group-addon dropdown-toggle" data-toggle="dropdown">

            <span id="current">小时</span>

        </div>

        <input type='text' class="form-control date" id='appDate' name="appDate"

            style="height:44px;width:100%;display:none;" />

        <input type='text' class="form-control date" id='appDateHour' name="appDateHour"

            style="height:44px;width:100%;" />

        <ul class="dropdown-menu dropdown-menu_datatime">

            <div class="layui-form">

                <div class="layui-form-item">

                    <div class="layui-inline" style="margin-bottom: 10px;">

                        <div class="layui-input-inline">

                            <input type="radio" name="datatype" value="hour" title="小时数据" checked>

                            <input type="text" class="layui-input" id="datatype_hour" placeholder="yyyy-mm-dd hh">

                            小时

                        </div>

                    </div>

                    <div class="layui-inline">

                        <div class="layui-input-inline">

                            <input type="radio" name="datatype" value="day" title="天数据">

                            <input type="text" class="layui-input" id="datatype_day" placeholder="yyyy-mm-dd">

                            天

                        </div>

                    </div>

                </div>

            </div>

        </ul>

    </div>

    <script type="text/javascript" src="js/dataTime.js"></script>

    <!--选择时间 结束-->

 
    <!--道路查询 开始-->

    <div id="searchDiv" class="searchDiv">

        <select class="querySelect" id="querySelect" >

            <option value="1002">微站</option>

            <option value="1003">TSP</option>

            <option value="1004">监测车辆</option>

            <option value="100500">道路</option>

            <option value="1005">道路路段</option>

            <option value="1006">监测区域</option>

            <option value="1001">国控点</option>            
        </select>

        <input style="flex: 1;" type="text" id="search" class="input_keyword" placeholder="请输入关键字，可为空">

        <button type="button" id="btn" class="btn btn-primary">

            <span id="btn_text">查询</span>

        </button>

    </div>

 
    <div class="layui-row" id="">

        <form action="" class="am-form" id="listContainer" style="height: calc(100vh - 146px); overflow-y: auto;">

            <table class="layui-table no_bgc_table top_10_table table_Info" id="newsList" lay-skin="nob">

                <thead>

                    <tr style="background:#304b80; color: #fff;">

                        <th width="50">序号</th>

                        <th width="90">

                            <select id="regionSelect" style="width: 100%; background: #304b80; border: none;">

                                <option value="">上海市</option>

                                <option value="黄浦区">黄浦区</option>

                                <option value="浦东新区">浦东新区</option>

                                <option value="静安区">静安区</option>

                                <option value="长宁区">长宁区</option>

                                <option value="徐汇区">徐汇区</option>

                                <option value="闵行区">闵行区</option>

                                <option value="虹口区">虹口区</option>

                                <option value="杨浦区">杨浦区</option>

                                <option value="宝山区">宝山区</option>

                                <option value="嘉定区">嘉定区</option>

                                <option value="青浦区">青浦区</option>

                                <option value="松江区">松江区</option>

                                <option value="金山区">金山区</option>

                                <option value="奉贤区">奉贤区</option>

                                <option value="崇明区">崇明区</option>

                                <option value="普陀区">普陀区</option>

                            </select>

                        </th>

                        <th style="width: calc(100% - 232px); overflow: hidden; text-overflow: ellipsis;" id="newname_a">名称</th>

                        <th width="90"><select style="width: 100%; background: #304b80; border: none;" id="qindex_selection"></select></th>

                    </tr>

                </thead>

                <tbody class="am-u-sm-12" id="searchInfo" style="cursor: pointer;">

                </tbody>

            </table>

        </form>

        <!-- <div id="warning"></div> -->

        <div id="warning" style="color:#ffffff; display:none; position:absolute; top:220px; left:10em;">正在处理，请稍等！</div>

        <div class="page">

            <div id="pageID">

            </div>

            <ul id="page" style="padding: 0;"></ul>

        </div>

    </div>

    <script type="text/javascript" src="js/widget_search_view.js"></script>

    
    <!--道路查询 结束-->

</body>

 
</html>