update：移动到设备marker上实时显示因子数据

ZhuDongming

2019-11-20 f32e22e52376cabe49e8c7d1f52adb4b1aebffd3

update：移动到设备marker上实时显示因子数据

 src/main/java/com/moral/controller/ScreenController.java

@@ -544,6 +544,24 @@
        }

    }



    @GetMapping("/getSensorsMap")

    public ResultBean getSensorsMapOnly(String mac){

        Map<String, String> paramMap = sensorService.getSensorsMapOnly(mac);

        ResultBean<Map<String, String>> resultBean = new ResultBean();

        resultBean.setData(paramMap);

        resultBean.setCode(ResultBean.SUCCESS);

        return resultBean;

    }



    @GetMapping("/getSensorsUnitMap")

    public ResultBean getSensorsUnitMap(String mac){

        Map<String, String> paramMap = sensorService.getSensorsUnitMap(mac);

        ResultBean<Map<String, String>> resultBean = new ResultBean();

        resultBean.setData(paramMap);

        resultBean.setCode(ResultBean.SUCCESS);

        return resultBean;

    }



    @RequestMapping(value = "/get-monitorpoints", method = RequestMethod.GET)

    @ResponseBody

    public ResultBean getMonitorpointList(@RequestParam("orgId") String orgId, MapBounds mapBounds,


 src/main/java/com/moral/mapper/SensorMapper.java

@@ -27,4 +27,6 @@
    List<Map<String,Object>> getSensorByMonitorPointId(@Param("monitor_point_id")String monitor_point_id);

    List<Sensor> getSensorsByMac(Map<String, Object> parameters);

    List<Sensor> getSensorsByMacOnly(@Param("mac") String mac);
}

 src/main/java/com/moral/service/SensorService.java

@@ -33,4 +33,8 @@
    List<Map<String,Object>> getSensorByMonitorPointId(String monitor_point_id);

    Map<String, String> getSensorsMap(Map<String, Object> parameters) throws Exception;

    Map<String, String> getSensorsMapOnly(String mac);

    Map<String, String> getSensorsUnitMap(String mac);
}

 src/main/java/com/moral/service/impl/SensorServiceImpl.java

@@ -110,4 +110,24 @@
        }
        return sensorMap;
    }

    @Override
    public Map<String, String> getSensorsMapOnly(String mac) {
        List<Sensor> sensors = sensorMapper.getSensorsByMacOnly(mac);
        Map<String, String> sensorMap = new HashMap<>();
        for (Sensor sensor : sensors) {
            sensorMap.put(sensor.getSensorKey(), sensor.getDescription());
        }
        return sensorMap;
    }

    @Override
    public Map<String, String> getSensorsUnitMap(String mac) {
        List<Sensor> sensors = sensorMapper.getSensorsByMacOnly(mac);
        Map<String, String> sensorMap = new HashMap<>();
        for (Sensor sensor : sensors) {
            sensorMap.put(sensor.getSensorKey(), sensor.getUnit());
        }
        return sensorMap;
    }
}

 src/main/resources/mapper/SensorMapper.xml

@@ -159,4 +159,19 @@
            AND d.mac =    #{mac}
        </if>
    </select>

    <select id="getSensorsByMacOnly" resultMap="BaseResultMap">
        SELECT
        DISTINCT s.*
        FROM
        sensor s,
        device_version_sensor dvs,
        device d
        WHERE
        s.id = dvs.sensor_id
        AND dvs.device_version_id = d.device_version_id
        <if test="mac != null">
            AND d.mac =    #{mac}
        </if>
    </select>
</mapper>

 src/main/webapp/js/moralmap.js

