ZhuDongming
2020-06-12 69a3e436bedfc828930e08cbbac7df57f4fd83cb
update去除站点层,更改设备图标为站点图标
2 files added
2 files modified
1939 ■■■■■ changed files
src/main/java/com/moral/controller/ScreenController.java 87 ●●●● patch | view | raw | blame | history
src/main/java/com/moral/service/impl/DeviceServiceImpl.java 25 ●●●● patch | view | raw | blame | history
src/main/webapp/js/newmoralmap.js 1076 ●●●●● patch | view | raw | blame | history
src/main/webapp/view/newmap.jsp 751 ●●●●● patch | view | raw | blame | history
src/main/java/com/moral/controller/ScreenController.java
@@ -9,35 +9,20 @@
import java.text.SimpleDateFormat;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
import java.util.*;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collection;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;
import java.util.Optional;
import java.util.stream.Collectors;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.collections.CollectionUtils;
import org.apache.commons.collections.MapUtils;
import org.apache.commons.net.ftp.FTPClient;
import org.apache.log4j.Logger;
import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.cglib.beans.BeanMap;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.util.ObjectUtils;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import org.xml.sax.InputSource;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
@@ -94,6 +79,29 @@
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiImplicitParams;
import io.swagger.annotations.ApiOperation;
import org.apache.commons.collections.CollectionUtils;
import org.apache.commons.collections.MapUtils;
import org.apache.commons.net.ftp.FTPClient;
import org.apache.log4j.Logger;
import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.cglib.beans.BeanMap;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.util.ObjectUtils;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import org.xml.sax.InputSource;
import static com.moral.common.util.ResourceUtil.getValue;
import static com.moral.common.util.WebUtils.getParametersStartingWith;
@@ -1598,4 +1606,33 @@
        }
        return new ResultBean<List<Map<String, Object>>>(list);
    }
    @RequestMapping(value = "/newMap-page", method = RequestMethod.GET)
    public ModelAndView newMap(ModelAndView model, @RequestParam("areaCode") long code,
                            @RequestParam("accountId") int accountId) {
        Account account = accountService.getAccountById(accountId);
        String regionName = areaService.queryFullNameByCode(code);
        if (account != null && regionName != null) {
            Object sensors = sensorService.queryAll();
            JSONObject params = new JSONObject();
            params.put("regionCode", code);
            params.put("regionName", regionName);
            params.put("accountId", accountId);
            params.put("orgId", account.getOrganizationId());
            params.put("sensors", sensors);
            String paramsJson = params.toJSONString();
            model.addObject("mapParams", paramsJson);
            model.setViewName("newmap");
            return model;
        } else {
            StringBuilder msg = new StringBuilder();
            msg.append(" param[0] areaCode:");
            msg.append(code);
            msg.append(" param[0] accountId:");
            msg.append(accountId);
            log.warn(msg);
            model.setViewName("403");
            return model;
        }
    }
}
src/main/java/com/moral/service/impl/DeviceServiceImpl.java
@@ -1,5 +1,16 @@
package com.moral.service.impl;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;
import javax.annotation.Resource;
import javax.validation.constraints.NotNull;
import com.alibaba.fastjson.TypeReference;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
@@ -29,19 +40,7 @@
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.util.ObjectUtils;
import tk.mybatis.mapper.entity.Example;
import javax.annotation.Resource;
import javax.validation.constraints.NotNull;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;
@Service
public class DeviceServiceImpl implements DeviceService {
@@ -214,7 +213,7 @@
            List<Integer> orgIds = orgMapper.selectLowerOrgIds(orgId);
            params.put("orgIds", orgIds);
            deviceList = deviceMapper.selectByMap(params);
            loadDeviceState(deviceList);
            // loadDeviceState(deviceList);
        }
        return deviceList;
    }
