| | |
| | |
|
| | | <div class="nav-map small">
|
| | | <!-- 地图内容筛选 -->
|
| | | <div class="map-info-panel-left">
|
| | | <div class="map-info-panel-left w300">
|
| | | <div class="map-info-panel-content">
|
| | | <div class="map-info">
|
| | | <span>限制显示区域: </span><span class="k-point red" id="mapVsArea">中国</span>
|
| | | <span class="mr5">机房显示类型:</span><span class="k-point red" id="mapIconStyle">全部</span>
|
| | | <span class="map-info-btn-icon" id="showMapInfoDetail" title="详情"><i class="fa fa-angle-double-down"></i></span>
|
| | | <div class="map-info" id="showMapInfoDetail">
|
| | | <span>地图工具</span>
|
| | | <span class="map-info-btn-icon" title="详情"><i class="fa fa-angle-double-down"></i></span>
|
| | | </div>
|
| | | <div class="map-info-detail">
|
| | | <table>
|
| | | <tbody>
|
| | | <tr>
|
| | | <td class="w8em alg-c">限制显示区域:</td>
|
| | | <td>
|
| | | <select name="mapVsAreaSel" id="mapVsAreaSel">
|
| | | <option>中国</option>
|
| | | <option>中国-广西</option>
|
| | | </select>
|
| | | </td>
|
| | | </tr>
|
| | | <tr>
|
| | | <td class="w8em alg-c">机房显示类型:</td>
|
| | | <td>
|
| | | <select name="mapIconStyleSel" id="mapIconStyleSel">
|
| | | <option>全部</option>
|
| | | </select>
|
| | | </td>
|
| | | </tr>
|
| | | </tbody>
|
| | | </table>
|
| | | <div class="map-info-footer alg-r">
|
| | | <button type="button" class="mr10 map-panel-hide" value="确定" id="mapPanelEn">确定</button>
|
| | | <button type="button" class="mr10 map-panel-hide" value="隐藏">隐藏</button>
|
| | | <div class="layui-collapse" lay-filter="test" lay-accordion="">
|
| | | <div class="layui-colla-item">
|
| | | <h2 class="layui-colla-title">定位机房</h2>
|
| | | <div class="layui-colla-content layui-show">
|
| | | <table>
|
| | | <tbody>
|
| | | <tr>
|
| | | <td class="w5em alg-c f-bold">机房名称:</td>
|
| | | <td><input type="text" id="mapToolSearch"></td>
|
| | | </tr>
|
| | | <tr>
|
| | | <td colspan="2" class="alg-r btn-container">
|
| | | <button type="button" value="搜索" id="mapToolSearchBtn" class="mrr8">搜索</button>
|
| | | </td>
|
| | | </tr>
|
| | | </tbody>
|
| | | </table>
|
| | | </div>
|
| | | </div>
|
| | | <div class="layui-colla-item" id="permitAddHome">
|
| | | <h2 class="layui-colla-title">添加机房</h2>
|
| | | <div class="layui-colla-content">
|
| | | <table id="mapToolAddHome">
|
| | | <tbody>
|
| | | <tr>
|
| | | <td class="w4em alg-c f-bold">经度:</td>
|
| | | <td><input type="text" class="lng"></td>
|
| | | </tr>
|
| | | <tr>
|
| | | <td class="w4em alg-c f-bold">纬度:</td>
|
| | | <td><input type="text" class="lat"></td>
|
| | | </tr>
|
| | | <tr>
|
| | | <td class="w4em alg-c f-bold">类型:</td>
|
| | | <td>
|
| | | <input type="radio" class="pointStyle" name="pointStyle" value="0" checked><span class="mrr8">GPS</span>
|
| | | <input type="radio" class="pointStyle" name="pointStyle" value="1"><span class="mrr8">百度</span>
|
| | | <input type="radio" class="pointStyle" name="pointStyle" value="2"><span class="mrr8">腾讯/高德</span>
|
| | | </td>
|
| | | </tr>
|
| | | <tr>
|
| | | <td colspan="2" class="alg-r btn-container">
|
| | | <button type="button" value="添加" id="mapToolAddHomeBtn" class="mrr8">添加</button>
|
| | | </td>
|
| | | </tr>
|
| | | </tbody>
|
| | | </table>
|
| | | </div>
|
| | | </div>
|
| | | </div>
|
| | | </div>
|
| | | </div>
|
| | |
| | | </div>
|
| | | </div>
|
| | | <input type="hidden" id="user_logo" value="<%=user_logo %>">
|
| | | <div id="homeInfoIframeData"></div>
|
| | | <!--清除浮动-->
|
| | | <div class="clear"></div>
|
| | | <script type="text/javascript" src="pages/js/base.js"></script>
|
| | |
| | | <script type="text/javascript" src="js/myConfirm.js"></script>
|
| | | <script type="text/javascript" src="js/loading.js"></script>
|
| | | <script type="text/javascript" src="src/layui.js"></script>
|
| | | <script type="text/javascript" src="src/layui.all.js"></script>
|
| | | <script type="text/javascript" src="pages/js/pages/homeInfo.js"></script>
|
| | | <script type="text/javascript">
|
| | | var permits;
|
| | | <% Object obj=session.getAttribute("permits");
|
| | |
| | | });
|
| | | magImgStyles.push('');
|
| | | // 根据当前内容更新地图图标
|
| | | searchStation();
|
| | | //searchStation();
|
| | | }
|
| | |
|
| | | // 检测当前图标是否符合
|
| | |
| | | bmap.queryInRect(map, createMapDot);
|
| | | updateStation();
|
| | |
|
| | | // 更新小工具搜索机房功能
|
| | | updateSearchSource(allStation);
|
| | | |
| | | // 是否第一次执行
|
| | | if(setRect) {
|
| | | map.addEventListener("moveend", bmap.queryInRect.bind({},map, createMapDot)); // 拖动
|
| | |
| | |
|
| | | // 查询机房面板信息
|
| | | function searchPanelInfo(data) {
|
| | | var point = data.point;
|
| | | var point = new BMap.Point(data.point.lng, data.point.lat);
|
| | | var stationInfo = getStaionByPoint(point);
|
| | | if(!stationInfo) {
|
| | | alert('面板信息查询失败!');
|
| | |
| | | var content = '<div style="padding:6px;"><span>蓄电池组告警数目:</span>'+data.code+'<a style="margin-left: 14px" href="javascript:loadToWarnPage();">详情>></a></div>'+
|
| | | '<div style="padding:6px;"><span>蓄电池组落后数目:</span>'+data.sum+'<a style="margin-left: 14px" href="javascript:loadToBehindPage();">详情>></a></div>'+
|
| | | '<div style="padding:6px;"><span>蓄电池组延时数目:</span>'+data.newsum+'<a style="margin-left: 14px" href="javascript:loadToDischargeDelay();">详情>></a></div>'+
|
| | | '<div style="padding:6px"><a href="javascript:loadToRealTime();">实时数据</a><a style="margin-left: 20px" href="javascript:loadToOldTime();">历史数据</a></div>'+
|
| | | '<div style="padding:6px"><a href="javascript:loadToRealTime();">实时数据</a><a style="margin-left: 20px" href="javascript:loadToOldTime();">历史数据</a>'+
|
| | | '<a style="margin-left: 20px" href="javascript:showHomeInfo('+data.data.StationId+');">基站信息</a></div>'+
|
| | | '<div style="padding:6px;"><span>地址:</span>'+data.data.Address+'</div>'+
|
| | | '<input type="hidden" class="ipt-hide home" value="'+data.data.StationName+'">'+
|
| | | '<input type="hidden" class="ipt-hide province" value="'+data.data.stationName1+'">'+
|
| | | '<input type="hidden" class="ipt-hide county" value="'+data.data.stationName5+'">'+
|
| | | '<input type="hidden" class="ipt-hide sid" value="'+data.data.StationId+'">'+
|
| | | '<input type="hidden" class="ipt-hide city" value="'+data.data.stationName2+'">';
|
| | |
|
| | | var list = {
|
| | |
| | | });
|
| | | });
|
| | |
|
| | | layui.use(['form', 'layer', 'laytpl'], function() {
|
| | | layui.use(['form', 'layer', 'laytpl', 'element'], function() {
|
| | | var form = layui.form;
|
| | | var layer = layui.layer;
|
| | | var laytpl = layui.laytpl;
|
| | | var element = layui.element;
|
| | |
|
| | | // 点击饼状图配置
|
| | | $('#faCog').click(function() {
|
| | |
| | | });
|
| | | }
|
| | |
|
| | | // 地图左上方面板模块
|
| | | var mapViewArea = GLOBAL.BMap.mapViewArea; // 地图显示区域的信息
|
| | | // 点击面板上方的小图标显示设定信息
|
| | | // 根据权限更新地图工具内容
|
| | | var permitAddHome = getPermit('batt_map_edit_permit', permits); // 添加机房的权限
|
| | | // 没有添加机房的权限
|
| | | if(!permitAddHome) {
|
| | | $('#permitAddHome').remove();
|
| | | }
|
| | | |
| | | // 地图左上方面板模块-点击面板上方的小图标显示设定信息
|
| | | $('#showMapInfoDetail').click(function() {
|
| | | $('.map-info-detail').slideToggle();
|
| | | });
|
| | |
| | | $('.map-info-detail').slideUp();
|
| | | });
|
| | |
|
| | | // 遍历mapViewArea获取mapVsAreaSel下拉框的值
|
| | | var mapVsAreaSel = $('#mapVsAreaSel');
|
| | | var mapVsAreaSelOpts = [];
|
| | | for(var i=0; i<mapViewArea.length; i++) {
|
| | | var _data = mapViewArea[i];
|
| | | var tmp = getOptionsData(_data.name, _data.area, _data);
|
| | | mapVsAreaSelOpts.push(tmp);
|
| | | }
|
| | | // 生成面板中的mapVsAreaSel
|
| | | createOptions(mapVsAreaSel, mapVsAreaSelOpts);
|
| | | // 显示默认区域-中国
|
| | | setMapViewArea(mapViewArea[0]);
|
| | | centerMapByPoint(map); // 根据当前用户设定的位置显示中心点
|
| | | // 点击面板确定按钮
|
| | | $('#mapPanelEn').click(function() {
|
| | | var areaData = mapVsAreaSel.find('option:selected').data('attr');
|
| | | |
| | | // 设置头部可视区域的文本
|
| | | $('#mapVsArea').text(areaData.name);
|
| | | |
| | | // 设置可视区域
|
| | | setMapViewArea(areaData);
|
| | | // 内容改变初始话$('#mapToolSearchBtn').data('homeInfo')的值
|
| | | $( "#mapToolSearch" ).on('input propertychange', function(){
|
| | | $('#mapToolSearchBtn').data('homeInfo', 0);
|
| | | });
|
| | | // 定义机房查询信息
|
| | | $( "#mapToolSearch" ).autocomplete({
|
| | | source: [],
|
| | | select: function(event, ui) {
|
| | | $('#mapToolSearchBtn').data('homeInfo', ui.item); // 设置机房信息内容
|
| | | }
|
| | | });
|
| | |
|
| | | // 设置地图的可视区域
|
| | | function setMapViewArea(data) {
|
| | | var left = new BMap.Point(data.left.lng, data.left.lat);
|
| | | var right = new BMap.Point(data.right.lng, data.right.lat);
|
| | | var b = new BMap.Bounds(left, right);
|
| | | |
| | | var cLng = (data.left.lng+data.right.lng)/2;
|
| | | var cLat = (data.left.lat+data.right.lat)/2;
|
| | | var f = new BMap.Point(cLng, cLat);
|
| | | map.panTo(f, {
|
| | | noAnimation: "no"
|
| | | });
|
| | | |
| | | |
| | | try {
|
| | | BMapLib.AreaRestriction.setBounds(map, b);
|
| | | } catch (e) {
|
| | | alert(e);
|
| | | // 点击查看homeInfo的值
|
| | | $('#mapToolSearchBtn').click(function() {
|
| | | var homeInfo = $(this).data('homeInfo');
|
| | | if(homeInfo) {
|
| | | searchPanelInfo(homeInfo);
|
| | | $(this).data('homeInfo', 0);
|
| | | $( "#mapToolSearch" ).val('');
|
| | | }else {
|
| | | layer.msg('请重新输入机房信息!');
|
| | | $( "#mapToolSearch" ).val("");
|
| | | }
|
| | | });
|
| | | |
| | | /* 地图工具添加地图图标 */
|
| | | var mapToolAddHome = $('#mapToolAddHome');
|
| | | var mapToolAddHomeBtn = $('#mapToolAddHomeBtn');
|
| | | |
| | | // 点击地图工具添加地图按钮
|
| | | mapToolAddHomeBtn.click(function() {
|
| | | var lng = mapToolAddHome.find('.lng').val().trim();
|
| | | var lat = mapToolAddHome.find('.lat').val().trim();
|
| | | var pointStyles = mapToolAddHome.find('.pointStyle');
|
| | | var pointStyle = 0;
|
| | | pointStyles.each(function() {
|
| | | if($(this).is(':checked')) {
|
| | | pointStyle = $(this).val();
|
| | | }
|
| | | });
|
| | | if(lng && lat) {
|
| | | var point = getBaiduPoint(lng, lat, pointStyle);
|
| | | var pt = new BMap.Point(point.lon, point.lat);
|
| | | addCommonDot(map, pt);
|
| | | map.centerAndZoom(pt, 18); // 用城市名设置地图中心点
|
| | | }else {
|
| | | layer.msg('请输入经纬度');
|
| | | }
|
| | | |
| | | });
|
| | | |
| | | // 获取百度地图的经纬度
|
| | | function getBaiduPoint(lng, lat, type) {
|
| | | var point = {};
|
| | | lng = Number(lng);
|
| | | lat = Number(lat);
|
| | | var _type = Number(type);
|
| | | switch(_type) {
|
| | | case 0: // GPS原始坐标
|
| | | point = GPS.wgs2bd(lat, lng);
|
| | | break;
|
| | | case 1: // 百度地图坐标
|
| | | point = {
|
| | | lon: lng,
|
| | | lat: lat
|
| | | };
|
| | | break;
|
| | | case 2: // 腾讯/高德
|
| | | point = GPS.bd_encrypt(lat, lng);
|
| | | break;
|
| | | }
|
| | | |
| | | return point;
|
| | | }
|
| | | });
|
| | | |
| | | // 更新地图工具搜索机房
|
| | | function updateSearchSource(data) {
|
| | | var homeSource = [];
|
| | | for(var i=0; i<data.length; i++) {
|
| | | var _data = data[i];
|
| | | var tmp = {
|
| | | label: _data.title+'('+_data.sId+')',
|
| | | point: {
|
| | | lng: _data.lng,
|
| | | lat: _data.lat
|
| | | }
|
| | | };
|
| | | homeSource.push(tmp);
|
| | | }
|
| | | |
| | | $( "#mapToolSearch" ).autocomplete('option', 'source', homeSource);
|
| | | }
|
| | | </script>
|
| | | </html>
|