|
|
@@ -10,7 +10,6 @@ let disease = getUrlArgObject("disease")
|
|
|
|
|
|
//关系图
|
|
|
function getGraph(val, type) {
|
|
|
-
|
|
|
return post(api.getGraph, {
|
|
|
"inputStr": val,
|
|
|
"labelName": type
|
|
|
@@ -27,6 +26,7 @@ function getGraph(val, type) {
|
|
|
let renderTabInfo = getTab(type)
|
|
|
renderTab(renderTabInfo)
|
|
|
}
|
|
|
+ addRecord(val, type)
|
|
|
} else {
|
|
|
let nodeStr
|
|
|
nodeStr = '<li class="ellipsis">暂无符合数据</li>'
|
|
|
@@ -38,6 +38,8 @@ function getGraph(val, type) {
|
|
|
}
|
|
|
|
|
|
function reDrawGraph(name, label) {
|
|
|
+ // getGraph(name, label)
|
|
|
+ // return
|
|
|
if (name && label) {
|
|
|
$(".selectedName").html(label)
|
|
|
$("#searchInp").val(name)
|
|
|
@@ -50,29 +52,120 @@ function reDrawGraph(name, label) {
|
|
|
"labelName": label
|
|
|
}).then(res => {
|
|
|
if (res.data.code == 0) {
|
|
|
- Object.assign(window.graphMapUpdatedData, res.data.data)
|
|
|
- let expandPropertyNode
|
|
|
- for (let i = 0; i < window.graphMapUpdatedData.node.legend; i++) {
|
|
|
+ res.data.data.node.forEach(node => {
|
|
|
+ if (!node.itemStyle.display && node.label && node.symbol == 'circle') {
|
|
|
+ node.symbol = 'pin'
|
|
|
+ // node.symbolSize = [node.symbolSize * 1.5, node.symbolSize]
|
|
|
+ }
|
|
|
+ });
|
|
|
+ window.graphMapUpdatedData = res.data.data
|
|
|
+ let expandPropertyNodes = [] //要展开节点的数据
|
|
|
+ let currentNode = null //当前显示信息的节点
|
|
|
+ let legendData = null //新的图例数据
|
|
|
+ for (let i = 0; i < window.graphMapUpdatedData.node.length; i++) {
|
|
|
const node = window.graphMapUpdatedData.node[i]
|
|
|
+ // console.log(window.knowledgeMapSetting.currentNodeId, node.nodeId)
|
|
|
if (node.nodeId === window.knowledgeMapSetting.currentNodeId) {
|
|
|
- rightMsgRender(node)
|
|
|
- break
|
|
|
+ currentNode = node
|
|
|
+ }
|
|
|
+ for (let j = 0; j < window.knowledgeMapSetting.expandPropertyId.length; j++) {
|
|
|
+ const expandNodeId = window.knowledgeMapSetting.expandPropertyId[j]
|
|
|
+ if (expandNodeId === node.nodeId) {
|
|
|
+ expandPropertyNodes.push(node)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ window.knowledgeMapSetting.legends = window.graphMapUpdatedData.categories.slice(2)
|
|
|
+ //重新计算showLegendNum
|
|
|
+ reShowLegendNum()
|
|
|
+ if (window.knowledgeMapSetting.showLegendAll) {
|
|
|
+ legendData = window.knowledgeMapSetting.legends.map(el => el.name)
|
|
|
+ } else {
|
|
|
+ legendData = window.knowledgeMapSetting.legends.slice(0, window.knowledgeMapSetting.showLegendNum).map(el => el.name)
|
|
|
+ }
|
|
|
+
|
|
|
+ expandPropertyNodePad(expandPropertyNodes) //添加展开属性节点
|
|
|
+ reNodeCloseAndExpand(legendData) //添加隐藏节点
|
|
|
window.graphMap.setOption({
|
|
|
+ legend: [{
|
|
|
+ data: legendData
|
|
|
+ }],
|
|
|
series: [{
|
|
|
+ edgeLabel: {
|
|
|
+ formatter: function (x) {
|
|
|
+ if (x.data.hideLabel) {
|
|
|
+ return " ";
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ return x.data.value; //横线关系
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
categories: window.graphMapUpdatedData.categories,
|
|
|
type: 'graph',
|
|
|
data: window.graphMapUpdatedData.node, // 更新节点数据
|
|
|
links: window.graphMapUpdatedData.links, // 更新边数据
|
|
|
}]
|
|
|
}, false); // 仅更新指定的部分，不重绘图表
|
|
|
-
|
|
|
- // expandProperty({},false) //展开原来已经展开的属性
|
|
|
+ rightMsgRender(currentNode) //重新渲染右侧数据
|
|
|
}
|
|
|
})
|
|
|
|
|
|
}
|
|
|
+function reShowLegendNum() {
|
|
|
+ window.knowledgeMapSetting.showLegendNum = 0;
|
|
|
+ let sum = 0
|
|
|
+ for (let i = 0; i < window.knowledgeMapSetting.legends.length; i++) {
|
|
|
+ sum += 2 + window.knowledgeMapSetting.legends[i].name.length + 1
|
|
|
+ if (sum <= 60) {
|
|
|
+ window.knowledgeMapSetting.showLegendNum++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (window.knowledgeMapSetting.legends.length > window.knowledgeMapSetting.showLegendNum) {
|
|
|
+ $('.legendSlideUp').toggleClass('legendSlideUp')
|
|
|
+ $('.legendIcon').css('display', "block")
|
|
|
+ } else {
|
|
|
+ $('.legendSlideUp').toggleClass('legendSlideUp')
|
|
|
+ $('.legendIcon').css('display', "none")
|
|
|
+ }
|
|
|
+ $(".category-num").html(`${window.knowledgeMapSetting.legends.length}`)
|
|
|
+}
|
|
|
+//重新隐藏之前的节点
|
|
|
+function reNodeCloseAndExpand(newLegendData) {
|
|
|
+ //更新legend的 selected的数据
|
|
|
+ let newSelected = {}
|
|
|
+ for (let i = 0; i < newLegendData.length; i++) {
|
|
|
+ newSelected[newLegendData[i]] = true
|
|
|
+ }
|
|
|
+ window.knowledgeMapSetting.selected = Object.assign(newSelected, window.knowledgeMapSetting.selected)
|
|
|
+ let selected = window.knowledgeMapSetting.selected
|
|
|
+ //隐藏(透明化)虚拟节点
|
|
|
+ for (let name in 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) {
|
|
|
+ targetIndex = window.graphMapUpdatedData.links[index].target
|
|
|
+ sourceIndex = window.graphMapUpdatedData.links[index].source
|
|
|
+ linkIndex = index
|
|
|
+ if (selected[name]) {
|
|
|
+ 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 }
|
|
|
+ }
|
|
|
+ targetIndex = -1
|
|
|
+ sourceIndex = -1
|
|
|
+ linkIndex = -1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
function drawGraph(data, resultShowId) {
|
|
|
// 销毁之前关系图，并恢复基础配置
|
|
|
@@ -86,32 +179,40 @@ function drawGraph(data, resultShowId) {
|
|
|
// var colors = [
|
|
|
// '#FB95AF','#788083','#B2CCCF','#68BDF6','#FFD86E','#6DCE9F','#9BB2F0','#DBB7AC'
|
|
|
// ]
|
|
|
+ data.node.forEach(node => {
|
|
|
+ if (!node.itemStyle.display && node.label && node.symbol == 'circle') {
|
|
|
+ node.symbol = 'pin'
|
|
|
+ node.zIndex = -1
|
|
|
+ node.visible = false
|
|
|
+ // node.symbolSize = [node.symbolSize * 1.5, node.symbolSize]
|
|
|
+ }
|
|
|
+ // if (node.category === 0) {
|
|
|
+ // node.fixed = true
|
|
|
+ // }
|
|
|
+ });
|
|
|
|
|
|
var chartDom = document.getElementById('main');
|
|
|
var myChart = echarts.init(chartDom, null, {
|
|
|
- // devicePixelRatio: 2.5, // 设置设备像素比，适应高分辨率显示
|
|
|
+ devicePixelRatio: 2.5, // 设置设备像素比，适应高分辨率显示
|
|
|
renderer: 'svg'
|
|
|
});
|
|
|
var categories = data['categories'];
|
|
|
- window.mapData = JSON.parse(JSON.stringify(data))
|
|
|
- var legends = categories.slice(2, categories.length);
|
|
|
- var showLegendNum = 0;
|
|
|
+ // window.mapData = JSON.parse(JSON.stringify(data))
|
|
|
+ window.knowledgeMapSetting.legends = categories.slice(2, categories.length);
|
|
|
+ window.knowledgeMapSetting.showLegendNum = 0;
|
|
|
let sum = 0
|
|
|
- // data.node.forEach(element => {
|
|
|
- // element.itemStyle = {}
|
|
|
- // });
|
|
|
- for (let i = 0; i < legends.length; i++) {
|
|
|
- sum += 2 + legends[i].name.length + 1
|
|
|
+
|
|
|
+ for (let i = 0; i < window.knowledgeMapSetting.legends.length; i++) {
|
|
|
+ sum += 2 + window.knowledgeMapSetting.legends[i].name.length + 1
|
|
|
if (sum <= 60) {
|
|
|
- showLegendNum++
|
|
|
+ window.knowledgeMapSetting.showLegendNum++
|
|
|
}
|
|
|
}
|
|
|
- let selected = {} //存储选择的种类
|
|
|
- for (let i = 0; i < data.categories.length; i++) {
|
|
|
- selected[data.categories[i].name] = true
|
|
|
+ window.knowledgeMapSetting.selected = {} //存储选择的种类
|
|
|
+ for (let i = 2; i < data.categories.length; i++) {
|
|
|
+ window.knowledgeMapSetting.selected[data.categories[i].name] = true
|
|
|
}
|
|
|
|
|
|
- // console.log("selected", selected)
|
|
|
var option = {
|
|
|
title: {
|
|
|
show: false,
|
|
|
@@ -152,7 +253,7 @@ function drawGraph(data, resultShowId) {
|
|
|
padding: [20, 2000, 20, 20],
|
|
|
backgroundColor: "#ffffff",
|
|
|
margin: [0, 0, 0, 0],
|
|
|
- selected: selected,
|
|
|
+ selected: window.knowledgeMapSetting.selected,
|
|
|
textStyle: {
|
|
|
// fontFamily: 'Tahoma', // 设置字体
|
|
|
fontSize: 18,
|
|
|
@@ -161,7 +262,7 @@ function drawGraph(data, resultShowId) {
|
|
|
fontWeight: 'normal', // 正常字重
|
|
|
},
|
|
|
// orient: 'vertical',
|
|
|
- data: legends.slice(0, showLegendNum).map(function (a) {
|
|
|
+ data: window.knowledgeMapSetting.legends.slice(0, window.knowledgeMapSetting.showLegendNum).map(function (a) {
|
|
|
return a.name;
|
|
|
}),
|
|
|
|
|
|
@@ -170,14 +271,17 @@ function drawGraph(data, resultShowId) {
|
|
|
series: [
|
|
|
{
|
|
|
type: 'graph',
|
|
|
- layout: 'force',
|
|
|
+ layout: 'force', //circular,force
|
|
|
cursor: 'pointer',
|
|
|
categories: categories,
|
|
|
symbolSize: 80,
|
|
|
roam: true, // 'move':仅拖动,'scale':仅放大和缩小,true:放大和缩小.
|
|
|
scaleLimit: { // 限制缩放的范围
|
|
|
- min: 0.5,
|
|
|
- max: 4
|
|
|
+ min: 0.1,
|
|
|
+ max: 10
|
|
|
+ },
|
|
|
+ circular: {
|
|
|
+ rotateLabel: true
|
|
|
},
|
|
|
edgeSymbol: ['circle', 'arrow'],
|
|
|
edgeSymbolSize: [1, 5],
|
|
|
@@ -190,12 +294,16 @@ function drawGraph(data, resultShowId) {
|
|
|
}
|
|
|
},
|
|
|
force: {
|
|
|
- repulsion: 1000,
|
|
|
- gravity: 0.8,
|
|
|
+ initLayout: "circular",
|
|
|
+ repulsion: 500,
|
|
|
+ gravity: 1,
|
|
|
friction: 0.2, //动画速度
|
|
|
- edgeLength: [4, 15],
|
|
|
+ edgeLength: [10, 15],
|
|
|
layoutAnimation: true
|
|
|
},
|
|
|
+ labelLayout: {
|
|
|
+ hideOverlap: true //是否隐藏重叠的标签。
|
|
|
+ },
|
|
|
draggable: window.knowledgeMapSetting.draggable,
|
|
|
animation: true,
|
|
|
hoverAnimation: false,
|
|
|
@@ -256,16 +364,20 @@ function drawGraph(data, resultShowId) {
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
+
|
|
|
+
|
|
|
$(window).on('resize', function () {
|
|
|
// console.log('Window resized 0');
|
|
|
myChart.resize();
|
|
|
})
|
|
|
myChart.on('click', dataClick);
|
|
|
+ myChart.on('dblclick', function () {
|
|
|
+
|
|
|
+ });
|
|
|
|
|
|
myChart.on('legendselectchanged', function (obj) {
|
|
|
// console.log("legendselectchanged", obj)
|
|
|
- selected = obj.selected
|
|
|
- Object.assign(selected, obj.selected)
|
|
|
+ Object.assign(window.knowledgeMapSetting.selected, obj.selected)
|
|
|
const name = obj.name
|
|
|
let targetIndex = -1
|
|
|
let sourceIndex = -1
|
|
|
@@ -275,18 +387,28 @@ function drawGraph(data, resultShowId) {
|
|
|
targetIndex = window.graphMapUpdatedData.links[index].target
|
|
|
sourceIndex = window.graphMapUpdatedData.links[index].source
|
|
|
linkIndex = index
|
|
|
- break
|
|
|
+ if (obj.selected[name]) {
|
|
|
+ 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
|
|
|
+ targetIndex = -1
|
|
|
+ sourceIndex = -1
|
|
|
+ linkIndex = -1
|
|
|
}
|
|
|
}
|
|
|
- if (obj.selected[name]) {
|
|
|
- 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 }
|
|
|
- }
|
|
|
+
|
|
|
+ // const name = obj.name
|
|
|
+
|
|
|
+ // if (linkIndex >= 0) { //判断该关系是否存在连线
|
|
|
+
|
|
|
+ // }
|
|
|
+
|
|
|
// console.log("links", window.graphMapUpdatedData.links[linkIndex])
|
|
|
window.graphMap.setOption({
|
|
|
series: [{
|
|
|
@@ -308,9 +430,9 @@ function drawGraph(data, resultShowId) {
|
|
|
}]
|
|
|
}, false); // 仅更新指定的部分，不重绘图表
|
|
|
})
|
|
|
-
|
|
|
myChart.setOption(option, true);
|
|
|
- if (legends.length > showLegendNum) {
|
|
|
+
|
|
|
+ if (window.knowledgeMapSetting.legends.length > window.knowledgeMapSetting.showLegendNum) {
|
|
|
$('.legendSlideUp').toggleClass('legendSlideUp')
|
|
|
$('.legendIcon').css('display', "block")
|
|
|
} else {
|
|
|
@@ -318,16 +440,20 @@ function drawGraph(data, resultShowId) {
|
|
|
$('.legendIcon').css('display', "none")
|
|
|
}
|
|
|
$('.legendIconImg').off("click").on('click', function (e) {
|
|
|
+ // console.log("legends", window.knowledgeMapSetting.legends)
|
|
|
e.stopPropagation()
|
|
|
+ $(".category-num").html(`${window.knowledgeMapSetting.legends.length}`)
|
|
|
$('.legendIconImg').toggleClass('legendSlideUp')
|
|
|
if (option.legend[0].type == 'scroll') {
|
|
|
option.legend[0].type = 'plain'
|
|
|
- option.legend[0].data = legends
|
|
|
- option.legend[0].selected = selected
|
|
|
+ option.legend[0].data = window.knowledgeMapSetting.legends
|
|
|
+ //option.legend[0].selected = window.knowledgeMapSetting.selected
|
|
|
+ window.knowledgeMapSetting.showLegendAll = true
|
|
|
} else {
|
|
|
option.legend[0].type = 'scroll'
|
|
|
- option.legend[0].data = legends.slice(0, showLegendNum)
|
|
|
- option.legend[0].selected = selected
|
|
|
+ option.legend[0].data = window.knowledgeMapSetting.legends.slice(0, window.knowledgeMapSetting.showLegendNum)
|
|
|
+ //y option.legend[0].selected = window.knowledgeMapSetting.selected
|
|
|
+ window.knowledgeMapSetting.showLegendAll = false
|
|
|
}
|
|
|
option.series[0].edgeLabel = {
|
|
|
formatter: function (x) {
|
|
|
@@ -339,6 +465,8 @@ function drawGraph(data, resultShowId) {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ option.series[0].data = window.graphMapUpdatedData.node// 更新节点数据
|
|
|
+ option.series[0].links = window.graphMapUpdatedData.links // 更新边数据
|
|
|
myChart.setOption(option, false);
|
|
|
})
|
|
|
//
|
|
|
@@ -354,7 +482,7 @@ function drawGraph(data, resultShowId) {
|
|
|
});
|
|
|
// 自定义右键菜单
|
|
|
myChart.on('contextmenu', function (event) {
|
|
|
- //console.log("contextmenu-2:", event);
|
|
|
+ console.log("contextmenu-edit:", event);
|
|
|
// 停止冒泡
|
|
|
event.event.stop()
|
|
|
// 关闭全部自定义的菜单
|
|
|
@@ -394,11 +522,26 @@ function drawGraph(data, resultShowId) {
|
|
|
'top': event.event.event.pageY + 'px'
|
|
|
})
|
|
|
}
|
|
|
- else if (event.data.symbol == 'circle') {
|
|
|
- $(".contextmenu").show().css({
|
|
|
- "left": event.event.event.pageX + 'px',
|
|
|
- 'top': event.event.event.pageY + 'px'
|
|
|
- })
|
|
|
+ else if (event.data.symbol == 'circle' || event.data.symbol == 'pin') {
|
|
|
+ let contextmenuHeight = $(".contextmenu").outerHeight()
|
|
|
+ let windowHeight = document.documentElement.clientHeight
|
|
|
+ if (event.data.category === 0) {
|
|
|
+ $(".contextmenu .center").show()
|
|
|
+ } else {
|
|
|
+ $(".contextmenu .center").hide()
|
|
|
+ }
|
|
|
+ if (contextmenuHeight + event.event.event.pageY > windowHeight) {
|
|
|
+ $(".contextmenu").show().css({
|
|
|
+ "left": event.event.event.pageX + 'px',
|
|
|
+ 'top': event.event.event.pageY - contextmenuHeight + 'px'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ $(".contextmenu").show().css({
|
|
|
+ "left": event.event.event.pageX + 'px',
|
|
|
+ 'top': event.event.event.pageY + 'px'
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
// $(".contextmenu").show().css({
|
|
|
// "left": event.event.event.pageX + 'px',
|
|
|
@@ -409,6 +552,7 @@ function drawGraph(data, resultShowId) {
|
|
|
|
|
|
})
|
|
|
}
|
|
|
+
|
|
|
if (window.knowledgeMapSetting.operation === "view") {
|
|
|
chartDom.addEventListener('contextmenu', function (event) {
|
|
|
event.preventDefault(); // 阻止默认右键菜单出现
|
|
|
@@ -418,6 +562,7 @@ function drawGraph(data, resultShowId) {
|
|
|
$(".contextmenu .contextmenu-item").on("click", function (event) {
|
|
|
const dataId = $(this).attr("data-id")
|
|
|
// console.log("contextmenu-view-click", event, "dataId", dataId)
|
|
|
+ const selected = window.knowledgeMapSetting.selected
|
|
|
switch (dataId) {
|
|
|
case "closeAll":
|
|
|
for (let key in selected) {
|
|
|
@@ -434,7 +579,8 @@ function drawGraph(data, resultShowId) {
|
|
|
break
|
|
|
}
|
|
|
}
|
|
|
- // console.log("key", key)
|
|
|
+ // console.log("key", key, "linkIndex", linkIndex)
|
|
|
+ if (!(linkIndex >= 0)) continue;
|
|
|
if (selected[key]) {
|
|
|
window.graphMapUpdatedData.links[linkIndex].lineStyle = { opacity: 1 }
|
|
|
window.graphMapUpdatedData.node[targetIndex].itemStyle = { opacity: 1 }
|
|
|
@@ -462,6 +608,7 @@ function drawGraph(data, resultShowId) {
|
|
|
break
|
|
|
}
|
|
|
}
|
|
|
+ if (!(linkIndex >= 0)) continue;
|
|
|
if (selected[key]) {
|
|
|
window.graphMapUpdatedData.links[linkIndex].lineStyle = { opacity: 1 }
|
|
|
window.graphMapUpdatedData.node[targetIndex].itemStyle = { opacity: 1 }
|
|
|
@@ -511,13 +658,30 @@ function drawGraph(data, resultShowId) {
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
+ // myChart.on('datazoom', function () {
|
|
|
+ // let selectedLegend = myChart.getOption().legend[0].selected;
|
|
|
+ // console.log("datazoom'", selectedLegend);
|
|
|
+ // });
|
|
|
+
|
|
|
+ //图渲染结束后,执行代码
|
|
|
+ myChart.on('finished', function () {
|
|
|
+ // var newOption = myChart.getOption();
|
|
|
+
|
|
|
+ // 禁用 force 布局，使得图表不再更新
|
|
|
+ // newOption.series[0].layout = 'none'; // 设置 layout 为 'none' 停止 force 布局
|
|
|
+ // newOption.series[0].force.layoutAnimation = false; // 禁用动画
|
|
|
+ // myChart.setOption(newOption, false); // 更新 option
|
|
|
+ });
|
|
|
+
|
|
|
window.graphMap = myChart
|
|
|
window.graphMapUpdatedData = data
|
|
|
rightMsgRender(data.node[0])
|
|
|
window.knowledgeMapSetting.currentNodeId = data.node[0].nodeId
|
|
|
+ $(".category-num").html(`${window.knowledgeMapSetting.legends.length}`)
|
|
|
}
|
|
|
|
|
|
const rightMsgRender = function (data) {
|
|
|
+ if (!data) return;
|
|
|
const basic_information_str = `
|
|
|
<div class="text">
|
|
|
<p class="text-key">ID：</p>
|
|
|
@@ -542,6 +706,10 @@ const rightMsgRender = function (data) {
|
|
|
}
|
|
|
$(".basic-information .box-content").html(basic_information_str)
|
|
|
$(".property .box-content").html(property_str)
|
|
|
+ rightEntityNode(data)
|
|
|
+}
|
|
|
+// 生成右侧实体节点选项
|
|
|
+function rightEntityNode(data) {
|
|
|
const mainId = data.nodeId
|
|
|
// const mainIndex = data.name
|
|
|
let entityNodes = []
|
|
|
@@ -589,6 +757,7 @@ const rightMsgRender = function (data) {
|
|
|
$(".content .right .entity-node .box-content").html(entity_node_str)
|
|
|
}
|
|
|
|
|
|
+
|
|
|
//计算echarts内部图例占用高度(不考虑富文本的情况) //5ms
|
|
|
const getLegendHeight = function (index, chartDom, myChart) {
|
|
|
var height = 0;
|
|
|
@@ -664,8 +833,10 @@ function dataClick(param) {
|
|
|
var data = param.data;
|
|
|
rightMsgRender(data)
|
|
|
window.knowledgeMapSetting.currentNodeId = param.data.nodeId
|
|
|
- let labelList = ["疾病", "药品", "症状", "手术和操作", "实验室检查", "辅助检查"]
|
|
|
- // if(labelList.indexOf(param.type)===-1) return;
|
|
|
+ let labelList = ["疾病", "药品", "症状",
|
|
|
+ // "手术和操作",
|
|
|
+ "实验室检查", "辅助检查"]
|
|
|
+ // Object.keys(data.itemStyle) >= 1
|
|
|
if (data.itemStyle.color || labelList.indexOf(param.data.type) === -1 || !data.itemStyle.display) return;
|
|
|
const clientHei = $(window).height()
|
|
|
const contentHei = clientHei - 80
|
|
|
@@ -682,9 +853,7 @@ function dataClick(param) {
|
|
|
if (window.knowledgeMapSetting.zTree) {
|
|
|
updateTree(data.label)
|
|
|
}
|
|
|
-
|
|
|
getGraph(data.label, select_type);
|
|
|
-
|
|
|
} else {
|
|
|
let renderTabInfo = getTab(data.type)
|
|
|
renderTab(renderTabInfo)
|
|
|
@@ -693,6 +862,16 @@ function dataClick(param) {
|
|
|
$(".radioList").show()
|
|
|
$('.iconRadio').attr('src', '/images/radioUnSelect.png')
|
|
|
$('.ICD10 img').attr('src', '/images/radioSelect.png')
|
|
|
+ $(".radioList").show()
|
|
|
+ $(".radioList .radioItem").hide()
|
|
|
+ $(".radioList .disease").show()
|
|
|
+ setTabBottomHei(1)
|
|
|
+ } else if (data.type == '药品') {
|
|
|
+ $('.iconRadio').attr('src', '/images/radioUnSelect.png')
|
|
|
+ $('.general img').attr('src', '/images/radioSelect.png')
|
|
|
+ $(".radioList").show()
|
|
|
+ $(".radioList .radioItem").hide()
|
|
|
+ $(".radioList .medicine").show()
|
|
|
setTabBottomHei(1)
|
|
|
} else {
|
|
|
$(".radioList").hide()
|
|
|
@@ -712,10 +891,12 @@ function dataClick(param) {
|
|
|
|
|
|
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 == "实验室检查") {
|
|
|
+ }
|
|
|
+ // 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 == "辅助检查") {
|
|
|
@@ -723,15 +904,34 @@ function dataClick(param) {
|
|
|
getGraph(data.label, select_type);
|
|
|
}
|
|
|
}
|
|
|
+ // addRecord(data.label, select_type)
|
|
|
+ // renderRecord()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+function reDrawTree(name, label) {
|
|
|
+ if (label == "疾病") {
|
|
|
+ getTree(1, 1, name);
|
|
|
|
|
|
+ } else if (label == "药品") {
|
|
|
+ getTree(0, 2, name);
|
|
|
|
|
|
+ } else if (label == "症状") {
|
|
|
+ getTree(0, 3, name);
|
|
|
+ }
|
|
|
+ // else if (label == "手术和操作") {
|
|
|
+ // getTree(0, 4,name);
|
|
|
+ // }
|
|
|
+ else if (label == "实验室检查") {
|
|
|
+ getTree(0, 5, name);
|
|
|
+ } else if (label == "辅助检查") {
|
|
|
+ getTree(0, 6, name);
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
function getTree(subType, type, showNodeName) {
|
|
|
- if (!window.knowledgeMapSetting.zTree) return; //没有树跳过
|
|
|
+ if (!window.knowledgeMapSetting.zTree) return; //没有树,跳过
|
|
|
post(api.getTree,
|
|
|
{
|
|
|
"subType": subType, //科室subType: 2, 疾病type:1
|
|
|
@@ -745,6 +945,7 @@ function getTree(subType, type, showNodeName) {
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
+
|
|
|
function drawTree(data, showNodeName) {
|
|
|
if (!window.knowledgeMapSetting.zTree) return;
|
|
|
/**
|
|
|
@@ -782,7 +983,8 @@ function drawTree(data, showNodeName) {
|
|
|
},
|
|
|
//设置事件回调
|
|
|
callback: {
|
|
|
- onClick: function (treeId, treeNode) {
|
|
|
+ onClick: function (event, treeId, treeNode) {
|
|
|
+ // console.log("onClick-treeId", treeId, "onClick-treeNode", treeNode)
|
|
|
const selectPId = $('.curSelectedNode').attr('id')
|
|
|
if (selectPId) {
|
|
|
const selectId = selectPId.substring(0, selectPId.length - 1) + 'ico'
|
|
|
@@ -791,6 +993,7 @@ function drawTree(data, showNodeName) {
|
|
|
|
|
|
},
|
|
|
beforeClick: function (treeId, treeNode) {
|
|
|
+ // console.log("beforeClick-treeId", treeId, "onClick-treeNode", treeNode)
|
|
|
var zTree = $.fn.zTree.getZTreeObj("tree");
|
|
|
if (treeNode.isParent) {
|
|
|
zTree.expandNode(treeNode);
|
|
|
@@ -816,21 +1019,33 @@ function drawTree(data, showNodeName) {
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
- var zNodes = data.nodes;
|
|
|
- // var zNodes = zTreeData.nodes;
|
|
|
- $.fn.zTree.init($("#tree"), setting, zNodes);
|
|
|
+ // var zNodes = []
|
|
|
+ // for (let i = 0; i < data.nodes.length; i++) {
|
|
|
+ // const node = data.nodes[i]
|
|
|
+ // let isNode = false
|
|
|
+ // for (let j = 0; j < zNodes.length; j++) {
|
|
|
+ // if (zNodes[j].id === node.id) {
|
|
|
+ // isNode = true
|
|
|
+ // break
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // if (!isNode) {
|
|
|
+ // zNodes.push(node)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ $.fn.zTree.init($("#tree"), setting, data.nodes);
|
|
|
// console.log("zNodes", zNodes)
|
|
|
if (showNodeName) {
|
|
|
// updateTree(showNodeName)
|
|
|
selectedZTreeNode(showNodeName)
|
|
|
}
|
|
|
- // selectedZTreeNode("艾滋病")
|
|
|
}
|
|
|
-
|
|
|
+// 定位到当前疾病
|
|
|
function selectedZTreeNode(nodeName) {
|
|
|
const zTreeObj = $.fn.zTree.getZTreeObj("tree")
|
|
|
+ // zTreeObj.expandAll()
|
|
|
// console.log("zTreeObj", zTreeObj)
|
|
|
- const targetNode = zTreeObj.getNodeByParam("name", nodeName); // 获取 id 为 2 的节点
|
|
|
+ const targetNode = zTreeObj.getNodeByParam("name", nodeName); // 名字相同的节点
|
|
|
// console.log("targetNode", targetNode)
|
|
|
if (targetNode) {
|
|
|
// 展开指定父节点
|
|
|
@@ -846,12 +1061,15 @@ function selectedZTreeNode(nodeName) {
|
|
|
|
|
|
// 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"
|
|
|
- })
|
|
|
+ setTimeout(() => {
|
|
|
+ const parent = document.querySelector(`#tree`)
|
|
|
+ const child = document.querySelector(`#tree .curSelectedNode`)
|
|
|
+ parent.scrollTo({
|
|
|
+ top: child.offsetTop,//需要父元素设置postion(relative、absolute、fixed)
|
|
|
+ behavior: "smooth"
|
|
|
+ })
|
|
|
+ }, 500)
|
|
|
+
|
|
|
|
|
|
}
|
|
|
}
|
|
|
@@ -898,22 +1116,37 @@ function getNode(val, type) {
|
|
|
getTree(0, 2, txt);
|
|
|
} else if (select_type == '症状') {
|
|
|
getTree(0, 3, txt);
|
|
|
- } else if (select_type == '手术和操作') {
|
|
|
- getTree(0, 4, txt);
|
|
|
- } else if (select_type == '实验室检查') {
|
|
|
+ }
|
|
|
+ // else if (select_type == '手术和操作') {
|
|
|
+ // getTree(0, 4, txt);
|
|
|
+ // }
|
|
|
+ else if (select_type == '实验室检查') {
|
|
|
getTree(0, 5, txt);
|
|
|
} else if (select_type == '辅助检查') {
|
|
|
getTree(0, 6, txt);
|
|
|
}
|
|
|
+
|
|
|
if (select_type == '疾病') {
|
|
|
$('.iconRadio').attr('src', '/images/radioUnSelect.png')
|
|
|
$('.ICD10 img').attr('src', '/images/radioSelect.png')
|
|
|
$(".radioList").show()
|
|
|
+ $(".radioList .radioItem").hide()
|
|
|
+ $(".radioList .disease").show()
|
|
|
+
|
|
|
setTabBottomHei(1)
|
|
|
- } else {
|
|
|
+ } else if (select_type == '药品') {
|
|
|
+ $('.iconRadio').attr('src', '/images/radioUnSelect.png')
|
|
|
+ $('.general img').attr('src', '/images/radioSelect.png')
|
|
|
+ $(".radioList").show()
|
|
|
+ $(".radioList .radioItem").hide()
|
|
|
+ $(".radioList .medicine").show()
|
|
|
+ setTabBottomHei(1)
|
|
|
+ }
|
|
|
+ else {
|
|
|
$(".radioList").hide()
|
|
|
setTabBottomHei(2)
|
|
|
}
|
|
|
+
|
|
|
let renderTabInfo = getTab(select_type)
|
|
|
renderTab(renderTabInfo)
|
|
|
|
|
|
@@ -984,7 +1217,9 @@ function getKeyEvent(evt) {
|
|
|
}
|
|
|
|
|
|
function getTab(tabName) {
|
|
|
- let tabList = ["疾病", "药品", "症状", "手术和操作", "实验室检查", "辅助检查"]
|
|
|
+ let tabList = ["疾病", "药品", "症状",
|
|
|
+ // "手术和操作",
|
|
|
+ "实验室检查", "辅助检查"]
|
|
|
let tabListCopy = tabList.slice()
|
|
|
const index = tabList.findIndex(item => item == tabName)
|
|
|
|
|
|
@@ -1089,10 +1324,24 @@ function bindTabClick() {
|
|
|
let renderInfo = getTab(id)
|
|
|
// renderTab(renderInfo)
|
|
|
if (id != select_type) {
|
|
|
- if (id != "疾病") {
|
|
|
+ if (id != "疾病" && id != "药品") {
|
|
|
$(".radioList").hide()
|
|
|
setTabBottomHei(2)
|
|
|
} else {
|
|
|
+ if (id == '疾病') {
|
|
|
+ $('.iconRadio').attr('src', '/images/radioUnSelect.png')
|
|
|
+ $('.ICD10 img').attr('src', '/images/radioSelect.png')
|
|
|
+ $(".radioList .radioItem").hide()
|
|
|
+ $(".radioList .disease").show()
|
|
|
+
|
|
|
+
|
|
|
+ } else if (id == '药品') {
|
|
|
+ $('.iconRadio').attr('src', '/images/radioUnSelect.png')
|
|
|
+ $('.general img').attr('src', '/images/radioSelect.png')
|
|
|
+ $(".radioList .radioItem").hide()
|
|
|
+ $(".radioList .medicine").show()
|
|
|
+
|
|
|
+ }
|
|
|
$(".radioList").show()
|
|
|
setTabBottomHei(1)
|
|
|
}
|
|
|
@@ -1101,7 +1350,6 @@ function bindTabClick() {
|
|
|
setSelectName(select_type)
|
|
|
|
|
|
if (id == "疾病") {
|
|
|
-
|
|
|
$('#searchInp').val(disease || "艾滋病")
|
|
|
$('.iconRadio').attr('src', '/images/radioUnSelect.png')
|
|
|
$('.ICD10 img').attr('src', '/images/radioSelect.png')
|
|
|
@@ -1109,25 +1357,27 @@ function bindTabClick() {
|
|
|
getGraph(disease || "艾滋病", select_type);
|
|
|
|
|
|
} else if (id == "药品") {
|
|
|
- $('#searchInp').val("硝苯地平缓释片(Ⅱ)")
|
|
|
- getTree(0, 2, "硝苯地平缓释片(Ⅱ)");
|
|
|
- getGraph("硝苯地平缓释片(Ⅱ)", select_type);
|
|
|
+ $('#searchInp').val("过氧化氢溶液")
|
|
|
+ getTree(0, 2, "过氧化氢溶液");
|
|
|
+ getGraph("过氧化氢溶液", select_type);
|
|
|
} else if (id == "症状") {
|
|
|
$('#searchInp').val("背痛")
|
|
|
getTree(0, 3, "背痛");
|
|
|
getGraph("背痛", select_type);
|
|
|
- } else if (id == "手术和操作") {
|
|
|
- $('#searchInp').val("动脉缝合术")
|
|
|
- getTree(0, 4, "动脉缝合术");
|
|
|
- getGraph("动脉缝合术", select_type);
|
|
|
- } else if (id == "实验室检查") {
|
|
|
- $('#searchInp').val("白细胞计数(WBC)")
|
|
|
- getTree(0, 5, "白细胞计数(WBC)");
|
|
|
- getGraph("白细胞计数(WBC)", select_type);
|
|
|
+ }
|
|
|
+ // else if (id == "手术和操作") {
|
|
|
+ // $('#searchInp').val("动脉缝合术")
|
|
|
+ // getTree(0, 4, "动脉缝合术");
|
|
|
+ // getGraph("动脉缝合术", select_type);
|
|
|
+ // }
|
|
|
+ else if (id == "实验室检查") {
|
|
|
+ $('#searchInp').val("白细胞计数")
|
|
|
+ getTree(0, 5, "白细胞计数");
|
|
|
+ getGraph("白细胞计数", select_type);
|
|
|
} else if (id == "辅助检查") {
|
|
|
- $('#searchInp').val("肝彩超")
|
|
|
- getTree(0, 6, "肝彩超");
|
|
|
- getGraph("肝彩超", select_type);
|
|
|
+ $('#searchInp').val("ERCP下胆胰管细胞学检查")
|
|
|
+ getTree(0, 6, "ERCP下胆胰管细胞学检查");
|
|
|
+ getGraph("ERCP下胆胰管细胞学检查", select_type);
|
|
|
}
|
|
|
// getTree(1,1,""); //切换tab重新画菜单树
|
|
|
}
|
|
|
@@ -1172,8 +1422,8 @@ function setSelectName(name) {
|
|
|
}
|
|
|
}
|
|
|
function hideSlide(expectClass) {
|
|
|
- let hideSlideList = ['selectList', 'tabNameList', 'tabNameListNoSearch',
|
|
|
- // 'hideTabList',
|
|
|
+ let hideSlideList = ['selectList', 'tabNameList', 'tabNameListNoSearch', "selectList-record",
|
|
|
+ // 'hideTabList',"
|
|
|
'contextmenu', 'contextmenu-edge', 'contextmenu-node']
|
|
|
let index = hideSlideList.findIndex(item => item == expectClass)
|
|
|
for (let i = 0; i < hideSlideList.length; i++) {
|
|
|
@@ -1192,15 +1442,13 @@ 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
|
|
|
-
|
|
|
+ // 生成一个虚拟节点
|
|
|
+ let sourceIndex = -1
|
|
|
if (checkHasProperties) {
|
|
|
const newNode = {
|
|
|
category: data.category,
|
|
|
@@ -1221,7 +1469,14 @@ function expandProperty(data, flag) {
|
|
|
}
|
|
|
window.graphMapUpdatedData.links.push(newLink)
|
|
|
sourceIndex = newNode.name
|
|
|
- } else return
|
|
|
+ if (flag) { //把节点添加到配置中
|
|
|
+ if (window.knowledgeMapSetting.expandPropertyId.indexOf(data.nodeId) === -1) {//节点id不存在则添加
|
|
|
+ window.knowledgeMapSetting.expandPropertyId.push(data.nodeId)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return
|
|
|
+ }
|
|
|
// 属性节点
|
|
|
for (let i in data.properties) {
|
|
|
if (i == 'name' || i == 'is_deleted') continue
|
|
|
@@ -1254,6 +1509,89 @@ function expandProperty(data, flag) {
|
|
|
}, false); // 仅更新指定的部分，不重绘图表
|
|
|
}
|
|
|
|
|
|
+function expandPropertyNodePad(expandPropertyNodes) {
|
|
|
+ for (let i = 0; i < expandPropertyNodes.length; i++) {
|
|
|
+ let data = expandPropertyNodes[i]
|
|
|
+ //展开原来已经展开的属性
|
|
|
+ //检验是否要展开属性
|
|
|
+ let checkHasProperties = Object.keys(data.properties).filter(key => key !== "name" || key !== "is_deleted").length > 0
|
|
|
+ // 生成一个虚拟节点
|
|
|
+ let sourceIndex = -1
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+function renderRecord() {
|
|
|
+ let record_str = ""
|
|
|
+ // $(".record .selectList-record").empty()
|
|
|
+ // console.log("records", window.knowledgeMapSettings.records)
|
|
|
+ for (let i = 0; i < window.knowledgeMapSetting.records.length; i++) {
|
|
|
+ const record = window.knowledgeMapSetting.records[i]
|
|
|
+ // console.log(i, "record", record)
|
|
|
+ record_str += `<li class="selectItem-record" name="${record.name}" label="${record.label}">${record.name}</li>`
|
|
|
+ }
|
|
|
+ $(".record .selectList-record").html(record_str)
|
|
|
+}
|
|
|
+
|
|
|
+function addRecord(name, label) {
|
|
|
+ let isHasRecord = false
|
|
|
+ for (let i = 0; i < window.knowledgeMapSetting.records.length; i++) {
|
|
|
+ const record = window.knowledgeMapSetting.records[i]
|
|
|
+ if (name === record.name && label === record.label) {
|
|
|
+ isHasRecord = true
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!isHasRecord) {
|
|
|
+ window.knowledgeMapSetting.records.push({ name: name, label: label })
|
|
|
+ renderRecord()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
module.exports = {
|
|
|
drawGraph,
|
|
|
updateTree,
|
