puti
/
snd-escloud


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
							<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
    <meta charset="UTF-8">
    <title>地图展示</title>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/static/h-ui/css/H-ui.min.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/static/h-ui.admin/css/H-ui.admin.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/lib/Hui-iconfont/1.0.8/iconfont.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/extend/iconfont/iconfont.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/static/h-ui.admin/skin/blue/skin.css}" id="skin" />
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/static/h-ui.admin/css/style.css}" />
    <link th:href="@{/h-ui/lib/lightbox2/2.8.1/css/lightbox.css}" rel="stylesheet" type="text/css" >
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/lib/select2/select2.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/lib/webuploader/0.1.5/webuploader.css}"/>
    <link rel="stylesheet" th:href="@{/h-ui/lib/kindeditor-4.1.7/themes/default/default.css}" />
    <link rel="stylesheet"  th:href="@{/h-ui/lib/kindeditor-4.1.7/plugins/code/prettify.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/static/zoom.css}" />

    <link rel="stylesheet" type="text/css" th:href="'http://'+*{areaShowIp}+'/skymapapi/leaflet/leaflet.css'">
    <link rel="stylesheet" type="text/css"
          th:href="'http://'+*{areaShowIp}+'/skymapapi/leaflet/plugin/leafletpm/leaflet.pm.css'">
    <link rel="stylesheet" type="text/css"
          th:href="'http://'+*{areaShowIp}+'/skymapapi/leaflet/plugin/grouplayer/leaflet.groupedlayercontrol.css'">

    <link rel="stylesheet" type="text/css" th:href="'http://'+*{areaShowIp}+'/skymapapi/assets/bootstrap.css'">
    <link rel="stylesheet" type="text/css" th:href="'http://'+*{areaShowIp}+'/skymapapi/demo/industry.css'">
    <link rel="stylesheet" type="text/css" th:href="'http://'+*{areaShowIp}+'/skymapapi/demo/industrypark.css'">
    <script type="text/javascript" th:src="'http://'+*{areaShowIp}+'/skymapapi/assets/jquery-2.1.1.min.js'"></script>
    <script th:src="'http://'+*{areaShowIp}+'/skymapapi/assets/bootstrap.min.js'"></script>
    <script type="text/javascript" th:src="'http://'+*{areaShowIp}+'/skymapapi/require.js'"
            th:attr="data-main='http://'+*{areaShowIp}+'/skymapapi/release/industrymap.1.1.0.js'"></script>
    <style>
        .breadcrumb > li + li:before {
            color: #CCCCCC;
            content: "> ";
            padding: 0;
        }

        .main {
            padding-bottom: 0;
        }

        .breadcrumb {
            padding: 0 30px
        }
    </style>
</head>

<body layout:fragment="content">
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i>
    首页
    <span class="c-gray en">&gt;</span>区域展示
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="Hui-iconfont">&#xe68f;</i>
    </a>
