knowledgeMap/src/js/schemaMap.js

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

function getTree(subType, type,showNodeName){
    post(api.getTree,
        {
            "subType": subType,
            "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)
                    getSchema(name,select_type)
                    const selectPId = $('.curSelectedNode').attr('id')
                    const selectId = selectPId.substring(0,selectPId.length-1) + 'ico'
                    $('#'+selectId + ' .iconSelect').remove()
                    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()
                $(".tabNameList").hide()
                getSchema(txt,select_type)
                updateTree(txt)
            })
        }
    })
}

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 getSchema(val, type){
    post(api.getSchema,{
        "labelName": type,
        "pramNme": val
    }).then(res=>{
        if(res.data.code == 0) {
            $('#searchInp').val(val)
            if(res.data.data.length >0){
               
                drawSchema(res.data.data)

            }else{
                let nodeStr
                nodeStr = '<li class="ellipsis">暂无符合数据</li>'
                $(".tabNameList").html(nodeStr)
                $(".tabNameList").show()
            }
        }else{
            let nodeStr
            nodeStr = '<li class="ellipsis">暂无符合数据</li>'
            $(".tabNameList").html(nodeStr)
            $(".tabNameList").show()
        }
    })
}
 function drawSchema(data){
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(option = {
        title: { 
            text: 'schema 结构',
            top: '10',
            left: '10'
        },
        tooltip: {
            show:'true',//默认：true；是否显示提示框组件，包括提示框浮层和 axisPointer。
            trigger: 'item',//默认：item；触发类型。item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none':什么都不触发。
            triggerOn: 'mousemove',
            // borderColor: '#abcdef'
        },
        series:[
            {
                type: 'tree',
                cursor:'pointer',
                data: data,
    
                left: '105px',
                right: '100px',
                top: '15%',
                bottom: '10%',
    
                // symbol: 'emptyCircle',
                itemStyle:{
                    // borderColor: '#abcdef'
                },
                // orient: 'vertical',
                symbolSize:10,   //标记的大小，就是那个小圆圈，默认7
                expandAndCollapse: true,//默认：true；子树折叠和展开的交互，默认打开 。
    
                initialTreeDepth:2,//默认：2，树图初始展开的层级（深度）。根节点是第 0 层，然后是第 1 层、第 2 层，... ，直到叶子节点
    
                label: {
                    normal: {
                        // distance:0,
                        // position:'top',//标签的位置。
                        position:['-100%',5],
                        rotate: 0,//标签旋转。从 -90 度到 90 度。正值是逆时针。
                        verticalAlign: 'middle',//文字垂直对齐方式，默认自动。
                        align: 'right',//文字水平对齐方式，默认自动。
                        fontSize: 12,//文字的字体大小
                        // borderColor: '#abcdef',
                        // backgroundColor:'#abcdef',
                        color: '#333',
                        padding: [5,5,5,5],
                        formatter: function (x) {
                            var tmp = x.data.name;
                           if(tmp.length >= 12){
                               tmp = tmp.substring(0,3);
                               tmp = tmp + "...";
                           }
                           return tmp;
                       }
                    },
                    
                },
    
                leaves: {
                    cursor:'pointer',
                    label: {
                      
                        normal: {
                            position: ['-100%',5],
                            // color:' red',
                            rotate:0,
                            cursor:'default',
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 12,//文字的字体大小
                            formatter: function (x) {
                                var tmp = x.data.name;
                               if(tmp.length >= 12){
                                   tmp = tmp.substring(0,3);
                                   tmp = tmp + "...";
                               }
                               return tmp;
                           }
                           
                        },
                        
                    }
                },  
    
                animationDurationUpdate: 750
                
            }
        ]
    })
    myChart.setOption(option);
 }

 module.exports ={
    getSchema,
    getTree,
    updateTree,
    getNode
 }