添加工具栏

hdw

2018-11-09 688d0f8c596e0f605974899eeb11a170ecb67866

添加工具栏

 gx_tieta/WebRoot/batt-state-manage.jsp

@@ -113,11 +113,11 @@
                    </table>

                    <table class="condi-opt">

                <tr>

                    <td><input type="checkbox" id="ALM_TYPE_BTS9100S_POFF_ComError" name=""  value=2 class="" />停电</td>        <!-- 停电 -->

                    <td><input type="checkbox" id="ALM_TYPE_BTS9100S_XUHANG_ComError" name=""  value=4 class="">续航</td>        <!-- 掉站 -->

                    <td><input type="checkbox" id="ALM_TYPE_BTS9100S_FADIAN_ComError" name=""  value=8 class="" />发电</td>    <!-- 发电 -->

                    <td><input type="checkbox" id="ALM_TYPE_BTS9100S_DOOROPEN_ComError"    name="" value=16 class="" >开门异常</td>

                    <td><input type="checkbox" id="ALM_TYPE_BTS9100S_DIAOZHAN_ComError" name=""  value=32 class="">掉站</td>        <!-- 掉站 -->

                    <td><input type="checkbox" id="ALM_TYPE_BTS9100S_POFF_ComError" name=""  value=2 class="" /><span class="checkbox-label">停电</span></td>            <!-- 停电 -->

                    <td><input type="checkbox" id="ALM_TYPE_BTS9100S_XUHANG_ComError" name=""  value=4 class=""><span class="checkbox-label">续航</span></td>            <!-- 掉站 -->

                    <td><input type="checkbox" id="ALM_TYPE_BTS9100S_FADIAN_ComError" name=""  value=8 class="" /><span class="checkbox-label">发电</span></td>        <!-- 发电 -->

                    <td><input type="checkbox" id="ALM_TYPE_BTS9100S_DOOROPEN_ComError"    name="" value=16 class="" ><span class="checkbox-label">开门异常</span></td>    <!-- 开门异常 -->

                    <td><input type="checkbox" id="ALM_TYPE_BTS9100S_DIAOZHAN_ComError" name=""  value=32 class=""><span class="checkbox-label">掉站</span></td>        <!-- 掉站 -->

                    

                </tr>

            </table>


 gx_tieta/WebRoot/css/index_layout.css

@@ -474,7 +474,8 @@
    font-weight: bold;

}

.map-info-btn-icon {

    margin-left: 15px;

    float: right;

    margin-right: 10px;

    font-size: 18px;

    vertical-align: middle;

    cursor: pointer;

@@ -491,10 +492,13 @@
    margin-top: 8px;

    margin-bottom: 8px;

}

.map-info-detail table caption {

    text-indent: 1em;

}

.map-info-detail table td {

    padding: 4px 0;

}

