medicalTermMap.js 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. const $ = require("jquery");
  2. require("babel-polyfill");
  3. const echarts = require("echarts");
  4. require("./../css/medicalTermMap.less");
  5. require('./../resources/images/empty2.png');
  6. const { post, api } = require('./api.js');
  7. const { medicalTermDefaultMap } = require('./utils.js');
  8. window.select_type="disease";
  9. window.select_name="疾病";
  10. $("#infoTxt").bind("input propertychange",function(event){
  11. const val = $("#infoTxt").val().trim();
  12. if(!val){
  13. $('#submit').addClass('disabled')
  14. }else{
  15. $('#submit').removeClass('disabled')
  16. }
  17. });
  18. $(".submit").on("click",function(){
  19. const val = $('#infoTxt').val().trim()
  20. if(!val || $('.disabled')[0]){
  21. return
  22. }
  23. let param = {
  24. word_type: select_type,
  25. word: val,
  26. number: 10
  27. }
  28. $('#submit').addClass('disabled')
  29. $(".mapResult").html('正在加载中~')
  30. $(".emptyBox2").css("display","block")
  31. return post(api.getTerm,param).then(res =>{
  32. if(res.data.code == 0){
  33. const data = res.data.data
  34. let standardList = []
  35. if(data){
  36. dataObj = JSON.parse(data)
  37. standardList = dataObj['standard_words'] || []
  38. if(standardList.length > 0){
  39. getGraph(standardList[0].standard_word,select_name)
  40. renderStandrandWord(standardList)
  41. }else{
  42. renderStandrandWord(standardList)
  43. $(".emptyBox2").css("display","none")
  44. $('#submit').removeClass('disabled')
  45. }
  46. }
  47. }else{
  48. // getGraph(medicalTermDefaultMap[select_type],select_type)
  49. $('#submit').removeClass('disabled')
  50. }
  51. })
  52. })
  53. //设置默认值
  54. setDefaultVal(medicalTermDefaultMap[select_type])
  55. // $(".tabItem").click(function(){
  56. // const selectType = $(this).attr("data-type")
  57. // const selectName = $(this).attr("data-name")
  58. // select_type = selectType
  59. // select_name = selectName
  60. // $(this).addClass("activeTab").siblings().removeClass("activeTab")
  61. // setDefaultVal(medicalTermDefaultMap[select_type])
  62. // })
  63. function setDefaultVal(val){
  64. $("#infoTxt").val(val)
  65. $(".submit").click()
  66. }
  67. function renderStandrandWord(list){
  68. let str = ""
  69. for(let i = 0; i < list.length; i++){
  70. str += `<span class="resultItem ${i === 0 ? 'resultActive':''}" data-name="${list[i].standard_word}">${list[i].standard_word}</span>`
  71. }
  72. if(list.length === 0){
  73. str="暂无结果~"
  74. $(".emptyBox").css("display","block")
  75. }
  76. $(".mapResult").html(str)
  77. bindResultItemClick()
  78. }
  79. function bindResultItemClick(){
  80. $(".resultItem").off("click").on("click",function(){
  81. $(this).addClass("resultActive").siblings().removeClass("resultActive")
  82. const name = $(this).attr("data-name")
  83. getGraph(name,select_name)
  84. })
  85. }
  86. //关系图
  87. function getGraph(val, type){
  88. return post(api.getGraph,{
  89. "inputStr": val,
  90. "labelName": type
  91. }).then(res=>{
  92. if(res.data.code == 0) {
  93. // select_type = select_type_noSearch
  94. drawGraph(res.data.data)
  95. $(".emptyBox").css("display","none")
  96. }else{
  97. $(".emptyBox").css("display","block")
  98. }
  99. $('#submit').removeClass('disabled')
  100. $(".emptyBox2").css("display","none")
  101. })
  102. }
  103. function drawGraph(data,resultShowId) {
  104. // var colors = [
  105. // '#FB95AF','#788083','#B2CCCF','#68BDF6','#FFD86E','#6DCE9F','#9BB2F0','#DBB7AC'
  106. // ]
  107. var myChart = echarts.init(document.getElementById('main'));
  108. var categories = data['categories'];
  109. var legends = categories.slice(2, categories.length);
  110. var option = {
  111. // title: {
  112. // text: '医学知识图谱',
  113. // top: '10',
  114. // left: '10'
  115. // },
  116. // color:colors,
  117. tooltip: {
  118. formatter: function (x) {
  119. return x.data.label;
  120. }
  121. },
  122. legend: [{
  123. type: 'scroll',
  124. bottom: 0,
  125. icon: 'circle',
  126. // cursor:'pointer',
  127. data: legends.map(function (a) {
  128. return a.name;
  129. })
  130. }],
  131. series: [
  132. {
  133. type: 'graph',
  134. layout: 'force',
  135. cursor:'pointer',
  136. categories: categories,
  137. symbolSize: 80,
  138. roam: 'move',
  139. edgeSymbol: ['circle', 'arrow'],
  140. edgeSymbolSize: [1, 5],
  141. edgeLabel: {
  142. // cursor:'pointer',
  143. normal: {
  144. textStyle: {
  145. fontSize: 20
  146. }
  147. }
  148. },
  149. force: {
  150. repulsion: 500,
  151. gravity: 0.8,
  152. friction :0.2, //动画速度
  153. edgeLength: [4, 7],
  154. layoutAnimation : true
  155. },
  156. draggable: false,
  157. animation: true,
  158. hoverAnimation:false,
  159. animationDuration:5000,
  160. focusNodeAdjacency: true,
  161. itemStyle: {
  162. normal: {
  163. width: 2,
  164. // color: 'target',
  165. // cursor:'pointer',
  166. curveness: 0,
  167. opacity: 1
  168. }
  169. },
  170. lineStyle: {
  171. normal: {
  172. width: 2,
  173. cursor:'default',
  174. color: 'target'
  175. }
  176. },
  177. edgeLabel: {
  178. normal: {
  179. show: true,
  180. formatter: function (x) {
  181. return x.data.value; //横线关系
  182. }
  183. }
  184. },
  185. label: {
  186. normal: {
  187. show: true,
  188. textStyle: {
  189. cursor:'pointer',
  190. },
  191. color:'#1E1E1E', //label字体颜色
  192. formatter: function (x) {
  193. var tmp = x.data.label;
  194. if(tmp.length >= 12){
  195. tmp = tmp.substring(0,12);
  196. tmp = tmp + "...";
  197. }
  198. return tmp;
  199. }
  200. }
  201. },
  202. data: data.node,
  203. links: data.links
  204. }
  205. ]
  206. };
  207. $(window).resize(function(){
  208. myChart.resize();
  209. })
  210. // myChart.on('click',dataClick);
  211. myChart.setOption(option);
  212. }
  213. // function dataClick(param){
  214. // var data = param.data;
  215. // console.log('data',data)
  216. // const clientHei = $(window).height()
  217. // const contentHei = clientHei - 80
  218. // // console.log('data', data,select_type)
  219. // // var nodes = option.series[0].nodes;
  220. // if(data.category == 0){
  221. // return
  222. // }else{
  223. // if(data.symbol != "circle"){
  224. // return
  225. // }else{
  226. // if(data.type == select_type){
  227. // $('#searchInp').val(data.label)
  228. // updateTree(data.label)
  229. // getGraph(data.label,select_type);
  230. // }else {
  231. // let renderTabInfo = getTab(data.type)
  232. // renderTab(renderTabInfo)
  233. // if(data.type == "疾病"){
  234. // $(".radioList").show()
  235. // $('.iconRadio').attr('src','/images/radioUnSelect.png')
  236. // $('.ICD10 img').attr('src','/images/radioSelect.png')
  237. // setTabBottomHei(1)
  238. // }else{
  239. // $(".radioList").hide()
  240. // setTabBottomHei(2)
  241. // }
  242. // select_type_noSearch = data.type
  243. // select_type = data.type
  244. // setSelectName(select_type)
  245. // $('#searchInp').val(data.label)
  246. // if(data.type == "疾病"){
  247. // getTree(1,1,data.label);
  248. // getGraph(data.label,select_type);
  249. // }else if(data.type == "药品通用名"){
  250. // getTree(0,2,data.label);
  251. // getGraph(data.label,select_type);
  252. // }else if(data.type == "症状"){
  253. // getTree(0,3,data.label);
  254. // getGraph(data.label,select_type);
  255. // }else if(data.type == "手术和操作"){
  256. // getTree(0,4,data.label);
  257. // getGraph(data.label,select_type);
  258. // }else if(data.type == "实验室检查"){
  259. // getTree(0,5,data.label);
  260. // getGraph(data.label,select_type);
  261. // }else if(data.type == "辅助检查"){
  262. // getTree(0,6,data.label);
  263. // getGraph(data.label,select_type);
  264. // }
  265. // }
  266. // }
  267. // }
  268. // }