添加无内容状态

src/css/common.css

@@ -22,4 +22,7 @@ ul,li{
     overflow: hidden;
     text-overflow:ellipsis;
     white-space: nowrap;
+}
+table,tr,td{
+    list-style: none;
 }

src/css/knowledgeTree.less

@@ -92,7 +92,7 @@
             height: 140px;
             top: 50%;
             left: 50%;
-            margin: -70px 0 0 -108px;
+            margin: -50px 0 0 -108px;
             display: none;
             .emptyImg{
                 width: 216px;

src/css/participle.less

@@ -1,70 +1,229 @@
-.content{
-    position: relative;
-    background: #fff;
-    border: 1px solid #f4f4f4;
-    padding: 20px;
-    margin: 10px 25px;  
+.participleWrappper{
+    width: 100%;
+    min-width: 1200px;
     .title{
-        margin: 10px 0 20px 0;
-        font-size: 22px;
-        padding-bottom: 9px;
-        margin: 40px 0 20px;
-        border-bottom: 1px solid #eee;
-    }
-    .infoBox{
-        display: block;
-    }
-    textarea{
-      
-        width: calc(100% - 30px);
-        padding: 6px 12px;
-        font-size: 14px;
-        line-height: 1.42857143;
-        color: #555;
-        background-color: #fff;
-        background-image: none;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-    }
-    .btnBox{
-        margin: 20px 0;
+        width: 100%;
+        min-width: 1200px;
+        position: relative;
+        height: 40px;
+        line-height: 40px;
+        background-image: linear-gradient(to right, #5A8EEE , #7EABFF);
     }
-    .btn{
-        background-color: #00a65a;
-        border-color: #008d4c;
+    .titleTxt{
+        position: relative;
+        width: 1200px;
+        left: 50%;
+        margin-left: -600px;
         color: #fff;
-        padding: 10px;
-        float: right;
-    }
-    .resultBox{
-        white-space: pre-wrap;
-        // css保留换行符
-        // white-space: pre-line;
+        font-size: 14px;
     }
-    .entryItem{
-        color: blue;
+    .titleLogo{
         position: relative;
+        top: 3px;
+        height: 20px;
     }
-    .type{
-        position: absolute;
-        top: -20px;
-        white-space: nowrap;
+    .content{
+        position: relative;
+        width: 1200px;
         left: 50%;
-        transform: translateX(-50%);
-        display: inline-block;
-        background: #abcdef;
-        color: #000;
-        display: none;
-    }
-    .entryItem:hover{
-        span{
+        margin:10px 0 0  -600px;
+        cursor: default;
+        height: 100%;
+        border: 1px solid #f4f4f4;
+        border-radius:2px;
+        // margin: 10px 25px;  
+        .contentTitle{
+            font-size: 16px;
+            height: 44px;
+            line-height: 44px;
+            border-bottom: 1px solid #E6E6E6;
+            font-weight:600;
+            color: #333;
+        }
+        .contentInfoBox{
+            width: 1160px;
+            padding: 0 20px;
+            background: #fff;
+            margin: 0 0 10px 0;
+        }
+        .infoBox{
+            display: block;
+        }
+        .infoTxt{
+            min-height: 33px;
+            width: 1160px;
+            font-size: 14px;
+            color: #333;
+            resize: none;
+            line-height: 18px;
+            // outline: none;
+            padding: 10px;
+            background: #F7F8FA;
+            border: 1px solid #ccc;
+            box-sizing: border-box;
+            margin: 15px 0 0 0;
+        }
+        .infoTxt:focus{
+            border: 1px solid #58a6e7;
+            outline: 0;
+            -webkit-box-shadow:#58a6e7 0px 0px 2px;
+            -moz-box-shadow: #58a6e7 0px 0px 2px;
+            box-shadow: #58a6e7 0px 0px 2px;
+        }
+            input::-webkit-input-placeholder{
+                color: #ccc;
+            }
+                
+    　　　　input:-moz-placeholder,textarea:-moz-placeholder{
+                color: #ccc;
+            }
+    　　　　input::-moz-placeholder,textarea::-moz-placeholder{
+                color: #ccc;
+            }
+    　　　　input:-ms-input-placeholder,textarea:-ms-input-placeholder{
+                color: #ccc;
+            }
+
+        .btnBox{
+            padding: 20px 0;
+            position: relative;
+        }
+        .btn{
+            position: relative;
+            left: 50%;
+            margin-left: -48px;
+            background-color: #5A8EEE;
+            border-color: #5A8EEE;
+            color: #fff;
+            padding: 9px 20px;
+            text-align: center;
+            border-radius:4px;
+            font-size: 14px;
+        }
+        .resultBox{
+            white-space: pre-wrap;
+            min-height: 155px;
+            line-height: 21px;
+            padding: 20px 0;
+            width: 1160px;
+            position: relative;
+            font-size: 14px;
+            // css保留换行符
+            // white-space: pre-line;
+        }
+        .entryItem{
             display: inline-block;
+            color: blue;
+            position: relative;
+            border-bottom: 1px solid blue;
+        }
+        .type{
+            position: absolute;
+            top: -35px;
+            white-space: nowrap;
+            left: 50%;
+            transform: translateX(-50%);
+            display: inline-block;
+            background: #000;
+            padding: 5px;
+            font-size: 14px;
+            opacity: .8;
+            color: #fff;
+            display: none;
+            border-radius:4px;
+        }
+        .trangle{
+            position: absolute;
+            bottom: -12px;
+            left: 50%;
+            margin-left: -6px;
+            width: 0; 
+            height: 0;
+            border-width: 6px;
+            border-style: solid;
+            border-color:#000 transparent transparent transparent;
+        }
+        .entryItem:hover{
+            span{
+                display: inline-block;
+            }
+        }
+        .tableBox{
+            min-height: 195px;
+            position: relative;
+        }
+        table{
+            display: none;
+            width: 1160px;
+            border: 1px solid #E6E8F0;
+            box-sizing: border-box;
+            border-collapse: collapse;
+            font-size: 14px;
+            thead{
+                tr,td{
+                    border: none;
+                }
+                
+                background: #EFF0F9;
+                position: sticky;
+                top: 0;
+                width: 1160px;
+                display:table;
+                table-layout:fixed;
+
+            }
+            tbody{
+                display: block;
+                width: 1160px;
+                height:570px;
+                overflow-x:hidden;
+                overflow-y:auto;
+                text-align: center;
+                tr{
+                    width: 1160px;
+                    display:table;
+                    table-layout:fixed;
+                }
+            }
+        }
+        tr,td{
+            border: 1px solid #E6E8F0;
+            line-height: 36px;
+        }
+        .tableTitle{
+            width: 100%;
+            font-size: 14px;
+            font-weight:600;
+            color: #333;
+            padding: 20px 0 10px;
+        }
+        .entry1,.entry2,.relationType{
+            text-align: center;
+        }
+        .disabled{
+            opacity: 0.5;
+        }
+        .empty{
+            position: absolute;
+            width: 120px;
+            height: 140px;
+            top: 50%;
+            left: 50%;
+            margin: -50px 0 0 -51px;
+            // display: none;
+            .emptyImg{
+                position: relative;
+                width: 100px;
+                left: 10px;
+            }
+            .emptyTxt{
+                width: 120px;
+                font-size:12px;
+                margin: 20px 0 0 0;
+                text-align: center;
+                color: #aaa;
+            }
         }
     }
-   
-}
+
+}

src/html/knowledgeGraph.html

@@ -1,62 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title><%= htmlWebpackPlugin.options.title %></title>
-  <!-- <link rel="stylesheet" href="./../resources/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css"> -->
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title><%= htmlWebpackPlugin.options.title %></title>
+	<!-- <link rel="stylesheet" href="./../resources/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css"> -->
 	<!-- <script type="text/javascript" src="./../resources/zTree/js/jquery.ztree.core.min.js"></script> -->
 </head>
 
 <body>
-  <div class="knowledgeMapWrapper">
-      <div class="title">
-        <div class="titleTxt"><img class="titleLogo" src="./images/logo.png" alt="logo">&nbsp;&nbsp;|&nbsp;&nbsp;  医学知识图谱</div>
-      </div>
-      <div class="content clearfix">
-        <div class="left">
-          <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>
-              <!-- <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> -->
-            </div>
-            <div class="search">
-                <input type="text" id="searchInp" placeholder="搜索疾病名称" name="" autocomplete="off" ><span class="searchBtn" id="searchBtn">搜索</span>
-                <ul class="tabNameList"></ul>
-                <ul class="tabNameListNoSearch"><li class="ellipsis">请输入内容</li></ul>
-            </div>
-          </div>
-          <div class="bottom">
-             <div class="tabList" id="tabList">
-                <span class="tab activeTab" data-id="diagnose">疾病</span>
-                <!-- <span  class="tab">药物</span>
+	<div class="knowledgeMapWrapper">
+		<div class="title">
+			<div class="titleTxt"><img class="titleLogo" src="./images/logo.png" alt="logo">&nbsp;&nbsp;|&nbsp;&nbsp;
+				医学知识图谱</div>
+		</div>
+		<div class="content clearfix">
+			<div class="left">
+				<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>
+						<!-- <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> -->
+					</div>
+					<div class="search">
+						<input type="text" id="searchInp" placeholder="搜索疾病名称" name="" autocomplete="off"><span
+							class="searchBtn" id="searchBtn">搜索</span>
+						<ul class="tabNameList"></ul>
+						<ul class="tabNameListNoSearch">
+							<li class="ellipsis">请输入内容</li>
+						</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/radioSelect.png" alt="iconRadio">
-                    ICD10
-                </span>
-             </div>
-             <div id="tree" class="ztree"></div>
+					</div>
+					<div class="radioList">
+						<span class="radioItem">
+							<img class="iconRadio" src="/images/radioSelect.png" alt="iconRadio">
+							ICD10
+						</span>
+					</div>
+					<div id="tree" class="ztree"></div>
 
-          </div>
-        </div>  
-      </div>
-  </div>
+				</div>
+			</div>
+		</div>
+	</div>
 
 </body>
 
-</html>
-
+</html>

src/html/knowledgeTree.html

@@ -1,39 +1,41 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title><%= htmlWebpackPlugin.options.title %></title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title><%= htmlWebpackPlugin.options.title %></title>
 </head>
+
 <body>
-  <div class="knowledgeTreeWrapper">
-    <div class="title">
-     
-      <div class="titleTxt"><img class="titleLogo" src="./images/logo.png" alt="logo">&nbsp;&nbsp;|&nbsp;&nbsp; 描述框架</div>
-    </div>
-    <div class="content">
-      <div class="tipsInfo">
-        <p class="tips">提示说明：输入疾病名称，展示其 schema 描述体系。</p>
-        <p  class="tips">输入示例：支气管肺炎 </p>
-      </div>
-      <textarea class="searchTxt" id="searchTxt" placeholder="请输入" autocomplete="off" rows="5"></textarea>
-      <div class="btnBox"><span class="sumbit">提交</span></div>
-      <div class="mainBox">
-        <div id="main" class="mainWrapper" style="width: 1160px;height:600px;">
-          
-        </div>
-        <div class="empty">
-          <img class="emptyImg" src="./images/empty.png" alt="您提交的信息暂未收录">
-          <p class="emptyTxt">您提交的信息暂未收录!</p>
-        </div>
-      </div>
-      
-    </div>
- 
-  </div>
-  
-</body>
+	<div class="knowledgeTreeWrapper">
+		<div class="title">
+
+			<div class="titleTxt"><img class="titleLogo" src="./images/logo.png" alt="logo">&nbsp;&nbsp;|&nbsp;&nbsp;
+				描述框架</div>
+		</div>
+		<div class="content">
+			<div class="tipsInfo">
+				<p class="tips">提示说明：输入疾病名称，展示其 schema 描述体系。</p>
+				<p class="tips">输入示例：支气管肺炎 </p>
+			</div>
+			<textarea class="searchTxt" id="searchTxt" placeholder="请输入" autocomplete="off" rows="5"></textarea>
+			<div class="btnBox"><span class="sumbit">提交</span></div>
+			<div class="mainBox">
+				<div id="main" class="mainWrapper" style="width: 1160px;height:600px;">
 
-</html>
+				</div>
+				<div class="empty">
+					<img class="emptyImg" src="./images/empty2.png" alt="您提交的信息暂未收录">
+					<p class="emptyTxt">您提交的信息暂未收录!</p>
+				</div>
+			</div>
+
+		</div>
+
+	</div>
+
+</body>
 
+</html>

src/html/participle.html

@@ -1,31 +1,64 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title><%= htmlWebpackPlugin.options.title %></title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title><%= htmlWebpackPlugin.options.title %></title>
 </head>
+
 <body>
-  <div>
-      <div class="content">
-        <p class="title">病例</p>
-        <div class="infoBox">
-            <textarea name="" id="infoTxt" cols="30" rows="10"></textarea>
-        </div>
-        <div class="btnBox clearfix">
-            <span class="btn" id="analy">开始分析</span>
-        </div>
-        <p  class="title">结构化</p>
-        <div class="resultBox"></div>
-        <table>
-            <tr></tr>
-        </table>
-      </div>
-      
-  </div>
-  
-</body>
+	<div class="participleWrappper">
+		<div class="title">
+			<div class="titleTxt"><img class="titleLogo" src="./images/logo.png" alt="logo">&nbsp;&nbsp;|&nbsp;&nbsp;
+				医学知识图谱</div>
+		</div>
+		<div class="content">
+			<div class="contentInfoBox">
+				<p class="contentTitle">病历（现病史）</p>
+				<div class="infoBox">
+					<textarea name="" id="infoTxt" class="infoTxt" cols="30" rows="10" placeholder="请输入病例内容......"></textarea>
+				</div>
+				<div class="btnBox clearfix">
+					<span class="btn disabled" id="analy">开始分析</span>
+				</div>
+			</div>
+			<div class="contentInfoBox">
+				<p class="contentTitle">实体抽取</p>
+				<div class="resultBox">
+					<div class="empty">
+						<img class="emptyImg" src="./images/empty2.png" alt="您提交的信息暂未收录">
+						<p class="emptyTxt">暂无实体抽取数据～</p>
+					</div>
+					<div class="resultBoxInfo"></div>
+				</div>
+			</div>
+			<div class="contentInfoBox">
+				<p class="contentTitle">关系抽取</p>
+				<div class="tableBox">
+					<div class="empty">
+						<img class="emptyImg" src="./images/empty2.png" alt="您提交的信息暂未收录">
+						<p class="emptyTxt">暂无实体抽取数据～</p>
+					</div>
+					<p class="tableTitle">关系列表</p>
+					<table>
+						<thead>
+							<tr>
+								<td class="entry1">实体1</td>
+								<td class="relationType">关系类别</td>
+								<td class="entry2">实体2</td>
+							</tr>
+						</thead>
+						<tbody class="relationBody"></tbody>
+					</table>
+				</div>
+				
+			</div>
+		</div>
 
-</html>
+	</div>
+
+</body>
 
+</html>

src/js/api.js

@@ -11,7 +11,7 @@ const api = {
 const post = function (url, data) {
     return new Promise((resolve, reject) => {
       $.ajax({
-        method: 'post',
+        method: 'post', 
         url: url,
         data: JSON.stringify(data),
         contentType: "application/json; charset=UTF-8",

src/js/participle.js

@@ -3,6 +3,7 @@ require("babel-polyfill");
 require("./../css/participle.less");
 require("./../css/common.css");
 const { post, api } = require('./api.js');
+require('./../resources/images/empty2.png');
 
 
 function insertStr(soure, start, newStr){   
@@ -11,7 +12,6 @@ function insertStr(soure, start, newStr){
  }
 function getEntityPredict(){
     const val = $('#infoTxt').val()
-    console.log(val)
     const param ={
         data:[
             {"medical_text_type": "chief_present",
@@ -25,27 +25,63 @@ function getEntityPredict(){
     }
     post(api.entity_predict, param).then(res =>{
         const data = JSON.parse(res.data)
-        console.log('res', data)
         if(data.status){
             const result = data.data[0].entity_relation_object
             const entryList  = result.outputs.annotation['T']
+            const relationList = result.outputs.annotation['R']
             let content = result.content
-            let addNum = 0
-            console.log('entryList',entryList)
-            for(let i = 1; i < entryList.length; i++){
-                content = insertStr(content, entryList[i].start+addNum, `<span class="entryItem"><span class="type">${entryList[i].name}</span>`)
-                addNum += 50 + entryList[i].name.length
-                content = insertStr(content, entryList[i].end+addNum, '</span>')
-                addNum += 7
-            }
-            console.log('content',content)
-            $('.resultBox').html(content)
+            getSchema(content,entryList)
+            getRelationList(relationList,entryList)
         }
     })
 }
 
+function getSchema(content, entryList){
+    let addNum = 0
+    for(let i = 1; i < entryList.length; i++){
+        content = insertStr(content, entryList[i].start+addNum, `<span class="entryItem"><span class="type"><span class="trangle"></span>${entryList[i].name}</span>`)
+        addNum += 50 + entryList[i].name.length + 29
+        content = insertStr(content, entryList[i].end+addNum, '</span>')
+        addNum += 7
+    }
+    $('.resultBoxInfo').html(content)
+}
+function getRelationList(relationList,entryList){
+    let str = ''
+    for(let i = 1; i < relationList.length; i++){
+        const relationItem = relationList[i]
+        const relationName = relationList[i].name
+        const entry1 = entryList.find(item => item.id === relationList[i].from).value
+        const entry2 = entryList.find(item => item.id === relationList[i].to).value
+        str += `<tr>
+            <td class="entry1">${entry1}</td>
+            <td class="relationType">${relationName}</td>
+            <td class="entry2">${entry2}</td>
+        </tr>`
+    }
+    if(str){
+        $('.empty').css("display","none");
+        $('table').css("display","table")
+    }
+    $('.relationBody').html(str)
+}
 
 $("#analy").click(function(){
-    getEntityPredict()
+    const val = $("#infoTxt").val().trim()
+    if(val){
+        getEntityPredict()
+    }
 })
 
+$("#infoTxt").bind("input propertychange",function(event){
+    const val = $("#infoTxt").val().trim()
+    if(!val){
+        $('#analy').addClass('disabled')
+        $('.resultBoxInfo').html('')
+        $('.empty').css("display","block");
+        $('table').css("display","none")
+    }else{
+        $('#analy').removeClass('disabled')
+    }
+});
+