schema图

src/css/knowledgeMap.less

@@ -232,10 +232,11 @@
             .hideTabList{
                 position: absolute;
                 background: #fff;
-                margin-right: 18px;
+                width: 100%;
                 z-index: 2;
                 display: none;
                 top: 43px;
+                box-shadow:0px 14px 22px -6px rgba(20,39,75,0.12);
             }
             .radioList{
                 height: 60px;

src/css/knowledgeTree.less

@@ -235,10 +235,11 @@
             .hideTabList{
                 position: absolute;
                 background: #fff;
-                margin-right: 18px;
+                width: 100%;
                 z-index: 2;
                 display: none;
                 top: 43px;
+                box-shadow:0px 14px 22px -6px rgba(20,39,75,0.12);
             }
             .radioList{
                 height: 60px;

src/html/knowledgeTree.html

@@ -64,17 +64,20 @@
               </div>
             
             </div>
-             <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 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>
         </div>  

src/js/graphMap.js

@@ -573,7 +573,7 @@ function setTabBottomHei(type){
             'margin': '0px 0px 0px 0px'
         })
         $(".tabBottom").css("height",contentHei-80-43-10+'px')
-        $(".ztree").css("height",contentHei-80-43-60-20+'px')
+        $(".ztree").css("height",contentHei-80-43-60-20-24+'px')
 
     }else if(type == 2){
         $(".tabBottom").css("height",contentHei-80-43-10-20+'px')

src/js/index.js

@@ -35,13 +35,16 @@ window.refreshTree = true
     const contentHei = clientHei - 80
     $(".left").css("height",contentHei+'px')
     $(".right").css("height",contentHei+'px')
-    setTabBottomHei(1)
+    if(select_type=="疾病"){
+        setTabBottomHei(1)
+    }else{
+        setTabBottomHei(2)
+    }
     $("#main").css("height",contentHei-20-20+'px')
  }
  $(window).resize(function(){
     setHei()
-    console.log('graphTxt',graphTxt)
-    getGraph(graphTxt,select_type);
+    // getGraph(graphTxt,select_type);
  })
 
 //关系图

src/js/knowledgeTree.js

@@ -21,23 +21,40 @@ require('./../resources/zTree/css/zTreeStyle/zTreeStyle.css');
 const iconUp = require('./../resources/images/iconUp.png');
 const iconDown = require('./../resources/images/iconDown.png');
 // document.write("aaaa");
-const {getSchema,updateTree,getTree,getNode,getTab,renderTab} = require('./schemaMap.js');
+const {getSchema,updateTree,getTree,getNode,getTab,renderTab,setTabBottomHei} = require('./schemaMap.js');
 
 window.select_type="疾病";
 window.select_type_noSearch="疾病";
 window.refreshTree = true
- const clientHei = $(window).height()
- 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')
+
+
+ setHei()
+ function setHei(){
+    const clientHei = $(window).height()
+    const contentHei = clientHei - 80
+    $(".left").css("height",contentHei+'px')
+    $(".right").css("height",contentHei+'px')
+    console.log('select_type',select_type)
+    if(select_type=="疾病"){
+        setTabBottomHei(1)
+    }else{
+        setTabBottomHei(2)
+    }
+    $("#main").css("height",contentHei-20-20+'px')
+ }
+
+
+
+ $(window).resize(function(){
+    setHei()
+    // getSchema(graphTxt,select_type);
+ })
 //关系图
 getSchema("胆囊炎",select_type);
 getTree(1,1,"胆囊炎");
 $('#searchInp').val("胆囊炎")
 