@@ -253,7 +253,7 @@
    }
    moralMap.openInfoWindow = function() {
        moralMap.clearCloseInfoWindow();
        baiduMap.openInfoWindow.apply(baiduMap, arguments);; //开启信息窗口
        baiduMap.openInfoWindow.apply(baiduMap, arguments); //开启信息窗口
    }
    moralMap.closeInfoWindow = function() {
        var timer = setTimeout(function () {
@@ -497,6 +497,7 @@
                });
            }
        }

        return listView;
    }
    moralMap.MoralMarker = function(option) {
@@ -504,6 +505,7 @@
        var _pointObj = new BMap.Point(_option['longitude'], _option['latitude']);
        var _iconObj = _getMapIcon(_option["state"]);
        this._point = _pointObj;

        //获取MapIcon私有方法
        function _getMapIcon(state) {
            state = state == null ? 0 : state;
@@ -514,6 +516,7 @@
                imageSize: new BMap.Size(icon["width"], icon["height"])
            });
        }

        this.constructor.call(this, _pointObj, {
            icon: _iconObj,
            enableMassClear: true
@@ -607,6 +610,7 @@
                adressOutHtml += "</tbody></table></div>";
                return adressOutHtml;
            }

            return new BMap.InfoWindow(getAdressOutHtml(), winOpts);
        })();
        if(moralMarker["infoWindow"] == undefined) {
@@ -646,9 +650,30 @@
        }

    }

    //设备以mac为key储存
    //监控点对象 包装MoralMark对象
    moralMap.Equipment = function(option) {
        var sensorsMap;
        var sensorsUnitMap;
        $.ajax({
            url: "getSensorsMap?mac=" + option['mac'],
            type: "get",
            dataType: "json",
            success: function (data) {
                sensorsMap = data.data;
            }
        });

        $.ajax({
            url: "getSensorsUnitMap?mac=" + option['mac'],
            type: "get",
            dataType: "json",
            success: function (data) {
                sensorsUnitMap = data.data;
            }
        });

        if(deviceStates){
            for(var i in deviceStates){
                var state = deviceStates[i];
@@ -670,12 +695,10 @@
        var moralMarker = new moralMap.MoralMarker(option);
        //        var mark =new BMap.Marker(pointObj,{icon:iconObj});
        //==================infoWindow-start============================

        var infoWindow = (function() {
            //生成信息框
            var winOpts = {
                width: 110, // 信息窗口宽度
                height: 80, // 信息窗口高度
                width: 300, // 信息窗口宽度
                title: getTitleOutHtml(), // 信息窗口标题
                offset: new BMap.Size(-8,-5) //设置信息窗偏移
            }
@@ -686,30 +709,19 @@
                if(title.length > 13) {
                    title = title.slice(0, 13) + "...";
                }
                var titleOutHtml = "";
                titleOutHtml += "<p style='width:210px;font:bold 14px/16px arial,sans-serif;margin:0;color:#cc5522;white-space:nowrap;overflow:hidden'"
                titleOutHtml += "title='" + option["name"] + "'>";
                titleOutHtml += title + "</p>";
                return titleOutHtml;
            }

            function getAdressOutHtml() {
                var address = (option["address"] == null) ? "" : option["address"];
                if(address.length > 18) {
                    address = address.slice(0, 18) + "...";
                }
                var adressOutHtml = "";
                adressOutHtml += "<div onmouseover='moralMap.clearCloseInfoWindow()'";
                adressOutHtml +=    "onmouseout='moralMap.closeInfoWindow()'";
                adressOutHtml    +=" style='font:12px arial,sans-serif;margin-top:12px'><table cellspacing='0' style='overflow:hidden;table-layout:fixed;width:100%;font:12px arial,sans-serif'>";
                adressOutHtml += "<tbody><tr><td style='vertical-align:top;width:38px;white-space:nowrap;word-break:keep-all'>地址：&nbsp;</td><td style='line-height:16px'>";
                adressOutHtml += address + "&nbsp;";
                adressOutHtml += "</td></tr>";
                adressOutHtml += "</tbody></table></div>";
                //$("#searchParam").val(address);
                return adressOutHtml;
                var titleOutHtml = "";
                titleOutHtml += "<p style='width:210px;font:bold 14px/16px arial,sans-serif;margin:0;color:#cc5522;white-space:nowrap;overflow:hidden'"
                titleOutHtml += "title='" + option["name"] + "'>";
                titleOutHtml += title + "</p>";
                titleOutHtml += "<p style='height: 18px;line-height: 18px;font-size: 12px'>地址：&nbsp;" + address + "</p>"
                return titleOutHtml;
            }
            return new BMap.InfoWindow(getAdressOutHtml(), winOpts);

            return new BMap.InfoWindow("", winOpts);
        })();

        /*var infoWindow = (function() {
@@ -820,11 +832,67 @@
            infoWindow.setContent("");
            moralMap.openSearchBox();
        });*/
		
        moralMarker.addEventListener("mouseover", function() {
            var obj = {};
            obj['methodName'] = 'deliverMac';
            obj['mac'] = option['mac'];
            var objStr = JSON.stringify(obj);
            if (!!window['external'] && !!window['external']['callWin']) {
                window['external'].callWin(objStr);
            } else {
                alert(objStr);
            }

            moralMap.showSensors = function (jsonData) {
                var address = (option["address"] == null) ? "" : option["address"];
                if (address.length > 18) {
                    address = address.slice(0, 18) + "...";
                }
                var adressOutHtml = '<div style="min-height:20px;overflow:auto;max-height:400px;font-size: 12px;" onmouseover="moralMap.clearCloseInfoWindow()" onmouseout="moralMap.closeInfoWindow()">';
                var y, m, d, h, mm, s;
                var date = new Date(jsonData['time']);
                y = 1900 + date.getYear();
                m = "0" + (date.getMonth() + 1);
                d = "0" + date.getDate();
                h = "0" + date.getHours();
                mm = "0" + date.getMinutes();
                s = "0" + date.getSeconds();
                date = y + "-" + m.substring(m.length - 2, m.length) + "-" + d.substring(d.length - 2, d.length) + " " + h.substring(h.length - 2, h.length) + ":" + mm.substring(mm.length - 2, mm.length) + ":" + s.substring(s.length - 2, s.length);
                adressOutHtml += '<p style="height: 18px;line-height: 18px">' + "时间：&nbsp;" + date + "&nbsp;</p>";
                for (var prop in jsonData) {
                    if (jsonData.hasOwnProperty(prop) && prop != 'ver' && prop != 'methodName' && prop != 'mac' && prop != 'time') {
                        for (var key in sensorsMap) {
                            if (prop == key) {
                                var sensorsDescription = sensorsMap[key];
                            }
                        }
                        for (var key in sensorsUnitMap) {
                            if (prop == key) {
                                var sensorsUnit = sensorsUnitMap[key];
                            }
                        }
                        adressOutHtml += ('<p style="height: 18px;line-height: 18px">' + sensorsDescription + "：" + jsonData[prop] + sensorsUnit + "</p>");
                    }
                }
                adressOutHtml += "</div>";
                infoWindow.setContent(adressOutHtml);
                infoWindow.redraw();
            }
            /*   if (!$.isEmptyObject(sensorInfo)) {
                   moralMap.openInfoWindow(infoWindow, this._point); //开启信息窗口
               }*/
            moralMap.openInfoWindow(infoWindow, this._point); //开启信息窗口
        });

        moralMarker.addEventListener("mouseout", function() {
            var obj = {};
            obj['methodName'] = 'stopDeliverMac';
            var objStr = JSON.stringify(obj);
            if (!!window['external'] && !!window['external']['callWin']) {
                window['external'].callWin(objStr);
            } else {
                alert(objStr);
            }
            moralMap.closeInfoWindow();
        });

@@ -1024,7 +1092,6 @@
            }
        }
    }


    window.moralMap = moralMap;
})(jQuery, BMap, window);

 src/main/webapp/view/map.jsp

