<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String basePath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="../../../common/admin/head.jsp"></jsp:include>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="<%=basePath%>/resource/plugins/echarts/echarts.min.js"></script>
</head>
<body>
<jsp:include page="../../../common/admin/body_pre.jsp"></jsp:include>
<div class="row hidden-print">
    <div class="col-lg-12">
        <div class="ibox">
            <div class="ibox-title">
                <h2>数据目录</h2>
                <ol class="breadcrumb">
                    <li>
                        <a href="javascript:void(0);" >资源活化</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" >数据目录</a>
                    </li>
                    <li class="active">
                        <strong>目录图谱</strong>
                    </li>
                </ol>
            </div>
        </div>
    </div>
</div>
<jsp:include page="../../../common/admin/search_pre.jsp"></jsp:include>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<form class="form-inline">
    <div class="form-group">
        <label for="resourceName">资源名称</label>
        <input type="text" id="resourceName" name="resourceName" class="form-control" />
    </div>
    <div class="form-group">
        <button id="btnSearch" type="button" onclick="searchImg()" class="btn btn-sm btn-primary"><i class="fa fa-search"></i>查询</button>
    </div>
</form>
<jsp:include page="../../../common/admin/search_post.jsp"></jsp:include>
<jsp:include page="../../../common/admin/grid_pre.jsp"></jsp:include>
<button id="btnAdd" onclick="javascript:window.location.href='<%=basePath%>/admin/datacatelog_mgr/index.htm'" type="button" class="btn btn-sm btn-primary btn-position"><i class="fa fa-bars" aria-hidden="true"></i></button>
<jsp:include page="../../../common/admin/grid_middle.jsp"></jsp:include>
<div id="divGrid">
    <div id="congtent" style="height: 600px"></div>
</div>
<jsp:include page="../../../common/admin/grid_post.jsp"></jsp:include>
<jsp:include page="../../../common/admin/body_post.jsp"></jsp:include>
<script type="text/javascript">
    var str = "" ;
    resourceImageAll(str) ;
    function searchImg() {
        resourceImageAll($("#resourceName").val()) ;
    }
    function resourceImageAll(str) {
        var dom = document.getElementById("congtent");
        var myChart = echarts.init(dom);
        option = null;
        myChart.showLoading();
        $.get('<%=basePath%>/admin/datacatelog_mgr/allDataToView.action',
            {resourceName:str},
            function (result) {
            var parse = JSON.parse(result.data);
                myChart.hideLoading();
                myChart.setOption(option = {
                    tooltip: {
                        trigger: 'item',
                        triggerOn: 'mousemove'
                    },
                    series:[
                        {
                            type: 'tree',

                            data: [parse],

                            left: '2%',
                            right: '2%',
                            top: '8%',
                            bottom: '20%',


                            symbol: 'emptyCircle',

                            orient: 'vertical',

                            expandAndCollapse: false,

                            label: {
                                normal: {
                                    position: 'top',
                                    rotate: -90,
                                    verticalAlign: 'middle',
                                    align: 'right',
                                    fontSize: 9
                                }
                            },

                            leaves: {
                                label: {
                                    normal: {
                                        position: 'bottom',
                                        rotate: -90,
                                        verticalAlign: 'middle',
                                        align: 'left'
                                    }
                                }
                            },

                            animationDurationUpdate: 750
                        }
                    ]
                });
                myChart.on('click', function (params) {
                    var str=params.value;
                    var id=str.substr(3);
                    $.popBsPartial({
                        url: "<%=basePath%>/admin/datacatelog_mgr/detailView.htm?theme=" +id,
                        size: WySharpSize.Large
                    });
                });
            });
    }

    function search() {
        var formSerialize = $("input[type='hidden'][name='formSerialize']").val();
        var pageNo = $("input[type='hidden'][name='pageNo']").val();
        var formData = formSerialize + "&pageNo=" + pageNo;
        $("#divGrid").renderPartial({ url: "<%=basePath%>/admin/datacatelog_mgr/getlist.action", data: formData });
    }
</script>
</body>
</html>
