查询勾选显示

qinbo

2021-11-10 4c346f202a2f4431feb734da018af1b83571b8fb

查询勾选显示

 widgetsTS/widget_search/view.css

@@ -117,7 +117,7 @@
}

.table_Info{
    background-color: rgba(0, 48, 64, .5);
    /* background-color: rgba(0, 48, 64, .5); */
    border: 0 none;
}
.table_Info th,

 widgetsTS/widget_search/view.html

@@ -64,9 +64,17 @@
                <a id="href6" class="color_white" href="#">
                    <img src="img/count6.png" class="layui-nav-img">
                    <span class="layui-badge" id="count6">0</span>
                    <span class="padding_right_2_p" id="countName6">道路</span>
                    <span class="padding_right_2_p" id="countName6">道路路段</span>
                </a>
                <input class="codeInput" type="hidden" id="countCode6">
            </div>
            <div class="cnt_right_div cnt_btn">
                <a id="href7" class="color_white" href="#" _code="100500" _name="道路">
                    <img src="img/count6.png" class="layui-nav-img">
                    <span class="layui-badge" id="count7">8610</span>
                    <span class="padding_right_2_p" id="countName7">道路</span>
                </a>
                <input class="codeInput" type="hidden" id="countCode7">
            </div>
        </div>
    </div>
@@ -81,26 +89,26 @@
    <div class="layui-row">
        <span class="layui-breadcrumb" lay-separator="|">
            <a href="#"></a>
            <a href="#" style="color: white!important;">查询信息</a>
            <a href="#" style="color: white!important;"><span id="topN_name">查询信息</span></a>
            <a href="#"></a>
        </span>
        <span class="layui-breadcrumb" style="float:right;margin-right:20px;" lay-separator="|">
            <a href="#" style="color:white!important;" onclick="highlightSelected();"><span id="topN_name">勾选显示</span></a>
        </span>
    </div>
    <div class="layui-row" id="" style="padding-left:1%;padding-right:1%;overflow:auto;height:450px;">
        <form action="" class="am-form" id="listContainer">
        <table class="layui-table no_bgc_table top_10_table table_Info" id="newsList">
        <table class="layui-table no_bgc_table top_10_table table_Info" id="newsList" lay-skin="nob">
            <thead>
                <tr style="background-color: rgba(0, 0, 0, 0); color: #FF5722;">
                    <th style="font-weight: bold;">序号</th>
                        <th style="font-weight: bold;"><input type="checkbox" id="selectedALL" /></span></th>
                        <th style="font-weight: bold;">序</th>
                        <th style="font-weight: bold;">编号</th>
                    <th style="font-weight: bold;">名称</th>
                    <th style="font-weight: bold;">pm25</th>
                    <th style="font-weight: bold;">pm10</th>
                    <th style="font-weight: bold;">no2</th>
                    <th style="font-weight: bold;">co</th>
                    <th style="font-weight: bold;">no</th>
                    <th style="font-weight: bold;">nox</th>
                    <th style="font-weight: bold;"><select id="qindex_selection"></select></th>                  
                </tr>
            </thead>
            <tbody class="am-u-sm-12" id="listTag">
            <tbody class="am-u-sm-12" id="searchInfo" style="cursor: pointer;">
            </tbody>
        </table>
    </form>

 widgetsTS/widget_search/view.js

@@ -3,6 +3,7 @@
var current_selected_monitor_keyword;
var current_selected_monitor_qindex = "pm25";

var tableData;

//对应widget.js中MyWidget实例化后的对象
var thisWidget
@@ -18,11 +19,25 @@
        $(this).addClass("select_btn");
        current_selected_monitor_type = $(this).attr("_code");
        current_selected_monitor_name = $(this).attr("_name");        
        changeQindexSelection();
    });  
    //开始查询数据
    $("#btn").click(function () {
        current_selected_monitor_keyword = $('#search').val();
        reloadData(1);
    });


    $("#selectedALL").click(function() { 
        if (this.checked){ 
            $("input[name='selectedItem']:checkbox").each(function(){ 
                  $(this).prop("checked", true);  
            });
        } else {   
            $("input[name='selectedItem']:checkbox").each(function() {   
                  $(this).prop("checked", false);  
            });
        }  
    });
}

@@ -55,8 +70,32 @@

}

$("#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);
    }
    options.forEach(element => $("#qindex_selection").append("<option value='" + element + "'>" + element + "</option>"));

}