src/main/webapp/js/newmoralmap.js
New file
@@ -0,0 +1,1076 @@
(function ($, BMap, window) {
    var sensorNames = {
        "e1": ["PM2.5", "ug/m3"],
        "e2": ["PM10", "ug/m3"],
        "e3": ["颗粒物0.3", "PCS/0.1L"],
        "e4": ["颗粒物2.5", "PCS/0.1L"],
        "e5": ["甲醛", "mg/m3"],
        "e6": ["湿度", "%"],
        "e7": ["温度", "℃"],
        "e8": ["氧气", "%"],
        "e9": ["氯气", "mg/m3"],
        "e10": ["一氧化碳", "mg/m3"],
        "e11": ["二氧化硫", "ug/m3"],
        "e12": ["光照", "Lux"],
        "e13": ["噪音", "dB"],
        "e14": ["氨气", "mg/m3"],
        "e15": ["臭氧", "ug/m3"],
        "e16": ["二氧化氮", "ug/m3"],
        "e17": ["挥发有机气体", "PPB"],
        "e18": ["风速", "m/s"],
        "e19": ["二氧化碳", "mg/m3"]
    }
    var showSensorKeys = ["e1", "e2", "e10", "e11", "e15", "e16"];
    var moralMap = {};
    var baiduMap = null;
    /*
     * 百度地图初始化
     */
    moralMap.mapInit = function () {
        var defaultParam = {
            minZoom: 12,
            maxZoom: 20,
            enableMapClick: false
        };
        if (!!arguments[1]) {
            $.extend(defaultParam, arguments[1]);
        }
        baiduMap = new BMap.Map("mapCanvas", defaultParam); // 创建Map实例,设置地图允许的最小/大级别
        var map = baiduMap;
        var mapStyle = {
            features: ["road", "building", "water", "land"], //隐藏地图上的poi
            style: "normal" //设置地图风格为高端黑
        }
        map.setMapStyle(mapStyle);
        var showZoom = !!arguments[2]
        && arguments[2] <= defaultParam.maxZoom
        && arguments[2] >= defaultParam.minZoom ? arguments[2] : 12;
        var address = arguments[0];
        var regoinNames = address.split(" ");
        var cityName = regoinNames.length > 1 ? regoinNames[1] : regoinNames[0];
        if (cityName == "市辖区" || cityName == "县" || cityName == "省直辖县级行政区划") {
            cityName = regoinNames[2];
        }
        map.setCurrentCity(cityName);
        // 将地址解析结果显示在地图上,并调整地图视野
        // 创建地址解析器实例
        var myGeo = new BMap.Geocoder();
        myGeo.getPoint(address, function (point) {
            if (point) {
                if ("大同市" == cityName) {
                    var longitude = 113.30640743;
                    var latitude = 40.08256467;
                    point = new BMap.Point(longitude, latitude);
                } else if ("阿拉善盟" == cityName) {
                    var longitude = 105.733648;
                    var latitude = 38.858951;
                    point = new BMap.Point(longitude, latitude);
                } else if ("乌兰察布市" == cityName) {
                    var longitude = 113.136019;
                    var latitude = 41.001403;
                    point = new BMap.Point(longitude, latitude);
                } else if ("宜宾市" == cityName) {
                    var longitude = 104.647678;
                    var latitude = 28.758767;
                    point = new BMap.Point(longitude, latitude);
                } else if ("那曲地区" == cityName) {
                    var longitude = 92.056768;
                    var latitude = 31.482684;
                    point = new BMap.Point(longitude, latitude);
                } else if ("永川区" == cityName) {
                    var longitude = 105.930055;
                    var latitude = 29.363305;
                    point = new BMap.Point(longitude, latitude);
                } else if ("大足区" == cityName) {
                    var longitude = 105.727253;
                    var latitude = 29.714369;
                    point = new BMap.Point(longitude, latitude);
                } else if ("铜梁区" == cityName) {
                    var longitude = 106.061728;
                    var latitude = 29.852264;
                    point = new BMap.Point(longitude, latitude);
                } else if ("綦江区" == cityName) {
                    var longitude = 106.654609;
                    var latitude = 29.035883;
                    point = new BMap.Point(longitude, latitude);
                } else if ("万盛区" == cityName) {
                    var longitude = 106.889359;
                    var latitude = 28.907664;
                    point = new BMap.Point(longitude, latitude);
                } else if ("丰都县" == cityName) {
                    var longitude = 107.735181;
                    var latitude = 29.869663;
                    point = new BMap.Point(longitude, latitude);
                } else if ("垫江县" == cityName) {
                    var longitude = 107.336118;
                    var latitude = 30.334042;
                    point = new BMap.Point(longitude, latitude);
                } else if ("忠县" == cityName) {
                    var longitude = 108.04224;
                    var latitude = 30.30452;
                    point = new BMap.Point(longitude, latitude);
                } else if ("城口县" == cityName) {
                    var longitude = 108.671036;
                    var latitude = 31.953145;
                    point = new BMap.Point(longitude, latitude);
                } else if ("巫溪县" == cityName) {
                    var longitude = 109.576402;
                    var latitude = 31.40266;
                    point = new BMap.Point(longitude, latitude);
                } else if ("巫山县" == cityName) {
                    var longitude = 109.879221;
                    var latitude = 31.087199;
                    point = new BMap.Point(longitude, latitude);
                } else if ("奉节县" == cityName) {
                    var longitude = 109.468749;
                    var latitude = 31.024849;
                    point = new BMap.Point(longitude, latitude);
                } else if ("石柱土家族自治县" == cityName) {
                    var longitude = 108.118685;
                    var latitude = 30.006859;
                    point = new BMap.Point(longitude, latitude);
                } else if ("彭水苗族土家族自治县" == cityName) {
                    var longitude = 108.17085;
                    var latitude = 29.301729;
                    point = new BMap.Point(longitude, latitude);
                } else if ("酉阳土家族苗族自治县" == cityName) {
                    var longitude = 108.774583;
                    var latitude = 28.848811;
                    point = new BMap.Point(longitude, latitude);
                } else if ("秀山土家族苗族自治县" == cityName) {
                    var longitude = 109.011853;
                    var latitude = 28.454209;
                    point = new BMap.Point(longitude, latitude);
                } else if ("东方市" == cityName) {
                    var longitude = 108.656267;
                    var latitude = 19.101378;
                    point = new BMap.Point(longitude, latitude);
                } else if ("万宁市" == cityName) {
                    var longitude = 110.397709;
                    var latitude = 18.799833;
                    point = new BMap.Point(longitude, latitude);
                } else if ("五指山市" == cityName) {
                    var longitude = 109.522965;
                    var latitude = 18.782911;
                    point = new BMap.Point(longitude, latitude);
                } else if ("琼海市" == cityName) {
                    var longitude = 110.47882;
                    var latitude = 19.265073;
                    point = new BMap.Point(longitude, latitude);
                } else if ("屯昌县" == cityName) {
                    var longitude = 110.105702;
                    var latitude = 19.358194;
                    point = new BMap.Point(longitude, latitude);
                } else if ("定安县" == cityName) {
                    var longitude = 110.363233;
                    var latitude = 19.686848;
                    point = new BMap.Point(longitude, latitude);
                } else if ("文昌市" == cityName) {
                    var longitude = 110.803934;
                    var latitude = 19.549335;
                    point = new BMap.Point(longitude, latitude);
                } else if ("澄迈县" == cityName) {
                    var longitude = 110.010636;
                    var latitude = 19.745166;
                    point = new BMap.Point(longitude, latitude);
                } else if ("临高县" == cityName) {
                    var longitude = 109.693419;
                    var latitude = 19.920291;
                    point = new BMap.Point(longitude, latitude);
                } else if ("保亭黎族苗族自治县" == cityName) {
                    var longitude = 109.702907;
                    var latitude = 18.647732;
                    point = new BMap.Point(longitude, latitude);
                } else if ("陵水黎族自治县" == cityName) {
                    var longitude = 110.045039;
                    var latitude = 18.513155;
                    point = new BMap.Point(longitude, latitude);
                } else if ("琼中黎族苗族自治县" == cityName) {
                    var longitude = 109.842786;
                    var latitude = 19.041625;
                    point = new BMap.Point(longitude, latitude);
                } else if ("昌江黎族自治县" == cityName) {
                    var longitude = 109.060164;
                    var latitude = 19.304817;
                    point = new BMap.Point(longitude, latitude);
                } else if ("白沙黎族自治县" == cityName) {
                    var longitude = 109.453447;
                    var latitude = 19.232744;
                    point = new BMap.Point(longitude, latitude);
                } else if ("儋州市" == cityName) {
                    var longitude = 109.588035;
                    var latitude = 19.526327;
                    point = new BMap.Point(longitude, latitude);
                } else if ("红河哈尼族彝族自治州" == cityName) {
                    var longitude = 103.380977;
                    var latitude = 23.380877;
                    point = new BMap.Point(longitude, latitude);
                } else if ("西双版纳傣族自治州" == cityName) {
                    var longitude = 100.800568;
                    var latitude = 22.023519;
                    point = new BMap.Point(longitude, latitude);
                } else if ("普洱市" == cityName) {
                    var longitude = 100.972567;
                    var latitude = 22.830712;
                    point = new BMap.Point(longitude, latitude);
                } else if ("渝北区" == cityName) {
                    var longitude = 106.638135;
                    var latitude = 29.709625;
                    point = new BMap.Point(longitude, latitude);
                }
                map.centerAndZoom(point, showZoom);
            } else {
                alert("您选择地址没有解析到结果!");
            }
        }, cityName);
        //增加导航控件
        map.enableScrollWheelZoom(true);
        var navigation = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(navigation);
    }
    moralMap.closeSearchBox = function () {
        moralMap["_searchBoxKey"] = Math.random();
        $(".search_box").css("display", "none");
    }
    //延时开启
    moralMap.openSearchBox = function () {
        key = Math.random();
        moralMap["_searchBoxKey"] = key;
        setTimeout(function () {
            if (moralMap["_searchBoxKey"] == key) {
                $(".search_box").css("display", "block");
            }
        }, 1500);
    }
    /*
     * ----------------适配方法------------------------
     */
    moralMap.addEventListener = function (type, fn) {
        baiduMap.addEventListener(type, function () {
            if (type == "zoomstart") {
                moralMap._zoomStartHandle();
            } else if (type == "zoomend") {
                moralMap._zoomEndHandle();
            }
            fn.apply(baiduMap, arguments);
        });
    }
    moralMap._zoomStartHandle = function () {
        baiduMap.closeInfoWindow();
        moralMap.startZoom(baiduMap.getZoom());
    }
    moralMap._zoomEndHandle = function () {
        if ($(".search_box").css("display") == "none") {
            moralMap.openSearchBox();
        }
        var endZoom = baiduMap.getZoom();
        var startZoom = moralMap.startZoom();
        //刷新key防止延迟加载
        //       var key = moralMap.lazyKeyer();
        var confine = moralMap.getZoomConfine();
        moralMap.layer("equipments");
        moralMap.clearOverlays();
    }
    moralMap.layer = (function () {
        var _layers = ["equipments", "monitorpoints"];
        var _layer = "monitorpoints";
        return function (layer) {
            if (layer == undefined) {
                return _layer;
            } else {
                for (var i in _layers) {
                    if (layer == _layers[i]) {
                        _layer = layer;
                    }
                }
            }
        }
    })();
    // 坐标适配器
    moralMap.Bounds = function (baiduBounds) {
        if (!!baiduBounds) {
            this.northeastLng = baiduBounds.getNorthEast().lng;//东北角经度,大一点
            this.northeastLat = baiduBounds.getNorthEast().lat;//东北角纬度,大一点
            this.southwestLng = baiduBounds.getSouthWest().lng;//西南角经度坐标,小一点
            this.southwestLat = baiduBounds.getSouthWest().lat;//西南角经度坐标,小一点
        } else {
            this.northeastLng = null;//东北角经度,大一点
            this.northeastLat = null;//东北角纬度,大一点
            this.southwestLng = null;//西南角经度坐标,小一点
            this.southwestLat = null;//西南角经度坐标,小一点
        }
    }
    moralMap.getBounds = function () {
        return new moralMap.Bounds(baiduMap.getBounds()); //即时bounds;
    }
    moralMap.getMaxBounds = function () {
        var key = "_" + moralMap.layer() + "_bounds";
        return this[key];
    }
    moralMap.setMaxBounds = function (bs) {
        var key = "_" + moralMap.layer() + "_bounds";
        var _bounds = !!this[key] ? this[key] : new moralMap.Bounds(); //累积数据
        //记录最大边界
        _bounds.northeastLng = _bounds.northeastLng || bs.northeastLng;
        _bounds.northeastLat = _bounds.northeastLat || bs.northeastLat;
        _bounds.southwestLng = _bounds.southwestLng || bs.southwestLng;
        _bounds.southwestLat = _bounds.southwestLat || bs.southwestLat;
        _bounds.northeastLng = bs.northeastLng > _bounds.northeastLng ? bs.northeastLng : _bounds.northeastLng;
        _bounds.northeastLat = bs.northeastLat > _bounds.northeastLat ? bs.northeastLat : _bounds.northeastLat;
        _bounds.southwestLng = bs.southwestLng < _bounds.southwestLng ? bs.southwestLng : _bounds.southwestLng;
        _bounds.southwestLat = bs.southwestLat < _bounds.southwestLat ? bs.southwestLat : _bounds.southwestLat;
        this[key] = _bounds;
    }
    moralMap.isOverBounds = function () {
        var isOver = false;
        var _bounds = moralMap.getMaxBounds(); //累计数据
        var bs = moralMap.getBounds(); //实际数据
        if (!_bounds) {
            isOver = true;
            moralMap.setMaxBounds(bs);
        } else {
            isOver = (bs.northeastLng > _bounds.northeastLng
                || bs.northeastLat > _bounds.northeastLat
                || bs.southwestLng < _bounds.southwestLng
                || bs.southwestLat < _bounds.southwestLat);
            if (isOver) {
                moralMap.setMaxBounds(bs);
            }
        }
        return isOver;
    }
    moralMap.addOverlay = function (overlay) {
        if (overlay.getMap() != baiduMap) {
            // setTimeout(function(){
            baiduMap.addOverlay.call(baiduMap, overlay);
            // },10);
            baiduMap.addOverlay.call(baiduMap, overlay);
        }
    }
    moralMap.addOverlays = function (overlays) {
        if (overlays != null && typeof overlays == 'object') {
            for (var i in overlays) {
                moralMap.addOverlay(overlays[i]);
            }
        }
    }
    moralMap.removeOverlay = function (overlay) {
        // baiduMap.removeOverlay(overlay);
        baiduMap.removeOverlay.apply(baiduMap, arguments);
    }
    moralMap.removeOverlays = function (overlays) {
        if (overlays != null && typeof overlays == 'object') {
            for (var i in overlays) {
                moralMap.removeOverlay(overlays[i]);
            }
        }
    }
    moralMap.getOverlays = function () {
        var overLays = baiduMap.getOverlays.apply(baiduMap, arguments)
        var moralMarker = [];
        for (var i in overLays) {
            if (overLays[i] instanceof BMap.Overlay) {
                moralMarker.push(overLays[i]);
            }
        }
        return moralMarker;
    }
    moralMap.clearCloseInfoWindow = function () {
        if (!!moralMap["_closeInfoWinTimer"]) {
            clearTimeout(moralMap["_closeInfoWinTimer"]);
            moralMap["_closeInfoWinTimer"] = null;
        }
    }
    moralMap.openInfoWindow = function () {
        moralMap.clearCloseInfoWindow();
        baiduMap.openInfoWindow.apply(baiduMap, arguments); //开启信息窗口
    }
    moralMap.closeInfoWindow = function () {
        var timer = setTimeout(function () {
            baiduMap.closeInfoWindow.apply(baiduMap, arguments);
            moralMap["_closeInfoWinTimer"] = null;
        }, 1200);
        moralMap["_closeInfoWinTimer"] = timer;
    }
    moralMap.clearOverlays = function () {
        baiduMap.clearOverlays();
    }
    moralMap.startZoom = (
        function () {
            var _zoom = null;
            return function (z) {
                if (z == undefined) {
                    return _zoom;
                } else {
                    _zoom = z;
                }
            }
        }
    )();
    moralMap.lazyKeyer = (function () {
        var _key = null;
        return function (key) {
            if (key == undefined) {
                _key = Math.random();
                return _key;
            } else {
                return _key == key;
            }
        };
    })();
    moralMap.getUtf8Length = function (str) {
        return str.replace(/[\u0391-\uFFE5]/g, "cc").length;
    }
    //弹窗处理
    moralMap.showPopupbox = function (id) {
        setTimeout(function () {
            $(id).css('display', 'block');
        }, 1);
    }
    moralMap.closePopupbox = function (id) {
        $(id).css('display', 'none');
    }
    moralMap.isPopupBoxShow = function (id) {
        return $(id).css('display') == 'block';
    }
    moralMap.onItermClick = function (index, select) {
        var row = moralMap.getPopupEqu(index);
        if (row['mac'] == null) {
            alert("mac项未配置,请联系管理员设置");
            return;
        }
        var equ = {
            methodName: 'showVoc' == select ? 'showVoc' : 'showDeviceMonitor',
            name: row['name'],
            mac: (row['mac']).toLowerCase(),
            longitude: row['longitude'],
            latitude: row['latitude'],
            monitorPointId: row['monitorPointId'],
            version: row['deviceVersion']['version'],
            provinceCode: row['monitorPoint']['provinceCode']
        };
        !!select ? equ['monitorPointId'] = row["monitorPointId"] : null;
        var equStr = JSON.stringify(equ);
        if (window["console"] != undefined) {
            // console.log(equStr);
        }
        if (!!window['external'] && !!window['external']['callWin']) {
            window['external'].callWin(equStr);
        } else {
            if (!!select && select === 'showVoc' && !!window['external'] && !!window['external']['showVocInfo']) {
                window['external'].showChartInfo(equStr);
            } else {
                alert(equStr);
            }
        }
    }
    moralMap.setPopupEqus = function (arr) {
        moralMap["_equs"] = arr;
    }
    moralMap.getPopupEquMacs = function () {
        var macs = [];
        if (moralMap["_equs"] != null) {
            for (var i in moralMap["_equs"]) {
                var equ = moralMap["_equs"][i];
                macs.push(equ["mac"]);
            }
        }
        return macs;
    }
    moralMap.getPopupEqu = function (index) {
        if (typeof moralMap["_equs"] === 'object') {
            return moralMap["_equs"][index];
        }
        throw "equs is empty";
    }
    //{id:必填,url:,pagesize:}
    //list加载
    moralMap.initListView = function (option) {
        var listView = {
            load: function (url) {
                if (url != undefined) {
                    $.extend(option, {
                        "url": url
                    });
                }
                option["pageNo"] = 1;
                _load(option);
            }
        };
        listView["option"] = option;
        listView.refreshState = function (equstates) {
            if (equstates != null) {
                for (var i in equstates) {
                    var equstate = equstates[i];
                    var mac = equstate["mac"];
                    var state = equstate["state"];
                    var id_select = "#listview_state_" + mac;
                    var stateObj = _getStateMap(state);
                    var stateClass = stateObj["state"];
                    var stateName = stateObj["stateName"];
                    if (!$(id_select).hasClass(state)) {
                        $(id_select).attr("class", stateClass);
                        $(id_select).text(stateName);
                    }
                }
            }
        }
        function _getStateMap(s) {
            var state;
            var stateName;
            switch (parseInt(s)) {
                case 0:
                    state = 'state00';
                    stateName = '正常';
                    break;
                case 1:
                    state = 'state01';
                    stateName = '轻度';
                    break;
                case 2:
                    state = 'state02';
                    stateName = '中度';
                    break;
                case 3:
                    state = 'state03';
                    stateName = '严重';
                    break;
                case 4:
                    state = 'state04';
                    stateName = '离线';
                    break;
            }
            return {
                "state": state,
                "stateName": stateName
            };
        }
        function _load(option) {
            if (option['url'] != null && option['url'] != "") {
                var pageSize = option["pageSize"] || 20;
                var pageNo = option["pageNo"] || 1;
                var url = option['url'];
                url += "&pageNo=" + pageNo;
                url += "&pageSize=" + pageSize;
                // console.log(url);
                $.ajax({
                    type: "get",
                    cache: false,
                    url: url,
                    async: true,
                    success: function (res) {
                        if (res != null && res.total != null) {
                            var rows = res.data;
                            if (rows == null || rows.length == 0) {
                                $(option['id']).html("没有查询到任何数据!");
                                return;
                            }
                            //储存设备信息
                            moralMap.setPopupEqus(rows);
                            var outHtml = "<ul class='list'>";
                            for (var i = 0; i < rows.length; i++) {
                                var e = rows[i];
                                var state = 'state01';
                                var stateName = '';
                                var s = e['state'] == undefined ? 0 : e['state'];
                                if (deviceStates) {
                                    for (var j in deviceStates) {
                                        var deviceState = deviceStates[j];
                                        if (deviceState.mac == e['mac']) {
                                            s = deviceState.state;
                                            break;
                                        }
                                    }
                                }
                                var stateObj = _getStateMap(s);
                                state = stateObj["state"];
                                stateName = stateObj["stateName"];
                                var name = e['name'];
                                if (moralMap.getUtf8Length(name) > 22) {
                                    var stop1 = 0;
                                    for (var stop1_i = 0, len = 0; stop1_i < name.length; stop1_i++) {
                                        len += ((name.charCodeAt(stop1_i) & 0xff00) != 0) ? 2 : 1;
                                        stop1 = stop1_i;
                                        if (len > 8) break;
                                    }
                                    var stop2 = 0;
                                    for (var stop2_i = name.length - 1, len = 0; stop2_i >= 0; stop2_i--) {
                                        len += ((name.charCodeAt(stop2_i) & 0xff00) != 0) ? 2 : 1;
                                        stop2 = stop2_i;
                                        if (len > 10) break;
                                    }
                                    name = name.substring(0, stop1) + "..." + name.substring(stop2, name.length);
                                }
                                var li = "<li id='listview_item_" + e['mac'] + "'><span class='list-chart-span' onclick=moralMap.onItermClick(\"" + i + "\",'showVoc')><img src='/img/list.png' width='20px'></span>"
                                    + "<span id='listview_state_" + e['mac'] + "'class='" + state + "'>" + stateName + "</span>" +
                                    "<div>" + name + "</div></li>";
                                outHtml += li;
                            }
                            outHtml += "</ul>";
                            var total = res['total'];
                            var totalPage = Math.ceil(total / pageSize);
                            if (totalPage > 1) {
                                outHtml += "<div id='page' class='page_div'></div>";
                            }
                            $(option['id']).html(outHtml);
                            if (totalPage > 1) {
                                $("#page").paging({
                                    pageNo: pageNo,
                                    totalPage: totalPage,
                                    totalSize: total,
                                    callback: function (num) {
                                        //先清空内容
                                        $(option['id']).html("");
                                        option["pageNo"] = num;
                                        _load(option);
                                    }
                                })
                            }
                        }
                    }
                });
            }
        }
        return listView;
    }
    moralMap.MoralMarker = function (option) {
        var _option = option;
        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;
            var icon = _option["icon"];
            //var url = icon["stateIcons"][state];
            var url = icon["url"] + state + ".png";
            return new BMap.Icon(url, new BMap.Size(icon["width"], icon["height"]), {
                imageSize: new BMap.Size(icon["width"], icon["height"])
            });
        }
        this.constructor.call(this, _pointObj, {
            icon: _iconObj,
            enableMassClear: true
        })
        //事件注册
        var eventType = ['click'];
        for (var index in eventType) {
            var eventName = eventType[index];
            if (_option[eventName] != undefined && typeof _option[eventName] == "function") {
                var fn = _option[eventName];
                this.addEventListener(eventName, function () {
                    //将arguments转换成数组
                    var args = Array.prototype.slice.call(arguments);
                    fn.apply(this, args);
                });
            }
        }
        return $.extend(this, {
            refreshState: function (state) {
                //状态发生变化的时候刷新 图标
                if (_option['state'] != state) {
                    _option['state'] = state;
                    var iconObj = _getMapIcon(state);
                    this.setIcon(iconObj);
                }
            },
            getOption: function () {
                return _option;
            },
            setOption: function (option) {
                _option = option;
            }
        })
    }
    //new BMap.Marker()这种写法IE7会报错,很奇葩
    moralMap.MoralMarker.prototype = new BMap.Marker();
    //监控点对象 包装Mark对象
    moralMap.Monitorpoint = function (option) {
        if (monitorPointStates) {
            for (var i in monitorPointStates) {
                var state = monitorPointStates[i];
                if (state.id == option.id) {
                    option.state = state.state;
                }
            }
        }
        var icon = {};
        icon["stateIcons"] = ["/img/ico00.png", "/img/ico01.png", "/img/ico02.png", "/img/ico03.png", "/img/ico04.png"];
        icon["url"] = "/img/ico0";
        icon["width"] = 50;
        icon["height"] = 50;
        option["icon"] = icon;
        var moralMarker = new moralMap.MoralMarker(option);
        //        var mark =new BMap.Marker(pointObj,{icon:iconObj});
        //==================infoWindow-start============================
        var infoWindow;
        if (moralMarker["infoWindow"] == undefined) {
            moralMarker["infoWindow"] = infoWindow;
        }
        //弹窗打开和关闭
        moralMarker.addEventListener("click", function () {
            var winOpts = {
                width: 250, // 信息窗口宽度
                height: 160, // 信息窗口高度
                // title: getTitleOutHtml(), // 信息窗口标题
                offset: new BMap.Size(-8, -5) //设置信息窗偏移
            }
            var winfowText = "<div style='width:250px'>";
            var title = (option["name"] == null) ? "" : option["name"];
            if (title.length > 13) {
                title = title.slice(0, 13) + "...";
            }
            winfowText += "<p style='width:210px;font:bold 14px/16px arial,sans-serif;margin:0;color:#cc5522;white-space:nowrap;overflow:hidden'"
            winfowText += "title='" + option["name"] + "'>";
            winfowText += title + "</p>";
            var listText = '<div id="equ_list" class="listview" style="min-height:50px;overflow:auto;max-height:140px;" ></div>';
            winfowText = winfowText + listText + "</div>";
            var infoWindow = new BMap.InfoWindow(winfowText, winOpts);
            moralMap.openInfoWindow(infoWindow, this._point); //开启信息窗口
        });
        moralMarker.addEventListener("mouseout", function () {
            // moralMap.closeInfoWindow();
        });
        //==================infoWindow-end============================
        //储存监控点
        moralMap.putMpoint(option['id'], moralMarker);
        return moralMarker;
    }
    //储存MonitorPoint对象
    moralMap.putMpoint = function (key, obj) {
        if (moralMap['_mpoints'] == undefined) {
            moralMap['_mpoints'] = {};
        }
        moralMap['_mpoints'][key] = obj;
    }
    //key为监控点id
    moralMap.getMpoint = function (key) {
        if (typeof moralMap['_mpoints'] === 'object') {
            return moralMap['_mpoints'][key];
        }
    }
    moralMap.getMpoints = function (key) {
        return moralMap['_mpoints'];
    }
    moralMap.clearMpoints = function () {
        if (moralMap['_mpoints'] != undefined) {
            delete moralMap['_mpoints'];
        }
    }
    var sensorsDescriptionMap;
    var sensorsUnitMap;
    $.ajax({
        url: "getSensorsMap",
        type: "get",
        dataType: "json",
        success: function (data) {
            sensorsDescriptionMap = data[0];
            sensorsUnitMap = data[1];
        }
    });
    //设备以mac为key储存
    //监控点对象 包装MoralMark对象
    moralMap.Equipment = function (option) {
        if (deviceStates) {
            for (var i in deviceStates) {
                var state = deviceStates[i];
                if (state.id == option.id) {
                    option.state = state.state;
                }
            }
        }
        var icon = {};
        icon["stateIcons"] = ["/img/ico00.png", "/img/ico01.png", "/img/ico02.png", "/img/ico03.png", "/img/ico04.png"];
        icon["url"] = "/img/ico0";
        icon["width"] = 50;
        icon["height"] = 50;
        option["icon"] = icon;
        var moralMarker = new moralMap.MoralMarker(option);
        //        var mark =new BMap.Marker(pointObj,{icon:iconObj});
        //==================infoWindow-start============================
        var infoWindow = (function () {
            //生成信息框
            var winOpts = {
                width: 300, // 信息窗口宽度
                title: getTitleOutHtml(), // 信息窗口标题
                offset: new BMap.Size(-8, -5) //设置信息窗偏移
            }
            function getTitleOutHtml() {
                //title太长用引号...
                var title = (option["name"] == null) ? "" : option["name"];
                if (title.length > 13) {
                    title = title.slice(0, 13) + "...";
                }
                var address = (option["address"] == null) ? "" : option["address"];
                if (address.length > 18) {
                    address = address.slice(0, 18) + "...";
                }
                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("", winOpts);
        })();
        if (moralMarker["infoWindow"] == undefined) {
            moralMarker["infoWindow"] = infoWindow;
        }
        var mouseOverHandle = option['mouseover'];
        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) {
                if (!jsonData.hasOwnProperty('mac')) {
                    infoWindow.setContent("");
                    infoWindow.redraw();
                } else {
                    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 sensorsDescriptionMap) {
                                if (prop == key) {
                                    var sensorsDescription = sensorsDescriptionMap[key];
                                }
                            }
                            for (var key in sensorsUnitMap) {
                                if (prop == key) {
                                    var sensorsUnit = sensorsUnitMap[key];
                                    if (sensorsUnit == null) {
                                        sensorsUnit = "";
                                    }
                                }
                            }
                            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();
        });
        //==================infoWindow-end============================
        //储存监控点
        moralMap.putEquipment(option['mac'], moralMarker);
        var _super_refreshState = moralMarker.refreshState;
        //$("#searchParam").val(option['mac']);
        return $.extend(moralMarker, {
            refreshState: function (data) {
                if (data != null && data != "") {
                    var state = this.getOption()["state"];
                    this.setData(data); //更新数据
                    _super_refreshState.call(this, data["state"]);
                }
            },
            setData: function (data) {
                var option = this.getOption();
                option["data"] = data;
                this.setOption(option);
            },
            getData: function () {
                return this.getOption()["data"];
            }
        });
    }
    //储存MonitorPoint对象
    moralMap.putEquipment = function (key, obj) {
        if (key != null && key != "") {
            key = String.prototype.toLowerCase.call(key);
            if (moralMap['_equipments'] == undefined) {
                moralMap['_equipments'] = {};
            }
            moralMap['_equipments'][key] = obj;
        }
    }
    moralMap.getEquipment = function (key) {
        if (key == null) {
            return null;
        }
        key = String.prototype.toLowerCase.call(key);
        if (typeof moralMap['_equipments'] === 'object') {
            return moralMap['_equipments'][key];
        }
    }
    moralMap.getEquipments = function (key) {
        return moralMap['_equipments'];
    }
    moralMap.clearEquipments = function () {
        if (moralMap['_equipments'] != undefined) {
            delete moralMap['_equipments'];
        }
    }
    moralMap.getZoomConfine = function () {
        return 18;
    }
    moralMap.getZoom = function () {
        return baiduMap.getZoom();
    }
    moralMap.getHorizonMarkers = function (isShow) {
        var bounds = moralMap.getBounds();
        var oldMarkerList;
        var isShow = (isShow) ? baiduMap : null;
        if (moralMap.layer() == "equipments") {
            oldMarkerList = moralMap.getEquipments();
        } else {
            oldMarkerList = moralMap.getMpoints();
        }
        var markers = [];
        if (oldMarkerList != null && typeof oldMarkerList == "object") {
            for (var i in oldMarkerList) {
                var oldmarker = oldMarkerList[i];
                if (oldmarker != null && oldmarker instanceof BMap.Overlay && oldmarker.getMap() == isShow) {
                    var option = oldmarker.getOption();
                    if (typeof option == 'object') {
                        var longitude = option['longitude'];
                        var latitude = option['latitude'];
                        // 检索当前坐标范围内的组件
                        if (longitude < bounds.northeastLng && longitude > bounds.southwestLng && latitude < bounds.northeastLat && latitude > bounds.southwestLat) {
                            markers.push(oldmarker);
                        }
                    }
                }
            }
        }
        return markers;
    }
    moralMap.showPointMonitor = function (id) {
        var mpointMarker = moralMap.getMpoint(id);
        var mpoint = mpointMarker.getOption();
        if (!!mpoint) {
            delete mpoint['organization'];
            delete mpoint['icon'];
            delete mpoint['click'];
            if (window["console"] != undefined) {
                console.log(mpoint);
            }
            $.get("getvers?mptid=" + id, function (res) {
                if (!!res && res.code == 1) {
                    mpoint['versions'] = res.data;
                    mpoint['methodName'] = 'showPointMonitor';
                    var mpointStr = JSON.stringify(mpoint);
                    if (!!window['external'] && window['external']['callWin']) {
                        window['external'].callWin(mpointStr);
                    } else {
                        alert(JSON.stringify(mpointStr));
                    }
                }
            })
        } else {
            if (window["console"] != undefined) {
                console.log("option of mpointMarker is null");
                console.log(mpointMarker);
            }
        }
    }
    moralMap.callJS = function (condition) {
        var new_point = new BMap.Point(condition.longitude, condition.latitude);
        baiduMap.panTo(new_point);
        baiduMap.setCenter(new_point);
        baiduMap.setZoom(condition.type == "mpoint" ? 17 : 18);
        var interval = setInterval(function () {
            var marker;
            if (condition.type == "mpoint") {
                marker = moralMap.getMpoint(condition.id);
            } else if (condition.type == "device") {
                marker = moralMap.getEquipment(condition.mac);
            }
            if (marker) {
                clearInterval(interval);
                moralMap.openInfoWindow(marker["infoWindow"], new_point);
            }
        }, 50);
    }
    var deviceStates;
    var monitorPointStates;
    moralMap.refreshState = function (states) {
        monitorPointStates = states;
        deviceStates = [];
        for (var i in states) {
            var state = states[i];
            for (var j in state.devices) {
                var device = state.devices[j];
                deviceStates.push(device);
            }
        }
        listView.refreshState(deviceStates);
        for (var i in states) {
            var state = states[i];
            var mpoint = moralMap.getMpoint(state.id);
            if (mpoint) {
                mpoint.refreshState(state.state);
            }
            for (var j in state.devices) {
                var marker = state.devices[j];
                var marker_mac = marker["mac"];
                var equipment = moralMap.getEquipment(marker_mac);
                if (equipment) {
                    equipment.refreshState(marker);
                }
            }
        }
    }
    window.moralMap = moralMap;
})(jQuery, BMap, window);
src/main/webapp/view/newmap.jsp
New file
@@ -0,0 +1,751 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page isELIgnored="false" %>
<%
    String version = "1.000004";
    response.setHeader("Cache-Control", "no-store");
    response.setHeader("Pragrma", "no-cache");
    response.setDateHeader("Expires", 0);
