fuyuhang
/
Project_yhfu
mirror of http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_iPortalQueryResources"></title>
    <style>
    .gallery-item {
        margin-bottom: 30px;
    }
    .gallery-item-border {
        border: 1px solid #dadada;
        -webkit-box-shadow: 0px 2px 3px #dcdcdc;
        box-shadow: 0px 2px 3px #dcdcdc;
        background: white;
    }
    .thumbnail > img, .thumbnail a > img {
        margin-right: auto;
        margin-left: auto;
    }
    .gallery-item-img {
        height: 170px !important;
        width: 262px !important;
    }
    .resourcesDetails {
        margin: 0px 0 12px 16px;
        height: 21px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px !important;
        color: #7c7c7c;
    }
    .resourcesUserDetails {
        width: 100%;
        border-top: 1px solid #E8E8E8;
        font-size: 13px;
    }
    .textEllipsis {
        display: inline-block;
        padding-left: 10px;
        padding-top: 12px;
        padding-bottom: 12px;
        vertical-align: top;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .resourcesBottomList {
        padding-left: 10px;
        padding-top: 13px;
        padding-bottom: 12px;
        vertical-align: top;
        float: right;
        padding-right: 30px;
        border-left: 1px solid #ececec;
    }
    .ip-toolbar-footer {
        text-align: center
    }
    .pagination > li {
        display: inline;
    }
    .pagination > li > a {
        position: relative;
        float: left;
        padding: 8px 16px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #737373;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #ececec;
    }
    #resourcesListPaging > .pagination {
        margin: 10px 15px;
    }
    #resourcesListPaging > .pagination > li > .disable {
        pointer-events: none;
        background-color: rgba(0, 0, 0, 0.1);
    }
    #resourcesListPaging > .pagination > li > .active {
        background-color: #0083CB;
        color: white;
    }
    .disabled {
        cursor: not-allowed;
        background-color: #d9d9d9;
    }
    </style>
