knowledgeMap/src/js/graphMap.js

const echarts = require("echarts");
const { post, api } = require('./api.js');


//关系图
function getGraph(val, type){
    post(api.getGraph,{
        "inputStr": val,
        "labelName": type
    }).then(res=>{
        if(res.data.code == 0) {
            select_type = select_type_noSearch
            $('#searchInp').val(val)
            drawGraph(res.data.data)
        }else{
            let nodeStr
            nodeStr = '<li class="ellipsis">暂无符合数据</li>'
            $(".tabNameList").html(nodeStr)
            $(".tabNameList").show()
        }
    })
}


function drawGraph(data,resultShowId) {
    // var colors = [
    //     '#FB95AF','#788083','#B2CCCF','#68BDF6','#FFD86E','#6DCE9F','#9BB2F0','#DBB7AC'
    // ]
    var myChart = echarts.init(document.getElementById('main'));
    var categories = data['categories'];
    var legends = categories.slice(2, categories.length);
    var option = {
        title: { 
            text: '医学知识图谱',
            top: '10',
            left: '10'
        },
        // color:colors,
        tooltip: {
            formatter: function (x) {
                return x.data.label;
            }
        },
        legend: [{
            type: 'scroll',
            bottom: 0,
            icon: 'circle',
            // cursor:'pointer',
            data: legends.map(function (a) {
                return a.name;
            })
        }],
        series: [
            {
                type: 'graph',
                layout: 'force',
                cursor:'pointer',
                categories: categories,
                symbolSize: 80,
                roam: 'move',
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [1, 5],
                edgeLabel: {
                    // cursor:'pointer',
                    normal: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                force: {
                    repulsion: 500,
                    gravity: 0.8,
                    edgeLength: [4, 7],
                    layoutAnimation : true
                },
                draggable: false,
                animation: true,
                hoverAnimation:false,
                animationDuration:5000,
                focusNodeAdjacency: true,
                itemStyle: {
                    normal: {
                        width: 2,
                        // color: 'target',
                        // cursor:'pointer',
                        curveness: 0,
                        opacity: 1
                    }
                },
                lineStyle: {
                    normal: {
                        width: 2,
                        cursor:'default',
                        color: 'target'
                    }
                },
                edgeLabel: {
                    normal: {
                        show: true,
                        formatter: function (x) {
                            return x.data.value;  //横线关系
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            cursor:'pointer',
                        },
                        color:'#1E1E1E', //label字体颜色
                        formatter: function (x) {
                             var tmp = x.data.label;
                            if(tmp.length >= 12){
                                tmp = tmp.substring(0,12);
                                tmp = tmp + "...";
                            }
                            return tmp;
                        }
                    }
                },
                data: data.node,
                links: data.links
            }
        ]
    };
    myChart.on('click',dataClick);
    myChart.setOption(option);
   
}

function dataClick(param){
    var data = param.data;
    const clientHei = $(window).height()
    const contentHei = clientHei - 80
    // console.log('data', data,select_type)
    // var nodes = option.series[0].nodes;
    if(data.category == 0){
        return
    }else{
        if(data.symbol != "circle"){
            return
        }else{
            if(data.type == select_type){
                $('#searchInp').val(data.label)
                updateTree(data.label)
                getGraph(data.label,select_type);
              
            }else {
               
                if(data.type == "疾病"){
                    $(".radioList").show()
                    select_type_noSearch = data.type
                    select_type = data.type
                    $('.selectedName').html(select_type)
                    $(".activeTab").removeClass("activeTab")
                    $(".diagnose").addClass("activeTab")
                    $(".ztree").css("height",contentHei-80-43-60-20+'px')
                    $('#searchInp').val(data.label)
                    $('.iconRadio').attr('src','/images/radioUnSelect.png')
                    $('.ICD10 img').attr('src','/images/radioSelect.png')
                    getTree(1,1,data.label);
                    getGraph(data.label,select_type);
                }else if(data.type == "药品通用名"){
                    $(".radioList").hide()
                    select_type_noSearch = data.type
                    select_type = data.type
                    $('.selectedName').html("药品")
                    $(".activeTab").removeClass("activeTab")
                    $(".drug").addClass("activeTab")
                    $(".ztree").css("height",contentHei-80-43-20+'px')
                    $('#searchInp').val(data.label)
                    getTree(0,2,data.label);
                    getGraph(data.label,select_type);
                }
            }
        }
    }
 }




function getTree(subType, type,showNodeName){
    post(api.getTree,
        {
            "subType": subType,     //科室subType: 2, 疾病type:1
            "type": type
        }
    ).then(res=>{
        if(res.data.code == 0) {
            const data = res.data.data
            drawTree(data,showNodeName)
        }
    })
}
function drawTree(data, showNodeName){
    /**
        属性说明  id  当前节点的唯一ID
        pId [必须大写]  代表当前节点的父节点id
        name:节点名称
        open:是否展开当前节点，默认为false
        isParent:true  标记当前节点是否为父节点 默认为如果当前节点下有子节点 则为true   否则为false
        icon:设置节点的图标地址
        iconOpen:设置节点展开时的图标地址  此节点必须是父节点 isParent:true
        iconClose:设置节点收起的的图标地地址  此节点必须是父节点 isParent:true
        url:点击节点打开的链接地址  如果想使用onClick:zTreeOnClick事件，就不要加url属性 或者改名字 href
        target:设置打开链接的方式  [在新窗口打开(_blank)，要本窗口打开(_self)]
            
    **/
    var setting = {	
        //数据格式的设置
        data:{
            simpleData: {
                enable: true, //使用简单的JSON格式
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            },
        },
        //树的显示设置
        view:{
            showLine:true, //设置是否显示连线 默认为true
            showTitle: true,//设置是否显示鼠标悬浮时显示title的效果
            dblClickExpand: true,//设置是否支持双击展开树节点
            fontCss : {color:"#333"},//设置节点样式  
            expandSpeed: "normal",//设置展开的速度  fast normal  slow 
            nameIsHTML: true,//名字是否是HTML
            selectedMulti: true,
            
        },
        //设置事件回调
        callback:{
            onClick: function (treeId, treeNode) {
                const selectPId = $('.curSelectedNode').attr('id')
                const selectId = selectPId.substring(0,selectPId.length-1) + 'ico'
                $('#'+selectId).append('<img class="iconSelect" src="./images/iconSelect.png">')
            },
            beforeClick: function (treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("tree");
                if (treeNode.isParent) {
                    zTree.expandNode(treeNode);
                    return false;
                } else {
                    const treeNodeName = treeNode.name
                    let index = treeNodeName.indexOf(' ')
                    const name = treeNodeName.substring(index+1)
                    if(select_type != select_type_noSearch){
                        select_type_noSearch = select_type
                        if(select_type == "疾病"){
                            $(".selectedName").html("疾病")
                        } else if(select_type == "药品通用名"){
                            $(".selectedName").html("药品")
                        }
                    }
                    getGraph(name,select_type)
                    const selectPId = $('.curSelectedNode').attr('id')
                    const selectId = selectPId.substring(0,selectPId.length-1) + 'ico'
                    $('#'+selectId + ' .iconSelect').remove()
                    // showKnowledgeGraph(treeNode.name, 'graph', 0);
                    return true;
                }
            }
        }
    };
    var zNodes = data.nodes;
    // var zNodes = zTreeData.nodes; 
    $.fn.zTree.init($("#tree"), setting, zNodes);
    if(showNodeName) {
        updateTree(showNodeName)

    }
}

function getNode(val, type){
    post(api.getNode,
        {
            "inputStr": val,
            "labelName": type
        }
    ).then(res=>{
        if(res.data.code == 0) {
            const data = res.data.data
            let nodeStr =''
            if(data.length > 0){
                for(let i = 0; i < data.length; i++){
                    nodeStr +=`<li class="ellipsis nodeItem" title=${data[i].name}>${data[i].name}</li>`
                }
            }else{
                nodeStr = '<li class="ellipsis">暂无符合数据</li>'
            }
            $(".tabNameList").html(nodeStr)
            $(".tabNameList").show()
            $(".tabNameList li").click(function(){
                const txt = $(this).text()
                const clientHei = $(window).height()
                const contentHei = clientHei - 80
                $(".tabNameList").hide()
                if(select_type_noSearch != select_type){
                    select_type = select_type_noSearch
                  
                    if(select_type == '疾病'){
                        $(".radioList").show()
                        $(".activeTab").removeClass("activeTab")
                        $(".diagnose").addClass("activeTab")
                        $(".ztree").css("height",contentHei-80-43-60-20+'px')
                        // $('#searchInp').val("高血压3级")
                        $('.iconRadio').attr('src','/images/radioUnSelect.png')
                        $('.ICD10 img').attr('src','/images/radioSelect.png')
                        getTree(1,1,txt);
                    }else if(select_type == '药品通用名'){
                        $(".radioList").hide()
                        $(".ztree").css("height",contentHei-80-43-20+'px')
                        $(".activeTab").removeClass("activeTab")
                        $(".drug").addClass("activeTab")
                        getTree(0,2,txt);
                    }
                }else{
                    updateTree(txt)
                }
                getGraph(txt,select_type)
               
            })
        }
    })
}

function updateTree(keyWord, txt) {
    var t = $("#tree");
        // if(zNodes&& zNodes.length > 0 && zNodes[0]['name'].indexOf(txt) != -1){
        //     $.fn.zTree.init(t, setting, zNodes);
        //     var zTree = $.fn.zTree.getZTreeObj("tree");
        //     zTree.selectNode(zTree.getNodeByParam("name", keyWord));
        // }else {
        var tree_select = document.getElementsByClassName("tree_selected");
        for(i = 0; i < tree_select.length; i++){
            tree_select[i].className = "tree_button";
        }
        var tree_button = document.getElementsByClassName("tree_button");
        for(i = 0; i < tree_button.length; i++){
            if(tree_button[i].text == txt){
                tree_button[i].className = "tree_selected";
            }
        }
        if(txt != "疾病"){
            $("#radio").hide();
        }else {
             $("#radio").show();
        }
        selectedNode = keyWord;
        var data = {"name":'tree'};
        var zTree = $.fn.zTree.getZTreeObj("tree");
                zTree.selectNode(zTree.getNodeByParam("name", keyWord));
                const selectPId = $('.curSelectedNode').attr('id')
                const selectId = selectPId.substring(0,selectPId.length-1) + 'ico'
                $('.iconSelect').remove()
                $('#'+selectId).append('<img class="iconSelect" src="./images/iconSelect.png">')
}



function isEmpty(obj){
    if(typeof obj == "undefined" || obj == null || obj == ""){
        return true;
    }else{
        return false;
    }
}

function getKeyEvent(evt) {
    var evt = (evt) ? evt : ((window.event) ? window.event : "");
    var key = evt.keyCode?evt.keyCode:evt.which;
    if(key==13){
        keyDown = true;
        queryGraph();
        evt.cancleBubble = true;
        evt.returnValue = false;
        return false;
    }else{
        return false;
    }
}


module.exports ={
    drawGraph,
    updateTree,
    getGraph,
    getTree,
    getNode
}