添加药品

src/css/knowledgeMap.less

@@ -59,6 +59,8 @@
                 background:#E2ECFF;
                 border-radius:4px;
                 margin: 20px 10px  10px;
+                position: relative;
+                cursor: pointer;
                 .selectedName{
                     display: inline-block;
                     width: 92px;
@@ -70,8 +72,9 @@
                 }
                 .iconSlide{
                     width: 7px;
-                    position: relative;
-                    top: -3px;
+                    position: absolute ;
+                    top: 18px;
+                    right: 10px;
                 }
                 .selectList{
                     position: absolute;
@@ -85,7 +88,7 @@
                     z-index: 2;
                 }
                 .selectItem:hover{
-                    background: #abcdef;
+                    background: #E2ECFF;
                 }
             }
             .search{
@@ -181,6 +184,7 @@
                     padding: 0 20px 0 10px;
                     font-size: 12px;
                     color: #777;
+                    cursor: pointer;
                 }
                 .activeTab{
                     font-size: 16px;

src/css/knowledgeTree.less

@@ -56,6 +56,8 @@
                 background:#E2ECFF;
                 border-radius:4px;
                 margin: 20px 10px  10px;
+                position: relative;
+                cursor: pointer;
                 .selectedName{
                     display: inline-block;
                     width: 92px;
@@ -67,8 +69,9 @@
                 }
                 .iconSlide{
                     width: 7px;
-                    position: relative;
-                    top: -3px;
+                    position: absolute ;
+                    top: 18px;
+                    right: 10px;
                 }
                 .selectList{
                     position: absolute;
@@ -82,7 +85,7 @@
                     z-index: 2;
                 }
                 .selectItem:hover{
-                    background: #abcdef;
+                    background: #E2ECFF;
                 }
             }
             .search{
@@ -178,6 +181,7 @@
                     padding: 0 20px 0 10px;
                     font-size: 12px;
                     color: #777;
+                    cursor: pointer;
                 }
                 .activeTab{
                     font-size: 16px;

src/html/knowledgeGraph.html

@@ -24,13 +24,13 @@
 				<div class="top">
 					<div class="select">
 						<span class="selectedName">疾病</span>
-						<!-- <img class="iconSlide" src="./images/iconSlideDown.png" alt="iconSlide"> -->
-						<!-- <ul class="selectList">
-						<li class="selectItem" data-id="diagnose">疾病</li>
-						<li class="selectItem">药物</li>
-						<li class="selectItem">症状</li>
-						<li class="selectItem">诊疗</li>
-					</ul> -->
+						<img class="iconSlide" src="./images/iconSlideDown.png" alt="iconSlide">
+						<ul class="selectList">
+						<li class="selectItem" data-id="疾病">疾病</li>
+						<li class="selectItem" data-id="药品通用名">药品</li>
+						<!-- <li class="selectItem">症状</li>
+						<li class="selectItem">诊疗</li> -->
+					</ul>
 					</div>
 					<div class="search">
 						<input type="text" id="searchInp" placeholder="搜索疾病名称" name="" autocomplete="off"><span
@@ -43,23 +43,26 @@
 				</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> -->
+						<span class="tab diagnose activeTab" data-id="疾病">疾病</span>
+						<span  class="tab drug"  data-id="药品通用名">药品</span>
+						<!-- <span  class="tab">症状</span> -->
+						<!-- <span  class="tab">诊疗</span> -->
 					</div>
-					<div class="radioList">
-						<span class="radioItem" data-type="1">
-							<img class="iconRadio" src="/images/radioSelect.png" alt="iconRadio">
-							ICD10
-						</span>
-						<span class="radioItem" data-type="2">
-							<img class="iconRadio" src="/images/radioUnSelect.png" alt="iconRadio">
-							科室
-						</span>
+					
+					<div class="tabBottom">
+						<div class="radioList">
+							<span class="radioItem ICD10" data-type="1" >
+								<img class="iconRadio" src="/images/radioSelect.png" alt="iconRadio">
+								ICD10
+							</span>
+							<span class="radioItem dept" data-type="2" >
+								<img class="iconRadio" src="/images/radioUnSelect.png" alt="iconRadio">
+								科室
+							</span>
+						</div>
+						<div id="tree" class="ztree"></div>
 					</div>
-					<div id="tree" class="ztree"></div>
-
+					
 				</div>
 			</div>
 		</div>

src/html/knowledgeTree.html

@@ -23,13 +23,13 @@
           <div class="top">
             <div class="select">
               <span class="selectedName">疾病</span>
-              <!-- <img class="iconSlide" src="./images/iconSlideDown.png" alt="iconSlide"> -->
-              <!-- <ul class="selectList">
-                <li class="selectItem" data-id="diagnose">疾病</li>
-                <li class="selectItem">药物</li>
-                <li class="selectItem">症状</li>
-                <li class="selectItem">诊疗</li>
-              </ul> -->
+              <img class="iconSlide" src="./images/iconSlideDown.png" alt="iconSlide">
+              <ul class="selectList">
+                <li class="selectItem" data-id="疾病">疾病</li>
+                <li class="selectItem" data-id="药品通用名">药品</li>
+                <!-- <li class="selectItem">症状</li>
+                <li class="selectItem">诊疗</li> -->
+              </ul>
             </div>
             <div class="search">
                 <input type="text" id="searchInp" placeholder="搜索疾病名称" name="" autocomplete="off" ><span class="searchBtn" id="searchBtn">搜索</span>
@@ -39,17 +39,17 @@
           </div>
           <div class="bottom">
              <div class="tabList" id="tabList">
-                <span class="tab activeTab" data-id="diagnose">疾病</span>
-                <!-- <span  class="tab">药物</!DOCTYPE>
-                <span  class="tab">症状</!DOCTYPE>
-                <span  class="tab">诊疗</!DOCTYPE> -->
+                <span class="tab activeTab" data-id="疾病">疾病</span>
+                <span  class="tab" data-id="药品通用名">药品</span>
+                <!-- <span  class="tab">症状</span>
+                <span  class="tab">诊疗</span> -->
              </div>
              <div class="radioList">
-              <span class="radioItem" data-type="1">
+              <span class="radioItem ICD10" data-type="1">
                 <img class="iconRadio" src="/images/radioSelect.png" alt="iconRadio">
                 ICD10
               </span>
-              <span class="radioItem" data-type="2">
+              <span class="radioItem dept" data-type="2">
                 <img class="iconRadio" src="/images/radioUnSelect.png" alt="iconRadio">
                 科室
               </span>

src/js/graphMap.js

@@ -54,7 +54,7 @@ function drawGraph(data,resultShowId) {
             {
                 type: 'graph',
                 layout: 'force',
-                cursor:'default',
+                cursor:'pointer',
                 categories: categories,
                 symbolSize: 80,
                 roam: 'move',
@@ -107,7 +107,7 @@ function drawGraph(data,resultShowId) {
                     normal: {
                         show: true,
                         textStyle: {
-                            // cursor:'pointer',
+                            cursor:'pointer',
                         },
                         color:'#1E1E1E', //label字体颜色
                         formatter: function (x) {
@@ -125,38 +125,59 @@ function drawGraph(data,resultShowId) {
             }
         ]
     };
+    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.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);
+    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").hide()
+                }else{
+                    $(".radioList").show()
+                }
+                if(data.type == "疾病"){
+                    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 == "药品通用名"){
+                    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);
+                }
+            }
         }
