Merge branch 'master' of http://www.shsening.com:10000/r/template/shanghai

wangzhibo

2021-11-07 2f53d85b5f00ad1080828a37a1cea8bf38b0c89e

Merge branch 'master' of http://www.shsening.com:10000/r/template/shanghai

 config/widget.json

@@ -70,6 +70,10 @@
      "uri": "widgetsTS/widget_summary/widget.js"
    },
    {
      "name": "分类查询",
      "uri": "widgetsTS/widget_search/widget.js"
    },
    {
      "name": "监控详情",
      "uri": "widgetsTS/widget_detail/widget.js"
    },

 js/function.js

@@ -124,6 +124,7 @@

  refreshSingleWidget("widgetsTS/weather/widget.js", {});
  refreshSingleWidget("widgetsTS/widget_summary/widget.js", {});
  refreshSingleWidget("widgetsTS/widget_search/widget.js", {});

}


 widgetsTS/logoAndMenu/view.html

@@ -2,11 +2,11 @@
    <div class="logoImg"><img class="logo1 animated bounceInDown" src="./img/logo.png"> <img
            class="logo2 animated lightSpeedIn" src="./img/logoText.png"></div>
    <div class="logoMenu">
        <div class="menu1 widget-btn" title="实时监控" onclick="javascript:activateWidget('widgetsTS/widget_summary/widget.js')">
        <div class="menu1 widget-btn" title="监控总览" onclick="javascript:activateWidget('widgetsTS/widget_summary/widget.js')">
            <span></span>
            <div class="menuMask"></div>
        </div>
        <div class="menu2 widget-btn" title="监控分析" onclick="javascript:$('#menu2Child').toggle()"><span></span>
        <div class="menu2 widget-btn" title="监控分析" onclick="javascript:activateWidget('widgetsTS/widget_search/widget.js')"><span></span>
            <div class="menuMask"></div>
        </div>
        <div class="menu3" title="&#x8BE6;&#x7EC6;&#x89C4;&#x5212;&#x56FE;"><span></span>
@@ -16,14 +16,14 @@
            <div class="menuMask"></div>
        </div>

        <ul id="menu2Child" class="menu4-ul" style="left:120px;right:auto;display:none;">
        <!-- <ul id="menu2Child" class="menu4-ul" style="left:120px;right:auto;display:none;">
            <li id="menu-step-3" onclick="javascript:activateWidget('widgets/_example_2win/widget.js');"><i
                    class="fa fa-location-arrow"></i>示例两个窗口</li>
            <li id="menu-step-3" onclick="showMapLayer(401085)"><i
                    class="fa fa-location-arrow"></i>&#x9053;&#x8DEF;&#x89C4;&#x5212;&#x56FE;</li>
            <li id="menu-step-3" onclick="showMapLayer(401086)"><i
                    class="fa fa-location-arrow"></i>&#x5EFA;&#x7B51;&#x7269;&#x89C4;&#x5212;</li>
        </ul>
        </ul> -->

        <ul id="menu4Child" class="menu4-ul">
            <li class="widget-btn"

 widgetsTS/widget_search/img/count1.png

 widgetsTS/widget_search/img/count2.png

 widgetsTS/widget_search/img/count3.png

 widgetsTS/widget_search/img/count4.png

 widgetsTS/widget_search/img/count5.png

 widgetsTS/widget_search/img/count6.png

 widgetsTS/widget_search/view.css

New file
@@ -0,0 +1,168 @@
#top10Div {
    width: 100%;
    height: 50%;
    /* background-color: hotpink; */
    /* margin-bottom: 80px; */
    /* margin-top: 50px; */
}

#top10Div>table {
    width: 100%;
    height: 50%;
    background-color: rgba(0, 0, 0, 0);
    /* border-collapse:collapse; */
    /* color: aqua; */
    /* font: italic 400 16px "宋体"; */
    /* border-radius: 10px; */
}


.no_bgc_table{
    width: 100%;
    height: 50%;
    padding: 2px;
    background-color: rgba(0, 0, 0, 0);
    color:rgba(255,255,255,.7);
}

.no_bgc_table_head{
    background-color: rgba(0, 0, 0, 0);
    color:rgba(255,255,255,.7);
}
.top_10_table{
    border: none;
}
.top_10_table tr {
    border-bottom: 1px solid rgba(77,255,255,.5);
}


