第十七週總結

阿新 • • 發佈：2020-12-27

本週進行了企業知識圖譜意思關係方面的編寫

以及對先前程式碼的一個優化，減少介面的不協調的一個問題

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" 
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>企業疑似關係</title>
<!-- Bootstrap -->
<link
    href="${pageContext.request.contextPath}/plug-ins/css/bootstrap.css"
    rel="stylesheet">

<!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，所以必須放在前邊)  
-->
<script
    src="${pageContext.request.contextPath}/plug-ins/js/jquery-1.10.2.min.js"></script>

<!-- 載入 Bootstrap 的所有 JavaScript 外掛。你也可以根據需要只加載單個外掛。 -->
<script
    src="${pageContext.request.contextPath}/plug-ins/js/bootstrap.js"></script>

<link rel="stylesheet" type 
="text/css"
    href="${pageContext.request.contextPath}/plug-ins/jquery/jquery-ui.css">
<script
    src="${pageContext.request.contextPath}/plug-ins/jquery/jquery-1.12.1.js"></script>
<script
    src="${pageContext.request.contextPath}/plug-ins/jquery/jquery-ui.js"></script>
<link href="${pageContext.request.contextPath}/main.css"
    rel="stylesheet">
<script
    src='${pageContext.request.contextPath}/plug-ins/echarts/echarts.js'></script>
<script type="text/javascript">
    $(function() {
        var data = "";
        $.ajax({
            async : true,
            url : "${pageContext.request.contextPath}/dataProjectServlet",
            data : {
                method : "getCropBeans",
            },
            success : function(res) {
                data = res;
                //                 alert(data);
                addCorpName(data);
            },
            dataType : "json"
        });

    });

    function addCorpName(data) {

        var availableTags = new Array();
        for (var i = 0; i < data.length; i++) {
            availableTags[i] = data[i].CORP_NAME;
            //             alert(availableTags[i]);
        }
        //         alert(availableTags);
        $("#tags").autocomplete({
            source : availableTags
        });
        //          alert("ok");
        // $("#ui-id-1").attr("style","left: 304px; top: 40px; width: 290px; display: block;");
    }

    function getBaseInfo() {
        var Name = $("#tags").val();
        if (Name != "") {
            $
                    .ajax({
                        async : true,
                        url : "${pageContext.request.contextPath}/dataProjectServlet",
                        data : {
                            method : "isAlive",
                            name : Name
                        },
                        success : function(data) {
                            var isAlive = data;
                            if (isAlive) {
                                window.location.href = "${pageContext.request.contextPath}/dataProjectServlet?method=getBaseInfo&name="
                                        + Name;
                            } else {
                                alert("沒有該公司!!!  請重新輸入");
                            }
                        },
                        dataType : "json"
                    });
        }
    }
</script>

<style type="text/css">
.ui-widget-content {
    /*     padding-top: 20px; */
    border-radius: 15px;
}

.content {
    width: 100%;
    background-color: white;
    border-radius: 2.5em;
    height: 95%;
    margin-bottom: 2%;
}

#content {
    width: 100%;
    height: 85%;
    float: left;
}
</style>

</head>

<body>

    <c:if test="${empty douList }">
        <script type="text/javascript">
            window.location.href = "${pageContext.request.contextPath}/dataProjectServlet?method=getDou";
        </script>
    </c:if>

    <div
        class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
        <div class="app-main">
            <div class="app-main__outer">
                <div class="app-main__inner">
                    <div class="content">
                        <center>
                            <div>
                                <span
                                    style='font-size: 30px; letter-spacing: 1px; line-height: 3.8em;'>企業疑似關係圖</span>
                            </div>
                        </center>
                        <div id='content'></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <script type="text/javascript"
        src="${pageContext.request.contextPath}/assets/scripts/main.js"></script>
</body>

<script type="text/javascript">
    $(function() {

        var dom = document.getElementById('content');
        var myChart = echarts.init(dom);

        var douList = '${douList}';
        var dataList = JSON.parse(douList);
        console.log(dataList);
        var data = "";
        var link = "";
        for (var i = 0; i < dataList.length; i++) {
            data += '{"name":"' + dataList[i].name + '","x":"' + dataList[i].x
                    + '","y":"' + dataList[i].y + '"},';
            for(var j=0;j<dataList[i].list.length;j++){
                link +='{"source":"'+dataList[i].list[j].source+'","target":"'+dataList[i].list[j].target+'","label":{"normal":{"show": true,"curveness":"0.2","formatter":"'+dataList[i].list[j].value+'"}},"lineStyle":{"normal":{"width":1,"curveness": 0.2}}},';
            }
        }
        
        data = data.substring(0, data.length - 1);
        data = '[' + data + ']';
        var datas = JSON.parse(data);
        if(link!=""){
            link = link.substring(0,link.length-1);
            link = '['+link+']';
            console.log(link);
            var links = JSON.parse(link);
        }else{
            var links = "[]";
        }

        option = {
                tooltip: {},
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                series : [
                    {
                        type: 'graph',
                        layout: 'none',
                        symbolSize: 35,
                        roam: true,
                        draggable: true,
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            normal: {
                                textStyle: {
                                    fontSize: 15
                                }
                            }
                        },
                        data: datas,
                        // links: [],
                        links: links,
                        lineStyle: {
                            normal: {
                                opacity: 0.9,
                                width: 2,
                                curveness: 0
                            }
                        }
                    }
                ]
            };
        myChart.setOption(option);
    });
</script>
</html>