- 
     }
  }
 

src/js/index.js

@@ -28,6 +28,7 @@ window.select_type_noSearch="疾病";
  const contentHei = clientHei - 80
  $(".left").css("height",contentHei+'px')
  $(".right").css("height",contentHei+'px')
+ $(".tabBottom").css("height",contentHei-80-43-10+'px')
  $(".ztree").css("height",contentHei-80-43-60-20+'px')
  $("#main").css("height",contentHei-20-20+'px')
 //关系图
@@ -73,7 +74,7 @@ $('.radioItem').click(function(e){
      $('#searchInp').val(initDiag)
     getTree(type,1,initDiag);
     getGraph(initDiag,select_type);
-    updateTree(initDiag)
+    // updateTree(initDiag)
 })
 
 //搜索
@@ -81,7 +82,8 @@ $('#searchBtn').click(function(e){
     e.stopPropagation()
     const val = $('#searchInp').val()
     if(val){
-        getGraph(val,'疾病')
+        select_type=select_type_noSearch
+        getGraph(val,select_type)
         updateTree(val)
     }else{
        $('.tabNameListNoSearch').show()
@@ -93,11 +95,32 @@ $('.tabList .tab').click(function(){
     const id = $(this).attr('data-id')
     $(this).addClass("activeTab").siblings().removeClass('activeTab')
     if(id != select_type){
-        if(id != "diagnose"){
+        if(id != "疾病"){
             $(".radioList").hide()
         }else{
             $(".radioList").show()
         }
+        if(id == "疾病"){
+            select_type_noSearch = id
+            select_type = id
+            $('.selectedName').html(select_type)
+            $(".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,"高血压3级");
+            getGraph("高血压3级",select_type);
+        
+        }else if(id=="药品通用名"){
+            select_type_noSearch = id
+            select_type = id
+            $('.selectedName').html("药品")
+            $(".ztree").css("height",contentHei-80-43-20+'px')
+            $('#searchInp').val("丹参片")
+            getTree(0,2,"丹参片");
+            getGraph("丹参片",select_type);
+          
+        }
         select_type = id
         // getTree(1,1,"");  //切换tab重新画菜单树
     }

src/js/knowledgeTree.js

@@ -27,6 +27,7 @@ window.select_type_noSearch="疾病";
  const contentHei = clientHei - 80
  $(".left").css("height",contentHei+'px')
  $(".right").css("height",contentHei+'px')
+ $(".tabBottom").css("height",contentHei-80-43-10+'px')
  $(".ztree").css("height",contentHei-80-43-60-20+'px')
  $("#main").css("height",contentHei-20-20+'px')
 //关系图
@@ -72,14 +73,15 @@ $('.radioItem').click(function(e){
      $('#searchInp').val(initDiag)
     getTree(type,1,initDiag);
     getSchema(initDiag,select_type);
-    updateTree(initDiag)
+    // updateTree(initDiag)
 })
 //搜索
 $('#searchBtn').click(function(e){
     e.stopPropagation()
     const val = $('#searchInp').val()
     if(val){
-        getSchema(val,'疾病')
+        select_type=select_type_noSearch
+        getGraph(val,select_type)
         updateTree(val)
     }else{
        $('.tabNameListNoSearch').show()
@@ -91,11 +93,32 @@ $('.tabList .tab').click(function(){
     const id = $(this).attr('data-id')
     $(this).addClass("activeTab").siblings().removeClass('activeTab')
     if(id != select_type){
-        if(id != "diagnose"){
+        if(id != "疾病"){
             $(".radioList").hide()
         }else{
             $(".radioList").show()
         }
+        if(id == "疾病"){
+            select_type_noSearch = "疾病"
+            select_type = "疾病"
+            $('.selectedName').html(select_type)
+            $(".ztree").css("height",contentHei-80-43-60-20+'px')
+            $('#searchInp').val("胆囊炎")
+            $('.iconRadio').attr('src','/images/radioUnSelect.png')
+            $('.ICD10 img').attr('src','/images/radioSelect.png')
+            getTree(1,1,"胆囊炎");
+            getSchema("胆囊炎",select_type);
+        
+        }else if(id=="药品通用名"){
+            select_type_noSearch = id
+            select_type = id
+            $('.selectedName').html("药品")
+            $(".ztree").css("height",contentHei-80-43-20+'px')
+            $('#searchInp').val("丹参片")
+            getTree(0,2,"丹参片");
+            getSchema("丹参片",select_type);
+          
+        }
         select_type = id
         // getTree(1,1,"");  //切换tab重新画菜单树
     }

webpack.config.js

@@ -5,7 +5,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const webpack = require('webpack');
-const proxyHost = "http://192.168.2.236:5050";
+const proxyHost = "http://192.168.2.121:5050";
 // const proxyHost = "http://192.168.3.119:5050";
 module.exports = {
   entry: {