.cnt_div{
    color: #fff;
    background-color: rgba(0, 48, 64, .6);
}
.color_white{
    color: #fff;
}

.cnt_left_div{
    width: 50%;
    float: left;
}
.cnt_right_div{
    width: 50%;
    float: right;
}    
.padding_2_p{
    padding: 5px;
}
.padding_right_2_p{
    padding: 2%;
}

.my_sep{
    width: 96%;
    /* text-align: center; */
    height: 2px;
    margin-left: 2%;
}

.select_tr{
    background: rgba(255,87,34,.5) !important;
}
.over_tr{
    background: rgba(255,87,34,.8) !important;
}

.select_btn{
    color: #FF5722;
}




.searchDiv{
    width: 300px;
    height: 30px;
    display: flex;
    padding-left: 5px;
    margin-left: 5px;
    padding-top: 5px;
    /* background-color: aquamarine; */
}

.input_keyword{
    width: 245px;
    outline-style: none ;
    border: 1px solid #ccc; 
    border-radius: 3px;
    color: #fff;
    background-color: rgba(0, 48, 64, .6);
}

.btn {
    margin-left: 5px;
    background-color: #63aa65; /* Green */
    border: 1px solid rgb(98, 177, 98);
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}

.btn:hover {
    background-color: #3e8e41;
}

.table_Info{
    background-color: rgba(0, 48, 64, .5);
    border: 0 none;
}
.table_Info th,
.am-u-sm-12 td
{
    border: 0 none;
}

.am-cf{
    float: left;
    width: 150px;
    color: #fff;
    position: absolute;
    bottom: 5px;
}

.pageDiv{
    float: right;
    width: 250px;
    right: 1px;
    bottom: 0px;
    position:absolute;
}

ul.am-pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.am-pagination li {display: inline;}

ul.am-pagination li a {
    border-radius: 5px;
    color: #fff;
    float: left;
    padding: 4px 8px;
    text-decoration: none;
}

.pageDiv .am-pagination .am-active a{
    background-color: #4CAF50;
    color: white;
}

