文本和图像模式切换

src/css/participle.less

@@ -41,6 +41,20 @@
             border-bottom: 1px solid #E6E6E6;
             font-weight:600;
             color: #333;
+            position: relative;
+            img {
+                position: absolute;
+                right: 0;
+                top: 12px;
+                width: 20px;
+                height: 20px;
+            }
+            #toggleImg {
+                display: none;
+            }
+            #toggleImgs {
+                display: block;
+            }
         }
         .contentInfoBox{
             width: 1160px;
@@ -338,4 +352,7 @@
 
 #svg .poplar-annotation-connection-line.hover {
     stroke: #5A8EEE;
+}
+#svg {
+    display: none;
 }

src/html/participle.html

@@ -35,17 +35,17 @@
 					<textarea name="" id="infoTxt" class="infoTxt" cols="30" rows="10" placeholder="请输入病例内容......"></textarea>
 				</div>
 				<div class="btnBox clearfix">
-					
 					<span class="btn" id="analy">开始分析</span>
 				</div>
 			</div>
 			<div class="contentInfoBox">
-				<p class="contentTitle">实体抽取</p>
+				<p class="contentTitle">实体抽取 <img id="toggleImg" src="./images/icon_tu.png" alt="" title="文本模式"><img title="图像模式" id="toggleImgs" src="./images/icon_wenzi.png" alt=""></p>
 				<div class="resultBox">
 					<div class="empty">
 						<img class="emptyImg" src="./images/empty2.png" alt="您提交的信息暂未收录">
 						<p class="emptyTxt">暂无实体抽取数据～</p>
 					</div>
+					<div class="resultBoxInfo" id="resultBoxInfo"></div>
 					<div class="resultBoxInfo" id="svg"></div>
 				</div>
 			</div>

src/js/index.js

@@ -21,7 +21,6 @@ const { post, api } = require('./api.js');
 const { mapData, zTreeData,mapData3,zTreeData3 } = require('./data.js');
 const { drawGraph,updateTree,getGraph,getTree,getNode } = require('./graphMap.js');
 
-
 window.select_type="diagnose";
 window.select_type_noSearch="diagnose";
  const clientHei = $(window).height()

src/js/participle.js

@@ -7,6 +7,8 @@ require('./../resources/images/empty2.png');
 require('./../resources/images/iconUp.png');
 require('./../resources/images/iconDown.png');
 require('./../resources/images/iconClose3.png');
+require('./../css/img/icon_tu.png');
+require('./../css/img/icon_wenzi.png');
 const {currentIIData} = require('./data.js')
 
 function appendCurrentII(currentIIList){
@@ -25,9 +27,8 @@ function appendCurrentII(currentIIList){
         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()
+            $(`.exampleInfo${index2}`).slideUp();
 
         }else{
             $(`.exampleInfo${index2}`).slideDown()
@@ -67,6 +68,7 @@ $(".pop-cover,.pop-close,.pop-cancel").click(()=>{
 function insertStr(soure, start, newStr){   
     return soure.slice(0, start) + newStr + soure.slice(start);
  }
+ let svgData;
 function getEntityPredict(){
     const val = $('#infoTxt').val()
     const param ={
@@ -80,7 +82,8 @@ function getEntityPredict(){
         ]
 
     };
-    $(".resultBoxInfo").html(`<p style="color: #aaa;text-align: center;margin-top:50px;">正在分析...</p>`);
+    $("#resultBoxInfo").html(`<p style="color: #aaa;text-align: center;margin-top:50px;">正在分析...</p>`);
+    $("#svg").html(`<p style="color: #aaa;text-align: center;margin-top:50px;">正在分析...</p>`);
     $(".analying").css('display','block');
     $('table').css("display","none")
     
@@ -94,23 +97,39 @@ function getEntityPredict(){
             let content = result.content
             if((JSON.stringify(entryList)!='[""]')&&(JSON.stringify(relationList)!='[""]')){
                 // getRelationList(relationList,entryList)
-                // let enter = chageEnter(entryList)
-                // let rela = chageRelation(relationList)
-                // let svgData = Object.assign(enter,rela,{"content":content})
-                // showSvg(svgData)
+                let enter = chageEnter(entryList)
+                let rela = chageRelation(relationList)
+                svgData = Object.assign(enter,rela,{"content":content})
+                if($("#svg").css("display") == "block"){
+                    showSvg(svgData)
+                }
                 getSchema(content,entryList)
                 getRelationList(relationList,entryList)
                 $('#analy').removeClass('disabled')
             }else{
                 $('#analy').addClass('disabled')
-                $('.resultBoxInfo').html('')
+                $('#resultBoxInfo').html('')
                 $('.empty').css("display","block");
-                $('.analying').css("display","none")
-                $('table').css("display","none")
+                $('.analying').css("display","none");
+                $('table').css("display","none");
             }
         }
     })
 }
+$("#toggleImg").click(()=>{
+    $("#resultBoxInfo").css("display","block")
+    $("#svg").css("display","none")
+
+    $("#toggleImg").css("display","none");
+    $("#toggleImgs").css("display","block");
+})
+$("#toggleImgs").click(()=>{
+    $("#resultBoxInfo").css("display","none")
+    $("#svg").css("display","block")
+    showSvg(svgData)
+    $("#toggleImgs").css("display","none");
+    $("#toggleImg").css("display","block");
+})
 function chageEnter(data){
     var keyMap = {
         "name" : "text",
@@ -173,7 +192,7 @@ function getSchema(content, entryList){
             addNum += 34
         }
     }
-    $('.resultBoxInfo').html(content)
+    $('#resultBoxInfo').html(content)
 }
 function getRelationList(relationList,entryList){
     let str = ''
@@ -224,7 +243,7 @@ $("#infoTxt").bind("input propertychange",function(event){
     const val = $("#infoTxt").val().trim()
     if(!val){
         $('#analy').addClass('disabled')
-        $('.resultBoxInfo').html('')
+        $('#resultBoxInfo').html('')
         $('.empty').css("display","block");
         $('table').css("display","none")
     }else{