@@ -11,7 +11,8 @@
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rER1sgBIcQxkfNSlm2wmBGZGgEERrooM"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=rER1sgBIcQxkfNSlm2wmBGZGgEERrooM"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/utils.js"></script>
    <script type="text/javascript">
@@ -34,9 +35,11 @@
         font-size: 14px;
         font-family: "微软雅黑";
     }

     .anchorBL {
         display: none;
     }

     .main_body{
         border: 0;
         margin: 0;
@@ -44,11 +47,13 @@
         height: 100%;
         position: relative;
     }

*{
  margin:0;
  padding:0;
  list-style:none;
}

a{
    color: #1900c6;
    text-decoration: none;
@@ -56,10 +61,12 @@
    font-size: 14px;
    font-weight: 300;
}

a:hover {
    text-decoration: underline;
    color: #e60012;
}

#popup_box {
    top: 75px;
    left: 20px;
@@ -125,10 +132,12 @@
    clear: both;
    zoom: 1
}

.list-chart-span {
    cursor: pointer;
    background-color: #4c9bf1
}

.list li {
    padding: 10px 0;
    border-bottom: 1px dotted #eee;
@@ -178,6 +187,7 @@
    /*color: #777 ;*/
    background-color: #738d99 ;
}

            /*
              * 外面盒子样式---自己定义
              */