ul.am-pagination li a:hover:not(.active) {background-color: #ddd;}



 widgetsTS/widget_search/view.html

New file
@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html class="no-js css-menubar" lang="zh-cn">

<head>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link href="./view.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../lib/jquery/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui.js"></script>
    <script src="../../lib/hao/haoutil.js"></script>
    <script type="text/javascript" src="../../js/changable_params.js"></script>
    <script type="text/javascript" src="../../js/function_1001.js"></script>
    

</head>

<body cl>
    <div class="layui-row cnt_div">
        <div class="layui-row padding_2_p">
            <div class="cnt_left_div">
                <a id="href1" class="color_white cnt_btn" href="#">
                    <img src="img/count1.png" class="layui-nav-img">
                    <span class="layui-badge" id="count1">0</span>
                    <span class="padding_right_2_p" id="countName1">国控点</span>
                </a>
                <input class="codeInput" type="hidden" id="countCode1">
            </div>
            <div class="cnt_right_div">
                <a id="href2" class="color_white cnt_btn" href="#">
                    <img src="img/count2.png" class="layui-nav-img">
                    <span class="layui-badge" id="count2">0</span>
                    <span class="padding_right_2_p" id="countName2">监测点</span>
                </a>
                <input class="codeInput" type="hidden" id="countCode2">
            </div>
        </div>
        <div class="layui-row padding_2_p">
            <div class="cnt_left_div">
                <a id="href3" class="color_white cnt_btn" href="#">
                    <img src="img/count3.png" class="layui-nav-img">
                    <span class="layui-badge" id="count3">0</span>
                    <span class="padding_right_2_p" id="countName3">微站</span>
                </a>
                <input class="codeInput" type="hidden" id="countCode3">
            </div>
            <div class="cnt_right_div">
                <a id="href4" class="color_white cnt_btn" href="#">
                    <img src="img/count4.png" class="layui-nav-img">
                    <span class="layui-badge" id="count4">0</span>
                    <span class="padding_right_2_p" id="countName4">移动监测站</span>
                </a>
                <input class="codeInput" type="hidden" id="countCode4">
            </div>
        </div>
        <div class="layui-row padding_2_p">
            <div class="cnt_left_div">
                <a id="href5" class="color_white cnt_btn" href="#">
                    <img src="img/count5.png" class="layui-nav-img">
                    <span class="layui-badge" id="count5">0</span>
                    <span class="padding_right_2_p" id="countName5">区域</span>
                </a>
                <input class="codeInput" type="hidden" id="countCode5">
            </div>
            <div class="cnt_right_div cnt_btn">
                <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>
                </a>
                <input class="codeInput" type="hidden" id="countCode6">
            </div>
        </div>
    </div>
    <div id="searchDiv" class="searchDiv">
        <span style="width: 80px; color: #fff; padding-top: 5px;">关键字：</span>
        <input type="text" id="search" class="input_keyword" placeholder="请输入关键字">
        <!-- <button id="btn" class="btn">查询</button> -->
        <button type="button" id="btn" class="btn btn-primary" style="width: 50px;"><span
            id="btn_text">查询</span></button>
    </div>  
    <hr class="layui-border-blue my_sep">
    <div class="layui-row">
        <span class="layui-breadcrumb" lay-separator="|">
            <a href="#"></a>
            <a href="#" style="color: white!important;">查询信息</a>
            <a href="#"></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">
            <thead>
                <tr style="background-color: rgba(0, 0, 0, 0); color: #FF5722;">
                    <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>
                </tr>
            </thead>
            <tbody class="am-u-sm-12" id="listTag">
            </tbody>
        </table>
    </form>
        <div id="pageID">           
        </div>
        <div class="pageDiv">
            <ul id="page"></ul>
        </div>
    </div>
    <script type="text/javascript" src="./view.js"></script>
</body>
</html>

 widgetsTS/widget_search/view.js

New file
@@ -0,0 +1,197 @@
var current_selected_monitor_type;
var current_selected_monitor_name;
var current_selected_monitor_keyword;
var current_selected_monitor_qindex = "pm25";


//对应widget.js中MyWidget实例化后的对象
var thisWidget

//当前页面业务
function initWidgetView(_thisWidget) {
    thisWidget = _thisWidget

    loadCountByUserid();

    $(".cnt_div a").on("click", function () {
        $(".cnt_div a").removeClass("select_btn"); 
        $(this).addClass("select_btn");
        current_selected_monitor_type = $(this).attr("_code");
        current_selected_monitor_name = $(this).attr("_name");        
    });  
    //开始查询数据
    $("#btn").click(function () {
        current_selected_monitor_keyword = $('#search').val();
        reloadData(1);
    });
}

//加载count
function loadCountByUserid() {
    var backend_url = thisWidget.nodejs_url_predix + "dataapi/Bdata?bid=get_all_count_by_id&userid=" + thisWidget.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("_code", cntObj.code);
                    $("#href" + j).attr("_name", cntObj.name);
                }
            }
        },
        error: function (request, textStatus) {
        }
    });

}