%>
<!DOCTYPE html>
<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="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/utils.js"></script>
    <script type="text/javascript">
        if (typeof (JSON) == 'undefined') {
            $.getScript("js/json2.js");
        }
    </script>
    <script type="text/javascript" src="/js/newmoralmap.js?version=<%=version%>"></script>
    <script type="text/javascript" src="/js/paging.js"></script>
</head>
<style type="text/css">
    body,
    html,
    #mapCanvas {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        z-index: 0;
        font-size: 14px;
        font-family: "微软雅黑";
    }
    .anchorBL {
        display: none;
    }
    .main_body {
        border: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        position: relative;
    }
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    a {
        color: #1900c6;
        text-decoration: none;
        cursor: pointer;
        font-size: 14px;
        font-weight: 300;
    }
    a:hover {
        text-decoration: underline;
        color: #e60012;
    }
    #popup_box {
        top: 75px;
        left: 20px;
        position: absolute;
        z-index: 1;
        height: 390px;
        width: 320px;
        margin: 0 auto;
        padding: 10px 25px;
        border: 1px solid #eee;
        background: white;
        display: none;
    }
    /*.listview {
        overflow-x: hidden;
        overflow-y: auto;
        margin: 0;
        padding: 0;
        border: 0;
        height: 390px;
        width: 92%;
        position: absolute;
    }*/
    .search_box {
        /*border-bottom: 1px solid #eee;*/
        border-radius: 4px;
        top: 20px;
        left: 21px;
        clear: both;
        zoom: 1;
        padding-top: 10px;
        padding-right: 15px;
        position: absolute;
        z-index: 1;
        height: 36px;
        width: 354px;
        background: white;
    }
    .search_box input {
        margin: 0;
        width: 245px;
        float: right;
        height: 24px;
        line-height: 24px
    }
    .search_box button {
        margin-left: 10px;
        float: right;
        width: 70px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
    }
    .list {
        padding: 10px 0;
        clear: both;
        zoom: 1
    }
    .list-chart-span {
        cursor: pointer;
        background-color: #4c9bf1
    }
    .list li {
        border-bottom: 1px dotted #eee;
        line-height: 25px;
        height: 25px;
        font-size: 12px;
        /*cursor: pointer;*/
    }
    .list span {
        float: right;
        position: relative;
        right: 5px;
        border-radius: 4px;
        width: 40px;
        text-align: center;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        font-weight: bolder;
        color: lightgrey;
        margin-right: 8px;
        margin-top: 2.5px;
    }
    .list .state00 {
        background-color: #00C600
    }
    .list .state01 {
        background-color: #FF9;
    }
    .list .state02 {
        background-color: #F93;
    }
    .list .state03 {
        background-color: #F00;
    }
    .list .state04 {
        background-color: #488FD2;
    }
    /*
      * 外面盒子样式---自己定义
      */
    .page_div {
        margin: 0 auto;
        font-size: 10px;
        font-family: "microsoft yahei";
        color: #666666;
        box-sizing: border-box;
        text-align: center;
    }
    /*
     * 页数按钮样式
     */
    .page_div a {
        min-width: 23px;
        height: 22px;
        border: 1px solid #dce0e0 !important;
        text-align: center;
        margin: 0 0px;
        margin-right: 1px;
        cursor: pointer;
        line-height: 22px;
        color: #666666;
        font-size: 10px;
        display: inline-block;
    }
    #firstPage,
    #lastPage {
        width: 40px;
        color: #0073A9;
        border: 1px solid #0073A9 !important;
    }
    #prePage,
    #nextPage {
        width: 50px;
        color: #0073A9;
        border: 1px solid #0073A9 !important;
    }
    .page_div .current {
        background-color: #0073A9;
        border-color: #0073A9;
        color: #FFFFFF;
    }
    .totalPages {
        margin: 0 10px;
    }
    .totalPages span,
    .totalSize span {
        color: #0073A9;
        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
    }
    .tools_box {
        position: absolute;
        height: 120px;
        width: 400px;
        right: 1px;
        top: 20px;
        z-index: 1;
    }
    .tools_box .charts_btn {
        position: relative;
        float: right;
        margin: 0;
        border: 0;
        height: 85px;
        width: 85px;
        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;
        background-size: 70%;
    }
