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

wr1207

2023-10-17 e4b02462b2718be6ae677385ca90328e45a61a4d

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

 mobile/js/widget_search_view.js

@@ -1,323 +1,340 @@
'use script'; //开发环境建议开启严格模式

var current_selected_monitor_type = "1002";
var current_selected_monitor_name = "微站";
var current_selected_monitor_keyword="";
var current_selected_monitor_qindex = "pm25";
var current_selected_monitor_street = "";

var tableData;

$("#btn").on("click", function () {
    current_selected_monitor_keyword = $('#search').val();
    reloadData(1);
});

//绑定enter回车键事件
$('#search').bind('keypress', function (event) {
    if (event.keyCode == "13") {
        current_selected_monitor_keyword = $('#search').val();
        reloadData(1);
    }
})

//当前页面业务
function monitortype() {
    //开始查询数据
    changeQindexSelection();
}
updateRegionSelect()
monitortype();
reloadData(1);

$("#querySelect").change(function(){
    //code...
    current_selected_monitor_name=$("#querySelect").find("option:selected").text(); //获取Select选择的text
    current_selected_monitor_type=$("#querySelect").val(); //获取Select选择的Value
    // var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
    // var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
    updateRegionSelect()
    monitortype();
    reloadData(1);

}); //为Select添加事件，当选择其中一项时触发
 

$("#regionSelect").change(function(){
    //code...
    current_selected_monitor_street=$("#regionSelect").val(); //获取Select选择的Value
    monitortype();
    reloadData(1);
}); //为Select添加事件，当选择其中一项时触发
 

//加载count
function loadCountByUserid() {
    var backend_url = default_system_params.nodejs_url_predix_url_predix + "dataapi/Bdata?bid=get_all_count_by_id&userid=" + default_system_params.userid;
    $.ajax({
        type: 'get',
        dataType: 'json',
        data: {},
        async: true,//同步
        url: backend_url,
        success: function (data) {
            var cntGroup = data.data.result;
            console.log(cntGroup)
            if (cntGroup != null) {
                for (var i = 0; i < cntGroup.length; i++) {
                    var j = i + 1;
                    var cntObj = cntGroup[i];
                    $("#count" + j).text(cntObj.count);
                    $("#countName" + j).text(cntObj.name);
                    $("#href" + j).attr("1005", cntObj.code);
                    $("#href" + j).attr("道路路段", cntObj.name);
                }
            }
        },
        error: function (request, textStatus) {
        }
    });
}

$("#qindex_selection").change(function () {
    current_selected_monitor_qindex = $("#qindex_selection").val();
    reloadData(1);
});

function changeQindexSelection() {
    current_selected_monitor_qindex = "pm25";  // 重设qindex
    $("#qindex_selection").empty();
    var options = [];
    if (current_selected_monitor_type == 1001) {
        options = Object.keys(qindex_range_list_1001);
        console.log(options)
    } else if (current_selected_monitor_type == 1002) {
        options = Object.keys(qindex_range_list_1002);
    } else if (current_selected_monitor_type == 1003) {
        options = Object.keys(qindex_range_list_1003);
        current_selected_monitor_qindex = "tsp";
    } else {
        options = Object.keys(qindex_range_list_1004_and_other);
    }
    if(current_selected_monitor_type == 1005 || current_selected_monitor_type ==100500) {
        $("#newname_a").empty();
        $("#newname_a").html('名称-属性');
    } else {
        $("#newname_a").empty();
        $("#newname_a").html('名称');
    }
    options.forEach(element => $("#qindex_selection").append("<option value='" + element + "'>" + element + "</option>"));
}

