|
|
@@ -18,10 +18,6 @@ function getGraph(val, type) {
|
|
|
if (res.data.code == 0) {
|
|
|
// select_type = select_type_noSearch
|
|
|
$('#searchInp').val(val)
|
|
|
- // 销毁之前关系图
|
|
|
- if (window.graphMap) {
|
|
|
- window.graphMap.dispose();
|
|
|
- }
|
|
|
drawGraph(res.data.data, null)
|
|
|
window.graphTxt = val
|
|
|
window.refreshTree = true
|
|
|
@@ -55,26 +51,47 @@ function reDrawGraph(name, label) {
|
|
|
}).then(res => {
|
|
|
if (res.data.code == 0) {
|
|
|
Object.assign(window.graphMapUpdatedData, res.data.data)
|
|
|
- rightMsgRender(window.graphMapUpdatedData.node[0])
|
|
|
+ let expandPropertyNode
|
|
|
+ for (let i = 0; i < window.graphMapUpdatedData.node.legend; i++) {
|
|
|
+ const node = window.graphMapUpdatedData.node[i]
|
|
|
+ if (node.nodeId === window.knowledgeMapSetting.currentNodeId) {
|
|
|
+ rightMsgRender(node)
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
window.graphMap.setOption({
|
|
|
series: [{
|
|
|
+ categories: window.graphMapUpdatedData.categories,
|
|
|
type: 'graph',
|
|
|
data: window.graphMapUpdatedData.node, // 更新节点数据
|
|
|
links: window.graphMapUpdatedData.links, // 更新边数据
|
|
|
}]
|
|
|
}, false); // 仅更新指定的部分，不重绘图表
|
|
|
+
|
|
|
+ // expandProperty({},false) //展开原来已经展开的属性
|
|
|
}
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
function drawGraph(data, resultShowId) {
|
|
|
+ // 销毁之前关系图，并恢复基础配置
|
|
|
+ if (window.graphMap) {
|
|
|
+ window.graphMap.dispose();
|
|
|
+ window.graphMap = null
|
|
|
+ window.knowledgeMapSetting.expandRelationshipsId = []
|
|
|
+ window.knowledgeMapSetting.expandPropertyId = []
|
|
|
+ window.knowledgeMapSetting.currentNodeId = -1
|
|
|
+ }
|
|
|
// var colors = [
|
|
|
// '#FB95AF','#788083','#B2CCCF','#68BDF6','#FFD86E','#6DCE9F','#9BB2F0','#DBB7AC'
|
|
|
// ]
|
|
|
- // var myChart = echarts.init(document.getElementById('main'));
|
|
|
+
|
|
|
var chartDom = document.getElementById('main');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
+ var myChart = echarts.init(chartDom, null, {
|
|
|
+ // devicePixelRatio: 2.5, // 设置设备像素比，适应高分辨率显示
|
|
|
+ renderer: 'svg'
|
|
|
+ });
|
|
|
var categories = data['categories'];
|
|
|
window.mapData = JSON.parse(JSON.stringify(data))
|
|
|
var legends = categories.slice(2, categories.length);
|
|
|
@@ -84,14 +101,20 @@ function drawGraph(data, resultShowId) {
|
|
|
// element.itemStyle = {}
|
|
|
// });
|
|
|
for (let i = 0; i < legends.length; i++) {
|
|
|
-
|
|
|
sum += 2 + legends[i].name.length + 1
|
|
|
if (sum <= 60) {
|
|
|
showLegendNum++
|
|
|
}
|
|
|
}
|
|
|
+ let selected = {} //存储选择的种类
|
|
|
+ for (let i = 0; i < data.categories.length; i++) {
|
|
|
+ selected[data.categories[i].name] = true
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log("selected", selected)
|
|
|
var option = {
|
|
|
title: {
|
|
|
+ show: false,
|
|
|
text: '医学知识图谱',
|
|
|
top: '10',
|
|
|
left: '10',
|
|
|
@@ -127,11 +150,15 @@ function drawGraph(data, resultShowId) {
|
|
|
// borderWidth: 1,
|
|
|
// borderStyle: 'dotted', // 设置边框样式为虚线
|
|
|
padding: [20, 2000, 20, 20],
|
|
|
- backgroundColor: "#ccc",
|
|
|
+ backgroundColor: "#ffffff",
|
|
|
margin: [0, 0, 0, 0],
|
|
|
- selected: {},
|
|
|
+ selected: selected,
|
|
|
textStyle: {
|
|
|
- color: '#000',
|
|
|
+ // fontFamily: 'Tahoma', // 设置字体
|
|
|
+ fontSize: 18,
|
|
|
+ // fontWeight: 'regular',
|
|
|
+ color: '#333333',
|
|
|
+ fontWeight: 'normal', // 正常字重
|
|
|
},
|
|
|
// orient: 'vertical',
|
|
|
data: legends.slice(0, showLegendNum).map(function (a) {
|
|
|
@@ -163,10 +190,10 @@ function drawGraph(data, resultShowId) {
|
|
|
}
|
|
|
},
|
|
|
force: {
|
|
|
- repulsion: 500,
|
|
|
+ repulsion: 1000,
|
|
|
gravity: 0.8,
|
|
|
friction: 0.2, //动画速度
|
|
|
- edgeLength: [4, 7],
|
|
|
+ edgeLength: [4, 15],
|
|
|
layoutAnimation: true
|
|
|
},
|
|
|
draggable: window.knowledgeMapSetting.draggable,
|
|
|
@@ -187,7 +214,7 @@ function drawGraph(data, resultShowId) {
|
|
|
normal: {
|
|
|
width: 2,
|
|
|
cursor: 'default',
|
|
|
- color: 'target'
|
|
|
+ color: 'target',
|
|
|
}
|
|
|
},
|
|
|
edgeLabel: {
|
|
|
@@ -195,14 +222,22 @@ function drawGraph(data, resultShowId) {
|
|
|
show: true,
|
|
|
formatter: function (x) {
|
|
|
return x.data.value; //横线关系
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ // cursor: 'pointer',
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 'normal', // 正常字重
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
},
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
cursor: 'pointer',
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 'normal', // 正常字重
|
|
|
},
|
|
|
color: '#000', //label字体颜色
|
|
|
formatter: function (x) {
|
|
|
@@ -226,16 +261,17 @@ function drawGraph(data, resultShowId) {
|
|
|
myChart.resize();
|
|
|
})
|
|
|
myChart.on('click', dataClick);
|
|
|
- let selected = {}
|
|
|
+
|
|
|
myChart.on('legendselectchanged', function (obj) {
|
|
|
// console.log("legendselectchanged", obj)
|
|
|
selected = obj.selected
|
|
|
+ Object.assign(selected, obj.selected)
|
|
|
const name = obj.name
|
|
|
let targetIndex = -1
|
|
|
let sourceIndex = -1
|
|
|
let linkIndex = -1
|
|
|
for (let index = 0; index < window.graphMapUpdatedData.links.length; index++) {
|
|
|
- if (window.graphMapUpdatedData.links[index].value === name || window.graphMapUpdatedData.links[index].valueBackup === name) {
|
|
|
+ if (window.graphMapUpdatedData.links[index].value === name) {
|
|
|
targetIndex = window.graphMapUpdatedData.links[index].target
|
|
|
sourceIndex = window.graphMapUpdatedData.links[index].source
|
|
|
linkIndex = index
|
|
|
@@ -243,18 +279,29 @@ function drawGraph(data, resultShowId) {
|
|
|
}
|
|
|
}
|
|
|
if (obj.selected[name]) {
|
|
|
- // console.log("links[linkIndex]", window.graphMapUpdatedData.links[linkIndex])
|
|
|
window.graphMapUpdatedData.links[linkIndex].lineStyle = { opacity: 1 }
|
|
|
window.graphMapUpdatedData.node[targetIndex].itemStyle = { opacity: 1 }
|
|
|
- window.graphMapUpdatedData.links[linkIndex].value = window.graphMapUpdatedData.links[linkIndex].valueBackup
|
|
|
+ window.graphMapUpdatedData.links[linkIndex].hideLabel = false
|
|
|
} else {
|
|
|
window.graphMapUpdatedData.links[linkIndex].lineStyle = { opacity: 0 }
|
|
|
- window.graphMapUpdatedData.links[linkIndex].valueBackup = window.graphMapUpdatedData.links[linkIndex].value
|
|
|
- window.graphMapUpdatedData.links[linkIndex].value = ""
|
|
|
+ window.graphMapUpdatedData.links[linkIndex].hideLabel = true
|
|
|
window.graphMapUpdatedData.node[targetIndex].itemStyle = { opacity: 0 }
|
|
|
}
|
|
|
+ // console.log("links", window.graphMapUpdatedData.links[linkIndex])
|
|
|
window.graphMap.setOption({
|
|
|
series: [{
|
|
|
+ edgeLabel: {
|
|
|
+ show: true,
|
|
|
+ // selected: selected,
|
|
|
+ formatter: function (x) {
|
|
|
+ if (x.data.hideLabel) {
|
|
|
+ return " ";
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ return x.data.value; //横线关系
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
type: 'graph',
|
|
|
data: window.graphMapUpdatedData.node, // 更新节点数据
|
|
|
links: window.graphMapUpdatedData.links, // 更新边数据
|
|
|
@@ -262,7 +309,6 @@ function drawGraph(data, resultShowId) {
|
|
|
}, false); // 仅更新指定的部分，不重绘图表
|
|
|
})
|
|
|
|
|
|
-
|
|
|
myChart.setOption(option, true);
|
|
|
if (legends.length > showLegendNum) {
|
|
|
$('.legendSlideUp').toggleClass('legendSlideUp')
|
|
|
@@ -283,10 +329,20 @@ function drawGraph(data, resultShowId) {
|
|
|
option.legend[0].data = legends.slice(0, showLegendNum)
|
|
|
option.legend[0].selected = selected
|
|
|
}
|
|
|
+ option.series[0].edgeLabel = {
|
|
|
+ formatter: function (x) {
|
|
|
+ if (x.data.hideLabel) {
|
|
|
+ return " ";
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ return x.data.value; //横线关系
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
myChart.setOption(option, false);
|
|
|
})
|
|
|
//
|
|
|
- if (window.knowledgeMapSetting.operation == "edit") {
|
|
|
+ if (window.knowledgeMapSetting.operation === "edit") {
|
|
|
chartDom.addEventListener('contextmenu', function (event) {
|
|
|
event.preventDefault(); // 阻止默认右键菜单出现
|
|
|
// console.log("contextmenu-1", event);
|
|
|
@@ -353,10 +409,112 @@ function drawGraph(data, resultShowId) {
|
|
|
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
+ if (window.knowledgeMapSetting.operation === "view") {
|
|
|
+ chartDom.addEventListener('contextmenu', function (event) {
|
|
|
+ event.preventDefault(); // 阻止默认右键菜单出现
|
|
|
+ $(".contextmenu").hide()
|
|
|
+ });
|
|
|
+ //知识图谱查询查询界面的菜单点击
|
|
|
+ $(".contextmenu .contextmenu-item").on("click", function (event) {
|
|
|
+ const dataId = $(this).attr("data-id")
|
|
|
+ // console.log("contextmenu-view-click", event, "dataId", dataId)
|
|
|
+ switch (dataId) {
|
|
|
+ case "closeAll":
|
|
|
+ for (let key in selected) {
|
|
|
+ if (key !== "中心词" && key !== "关系") {
|
|
|
+ selected[key] = false
|
|
|
+ let targetIndex = -1
|
|
|
+ let sourceIndex = -1
|
|
|
+ let linkIndex = -1
|
|
|
+ for (let index = 0; index < window.graphMapUpdatedData.links.length; index++) {
|
|
|
+ if (window.graphMapUpdatedData.links[index].value === key) {
|
|
|
+ targetIndex = window.graphMapUpdatedData.links[index].target
|
|
|
+ sourceIndex = window.graphMapUpdatedData.links[index].source
|
|
|
+ linkIndex = index
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log("key", key)
|
|
|
+ if (selected[key]) {
|
|
|
+ window.graphMapUpdatedData.links[linkIndex].lineStyle = { opacity: 1 }
|
|
|
+ window.graphMapUpdatedData.node[targetIndex].itemStyle = { opacity: 1 }
|
|
|
+ window.graphMapUpdatedData.links[linkIndex].hideLabel = false
|
|
|
+ } else {
|
|
|
+ window.graphMapUpdatedData.links[linkIndex].lineStyle = { opacity: 0 }
|
|
|
+ window.graphMapUpdatedData.links[linkIndex].hideLabel = true
|
|
|
+ window.graphMapUpdatedData.node[targetIndex].itemStyle = { opacity: 0 }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ break
|
|
|
+ case "expandAll":
|
|
|
+ for (let key in selected) {
|
|
|
+ if (key !== "中心词" && key !== "关系") {
|
|
|
+ selected[key] = true
|
|
|
+ let targetIndex = -1
|
|
|
+ let sourceIndex = -1
|
|
|
+ let linkIndex = -1
|
|
|
+ for (let index = 0; index < window.graphMapUpdatedData.links.length; index++) {
|
|
|
+ if (window.graphMapUpdatedData.links[index].value === key) {
|
|
|
+ targetIndex = window.graphMapUpdatedData.links[index].target
|
|
|
+ sourceIndex = window.graphMapUpdatedData.links[index].source
|
|
|
+ linkIndex = index
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (selected[key]) {
|
|
|
+ window.graphMapUpdatedData.links[linkIndex].lineStyle = { opacity: 1 }
|
|
|
+ window.graphMapUpdatedData.node[targetIndex].itemStyle = { opacity: 1 }
|
|
|
+ window.graphMapUpdatedData.links[linkIndex].hideLabel = false
|
|
|
+ } else {
|
|
|
+ window.graphMapUpdatedData.links[linkIndex].lineStyle = { opacity: 0 }
|
|
|
+ window.graphMapUpdatedData.links[linkIndex].hideLabel = true
|
|
|
+ window.graphMapUpdatedData.node[targetIndex].itemStyle = { opacity: 0 }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ }
|
|
|
+ window.graphMap.setOption({
|
|
|
+ legend: [{ selected: selected, }],
|
|
|
+ series: [{
|
|
|
+ edgeLabel: {
|
|
|
+ show: true,
|
|
|
+ formatter: function (x) {
|
|
|
+ if (x.data.hideLabel) {
|
|
|
+ return " ";
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ return x.data.value; //横线关系
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ type: 'graph',
|
|
|
+ data: window.graphMapUpdatedData.node, // 更新节点数据
|
|
|
+ links: window.graphMapUpdatedData.links, // 更新边数据
|
|
|
+ }]
|
|
|
+ }, false); //
|
|
|
+ })
|
|
|
+ //知识图谱查询 的右键菜单事件
|
|
|
+ myChart.on('contextmenu', function (event) {
|
|
|
+ event.event.stop() //停止原有的默认行为
|
|
|
+ // console.log("contextmenu-view:", event);
|
|
|
+ // 只允许中心节点可以展开右键
|
|
|
+ if (event.dataType === "node" && event.data.category === 0) {
|
|
|
+ $(".contextmenu").show().css({
|
|
|
+ "left": event.event.event.pageX + 'px',
|
|
|
+ 'top': event.event.event.pageY + 'px'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ $(".contextmenu").hide()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
window.graphMap = myChart
|
|
|
window.graphMapUpdatedData = data
|
|
|
rightMsgRender(data.node[0])
|
|
|
+ window.knowledgeMapSetting.currentNodeId = data.node[0].nodeId
|
|
|
}
|
|
|
|
|
|
const rightMsgRender = function (data) {
|
|
|
@@ -386,25 +544,48 @@ const rightMsgRender = function (data) {
|
|
|
$(".property .box-content").html(property_str)
|
|
|
const mainId = data.nodeId
|
|
|
// const mainIndex = data.name
|
|
|
+ let entityNodes = []
|
|
|
let entity_node_str = ""
|
|
|
- console.log("getOption", window.graphMap.getOption())
|
|
|
+ // console.log("getOption", window.graphMap.getOption())
|
|
|
+ // 查找符合的节点
|
|
|
window.graphMapUpdatedData.node.forEach(node => {
|
|
|
if (node.nodeId === mainId && node.symbol === "diamond") {
|
|
|
window.graphMapUpdatedData.links.forEach(link => {
|
|
|
if (link.source === node.name) {
|
|
|
const entityNode = window.graphMapUpdatedData.node[link.target]
|
|
|
if (entityNode.symbol !== "diamond") {
|
|
|
- entity_node_str += `
|
|
|
- <div class="text" nodeIndex="${entityNode.name}" nodeId="${entityNode.nodeId}" label="${entityNode.type}">
|
|
|
- <p class='select-sign'><span class='icon-rect-select'></span> </p>
|
|
|
- <p class="text-key">${entityNode.type}：</p>
|
|
|
- <p class="text-value">${entityNode.properties.name}</p>
|
|
|
- </div>`
|
|
|
+ let isEntityNode = false
|
|
|
+ for (let i = 0; i < entityNodes.length; i++) {
|
|
|
+ if (entityNode.type === entityNodes[i].type &&
|
|
|
+ entityNode.nodeId === entityNodes[i].nodeId
|
|
|
+ ) {
|
|
|
+ isEntityNode = true
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!isEntityNode) entityNodes.push(entityNode);
|
|
|
+
|
|
|
+ // entity_node_str += `
|
|
|
+ // <div class="text" nodeIndex="${entityNode.name}" nodeId="${entityNode.nodeId}" label="${entityNode.type}">
|
|
|
+ // <p class='select-sign'><span class='icon-rect-select'></span> </p>
|
|
|
+ // <p class="text-key">${entityNode.type}：</p>
|
|
|
+ // <p class="text-value">${entityNode.properties.name}</p>
|
|
|
+ // </div>`
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
+ // 渲染实体节点
|
|
|
+ for (let i = 0; i < entityNodes.length; i++) {
|
|
|
+ const entityNode = entityNodes[i]
|
|
|
+ entity_node_str += `
|
|
|
+ <div class="text" nodeIndex="${entityNode.name}" nodeId="${entityNode.nodeId}" label="${entityNode.type}">
|
|
|
+ <p class='select-sign'><span class='icon-rect-select'></span> </p>
|
|
|
+ <p class="text-key">${entityNode.type}：</p>
|
|
|
+ <p class="text-value">${entityNode.properties.name}</p>
|
|
|
+ </div>`
|
|
|
+ }
|
|
|
$(".content .right .entity-node .box-content").html(entity_node_str)
|
|
|
}
|
|
|
|
|
|
@@ -482,7 +663,10 @@ function dataClick(param) {
|
|
|
if (param.dataType != 'node') return;
|
|
|
var data = param.data;
|
|
|
rightMsgRender(data)
|
|
|
- if (data.itemStyle.color) return;
|
|
|
+ window.knowledgeMapSetting.currentNodeId = param.data.nodeId
|
|
|
+ let labelList = ["疾病", "药品", "症状", "手术和操作", "实验室检查", "辅助检查"]
|
|
|
+ // if(labelList.indexOf(param.type)===-1) return;
|
|
|
+ if (data.itemStyle.color || labelList.indexOf(param.data.type) === -1 || !data.itemStyle.display) return;
|
|
|
const clientHei = $(window).height()
|
|
|
const contentHei = clientHei - 80
|
|
|
// console.log('data', data,select_type)
|
|
|
@@ -493,10 +677,9 @@ function dataClick(param) {
|
|
|
if (data.symbol != "circle") {
|
|
|
return
|
|
|
} else {
|
|
|
-
|
|
|
if (data.type == select_type) {
|
|
|
$('#searchInp').val(data.label)
|
|
|
- if (window.knowledgeMapSetting.operation !== "edit") {
|
|
|
+ if (window.knowledgeMapSetting.zTree) {
|
|
|
updateTree(data.label)
|
|
|
}
|
|
|
|
|
|
@@ -522,7 +705,7 @@ function dataClick(param) {
|
|
|
if (data.type == "疾病") {
|
|
|
getTree(1, 1, data.label);
|
|
|
getGraph(data.label, select_type);
|
|
|
- } else if (data.type == "药品通用名") {
|
|
|
+ } else if (data.type == "药品") {
|
|
|
getTree(0, 2, data.label);
|
|
|
getGraph(data.label, select_type);
|
|
|
} else if (data.type == "症状") {
|
|
|
@@ -548,6 +731,7 @@ function dataClick(param) {
|
|
|
|
|
|
|
|
|
function getTree(subType, type, showNodeName) {
|
|
|
+ if (!window.knowledgeMapSetting.zTree) return; //没有树跳过
|
|
|
post(api.getTree,
|
|
|
{
|
|
|
"subType": subType, //科室subType: 2, 疾病type:1
|
|
|
@@ -557,10 +741,12 @@ function getTree(subType, type, showNodeName) {
|
|
|
if (res.data.code == 0) {
|
|
|
const data = res.data.data
|
|
|
drawTree(data, showNodeName)
|
|
|
+
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
function drawTree(data, showNodeName) {
|
|
|
+ if (!window.knowledgeMapSetting.zTree) return;
|
|
|
/**
|
|
|
属性说明 id 当前节点的唯一ID
|
|
|
pId [必须大写] 代表当前节点的父节点id
|
|
|
@@ -633,12 +819,44 @@ function drawTree(data, showNodeName) {
|
|
|
var zNodes = data.nodes;
|
|
|
// var zNodes = zTreeData.nodes;
|
|
|
$.fn.zTree.init($("#tree"), setting, zNodes);
|
|
|
+ // console.log("zNodes", zNodes)
|
|
|
if (showNodeName) {
|
|
|
// updateTree(showNodeName)
|
|
|
+ selectedZTreeNode(showNodeName)
|
|
|
+ }
|
|
|
+ // selectedZTreeNode("艾滋病")
|
|
|
+}
|
|
|
+
|
|
|
+function selectedZTreeNode(nodeName) {
|
|
|
+ const zTreeObj = $.fn.zTree.getZTreeObj("tree")
|
|
|
+ // console.log("zTreeObj", zTreeObj)
|
|
|
+ const targetNode = zTreeObj.getNodeByParam("name", nodeName); // 获取 id 为 2 的节点
|
|
|
+ // console.log("targetNode", targetNode)
|
|
|
+ if (targetNode) {
|
|
|
+ // 展开指定父节点
|
|
|
+ zTreeObj.expandNode(targetNode.getParentNode(), true, false, false);;
|
|
|
+
|
|
|
+ zTreeObj.selectNode(targetNode);
|
|
|
+ const selectPId = $('.curSelectedNode').attr('id')
|
|
|
+ if (selectPId) {
|
|
|
+ const selectId = selectPId.substring(0, selectPId.length - 1) + 'ico'
|
|
|
+ $('#' + selectId).append('<img class="iconSelect" src="./images/iconSelect.png">')
|
|
|
+ }
|
|
|
+ // 可选: 滚动到指定节点
|
|
|
+
|
|
|
+ // zTreeObj.scrollToNode(targetNode);
|
|
|
+ // $.fn.zTree.getZTreeObj("tree").expandAll(true);
|
|
|
+ const parent = document.querySelector(`#tree`)
|
|
|
+ const child = document.querySelector(`.curSelectedNode`)
|
|
|
+ parent.scrollTo({
|
|
|
+ top: child.offsetTop,//需要父元素设置postion(relative、absolute、fixed)
|
|
|
+ behavior: "smooth"
|
|
|
+ })
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+
|
|
|
function getNode(val, type) {
|
|
|
post(api.getNode,
|
|
|
{
|
|
|
@@ -676,7 +894,7 @@ function getNode(val, type) {
|
|
|
if (select_type == '疾病') {
|
|
|
// $('#searchInp').val("高血压3级")
|
|
|
getTree(1, 1, txt);
|
|
|
- } else if (select_type == '药品通用名') {
|
|
|
+ } else if (select_type == '药品') {
|
|
|
getTree(0, 2, txt);
|
|
|
} else if (select_type == '症状') {
|
|
|
getTree(0, 3, txt);
|
|
|
@@ -766,7 +984,7 @@ function getKeyEvent(evt) {
|
|
|
}
|
|
|
|
|
|
function getTab(tabName) {
|
|
|
- let tabList = ["疾病", "药品通用名", "症状", "手术和操作", "实验室检查", "辅助检查"]
|
|
|
+ let tabList = ["疾病", "药品", "症状", "手术和操作", "实验室检查", "辅助检查"]
|
|
|
let tabListCopy = tabList.slice()
|
|
|
const index = tabList.findIndex(item => item == tabName)
|
|
|
|
|
|
@@ -795,9 +1013,9 @@ function renderTab(data) {
|
|
|
let showtabStr = ``
|
|
|
let hidetabStr = ``
|
|
|
for (let i = 0; i < showList.length; i++) {
|
|
|
- showtabStr += ` <span class="tab ${i === activeIndex ? 'activeTab' : ''}" data-id="${showList[i]}">${showList[i] == "药品通用名" ? "药品" : showList[i]}</span>`
|
|
|
+ showtabStr += ` <span class="tab ${i === activeIndex ? 'activeTab' : ''}" data-id="${showList[i]}">${showList[i] == "药品" ? "药品" : showList[i]}</span>`
|
|
|
if (i === activeIndex) {
|
|
|
- if (showList[i] == "药品通用名") {
|
|
|
+ if (showList[i] == "药品") {
|
|
|
$("#searchInp").attr("placeholder", `请输入药品名称`)
|
|
|
} else {
|
|
|
$("#searchInp").attr("placeholder", `请输入${showList[i]}名称`)
|
|
|
@@ -808,10 +1026,11 @@ function renderTab(data) {
|
|
|
for (let i = 0; i < hideList.length; i++) {
|
|
|
hidetabStr += `<span class="tab " data-id="${hideList[i]}">${hideList[i]}</span>`
|
|
|
}
|
|
|
- hidetabStr += `<div class="toggleTab">
|
|
|
- <span class="toggleTabTxt">收起</span>
|
|
|
- <span class="toggleArrow dropdown-up" style="bottom:0px;" alt=""/>
|
|
|
- </div>`
|
|
|
+ // hidetabStr += `<div class="toggleTab">
|
|
|
+ // <span class="toggleTabTxt">收起</span>
|
|
|
+ // <span class="toggleArrow dropdown-up" style="bottom:0px;" alt=""/>
|
|
|
+ // </div>`
|
|
|
+
|
|
|
// console.log('showtabStr',showtabStr)
|
|
|
|
|
|
$('.showTabList').html(showtabStr)
|
|
|
@@ -824,12 +1043,21 @@ function ToggleTab() {
|
|
|
$(".toggleTab").off("click").click(function (e) {
|
|
|
e.stopPropagation()
|
|
|
hideSlide("hideTabList")
|
|
|
+ let toggleTabTxt = $(".toggleTab .toggleTabTxt").text().trim()
|
|
|
+ if (toggleTabTxt === '展开') {
|
|
|
+ $(".toggleTab .toggleTabTxt").text("收起")
|
|
|
+ $(".toggleTab .toggleArrow").css({ "transform": "rotate(0deg)" })
|
|
|
+ } else {
|
|
|
+ $(".toggleTab .toggleTabTxt").text("展开")
|
|
|
+ $(".toggleTab .toggleArrow").css({ "transform": "rotate(180deg)" })
|
|
|
+ }
|
|
|
const hideTabDis = $(".hideTabList").css("display")
|
|
|
if (hideTabDis == "none") {
|
|
|
showHideTab()
|
|
|
} else {
|
|
|
hideHideTab()
|
|
|
}
|
|
|
+
|
|
|
})
|
|
|
|
|
|
|
|
|
@@ -837,7 +1065,7 @@ function ToggleTab() {
|
|
|
function showHideTab() {
|
|
|
$(".hideTabList").show()
|
|
|
$(".tabList").addClass("tabListShow")
|
|
|
- $(".toggleTab").css("display", "none")
|
|
|
+ // $(".toggleTab").css("display", "none")
|
|
|
$(".hideTabList .toggleTab").css("display", "inline-block")
|
|
|
// $(".toggleTabTxt").html("收起")
|
|
|
// $(".toggleArrow").attr("src",iconUp)
|
|
|
@@ -855,10 +1083,11 @@ bindTabClick()
|
|
|
//切换tab
|
|
|
function bindTabClick() {
|
|
|
$('.tabList .tab').click(function () {
|
|
|
+ $(".tabList .tab").removeClass("activeTab")
|
|
|
const id = $(this).attr('data-id')
|
|
|
$(this).addClass("activeTab").siblings().removeClass('activeTab')
|
|
|
let renderInfo = getTab(id)
|
|
|
- renderTab(renderInfo)
|
|
|
+ // renderTab(renderInfo)
|
|
|
if (id != select_type) {
|
|
|
if (id != "疾病") {
|
|
|
$(".radioList").hide()
|
|
|
@@ -873,16 +1102,16 @@ function bindTabClick() {
|
|
|
|
|
|
if (id == "疾病") {
|
|
|
|
|
|
- $('#searchInp').val(disease || "急性胰腺炎")
|
|
|
+ $('#searchInp').val(disease || "艾滋病")
|
|
|
$('.iconRadio').attr('src', '/images/radioUnSelect.png')
|
|
|
$('.ICD10 img').attr('src', '/images/radioSelect.png')
|
|
|
- getTree(1, 1, disease || "急性胰腺炎");
|
|
|
- getGraph(disease || "急性胰腺炎", select_type);
|
|
|
+ getTree(1, 1, disease || "艾滋病");
|
|
|
+ getGraph(disease || "艾滋病", select_type);
|
|
|
|
|
|
- } else if (id == "药品通用名") {
|
|
|
- $('#searchInp').val("地高辛(XC01AAD072A001010100372)")
|
|
|
- getTree(0, 2, "地高辛(XC01AAD072A001010100372)");
|
|
|
- getGraph("地高辛(XC01AAD072A001010100372)", select_type);
|
|
|
+ } else if (id == "药品") {
|
|
|
+ $('#searchInp').val("硝苯地平缓释片(Ⅱ)")
|
|
|
+ getTree(0, 2, "硝苯地平缓释片(Ⅱ)");
|
|
|
+ getGraph("硝苯地平缓释片(Ⅱ)", select_type);
|
|
|
} else if (id == "症状") {
|
|
|
$('#searchInp').val("背痛")
|
|
|
getTree(0, 3, "背痛");
|
|
|
@@ -900,11 +1129,9 @@ function bindTabClick() {
|
|
|
getTree(0, 6, "肝彩超");
|
|
|
getGraph("肝彩超", select_type);
|
|
|
}
|
|
|
-
|
|
|
// getTree(1,1,""); //切换tab重新画菜单树
|
|
|
}
|
|
|
-
|
|
|
- hideHideTab()
|
|
|
+ // hideHideTab()
|
|
|
})
|
|
|
}
|
|
|
|
|
|
@@ -928,7 +1155,7 @@ function setTabBottomHei(type) {
|
|
|
}
|
|
|
|
|
|
function setSelectName(name) {
|
|
|
- if (name == "药品通用名") {
|
|
|
+ if (name == "药品") {
|
|
|
$('.selectedName').html("药品")
|
|
|
$('.selectedName').attr("title", "药品")
|
|
|
$("#searchInp").attr("placeholder", `请输入药品名称`)
|
|
|
@@ -945,7 +1172,9 @@ function setSelectName(name) {
|
|
|
}
|
|
|
}
|
|
|
function hideSlide(expectClass) {
|
|
|
- let hideSlideList = ['selectList', 'tabNameList', 'tabNameListNoSearch', 'hideTabList', 'contextmenu', 'contextmenu-edge', 'contextmenu-node']
|
|
|
+ let hideSlideList = ['selectList', 'tabNameList', 'tabNameListNoSearch',
|
|
|
+ // 'hideTabList',
|
|
|
+ 'contextmenu', 'contextmenu-edge', 'contextmenu-node']
|
|
|
let index = hideSlideList.findIndex(item => item == expectClass)
|
|
|
for (let i = 0; i < hideSlideList.length; i++) {
|
|
|
if (i != index) {
|
|
|
@@ -961,6 +1190,69 @@ function hideSlide(expectClass) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+function expandProperty(data, flag) {
|
|
|
+ // console.log("expandProperty", data)
|
|
|
+ if (flag) { //把节点添加到配置中
|
|
|
+ window.knowledgeMapSetting.expandPropertyId.push(data.nodeId)
|
|
|
+ }
|
|
|
+ // window.graphMapUpdatedData
|
|
|
+ // 生成一个虚拟节点
|
|
|
+ let sourceIndex = -1
|
|
|
+ //检验是否要展开属性
|
|
|
+ let checkHasProperties = Object.keys(data.properties).filter(key => key !== "name" || key !== "is_deleted").length > 0
|
|
|
+
|
|
|
+ if (checkHasProperties) {
|
|
|
+ const newNode = {
|
|
|
+ category: data.category,
|
|
|
+ label: "",
|
|
|
+ name: window.graphMapUpdatedData.node.length,
|
|
|
+ nodeId: data.nodeId,
|
|
|
+ properties: data.properties,
|
|
|
+ symbol: "diamond",
|
|
|
+ symbolSize: 10,
|
|
|
+ type: data.type,
|
|
|
+ itemStyle: data.itemStyle
|
|
|
+ }
|
|
|
+ window.graphMapUpdatedData.node.push(newNode)
|
|
|
+ const newLink = {
|
|
|
+ value: "属性",
|
|
|
+ source: data.name,
|
|
|
+ target: newNode.name,
|
|
|
+ }
|
|
|
+ window.graphMapUpdatedData.links.push(newLink)
|
|
|
+ sourceIndex = newNode.name
|
|
|
+ } else return
|
|
|
+ // 属性节点
|
|
|
+ for (let i in data.properties) {
|
|
|
+ if (i == 'name' || i == 'is_deleted') continue
|
|
|
+ const newNode = {
|
|
|
+ category: data.category,
|
|
|
+ label: i + ":" + data.properties[i],
|
|
|
+ name: window.graphMapUpdatedData.node.length,
|
|
|
+ nodeId: data.nodeId,
|
|
|
+ properties: { name: i, value: data.properties[i], parentName: data.properties.name },
|
|
|
+ symbol: "diamond",
|
|
|
+ symbolSize: 28,
|
|
|
+ type: data.type,
|
|
|
+ itemStyle: data.itemStyle
|
|
|
+ }
|
|
|
+ window.graphMapUpdatedData.node.push(newNode)
|
|
|
+ const newLink = {
|
|
|
+ value: "",
|
|
|
+ source: sourceIndex,
|
|
|
+ target: newNode.name,
|
|
|
+ }
|
|
|
+ window.graphMapUpdatedData.links.push(newLink)
|
|
|
+ }
|
|
|
+
|
|
|
+ window.graphMap.setOption({
|
|
|
+ series: [{
|
|
|
+ type: 'graph',
|
|
|
+ data: window.graphMapUpdatedData.node, // 更新节点数据
|
|
|
+ links: window.graphMapUpdatedData.links, // 更新边数据
|
|
|
+ }]
|
|
|
+ }, false); // 仅更新指定的部分，不重绘图表
|
|
|
+}
|
|
|
|
|
|
module.exports = {
|
|
|
drawGraph,
|
|
|
@@ -974,5 +1266,7 @@ module.exports = {
|
|
|
setSelectName,
|
|
|
hideHideTab,
|
|
|
hideSlide,
|
|
|
- reDrawGraph
|
|
|
+ reDrawGraph,
|
|
|
+ selectedZTreeNode,
|
|
|
+ expandProperty
|
|
|
}
|
