add over all page

wangzhibo

2021-09-30 e2d8ba5cfc8544c480f2f5bbeff28927ccc22195

add over all page

 config/widget.json

@@ -66,6 +66,10 @@
  ],
  "widgets": [
    {
      "name": "监控总览",
      "uri": "widgetsTS/widget_summary/widget.js"
    },
    {
      "name": "模板-iframe弹窗",
      "uri": "widgets/_example/widget.js",
      "windowOptions": {

 js/function.js

@@ -107,6 +107,7 @@
function refreshWidgets() {

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

}

@@ -114,13 +115,7 @@

  if (mars3d.widget.isActivate(widget_path)) {
    var tempWiget = mars3d.widget.getClass(widget_path);
    tempWiget.reloadData();
  } else {
    var tempWiget =mars3d.widget.activate({
      uri: widget_path,
      params: params,
    });
    tempWiget.reloadData();
    tempWiget.reloadData(params);
  }

}
@@ -142,8 +137,6 @@
}

function showDetail(layerid, itemCode) {
  haoutil.msg('单击了：' + layerid + ',' + itemCode);

  if (mars3d.widget.isActivate("widgetsTS/qyDetailsView/widget.js")) {

    var detailWiget = mars3d.widget.getClass("widgetsTS/qyDetailsView/widget.js");

 js/function_1001.js

@@ -97,15 +97,15 @@
      "<br />数据时间：" +
      item["datatime"] +
      "<br />PM2.5:" +
      item["PM25"] + "ug/m3" +
      item["pm25"] + "ug/m3" +
      "<br />PM10:" +
      item["PM10"] + "ug/m3" +
      item["pm10"] + "ug/m3" +
      "<br />NO2:" +
      item["NO2"] + "ug/m3" +
      item["no2"] + "ug/m3" +
      "<br />CO:" +
      item["CO"] + "ug/m3" +
      item["co"] + "ug/m3" +
      "<br />SO2:" +
      item["SO2"] + "ug/m3" +
      item["so2"] + "ug/m3" +
      "<br /><br /><p><a href='#' onclick='javascript:showDetail(1001,\"" + item["code"] + "\")' >详细信息</a><a href='#' onclick='javascript:addGraphictoHighlightLayer()' >保持高亮显示</a></p>";
  } else if (layerid == 1002) {
    return "站点编号：" +
@@ -213,7 +213,7 @@
    var item = items[i];
    var jd = item.lon;
    var wd = item.lat;
    var clr = getLayerPointColorByQindexandValue(tmplayer.options.id, tmplayer.options.style_selected, item[(tmplayer.options.style_selected).toUpperCase()]);
    var clr = getLayerPointColorByQindexandValue(tmplayer.options.id, tmplayer.options.style_selected, item[tmplayer.options.style_selected]);
    var graphic = new mars3d.graphic.DivLightPoint({
      position: Cesium.Cartesian3.fromDegrees(jd, wd),
      style: {

 widgetsTS/logoAndMenu/view.html

@@ -2,7 +2,7 @@
    <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_Overall/widget.js')">
        <div class="menu1 widget-btn" title="实时监控" onclick="javascript:activateWidget('widgetsTS/widget_summary/widget.js')">
            <span></span>
            <div class="menuMask"></div>
        </div>

 widgetsTS/weather/widget.js

@@ -28,7 +28,7 @@
      this.reloadData();
    }

    reloadData() {
    reloadData(params) {
      $.getJSON(mars3d.global_variables.nodejs_url_predix + "dataapi/Bdata?bid=get_weather_" + mars3d.global_variables.queryDataType + "&datatime=" + mars3d.global_variables.queryDataTStart + "&siteid=" + mars3d.global_variables.weathercitycode, (result) => {
        if (result.data.result.length > 0 ){
          var current_weather = result.data.result[0];

 widgetsTS/widget_summary/img/count1.png

 widgetsTS/widget_summary/img/count2.png

 widgetsTS/widget_summary/img/count3.png

 widgetsTS/widget_summary/img/count4.png

 widgetsTS/widget_summary/img/count5.png

 widgetsTS/widget_summary/img/count6.png

 widgetsTS/widget_summary/view.css

New file
@@ -0,0 +1,75 @@
#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 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;
}

 widgetsTS/widget_summary/view.html

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

<head>
    <link rel="stylesheet" href="../../lib/layui/css/layui.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>
    <link href="./view.css" rel="stylesheet" type="text/css" />
    <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>

    <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;">监测Top10</a>
            <a href="#"></a>
        </span>
    </div>

    <div class="layui-row" style="padding-left:1%;padding-right:1%;overflow:auto;height:350px;">
        <table id="" class="layui-table no_bgc_table top_10_table" 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;">编号</th>
                    <th style="font-weight: bold;">名称</th>
                    <th style="font-weight: bold;"><select id="qindex_selection"></select></th>
                </tr>
            </thead>
            <tbody id="top10Tb" style="cursor: pointer;">

            </tbody>
        </table>
    </div>

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

</body>
</html>

 widgetsTS/widget_summary/view.js

New file
@@ -0,0 +1,137 @@
var current_selected_monitor_type = 1001;
var current_selected_monitor_name = "国控点";
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");
        changeQindexSelection();
        reloadData();
    });


}

//加载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;
            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) {

        }
    });

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

}
function changeQindexSelection() {

    $("#qindex_selection").empty();
    var options = [];
    if (current_selected_monitor_type == 1001) {
        options = Object.keys(qindex_range_list_1001);
    } 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);
    } else {
        options = Object.keys(qindex_range_list_1004_and_other);
    }

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

}

