Browse Source

Merge branch 'participle' into test

zhangxc 5 years ago
parent
commit
778e76f65d

+ 7 - 3
src/css/knowledgeMap.less

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

+ 7 - 3
src/css/knowledgeTree.less

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

+ 28 - 25
src/html/knowledgeGraph.html

@@ -15,28 +15,28 @@
 		<div class="title">
 			<div class="titleTxt">
 				<img class="titleLogo" src="./images/logo.png" alt="logo">
-				<img class="titleLogo titleLogoShaiyifu" src="./images/logo_shaoyifu.png" alt="logo">
+				<!-- <img class="titleLogo titleLogoShaiyifu" src="./images/logo_shaoyifu.png" alt="logo"> -->
 				<span class="titleInfo">|&nbsp;&nbsp;医学知识图谱</span>
 			</div>
 		</div>
 		<div class="content clearfix">
 			<div class="left">
 				<div id="main" class="mapWrapper" style="width: 796px;height:600px;cursor: pointer;"></div>
-				<div class="footer">
+				<!-- <div class="footer">
 					杭州朗通信息技术有限公司 & 浙江大学医学院附属邵逸夫医院&nbsp;&nbsp;&nbsp;联合开发
-				</div>
+				</div> -->
 			</div>
 			<div class="right">
 				<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
@@ -49,23 +49,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>
 			

+ 16 - 16
src/html/knowledgeTree.html

@@ -16,27 +16,27 @@
       
         <div class="titleTxt">
           <img class="titleLogo" src="./images/logo.png" alt="logo">
-          <img class="titleLogo titleLogoShaiyifu" src="./images/logo_shaoyifu.png" alt="logo">
+          <!-- <img class="titleLogo titleLogoShaiyifu" src="./images/logo_shaoyifu.png" alt="logo"> -->
           <span class="titleInfo">|&nbsp;&nbsp;描述框架</span>
       </div>
       <div class="content clearfix">
         <div class="left">
           <div id="main" class="mapWrapper" style="width: 796px;height:600px;cursor: pointer;"></div>
-          <div class="footer">
+          <!-- <div class="footer">
             杭州朗通信息技术有限公司 & 浙江大学医学院附属邵逸夫医院&nbsp;&nbsp;&nbsp;联合开发
-          </div>
+          </div> -->
         </div>
         <div class="right">
           <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>
@@ -46,17 +46,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>

+ 3 - 3
src/html/participle.html

@@ -13,7 +13,7 @@
 		<div class="title">
 			<div class="titleTxt">
 				<img class="titleLogo" src="./images/logo.png" alt="logo">
-				<img class="titleLogo titleLogoShaiyifu" src="./images/logo_shaoyifu.png" alt="logo">
+				<!-- <img class="titleLogo titleLogoShaiyifu" src="./images/logo_shaoyifu.png" alt="logo"> -->
 				<span class="titleInfo">|&nbsp;&nbsp;电子病历信息抽取</span>
 			</div>
 		</div>
@@ -80,9 +80,9 @@
 				</div>
 				
 			</div>
-			<div class="footer">
+			<!-- <div class="footer">
 				杭州朗通信息技术有限公司 & 浙江大学医学院附属邵逸夫医院&nbsp;&nbsp;&nbsp;联合开发
-			</div>
+			</div> -->
 		</div>
 	</div>
 	

+ 47 - 26
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);
+                }
+            }
         }
- 
     }
  }
 

+ 27 - 3
src/js/index.js

@@ -13,6 +13,7 @@ require('./../resources/images/radioSelect.png');
 require('./../resources/images/iconSlideUp.png');
 require('./../resources/images/iconSlideDown.png');
 require('./../resources/images/iconSelect.png');
+require('./../resources/images/syflogo.png');
 require('./../resources/images/logo.png');
 require('./../resources/images/logo_shaoyifu.png');
 require('./../resources/zTree/js/jquery.ztree.core.min.js');
@@ -28,6 +29,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 +75,7 @@ $('.radioItem').click(function(e){
      $('#searchInp').val(initDiag)
     getTree(type,1,initDiag);
     getGraph(initDiag,select_type);
-    updateTree(initDiag)
+    // updateTree(initDiag)
 })
 
 //搜索
@@ -81,7 +83,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 +96,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重新画菜单树
     }

+ 27 - 3
src/js/knowledgeTree.js

@@ -13,6 +13,7 @@ require('./../resources/images/radioSelect.png');
 require('./../resources/images/iconSlideUp.png');
 require('./../resources/images/iconSlideDown.png');
 require('./../resources/images/iconSelect.png');
+require('./../resources/images/syflogo.png');
 require('./../resources/images/logo.png');
 require('./../resources/zTree/js/jquery.ztree.core.min.js');
 require('./../resources/zTree/js/jquery.ztree.excheck.min.js')
@@ -26,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')
 //关系图
@@ -71,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()
@@ -90,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重新画菜单树
     }

+ 1 - 0
src/js/participle.js

@@ -6,6 +6,7 @@ const { post, api } = require('./api.js');
 require('./../resources/images/empty2.png');
 require('./../resources/images/iconUp.png');
 require('./../resources/images/iconDown.png');
+require('./../resources/images/syflogo.png');
 require('./../resources/images/iconClose3.png');
 require('./../css/img/icon_tu.png');
 require('./../css/img/icon_wenzi.png');

BIN
src/resources/images/syflogo.png


+ 1 - 1
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: {