function reloadData(page){
    $("#listTag").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({
          type:"GET",
          url:backend_url,
          dataType:"json",
          success:function(data){
            if(current_selected_monitor_keyword == null){
                haoutil.msg("请输入关键字！！！")
                return;
            }
            if(data.data.result == 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 content1 = '<div class="am-cf">' +
                '共 '+newsTotalNum+' 条记录 / '+pageNum+'页' +
                '</div>';
            var content2 = '<div class="pageDiv">' + 
            '<ul class="am-pagination">';
            // 判断前面是否还有页面
            if(page == 1){
                content2 += '<li class="am-disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >«</a></li>';
            }else{
                content2 += '<li><a href="javascript:reloadData('+(page-1)+')" rel="external nofollow" >«</a></li>';
            }
            if (pageNum <= 3 ) {//总页数小于五页，则加载所有页                
                for (var i=1; i <= pageNum; i++) {
                    if (i == page) {
                        content2 += '<li class="am-active"><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                    }else{
                        content2 += '<li><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                    }
                };
                $('#page').append(content2);
                // return;
            }else if (pageNum > 3) {//总页数大于五页，则加载五页
                if (page < 3) {//当前页小于3，加载1-3页
                    for (var i=1; i <= 3; i++) {
                        if (i == page) {
                            content2 += '<li class="am-active"><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';

                        }else{
                            content2 += '<li><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                        }
                    };
                    if (page <= pageNum-2) {//最后一页追加“...”代表省略的页
                        content2 += "<li><a>...</a></li>";
                    }
                    $('#page').append(content2);
                    // return;
                }else if (page >= 3) {//当前页大于3页
                    for (var i=1; i <= 2; i++) {//1,2页码始终显示
                        content2 += '<li><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                    }
                    content2 += "<li><a>...</a></li>";//2页码后面用...代替部分未显示的页码
                    if (page+1 == pageNum) {//当前页+1等于总页码
                        for(i = page-1; i <= pageNum; i++){//“...”后面跟三个页码当前页居中显示
                            if (i == page) {
                                content2 += '<li class="am-active"><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';

                            }else{
                                content2 += '<li><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                            }
                        }
                    }else if (page == pageNum) {//当前页数等于总页数则是最后一页页码显示在最后
                        for(var i = page-2; i <= pageNum; i++){//...后面跟三个页码当前页居中显示
                            if (i == page) {
                                content2 += '<li class="am-active"><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';

                            }else{
                                content2 += '<li><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                            }
                        }
                    }else{//当前页小于总页数，则最后一页后面跟...
                        for(var i = page-1; i <= page+1; i++){//dqPage+1页后面...
                            if (i == page) {
                                content2 += '<li class="am-active"><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';

                            }else{
                                content2 += '<li><a href="javascript:reloadData('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                            }
                        }
                        content2 += "<li><a>...</a></li>";
                    }
                    $('#page').append(content2);
                    // return;
                }
            }
            // 判断后面是否还有页面
            if(page == pageNum){
                content2 += '<li class="am-disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >»</a></li>';
            }else{
                content2 += '<li><a href="javascript:reloadData('+(page+1)+')" rel="external nofollow" >»</a></li>';
            }
            content2 += '</ul>' +
                  '</div>';
            $("#pageID").empty();
            $("#pageID").append(content1);
            $("#page").empty();
            $("#page").append(content2);
          }
        });
      }

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");
    $(obj).addClass("select_tr");
    var siteId = $(obj).attr("_siteid");
    var lon = $(obj).attr("_lon");
    var lat = $(obj).attr("_lat");

    if (lon && lon != 'undefined') {
        thisWidget.locateAndHighlight(lon, lat);
    }
    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);
}

 widgetsTS/widget_search/widget.js

New file
@@ -0,0 +1,71 @@
'use script' //开发环境建议开启严格模式
    ;
(function (window, mars3d) {
    //创建widget类，需要继承BaseWidget
    class MyWidget extends mars3d.widget.BaseWidget {
        get view() {
            return {
                type: 'window',
                url: 'view.html',
                windowOptions: {
                    width: 450,
                    position: {
                        top: 150,
                        left: 5,
                        bottom: 100
                    },
                },
            }
        }
        //初始化[仅执行1次]
        create() {
            this.nodejs_url_predix = mars3d.global_variables.nodejs_url_predix;
            this.userid = mars3d.global_variables.userid;
            this.datatype = mars3d.global_variables.queryDataType;
            this.datatime = mars3d.global_variables.queryDataTStart;
        }

        reloadData(params) {
            this.datatype = mars3d.global_variables.queryDataType;
            this.datatime = mars3d.global_variables.queryDataTStart;
            this.winPage.reloadData();
        }

        locateAndHighlight(lon, lat) {
            this.map.flyToPoint(Cesium.Cartesian3.fromDegrees(lon, lat, 0.2));
        }

        showDetailedWindow(params) {
            if (mars3d.widget.isActivate("widgetsTS/widget_detail/widget.js")) {
                var detailWiget = mars3d.widget.getClass("widgetsTS/widget_detail/widget.js");
                detailWiget.reloadData(params);
            } else {
                mars3d.widget.activate({
                    uri: "widgetsTS/widget_detail/widget.js",
                    disableOther: false,
                    params: params
                });
            }
        }

        //每个窗口创建完成后调用
        winCreateOK(opt, result) {
            this.winPage = result;
            // this.winPage.reloadData();

        }

        //打开激活
        activate() {

        }
        //关闭释放
        disable() { }

    }

    //注册到widget管理器中。
    mars3d.widget.bindClass(MyWidget)

    //每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
})(window, mars3d)