|
|
@@ -1,4 +1,277 @@
|
|
|
const $ = require("jquery");
|
|
|
require("babel-polyfill");
|
|
|
const echarts = require("echarts");
|
|
|
-require("./../css/medicalTermMap.less");
|
|
|
+require("./../css/medicalTermMap.less");
|
|
|
+require('./../resources/images/empty2.png');
|
|
|
+const { post, api } = require('./api.js');
|
|
|
+const { medicalTermDefaultMap } = require('./utils.js');
|
|
|
+
|
|
|
+window.select_type="disease";
|
|
|
+window.select_name="疾病";
|
|
|
+
|
|
|
+$("#infoTxt").bind("input propertychange",function(event){
|
|
|
+ const val = $("#infoTxt").val().trim();
|
|
|
+ if(!val){
|
|
|
+ $('#submit').addClass('disabled')
|
|
|
+ }else{
|
|
|
+ $('#submit').removeClass('disabled')
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+$(".submit").on("click",function(){
|
|
|
+ const val = $('#infoTxt').val().trim()
|
|
|
+ let param = {
|
|
|
+ word_type: select_type,
|
|
|
+ word: val,
|
|
|
+ number: 10
|
|
|
+ }
|
|
|
+ return post(api.getTerm,param).then(res =>{
|
|
|
+ if(res.data.code == 0){
|
|
|
+ const data = res.data.data
|
|
|
+ let standardList = []
|
|
|
+ if(data){
|
|
|
+ dataObj = JSON.parse(data)
|
|
|
+ standardList = dataObj['standard_words'] || []
|
|
|
+ if(standardList.length > 0){
|
|
|
+ getGraph(standardList[0].standard_word,select_name)
|
|
|
+ renderStandrandWord(standardList)
|
|
|
+ }else{
|
|
|
+ renderStandrandWord(standardList)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }else{
|
|
|
+ // getGraph(medicalTermDefaultMap[select_type],select_type)
|
|
|
+ }
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+//设置默认值
|
|
|
+setDefaultVal(medicalTermDefaultMap[select_type])
|
|
|
+$(".tabItem").click(function(){
|
|
|
+ const selectType = $(this).attr("data-type")
|
|
|
+ const selectName = $(this).attr("data-name")
|
|
|
+ select_type = selectType
|
|
|
+ select_name = selectName
|
|
|
+ $(this).addClass("activeTab").siblings().removeClass("activeTab")
|
|
|
+ setDefaultVal(medicalTermDefaultMap[select_type])
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+function setDefaultVal(val){
|
|
|
+ console.log('aaaaaaaaaa')
|
|
|
+ $("#infoTxt").val(val)
|
|
|
+ $(".submit").click()
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function renderStandrandWord(list){
|
|
|
+ let str = ""
|
|
|
+ for(let i = 0; i < list.length; i++){
|
|
|
+ str += `<span class="resultItem ${i === 0 ? 'resultActive':''}" data-name="${list[i].standard_word}">${list[i].standard_word}</span>`
|
|
|
+ }
|
|
|
+ if(list.length === 0){
|
|
|
+ str="暂无结果～"
|
|
|
+ $(".emptyBox").css("display","block")
|
|
|
+ }
|
|
|
+ $(".mapResult").html(str)
|
|
|
+ bindResultItemClick()
|
|
|
+}
|
|
|
+function bindResultItemClick(){
|
|
|
+ $(".resultItem").off("click").on("click",function(){
|
|
|
+ $(this).addClass("resultActive").siblings().removeClass("resultActive")
|
|
|
+ const name = $(this).attr("data-name")
|
|
|
+ getGraph(name,select_name)
|
|
|
+ })
|
|
|
+}
|
|
|
+//关系图
|
|
|
+function getGraph(val, type){
|
|
|
+ return post(api.getGraph,{
|
|
|
+ "inputStr": val,
|
|
|
+ "labelName": type
|
|
|
+ }).then(res=>{
|
|
|
+ if(res.data.code == 0) {
|
|
|
+ // select_type = select_type_noSearch
|
|
|
+ drawGraph(res.data.data)
|
|
|
+ $(".emptyBox").css("display","none")
|
|
|
+ }else{
|
|
|
+ $(".emptyBox").css("display","block")
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function drawGraph(data,resultShowId) {
|
|
|
+ // var colors = [
|
|
|
+ // '#FB95AF','#788083','#B2CCCF','#68BDF6','#FFD86E','#6DCE9F','#9BB2F0','#DBB7AC'
|
|
|
+ // ]
|
|
|
+ var myChart = echarts.init(document.getElementById('main'));
|
|
|
+ var categories = data['categories'];
|
|
|
+ var legends = categories.slice(2, categories.length);
|
|
|
+ var option = {
|
|
|
+ // title: {
|
|
|
+ // text: '医学知识图谱',
|
|
|
+ // top: '10',
|
|
|
+ // left: '10'
|
|
|
+ // },
|
|
|
+ // color:colors,
|
|
|
+ tooltip: {
|
|
|
+ formatter: function (x) {
|
|
|
+ return x.data.label;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: [{
|
|
|
+ type: 'scroll',
|
|
|
+ bottom: 0,
|
|
|
+ icon: 'circle',
|
|
|
+ // cursor:'pointer',
|
|
|
+ data: legends.map(function (a) {
|
|
|
+ return a.name;
|
|
|
+ })
|
|
|
+ }],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'graph',
|
|
|
+ layout: 'force',
|
|
|
+ cursor:'pointer',
|
|
|
+ categories: categories,
|
|
|
+ symbolSize: 80,
|
|
|
+ roam: 'move',
|
|
|
+ edgeSymbol: ['circle', 'arrow'],
|
|
|
+ edgeSymbolSize: [1, 5],
|
|
|
+ edgeLabel: {
|
|
|
+ // cursor:'pointer',
|
|
|
+ normal: {
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 20
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ force: {
|
|
|
+ repulsion: 500,
|
|
|
+ gravity: 0.8,
|
|
|
+ friction :0.2, //动画速度
|
|
|
+ edgeLength: [4, 7],
|
|
|
+ layoutAnimation : true
|
|
|
+ },
|
|
|
+ draggable: false,
|
|
|
+ animation: true,
|
|
|
+ hoverAnimation:false,
|
|
|
+ animationDuration:5000,
|
|
|
+ focusNodeAdjacency: true,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ // color: 'target',
|
|
|
+ // cursor:'pointer',
|
|
|
+ curveness: 0,
|
|
|
+ opacity: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ cursor:'default',
|
|
|
+ color: 'target'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ edgeLabel: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ formatter: function (x) {
|
|
|
+ return x.data.value; //横线关系
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ cursor:'pointer',
|
|
|
+ },
|
|
|
+ color:'#1E1E1E', //label字体颜色
|
|
|
+ formatter: function (x) {
|
|
|
+ var tmp = x.data.label;
|
|
|
+ if(tmp.length >= 12){
|
|
|
+ tmp = tmp.substring(0,12);
|
|
|
+ tmp = tmp + "...";
|
|
|
+ }
|
|
|
+ return tmp;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: data.node,
|
|
|
+ links: data.links
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ $(window).resize(function(){
|
|
|
+ myChart.resize();
|
|
|
+ })
|
|
|
+ // myChart.on('click',dataClick);
|
|
|
+ myChart.setOption(option);
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// function dataClick(param){
|
|
|
+// var data = param.data;
|
|
|
+// console.log('data',data)
|
|
|
+// const clientHei = $(window).height()
|
|
|
+// const contentHei = clientHei - 80
|
|
|
+// // console.log('data', data,select_type)
|
|
|
+// // var nodes = option.series[0].nodes;
|
|
|
+// if(data.category == 0){
|
|
|
+// return
|
|
|
+// }else{
|
|
|
+// if(data.symbol != "circle"){
|
|
|
+// return
|
|
|
+// }else{
|
|
|
+// if(data.type == select_type){
|
|
|
+// $('#searchInp').val(data.label)
|
|
|
+// updateTree(data.label)
|
|
|
+// getGraph(data.label,select_type);
|
|
|
+
|
|
|
+// }else {
|
|
|
+// let renderTabInfo = getTab(data.type)
|
|
|
+// renderTab(renderTabInfo)
|
|
|
+
|
|
|
+// if(data.type == "疾病"){
|
|
|
+// $(".radioList").show()
|
|
|
+// $('.iconRadio').attr('src','/images/radioUnSelect.png')
|
|
|
+// $('.ICD10 img').attr('src','/images/radioSelect.png')
|
|
|
+// setTabBottomHei(1)
|
|
|
+// }else{
|
|
|
+// $(".radioList").hide()
|
|
|
+// setTabBottomHei(2)
|
|
|
+// }
|
|
|
+// select_type_noSearch = data.type
|
|
|
+// select_type = data.type
|
|
|
+// setSelectName(select_type)
|
|
|
+// $('#searchInp').val(data.label)
|
|
|
+// if(data.type == "疾病"){
|
|
|
+// getTree(1,1,data.label);
|
|
|
+// getGraph(data.label,select_type);
|
|
|
+// }else if(data.type == "药品通用名"){
|
|
|
+// getTree(0,2,data.label);
|
|
|
+// getGraph(data.label,select_type);
|
|
|
+// }else if(data.type == "症状"){
|
|
|
+
|
|
|
+// getTree(0,3,data.label);
|
|
|
+// getGraph(data.label,select_type);
|
|
|
+// }else if(data.type == "手术和操作"){
|
|
|
+// getTree(0,4,data.label);
|
|
|
+// getGraph(data.label,select_type);
|
|
|
+// }else if(data.type == "实验室检查"){
|
|
|
+// getTree(0,5,data.label);
|
|
|
+// getGraph(data.label,select_type);
|
|
|
+// }else if(data.type == "辅助检查"){
|
|
|
+// getTree(0,6,data.label);
|
|
|
+// getGraph(data.label,select_type);
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
zhangxc