</nav>
<!-- 主体内容 -->
<div class="main">
    <div>
        <!--区域展示-->
        <div class="centerContent">

            <div id="content">
                <div id="right">
                    <div id="map" style="margin: 0px 10px">
                        <div id="selectArea" th:if="${is_government}">
                            <select id="streetChoice"
                                    onchange="locateToArea(this.options[this.options.selectedIndex].value)">
                                <option value='0'><label>--选择街道--</label></option>
                                <option th:each="item : ${streets}" th:value="${item.name}" th:text="${item.name}">
                            </select>
                            <select id="parkChoice"
                                    onchange="locateToIndustryPark(this.options[this.options.selectedIndex].value)">
                                <option value='0'><label>--选择工业园--</label></option>
                            </select>
                        </div>
                        <div id="selectArea" th:if="${is_street}">
                            <select id="parkChoice"
                                    onchange="locateToIndustryPark(this.options[this.options.selectedIndex].value)">
                                <option value='0'><label>--选择工业园--</label></option>
                                <option th:each="item : ${buildInfos}" th:value="${item.name}" th:text="${item.name}">

                            </select>
                        </div>

                    </div>
                    <div id="infoDiv">
                        <label id="infoDivTitle"></label>
                        <span class="closeBtn" onclick="closeInfoDiv()">&times;</span>
                        <table id="infoTable"></table>
                    </div>
                </div>
            </div>

            <script>
                var local = window.location;
                var contextPath = local.pathname.split("/")[1];
                var pagePath = local.protocol + "//" + local.host + "/" + contextPath;
                $("li[role='presentation']").removeClass();
                $("#area_show").parent().attr("class", "active");
                //创建地图，页面初始化时即刻执行，调用API时必须设置
                function loadCallBack() {
                    var options = {
                        mapdom: "map",
                        ipaddress: "[[${areaShowIp}]]:[[${areaShowPort}]]",
                        mapfilter: "安达科技园",//初始化时如果传值为空字符串，表示为政府用户，工业园用户可以传值如“安达科技园”或者“枫桥工业园”等工业园名称
                        clickMapHandler: function () {
                        },
                        listCompanyHandler: callbackCompanyList,
                        spatialQueryHandler: function (data) {
                            console(data);
                        }
                    };
                    ImageSkyMap.creatMap(options);
                    var is_build = [[${is_build}]];
                    if (is_build) {
                        locateToIndustryPark('[[${build_name}]]')
                    }

                }

                //输入区域板块名称，执行地图局部定位
                //同时查询并输出乡镇街道范围内的工业园数量及面积等信息
                function locateToArea(towname) {
                    if (towname == 0) {
                        document.getElementById("infoDiv").style.display = "none";
                        return;
                    }
                    document.getElementById("infoDiv").style.display = "block";
                    $(".compay_li").removeClass("active");
                    $(".area_li").removeClass("active");
                    $(".search_li").removeClass("active");

                    ImageSkyMap.areaLocate(towname, function (data) {
                        //返回乡镇街道范围内的工业园数量及面积等信息
                        initStreetInfo(towname);
                        //初始化乡镇街道范围内的工业园列表
                        $("#parkChoice option:not(:first)").remove();
                        $.ajax({
                            type: "GET",
                            dataType: "json",
                            url: pagePath + "/area/findBuildByStreetName",
                            data: {
                                "name": towname
                            },
                            success: function (result) {
                                if (result.success) {
                                    $.each(result.obj, function (idx, obj) {
                                        $("#parkChoice").append("<option value='" + obj.name + "'>" + obj.name + "</option>");

                                    });

                                } else {
                                    alert(result.message);
                                }
                            }
                        });
                    });
                }

                //输入工业区名称，执行地图局部定位
                function locateToIndustryPark(parkName) {
                    if (parkName == 0) {
                        document.getElementById("infoDiv").style.display = "none";
                        return;
                    }
                    document.getElementById("infoDiv").style.display = "block";
                    $(".compay_li").removeClass("active");
                    $(".area_li").removeClass("active");
                    $(".search_li").removeClass("active");
                    ImageSkyMap.industryParkLocate(parkName, function (data) {
                        initBuildInfo(parkName);

                    });
                }


                //单击工业园地块或者厂房，执行查询的回调函数
                //返回查询到的企业列表
                function callbackCompanyList(data) {
                    if (data) {
                        if (data.length == 0) {
                            document.getElementById("infoDiv").style.display = "none";
                            return;
                        }
                        document.getElementById("infoDiv").style.display = "block";
                        $("#infoTable").empty();
                        $("#infoDivTitle").html("企业列表");
                        var tr_head = $("<tr id='qylb'></tr>");
                        $("#infoTable").append(tr_head);
                        var td = $("<td>序号</td>");
                        td.appendTo(tr_head);
                        td = $("<td>企业名称</td>");
                        td.appendTo(tr_head);

                        var tr_body = null;
                        var td_body = null;
                        for (var i = 0, li = data.length; i < li; i++) {
                            tr_body = $("<tr id='" + data[i].id + "'></tr>");
                            $("#infoTable").append(tr_body);
                            td_body = $("<td>" + data[i].id + "</td>");
                            td_body.appendTo(tr_body);
                            td_body = $("<td><a id='" + data[i].oid + "'href='javascript:void(0)' onclick='locateCompanyOfList(this)'>" + data[i].name + "</a></td>");
                            td_body.appendTo(tr_body);
                        }
                    }
                }

                function locateCompanyOfList(obj) {
                    if (obj != null) {
                        ImageSkyMap.locateCompanyformList(obj);
                    }
                }


                $(document).ready(function () {
                    resizeWindw();
                });

                window.onresize = function () {
                    resizeWindw();
                };

                function resizeWindw() {
                    var clitHeight = $(window).height();
                    var cliWidth = $(window).width();
                    $("#sidebarNav").height(clitHeight - $("#sysNav").height() - 2);
                    $("#map").css({
                        // "position": "absolute",
                        // "left": "64px",
                        // "top": $("#sysNav").height() + 120,
                        // "right": "20px",
                        "height": clitHeight - $("#sysNav").height() - $("#foot").height() - $(".head").height() - 110
                    });
                }


                function centerRelation(obj) {
                    var windowWidth = $(window).width();
                    var windowHeight = $(window).height();
                    var popHeight = $(obj).height();
                    var popWidth = $(obj).width();
                    $(obj).css({
                        "position": "absolute",
                        "top": (windowHeight - popHeight) / 2 + $(document).scrollTop(),
                        "left": (windowWidth - popWidth) / 2,
                        "z-index": 10000
                    });
                }
                function initStreetInfo(name) {
                    $.ajax({
                        type: "GET",
                        dataType: "json",
                        url: pagePath + "/area/getStreetInfoByName",
                        data: {
                            "name": name
                        },
                        success: function (result) {
                            if (result.success) {
                                $("#infoTable").empty();
                                $("#infoDivTitle").html(name);
                                var tr = $("<tr id='gyysl'></tr>");
                                $("#infoTable").append(tr);
                                var td = $("<td>工业园数量</td>");
                                td.appendTo(tr);
                                td = $("<td>" + result.obj.buildNum + "</td>");
                                td.appendTo(tr);

                                tr = $("<tr id='qysl'></tr>");
                                $("#infoTable").append(tr);
                                td = $("<td>企业数量</td>");
                                td.appendTo(tr);
                                td = $("<td>" + result.obj.companyNum + "</td>");
                                td.appendTo(tr);
                            } else {
                                alert(result.message);
                            }
                        }
                    });
                }


                function initBuildInfo(name) {
                    $.ajax({
                        type: "GET",
                        dataType: "json",
                        url: pagePath + "/area/getBuildInfoByName",
                        data: {
                            "name": name
                        },
                        success: function (result) {
                            if (result.success) {
                                $("#infoTable").empty();
                                $("#infoDivTitle").html(name);
                                var tr = $("<tr id='xzqmj'></tr>");
                                $("#infoTable").append(tr);
                                var td = $("<td>工业园面积</td>");
                                td.appendTo(tr);
                                td = $("<td>" + result.obj.area + "k㎡</td>");
                                td.appendTo(tr);

                                tr = $("<tr id='qysl'></tr>");
                                $("#infoTable").append(tr);
                                td = $("<td>企业数量</td>");
                                td.appendTo(tr);
                                td = $("<td>" + result.obj.companyNum + "</td>");
                                td.appendTo(tr);

                                //可租用面积从外部定义
                                tr = $("<tr id='qysl'></tr>");
                                $("#infoTable").append(tr);
                                td = $("<td>可租用面积</td>");
                                td.appendTo(tr);
                                td = $("<td>" + result.obj.restArea + "</td>");
                                td.appendTo(tr);

                                tr = $("<tr id='qysl'></tr>");
                                $("#infoTable").append(tr);
                                td = $("<td>已租用面积</td>");
                                td.appendTo(tr);
                                td = $("<td>" + result.obj.useArea + "</td>");
                                td.appendTo(tr);
                            } else {
                                alert(result.message);
                            }
                        }
                    });
                }

            </script>
        </div>
    </div>
</div>
</body>
</html>
<style>
    .nav-pills > li.active > a {
        background-color: #fff;
        border-top: 2px solid #EE6723;
        color: #F6B242;
    }
</style>