</style>
<body>
<div class="main_body">
    <div class="tools_box">
        <div class="charts_btn">
        </div>
    </div>
    <%-- <div class="search_box">
          <button id="searchBtn" type="button">搜索</button>
          <textarea style="width: 200px;height:200px;" id="searchParam"></textarea>
      </div>--%>
    <!-- <div id="popup_box">
          <div id="equ_list" class="listview">
          </div>
    </div> -->
    <div id="mapCanvas"></div>
    <div id="mapParams" style="display: none;">
        ${requestScope.mapParams}
    </div>
</div>
</body>
</html>
<script>
    //页面初始化
    (function ($) {
        var moralMap = window.moralMap;
        var params = $.parseJSON($("#mapParams").html());
        moralMap['params'] = params;
        var regionCode = params["regionCode"];
        var provinceCode = regionCode.toString().substring(0, 2) + "0000";
        var mapType = getUrlParam("mapType");
        var mapOption = {};
        if (!!mapType && !!eval(mapType)) {
            mapOption["mapType"] = eval(mapType);
        }
        var showZoom = getUrlParam("showZoom");
        //通过地区名称加载地图
        moralMap.mapInit(params["regionName"], mapOption, showZoom);
        //列表对象
        var listView = moralMap.initListView({id: "#equ_list", pageSize: 12});
        window["listView"] = listView;
        //展示设备列表,click事件触发
        function showEqus(obj) {
            var params = moralMap['params'];
            var mpoint = obj.currentTarget.getOption();
            //$("#searchParam").val(mpoint['name']);
            var url = 'get-devices-by-mid-oid?mpId=' + mpoint['id'] + "&orgId=" + params['orgId'];
            listView.load(url);
            moralMap.showPopupbox("#popup_box");
        }
        function loadLazy(url, paramMap, callBack, lazyKeyer) {
            if (lazyKeyer == undefined) {
                lazyKeyer = moralMap.lazyKeyer;
            }
            var key = lazyKeyer();
            setTimeout(function () {
                //只执行最后一次请求,防止地图抖动
                if (key == undefined || lazyKeyer(key)) {
                    $.ajax({
                        type: "get",
                        url: url,
                        data: paramMap,
                        async: false,
                        cache: false,
                        success: function (res) {
                            if (callBack != null) {
                                if (res.code == 1 && lazyKeyer(key)) {
                                    callBack(res.data);
                                }
                            }
                        }
                    });
                }
            }, 500);
        }
        function loadOverlays(url, callback) {
            //从缓存取
            var oldMarkerList = moralMap.getHorizonMarkers();
            moralMap.addOverlays(oldMarkerList);
            //从缓存取
            //超界到后台取数据,地图为空时取
            if (moralMap.isOverBounds() || moralMap.getOverlays().length == 0) {
                var maxBounds = moralMap.getMaxBounds();
                var paramMap = {};
                paramMap["orgId"] = params['orgId'];
                paramMap["regionCode"] = params['regionCode'];
                // 为了适配旧接口
                paramMap["Fe"] = maxBounds.northeastLat;//东北角纬度,大一点
                paramMap["Ge"] = maxBounds.northeastLng;//东北角经度,大一点
                paramMap["Ke"] = maxBounds.southwestLat;//西北角纬度坐标,小一点
                paramMap["Le"] = maxBounds.southwestLng;//西北角经度坐标,小一点
                // $.extend(paramMap,maxBounds);
                loadLazy(url, paramMap, callback);
            }
        }
        function addOverEquipments(jsonData) {
            if (moralMap.layer() == "equipments") {
                var objs = jsonData = null ? [] : jsonData;
                for (var i in objs) {
                    var obj = objs[i];
                    if (moralMap.getEquipment(obj["mac"]) == null) {
                        obj['mouseover'] = function (type) {
                            if (type.target.getData() == null) {
                                //当前设备数据为空时,设备悬停事件中 刷新一下数据
                                //refreshAllState();
                            }
                        }
                        obj['click'] = function () {
                            var _obj = this.getOption();
                            if (_obj['mac'] == null) {
                                alert("mac项未配置,请联系管理员设置");
                                return;
                            }
                            var equ = {
                                methodName: 'showVoc',
                                name: _obj['name'],
                                mac: (_obj['mac']).toLowerCase(),
                                longitude: _obj['longitude'],
                                latitude: _obj['latitude'],
                                monitorPointId: _obj['monitorPointId'],
                                version: _obj['deviceVersion']['version'],
                                provinceCode: provinceCode
                            }
                            var equStr = JSON.stringify(equ);
                            if (window["console"] != undefined) {
                            }
                            if (!!window['external'] && !!window['external']['callWin']) {
                                window['external'].callWin(equStr);
                            } else if (!!window['external'] && !!window['external']['showVocInfo']) {
                                window['external'].showVocInfo(equStr);
                            } else {
                                alert(equStr);
                            }
                        }
                        var moralMask = new moralMap.Equipment(obj);
                        moralMap.addOverlay(moralMask);
                    }
                }
            }
        }
        function addOverMpoints(data) {
            if (moralMap.layer() == "monitorpoints") {
                var mpoints = data = null ? [] : data;
                for (var i in mpoints) {
                    var mpParam = mpoints[i];
                    if (moralMap.getMpoint(mpParam["id"]) == null) {
                        mpParam['click'] = showEqus;
                        var mpObj = new moralMap.Monitorpoint(mpParam);
                        moralMap.addOverlay(mpObj);
                    }
                }
            }
        }
        //地图load
        moralMap.addEventListener("load", function (type, target) {
            var paramMap = {};
            var bounds = moralMap.getBounds();
            paramMap["areaCode"] = params['areaCode'];
            paramMap["orgId"] = params['orgId'];
            // 为了适配旧接口
            paramMap["Fe"] = bounds.northeastLat;//东北角纬度,大一点
            paramMap["Ge"] = bounds.northeastLng;//东北角经度,大一点
            paramMap["Ke"] = bounds.southwestLat;//西北角纬度坐标,小一点
            paramMap["Le"] = bounds.southwestLng;//西北角经度坐标,小一点
            loadLazy("getMonitorpointList", paramMap, addOverMpoints);
            //startRefreshPage();
            showGrid();
        });
        //地图加载完成后 加载监控点,速度慢
        moralMap.addEventListener("tilesloaded", function (type, target) {
            showGrid();
        });
        //map为地图对象
        // TODO 临时
        function getBounds() {
            var bs = moralMap.getBounds();  //获取当前地图范围的经纬度
            // var bssw = bs.getSouthWest();        //获取西南角的经纬度(左下端点)
            // var bsne = bs.getNorthEast();        //获取东北角的经纬度(右上端点)
            if (!getBounds.topLeftAnchor) {
                getBounds.topLeftAnchor = {};
                getBounds.topLeftAnchor.x0 = bs.southwestLng;
                getBounds.topLeftAnchor.y0 = bs.northeastLat;
            }
            return {'x1': bs.southwestLng, 'y1': bs.southwestLat, 'x2': bs.northeastLng, 'y2': bs.northeastLat};
        }
        /**
         * 显示网格
         */
        // TODO 临时
        function showGrid() {
            var isShowGrid = getUrlParam("isShowGrid");
            if (!!isShowGrid) {
                $(".tools_box").hide();
            }
            // if(!isShowGrid||moralMap.getZoom()<14){
            if (!isShowGrid || moralMap.getZoom() < 14) {
                return;
            }
            var XY = getBounds();
            var polygons = [];
            console.log(XY);
            var X1 = XY.x1;
            var Y2 = XY.y2;
            var X0 = getBounds.topLeftAnchor.x0;
            var Y0 = getBounds.topLeftAnchor.y0;
            var width = 0.0063;
            var height = 0.0048;
            // var multiple = 1000000;
            if (!!getBounds.topLeftAnchor) {
                X1 = X0 + Math.ceil((X1 - X0) / width - 1) * width;
                Y2 = Y0 + Math.ceil((Y2 - Y0) / height) * height;
            }
            for (var i = X1; i < XY.x2; i = i + width) {
                for (var j = Y2; j > XY.y1; j = j - height) {
                    //此类表示绘制一个多边形覆盖物(注意:一定要下面的Point列表为多变形的顶点,描线顺序为从上到下,从左到右,顺序乱了,绘制出来的多边形也会乱,如图二所示,图二是将顶点的顺序给错了(网格左上端点,网格左下端点,网格右上端点,网格右下端点))
                    var polygon = new BMap.Polygon([
                        new BMap.Point(i, j),    //网格左上端点
                        new BMap.Point(i, j - height),  //网格左下端点
                        new BMap.Point(i + width, j - height),     //网格右下端点
                        new BMap.Point(i + width, j)            //网格右上端点
                    ], {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillOpacity: 0.1});
                    // polygon .addEventListener("click",function clickFunction(){
                    //     alert("你居然敢点我");
                    // });
                    // moralMap.addOverlay(polygon);
                    polygons.push(polygon);
                }
            }
            moralMap.addOverlays(polygons);
            if (!!showGrid.polygons) {
                moralMap.removeOverlays(showGrid.polygons);
            }
            showGrid.polygons = polygons;
        }
        // 点击事件关闭 弹窗列表
        moralMap.addEventListener("click", function (type, target) {
            //moralMap.closePopupbox("#popup_box");
        });
        //地图放大缩小事件时,关闭弹窗
        moralMap.addEventListener('zoomstart', function (type) {
        });
        //地图放大缩小事件时,关闭弹窗
        moralMap.addEventListener('zoomend', function (type) {
            loadOverlays("get-devices", addOverEquipments);
            //moralMap.closePopupbox("#popup_box");
        });
        moralMap.addEventListener('moveend', function (type) {
            loadOverlays("get-devices", addOverEquipments);
            //moralMap.closePopupbox("#popup_box");
        });
        //搜索框单击事件
        $("#searchBtn").click(
            function (e) {
                var param = encodeURI($("#searchParam").val());
                //moralMap.showPopupbox("#popup_box");
                var url = 'get-devices-for-popup?name=' + param + "&orgId=" + params['orgId'];
                listView.load(url);
            }
        );
        $("#searchParam").keydown(function (event) {
            if (event.keyCode == 13) {
                $("#searchBtn").trigger("click");
            }
        })
        //跳转表单页面按钮事件
        $(".charts_btn").click(
            function (e) {
                var obj = {};
                obj['methodName'] = 'showChart';
                var objStr = JSON.stringify(obj);
                if (!!window['external'] && !!window['external']['callWin']) {
                    window['external'].callWin(objStr);
                } else if (!!window['external'] && !!window['external']['showChartInfo']) {
                    window['external'].showChartInfo("");
                } else {
                    alert(objStr);
                }
            }
        );
        //页面刷新
    })(jQuery);
    var _intervalNum = -1;
    function startRefreshPage() {
        if (_intervalNum == -1) {
            _intervalNum = self.setInterval(function () {
                refreshAllState();
            }, 10000);
        }
        setTimeout(function () {
            refreshAllState();
        }, 5000);
    }
    function stopRefreshPage() {
        window.clearInterval(_intervalNum);
        _intervalNum = -1;
    }
    //刷新页面
    function refreshAllState() {
        var parma = {};
        /* if(moralMap.isPopupBoxShow("#popup_box")) {
            var popupEquMacs = moralMap.getPopupEquMacs();
            if(popupEquMacs!=null&&popupEquMacs.length>0){
                parma["popupEquMacs"] = popupEquMacs;
            }
        } */
        //从缓存取
        var oldMarkerList = moralMap.getHorizonMarkers(true);
        var markerKeys = [];
        key = moralMap.layer() == "monitorpoints" ? "id" : "mac";
        for (var i in oldMarkerList) {
            var marker = oldMarkerList[i];
            var key_value = marker.getOption()[key];
            if (key_value != null) {
                markerKeys.push(key_value);
            }
        }
        parma["layer"] = moralMap.layer();
        parma["markerKeys"] = markerKeys;
        parma["areaCode"] = moralMap['params']["areaCode"];
        parma["orgId"] = moralMap['params']["orgId"];
        if ((!!parma["popupEquMacs"] && !!parma["popupEquMacs"].length)
            || (!!parma["markerKeys"] && !!parma["markerKeys"].length)) {
            $.ajax({
                type: "post",
                url: "get-real-state-data",
                data: JSON.stringify(parma),
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                cache: false,
                async: true,
                success: function (data) {
                    if (data != null && typeof data === 'object') {
                        var resultMap = data["extData"];
                        if (resultMap == null) {
                            return;
                        }
                        var markers = resultMap["markers"];
                        var layer = resultMap["layer"];
                        if (markers != null && markers.length > 0) {
                            if (layer == "monitorpoints") {
                                for (var a_i in markers) {
                                    var marker = markers[a_i];
                                    var marker_id = marker["id"];
                                    var mpoint = moralMap.getMpoint(marker_id);
                                    if (mpoint != null) {
                                        mpoint.refreshState(marker["state"]);
                                    }
//                                    mpoint.refreshState(4);
                                }
                            } else {
                                for (var b_i in markers) {
                                    var marker = markers[b_i];
                                    var marker_mac = marker["mac"];
                                    var equipment = moralMap.getEquipment(marker_mac);
                                    if (equipment != null) {
                                        equipment.refreshState(marker);
                                    }
                                }
                            }
                            var equ = {
                                methodName: 'refreshState',
                                markers: markers,
                                layer: layer
                            }
                            var equStr = JSON.stringify(equ);
                            if (window["console"] != undefined) {
                            }
                            if (!!window['external'] && !!window['external']['callWin']) {
                                window['external'].callWin(equStr);
                            }
                        }
                        if (resultMap["popupEquStates"] != null) {
                            listView.refreshState(resultMap["popupEquStates"]);
                        }
                    }
                }
            });
        }
    }
    function callJS(jsonData) {
        var jsonData = JSON.parse(jsonData);
        var methodName = jsonData.methodName;
        // $("#searchParam").val(JSON.stringify(jsonData));
        if ("JumpBaiduMap" == methodName) {
            moralMap.callJS(jsonData);
        } else if ("RefreshState" == methodName) {
            var states = jsonData.states;
            moralMap.refreshState(states);
        } else if ("DeliverSensors" == methodName) {
            moralMap.showSensors(jsonData);
        }
    }
</script>