浏览代码

修改树形结构

zhangxc 5 年之前
父节点
当前提交
6940694844
共有 3 个文件被更改,包括 166 次插入11 次删除
  1. 1 1
      src/html/knowledgeTree.html
  2. 5 6
      src/js/knowledgeTree.js
  3. 160 4
      src/js/schemaMap.js

+ 1 - 1
src/html/knowledgeTree.html

@@ -12,7 +12,7 @@
 <body>
   <div class="knowledgeTreeWrapper">
       <div class="title">
-        <div class="titleTxt"><img class="titleLogo" src="./images/logo.png" alt="logo">&nbsp;&nbsp;|&nbsp;&nbsp;  医学知识图谱</div>
+        <div class="titleTxt"><img class="titleLogo" src="./images/logo.png" alt="logo">&nbsp;&nbsp;|&nbsp;&nbsp;  描述框架</div>
       </div>
       <div class="content clearfix">
         <div class="left">

+ 5 - 6
src/js/knowledgeTree.js

@@ -18,8 +18,7 @@ require('./../resources/zTree/js/jquery.ztree.core.min.js');
 require('./../resources/zTree/js/jquery.ztree.excheck.min.js')
 require('./../resources/zTree/css/zTreeStyle/zTreeStyle.css');
 // document.write("aaaa");
-const { drawGraph,updateTree,getGraph,getTree,getNode } = require('./graphMap.js');
-
+const {getSchema,updateTree,getTree,getNode} = require('./schemaMap.js');
 
 window.select_type="diagnose";
 window.select_type_noSearch="diagnose";
@@ -30,9 +29,9 @@ window.select_type_noSearch="diagnose";
  $(".ztree").css("height",contentHei-80-43-60-20+'px')
  $("#main").css("height",contentHei-20-20+'px')
 //关系图
-getGraph("急性冠脉综合征",select_type);
-getTree(1,1,"急性冠脉综合征");
-$('#searchInp').val("急性冠脉综合征")
+getSchema("胆囊炎",select_type);
+getTree(1,1,"胆囊炎");
+$('#searchInp').val("胆囊炎")
 
 //选择类型
 $('.select').click(function(e){
@@ -68,7 +67,7 @@ $('#searchBtn').click(function(e){
     e.stopPropagation()
     const val = $('#searchInp').val()
     if(val){
-        getGraph(val,'diagnose')
+        getSchema(val,'diagnose')
         updateTree(val)
     }else{
        $('.tabNameListNoSearch').show()

+ 160 - 4
src/js/schemaMap.js

@@ -1,18 +1,171 @@
 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){
-                $('.empty').hide()
+               
+                drawSchema(res.data.data)
+
             }else{
-                $('.empty').show()
+                let nodeStr
+                nodeStr = '<li class="ellipsis">暂无符合数据</li>'
+                $(".tabNameList").html(nodeStr)
+                $(".tabNameList").show()
             }
-            drawSchema(res.data.data)
+        }else{
+            let nodeStr
+            nodeStr = '<li class="ellipsis">暂无符合数据</li>'
+            $(".tabNameList").html(nodeStr)
+            $(".tabNameList").show()
         }
     })
 }
@@ -111,5 +264,8 @@ function getSchema(val, type){
  }
 
  module.exports ={
-    getSchema
+    getSchema,
+    getTree,
+    updateTree,
+    getNode
  }