.map-info-detail table select {

.map-info-detail table select, .map-info-detail table input {

    width: 96%;

    height: 24px;

    border: 1px solid #CCCCCC;

@@ -503,7 +507,7 @@
    padding: 8px 0;

    border-top: 1px solid #CCCCCC;

}

.map-info-footer button {

.map-info-footer button, .btn-container button {

    padding:6px 20px;

    border: 1px solid #c1c1c1;

    background: #FFFFFF;

@@ -513,10 +517,13 @@
    background: linear-gradient(top, #ffffff, #f4f4f4);

    color: #555;

}

.map-info-footer button:hover {

.map-info-footer button:hover, .btn-container button:hover {

    background: #f4f4f4;

    color: #555;

}







#mapImgDesc span {

    line-height: 30px;

    margin-left: 6px;


 gx_tieta/WebRoot/index.jsp

@@ -112,38 +112,54 @@
            

            <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>地图工具</span>

                            <span class="map-info-btn-icon" id="showMapInfoDetail" title="详情"><i class="fa fa-angle-double-down"></i></span>

                        </div>

                        <div class="map-info-detail">

                            <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="w8em alg-c">限制显示区域:</td>

                                        <td>

                                            <select name="mapVsAreaSel" id="mapVsAreaSel">

                                                <option>中国</option>

                                                <option>中国-广西</option>

                                            </select>

                                        </td>

                                                    <td class="w4em alg-c f-bold">经度:</td>

                                                    <td><input type="text" class="lng"></td>

                                    </tr>

                                    <tr>

                                        <td class="w8em alg-c">机房显示类型:</td>

                                        <td>

                                            <select name="mapIconStyleSel" id="mapIconStyleSel">

                                                <option>全部</option>

                                            </select>

                                                    <td class="w4em alg-c f-bold">纬度:</td>

                                                    <td><input type="text" class="lat"></td>

                                                </tr>

                                                <tr>

                                                    <td colspan="2" class="alg-r btn-container">

                                                        <button type="button" value="添加" id="mapToolAddHome" class="mrr8">添加</button>

                                        </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>

                                </div>

                                <div class="layui-colla-item">

                                    <h2 class="layui-colla-title">定位机房</h2>

                                    <div class="layui-colla-content">

                                        <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>

                        </div>

                    </div>

@@ -1788,7 +1804,7 @@
        });

        magImgStyles.push('');

        // 根据当前内容更新地图图标

        searchStation();

        //searchStation();

    }

    

    // 检测当前图标是否符合

@@ -2308,6 +2324,9 @@
                    bmap.queryInRect(map, createMapDot);

                    updateStation();

                    

                    // 更新小工具搜索机房功能

                    updateSearchSource(allStation);

					
                    // 是否第一次执行

                    if(setRect) {

                        map.addEventListener("moveend", bmap.queryInRect.bind({},map, createMapDot));  // 拖动

@@ -2415,7 +2434,7 @@
    

    // 查询机房面板信息

    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('面板信息查询失败！');

@@ -3461,10 +3480,11 @@
        });

    });

    

    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() {

@@ -3603,9 +3623,7 @@
            });

        }

        

        // 地图左上方面板模块

        var mapViewArea = GLOBAL.BMap.mapViewArea;    // 地图显示区域的信息

        // 点击面板上方的小图标显示设定信息

        // 地图左上方面板模块-点击面板上方的小图标显示设定信息

        $('#showMapInfoDetail').click(function() {

            $('.map-info-detail').slideToggle();

        });

@@ -3615,50 +3633,49 @@
            $('.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);

        });

		
        // 设置地图的可视区域

        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);

            }

        // 定义机房查询信息

        $( "#mapToolSearch" ).autocomplete({

            source: [],

            select: function(event, ui) {

                $('#mapToolSearchBtn').data('homeInfo', ui.item);    // 设置机房信息内容

        }

    });

		
        // 点击查看homeInfo的值

        $('#mapToolSearchBtn').click(function() {

            var homeInfo = $(this).data('homeInfo');

            if(homeInfo) {

                searchPanelInfo(homeInfo);

                $(this).data('homeInfo', 0);

                $( "#mapToolSearch" ).val('');

            }else {

                layer.msg('请重新输入机房信息！');

                $( "#mapToolSearch" ).val("");

            }

        });

		
    });

	
    // 更新地图工具搜索机房

    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>


 gx_tieta/WebRoot/pages/css/mylayui.css

@@ -149,8 +149,23 @@
    z-index: -1;

}

/* width */

.w260 {

    width: 260px;

}

.w272 {

    width: 272px;

}

.w32 {

    width: 32px;

}

.w3em {

    width: 3em;

}

.w4em {

    width: 4em;

}

.w5em {

    width: 5em;

}

/* mrl */

.mrl8 {

@@ -173,7 +188,19 @@
    width: 100%;

    height: 100%;

}

/* text style */

.f-bold {

    font-weight: bold;

}

/* my layui */

.popup .layui-card-body {

    padding: 0;

}
/* index map style */

.map-info-detail .layui-colla-title {

    height: 32px;

    line-height: 32px;

}

.map-info-detail .layui-colla-content {

    padding: 0;

}