Browse Source

修改分词页面样式

zhangxc 5 năm trước cách đây
mục cha
commit
7c13a83fe1

+ 25 - 14
src/css/common.css

@@ -28,13 +28,16 @@ table,tr,td{
 }
 
 .pop-box{
-    position: fixed;
+    position: absolute;
     display: none;
-    width: 100%;
-    height: 100%;
-    top:0;
-    left: 0;
+    width: 400px;
+    height: 764px;
+    background: #fff;
+    top:44px;
+    right: 0;
     z-index: 999;
+    box-shadow:0px 14px 22px -6px rgba(20,39,75,0.12);
+    border:1px solid rgba(90,142,238,1);
 }
 .pop-box .pop-cover{
     width: 100%;
@@ -44,21 +47,25 @@ table,tr,td{
 }
 
 .pop-box .pop-container{
-    width: 45%;
-    height: 85%;
-    background: #fff;
+    width: 400px;
+    height: 729px;
+    
     border-radius: 5px;
     position: absolute;
-    left: 28%;
-    top:10%;
+    left: 0;
+    top:0px;
+    z-index: 2;
 }
 .pop-box .pop-title{
-    background: #5A8EEE;
+    /* background: #5A8EEE; */
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     height: 35px;
     line-height: 35px;
     color:#fff;
+    position: absolute;
+    top: 0;
+    width: 100%;
 }
 .pop-box .pop-title h3{
     float: left;
@@ -67,8 +74,9 @@ table,tr,td{
 }
 .pop-box .pop-title .pop-close{
     float: right;
-    margin-right: 10px;
+    margin: 7px 10px 0 0;
     cursor: pointer;
+    width: 20px;
 }
 .pop-box .pop-ok,.pop-box .pop-cancel{
     display: inline-block;
@@ -80,9 +88,12 @@ table,tr,td{
     cursor: pointer;
 }
 .pop-box .pop-body{
-    height: 70%;
+    position: relative;
+    height: 100%;
+    margin-bottom: 20px;
     overflow-y: auto;
-    padding: 15px 0;
+    top: 35px;
+    
 }
 .pop-box .pop-footer{
     padding: 15px;

+ 43 - 13
src/css/participle.less

@@ -47,6 +47,7 @@
             padding: 0 20px;
             background: #fff;
             margin: 0 0 10px 0;
+            position: relative;
         }
         .infoBox{
             display: block;
@@ -106,21 +107,22 @@
             cursor: pointer;
         }
         .example-btn{
-            border: 1px solid #5A8EEE;
             color: #5A8EEE;
-            padding: 9px 20px;
             text-align: center;
             border-radius:4px;
-            font-size: 14px;
+            font-size: 16px;
+            font-weight: 500;
             display: inline-block;
-            margin: 0 10px 0 0;
+            margin: 0 20px 0 0;
             cursor: pointer;
+            position: absolute;
+            right: 0;
         }
-        .example-btn:hover{
-            background-color: #5A8EEE;
-            border-color: #5A8EEE;
-            color: #fff;
-        }
+        // .example-btn:hover{
+        //     background-color: #5A8EEE;
+        //     border-color: #5A8EEE;
+        //     color: #fff;
+        // }
         .resultBox{
             white-space: pre-wrap;
             min-height: 155px;
@@ -255,12 +257,40 @@
 
 }
 .example{
-    height: 30px;
-    line-height: 30px;
+    height: 48px;
+    position: relative;
+    line-height: 48px;
     text-indent: 15px;
     cursor: pointer;
+    color: #000;
+    font-size: 14px;
     &:hover,&.selected{
-        background: #58a6e7;
-        color: #fff;
+        background: #F0F5FF;
+        
     }
+}
+.exampleInfo{
+    background: #F0F5FF;
+    padding: 15px;
+    font-size: 14px;
+    line-height: 21px;
+    display: none;
+}
+.exampleBtn{
+    display: inline-block;
+    width:60px;
+    height:28px;
+    line-height: 28px;
+    border-radius:14px;
+    border:1px solid #5A8EEE;
+    color: #5A8EEE;
+    position: absolute;
+    right: 75px;
+    top: 9px;
+}
+.iconSlide{
+    position: absolute;
+    width: 14px;
+    top: 20px;
+    right: 15px;
 }

+ 31 - 26
src/html/participle.html

@@ -16,12 +16,26 @@
 		</div>
 		<div class="content">
 			<div class="contentInfoBox">
-				<p class="contentTitle">病历(现病史)</p>
+				<p class="contentTitle">病历(现病史)<span class="example-btn" id="showEgBtn">引用示例</span></p>
+				<div class="exampleList pop-box">
+					<!-- <div class="pop-cover"></div> -->
+					<div class="pop-container">
+						<div class="pop-title">
+							<h3>示例列表</h3>
+							<img class="pop-close" src="./images/iconClose3.png" alt="">
+						</div>
+						<div class="pop-body"></div>
+						<!-- <div class="pop-footer">
+							<button class="pop-ok">确定</button>
+							<button class="pop-cancel">取消</button>
+						</div> -->
+					</div>
+				</div>
 				<div class="infoBox">
 					<textarea name="" id="infoTxt" class="infoTxt" cols="30" rows="10" placeholder="请输入病例内容......"></textarea>
 				</div>
 				<div class="btnBox clearfix">
-					<span class="example-btn" id="showEgBtn">引用示例</span>
+					
 					<span class="btn" id="analy">开始分析</span>
 				</div>
 			</div>
@@ -43,35 +57,26 @@
 						<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 class="tableWrapper">
+						<p class="analying" style="color: #aaa;text-align: center;margin-top:50px;">正在分析...</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>
 	</div>
-	<div class="exampleList pop-box">
-		<div class="pop-cover"></div>
-		<div class="pop-container">
-			<div class="pop-title">
-				<h3>示例列表</h3>
-				<a class="pop-close">×</a>
-			</div>
-			<div class="pop-body"></div>
-			<div class="pop-footer">
-				<button class="pop-ok">确定</button>
-				<button class="pop-cancel">取消</button>
-			</div>
-		</div>
-	</div>
+	
 
 </body>
 

+ 1 - 0
src/js/api.js

@@ -5,6 +5,7 @@ const api = {
   getSchema:'/api/ltkg/kg/getSchema',
   getTree:'/api/ltkg/kg/getTree',
   entity_predict:'api/ltkg/nlp/getNlp',
+  getMrInfo:'/api/ltkg/presetInfo/getMrInfo',
 };
 
 const getUrlArgObject = function(name) {//

+ 70 - 19
src/js/participle.js

@@ -4,36 +4,66 @@ require("./../css/participle.less");
 require("./../css/common.css");
 const { post, api } = require('./api.js');
 require('./../resources/images/empty2.png');
+require('./../resources/images/iconUp.png');
+require('./../resources/images/iconDown.png');
+require('./../resources/images/iconClose3.png');
 const {currentIIData} = require('./data.js')
-const initData = currentIIData[14]
 
-for(let i = 0; i < currentIIData.length; i++){
-    let str = `<p class="example" id="example${i+1}" data-index=${i}>示例${i+1}</p>`;
-    $('.exampleList .pop-body').append(str)
+function appendCurrentII(currentIIList){
+    for(let i = 0; i < currentIIList.length; i++){
+        let str = `<p class="example" id="example${i+1}" data-index=${i}>${currentIIList[i].title} <span class="exampleBtn">引用</span> <img class="iconSlide" src="./images/iconDown.png" alt="logo"></p>
+                    <div class="exampleInfo${i} exampleInfo">${currentIIList[i].content}</div>`;
+        $('.exampleList .pop-body').append(str)
+    }
+    
+    $('.example').click(function(){
+        const index1 = $(".example.selected").attr('data-index');
+        $(`.example.selected img`).attr('src','./images/iconDown.png')
+        $(`.exampleInfo${index1}`).slideUp()
+        $(".example").removeClass("selected");
+        $(this).addClass("selected");
+        const index2 = $(".example.selected").attr('data-index');
+        if($(`.exampleInfo${index2}`).css('display') === 'block'){
+            $(`.example.selected img`).attr('src','./images/iconDown.png')
+
+            $(".example").removeClass("selected");
+            $(`.exampleInfo${index2}`).slideUp()
+
+        }else{
+            $(`.exampleInfo${index2}`).slideDown()
+            $(`.example.selected img`).attr('src','./images/iconUp.png')
+        }
+        
+    });
+    $('.exampleBtn').click(function(e){
+        e.stopPropagation();
+        const index = $(this).parent().attr('data-index');
+        $('#infoTxt').val(currentIIList[index].content);
+        getEntityPredict();
+        $(".pop-box").hide();
+    });
 }
 
-$('.example').click(function(){
-    $(".example").removeClass("selected");
-    $(this).addClass("selected");
-});
 
-$('.exampleList .pop-ok').click(()=>{
-  $(".pop-box").hide();
-  const index = $(".example.selected").attr('data-index');
-  $('#infoTxt').val(currentIIData[index]);
-  getEntityPredict();
-});
+
+
+
 
 $("#showEgBtn").click(function(){
-  $(".pop-box").show();
+    const popShow = $(".pop-box").css('display')
+    if(popShow === 'block'){
+        $(".pop-box").hide();
+    } else{
+        $(".pop-box").show();
+    }
+    
 });
 /******弹窗事件******/
 $(".pop-cover,.pop-close,.pop-cancel").click(()=>{
     $(".pop-box").hide();
 })
 
-$('#infoTxt').val(initData)
-getEntityPredict();
+
 function insertStr(soure, start, newStr){   
     return soure.slice(0, start) + newStr + soure.slice(start);
  }
@@ -51,13 +81,16 @@ function getEntityPredict(){
 
     };
     $(".resultBoxInfo").html(`<p style="color: #aaa;text-align: center;margin-top:50px;">正在分析...</p>`);
+    $(".analying").css('display','block');
+    $('table').css("display","none")
+    
     $('.empty').hide();
     post(api.entity_predict, param).then(res =>{
         if(res.data.code == '0'){
             const data = JSON.parse(res.data.data)
             const result = data.data[0].entity_relation_object
-            const entryList  = result.outputs.annotation['T']
-            const relationList = result.outputs.annotation['R']
+            const entryList  = result&&result.outputs&&result.outputs.annotation['T']
+            const relationList = result&&result.outputs&&result.outputs.annotation['R']
             let content = result.content
             getSchema(content,entryList)
             getRelationList(relationList,entryList)
@@ -96,6 +129,7 @@ function getRelationList(relationList,entryList){
     }
     if(str){
         $('.empty').css("display","none");
+        $('.analying').css("display","none")
         $('table').css("display","table")
     }
     $('.relationBody').html(str)
@@ -107,6 +141,23 @@ $("#analy").click(function(){
         getEntityPredict()
     }
 })
+getMrInfo()
+function getMrInfo(){
+    post(api.getMrInfo, {}).then(res =>{
+        if(res.data.code == '0'){
+            const MrInfoList = res.data.data
+            const initData = MrInfoList[0].content
+            initTxtData(initData)
+            const currentIIList = MrInfoList&&MrInfoList.slice(1,MrInfoList.length)
+            appendCurrentII(currentIIList)
+        }
+    })
+}
+
+function initTxtData(data){
+    $('#infoTxt').val(data)
+    getEntityPredict();
+}
 
 $("#infoTxt").bind("input propertychange",function(event){
     const val = $("#infoTxt").val().trim()

BIN
src/resources/images/iconClose3.png


BIN
src/resources/images/iconDown.png


BIN
src/resources/images/iconUp.png