+
 //选择类型
 $('.select').click(function(e){
     e.stopPropagation();
@@ -124,13 +141,10 @@ $('#searchBtn').click(function(e){
                     $('.iconRadio').attr('src','/images/radioUnSelect.png')
                     $('.ICD10 img').attr('src','/images/radioSelect.png')
                     $(".radioList").show()
-                    $(".ztree").css("height",contentHei-80-43-60-20+'px')
+                    setTabBottomHei(1)
                 }else{
                     $(".radioList").hide()
-                    $(".ztree").css("height",contentHei-80-43-20-20-20+'px')
-                    $(".ztree").css({
-                        margin: '20px 0px 0px 0px'
-                    })
+                    setTabBottomHei(2)
                 }
                 let renderTabInfo = getTab("疾病") 
                 renderTab(renderTabInfo)

src/js/schemaMap.js

@@ -128,22 +128,19 @@ function getNode(val, type){
                 $(".tabNameList").hide()
                 if(select_type_noSearch != select_type){
                     select_type = select_type_noSearch
-                  
+                    let renderInfo = getTab(select_type) 
+                    renderTab(renderInfo)
                     if(select_type == '疾病'){
                         $(".radioList").show()
-                        $(".activeTab").removeClass("activeTab")
-                        $(".diagnose").addClass("activeTab")
-                        $(".ztree").css("height",contentHei-80-43-60-20+'px')
                         // $('#searchInp').val("高血压3级")
                         $('.iconRadio').attr('src','/images/radioUnSelect.png')
                         $('.ICD10 img').attr('src','/images/radioSelect.png')
+                        setTabBottomHei(1)
                         getTree(1,1,txt);
                     }else if(select_type == '药品通用名'){
                         $(".radioList").hide()
-                        $(".ztree").css("height",contentHei-80-43-20+'px')
-                        $(".activeTab").removeClass("activeTab")
-                        $(".drug").addClass("activeTab")
                         getTree(0,2,txt);
+                        setTabBottomHei(2)
                     }
                 }else{
                     updateTree(txt)
@@ -201,6 +198,7 @@ function getSchema(val, type){
             $('#searchInp').val(val)
             if(res.data.data.length >0){
                 window.refreshTree = true
+                window.schemaTxt = val
                 drawSchema(res.data.data)
 
             }else{
@@ -310,6 +308,9 @@ function getSchema(val, type){
             }
         ]
     })
+    $(window).resize(function(){
+        myChart.resize(); 
+     })
     myChart.setOption(option);
  }
 
@@ -397,9 +398,9 @@ function bindTabClick(){
         if(id != select_type){
             if(id != "疾病"){
                 $(".radioList").hide()
-                $(".ztree").css("height",contentHei-80-43-20+'px')
+                setTabBottomHei(2)
             }else{
-                $(".ztree").css("height",contentHei-80-43-60-20+'px')
+                setTabBottomHei(1)
                 $(".radioList").show()
             }
             select_type_noSearch = id
@@ -426,26 +427,26 @@ function bindTabClick(){
             
             
             }else if(id=="药品通用名"){
-                $('#searchInp').val("氟康唑注射液")
-                getTree(0,2,"丹参片");
-                getSchema("丹参片",select_type);
+                $('#searchInp').val("地高辛(XC01AAD072A001010100372)")
+                getTree(0,2,"地高辛(XC01AAD072A001010100372)");
+                getSchema("地高辛(XC01AAD072A001010100372)",select_type);
               
             }else if(id == "症状"){
-                $('#searchInp').val("")
-                getTree(0,3,"");
-                getSchema("",select_type);
+                $('#searchInp').val("背痛")
+                getTree(0,3,"背痛");
+                getSchema("背痛",select_type);
             }else if(id == "手术和操作"){
-                $('#searchInp').val("")
-                getTree(0,4,"");
-                getSchema("",select_type);
+                $('#searchInp').val("动脉缝合术")
+                getTree(0,4,"动脉缝合术");
+                getSchema("动脉缝合术",select_type);
             }else if(id == "实验室检查"){
-                $('#searchInp').val("")
-                getTree(0,5,"");
-                getSchema("",select_type);
+                $('#searchInp').val("白细胞计数(WBC)")
+                getTree(0,5,"白细胞计数(WBC)");
+                getSchema("白细胞计数(WBC)",select_type);
             }else if(id == "辅助检查"){
-                $('#searchInp').val("")
-                getTree(0,6,"");
-                getSchema("",select_type);
+                $('#searchInp').val("肝彩超")
+                getTree(0,6,"肝彩超");
+                getSchema("肝彩超",select_type);
             }
             // getTree(1,1,"");  //切换tab重新画菜单树
         }
@@ -453,12 +454,30 @@ function bindTabClick(){
         hideHideTab()
     })
 }
+function setTabBottomHei(type){
+    const clientHei = $(window).height()
+    const contentHei = clientHei - 80
+    if(type==1){
+        $(".tabBottom").css({
+            'margin': '0px 0px 0px 0px'
+        })
+        $(".tabBottom").css("height",contentHei-80-43-10+'px')
+        $(".ztree").css("height",contentHei-80-43-60-20-24+'px')
 
+    }else if(type == 2){
+        $(".tabBottom").css("height",contentHei-80-43-10-20+'px')
+        $(".tabBottom").css({
+            'margin': '20px 0px 0px 0px'
+        })
+        $(".ztree").css("height",contentHei-80-43-20-20-20+'px')
+    }
+ }
  module.exports ={
     getSchema,
     getTree,
     updateTree,
     getNode,
     getTab,
-    renderTab
+    renderTab,
+    setTabBottomHei
  }