Merge remote-tracking branch 'origin/participle' into test

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

@@ -94,7 +94,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

@@ -0,0 +1,229 @@
+.participleWrappper{
+    width: 100%;
+    min-width: 1200px;
+    .title{
+        width: 100%;
+        min-width: 1200px;
+        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;
+        color: #fff;
+        font-size: 14px;
+    }
+    .titleLogo{
+        position: relative;
+        top: 3px;
+        height: 20px;
+    }
+    .content{
+        position: relative;
+        width: 1200px;
+        left: 50%;
+        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

@@ -0,0 +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>
+</head>
+
+<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>
+
+	</div>
+
+</body>
+
+</html>

src/js/api.js

@@ -3,7 +3,8 @@ const api = {
   getGraph:'/api/ltkg/kg/getGraph',
   getNode:'/api/ltkg/kg/getNode',
   getSchema:'/api/ltkg/kg/getSchema',
-  getTree:'/api/ltkg/kg/getTree'
+  getTree:'/api/ltkg/kg/getTree',
+  entity_predict:'http://192.168.3.150:3456/api/mr_info_ex/entity_predict'
 };
 
 const getUrlArgObject = function(name) {//
@@ -23,31 +24,32 @@ const post = function (url, data,pId) {
   const securityCode = getUrlArgObject("code");
   const appKeyId = getUrlArgObject("appI");
   const appKeySecret = getUrlArgObject("appS");
-    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");
-          xmlHttp.setRequestHeader("appKeyId", appKeyId);
-          xmlHttp.setRequestHeader("appKeySecret", appKeySecret);
-          xmlHttp.setRequestHeader("securityCode", securityCode);
-          xmlHttp.setRequestHeader("productId", pId||146);
-        },
-        success: function (res) {
-          resolve({ data: res });
-        },
-        error: function (error) {
-          reject(error);
-        },
-      });
+  const productId = getUrlArgObject("productId");
+  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");
+        xmlHttp.setRequestHeader("appKeyId", appKeyId);
+        xmlHttp.setRequestHeader("appKeySecret", appKeySecret);
+        xmlHttp.setRequestHeader("securityCode", securityCode);
+        xmlHttp.setRequestHeader("productId", productId);
+      },
+      success: function (res) {
+        resolve({ data: res });
+      },
+      error: function (error) {
+        reject(error);
+      },
     });
+  });
 }
 
 module.exports ={
-    post,
-    api
+  post,
+  api
 }

src/js/index.js

@@ -17,7 +17,6 @@ require('./../resources/images/logo.png');
 require('./../resources/zTree/js/jquery.ztree.core.min.js');
 require('./../resources/zTree/js/jquery.ztree.excheck.min.js')
 require('./../resources/zTree/css/zTreeStyle/zTreeStyle.css');
-// document.write("aaaa");
 const { post, api } = require('./api.js');
 const { mapData, zTreeData,mapData3,zTreeData3 } = require('./data.js');
 const { drawGraph,updateTree,getGraph,getTree,getNode } = require('./graphMap.js');

src/js/participle.js

@@ -0,0 +1,87 @@
+const $ = require("jquery");
+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){   
+
+    return soure.slice(0, start) + newStr + soure.slice(start);
+ }
+function getEntityPredict(){
+    const val = $('#infoTxt').val()
+    const param ={
+        data:[
+            {"medical_text_type": "chief_present",
+             "content": val,
+             "title": "自定义添加的属性",
+             "detail_title": "自定义添加的属性"
+             }
+    
+        ]
+
+    }
+    post(api.entity_predict, param).then(res =>{
+        const data = JSON.parse(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
+            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(){
+    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')
+    }
+});
+

src/js/schemaMap.js

@@ -5,7 +5,7 @@ function getSchema(val, type){
     post(api.getSchema,{
         "labelName": type,
         "pramNme": val
-    },147).then(res=>{
+    }).then(res=>{
         if(res.data.code == 0) {
             if(res.data.data.length >0){
                 $('.empty').hide()

webpack.config.js

@@ -5,11 +5,13 @@ 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.236:5050";
+const proxyHost = "http://192.168.3.150:3456";
 module.exports = {
   entry: {
     index: path.resolve(__dirname, 'src/js', 'index.js'),
     knowledgeTree: path.resolve(__dirname, 'src/js', 'knowledgeTree.js'),
+    participle: path.resolve(__dirname,'src/js', 'participle.js'),
     vendor: 'lodash'// 多个页面所需的公共库文件，防止重复打包带入
   },
   output: {
@@ -48,6 +50,19 @@ module.exports = {
           collapseWhitespace: true //删除空白符与换行符
         }
       }),
+      new HtmlWebpackPlugin({
+        title: 'participle',
+        template: path.resolve(__dirname, 'src/html', 'participle.html'),
+        filename: 'participle.html',
+        chunks: ['participle', 'vendor', 'common'],
+        inject: true,
+        hash: true, //防止缓存
+        minify: {
+          removeAttributeQuotes: true, //压缩 去掉引号
+          removeComments: true, //移除HTML中的注释
+          collapseWhitespace: true //删除空白符与换行符
+        }
+      }),
     new MiniCssExtractPlugin({
       filename: 'css/[name].css',
       chunkFilename: '[id].css'