关系图及树形图

src/css/common.css

@@ -6,6 +6,9 @@ html, body{
     margin: 0;
     padding: 0;
 }
+ul,li{
+    list-style: none;
+}
 .clearfix {
     zoom: 1
 }

src/css/knowledgeMap.less

@@ -1,23 +1,156 @@
 .knowledgeMapWrapper{
     min-width: 1200px;
     .title{
+        position: relative;
+       
+     
         height: 40px;
         line-height: 40px;
         background-image: linear-gradient(to right, #5A8EEE , #7EABFF);
     }
+    .titleTxt{
+        position: relative;
+        width: 1200px;
+        left: 50%;
+        margin-left: -600px;
+    }
     .content{
         position: relative;
         width: 1200px;
         left: 50%;
         margin-left: -600px;
+        cursor: pointer;
+        height: 100%;
     }
-    .mapWrapper,.ztree{
+    .left{
         float: left;
         background: #fff;
         height: 100%;
+        margin: 10px 0 0 0;
     }
-    .ztree{
+    .right{
+        // background: #fff;
         width: 394px;
         float: right;
+        height: 100%;
+        margin: 10px 0 0 0;
+        .top{
+            position: relative;
+            width:394px;
+            height:80px;
+            background:#FFFFFF;
+            border-radius:2px;
+            margin: 0 0 10px 0;
+            .select{
+                display: inline-block;
+                width:92px;
+                height:40px;
+                background:#E2ECFF;
+                border-radius:4px;
+                margin: 20px 10px  10px;
+                .selectedName{
+                    display: inline-block;
+                    width: 60px;
+                    height: 40px;
+                    text-align: center;
+                    line-height: 40px;
+                    color: #5A8EEE;
+                    position: relative;
+                }
+                .selectList{
+                    position: absolute;
+                    display: none;
+                    width:92px;
+                    line-height: 30px;
+                    text-align: center;
+                    background: #fff;
+                }
+                .selectItem:hover{
+                    background: #abcdef;
+                }
+            }
+            .search{
+                position: absolute;
+                display: inline-block;
+                width:272px;
+                top: 20px;
+                left: 112px;
+                input{
+                    width:192px;
+                    padding: 0 10px;
+                    height:40px;
+                    border:1px solid rgba(230,230,230,1);
+                    border-radius: 4px 0 0 4px;
+                    box-sizing: border-box;
+                }
+                .searchBtn{
+                    position: absolute;;
+                    display: inline-block;
+                    width:60px;
+                    height:40px;
+                    text-align: center;
+                    line-height: 40px;
+                    background:#5A8EEE;
+                    border-radius:0px 4px 4px 0px;
+                    color: #fff;
+                }
+                .tabNameList{
+                    position: relative;
+                    top: 5px;
+                    display: none;
+                    width:192px;
+                    padding: 0 10px;
+                    max-height:200px;
+                    background: #fff;
+                    border:1px solid rgba(230,230,230,1);
+                    border-radius: 4px 0 0 4px;
+                    box-sizing: border-box;
+                    overflow-y: auto;
+                    li{
+                        height: 40px;
+                    }
+                    li:hover{
+                        background: #abcdef;
+                    }
+                }
+            }
+        }
+        .bottom{
+            background: #fff;
+            padding: 0 10px;
+            .tabList{
+                width: 100%;
+                height: 43px;
+                box-sizing: border-box;
+                border-bottom: 1px solid #E6E6E6;
+                .tab{
+                    display: inline-block;
+                    height: 42px;
+                    line-height: 42px;
+                    padding: 0 20px 0 10px;
+                    font-size: 12px;
+                    color: #777;
+                }
+                .activeTab{
+                    font-size: 16px;
+                    color: #5A8EEE;
+                    font-weight: bold;
+                    border-bottom: 3px solid #5A8EEE;
+                    box-sizing: border-box;
+                }
+            }
+            .radioList{
+                height: 60px;
+                line-height: 60px;
+            }
+            .radioItem{
+                font-size: 12px;
+                color: #333;
+            }
+        }
+    }
+   
+    .ztree{
+        overflow: auto;
     }
 }

src/css/knowledgeTree.less

@@ -0,0 +1,58 @@
+.knowledgeTreeWrapper{
+    min-width: 1200px;
+    .title{
+        position: relative;
+        height: 40px;
+        line-height: 40px;
+        background-image: linear-gradient(to right, #5A8EEE , #7EABFF);
+    }
+    .titleTxt{
+        position: relative;
+        width: 1200px;
+        left: 50%;
+        margin-left: -600px;
+    }
+    .tipsInfo{
+        margin: 0 0 20px 0;
+    }
+    .tips{
+        color: #777;
+        font-size: 12px;
+        line-height: 18px;
+    }
+    .content{
+        background: #fff;
+        position: relative;
+        width: 1160px;
+        padding: 20px;
+        left: 50%;
+        margin-left: -600px;
+        cursor: pointer;
+        height: 100%;
+        .searchTxt{
+            min-height: 33px;
+            width: 1140px;
+            font-size: 14px;
+            color: #333;
+            resize: none;
+            padding: 10px;
+            background: #F7F8FA;
+        }
+        .btnBox{
+            height: 60px;
+            text-align: center;
+        }
+        .sumbit{
+            padding: 8px 36px;
+            background: #5A8EEE;
+            color: #fff;
+            position: relative;
+            border-radius: 2px;
+            top: 20px;
+        }
+        .mainWrapper{
+            border: 1px solid #E6E6E6;
+        }
+    }
+    
+}

src/html/knowledgeMap.html

@@ -12,11 +12,45 @@
 <body>
   <div class="knowledgeMapWrapper">
       <div class="title">
-        医学知识图谱
+        <div class="titleTxt"> 医学知识图谱</div>
       </div>
       <div class="content clearfix">
-        <div id="main" class="mapWrapper" style="width: 796px;height:800px;"></div>
-        <div id="treeDemo" class="ztree"></div>
+        <div class="left">
+          <div id="main" class="mapWrapper" style="width: 796px;height:600px;cursor: pointer;"></div>
+        </div>
+        <div class="right">
+          <div class="top">
+            <div class="select">
+              <span class="selectedName">疾病</span>
+              <ul class="selectList">
+                <li class="selectItem" data-id="diagnose">疾病</li>
+                <li class="selectItem">药物</li>
+                <li class="selectItem">症状</li>
+                <li class="selectItem">诊疗</li>
+              </ul>
+            </div>
+            <div class="search">
+                <input type="text" id="searchInp" name="" autocomplete="no" ><span class="searchBtn" id="searchBtn">搜索</span>
+                <ul class="tabNameList"></ul>
+            </div>
+          </div>
+          <div class="bottom">
+             <div class="tabList" id="tabList">
+                <span class="tab activeTab" data-id="diagnose">疾病</span>
+                <span  class="tab">药物</span>
+                <span  class="tab">症状</span>
+                <span  class="tab">诊疗</span>
+             </div>
+             <div class="radioList">
+                <span class="radioItem">  
+                    <!-- <img class="iconRadio" src="/images/unSelect.png" alt="iconRadio"> -->
+                    ICD10
+                </span>
+             </div>
+             <div id="tree" class="ztree"></div>
+
+          </div>
+        </div>  
       </div>
   </div>
 

src/html/knowledgeTree.html

@@ -7,8 +7,22 @@
   <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
-  <div id="treeDemo" style="width: 1200px;height:800px;"></div>
-  <div id="main" style="width: 1200px;height:800px;"></div>
+  <div class="knowledgeTreeWrapper">
+    <div class="title">
+      <div class="titleTxt"> 医学知识图谱</div>
+    </div>
+    <div class="content">
+      <div class="tipsInfo">
+        <p class="tips">提示说明：输入疾病、药物、症状、诊疗技术及设备（治疗）等相关医学实体名称，展示其 schema 描述体系。</p>
+        <p  class="tips">输入示例：1. 支气管肺炎 2. 阿莫西林片</p>
+      </div>
+      <textarea class="searchTxt" id="searchTxt" autocomplete="off" rows="5"></textarea>
+      <div class="btnBox"><span class="sumbit">提交</span></div>
+      <div id="main" class="mainWrapper" style="width: 1160px;height:600px;"></div>
+    </div>
+ 
+  </div>
+  
 </body>
 
 </html>

src/js/api.js

@@ -0,0 +1,33 @@
+
+const api = {
+  getGraph:'/api/ltkg/kg/getGraph',
+  getNode:'/api/ltkg/kg/getNode',
+  getSchema:'/api/ltkg/kg/getSchema',
+  getTree:'/api/ltkg/kg/getTree'
+}
+
+const post = function (url, data) {
+    return new Promise((resolve, reject) => {
+      $.ajax({
+        method: 'post',
+        url: url,
+        data: JSON.stringify(data),
+        contentType: "application/json; charset=UTF-8",
+        beforeSend: function (xmlHttp) {
+          xmlHttp.setRequestHeader("If-Modified-Since", "0");
+          xmlHttp.setRequestHeader("Cache-Control", "no-cache");
+        },
+        success: function (res) {
+          resolve({ data: res });
+        },
+        error: function (error) {
+          reject(error);
+        },
+      });
+    });
+}
+
+module.exports ={
+    post,
+    api
+}

src/js/data.js

@@ -1,6 +1,8 @@
+ const classIcon =  require('./../resources/images/icon.png')
+ const datarangeIcon =  require('./../resources/images/iconClose.png')
 const mapData = {
-    categories:[
-        {name: "中心词"},
+    categories:[ //关系列表
+        {name: "中心词"},  
         {name: "关系"},
         {name: "相关症状"},
         {name: "发病部位"},
@@ -10,9 +12,9 @@ const mapData = {
     ],
     links:[
         {
-            source: 0,
-            target: 1,
-            value: "相关症状"
+            source: 0,  //关系起始点name
+            target: 1,  //关系终点name
+            value: "相关症状" //关系名称
         },
         {
             source: 1,
@@ -64,6 +66,11 @@ const mapData = {
             target: 11,
             value: ""
         },
+        {
+            source: 8,
+            target: 12,
+            value: ""
+        },
         {
             source: 0,
             target: 13,
@@ -107,9 +114,9 @@ const mapData = {
     ],
     node:[
         {
-            category: 0,
-            label: "咳嗽",
-            name: 0,
+            category: 0,  //关系索引
+            label: "咳嗽",  //显示的节点名称
+            name: 0,  //节点Id
             symbolSize: 50
         },
         {
@@ -546,6 +553,500 @@ const mapData2 = {
         }
     ]
 }
+
+const mapData3 = {
+    "categories": [
+      {
+        "name": "中心词"
+      },
+      {
+        "name": "关系"
+      },
+      {
+        "name": "疾病相关体征"
+      },
+      {
+        "name": "疾病相关实验室检查"
+      },
+      {
+        "name": "疾病相关症状"
+      },
+      {
+        "name": "疾病相关辅助检查"
+      }
+    ],
+    "node": [
+      {
+        "category": 0,
+        "label": "胆囊炎",
+        "name": 0,
+        "symbol": "circle",
+        "symbolSize": 50
+      },
+      {
+        "category": 1,
+        "label": "",
+        "name": 1,
+        "symbol": "diamond",
+        "symbolSize": 10
+      },
+      {
+        "category": 2,
+        "label": "腹肌紧张、压痛、反跳痛",
+        "name": 2,
+        "symbol": "diamond",
+        "symbolSize": 28
+      },
+      {
+        "category": 2,
+        "label": "Murphy征阳性",
+        "name": 3,
+        "symbol": "circle",
+        "symbolSize": 28
+      },
+      {
+        "category": 2,
+        "label": "血压偏低",
+        "name": 4,
+        "symbol": "circle",
+        "symbolSize": 28
+      },
+      {
+        "category": 1,
+        "label": "",
+        "name": 5,
+        "symbol": "diamond",
+        "symbolSize": 10
+      },
+      {
+        "category": 3,
+        "label": "血常规",
+        "name": 6,
+        "symbol": "circle",
+        "symbolSize": 28
+      },
+      {
+        "category": 3,
+        "label": "十二指肠引流",
+        "name": 7,
+        "symbol": "circle",
+        "symbolSize": 28
+      },
+      {
+        "category": 1,
+        "label": "",
+        "name": 8,
+        "symbol": "diamond",
+        "symbolSize": 10
+      },
+      {
+        "category": 4,
+        "label": "疼痛",
+        "name": 9,
+        "symbol": "diamond",
+        "symbolSize": 28
+      },
+      {
+        "category": 4,
+        "label": "恶心",
+        "name": 10,
+        "symbol": "diamond",
+        "symbolSize": 28
+      },
+      {
+        "category": 4,
+        "label": "畏寒",
+        "name": 11,
+        "symbol": "circle",
+        "symbolSize": 28
+      },
+      {
+        "category": 4,
+        "label": "黄疸",
+        "name": 12,
+        "symbol": "circle",
+        "symbolSize": 28
+      },
+      {
+        "category": 1,
+        "label": "",
+        "name": 13,
+        "symbol": "diamond",
+        "symbolSize": 10
+      },
+      {
+        "category": 5,
+        "label": "超声检查",
+        "name": 14,
+        "symbol": "circle",
+        "symbolSize": 28
+      },
+      {
+        "category": 5,
+        "label": "放射线检查",
+        "name": 15,
+        "symbol": "diamond",
+        "symbolSize": 28
+      },
+      {
+        "category": 5,
+        "label": "放射性核素检查",
+        "name": 16,
+        "symbol": "circle",
+        "symbolSize": 28
+      }
+    ],
+    "links": [
+      {
+        "source": 0,
+        "target": 1,
+        "value": "疾病相关体征"
+      },
+      {
+        "source": 1,
+        "target": 2,
+        "value": ""
+      },
+      {
+        "source": 1,
+        "target": 3,
+        "value": ""
+      },
+      {
+        "source": 1,
+        "target": 4,
+        "value": ""
+      },
+      {
+        "source": 0,
+        "target": 5,
+        "value": "疾病相关实验室检查"
+      },
+      {
+        "source": 5,
+        "target": 6,
+        "value": ""
+      },
+      {
+        "source": 5,
+        "target": 7,
+        "value": ""
+      },
+      {
+        "source": 0,
+        "target": 8,
+        "value": "疾病相关症状"
+      },
+      {
+        "source": 8,
+        "target": 9,
+        "value": ""
+      },
+      {
+        "source": 8,
+        "target": 10,
+        "value": ""
+      },
+      {
+        "source": 8,
+        "target": 11,
+        "value": ""
+      },
+      {
+        "source": 8,
+        "target": 12,
+        "value": ""
+      },
+      {
+        "source": 0,
+        "target": 13,
+        "value": "疾病相关辅助检查"
+      },
+      {
+        "source": 13,
+        "target": 14,
+        "value": ""
+      },
+      {
+        "source": 13,
+        "target": 15,
+        "value": ""
+      },
+      {
+        "source": 13,
+        "target": 16,
+        "value": ""
+      }
+    ]
+  }
+
+const zTreeData = {
+    nodes:[
+        {
+            icon: classIcon,
+            iconOpen: classIcon,
+            iconClose: datarangeIcon,
+            id: 1,
+            name: "疾病",
+            pId: 0
+        },
+        {
+            iconOpen: classIcon,
+            iconClose: datarangeIcon,
+            id: 2,
+            name: "百种常见病",
+            pId: 1
+        },
+        {   
+            icon: classIcon,
+            iconOpen: classIcon,
+            iconClose: datarangeIcon,
+            id: 3,
+            name: "儿科常见病",
+            pId: 1
+        },
+        {
+            icon: classIcon,
+            iconOpen: classIcon,
+            iconClose: datarangeIcon,
+            id: 4,
+            name: "其他常见病",
+            pId: 1
+        },
+        {
+            icon: classIcon,
+            iconOpen: classIcon,
+            iconClose: datarangeIcon,
+            id: 5,
+            name: "其他病",
+            pId: 1
+        },
+        {
+            iconOpen: classIcon,
+            iconClose: datarangeIcon,
+            id: 6,
+            name: "A",
+            pId: 2,
+        },
+        {
+            iconOpen: classIcon,
+            iconClose: datarangeIcon,
+            id: 7,
+            name: "B",
+            pId: 2
+        },
+        {
+            iconOpen: classIcon,
+            iconClose: datarangeIcon,
+            id: 8,
+            name: "C",
+            pId: 2
+        },
+        {
+            iconOpen: classIcon,
+            iconClose: datarangeIcon,
+            id: 9,
+            name: "D",
+            pId: 2
+        },
+        {
+            icon: datarangeIcon,
+            id: 10,
+            name: "阿尔兹海默症",
+            pId: 6,
+        },
+        {
+            icon: datarangeIcon,
+            id: 11,
+            name: "白内障",
+            pId: 7,
+        },
+        {
+            icon: datarangeIcon,
+            id: 12,
+            name: "百日咳",
+            pId: 7,
+        },
+        {
+            icon: datarangeIcon,
+            id: 12,
+            name: "病毒性脑膜炎",
+            pId: 7,
+        },
+        {
+            icon: datarangeIcon,
+            id: 13,
+            name: "产后抑郁症",
+            pId: 8,
+        },
+        {
+            icon: datarangeIcon,
+            id: 14,
+            name: "尘肺",
+            pId: 8,
+        },
+        {
+            icon: classIcon, 
+            iconOpen: classIcon,
+            iconClose: datarangeIcon,
+            id: 15,
+            name: "胆囊炎",
+            pId: 9,
+        },
+    ]
+}
+const zTreeData2 = {
+    nodes:[
+        { id:1, pId:0, name:"<font color='red'>父节点1 - 展开</font>", open:true},
+			{ id:11, pId:1, name:"父节点11 - 折叠",icon:"resources/zTree/css/zTreeStyle/img/diy/2.png"},
+			{ id:111, pId:11, name:"叶子节点111",target:'_blank',url:'http://www.baidu.com'},
+			{ id:112, pId:11, name:"叶子节点112"},
+			{ id:113, pId:11, name:"叶子节点113"},
+			{ id:114, pId:11, name:"叶子节点114"},
+			{ id:12, pId:1, name:"父节点12 - 折叠",iconOpen:"resources/zTree/css/zTreeStyle/img/diy/1_open.png",iconClose:"resources/zTree/css/zTreeStyle/img/diy/1_close.png"},
+			{ id:121, pId:12, name:"叶子节点121"},
+			{ id:122, pId:12, name:"叶子节点122"},
+			{ id:123, pId:12, name:"叶子节点123"},
+			{ id:124, pId:12, name:"叶子节点124"},
+			{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
+			{ id:2, pId:0, name:"父节点2 - 折叠"},
+			{ id:21, pId:2, name:"父节点21 - 展开", open:true},
+			{ id:211, pId:21, name:"叶子节点211"},
+			{ id:212, pId:21, name:"叶子节点212"},
+			{ id:213, pId:21, name:"叶子节点213"},
+			{ id:214, pId:21, name:"叶子节点214"},
+			{ id:22, pId:2, name:"父节点22 - 折叠"},
+			{ id:221, pId:22, name:"叶子节点221"},
+			{ id:222, pId:22, name:"叶子节点222"},
+			{ id:223, pId:22, name:"叶子节点223"},
+			{ id:224, pId:22, name:"叶子节点224"},
+			{ id:23, pId:2, name:"父节点23 - 折叠"},
+			{ id:231, pId:23, name:"叶子节点231"},
+			{ id:232, pId:23, name:"叶子节点232"},
+			{ id:233, pId:23, name:"叶子节点233"},
+			{ id:234, pId:23, name:"叶子节点234"},
+			{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
+    ]
+}
+const zTreeData3 = {
+    nodes:[
+        {
+            icon: "/images/icon.png",
+            iconOpen: "s/images/iconOpen.png",
+            iconClose: "/images/iconClose.png",
+            id: 1,
+            name: "疾病",
+            pId: 0,
+        },
+        {
+            icon: "/images/icon.png",
+            iconOpen: "/images/iconOpen.png",
+            iconClose: "/images/iconClose.png",
+            id: 2,
+            name: "A00-B99-某些传染病和寄生虫病",
+            pId: 1,
+        },
+        {   
+            icon: "/images/icon.png",
+            iconOpen: "/images/iconOpen.png",
+            iconClose: "/images/iconClose.png",
+            id: 3,
+            name: "A00",
+            pId: 2
+        },
+        // {
+        //     icon: classIcon,
+        //     iconOpen: classIcon,
+        //     iconClose: datarangeIcon,
+        //     id: 4,
+        //     name: "其他常见病",
+        //     pId: 1
+        // },
+        // {
+        //     icon: classIcon,
+        //     iconOpen: classIcon,
+        //     iconClose: datarangeIcon,
+        //     id: 5,
+        //     name: "其他病",
+        //     pId: 1
+        // },
+        // {
+        //     iconOpen: classIcon,
+        //     iconClose: datarangeIcon,
+        //     id: 6,
+        //     name: "A",
+        //     pId: 2,
+        // },
+        // {
+        //     iconOpen: classIcon,
+        //     iconClose: datarangeIcon,
+        //     id: 7,
+        //     name: "B",
+        //     pId: 2
+        // },
+        // {
+        //     iconOpen: classIcon,
+        //     iconClose: datarangeIcon,
+        //     id: 8,
+        //     name: "C",
+        //     pId: 2
+        // },
+        // {
+        //     iconOpen: classIcon,
+        //     iconClose: datarangeIcon,
+        //     id: 9,
+        //     name: "D",
+        //     pId: 2
+        // },
+        // {
+        //     icon: datarangeIcon,
+        //     id: 10,
+        //     name: "阿尔兹海默症",
+        //     pId: 6,
+        // },
+        // {
+        //     icon: datarangeIcon,
+        //     id: 11,
+        //     name: "白内障",
+        //     pId: 7,
+        // },
+        // {
+        //     icon: datarangeIcon,
+        //     id: 12,
+        //     name: "百日咳",
+        //     pId: 7,
+        // },
+        // {
+        //     icon: datarangeIcon,
+        //     id: 12,
+        //     name: "病毒性脑膜炎",
+        //     pId: 7,
+        // },
+        // {
+        //     icon: datarangeIcon,
+        //     id: 13,
+        //     name: "产后抑郁症",
+        //     pId: 8,
+        // },
+        // {
+        //     icon: datarangeIcon,
+        //     id: 14,
+        //     name: "尘肺",
+        //     pId: 8,
+        // },
+        // {
+        //     icon: classIcon, 
+        //     iconOpen: classIcon,
+        //     iconClose: datarangeIcon,
+        //     id: 15,
+        //     name: "胆囊炎",
+        //     pId: 9,
+        // },
+    ]
+}
 module.exports={
-    mapData
+    mapData,
+    zTreeData,
+    mapData3,
+    zTreeData3
 }

src/js/graphMap.js

@@ -0,0 +1,719 @@
+const echarts = require("echarts");
+const { post, api } = require('./api.js');
+
+
+//关系图
+// function showKnowledgeGraph(keyWord, resultShowId, type) {
+//     keyWord = keyWord.replace(/(^\s*)|(\s*$)/g, "");
+//     if(isEmpty(keyWord)){
+//         return;
+//     }
+//     var data = {"name":keyWord, 'tree_type':tree_type};
+//     $.ajax({
+//        type: 'GET',
+//        url: '/knowledge',
+//        data: data,
+//        dataType: 'json',
+//        success:function(data){
+//            keyWord = data['name']
+//            nodes = data['node'];
+//            links = data['link'];
+//            // nodes = [
+//            //     {"category": 0, "name": 0, "label":'e1',"symbolSize":40},
+//            //     {"category": 1, "name": 1, "label":'',"symbol":"diamond", "symbolSize": 10},
+//            //     {"category": 2, "name": 2, "label": 'e2', "symbolSize": 28},
+//            //     {"category": 0, "name": 3,"label": 'e1_pro', "symbol":"rect", "symbolSize": [40, 16]},
+//            //     {"category": 1, "name": 4,"label": 'rel_pro', "symbol":"rect", "symbolSize": [40, 16]},
+//            //     {"category": 2, "name": 5,"label": 'e2_pro', "symbol":"rect", "symbolSize": [40, 16]}
+//            //
+//            // ];
+//            // links = [
+//            //     {"source": 0, "target": 1, "value":'rel'},
+//            //     {"source": 1, "target": 2, "value":''},
+//            //     {"source": 2, "target": 3, "value":''},
+//            //     {"source": 2, "target": 4, "value":''},
+//            //     {"source": 2, "target": 5, "value":''}
+//            // ];
+//            if(nodes.length < 5){
+//                return;
+//            }
+//            else if(visitQue[visitQue.length - 1] == keyWord)
+//            {
+//                return;
+//            }else{
+//                visitQue.push(keyWord);
+//            }
+//            if(type == 0){
+//                 $('#searchPlaceholder').val(keyWord);
+//            }else if(type == 1){
+//                var txt =  $(".select_txt").text();
+//                updateTree(keyWord, txt);
+//            }else if(type == 2){
+//                $('#searchPlaceholder').val(keyWord);
+//            }else {
+//                tree_type = data['tree_type'];
+//                console.log(tree_type);
+//                updateTree(keyWord,tree_type);
+//            }
+//            drawGraph(data,resultShowId);
+//        },
+//        error:function(e){
+//            last_word = visitQue.pop();
+//            showKnowledgeGraph(last_word, 'graph', 3);
+//        }
+//    });
+// }
+function getGraph(val, type){
+    post(api.getGraph,{
+        "inputStr": val,
+        "labelName": type
+    }).then(res=>{
+        if(res.data.code == 0) {
+            $('#searchInp').val(val)
+            drawGraph(res.data.data)
+        }
+    })
+}
+
+function drawGraph(data,resultShowId) {
+    var myChart = echarts.init(document.getElementById('main'));
+    var categories = data['categories'];
+    var legends = categories.slice(2, categories.length);
+    
+    var option = {
+        title: { text: '关系图谱' },
+        // 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: true,
+                edgeSymbol: ['circle', 'arrow'],
+                edgeSymbolSize: [1, 5],
+                edgeLabel: {
+                    normal: {
+                        textStyle: {
+                            fontSize: 20
+                        }
+                    }
+                },
+                force: {
+                    repulsion: 500,
+                    gravity: 0.8,
+                    edgeLength: [4, 7],
+                    layoutAnimation : true
+                },
+                draggable: true,
+                animation: true,
+                hoverAnimation:false,
+                animationDuration:5000,
+                focusNodeAdjacency: true,
+                itemStyle: {
+                    normal: {
+                        width: 2,
+                        // color: 'target',
+                        curveness: 0,
+                        opacity: 1
+                    }
+                },
+                lineStyle: {
+                    normal: {
+                        width: 2,
+                        color: '#4b565b'
+
+                    }
+                },
+                edgeLabel: {
+                    normal: {
+                        show: true,
+                        formatter: function (x) {
+                            return x.data.value;  //横线关系
+                        }
+                    }
+                },
+                label: {
+                    normal: {
+                        show: true,
+                        textStyle: {
+                        },
+                        formatter: function (x) {
+                             var tmp = x.data.label;
+                            if(tmp.length >= 8){
+                                tmp = tmp.substring(0,3);
+                                tmp = tmp + "...";
+                            }
+                            return tmp;
+                        }
+                    }
+                },
+                data: data.node,
+                links: data.links
+            }
+        ]
+    };
+    myChart.setOption(option);
+    myChart.on('click',dataClick);
+    // myChart = echarts.init(document.getElementById(resultShowId),'light');
+    // categories = data['categories'];
+    // var legends = categories.slice(2, categories.length);
+    // option = {
+    //    color:colors,
+    //    tooltip: {
+    //        formatter: function (x) {
+    //            return x.data.label;
+    //        }
+    //    },
+    //    toolbox:{
+    //        show:true,
+    //        feature:{
+    //            myBack: {
+    //                show:true,
+    //                title:'后退',
+    //                icon:back_icon,
+    //                onclick:function () {
+    //                    word = visitQue.pop();
+    //                    if(visitQue.length > 0){
+    //                        word = visitQue.pop();
+    //                    }
+    //                    showKnowledgeGraph(word, 'graph',4);
+    //                },
+    //            },
+    //            restore: {
+    //                show: true
+    //            },
+    //            saveAsImage: {
+    //                show: true
+    //            }
+    //        }
+    //    },
+    //    legend: {
+    //        type: 'scroll',
+    //        bottom: 0,
+    //        icon: 'circle',
+    //        data: legends.map(function (a) {
+    //            return a.name;
+    //        })
+    //    },
+    //    series: [
+    //        {
+    //            type: 'graph',
+    //            layout: 'force',
+    //            categories: categories,
+    //            roam: 'move',
+    //            focusNodeAdjacency: true,
+    //            edgeSymbol: ['none', 'arrow'],
+    //            edgeSymbolSize: [1, 5],
+    //            force: {
+    //                repulsion: 500,
+    //                gravity: 0.8,
+    //                edgeLength: [4, 7],
+    //                layoutAnimation : true
+    //            },
+    //            hoverAnimation:false,
+    //            // draggable: false,
+    //            // legendHoverLink: false,
+    //            lineStyle: {
+    //                normal: {
+    //                    width: 2,
+    //                    color: 'target',
+    //                    curveness: 0,
+    //                    opacity: 1
+    //                }
+    //            },
+    //            edgeLabel: {
+    //                normal: {
+    //                    show: true,
+    //                    formatter:"{c}"
+    //                }
+    //            },
+    //            label: {
+    //                 normal: {
+    //                     show: true,
+    //                     formatter: function (x) {
+    //                        var tmp = x.data.label;
+    //                        if(tmp.length >= 8){
+    //                            tmp = tmp.substring(0,3);
+    //                            tmp = tmp + "...";
+    //                        }
+    //                        return tmp;
+    //                    },
+    //                     textStyle: {
+    //                         color: '#000',
+    //                     }
+    //                 }
+    //            },
+    //            nodes: nodes,
+    //            links: links
+    //        }
+    //    ]
+    // };
+    // myChart.on('click',dataClick);
+    // myChart.setOption(option);
+}
+
+function dataClick(param){
+    var data = param.data;
+    // var nodes = option.series[0].nodes;
+     console.log('clickData',data);
+    if(data.source !== undefined && data.target !== undefined)
+    {
+        // myChart.setOption(option);
+    }else {
+        if(data.category == 1)
+        {
+            myChart.setOption(option);
+        }
+ 
+        // else if(data.parent == -1){
+        //     var img = data.symbol;
+        //     img = img.substring(8);
+        //     showImg(img);
+        // }else if(data.parent == -2){
+        //     window.open(data.video);
+        // }
+        else if(data.label.indexOf("http") != -1){
+            window.open(data.label);
+        }
+        else if(data.symbol == "rect"){
+             return;
+        }else {
+            // showKnowledgeGraph(data.label, 'graph',3);
+        }
+ 
+    }
+ }
+
+//  //菜单
+//  var setting = {
+//     view: {
+//         dblClickExpand: false,
+//         showLine: true,
+//         selectedMulti: false,
+//     },
+//     data: {
+//         simpleData: {
+//             enable: true,
+//             idKey: "id",
+//             pIdKey: "pId",
+//             rootPId: ""
+//         }
+//     },
+//     callback: {
+//        beforeClick: function (treeId, treeNode) {
+//            var zTree = $.fn.zTree.getZTreeObj("tree");
+//            if (treeNode.isParent) {
+//                zTree.expandNode(treeNode);
+//                return false;
+//            } else {
+//                showKnowledgeGraph(treeNode.name, 'graph', 0);
+//                return true;
+//            }
+//        }
+//     }
+// };
+// var zNodes=[];
+// var selectedNode = "";
+
+// $(document).ready(function () {
+//     var url = window.location.pathname;
+//     if(url == '/mekg'){
+//         var data = {"name":'tree'};
+//         var t = $("#tree");
+
+//         var url = window.location.search;
+//         if(url.indexOf("?") != -1){
+//             var str = decodeURI(url);
+//             var name = str.split("=")[1];
+//             var tree_ls = {'0':'疾病','1':'药物','2':'诊疗','3':'症状'};
+//             showKnowledgeGraph(name,'graph', 2);
+//             updateTree(name,tree_ls[str[2]]);
+//         }
+//        else{
+//             showKnowledgeGraph("支气管肺癌" ,"graph",2);
+//             updateTree("支气管肺癌","疾病");
+//        }
+//     }else {
+//         showGraphMenu('graph_menu');
+//         // get_recommend();
+//         // setInterval(get_recommend, 3000);
+//     }
+
+// });
+
+// function showGraphMenu(dom_id) {
+//     var data = {'name': dom_id}
+//     $.ajax({
+//         type: 'GET',
+//         url: '/circle_menu',
+//         data: data,
+//         dataType: 'json',
+//         success: function (data) {
+//             var nodes = data['nodes'];
+//             var links = data['links'];
+//             var myChart = echarts.init(document.getElementById(dom_id), 'macarons')
+//             var categories = [];
+//             for (var i = 0; i < 10; i++) {
+//                 categories[i] = {
+//                     name: '' + i
+//                 }
+//             }
+//             nodes.forEach(function (node) {
+//                 node.itemStyle = null;
+//                 node.value = node.symbolSize;
+//                 node.category = (node.name % 10);
+//             });
+//             option = {
+//                 animationDurationUpdate: 1000,
+//                 animationEasingUpdate: 'quinticInOut',
+//                 tooltip: {
+//                     formatter: function (x) {
+//                         return x.data.showName;
+//                     }
+//                 },
+//                 series: [{
+//                     name: '100种常见病',
+//                     type: 'graph',
+//                     layout: 'circular',
+//                     circular: {
+//                         rotateLabel: true
+//                     },
+//                     data: nodes,
+//                     links: links,
+//                     categories: categories,
+//                     label: {
+//                         normal: {
+//                             position: 'right',
+//                             show: true,
+//                             formatter: function (x) {
+//                                 var len = x.data.showName.length;
+//                                 if (len < 5) {
+//                                     return x.data.showName;
+//                                 } else {
+//                                     return '';
+//                                 }
+
+//                             },
+//                         }
+//                     },
+//                     lineStyle: {
+//                         normal: {
+//                             color: 'source',
+//                             curveness: 0.3
+//                         }
+//                     }
+//                 }]
+//             };
+//             function nodeClick(param) {
+//                 console.log('param',param)
+//                 var data = param.data;
+//                 if (data.source !== undefined && data.target !== undefined) {
+//                     myChart.setOption(option);
+//                 }
+//                 else {
+//                     uri = encodeURI("/mekg?v0=" + data.showName);
+//                     // console.log(uri);
+//                     window.open(uri);
+//                 }
+//             }
+
+//             myChart.on('click', nodeClick);
+//             myChart.setOption(option);
+
+//         },
+//         error: function (e) {
+//             console.log('error loading graph menu');
+//         }
+//     });
+// }
+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: false,//设置是否显示鼠标悬浮时显示title的效果
+            dblClickExpand: false,//设置是否支持双击展开树节点
+            fontCss : {color:"blue"},//设置节点样式  
+            expandSpeed: "slow",//设置展开的速度  fast normal  slow 
+            nameIsHTML: true,//名字是否是HTML
+            selectedMulti: true,
+            
+        },
+        //设置事件回调
+        callback:{
+            // onClick:zTreeOnClick,
+            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)
+                    getGraph(name,'diagnose')
+                    // 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) {
+            console.log('res',res)
+            const data = res.data.data
+            let nodeStr =''
+            if(data.length > 0){
+                for(let i = 0; i < data.length; i++){
+                    nodeStr +=`<li>${data[i].name}</li>`
+                }
+            }else{
+                nodeStr = '<li>暂无符合数据</li>'
+            }
+            $(".tabNameList").html(nodeStr)
+            $(".tabNameList").show()
+            $(".tabNameList li").click(function(){
+                const txt = $(this).text()
+                $(".tabNameList").hide()
+
+                getGraph(txt,'diagnose')
+                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));
+        // $.ajax({
+        //     type: 'GET',
+        //     url: '/load_tree/' + txt,
+        //     // data: data,
+        //     dataType: 'json',
+        //     success: function (data) {
+        //         zNodes= data['nodes'];
+        //         tree_type = zNodes[0]['name'];
+        //         $.fn.zTree.init(t, setting, zNodes);
+        //         var zTree = $.fn.zTree.getZTreeObj("tree");
+        //         zTree.selectNode(zTree.getNodeByParam("name", keyWord));
+        //     },
+        //     error: function (e) {
+        //         zNodes = [];
+        //     }
+        // });
+    // }
+}
+
+// function queryGraph() {
+//     var url = window.location.pathname;
+//     if(url == '/mekg'){
+//         var node_name = document.getElementById("searchPlaceholder").value;
+//         $('#word').empty();
+//         $('#word').hide();
+//         showKnowledgeGraph(node_name, 'graph', 1);
+//     }else{
+//         var node_name = document.getElementById("search1").value;
+//         node_name = node_name.replace(/(^\s*)|(\s*$)/g, "");
+//         $('#word1').empty();
+//         $('#word1').hide();
+//         if(node_name.length == 0){
+//             return;
+//         }
+//         var type_dic = {'疾病':'0','药物':'1', '诊疗':'2', '症状':'3'};
+//         var txt =  $('.select_txt1').text();
+//         console.log(txt);
+//         uri = encodeURI('/mekg?v' + type_dic[txt] + '='+node_name)
+//         window.open(uri);
+//     }
+
+// }
+
+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;
+    }
+}
+
+// function getSug() {
+//     var url = window.location.pathname, input_id, hint_id, select_cls;
+//     if(url == '/mekg'){
+//         input_id = "searchPlaceholder";
+//         hint_id = "word";
+//         select_cls = "select_txt";
+//     }else {
+//         input_id = "search1";
+//         hint_id = "word1";
+//         select_cls = "select_txt1";
+//     }
+//     var input_name = document.getElementById(input_id).value;
+//     input_name = input_name.replace(/(^\s*)|(\s*$)/g, "")
+//     if (isEmpty(input_name) || keyDown == true){
+//         $('#' + hint_id).empty();
+//         $('#' + hint_id).hide();
+//         if(keyDown == true){
+//             keyDown = false;
+//         }
+//         return;
+//     }
+//     var res_ls = [];
+//     var type_dic = {'疾病':0,'药物':1, '诊疗':2, '症状':3};
+//     var txt =  $("." + select_cls).text();
+//     var data = {'type': type_dic[txt]};
+//     $.ajax({
+//         type: 'GET',
+//         url: '/get_sug/' + input_name,
+//         data : data,
+//         dataType: 'json',
+//         beforeSend:function(){
+//             $('#' + hint_id).append('<div>loading......</div>');
+//         },
+//         success: function (data) {
+//             res_ls = data['sug'];
+//             // console.log(res_ls);
+//             $('#' + hint_id).empty().show();
+//             if(res_ls == false){
+//                 $('#' + hint_id).append('<div class="error">Not Found   </div>');
+//             }
+//             else {
+//                 for(var i = 0,l=res_ls.length;i<l;i++){
+//                     $('#' + hint_id).append('<div class="click_work" onclick="select_word(this)">'+ res_ls[i] +'</div>');
+//                 }
+//             }
+//             $('#' + hint_id).show();
+//         },
+//         error: function (e) {
+//             $('#' + hint_id).empty().show();
+//             $('#' + hint_id).append('<div class="click_work">Not Found  </div>');
+//             $('#' + hint_id).show();
+//         }
+//     });
+// }
+
+// function select_word(obj) {
+//     var url = window.location.pathname, input_id, hint_id;
+//     var word = $(obj).text();
+//     if(url == '/mekg'){
+//         input_id = "searchPlaceholder";
+//         hint_id = "word";
+//     }else{
+//         input_id = "search1";
+//         hint_id = "word1";
+//     }
+
+//     $('#' + input_id).val(word);
+//     $('#' + hint_id).hide();
+// }
+
+module.exports ={
+    drawGraph,
+    updateTree,
+    getGraph,
+    getTree,
+    getNode
+}

src/js/index.js

@@ -3,222 +3,82 @@ const echarts = require("echarts");
 require("./../css/knowledgeMap.less");
 require("./../css/common.css");
 // require("ztree");
+require('./../resources/images/icon.png');
+require('./../resources/images/iconOpen.png');
+require('./../resources/images/iconClose.png');
+require('./../resources/images/node.png');
 require('./../resources/zTree/js/jquery.ztree.core.min.js');
 require('./../resources/zTree/css/zTreeStyle/zTreeStyle.css');
 // document.write("aaaa");
-const { mapData } = require('./data.js');
-        const colors = [
-            '#63C4C7','#B2A3DA','#70AFEA','#F4BC89','#CB7F82',
-            '#8F97B1','#E1D047','#9CB45F','#90716E','#CE70A7',
-            '#49A0A3','#9680CC','#648BCF','#E89D5C','#B25754',
-            '#5C6689','#C4AC38','#88AE37','#6B5654','#B34987'
-        ];
-        var myChart = echarts.init(document.getElementById('main'));
-        var categories = mapData['categories'];
-        console.log('categories',categories)
-        var legends = categories.slice(2, categories.length);
-        console.log('legends',legends)
-        option = {
-            title: { text: '关系图谱' },
-            color:colors,
-            tooltip: {
-                formatter: function (x) {
-                    return x.data.label;
-                }
-            },
-            legend: [{
-                type: 'scroll',
-                bottom: 0,
-                color:colors,
-                icon: 'circle',
-                data: legends.map(function (a) {
-                    return a.name;
-                })
-            }],
-            series: [
-                {
-                    type: 'graph',
-                    layout: 'force',
-                    categories: categories,
-                    symbolSize: 80,
-                    roam: true,
-                    edgeSymbol: ['circle', 'arrow'],
-                    edgeSymbolSize: [1, 5],
-                    edgeLabel: {
-                        normal: {
-                            textStyle: {
-                                fontSize: 20
-                            }
-                        }
-                    },
-                    force: {
-                        repulsion: 500,
-                        gravity: 0.8,
-                        edgeLength: [4, 7],
-                        layoutAnimation : true
-                    },
-                    draggable: true,
-                    animation: true,
-                    hoverAnimation:false,
-                    animationDuration:5000,
-                    focusNodeAdjacency: true,
-                    itemStyle: {
-                        normal: {
-                            width: 2,
-                            color: 'target',
-                            curveness: 0,
-                            opacity: 1
-                        }
-                    },
-                    lineStyle: {
-                        normal: {
-                            width: 2,
-                            color: '#4b565b'
+const { post, api } = require('./api.js');
+const { mapData, zTreeData,mapData3,zTreeData3 } = require('./data.js');
+const { drawGraph,updateTree,getGraph,getTree,getNode } = require('./graphMap.js');
 
-                        }
-                    },
-                    edgeLabel: {
-                        normal: {
-                            show: true,
-                            formatter: function (x) {
-                                return x.data.value;  //横线关系
-                            }
-                        }
-                    },
-                    label: {
-                        normal: {
-                            show: true,
-                            textStyle: {
-                            },
-                            formatter: function (x) {
-                                 var tmp = x.data.label;
-                                if(tmp.length >= 8){
-                                    tmp = tmp.substring(0,3);
-                                    tmp = tmp + "...";
-                                }
-                                return tmp;
-                            }
-                        }
-                    },
-                    data: mapData.node,
-                    links: mapData.links
-                }
-            ]
-        };
-        // var option = {
-        //     title: {
-        //         text: 'Les Miserables',
-        //         subtext: 'Default layout',
-        //         top: 'bottom',
-        //         left: 'right'
-        //     },
-        //     tooltip: {
-        //         formatter: function (x) {
-        //             return x.data.label;
-        //         }
-        //     },
-        //     legend: [{
-        //         // selectedMode: 'single',
-        //         data: categories.map(function (a) {
-        //             return a.name;
-        //         })
-        //     }],
-        //     animation: false,
-        //     series : [
-        //         {
-        //             name: 'Les Miserables',
-        //             type: 'graph',
-        //             layout: 'force',
-        //             data: mapData.node,
-        //             links: mapData.links,
-        //             categories: categories,
-        //             roam: true,
-        //             label: {
-        //                 position: 'right'
-        //             },
-        //             force: {
-        //                 repulsion: 100
-        //             }
-        //         }
-        //     ]
-        // };
-        myChart.setOption(option);
 
+var select_type="diagnose";
+var select_type_noSearch="diagnose";
+ const clientHei = $(window).height()
+ const contentHei = clientHei - 60
+ $(".left").css("height",contentHei+'px')
+ $(".right").css("height",contentHei+'px')
+ $(".ztree").css("height",contentHei-80-43-60-10+'px')
+//关系图
+getGraph("胆囊炎",select_type);
+getTree(1,1,"胆囊炎");
+$('#searchInp').val("胆囊炎")
 
-        function zTreeOnClick(event, treeId, treeNode) {
-            console.log(event,treeId)
-		    alert(treeNode.id + ", " + treeNode.name);
-		};
-		//树的配置
-		var setting = {	
-				//数据格式的设置
-				data:{
-					simpleData:{
-						enable:true  //使用简单的json数据
-					}
-				},
-				//树的显示设置
-				view:{
-					showLine:true, //设置是否显示连线 默认为true
-					showTitle: false,//设置是否显示鼠标悬浮时显示title的效果
-					dblClickExpand: false,//设置是否支持双击展开树节点
-					fontCss : {color:"blue"},//设置节点样式  
-					expandSpeed: "slow",//设置展开的速度  fast normal  slow 
-					nameIsHTML: true,//名字是否是HTML
-					
-				},
-				//设置事件回调
-				callback:{
-					onClick:zTreeOnClick
-				}
-		};
+//选择类型
+$('.select').click(function(e){
+    e.stopPropagation();
+    $('.selectList').fadeToggle()
+})
+$('.selectList .selectItem').click(function(){
+    select_type_noSearch = $(this).attr('data-id')
+    const txt =  $(this).text()
+    $(".selectedName").html(txt)
+})
+
+//搜索节点名
+$("#searchInp").bind("input propertychange",function(event){
+    const val = $("#searchInp").val().trim()
+    if(val){
+        getNode(val,select_type_noSearch)
+    }else{
+        $(".tabNameList").hide()
+    }
+});
+
+
+//搜索
+$('#searchBtn').click(function(){
+    const val = $('#searchInp').val()
+    console.log('aaaaaaaaa',val)
+    getGraph(val,'diagnose')
+    updateTree(val)
+})
+
+//切换tab
+$('.tabList .tab').click(function(){
+    const id = $(this).attr('data-id')
+    $(this).addClass("activeTab").siblings().removeClass('activeTab')
+    if(id != select_type){
+        if(id != "diagnose"){
+            $(".radioList").hide()
+        }else{
+            $(".radioList").show()
+        }
+        select_type = id
+        // getTree(1,1,"");  //切换tab重新画菜单树
+    }
+})
+
+//点击页面其他地方关闭下拉
+$('html').click(function(){
+    const selectListShow = $('.selectList').css('display')
+    if(selectListShow == 'block'){
+        $('.selectList').hide()
+    }
+})
+		
 		
-		/**
-		属性说明  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)]
-			   
-		**/
-		//树的json数据
-		var zNodes =[
-			{ id:1, pId:0, name:"<font color='red'>父节点1 - 展开</font>", open:true},
-			{ id:11, pId:1, name:"父节点11 - 折叠",icon:"resources/zTree/css/zTreeStyle/img/diy/2.png"},
-			{ id:111, pId:11, name:"叶子节点111",target:'_blank',url:'http://www.baidu.com'},
-			{ id:112, pId:11, name:"叶子节点112"},
-			{ id:113, pId:11, name:"叶子节点113"},
-			{ id:114, pId:11, name:"叶子节点114"},
-			{ id:12, pId:1, name:"父节点12 - 折叠",iconOpen:"resources/zTree/css/zTreeStyle/img/diy/1_open.png",iconClose:"resources/zTree/css/zTreeStyle/img/diy/1_close.png"},
-			{ id:121, pId:12, name:"叶子节点121"},
-			{ id:122, pId:12, name:"叶子节点122"},
-			{ id:123, pId:12, name:"叶子节点123"},
-			{ id:124, pId:12, name:"叶子节点124"},
-			{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
-			{ id:2, pId:0, name:"父节点2 - 折叠"},
-			{ id:21, pId:2, name:"父节点21 - 展开", open:true},
-			{ id:211, pId:21, name:"叶子节点211"},
-			{ id:212, pId:21, name:"叶子节点212"},
-			{ id:213, pId:21, name:"叶子节点213"},
-			{ id:214, pId:21, name:"叶子节点214"},
-			{ id:22, pId:2, name:"父节点22 - 折叠"},
-			{ id:221, pId:22, name:"叶子节点221"},
-			{ id:222, pId:22, name:"叶子节点222"},
-			{ id:223, pId:22, name:"叶子节点223"},
-			{ id:224, pId:22, name:"叶子节点224"},
-			{ id:23, pId:2, name:"父节点23 - 折叠"},
-			{ id:231, pId:23, name:"叶子节点231"},
-			{ id:232, pId:23, name:"叶子节点232"},
-			{ id:233, pId:23, name:"叶子节点233"},
-			{ id:234, pId:23, name:"叶子节点234"},
-			{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
-		];
-		$(document).ready(function(){
-			//初始化zTree
-			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
-		});
+	

src/js/knowledgeTree.js

@@ -1,189 +1,17 @@
+require("./../css/knowledgeTree.less");
+require("./../css/common.css");
 const $ = require("jquery");
 const echarts = require('echarts');
+const { getSchema } = require('./schemaMap.js');
 
+$("#searchTxt").val("胆囊炎")
+getSchema('胆囊炎','diagnose')
 
-var myChart = echarts.init(document.getElementById('main'));
-
-const data = {
-    "children": [
-        {
-            "children": [
-                {
-                    "children": [
-                        {
-                            "children": [],
-                            "name": "低压车间表计82"
-                        }
-                    ],
-                    "name": "低压关口表计1"
-                }
-            ],
-            "name": "高压子表计122"
-        },
-        {
-            "children": [
-                {
-                    "children": [],
-                    "name": "低压关口表计101"
-                }
-            ],
-            "name": "高压子表计141"
-        },
-        {
-            "children": [
-                {
-                    "children": [
-                        {
-                            "children": [],
-                            "name": "低压车间表计82-1"
-                        },
-                        {
-                            "children": [],
-                            "name": "低压车间表计82-2"
-                        },
-                        {
-                            "children": [],
-                            "name": "低压车间表计82-3"
-                        },
-                        {
-                            "children": [],
-                            "name": "低压车间表计82-4"
-                        },
-                        {
-                            "children": [],
-                            "name": "低压车间表计82-5"
-                        }
-                    ],
-                    "name": "低压关口表计1-1"
-                }
-            ],
-            "name": "高压子表计122-1"
-        },
-    ],
-    "name": "高压总表计102"
-}
-// echarts.util.each(data.children, function (datum, index) {  //index为偶数时展开
-//     index % 2 === 0 && (datum.collapsed = true);
-// });
-myChart.setOption(option = {
-    tooltip: {
-        show:'true',//默认：true；是否显示提示框组件，包括提示框浮层和 axisPointer。
-        trigger: 'item',//默认：item；触发类型。item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none':什么都不触发。
-        triggerOn: 'mousemove',
-        borderColor: '#abcdef'
-    },
-    series:[
-        {
-            type: 'tree',
-
-            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: '#fff',
-                    padding: [5,5,5,5]
-                },
-            },
-
-            leaves: {
-                label: {
-                    normal: {
-                        position: ['-100%',5],
-                        rotate:0,
-                        verticalAlign: 'middle',
-                        align: 'right',
-                        fontSize: 12,//文字的字体大小
-                    }
-                }
-            },  
-
-            animationDurationUpdate: 750
-            
-        }
-    ]
+$(".sumbit").click(function(){
+    const val = $("#searchTxt").val().trim()
+    getSchema(val,'diagnose')
 })
-myChart.setOption(option);
-
 
 
-var setting = { };
 
-var zNodes =[
-{ name:"父节点1 - 展开", open:true,
-children: [
-{ name:"父节点11 - 折叠",
-children: [
-{ name:"叶子节点111"},
-{ name:"叶子节点112"},
-{ name:"叶子节点113"},
-{ name:"叶子节点114"}
-]},
-{ name:"父节点12 - 折叠",
-children: [
-{ name:"叶子节点121"},
-{ name:"叶子节点122"},
-{ name:"叶子节点123"},
-{ name:"叶子节点124"}
-]},
-{ name:"父节点13 - 没有子节点", isParent:true}
-]},
-{ name:"父节点2 - 折叠",
-children: [
-{ name:"父节点21 - 展开", open:true,
-children: [
-{ name:"叶子节点211"},
-{ name:"叶子节点212"},
-{ name:"叶子节点213"},
-{ name:"叶子节点214"}
-]},
-{ name:"父节点22 - 折叠",
-children: [
-{ name:"叶子节点221"},
-{ name:"叶子节点222"},
-{ name:"叶子节点223"},
-{ name:"叶子节点224"}
-]},
-{ name:"父节点23 - 折叠",
-children: [
-{ name:"叶子节点231"},
-{ name:"叶子节点232"},
-{ name:"叶子节点233"},
-{ name:"叶子节点234"}
-]}
-]},
-{ name:"父节点3 - 没有子节点", isParent:true}
 
-];
-//这下面三个 都是一样的功能 都是就绪函数的意思。
-// window.onload=function () { }
-// $(function () {
-// 
-// })
-$(document).ready(function(){
-    console.log( ' $.fn.zTree',$.fn)
-     $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
-});

src/js/schemaMap.js

@@ -0,0 +1,84 @@
+const echarts = require("echarts");
+const { post, api } = require('./api.js');
+
+function getSchema(val, type){
+    post(api.getSchema,{
+        "labelName": type,
+        "pramNme": val
+    }).then(res=>{
+        if(res.data.code == 0) {
+            drawSchema(res.data.data)
+        }
+    })
+}
+ function drawSchema(data){
+    var myChart = echarts.init(document.getElementById('main'));
+    myChart.setOption(option = {
+        title: { text: 'schema 结构' },
+        tooltip: {
+            show:'true',//默认：true；是否显示提示框组件，包括提示框浮层和 axisPointer。
+            trigger: 'item',//默认：item；触发类型。item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none':什么都不触发。
+            triggerOn: 'mousemove',
+            borderColor: '#abcdef'
+        },
+        series:[
+            {
+                type: 'tree',
+    
+                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: '#fff',
+                        padding: [5,5,5,5]
+                    },
+                },
+    
+                leaves: {
+                    label: {
+                        normal: {
+                            position: ['-100%',5],
+                            rotate:0,
+                            verticalAlign: 'middle',
+                            align: 'right',
+                            fontSize: 12,//文字的字体大小
+                           
+                        }
+                    }
+                },  
+    
+                animationDurationUpdate: 750
+                
+            }
+        ]
+    })
+    myChart.setOption(option);
+ }
+
+ module.exports ={
+    getSchema
+ }

src/resources/zTree/css/zTreeStyle/zTreeStyle.css

@@ -70,11 +70,11 @@ website:	http://code.google.com/p/jquerytree/
 .ztree li span.button.bottom_docu{background-position:-56px -36px}
 .ztree li span.button.noline_docu{ background:none;}
 
-.ztree li span.button.ico_open{margin-right:2px; background-position:-110px -16px; vertical-align:top; *vertical-align:middle}
-.ztree li span.button.ico_close{margin-right:2px; background-position:-110px 0; vertical-align:top; *vertical-align:middle}
-.ztree li span.button.ico_docu{margin-right:2px; background-position:-110px -32px; vertical-align:top; *vertical-align:middle}
-.ztree li span.button.edit {margin-right:2px; background-position:-110px -48px; vertical-align:top; *vertical-align:middle}
-.ztree li span.button.remove {margin-right:2px; background-position:-110px -64px; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.ico_open{margin-right:2px;margin-top:2px; background-position:-110px -16px; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.ico_close{margin-right:2px;margin-top:2px; background-position:-110px 0; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.ico_docu{margin-right:2px;margin-top:2px; background-position:-110px -32px; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.edit {margin-right:2px;margin-top:2px; background-position:-110px -48px; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.remove {margin-right:2px;margin-top:2px; background-position:-110px -64px; vertical-align:top; *vertical-align:middle}
 
 .ztree li span.button.ico_loading{margin-right:2px; background:url(./img/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
 
@@ -94,4 +94,7 @@ ul.ztree.zTreeDragUL {margin:0; padding:0; position:absolute; width:auto; height
 .ztree li ul.level0 {
 	padding:0;
 	background:none;
-}*/
+}*/
+.ztree li span.button.switch{
+	display:none;
+}