function reloadData(page){
    $("#listTag").empty();
    $("#searchInfo").empty();
    var backend_url = thisWidget.nodejs_url_predix + "dataapi/Bdata?bid=get_" + current_selected_monitor_type + "_list_keyword&datatype=" + thisWidget.datatype + "&datatime=" + thisWidget.datatime + "&qindex=" + current_selected_monitor_qindex +"&keyword=" + current_selected_monitor_keyword+ "&pageno=1&pagesize=10";
    var avgnam = 10; //每页显示个数
        $.ajax({
@@ -64,23 +103,23 @@
          url:backend_url,
          dataType:"json",
          success:function(data){
            tableData = data.data.result;
            if(current_selected_monitor_keyword == null){
                haoutil.msg("请输入关键字！！！")
                return;
            }
            if(data.data.result == null){
            if(tableData == null){
                haoutil.msg("请选择查询类别！！！")
                return;
            }          
            var tableData = data.data.result;
            var newsTotalNum = data.data.result.length; //记录的总条数
            var pageNum = Math.ceil(newsTotalNum/avgnam); //分页的总页数
            
            for(var i=((page-1)*10);i<(page*10)&&i<newsTotalNum;i++){
                var j = i+1; 
                var topObj = tableData[i];                
                var content = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat + "' onclick='locateAndShowDetail(this)' onmouseover='over(this)' onmouseout='out(this)' ><td>" + j + "</td><td>" + topObj.name + "</td><td>" + topObj.pm25 +"</td><td>" + topObj.pm10 +"</td><td>"+ topObj.no2 +"</td><td>"+ topObj.co +"</td><td>"+ topObj.no +"</td><td>" + topObj.nox + "</td></tr>"
                $("#listTag").append(content);
                var content = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat + "' onmouseover='over(this)' onmouseout='out(this)' ><td><input type='checkbox' name='selectedItem' value='" + j + "' /></td><td>" + j + "</td><td onclick='locateAndShowDetail(this)'>" + topObj.code + "</td><td onclick='locateAndShowDetail(this)'>" + 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);
            }
            var content1 = '<div class="am-cf">' +
                '共 '+newsTotalNum+' 条记录 / '+pageNum+'页' +
@@ -184,14 +223,41 @@

function locateAndShowDetail(obj) {
    $('#searchInfo tr').removeClass("select_tr");
    $(obj).addClass("select_tr");
    var siteId = $(obj).attr("_siteid");
    var lon = $(obj).attr("_lon");
    var lat = $(obj).attr("_lat");
        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 });
    console.log(current_selected_monitor_type);
        }
    }


    function setTopNname(count) {
        $("#topN_name").html("Top" + count);
    
    }
    
    function highlightSelected() {
    
        var obj = document.getElementsByName('selectedItem'); //选择所有name="'selectedItem'"的对象，返回数组 
        var selectedItem = [];
        for (var i = 0; i < obj.length; ++i) {
            if (obj[i].checked) {
                selectedItem[selectedItem.length] = tableData[i];
            }
        }
    
        if (selectedItem.length <= 0) {
            haoutil.msg("请勾选");
        } else {
            //console.log(selectedItem);
            thisWidget.HighlightMulti(current_selected_monitor_type, current_selected_monitor_qindex, selectedItem);
        }
}

 widgetsTS/widget_search/widget.js

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


function getPositionFromLonLat(in_json_string) {
    let postion = [];
    var points = in_json_string.split(",");
    points.forEach(element => {
        var tmplon_lat = element.split(" ");
        postion[postion.length] = [tmplon_lat[0], tmplon_lat[1], 1];
    });
    return postion;
}

function getClass(o) { //判断数据类型
    return Object.prototype.toString.call(o).slice(8, -1);
}

function deepCopy(obj) {
    var result, oClass = getClass(obj);

    if (oClass == "Object") result = {}; //判断传入的如果是对象，继续遍历
    else if (oClass == "Array") result = []; //判断传入的如果是数组，继续遍历
    else return obj; //如果是基本数据类型就直接返回

    for (var i in obj) {
        var copy = obj[i];

        if (getClass(copy) == "Object") result[i] = deepCopy(copy); //递归方法 ，如果对象继续变量obj[i],下一级还是对象，就obj[i][i]
        else if (getClass(copy) == "Array") result[i] = deepCopy(copy); //递归方法 ，如果对象继续数组obj[i],下一级还是数组，就obj[i][i]
        else result[i] = copy; //基本数据类型则赋值给属性
    }

    return result;
}
(function (window, mars3d) {
    //创建widget类，需要继承BaseWidget
    class MyWidget extends mars3d.widget.BaseWidget {
@@ -10,9 +43,9 @@
                windowOptions: {
                    width: 450,
                    position: {
                        top: 150,
                        top: 140,
                        left: 5,
                        bottom: 100
                        bottom: 80
                    },
                },
            }
@@ -35,6 +68,109 @@
            this.map.flyToPoint(Cesium.Cartesian3.fromDegrees(lon, lat, 0.2));
        }

        HighlightMulti(layerid, qindex, selectedItem) {
            mars3d.global_variables.tmpHighlightGraphicLayer.clear(true);

            if (layerid == 1001 || layerid == 1002 || layerid == 1003 || layerid == 1004) {
                selectedItem.forEach(element => {
                    this.addPointToMap(layerid, qindex, element);
                });

            } else if (layerid == 1005 || layerid == 100500) {
                selectedItem.forEach(element => {
                    var path = element.shape;
                    if (path.substring(0, 1) == "M") {
                        var paths = (path.substring(17, path.length - 2)).split("),(");
                        paths.forEach(element_path => {
                            var positions = getPositionFromLonLat(element_path)
                            var tmpAttr = deepCopy(element);
                            delete tmpAttr['shape'];
                            this.addPathToMap(layerid, qindex, positions, tmpAttr);
                        });
                    } else {
                        var positions = getPositionFromLonLat(path.substring(11, path.length - 1))
                        var tmpAttr = deepCopy(element);
                        delete tmpAttr['shape'];
                        this.addPathToMap(layerid, qindex, positions, tmpAttr);
                    }
                });
            }else if (layerid == 1006) {
                selectedItem.forEach(element => {
                    var path = element.shape;
                    if(path == null && path == "null" && path == undefined){
                        return;
                    }
                    if (path.substring(0, 1) == "M") {
                        var paths = (path.substring(15, path.length - 3)).split(")),((");
                        paths.forEach(element_path => {
                            var positions = getPositionFromLonLat(element_path)
                            var tmpAttr = deepCopy(element);
                            delete tmpAttr['shape'];
                            this.addPolygonToMap(layerid, qindex, positions, tmpAttr);
                        });
                    } else {
                        var positions = getPositionFromLonLat(path.substring(9, path.length - 2));
                        var tmpAttr = deepCopy(element);
                        delete tmpAttr['shape'];
                        this.addPolygonToMap(layerid, qindex, positions, tmpAttr);
                    } 
                });

            }
        }
        addPolygonToMap(layerid, qindex, positions, attr) {
            var primitive = new mars3d.graphic.PolygonEntity({
                positions: positions,
                style: {
                    height: 50,
                    diffHeight: 200,
                    materialType: mars3d.MaterialType.PolyGradient,
                    color: this.winPage.getLayerPointColorByQindexandValue(layerid, qindex, attr[qindex]),
                    alphaPower: 1.5,
                    //高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
                    highlight: {
                        color: "#ff0000",
                    },
                },
                attr: attr
            });
            mars3d.global_variables.tmpHighlightGraphicLayer.addGraphic(primitive);
        }

        addPointToMap(layerid, qindex, attr) {
            //立体围墙扩散效果,圆状
            var circleDiffuseWallGlow = new mars3d.graphic.DiffuseWall({
                position: Cesium.Cartesian3.fromDegrees(attr["lon"], attr["lat"], 20), //圆中心点
                style: {
                    diffHeight: qindex == "co" ? 10 * attr[qindex] :  attr[qindex], //高度
                    radius: 200, //半径
                    color: this.winPage.getLayerPointColorByQindexandValue(layerid, qindex, attr[qindex]),
                    speed: 10, //速度
                },
                attr: attr
            });
            mars3d.global_variables.tmpHighlightGraphicLayer.addGraphic(circleDiffuseWallGlow);
        }

        addPathToMap(layerid, qindex, positions, attr) {
            var road = new mars3d.graphic.WallPrimitive({
                positions: positions,
                style: {
                    closure: true,
                    diffHeight: qindex == "co" ? 10 * attr[qindex] :  attr[qindex], //高度
                    material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
                        //动画线材质
                        image: "img/textures/fence.png",
                        axisY: true,
                        color: this.winPage.getLayerPointColorByQindexandValue(layerid, qindex, attr[qindex]),
                        speed: 10, //速度，建议取值范围1-100
                    }),
                },
                attr: attr
            });
            mars3d.global_variables.tmpHighlightGraphicLayer.addGraphic(road);
        }

        showDetailedWindow(params) {
            if (mars3d.widget.isActivate("widgetsTS/widget_detail/widget.js")) {
                var detailWiget = mars3d.widget.getClass("widgetsTS/widget_detail/widget.js");