</head>
<body style=" margin: 0;overflow: auto;background: #F2F2F2;width: 100%;height:100%;position: absolute;top: 0;">
<div class="container" style="margin-bottom: 100px">
    <div class="page-header">
        <h4 data-i18n=""></h4>
    </div>
    <div id="toolbar" class="panel panel-primary" style="position: absolute;top: 10px;right: 70px;text-align: center;z-index: 800;border-radius: 4px;">
        <div class='panel-heading' id="panelheading">
            <h5 class='panel-title text-center' data-i18n="resources.title_iPortalQueryResourcesTitle"></h5>
        </div>
        <div class='panel-body content' id="panelbodycontent">
            <!-- 资源类型选择 -->
            <div class='input-group' style="width: 220px;margin-bottom: 15px;">
                <span class='input-group-addon' data-i18n="resources.title_iPortalQueryResourcesType"></span>
                <select class='form-control' id='typeSelect' onchange="onSelectResourcesType()">
                    <option value="" data-i18n="resources.title_iPortalQueryResourcesAll"></option>
                    <option value="MAP" data-i18n="resources.title_iPortalQueryResourcesMap"></option>
                    <option value="SERVICE" data-i18n="resources.title_iPortalQueryResourcesService"></option>
                    <option value="SCENE" data-i18n="resources.title_iPortalQueryResourcesScene"></option>
                    <option value="DATA" data-i18n="resources.title_iPortalQueryResourcesData"></option>
                    <option value="INSIGHTS_WORKSPACE" data-i18n="resources.title_iPortalQueryResourcesInsights"></option>
                    <option value="MAP_DASHBOARD" data-i18n="resources.title_iPortalQueryResourcesDashboards"></option>
                </select>
            </div>
            <!-- 资源权限选择 -->
            <div class='input-group' style="width: 220px;margin-bottom: 15px;">
                <span class='input-group-addon' data-i18n="resources.title_iPortalQueryResourcesControl"></span>
                <select class='form-control' id='controlSelect'>
                    <option value="PUBLIC" data-i18n="resources.title_iPortalQueryResourcesPublic"></option>
                    <option value="SHARETOME_RES" disabled class="disabled" data-i18n="resources.title_iPortalQueryResourcesShareToMe"></option>
                    <option value="MYDEPARTMENT_RES" disabled class="disabled" data-i18n="resources.title_iPortalQueryResourcesMyDepartment"></option>
                    <option value="MYGROUP_RES" disabled class="disabled" data-i18n="resources.title_iPortalQueryResourcesMyGroup"></option>
                    <option value="MY_RES" disabled class="disabled" data-i18n="resources.title_iPortalQueryResourcesMy"></option>
                </select>
            </div>
            <!-- 资源排序字段 -->
            <div class='input-group' style="width: 220px;margin-bottom: 15px;">
                <span class='input-group-addon' data-i18n="resources.title_iPortalQueryResourcesSortFiled"></span>
                <select class='form-control' id='filedSelect' onchange="onSelectResourcesOrderBy()">
                    <option value="UPDATETIME" data-i18n="resources.title_iPortalQueryResourcesUpdateTime"></option>
                    <option value="HEATLEVEL" data-i18n="resources.title_iPortalQueryResourcesHeatLevel"></option>
                </select>
            </div>
            <!-- 排序 -->
            <div class='input-group' style="width: 220px;margin-bottom: 15px;">
                <span class='input-group-addon' data-i18n="resources.title_iPortalQueryResourcesSort"></span>
                <select class='form-control' id='sortSelect' onchange="onSelectResourcesOrderType()">
                    <option value="DESC" data-i18n="resources.title_iPortalQueryResourcesSortDown"></option>
                    <option value="ASC" data-i18n="resources.title_iPortalQueryResourcesSortUp"></option>
                </select>
            </div>
            <!-- 搜索 -->
            <div class='input-group' style="width: 220px;margin-bottom: 15px;">
                <span class='input-group-addon' data-i18n="resources.title_iPortalQueryResourcesSearch"></span>
                <input type='text' class='form-control' id='searchText' />
            </div>
            <input type="button" class="btn btn-default" data-i18n="[value]nav.examples.query" onclick="onClickQuery(true)"/>
        </div>
    </div>
    <br />
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-12">
                <!--所有资源的承载DIV-->
                <div class="row" id="resourcesList">
                    <!--单个资源数据的可视化承载DIV 添加在此位置中-->
                </div>
                <!--分页切换列表-->
                <div class="row">
                    <div class="col-md-12">
                        <div class="ip-toolbar-footer" id="resourcesListPaging">
                            <ul class="pagination">
                                <li><a href="javascript:void(0)"><i class="glyphicon glyphicon-chevron-left"></i></a>
                                </li>
                                <li><a href="javascript:void(0)"><i class="glyphicon glyphicon-chevron-right"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" include="jquery,bootstrap-css" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script>
    //iportal的URL地址 或根据情况添加自己的本地iportal地址：http://localhost:8190/iportal
    var iPortalUrl = "https://iportal.supermap.io/iportal";
    //默认请求的参数
    var resourceCurrentPage = 1;//默认请求第一页
    var resourcePageSize = 12;//每一页显示9条资源信息
    var resourceType = ""; // 请求的资源类型
    var resourceOrderType = "DESC"; // 排序升序
    var resourceOrderBy = "UPDATETIME"; // 排序字段
    var searchText = ""; // 搜索字段
    //全局变量，承载请求后，一共有多少页数
    var totalPages;
    var queryParams = new SuperMap.iPortalQueryParam({
        resourceType: resourceType,
        pageSize: resourcePageSize,
        currentPage: resourceCurrentPage,
        orderBy: resourceOrderBy,
        orderType: resourceOrderType
    });
    //资源查询初始化工作
    var iPortal = new SuperMap.iPortal(iPortalUrl);
    $(document).ready(function () {
        //加载完DOM后，开始资源数据查询并添加
        queryResouces(queryParams);
        initClickEvent();
    });

    // 查询iPortal中的资源
    function queryResouces(queryParams) {
        iPortal.queryResources(queryParams).then(function (resourcesReslut) {
            //返回的结果集，需要查看可打开下行代码
            // console.log(resourcesReslut);
            $("#resourcesList").children().remove();
            //将结果集进行遍历，并添加到HTML中
            $.each(resourcesReslut.content, function (i) {
                var resourceItem = resourcesReslut.content[i];
                //解析时间戳，可根据需求自行处理
                var updateTime = new Date(parseInt(resourceItem.updateTime)).toLocaleString();
                var thumbnail = resourceItem.thumbnail;
                // 此判断获取部分相对路径的default图片
                if(thumbnail.indexOf("./") === 0){
                    thumbnail = iPortalUrl + thumbnail.replace("./","/");
                }
                var resourcesDOM = $("<div class='col-md-4 gallery-item'>" +
                    "<div class='gallery-item-border'>" +
                    "<a class='thumbnail' style='margin-bottom: 10px'>" +
                    "<img  class='gallery-item-img' src='" + thumbnail + "' alt=''>" +
                    "</a>" +
                    "<div>" +
                    "<p class='resourcesDetails'>" + resourceItem.name + "</p>" +
                    "<p class='resourcesDetails'>" + resources.text_update + " "+updateTime + "</p>" +
                    "<div class='resources'>" +
                    "<div class='textEllipsis'>" +
                    "<span class='glyphicon glyphicon-user'>" + "</span>" + "&nbsp;" + resourceItem.userName +
                    "</div>" +
                    "<div class='resourcesBottomList'>" +
                    "<span class='glyphicon glyphicon-eye-open'>" + "</span>" +
                    "<span style='text-align: center'>" + "&nbsp;" + resourceItem.heatLevel + "</span>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "</div>")
                $("#resourcesList").append(resourcesDOM);
            });
            //初始化分页列表以及分页数目发生变化时执行一下
            if(!$("#resourcesListPaging > .pagination > .pagDom").length || resourceCurrentPage === 1){
                initPages(resourcesReslut.total);
            }
        })
    };
    // 初始化分页列表UI
    function initPages(total) {
        totalPages = Math.ceil(total/resourcePageSize);
        $(".glyphicon-chevron-right").parent().removeClass('disable');
        $(".glyphicon-chevron-left").parent().removeClass('disable');
        $("#resourcesListPaging > .pagination > .pagDom").remove();
        for (var i = 0; i < totalPages; i++) {
            if (i == (resourceCurrentPage - 1)) {
                var resourcesListPaging = $("<li class='pagDom' >" + "<a href='JavaScript:void(0)' class='resourcesListChang active' >" + (i + 1) + "</a>" + "</li>")
            } else {
                var resourcesListPaging = $("<li class='pagDom'>" + "<a href='JavaScript:void(0)' class='resourcesListChang ' >" + (i + 1) + "</a>" + "</li>")
            }
            resourcesListPaging.insertBefore($("#resourcesListPaging > .pagination > li:last-child"));
        }
        //根据初始页面的设置，判断向前/后 翻页按钮是否需要禁止点击
        if (resourceCurrentPage == 1) {
            $(".glyphicon-chevron-left").parent().addClass('disable');
            // 只有一页
            if(resourceCurrentPage == totalPages){
                $(".glyphicon-chevron-right").parent().addClass('disable');
            }
        } else if (resourceCurrentPage == totalPages) {
            $(".glyphicon-chevron-right").parent().addClass('disable');
        }
    };
    function initClickEvent() {
        //为分页列表项绑定事件
        $('#resourcesListPaging>.pagination').delegate('.resourcesListChang', 'click', function (e) {
            if (resourceCurrentPage != parseInt(e.currentTarget.text)) {
                resourceCurrentPage = parseInt(e.currentTarget.text)
                paginationClick(resourceCurrentPage);
            }
        });
        //切换到上一页
        $(".glyphicon-chevron-left").parent().click(function () {
            resourceCurrentPage--;
            paginationClick(resourceCurrentPage);
        });
        //切换到下一页
        $(".glyphicon-chevron-right").parent().click(function () {
            resourceCurrentPage++;
            paginationClick(resourceCurrentPage);
        });
    };
    //页面的点击事件，触发的function
    function paginationClick(resourceCurrentPage) {
        if (resourceCurrentPage == 1) {
            $(".glyphicon-chevron-left").parent().addClass('disable');
            $(".glyphicon-chevron-right").parent().removeClass('disable');
        } else if (resourceCurrentPage == totalPages) {
            $(".glyphicon-chevron-right").parent().addClass('disable');
            $(".glyphicon-chevron-left").parent().removeClass('disable');
        } else {
            $(".glyphicon-chevron-left").parent().removeClass('disable');
            $(".glyphicon-chevron-right").parent().removeClass('disable');
        }
        resourceCurrentPage = resourceCurrentPage;
        onClickQuery();
        $("#resourcesListPaging>.pagination>li").eq(resourceCurrentPage).children().addClass('active').parent().siblings().children().removeClass('active');
    }
    // 选择资源类型
    function onSelectResourcesType(){
        let type = $("#typeSelect").val();
        resourceType = type;
    }
    // 选择排序字段
    function onSelectResourcesOrderBy(){
        let orderBy = $("#filedSelect").val();
        resourceOrderBy = orderBy;
    }
    // 选择排序字段
    function onSelectResourcesOrderType(){
        let orderType = $("#sortSelect").val();
        resourceOrderType = orderType;
    }
    // 点击查询
    function onClickQuery(param){
        searchText = $("#searchText").val();
        // 重新查新 重置页数
        if(param){
            resourceCurrentPage =1;
        }
        queryParams = new SuperMap.iPortalQueryParam({
            resourceType: resourceType,
            pageSize: resourcePageSize,
            currentPage: resourceCurrentPage,
            orderBy: resourceOrderBy,
            orderType: resourceOrderType,
            text: searchText
        });
        queryResouces(queryParams);
    }
</script>
</body>
</html>