@@ -190,6 +200,7 @@
                box-sizing: border-box;
                text-align: center;
            }

            /*
             * 页数按钮样式
             */
@@ -238,16 +249,76 @@
                margin: 0 5px;
            }
            
.equ-data-box{width:351px;border:1px solid #dad5d5;background-color:#f6f6f6;padding:12px 0 12px 0;border-radius:3px;margin:10px auto;overflow:hidden;zoom:1;}
.equ-data-box .equ-data-list{width:330px;margin:0 0 0 10px;border-left:1px solid #d0cdcd;border-top:1px solid #d0cdcd;border-bottom:1px solid #d0cdcd;overflow:hidden;zoom:1;}
.equ-data-box .equ-data-list li{background:url(/img/list_li_bg.png) left top repeat-x;width:109px;height:165px;float:left;text-align:center;color:#282828;border-right:1px solid #d0cdcd}
.equ-data-box .equ-data-list li p{height:55px;padding-top:12px;line-height:55px;font-size:18px}
.equ-data-box .equ-data-list li span{height:60px;line-height:50px;display:block;color:#fff;font-size:40px}
.equ-data-box .equ-data-list li em{font-size:14px;line-height:28px;font-style:normal;display:block}
.equ-data-box .equ-data-list li .grade00{background:url(/img/list_num_green.png) left top no-repeat}
.equ-data-box .equ-data-list li .grade01{color:#282828;background:url(/img/list_num_yellow.png) left top no-repeat}
.equ-data-box .equ-data-list li .grade02{background:url(/img/list_num_orange.png) left top no-repeat}
.equ-data-box .equ-data-list li .grade03{background:url(/img/list_num_red.png) left top no-repeat}
    .equ-data-box {
        width: 351px;
        border: 1px solid #dad5d5;
        background-color: #f6f6f6;
        padding: 12px 0 12px 0;
        border-radius: 3px;
        margin: 10px auto;
        overflow: hidden;
        zoom: 1;
    }

    .equ-data-box .equ-data-list {
        width: 330px;
        margin: 0 0 0 10px;
        border-left: 1px solid #d0cdcd;
        border-top: 1px solid #d0cdcd;
        border-bottom: 1px solid #d0cdcd;
        overflow: hidden;
        zoom: 1;
    }

    .equ-data-box .equ-data-list li {
        background: url(/img/list_li_bg.png) left top repeat-x;
        width: 109px;
        height: 165px;
        float: left;
        text-align: center;
        color: #282828;
        border-right: 1px solid #d0cdcd
    }

    .equ-data-box .equ-data-list li p {
        height: 55px;
        padding-top: 12px;
        line-height: 55px;
        font-size: 18px
    }

    .equ-data-box .equ-data-list li span {
        height: 60px;
        line-height: 50px;
        display: block;
        color: #fff;
        font-size: 40px
    }

    .equ-data-box .equ-data-list li em {
        font-size: 14px;
        line-height: 28px;
        font-style: normal;
        display: block
    }

    .equ-data-box .equ-data-list li .grade00 {
        background: url(/img/list_num_green.png) left top no-repeat
    }

    .equ-data-box .equ-data-list li .grade01 {
        color: #282828;
        background: url(/img/list_num_yellow.png) left top no-repeat
    }

    .equ-data-box .equ-data-list li .grade02 {
        background: url(/img/list_num_orange.png) left top no-repeat
    }

    .equ-data-box .equ-data-list li .grade03 {
        background: url(/img/list_num_red.png) left top no-repeat
    }

.tools_box{
    position: absolute;
    height: 120px;
@@ -256,6 +327,7 @@
    top: 20px;
    z-index: 1;
}

 .tools_box .charts_btn {
    position: relative;
    float: right;
@@ -266,6 +338,7 @@
    background:url(/img/charts_btn_bg_1.png) left top no-repeat;
    background-size: 70%;
 }

 .tools_box .charts_btn:hover {
     cursor:pointer;
     background:url(/img/charts_btn_bg_2.png) left top no-repeat;
@@ -280,7 +353,7 @@
        </div>
        <!-- <div class="search_box">
        <button id="searchBtn" type="button">搜索</button>
        <input id="searchParam"/>
        <textarea style="width: 200px;height:200px;" id="searchParam"></textarea>
        </div> -->
      <!-- <div id="popup_box">
            <div id="equ_list" class="listview">
@@ -311,6 +384,7 @@
    //列表对象
     var listView  =moralMap.initListView({id: "#equ_list",pageSize:12});
     window["listView"] = listView;

    //展示设备列表，click事件触发
    function showEqus(obj) {

@@ -321,6 +395,7 @@
        listView.load(url); 
        moralMap.showPopupbox("#popup_box");
    }

    function loadLazy(url,paramMap,callBack,lazyKeyer){
        if(lazyKeyer==undefined){
            lazyKeyer = moralMap.lazyKeyer;
@@ -347,6 +422,7 @@
        },500);

    }

   function loadOverlays(url,callback){
        //从缓存取
        var oldMarkerList = moralMap.getHorizonMarkers();
@@ -367,6 +443,7 @@
            loadLazy(url,paramMap,callback);
        }
    }

    function addOverEquipments(jsonData){
        if(moralMap.layer()=="equipments"){
        var objs = jsonData = null?[]:jsonData;
@@ -399,8 +476,7 @@
                                    }
                                    if(!!window['external']&&!!window['external']['callWin']){
                                        window['external'].callWin(equStr);
                                    }else
                                    if(!!window['external']&&!!window['external']['showMonitorInfo']){
                            } else if (!!window['external'] && !!window['external']['showMonitorInfo']) {
                                        window['external'].showMonitorInfo(equStr);
                                    }else{
                                        alert(equStr);
@@ -412,6 +488,7 @@
        }
        }
    }

  function addOverMpoints(data){
          if(moralMap.layer()=="monitorpoints"){
          var mpoints = data = null?[]:data;
@@ -425,6 +502,7 @@
        }
          }
    }

    //地图load
    moralMap.addEventListener("load", function(type, target) {
            var paramMap = {};
@@ -458,6 +536,7 @@
        }
        return { 'x1': bs.southwestLng, 'y1': bs.southwestLat, 'x2': bs.northeastLng, 'y2': bs.northeastLat };
    }

    /**
     * 显示网格
     */
@@ -507,12 +586,14 @@
        }
        showGrid.polygons = polygons;
    }

    // 点击事件关闭 弹窗列表
    moralMap.addEventListener("click", function(type, target) {
        //moralMap.closePopupbox("#popup_box");
    });
    //地图放大缩小事件时，关闭弹窗
    moralMap.addEventListener('zoomstart', function(type) {});
        moralMap.addEventListener('zoomstart', function (type) {
        });
    //地图放大缩小事件时，关闭弹窗
    moralMap.addEventListener('zoomend', function(type) {
         var endZoom = this.getZoom();
@@ -554,8 +635,7 @@
            var objStr = JSON.stringify(obj);
            if(!!window['external']&&!!window['external']['callWin']){
                window['external'].callWin(objStr);
            }else
            if(!!window['external']&&!!window['external']['showChartInfo']){
                } else if (!!window['external'] && !!window['external']['showChartInfo']) {
                window['external'].showChartInfo("");
            }else{
                alert(objStr);
@@ -566,6 +646,7 @@

})(jQuery);
    var _intervalNum=-1;

    function startRefreshPage(){
         if(_intervalNum==-1){
               _intervalNum = self.setInterval(function(){
@@ -576,10 +657,12 @@
            refreshAllState();
         },5000);
    }

    function stopRefreshPage(){
        window.clearInterval(_intervalNum);
        _intervalNum=-1;
    }

    //刷新页面
    function refreshAllState() {
        var parma={};
@@ -666,14 +749,16 @@
    }
    
    function callJS(jsonData){
        // $("#searchParam").val(jsonData);
        var jsonData = JSON.parse(jsonData);
        var methodName = jsonData.methodName;
        if("JumpBaiduMap" == methodName){
            moralMap.callJS(jsonData);
        } else if ("RefreshState" == methodName) {
            //$("#searchParam").val(JSON.stringify(jsonData));
            var states = jsonData.states;
            moralMap.refreshState(states);
        } else if ("DeliverSensors" == methodName) {
            moralMap.showSensors(jsonData);
        }
    }
</script>