function reloadData(page) {
    $("#pageID").append('');
    $("#page").append('');
    $("#searchInfo").empty();
    let datatime_, querytype_,endtime_ ;
    if ($("#appDateHour")[0].style.display == 'none') {
        datatime_ = document.getElementById("appDate").value + ' 00:00:00';
        querytype_ = 'day';
    } else { 
        datatime_ = document.getElementById("appDateHour").value;
        querytype_ = 'hour';
    }
    var avgnam = 50; //每页显示个数  
    var backend_url = default_system_params.nodejs_url_predix + "dataapi/Bdata?bid=mobile_get_" + current_selected_monitor_type + "_list_keyword&datatype=" + querytype_ 
        + "&datatime=" + datatime_ 
        + "&qindex=" + current_selected_monitor_qindex 
        + "&keyword=" + current_selected_monitor_keyword 
        + "&pageno="+page+"&pagesize="+avgnam
        + "&userid="+localStorage.getItem('user_id_')
        + "&region="+current_selected_monitor_street;
    var loadingdiv = document.getElementById("warning"); 
    $.ajax({
        type: "GET",
        url: backend_url,
        dataType: "json",
        async: true,
        beforeSend: function(){
            loadingdiv.innerhtml = "正在处理，请稍等！"; // insert tip information
            $("#btn").attr({disabled:"disabled"});
            $("#regionSelect").attr({disabled:"disabled"});
            $("#querySelect").attr({disabled:"disabled"});
            $("#qindex_selection").attr({disabled:"disabled"});
            loadingdiv.style.display = "block"; // display the div
        },
        success: function (data) {
            tableData = data.data.result;
            if (tableData == null) {
                // haoutil.msg("请选择查询类别！！！")
                alert('请选择查询类别！！！')
                return;
            }
            if (tableData.length == 0) {
                // haoutil.msg("无查询结果，请更换查询条件！")
                alert('无查询结果，请更换查询条件！');
                return;
            }
            var newsTotalNum = data.data.counter.counter; //记录的总条数
            var pageNum = Math.ceil(newsTotalNum / avgnam); //分页的总页数
            for (var i = 0; i < tableData.length; i++) {
                var j = (page-1)*avgnam + i + 1;
                var topObj = tableData[i];
                for (var key in topObj) {
                    if (topObj[key] == null || topObj[key] == 'null' || topObj[key] == undefined || topObj[key] == 'undefined') {
                        topObj[key] = "/";
                    }
                }
                var content = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat 
                    + "'><td>" + j + "</td><td >" 
                    + topObj.region + "</td><td >" 
                    + topObj.name + "</td>"
                    + "<td><font color='" 
                    + getLayerPointColorByQindexandValue(current_selected_monitor_type, current_selected_monitor_qindex, topObj[current_selected_monitor_qindex]) 
                    + "'>" + topObj[current_selected_monitor_qindex] + "</font></td></tr>"
                $("#searchInfo").append(content);
            }
            $("#pageID").empty();
            $("#page").empty();
            var content1 = '<div class="am-cf">' + '共 ' + newsTotalNum + ' 条记录 / ' + pageNum + '页' + '</div>';
            var content2 = '<div class="pageDiv">' +
                '<ul class="am-pagination">';
            for (var i = 1; i <= pageNum; i++) {
                let pagestr_ = addPageItem(pageNum,page,i);
                content2 += pagestr_;
            };
            content2 += '</ul>' +
                '</div>';
            $("#pageID").append(content1);
            $("#page").append(content2);
        },complete: function() {
            loadingdiv.innerhtml = ""; 
            loadingdiv.style.display = "none"; 
            $("#btn").removeAttr("disabled");
            $("#regionSelect").removeAttr("disabled");
            $("#querySelect").removeAttr("disabled");
            $("#qindex_selection").removeAttr("disabled");
        }
    });
}

function over(obj) {
    $('#searchInfo tr').removeClass("over_tr");
    $(obj).addClass("over_tr");
}

function out(obj) {
    $(obj).removeClass("over_tr");
}

/* function locateAndShowDetail(obj) {
    $('#searchInfo tr').removeClass("select_tr");
    let parentObj = $(obj).parent();

    $(parentObj).addClass("select_tr");
    var siteId = $(parentObj).attr("_siteid");
    var lon = $(parentObj).attr("_lon");
    var lat = $(parentObj).attr("_lat");

    if (lon && lon != 'undefined') {
        thisWidget.locateAndHighlight(lon, lat);
    }
    if (current_selected_monitor_type != 100500) {
        thisWidget.showDetailedWindow({ "nodejs_url_predix": thisWidget.nodejs_url_predix, "datatype": thisWidget.datatype, "selected_qindex": current_selected_monitor_qindex, "datatime": thisWidget.datatime, "layerid": current_selected_monitor_type, "siteid": siteId });
    }
} */