function reloadData() {
    var backend_url = thisWidget.nodejs_url_predix + "dataapi/Bdata?bid=get_" + current_selected_monitor_type + "_list&datatype=" + thisWidget.datatype + "&datatime=" + thisWidget.datatime + "&qindex=" + current_selected_monitor_qindex + "&pageno=1&pagesize=10";
    //加入cntId
    $.ajax({
        type: 'get',
        dataType: 'json',
        //crossDomain: true,
        data: {},
        async: true,//同步
        url: backend_url,
        success: function (data) {
            var tableData = data.data.result;
            //console.log(tableData);
            $("#top10Tb").empty();
            if (tableData != null) {
                for (var i = 0; i < tableData.length; i++) {
                    var j = i + 1;
                    var topObj = tableData[i];
                    var _tr = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat + "' onclick='locateAndShowDetail(this)' onmouseover='over(this)' onmouseout='out(this)' ><td>" + j + "</td><td>" + topObj.code + "</td><td>" + topObj.name + "</td><td>" + topObj[current_selected_monitor_qindex] + "</td></tr>"
                    $("#top10Tb").append(_tr);

                }
            }

        },
        error: function (request, textStatus) {

        }
    });
}


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

function out(obj) {

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

function locateAndShowDetail(obj) {
    $('#top10Tb tr').removeClass("select_tr");
    $(obj).addClass("select_tr");
    var siteId = $(obj).attr("_siteid");
    var lon = $(obj).attr("_lon");
    var lat = $(obj).attr("_lat");

    thisWidget.locateAndHighlight(lon,lat);

    if (mars3d.widget.isActivate("widgetsTS/widget_detail/widget.js")) {
        var detailWiget = mars3d.widget.getClass("widgetsTS/widget_detail/widget.js");
        detailWiget.reloadData({"layer":current_selected_monitor_type,"siteid":siteId});
      } else {
          mars3d.widget.activate({
          uri: "widgetsTS/widget_detail/widget.js",
          params: {"layer":current_selected_monitor_type,"siteid":siteId}
        });
    }
}

 widgetsTS/widget_summary/widget.js

New file
@@ -0,0 +1,59 @@
'use script' //开发环境建议开启严格模式
    ;
(function (window, mars3d) {
    //创建widget类，需要继承BaseWidget
    class MyWidget extends mars3d.widget.BaseWidget {
        //弹窗配置，2个弹窗的情形
        get view() {
            return {
                type: 'window',
                url: 'view.html',
                windowOptions: {
                    width: 380,
                    position: {
                        top: 180,
                        left: 5,
                        bottom:30
                    },
                },
            }
        }
        //初始化[仅执行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.setCameraView({ y: lat, x: lon, z: 10000, heading: 5.5, pitch: -51.9, roll: 0 },{ duration: 5 });
        }



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

        //打开激活
        activate() {

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

    }

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

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