NBDXSY/LeaRun.Application/LeaRun.Application.Web/Areas/DMAManage/Views/PartitionManage/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;
    var DMAID = 0;
    function GetTree() {
        var item = {
            height: $(window).height() - 52,
            url: "../../DMAManage/Partitions/GetTreeJson",
            showcheck: false,
            isexpand: true,
            onnodeclick: function (item) {
                PointTreeCode = item.id;
                DMAID = item.value;
                $.ajax({
                    url: "../../DMAManage/PartitionManage/GetDMAData",
                    type: "get",
                    data: { DMACode: item.id},
                    datatype: "json",
                    success: function (data) {
                        var data = JSON.parse(data);
                        $("#DMAID").val(data.DMAID);
                        $("#DMACode").val(data.DMACode);
                        $("#DMAName").val(data.DMAName);
                        $("#FillColor").val(data.FillColor);
                        $(".minicolors-swatch-color").css({"background-color": data.FillColor});
                        $("#PipeConnectionPoint").val(data.PipeConnectionPoint);
                        $("#MainPipeLength").val(data.MainPipeLength);
                        $("#BranchPipeLength").val(data.BranchPipeLength);
                        $("#PipeFactor").val(data.PipeFactor);
                        $("#N1").val(data.N1);
                        $("#PipeVolume").val(data.PipeVolume);
                        $("#r_title").html('<i style="font-size: 20px;margin-right: 5px" class="fa fa-home"></i>编辑：' + data.DMAName);
                        $("#formLi").css({ "width": "40%", "display": "block" });
                        $("#mapLi").css({ "width": "60%" });
                    }
                });
                if (showPolygon) {
                    map.removeOverlay(showPolygon);
                }
                var id = item.id.replace(/^\s+|\s+$/gm, '');
                if (overlays[id] && $('#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: $("#FillColor").val(), strokeWeight: 1, strokeOpacity: 0.5, fillColor: data[i].FillColor });
                map.addOverlay(polygon);
                overlays[DMACode] = polygon;
            }
        }
    }

    // 修改提交表单
    function confirmData() {
        if (!$('#form1').Validform()) {
            return false;
        }
        var postData = $("#form1").GetWebControls(keyValue);
        //postData 格式化 将&nbsp; 替换为 ""
        for (var i in postData) {
            if (postData[i] == "&nbsp;") {
                postData[i] = "";
            }
        }
        $.SaveForm({
            url: "../../DMAManage/PartitionManage/EditDMAData",
            param: {"data": JSON.stringify(postData) },
            loading: "正在保存数据...",
            success: function () {
                GetTree();
                var pg = PointTreeCode.replace(/^\s+|\s+$/gm, '');
                if (overlays[pg]) {
                    overlays[pg].setFillColor($('#FillColor').val());
                }
            }
        })
    }

    // 新建分区
    function addDMA() {
        if (PointTreeCode.length > 35) {
            return alert("只能创建8级分区！");
        }
        dialogOpen({
            id: "Form",
            title: '新建分区',
            url: '/DMAManage/PartitionManage/AddDMAForm?keyValue=' + PointTreeCode + "&DMAID=" + DMAID,
            width: "750px",
            height: "500px",
            callBack: function (iframeId) {
                top.frames[iframeId].AcceptClick();
            }
        });
    }

    // 删除分区
    function deleteDMA() {
        var DMAID = $("#DMAID").val();
        var dmaCode = $("#DMACode").val();
        $.RemoveForm({
            url: "/DMAManage/PartitionManage/DeleteDMAData",
            param: { keyValue: DMAID + "|" +dmaCode },
            success: function (data) {
                $("#formLi").css({ "width": "0%", "display": "none" });
                $("#mapLi").css({ "width": "100%" });
                $("#r_title").html('<i style="font-size: 20px;margin-right: 5px" class="fa fa-home"></i>分区管理');
                GetTree();
                map.removeOverlay(overlays[dmaCode.replace(/^\s+|\s+$/gm, '')]);
                if (showPolygon) {
                    map.removeOverlay(showPolygon);
                }
            }
        })
    }

    // checkbox change事件监听
    function checkBoxChange() {
        // dma分区是否展示
        $("#cdma").change(function (e) {
            if ($('#cdma').is(':checked')) {
                showAllDMA();
            } else {
                for (var overlay in overlays) {
                    map.removeOverlay(overlays[overlay]);
                }
                if (showPolygon) {
                    map.removeOverlay(showPolygon);
                }
            }
        });
    }
    // 显示所有dma分区
    function showAllDMA() {
        for (var overlay in overlays) {
            map.addOverlay(overlays[overlay]);
        }
        // 选中高亮显示
        addOnePolygon();
    }


    // 获取中心点
    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 addOnePolygon() {
        var paths = overlays[PointTreeCode].getPath();
        var polygon = new BMap.Polygon(paths, { strokeColor: "red", strokeWeight: 3, strokeOpacity: 1, FillOpacity: "0.0", fillColor: "none" });
        map.addOverlay(polygon);
        showPolygon = polygon;
        var center = getCenterPoint(paths);
        map.setZoom(12);
        map.panTo(new BMap.Point(center.lng, center.lat), 2000);
    }

</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="pAdd" class="btn btn-default" onclick="addDMA()"><i class="fa fa-plus"></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="formLi" style="width: 0%; display: none">
                                <table id="form1" class="form" style="width: 95%">
                                    <tr style="display: none">
                                        <th class="formTitle">分区ID</th>
                                        <td class="formValue">
                                            <input id="DMAID" type="text" class="form-control" readonly />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="formTitle">分区编码</th>
                                        <td class="formValue">
                                            <input id="DMACode" type="text" class="form-control" isvalid="no" checkexpession="NotNull" errormsg="分区编码" placeholder="请输入分区编码" readonly />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="formTitle">分区名称<font face="宋体">*</font></th>
                                        <td class="formValue">
                                            <input id="DMAName" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" errormsg="请输入分区名称" placeholder="请输入分区名称"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="formTitle">填充颜色</th>
                                        <td class="formValue" >
                                            <input type="text" style="height: 35px" id="FillColor" class="form-control fill_Color">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="formTitle">管道连接点数(个)</th>
                                        <td class="formValue">
                                            <input id="PipeConnectionPoint" type="text" class="form-control" checkexpession="NumOrNull" isvalid="yes" placeholder="请输入管道连接点数"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="formTitle">主供水管道长度(KM)</th>
                                        <td class="formValue" >
                                            <input id="MainPipeLength" type="text" class="form-control" checkexpession="DoubleOrNull" isvalid="yes" placeholder="请输入主供水管道长度" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="formTitle">支供水管道长度(KM)</th>
                                        <td class="formValue" >
                                            <input id="BranchPipeLength" type="text" class="form-control" checkexpession="DoubleOrNull" isvalid="yes" placeholder="请输入支供水管道长度" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="formTitle">管道设施状况因子</th>
                                        <td class="formValue" >
                                            <input id="PipeFactor" type="text" class="form-control" checkexpession="DoubleOrNull" isvalid="yes" placeholder="请输入管道设施状况因子" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="formTitle">渗透幂指数 N1</th>
                                        <td class="formValue" >
                                            <input id="N1" type="text" class="form-control" checkexpession="DoubleOrNull" isvalid="yes" placeholder="请输入渗透幂指数" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="formTitle">干管用户管道容积(M3)</th>
                                        <td class="formValue" >
                                            <input id="PipeVolume" type="text" class="form-control" checkexpession="DoubleOrNull" isvalid="yes" placeholder="请输入干管用户管道容积" />
                                        </td>
                                    </tr>
                                </table>
                                <div style="margin-top: 30px">
                                    <a id="pConfirm" class="btn btn-primary" onclick="confirmData()">&nbsp;&nbsp;确定&nbsp;&nbsp;</a>
                                    <a style="margin-left: 50px" id="pDelete" class="btn btn-danger" onclick="deleteDMA()">&nbsp;&nbsp;删除&nbsp;&nbsp;</a>
                                </div>
                            </li>
                            <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>