function setTopNname(count) {
    $("#topN_name").html("Top" + count);
}

function addPageItem(pageNum,currpage,i) {
    let html = "";
    // 判断前面是否还有页面
    if (i == 1) {
        html += '<li><a href="javascript:reloadData(' + (currpage>1 ? currpage-1 : 1) + ')" rel="external nofollow" >&lt;</a></li>';
    }
    if (i == currpage) {
        html += '<li class="am-active"><a href="javascript:reloadData(' + i + ')" rel="external nofollow" rel="external nofollow" >' + i + '</a></li>';
    } else {
        let dis_ = Math.abs(i-currpage);
        if (dis_<3 || i<3 || i==pageNum){
            html += '<li><a href="javascript:reloadData(' + i + ')" rel="external nofollow" rel="external nofollow" >' + i + '</a></li>';
        } else if (dis_==3 && i>2) {
            html += "<li><a>...</a></li>";
        }
    }
    // 判断后面是否还有页面
    if (i == pageNum) {
        html += '<li><a href="javascript:reloadData(' + (currpage < pageNum ? currpage + 1 : pageNum ) + ')" rel="external nofollow" >&gt;</a></li>';
    }
    return html;
}

function updateRegionSelect() {
    let datatime_, querytype_ ;
    if(current_selected_monitor_type == 1005 || current_selected_monitor_type ==100500) {
        $("#regionSelect").empty();
        $("#regionSelect").append(`<option value="">上海市</option>`); //为Select追加一个Option(下拉项)
        $("#regionSelect").append(`<option value="黄浦区">黄浦区</option>`); //为Select追加一个Option(下拉项)
        $("#regionSelect").append(`<option value="浦东新区">浦东新区</option>`); //为Select追加一个Option(下拉项)
        $("#regionSelect").append(`<option value="静安区">静安区</option>`); //为Select追加一个Option(下拉项)
        $("#regionSelect").append(`<option value="长宁区">长宁区</option>`); //为Select追加一个Option(下拉项)
        $("#regionSelect").append(`<option value="徐汇区">徐汇区</option>`); //为Select追加一个Option(下拉项)
        $("#regionSelect").append(`<option value="闵行区">闵行区</option>`); //为Select追加一个Option(下拉项)
        $("#regionSelect").append(`<option value="虹口区">虹口区</option>`); //为Select追加一个Option(下拉项)
        $("#regionSelect").append(`<option value="杨浦区">杨浦区</option>`); //为Select追加一个Option(下拉项)
        $("#regionSelect").append(`<option value="宝山区">宝山区</option>`); //为Select追加一个Option(下拉项)
        $("#regionSelect").append(`<option value="嘉定区">嘉定区</option>`); //为Select追加一个Option(下拉项)
        $("#regionSelect").append(`<option value="青浦区">青浦区</option>`); //为Select追加一个Option(下拉项)
        $("#regionSelect").append(`<option value="松江区">松江区</option>`); //为Select追加一个Option(下拉项)
        $("#regionSelect").append(`<option value="金山区">金山区</option>`); //为Select追加一个Option(下拉项)
        $("#regionSelect").append(`<option value="奉贤区">奉贤区</option>`); //为Select追加一个Option(下拉项)
        $("#regionSelect").append(`<option value="崇明区">崇明区</option>`); //为Select追加一个Option(下拉项)
        $("#regionSelect").append(` <option value="普陀区">普陀区</option>`); //为Select追加一个Option(下拉项)
        return;
    }
    if ($("#appDateHour")[0].style.display == 'none') {
        datatime_ = document.getElementById("appDate").value + ' 00:00:00';
        querytype_ = 'day';
    } else { 
        datatime_ = document.getElementById("appDateHour").value;
        querytype_ = 'hour';
    }
    var backend_url = default_system_params.nodejs_url_predix + "dataapi/Bdata?bid=mobile_count_" + current_selected_monitor_type + "_by_district&datatype=" + querytype_ 
        + "&datatime=" + datatime_ 
        + "&userid="+localStorage.getItem('user_id_')
        + "&pageno=1&pagesize=50";
    console.log(`current selected:${current_selected_monitor_street}`);
    $.ajax({
        type: 'get',
        dataType: 'json',
        data: {},
        async: false,//同步
        url: backend_url,
        success: function (data) {
            let regionStat = data.data.result;
            if (regionStat != null) {
                $("#regionSelect").empty();
                for (var i = 0; i < regionStat.length; i++) {
                    let obj = regionStat[i];
                    select_strict = current_selected_monitor_street.length >0 ? current_selected_monitor_street : '上海市';
                    if(obj.region == select_strict) {
                        $("#regionSelect").prepend(`<option value='${obj.region !='' ? obj.region : ''}' selected>${obj.region}(${obj.region !='上海市' ? obj.num : ''})</option>`); //为Select插入一个Option(第一个位置)
                    } else {
                        $("#regionSelect").append(`<option value='${obj.region !='上海市' ? obj.region : ''}'>${obj.region}(${obj.region !='上海市' ? obj.num : ''})</option>`); //为Select追加一个Option(下拉项)
                    }
                }
                // $("#regionSelect").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
                // $("#regionSelect option:last").remove(); //删除Select中索引值最大Option(最后一个)
                // $("#regionSelect option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
                // $("#regionSelect option[value='3']").remove(); //删除Select中Value='3'的Optiona
                // $("#regionSelect option[text='4']").remove(); //删除Select中Text='4'的Optiona
            }
        },
        error: function (request, textStatus) {
        }
    });
    
    


use script'; //开发环境建议开启严格模式

 
var current_selected_monitor_type = "1002";

var current_selected_monitor_name = "微站";

var current_selected_monitor_keyword="";

var current_selected_monitor_qindex = "pm25";

var current_selected_monitor_street = "";

 
var tableData;

 
$("#btn").on("click", function () {

    current_selected_monitor_keyword = $('#search').val();

    reloadData(1);

});

 
//绑定enter回车键事件

$('#search').bind('keypress', function (event) {

    if (event.keyCode == "13") {

        current_selected_monitor_keyword = $('#search').val();

        reloadData(1);

    }

})

 
//当前页面业务

function monitortype() {

    //开始查询数据

    changeQindexSelection();

}

updateRegionSelect()

monitortype();

reloadData(1);

 
$("#querySelect").change(function(){

    //code...

    current_selected_monitor_name=$("#querySelect").find("option:selected").text(); //获取Select选择的text

    current_selected_monitor_type=$("#querySelect").val(); //获取Select选择的Value

    // var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值

    // var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值

    updateRegionSelect()

    monitortype();

    reloadData(1);

 
}); //为Select添加事件，当选择其中一项时触发

 
 
$("#regionSelect").change(function(){

    //code...

    current_selected_monitor_street=$("#regionSelect").val(); //获取Select选择的Value

    monitortype();

    reloadData(1);

}); //为Select添加事件，当选择其中一项时触发

 
 
//加载count

function loadCountByUserid() {

    var backend_url = default_system_params.nodejs_url_predix_url_predix + "dataapi/Bdata?bid=get_all_count_by_id&userid=" + default_system_params.userid;

    $.ajax({

        type: 'get',

        dataType: 'json',

        data: {},

        async: true,//同步

        url: backend_url,

        success: function (data) {

            var cntGroup = data.data.result;

            console.log(cntGroup)

            if (cntGroup != null) {

                for (var i = 0; i < cntGroup.length; i++) {

                    var j = i + 1;

                    var cntObj = cntGroup[i];

                    $("#count" + j).text(cntObj.count);

                    $("#countName" + j).text(cntObj.name);

                    $("#href" + j).attr("1005", cntObj.code);

                    $("#href" + j).attr("道路路段", cntObj.name);

                }

            }

        },

        error: function (request, textStatus) {

        }

    });

}

 
$("#qindex_selection").change(function () {

    current_selected_monitor_qindex = $("#qindex_selection").val();

    reloadData(1);

});

 
function changeQindexSelection() {

    current_selected_monitor_qindex = "pm25";  // 重设qindex

    $("#qindex_selection").empty();

    var options = [];

    if (current_selected_monitor_type == 1001) {

        options = Object.keys(qindex_range_list_1001);

        console.log(options)

    } else if (current_selected_monitor_type == 1002) {

        options = Object.keys(qindex_range_list_1002);

    } else if (current_selected_monitor_type == 1003) {

        options = Object.keys(qindex_range_list_1003);

        current_selected_monitor_qindex = "tsp";

    } else {

        options = Object.keys(qindex_range_list_1004_and_other);

    }

    if(current_selected_monitor_type == 1005 || current_selected_monitor_type ==100500) {

        $("#newname_a").empty();

        $("#newname_a").html('名称-属性');

    } else {

        $("#newname_a").empty();

        $("#newname_a").html('名称');

    }

    options.forEach(element => $("#qindex_selection").append("<option value='" + element + "'>" + element + "</option>"));

    $("#qindex_selection").find("option[value=pm25]").text("PM₂.₅");

        $("#qindex_selection").find("option[value=pm10]").text("PM₁₀");

        $("#qindex_selection").find("option[value=no]").text("NO");

        $("#qindex_selection").find("option[value=nox]").text("NOₓ");

        $("#qindex_selection").find("option[value=no2]").text("NO₂");

        $("#qindex_selection").find("option[value=co]").text("CO");

        $("#qindex_selection").find("option[value=so2]").text("SO₂");

        $("#qindex_selection").find("option[value=o3]").text("O₃");

        $("#qindex_selection").find("option[value=o31]").text("O₃₁");

        $("#qindex_selection").find("option[value=o38]").text("O₃₈");

        $("#qindex_selection").find("option[value=aqi]").text("AQI");

        $("#qindex_selection").find("option[value=tsp]").text("TSP");

}

 
function reloadData(page) {

    $("#pageID").append('');

    $("#page").append('');

    $("#searchInfo").empty();

    let datatime_, querytype_,endtime_ ;

    if ($("#appDateHour")[0].style.display == 'none') {

        datatime_ = document.getElementById("appDate").value + ' 00:00:00';

        querytype_ = 'day';

    } else { 
        datatime_ = document.getElementById("appDateHour").value;

        querytype_ = 'hour';

    }

    var avgnam = 50; //每页显示个数  
    var backend_url = default_system_params.nodejs_url_predix + "dataapi/Bdata?bid=mobile_get_" + current_selected_monitor_type + "_list_keyword&datatype=" + querytype_ 
        + "&datatime=" + datatime_ 
        + "&qindex=" + current_selected_monitor_qindex 
        + "&keyword=" + current_selected_monitor_keyword 
        + "&pageno="+page+"&pagesize="+avgnam

        + "&userid="+localStorage.getItem('user_id_')

        + "&region="+current_selected_monitor_street;

    var loadingdiv = document.getElementById("warning"); 
    $.ajax({

        type: "GET",

        url: backend_url,

        dataType: "json",

        async: true,

        beforeSend: function(){

            loadingdiv.innerhtml = "正在处理，请稍等！"; // insert tip information

            $("#btn").attr({disabled:"disabled"});

            $("#regionSelect").attr({disabled:"disabled"});

            $("#querySelect").attr({disabled:"disabled"});

            $("#qindex_selection").attr({disabled:"disabled"});

            loadingdiv.style.display = "block"; // display the div

        },

        success: function (data) {

            tableData = data.data.result;

            // if (current_selected_monitor_keyword == null) {

            //     // haoutil.msg("请输入关键字！！！")

            //     alert('请输入关键字！！！')

            //     return;

            // }

            if (tableData == null) {

                // haoutil.msg("请选择查询类别！！！")

                alert('请选择查询类别！！！')

                return;

            }

            if (tableData.length == 0) {

                // haoutil.msg("无查询结果，请更换查询条件！")

                alert('无查询结果，请更换查询条件！');

                return;

            }

            var newsTotalNum = data.data.counter.counter; //记录的总条数

            var pageNum = Math.ceil(newsTotalNum / avgnam); //分页的总页数

            for (var i = 0; i < tableData.length; i++) {

                var j = (page-1)*avgnam + i + 1;

                var topObj = tableData[i];

                for (var key in topObj) {

                    if (topObj[key] == null || topObj[key] == 'null' || topObj[key] == undefined || topObj[key] == 'undefined') {

                        topObj[key] = "/";

                    }

                }

                var content = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat 
                    + "'><td>" + j + "</td><td >" 
                    + topObj.region + "</td><td >" 
                    + topObj.name + "</td>"

                    + "<td><font color='" 
                    + getLayerPointColorByQindexandValue(current_selected_monitor_type, current_selected_monitor_qindex, topObj[current_selected_monitor_qindex]) 
                    + "'>" + topObj[current_selected_monitor_qindex] + "</font></td></tr>"

                $("#searchInfo").append(content);

            }

            $("#pageID").empty();

            $("#page").empty();

            var content1 = '<div class="am-cf">' + '共 ' + newsTotalNum + ' 条记录 / ' + pageNum + '页' + '</div>';

            var content2 = '<div class="pageDiv">' +

                '<ul class="am-pagination">';

            for (var i = 1; i <= pageNum; i++) {

                let pagestr_ = addPageItem(pageNum,page,i);

                content2 += pagestr_;

            };

            content2 += '</ul>' +

                '</div>';

            $("#pageID").append(content1);

            $("#page").append(content2);

        },complete: function() {

            loadingdiv.innerhtml = ""; 
            loadingdiv.style.display = "none"; 
            $("#btn").removeAttr("disabled");

            $("#regionSelect").removeAttr("disabled");

            $("#querySelect").removeAttr("disabled");

            $("#qindex_selection").removeAttr("disabled");

        }

    });

}

 
function over(obj) {

    $('#searchInfo tr').removeClass("over_tr");

    $(obj).addClass("over_tr");

}

 
function out(obj) {

    $(obj).removeClass("over_tr");

}

 
/* function locateAndShowDetail(obj) {

    $('#searchInfo tr').removeClass("select_tr");

    let parentObj = $(obj).parent();

 
    $(parentObj).addClass("select_tr");

    var siteId = $(parentObj).attr("_siteid");

    var lon = $(parentObj).attr("_lon");

    var lat = $(parentObj).attr("_lat");

 
    if (lon && lon != 'undefined') {

        thisWidget.locateAndHighlight(lon, lat);

    }

    if (current_selected_monitor_type != 100500) {

        thisWidget.showDetailedWindow({ "nodejs_url_predix": thisWidget.nodejs_url_predix, "datatype": thisWidget.datatype, "selected_qindex": current_selected_monitor_qindex, "datatime": thisWidget.datatime, "layerid": current_selected_monitor_type, "siteid": siteId });

    }

} */

 
 
function setTopNname(count) {

    $("#topN_name").html("Top" + count);

}

 
function addPageItem(pageNum,currpage,i) {

    let html = "";

    // 判断前面是否还有页面

    if (i == 1) {

        html += '<li><a href="javascript:reloadData(' + (currpage>1 ? currpage-1 : 1) + ')" rel="external nofollow" >&lt;</a></li>';

    }

    if (i == currpage) {

        html += '<li class="am-active"><a href="javascript:reloadData(' + i + ')" rel="external nofollow" rel="external nofollow" >' + i + '</a></li>';

    } else {

        let dis_ = Math.abs(i-currpage);

        if (dis_<3 || i<3 || i==pageNum){

            html += '<li><a href="javascript:reloadData(' + i + ')" rel="external nofollow" rel="external nofollow" >' + i + '</a></li>';

        } else if (dis_==3 && i>2) {

            html += "<li><a>...</a></li>";

        }

    }

    // 判断后面是否还有页面

    if (i == pageNum) {

        html += '<li><a href="javascript:reloadData(' + (currpage < pageNum ? currpage + 1 : pageNum ) + ')" rel="external nofollow" >&gt;</a></li>';

    }

    return html;

}

 
function updateRegionSelect() {

    let datatime_, querytype_ ;

    if(current_selected_monitor_type == 1005 || current_selected_monitor_type ==100500) {

        $("#regionSelect").empty();

        $("#regionSelect").append(`<option value="">上海市</option>`); //为Select追加一个Option(下拉项)

        $("#regionSelect").append(`<option value="黄浦区">黄浦区</option>`); //为Select追加一个Option(下拉项)

        $("#regionSelect").append(`<option value="浦东新区">浦东新区</option>`); //为Select追加一个Option(下拉项)

        $("#regionSelect").append(`<option value="静安区">静安区</option>`); //为Select追加一个Option(下拉项)

        $("#regionSelect").append(`<option value="长宁区">长宁区</option>`); //为Select追加一个Option(下拉项)

        $("#regionSelect").append(`<option value="徐汇区">徐汇区</option>`); //为Select追加一个Option(下拉项)

        $("#regionSelect").append(`<option value="闵行区">闵行区</option>`); //为Select追加一个Option(下拉项)

        $("#regionSelect").append(`<option value="虹口区">虹口区</option>`); //为Select追加一个Option(下拉项)

        $("#regionSelect").append(`<option value="杨浦区">杨浦区</option>`); //为Select追加一个Option(下拉项)

        $("#regionSelect").append(`<option value="宝山区">宝山区</option>`); //为Select追加一个Option(下拉项)

        $("#regionSelect").append(`<option value="嘉定区">嘉定区</option>`); //为Select追加一个Option(下拉项)

        $("#regionSelect").append(`<option value="青浦区">青浦区</option>`); //为Select追加一个Option(下拉项)

        $("#regionSelect").append(`<option value="松江区">松江区</option>`); //为Select追加一个Option(下拉项)

        $("#regionSelect").append(`<option value="金山区">金山区</option>`); //为Select追加一个Option(下拉项)

        $("#regionSelect").append(`<option value="奉贤区">奉贤区</option>`); //为Select追加一个Option(下拉项)

        $("#regionSelect").append(`<option value="崇明区">崇明区</option>`); //为Select追加一个Option(下拉项)

        $("#regionSelect").append(` <option value="普陀区">普陀区</option>`); //为Select追加一个Option(下拉项)

        return;

    }

    if ($("#appDateHour")[0].style.display == 'none') {

        datatime_ = document.getElementById("appDate").value + ' 00:00:00';

        querytype_ = 'day';

    } else { 
        datatime_ = document.getElementById("appDateHour").value;

        querytype_ = 'hour';

    }

    var backend_url = default_system_params.nodejs_url_predix + "dataapi/Bdata?bid=mobile_count_" + current_selected_monitor_type + "_by_district&datatype=" + querytype_ 
        + "&datatime=" + datatime_ 
        + "&userid="+localStorage.getItem('user_id_')

        + "&pageno=1&pagesize=50";

    console.log(`current selected:${current_selected_monitor_street}`);

    $.ajax({

        type: 'get',

        dataType: 'json',

        data: {},

        async: false,//同步

        url: backend_url,

        success: function (data) {

            let regionStat = data.data.result;

            if (regionStat != null) {

                $("#regionSelect").empty();

                for (var i = 0; i < regionStat.length; i++) {

                    let obj = regionStat[i];

                    select_strict = current_selected_monitor_street.length >0 ? current_selected_monitor_street : '上海市';

                    if(obj.region == select_strict) {

                        $("#regionSelect").prepend(`<option value='${obj.region !='' ? obj.region : ''}' selected>${obj.region}(${obj.region !='上海市' ? obj.num : ''})</option>`); //为Select插入一个Option(第一个位置)

                    } else {

                        $("#regionSelect").append(`<option value='${obj.region !='上海市' ? obj.region : ''}'>${obj.region}(${obj.region !='上海市' ? obj.num : ''})</option>`); //为Select追加一个Option(下拉项)

                    }

                }

                // $("#regionSelect").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)

                // $("#regionSelect option:last").remove(); //删除Select中索引值最大Option(最后一个)

                // $("#regionSelect option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)

                // $("#regionSelect option[value='3']").remove(); //删除Select中Value='3'的Optiona

                // $("#regionSelect option[text='4']").remove(); //删除Select中Text='4'的Optiona

            }

        },

        error: function (request, textStatus) {

        }

    });

    
    
 
 
}

 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>