NBDXSY/LeaRun.Application/LeaRun.Application.Web/Areas/DMAManage/Views/PartitionBrowse/Index.cshtml


@{
    ViewBag.Title = "历史记录查询";
    Layout = "~/Views/Shared/_LayoutIndex.cshtml";
}

<style>
    .partitionsContainer ul {
        width: 100%;
        height: 100%;
    }

    .partitionsContainer li {
        float: left;
        height: 100%;
        line-height: 30px;
        text-align: center;
        list-style: none;
        border: 1px solid gray;
    }

    table tr td {
        height: 50px;
    }

    .formTitle {
        width: 130px  !important;
    }

    .checkbox-wrap{
        width: 100%;
        position: relative;
        margin: 0 auto;
        background-color: white;
    }
    input[type="checkbox"]{
        display: none;
    }
    input[type="checkbox"]+label {
        display: inline-block;
        width: 80%;
        margin-top: 10px;
        margin-left: 5px;
        text-align: left;
        -webkit-box-sizing: border-box;
    }

    label::before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        background: #4C58A4;
        vertical-align: middle;
        -webkit-border-radius: 10%;
        margin-right: 5px;
        -webkit-box-sizing:border-box;
        -webkit-transition:background ease-in .5s
    }

    input[type="checkbox"]:checked+label::before{
          /* background-color: rgb(53, 183, 111); */
          content: "√";
          color: #fff;
          font-size: 20px;
          text-align: center;
          line-height: 20px;
          cursor: pointer;
        /* border: 5px #EEEEEE solid; */
    }

    .clable {
        font-size: 14px;
        color: #808080;
        font-weight: bold;
        cursor: pointer;
    }

</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=@System.Configuration.ConfigurationManager.AppSettings["BaiduMapAK"]"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />

<script>
    "use strict"
    var keyValue = request('keyValue');
    var overlays = {};
    var showPolygon = [];
    var map;
    $(document).ready(function () {
        InitialPage();
        GetTree();
        initBaiduMap();
        InitialColor();
        checkBoxChange();
    });
    // 初始化颜色
    function InitialColor() {
        $('.fill_Color').each(function () {
            $(this).minicolors({
                control: $(this).attr('data-control') || 'hue',
                defaultValue: $(this).attr('data-defaultValue') || '',
                inline: $(this).attr('data-inline') === 'true',
                letterCase: $(this).attr('data-letterCase') || 'lowercase',
                opacity: $(this).attr('data-opacity'),
                position: $(this).attr('data-position') || 'bottom left',
                change: function (hex, opacity) {
                    if (!hex) return;
                    if (opacity) hex += ', ' + opacity;
                    try {
                        console.log(hex);
                    } catch (e) { }
                },
                theme: 'bootstrap'
            });
        });
    }
    //初始化页面
    function InitialPage() {
        // 设置
        $(".partitionsContainer").css({ "height": ($(window).height() - 80) + "px" });
        //layout布局
        $('#layout').layout({
            applyDemoStyles: true,
            onresize: function () {
                $(window).resize();
            }
        });
        // resize重设(表格、树形)宽高
        $(window).resize(function (e) {
            window.setTimeout(function () {
                $("#itemTree").setTreeHeight($(window).height() - 52);
                $(".partitionsContainer").css({ "height": ($(window).height() - 80) + "px" });
            }, 200);
            e.stopPropagation();
        });
    }

    //加载树
    var PointTreeCode = 0;
    function GetTree() {
        var item = {
            height: $(window).height() - 52,
            url: "../../DMAManage/Partitions/GetTreeJson",
            showcheck: false,
            isexpand: true,
            onnodeclick: function (item) {
                PointTreeCode = item.id;
                $.ajax({
                    url: "../../DMAManage/PartitionManage/GetDMAData",
                    type: "get",
                    data: { DMACode: item.id},
                    datatype: "json",
                    success: function (data) {
                        var data = JSON.parse(data);
                        $("#r_title").html('<i style="font-size: 20px;margin-right: 5px" class="fa fa-home"></i>' + data.DMAName);
                    }
                });
                removeAllPolygon();
                var id = item.id.replace(/^\s+|\s+$/gm, '');
                if (overlays[id] && overlays[id].polygon && $('#cdma').is(':checked')) {
                    addOnePolygon();
                }
            }
        };

        //初始化
        $("#itemTree").treeview(item);
    }

    // 初始化百度地图
    function initBaiduMap() {
        map = new BMap.Map("allmap");
        var geoc = new BMap.Geocoder();   //地址解析对象
        var point = new BMap.Point("@System.Configuration.ConfigurationManager.AppSettings["LngAndLat"].Split('|')[0]", "@System.Configuration.ConfigurationManager.AppSettings["LngAndLat"].Split('|')[1]");
        map.centerAndZoom(point, 12); // 中心点
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        var bottom_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });// 左上角，添加比例尺
        map.addControl(bottom_left_control);
        map.addControl(new BMap.MapTypeControl({
            mapTypes: [
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
                //BMAP_PERSPECTIVE_MAP
            ],
            anchor: BMAP_ANCHOR_TOP_LEFT
        }));
        // 获取分区数据
        $.ajax({
            url: "/DMAManage/PartitionDraw/GetAllPartitions",
            type: "get",
            data: {},
            datatype: "json",
            success: function (data) {
                var data = JSON.parse(data);
                drawAll(data, map);
            }
        });
    }

    // 绘制所有可以显示的区域
    function drawAll(data) {
        for (var i = 0; i < data.length; i++) {
            var DMACode = data[i].DMACode.replace(/^\s+|\s+$/gm, '');
            if (data[i].DMACoordinate) {
                var points = data[i].DMACoordinate.split("|");
                var paths = [];
                for (var j = 0 ; j < points.length; j++) {
                    paths.push(new BMap.Point(points[j].split(",")[0], points[j].split(",")[1]));
                }
                var polygon = new BMap.Polygon(paths, { strokeColor: data[i].FillColor, strokeWeight: 1, strokeOpacity: 0.5, fillColor: data[i].FillColor });
                map.addOverlay(polygon);
                overlays[DMACode] = { color: data[i].FillColor, polygon: polygon};
            }
        }
    }
    // checkbox change事件监听
    function checkBoxChange() {
        // dma分区是否展示
        $("#cdma").change(function (e) {
            if ($('#cdma').is(':checked')) {
                if (overlays[PointTreeCode]) {
                    addOnePolygon();
                }
                if (PointTreeCode === 0) {
                    showAllDMA();
                }
            } else {
                removeAllPolygon();
            }
        });
    }

    // 设置单个区域
    function addOnePolygon() {
        var paths = overlays[PointTreeCode].polygon.getPath();
        var polygon = new BMap.Polygon(paths, { strokeColor: overlays[PointTreeCode].color, strokeWeight: 3, strokeOpacity: 0.5, FillOpacity: 0.5, fillColor: overlays[PointTreeCode].color });
        map.addOverlay(polygon);
        showPolygon = polygon;
        var center = getCenterPoint(paths);
        map.setZoom(14);
        map.panTo(new BMap.Point(center.lng, center.lat), 2000);
    }

    // 获取中心点
    function getCenterPoint(path) {
        var x = 0.0;
        var y = 0.0;
        for (var i = 0; i < path.length; i++) {
            x = x + parseFloat(path[i].lng);
            y = y + parseFloat(path[i].lat);
        }
        x = x / path.length;
        y = y / path.length;
        return { lng: x, lat: y }
    }

    // 清除所有的区域
    function removeAllPolygon() {
        for (var overlay in overlays) {
            map.removeOverlay(overlays[overlay].polygon);
        }
        if (showPolygon) {
            map.removeOverlay(showPolygon);
        }
    }
    // 显示所有dma分区
    function showAllDMA() {
        for (var overlay in overlays) {
            map.addOverlay(overlays[overlay].polygon);
        }
    }

    // 设置显示全部
    function getAllPolygon() {
        map.setZoom(12);
        showAllDMA();
    }

</script>

<div class="ui-layout" id="layout" style="height: 100%; width: 100%;">
    <div class="ui-layout-west">
        <div class="west-Panel">
            <div class="panel-Title">分区列表</div>
            <div id="itemTree"></div>
        </div>
       
    </div>
    <div class="ui-layout-center">
        <div class="center-Panel">
            <div id="tabs">
                <div id="tabs-1">
                    <div class="titlePanel">
                        <div class="title-search">
                            <table>
                                <tr>
                                    <td id="r_title" style="padding-left: 10px;font-size: 16px;font-weight: bold;color: #4C58A4">
                                        <i style="font-size: 20px;margin-right: 5px" class="fa fa-home"></i>分区总览
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="toolbar">
                            <div class="btn-group">
                                <a id="pAll" class="btn btn-default" onclick="getAllPolygon()"><i class="fa fa-file-text-o"></i>&nbsp;全部</a>
                                <a id="pReplace" class="btn btn-default" onclick="reload();"><i class="fa fa-refresh"></i>&nbsp;刷新</a>
                            </div>
                        </div>
                    </div>
                    <div class="partitionsContainer">
                        <ul>
                            <li id="mapLi" style="width: 100%">
                                <div id='allmap' style='width: 100%; height: 100%;'></div>
                                <div style="position:absolute;top: 80px;right: 20px;background-color: white;width: 130px;height: 90px;">
                                    <div class="checkbox-wrap">
                                        <input type="checkbox" checked name="choose" id="cdma">
                                        <label class="clable" for="cdma">DMA分区</label>
                                        <input type="checkbox" checked name="choose" id="cpipe">
                                        <label class="clable" for="cpipe">管网</label>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>