|
|
@@ -0,0 +1,790 @@
|
|
|
+// const $ = require("jquery");
|
|
|
+require("babel-polyfill");
|
|
|
+const echarts = require("echarts");
|
|
|
+require("./../css/knowledgeUpdate.less");
|
|
|
+require("./../css/common.less");
|
|
|
+require("../css/selfKnowledgeUpdate.less")
|
|
|
+// require("ztree");
|
|
|
+const $ = require("jquery");
|
|
|
+require("babel-polyfill");
|
|
|
+const echarts = require("echarts");
|
|
|
+require("./../css/knowledgeUpdate.less");
|
|
|
+require("./../css/common.less");
|
|
|
+// require("ztree");
|
|
|
+
|
|
|
+require('./../resources/images/icon.png');
|
|
|
+require('./../resources/images/iconOpen.png');
|
|
|
+require('./../resources/images/iconClose.png');
|
|
|
+require('./../resources/images/node.png');
|
|
|
+require('./../resources/images/radioUnSelect.png');
|
|
|
+require('./../resources/images/radioSelect.png');
|
|
|
+require('./../resources/images/iconSlideUp.png');
|
|
|
+require('./../resources/images/iconSlideDown.png');
|
|
|
+require('./../resources/images/iconSelect.png');
|
|
|
+require('./../resources/images/syflogo.png');
|
|
|
+require('./../resources/images/logo.png');
|
|
|
+require('./../resources/images/logo_shaoyifu.png');
|
|
|
+require('./../resources/zTree/js/jquery.ztree.core.min.js');
|
|
|
+require('./../resources/zTree/js/jquery.ztree.excheck.min.js')
|
|
|
+require('./../resources/zTree/css/zTreeStyle/zTreeStyle.css');
|
|
|
+const iconUp = require('./../resources/images/iconUp.png');
|
|
|
+const iconDown = require('./../resources/images/iconDown.png');
|
|
|
+const { post, api, ifHideLogo, getUrlArgObject } = require('./api.js');
|
|
|
+const { mapData, zTreeData, mapData3, zTreeData3 } = require('./data.js');
|
|
|
+const { drawGraph, updateTree, getGraph, getTree, getNode, getTab, renderTab, setTabBottomHei, expandProperty,
|
|
|
+ setSelectName, hideHideTab, hideSlide, reDrawGraph } = require('./graphMap.js');
|
|
|
+/**右侧侧边栏折叠*/
|
|
|
+let isRightCollapse = false
|
|
|
+window.select_type = "疾病";
|
|
|
+window.select_type_noSearch = "疾病";
|
|
|
+window.refreshTree = true
|
|
|
+let disease = getUrlArgObject("disease")
|
|
|
+// 用来存储节点操作的数据
|
|
|
+window.knowledgeMapData = {}//当前右键节点数据
|
|
|
+window.graphMapUpdatedData = null //实时更新的关系图数据
|
|
|
+window.graphMap = null //当前关系图实例对象
|
|
|
+window.knowledgeMapSetting = {
|
|
|
+ operation: "edit", //操作类型,修改
|
|
|
+ draggable: true, //是否能拖拽节点
|
|
|
+ zTree: false,//是否有zTree
|
|
|
+ expandPropertyId: [],//存储展开属性的nodeId
|
|
|
+ expandRelationshipsId: [],//存储展开关系的nodeId
|
|
|
+ currentNodeId: -1,//存储右侧显示的节点的nodeId
|
|
|
+ legends: [],//图例
|
|
|
+ selected: {},//选中的数据
|
|
|
+ showLegend: true, //是否显示图例
|
|
|
+ showLegendNum: 0,//展示图例的数量
|
|
|
+ showLegendAll: false,//是否展示全部图例
|
|
|
+ records: [],//历史记录
|
|
|
+}
|
|
|
+
|
|
|
+setHei()
|
|
|
+ifHideLogo();
|
|
|
+function setHei() {
|
|
|
+ const clientHei = $(window).height()
|
|
|
+ const contentHei = 580
|
|
|
+ $(".left").css("height", contentHei + 'px')
|
|
|
+ $(".right").css("height", contentHei + 'px')
|
|
|
+ if (select_type == "疾病") {
|
|
|
+ setTabBottomHei(1)
|
|
|
+ } else {
|
|
|
+ setTabBottomHei(2)
|
|
|
+ }
|
|
|
+ $("#main").css("height", contentHei - 20 - 20 - 10 + 'px')
|
|
|
+}
|
|
|
+$(window).resize(function () {
|
|
|
+ setHei()
|
|
|
+ // getGraph(graphTxt,select_type);
|
|
|
+})
|
|
|
+
|
|
|
+//关系图
|
|
|
+getGraph(disease || "艾滋病", select_type, true);
|
|
|
+// getTree(1, 1, disease || "艾滋病");
|
|
|
+$('#searchInp').val(disease || "艾滋病")
|
|
|
+
|
|
|
+//选择类型
|
|
|
+$('.select').click(function (e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ hideSlide('selectList')
|
|
|
+ const selectListShow = $('.selectList').css('display')
|
|
|
+ if (selectListShow == 'none') {
|
|
|
+ $('.iconSlide').attr('src', './images/iconSlideUp.png')
|
|
|
+ } else {
|
|
|
+ $('.iconSlide').attr('src', './images/iconSlideDown.png')
|
|
|
+ }
|
|
|
+ $('.selectList').fadeToggle()
|
|
|
+
|
|
|
+})
|
|
|
+$('.search-type .selectList .selectItem').click(function () {
|
|
|
+ select_type_noSearch = $(this).attr('data-id')
|
|
|
+ const txt = $(this).text()
|
|
|
+ const oldTxt = $(".selectedName").html()
|
|
|
+ setSelectName(txt)
|
|
|
+
|
|
|
+ $("#searchInp").attr("placeholder", `请输入${txt}名称`)
|
|
|
+ if (txt != oldTxt) {
|
|
|
+ $('#searchInp').val("")
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+$('.dropdown').on('click', function (el) {
|
|
|
+ el.stopPropagation();
|
|
|
+ // hideSlide()
|
|
|
+ $(".dropdown").not($(this)).find(".selectList").slideUp()
|
|
|
+ $(this).find(".selectList").slideToggle()
|
|
|
+})
|
|
|
+
|
|
|
+$(".record .selectedData,.record").on("click", function (event) {
|
|
|
+ // console.log("event-record", event)
|
|
|
+ event.stopPropagation()
|
|
|
+ // event.preventDefault()
|
|
|
+ $(".record .selectList-record").slideToggle()
|
|
|
+ $(".record .selectList-record .selectItem-record").on("click", function (event) {
|
|
|
+ // event.stopPropagation()
|
|
|
+ // console.log("eve")
|
|
|
+ const name = $(this).attr("name")
|
|
|
+ const label = $(this).attr("label")
|
|
|
+ // reDrawGraph(name, label)
|
|
|
+ getGraph(name, label)
|
|
|
+ // $(".record .selectList-record").slideUp()
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+//搜索节点名
|
|
|
+$("#searchInp").bind("input propertychange", function (event) {
|
|
|
+ const val = $("#searchInp").val().trim()
|
|
|
+ if (val) {
|
|
|
+ getNode(val, select_type_noSearch)
|
|
|
+ } else {
|
|
|
+ $(".tabNameList").hide()
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+//切换条目
|
|
|
+$('.radioItem').click(function (e) {
|
|
|
+ const initDiag = disease || "艾滋病"
|
|
|
+ const type = $(this).attr('data-type')
|
|
|
+ // $(this).children('img').attr('src')
|
|
|
+ $('.iconRadio').attr('src', '/images/radioUnSelect.png')
|
|
|
+ $(this).children('img').attr('src', '/images/radioSelect.png')
|
|
|
+ $('#searchInp').val(initDiag)
|
|
|
+ getTree(type, 1, initDiag);
|
|
|
+ getGraph(initDiag, select_type);
|
|
|
+ // updateTree(initDiag)
|
|
|
+})
|
|
|
+
|
|
|
+//搜索
|
|
|
+$('#searchBtn').click(function (e) {
|
|
|
+ e.stopPropagation()
|
|
|
+ hideSlide()
|
|
|
+ const val = $('#searchInp').val().trim()
|
|
|
+ if (val) {
|
|
|
+ const clientHei = $(window).height()
|
|
|
+ const contentHei = clientHei - 80
|
|
|
+ $(".tabNameList").hide()
|
|
|
+ getGraph(val, select_type_noSearch).then(() => {
|
|
|
+ if (!window.refreshTree) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ select_type = select_type_noSearch
|
|
|
+
|
|
|
+ if (select_type == '疾病') {
|
|
|
+ // $('#searchInp').val("高血压3级")
|
|
|
+ getTree(1, 1, val);
|
|
|
+ } else if (select_type == '药品通用名') {
|
|
|
+ getTree(0, 2, val);
|
|
|
+ } else if (select_type == '症状') {
|
|
|
+ getTree(0, 3, val);
|
|
|
+ }
|
|
|
+ // else if (select_type == '手术和操作') {
|
|
|
+ // getTree(0, 4, val);
|
|
|
+ // }
|
|
|
+ else if (select_type == '实验室检查') {
|
|
|
+ getTree(0, 5, val);
|
|
|
+ } else if (select_type == '辅助检查') {
|
|
|
+ getTree(0, 6, val);
|
|
|
+ }
|
|
|
+ if (select_type == '疾病') {
|
|
|
+ $('.iconRadio').attr('src', '/images/radioUnSelect.png')
|
|
|
+ $('.ICD10 img').attr('src', '/images/radioSelect.png')
|
|
|
+ $(".radioList").show()
|
|
|
+ setTabBottomHei(1)
|
|
|
+ } else {
|
|
|
+ $(".radioList").hide()
|
|
|
+ setTabBottomHei(2)
|
|
|
+ }
|
|
|
+ let renderTabInfo = getTab(select_type)
|
|
|
+ renderTab(renderTabInfo)
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+ $('.tabNameListNoSearch').show()
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+let renderTabInfo = getTab("疾病")
|
|
|
+renderTab(renderTabInfo)
|
|
|
+
|
|
|
+$(".tabList").click(function (e) {
|
|
|
+ e.stopPropagation()
|
|
|
+ hideSlide()
|
|
|
+})
|
|
|
+$(".hideTabList").click(function (e) {
|
|
|
+ e.stopPropagation()
|
|
|
+ hideSlide()
|
|
|
+})
|
|
|
+
|
|
|
+//点击页面其他地方关闭下拉
|
|
|
+$('html').click(function () {
|
|
|
+ hideSlide()
|
|
|
+ // const selectListShow = $('.selectList').css('display')
|
|
|
+ // const tabNameListShow = $('.tabNameList').css('display')
|
|
|
+ // const tabNameListNoSearchShow = $('.tabNameListNoSearch').css('display')
|
|
|
+ // const hideTabListShow = $('.hideTabList').css('display')
|
|
|
+ // if(selectListShow == 'block'){
|
|
|
+ // $('.selectList').hide()
|
|
|
+ // $('.iconSlide').attr('src','./images/iconSlideDown.png')
|
|
|
+ // }
|
|
|
+ // if(tabNameListShow == 'block'){
|
|
|
+ // $('.tabNameList').hide()
|
|
|
+ // }
|
|
|
+ // if(tabNameListNoSearchShow == 'block'){
|
|
|
+ // $('.tabNameListNoSearch').hide()
|
|
|
+ // }
|
|
|
+ // if(hideTabListShow == 'block'){
|
|
|
+ // hideHideTab()
|
|
|
+ // }
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+let toggleTabHtml = ""
|
|
|
+$(".right-aside-collapse").on("click", function () {
|
|
|
+ isRightCollapse = !isRightCollapse
|
|
|
+
|
|
|
+ if (isRightCollapse) {
|
|
|
+ toggleTabHtml = $("#tabList > .toggleTab").html()
|
|
|
+ $("#tabList > .toggleTab").empty()
|
|
|
+ // document.querySelector('.toggleTab').style.display = 'none';
|
|
|
+ $(".right").animate({ "width": '110px' }, function () {
|
|
|
+ })
|
|
|
+ const contentWidth = $(".content").width()
|
|
|
+ const leftWidth = (contentWidth - 110).toString() + 'px'
|
|
|
+ // console.log("contentWidth", leftWidth);
|
|
|
+ $(".content .left").animate({ 'width': leftWidth, }, function () {
|
|
|
+ window.graphMap.resize()
|
|
|
+ // console.log("graphMap", window.graphMap)
|
|
|
+ })
|
|
|
+
|
|
|
+ } else {
|
|
|
+ $("#tabList > .toggleTab").html(toggleTabHtml)
|
|
|
+ $(".right").animate({ "width": '394px' })
|
|
|
+ const contentWidth = $(".content").width()
|
|
|
+ const leftWidth = (contentWidth - 394).toString() + 'px'
|
|
|
+ $(".content .left").animate({ 'width': leftWidth, }, function () {
|
|
|
+ window.graphMap.resize()
|
|
|
+ // console.log("graphMap", window.graphMap)
|
|
|
+ })
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// 接收来自home.html的数据
|
|
|
+window.addEventListener("message", function (event) {
|
|
|
+ // console.log("message", event.data);
|
|
|
+ if (event.data.operation == "left-collapse") {
|
|
|
+ const contentWidth = $(".content").width()
|
|
|
+ // console.log("contentWidth", contentWidth)
|
|
|
+ let leftWidth = 0
|
|
|
+ if (isRightCollapse) {
|
|
|
+ leftWidth = (contentWidth - 110).toString() + 'px'
|
|
|
+ $(".content .left").css('width', leftWidth)
|
|
|
+
|
|
|
+ } else {
|
|
|
+ leftWidth = (contentWidth - 394).toString() + 'px'
|
|
|
+ $(".content .left").css('width', leftWidth)
|
|
|
+
|
|
|
+ }
|
|
|
+ // console.log("leftWidth", leftWidth);
|
|
|
+ window.graphMap.resize()
|
|
|
+ }
|
|
|
+ if (event.data.operation === 'update-graph') { //重新绘制关系图
|
|
|
+ reDrawGraph()
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+$("div[class*='contextmenu']").on("contextmenu", function (event) {
|
|
|
+ event.preventDefault()
|
|
|
+})
|
|
|
+
|
|
|
+$("div[class*='contextmenu'] .contextmenu-item").on("click", function () {
|
|
|
+ const opType = $(this).attr("data-id")
|
|
|
+ const title = $(this).attr("title")
|
|
|
+ const showFooter = true
|
|
|
+ const dialogVisible = true
|
|
|
+ const data = {
|
|
|
+ opType, title, data: window.knowledgeMapData, showFooter, dialogVisible
|
|
|
+ }
|
|
|
+ menuOperation(opType, data)
|
|
|
+})
|
|
|
+
|
|
|
+$(".dropdown[select='off'] .selectList .selectItem").on("click", function () {
|
|
|
+ const opType = $(this).attr("data-id")
|
|
|
+ const title = $(this).attr("title")
|
|
|
+ const showFooter = true
|
|
|
+ const dialogVisible = true
|
|
|
+ const data = {
|
|
|
+ opType, title, showFooter, dialogVisible, data: {}
|
|
|
+ }
|
|
|
+ menuOperation(opType, data)
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// 自定义的菜单和部分下拉框的操作
|
|
|
+function menuOperation(opType, data) {
|
|
|
+
|
|
|
+ data.width = ""
|
|
|
+ // console.log("menuOperationData", data);
|
|
|
+ let selectedName = ""
|
|
|
+ let searchInp = ""
|
|
|
+ const parentURL = window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + "/home.html";
|
|
|
+ switch (opType) {
|
|
|
+ case 'expandProperty': //展开属性
|
|
|
+ expandProperty(data.data, true)
|
|
|
+ break
|
|
|
+ case 'modifyEntityName-dropdown':
|
|
|
+ selectedName = $(".selectedName").html().trim()
|
|
|
+ searchInp = $("#searchInp").val().trim()
|
|
|
+ // console.log("modifyEntityName-dropdown", selectedName, searchInp);
|
|
|
+ data.data = { selectedName, searchInp }
|
|
|
+ window.parent.postMessage(data, parentURL);
|
|
|
+ break
|
|
|
+ case 'deleteEntity-dropdown':
|
|
|
+ selectedName = $(".selectedName").html().trim()
|
|
|
+ searchInp = $("#searchInp").val().trim()
|
|
|
+ // console.log("modifyEntityName-dropdown", selectedName, searchInp);
|
|
|
+ data.data = { selectedName, searchInp }
|
|
|
+ window.parent.postMessage(data, parentURL);
|
|
|
+ break
|
|
|
+ case 'deleteRelationship':
|
|
|
+ let endId = 0
|
|
|
+ let endLabel = "string"
|
|
|
+ let property = {}
|
|
|
+ let relationshipType = "string"
|
|
|
+ let startId = 0
|
|
|
+ let startLabel = "string"
|
|
|
+ window.graphMapUpdatedData.node.forEach((element, index) => {
|
|
|
+ if (index == data.data.target) {
|
|
|
+ endId = element.nodeId
|
|
|
+ }
|
|
|
+ });
|
|
|
+ window.parent.postMessage(data, parentURL);
|
|
|
+ break
|
|
|
+ case "modifyRelationshipName-dropdown":
|
|
|
+ data.showFooter = false
|
|
|
+ window.parent.postMessage(data, parentURL);
|
|
|
+ break
|
|
|
+ case "modifyProperty-dropdown":
|
|
|
+ data.showFooter = false
|
|
|
+ window.parent.postMessage(data, parentURL);
|
|
|
+ break
|
|
|
+ case "expandRelationships": //右键展开关系
|
|
|
+ if (data.data.name === 0 || data.data.expanded) return;
|
|
|
+
|
|
|
+ post(api.getGraph, {
|
|
|
+ "inputStr": data.data.properties.name,
|
|
|
+ "labelName": data.data.type
|
|
|
+ }).then(res => {
|
|
|
+ const { code, msg } = res.data
|
|
|
+ const nodeLength = window.graphMapUpdatedData.node.length
|
|
|
+ // let selected = {}
|
|
|
+ if (code === '0') {
|
|
|
+ res.data.data.node.forEach(node => {
|
|
|
+ if (!node.itemStyle.display && node.label && node.symbol == 'circle') {
|
|
|
+ node.symbol = 'pin'
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const newNodeData = res.data.data
|
|
|
+ //添加新的类
|
|
|
+ // 判断有没有新添加的类型
|
|
|
+ for (let i = 2; i < newNodeData.categories.length; i++) {
|
|
|
+ let isCategory = false
|
|
|
+ for (let j = 0; j < window.graphMapUpdatedData.categories.length; j++) {
|
|
|
+ if (newNodeData.categories[i].name === window.graphMapUpdatedData.categories[j].name) {
|
|
|
+ isCategory = true
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!isCategory) {
|
|
|
+ window.graphMapUpdatedData.categories.push(newNodeData.categories[i])
|
|
|
+ window.knowledgeMapSetting.legends.push(newNodeData.categories[i])
|
|
|
+ window.knowledgeMapSetting.selected[newNodeData.categories[i].name] = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ newNodeData.node.forEach((node, index) => {
|
|
|
+ let nodeIndex = -1
|
|
|
+ if (index === 0) {
|
|
|
+ nodeIndex = data.data.name
|
|
|
+ //标志该节点已经展开过
|
|
|
+ window.graphMapUpdatedData.node[nodeIndex].expanded = true
|
|
|
+ } else {
|
|
|
+ nodeIndex = nodeLength + index - 1
|
|
|
+ node.name = nodeIndex
|
|
|
+ for (let i = 0; i < window.graphMapUpdatedData.categories.length; i++) {
|
|
|
+ if (newNodeData.categories[node.category].name === window.graphMapUpdatedData.categories[i].name) {
|
|
|
+ // console.log(newNodeData.categories[node.category].name, window.graphMapUpdatedData.categories[i].name, i)
|
|
|
+ node.category = i
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ window.graphMapUpdatedData.node.push(node)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ newNodeData.links.forEach(link => {
|
|
|
+ if (link.source === 0) {
|
|
|
+ link.source = data.data.name
|
|
|
+ } else {
|
|
|
+ link.source += (nodeLength - 1)
|
|
|
+ }
|
|
|
+ if (link.target === 0) {
|
|
|
+ link.target = data.data.name
|
|
|
+ } else {
|
|
|
+ link.target += (nodeLength - 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ window.graphMapUpdatedData.links = window.graphMapUpdatedData.links.concat(newNodeData.links)
|
|
|
+ // window.graphMapUpdatedData.links = [...window.graphMapUpdatedData.links, ...newNodeData.links]
|
|
|
+ let legendData = null
|
|
|
+ //重新计算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)
|
|
|
+ }
|
|
|
+ reNodeCloseAndExpand()
|
|
|
+ window.graphMap.setOption({
|
|
|
+ legend: [{
|
|
|
+ selected: window.knowledgeMapSetting.selected,
|
|
|
+ data: legendData,
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ type: 'graph',
|
|
|
+ categories: window.graphMapUpdatedData.categories,
|
|
|
+ data: window.graphMapUpdatedData.node, // 更新节点数据
|
|
|
+ links: window.graphMapUpdatedData.links, // 更新边数据
|
|
|
+ }]
|
|
|
+ }, false); // 仅更新指定的部分，不重绘图表
|
|
|
+
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+
|
|
|
+ })
|
|
|
+ break
|
|
|
+ case "addRelationship-dropdown":
|
|
|
+ window.parent.postMessage(data, parentURL);
|
|
|
+ break
|
|
|
+ case "closeAll":
|
|
|
+ nodeAllCloseAndExpand(false)
|
|
|
+ break
|
|
|
+ case "expandAll":
|
|
|
+ nodeAllCloseAndExpand(true)
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ window.parent.postMessage(data, parentURL);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 节点全部关闭和展开，flag为true代表全部展开，为false是全部关闭
|
|
|
+function nodeAllCloseAndExpand(flag) {
|
|
|
+ let selected = window.knowledgeMapSetting.selected
|
|
|
+ for (let key in selected) {
|
|
|
+ if (key !== "中心词" && key !== "关系") {
|
|
|
+ selected[key] = flag
|
|
|
+ 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
|
|
|
+ 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 }
|
|
|
+ }
|
|
|
+
|
|
|
+ targetIndex = -1
|
|
|
+ sourceIndex = -1
|
|
|
+ linkIndex = -1
|
|
|
+ // break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log("key", key, "linkIndex", linkIndex)
|
|
|
+ // if (!(linkIndex >= 0)) continue;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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); //
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+//重新隐藏之前的节点
|
|
|
+function reNodeCloseAndExpand() {
|
|
|
+ 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 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}`)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+$(document).on("click", ".content .right .entity-node .box-content .text .select-sign span", function () {
|
|
|
+ // $(this).attr("class", "icon-rect-select")
|
|
|
+ if ($(this).hasClass("icon-rect-select")) {
|
|
|
+ $(this).attr("class", "icon-rect-selected")
|
|
|
+ // console.log("icon-rect-select")
|
|
|
+ } else {
|
|
|
+ $(this).attr("class", "icon-rect-select")
|
|
|
+ // console.log("icon-rect-selected")
|
|
|
+ }
|
|
|
+})
|
|
|
+// 右侧实体删除
|
|
|
+$(document).on("click", ".content .right .entity-node .delete-entity", function () {
|
|
|
+ if (confirm("确定要删除选中的实体吗？")) {
|
|
|
+ const entityNodeId = []
|
|
|
+ $(".content .right .entity-node .box-content .text").each(function (textIndex, textElement) {
|
|
|
+ if ($(textElement).find(".select-sign span").is(".icon-rect-selected")) {
|
|
|
+ entityNodeId.push(Number($(textElement).attr("nodeId")))
|
|
|
+ // $(textElement).remove()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ post(api.deleteEntity, entityNodeId).then(res => {
|
|
|
+ const { data, code, msg } = res.data
|
|
|
+ if (code == '0') {
|
|
|
+ reDrawGraph()
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ console.log("deleteEntity接口报错", err)
|
|
|
+ })
|
|
|
+ // console.log("entityNodeId", entityNodeId)
|
|
|
+ }
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+// 右侧实体合并
|
|
|
+$(document).on("click", ".content .right .entity-node .merge-entity", function () {
|
|
|
+ const entityNode = []
|
|
|
+ $(".content .right .entity-node .box-content .text").each(function (textIndex, textElement) {
|
|
|
+ if ($(textElement).find(".select-sign span").is(".icon-rect-selected")) {
|
|
|
+ entityNode.push(window.graphMapUpdatedData.node[Number($(textElement).attr("nodeIndex"))])
|
|
|
+ // $(textElement).remove()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (entityNode.length !== 2) {
|
|
|
+ alert("实体合并只能选择两个")
|
|
|
+
|
|
|
+ } else if (entityNode[0].type !== entityNode[1].type) {
|
|
|
+ alert("合并的两个实体需要类型相同")
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ const entityVO = {
|
|
|
+ "firstId": entityNode[0].nodeId,
|
|
|
+ "firstLabel": entityNode[0].type,
|
|
|
+ "firstName": entityNode[0].properties.name,
|
|
|
+ "newLabel": entityNode[0].type,
|
|
|
+ "newName": "",
|
|
|
+ "secondId": entityNode[1].nodeId,
|
|
|
+ "secondLabel": entityNode[1].type,
|
|
|
+ "secondName": entityNode[1].properties.name
|
|
|
+ }
|
|
|
+ const data = {
|
|
|
+ opType: "merge-entity",
|
|
|
+ showFooter: true,
|
|
|
+ dialogVisible: true,
|
|
|
+ data: entityVO,
|
|
|
+ title: "实体合并提示",
|
|
|
+ }
|
|
|
+ // console.log("entityVO", entityVO)
|
|
|
+ menuOperation(data.opType, data)
|
|
|
+ }
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+$(document).on("click", ".link-entity", function () {
|
|
|
+ const entityNode = []
|
|
|
+ $(".content .right .entity-node .box-content .text").each(function (textIndex, textElement) {
|
|
|
+ if ($(textElement).find(".select-sign span").is(".icon-rect-selected")) {
|
|
|
+ entityNode.push(window.graphMapUpdatedData.node[Number($(textElement).attr("nodeIndex"))])
|
|
|
+ // $(textElement).remove()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // console.log("entityNode", entityNode)
|
|
|
+ const data = {
|
|
|
+ opType: "entityLink",
|
|
|
+ showFooter: true,
|
|
|
+ dialogVisible: true,
|
|
|
+ data: {
|
|
|
+ categories: window.graphMapUpdatedData.categories,
|
|
|
+ entityNode: entityNode,
|
|
|
+ },
|
|
|
+ title: "实体链接提示",
|
|
|
+ }
|
|
|
+ menuOperation(data.opType, data)
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Vue.use(ElementUI)
|
|
|
+setHei()
|
|
|
+ifHideLogo();
|
|
|
+function setHei() {
|
|
|
+ const clientHei = $(window).height()
|
|
|
+ const contentHei = 580
|
|
|
+ $(".left").css("height", contentHei + 'px')
|
|
|
+ $(".right").css("height", contentHei + 'px')
|
|
|
+ if (select_type == "疾病") {
|
|
|
+ setTabBottomHei(1)
|
|
|
+ } else {
|
|
|
+ setTabBottomHei(2)
|
|
|
+ }
|
|
|
+ $("#main").css("height", contentHei - 20 - 20 - 10 + 'px')
|
|
|
+}
|
|
|
+$(window).resize(function () {
|
|
|
+ setHei()
|
|
|
+ // getGraph(graphTxt,select_type);
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+const vm = new Vue({
|
|
|
+ el: "#app",
|
|
|
+ name: "selfKnowledgeGraph",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isShowKG: false,
|
|
|
+ currentKnowledgeGraph: {
|
|
|
+ label: '症状',
|
|
|
+ name: "头痛"
|
|
|
+ },
|
|
|
+ listData: [
|
|
|
+ // {
|
|
|
+ // id: 1,
|
|
|
+ // title: "测试图1",
|
|
|
+ // label: '症状',
|
|
|
+ // name: "头痛"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: 2,
|
|
|
+ // title: "测试图2",
|
|
|
+ // label: '症状',
|
|
|
+ // name: "头痛"
|
|
|
+ // }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ showKnowledgeGraph(id) {
|
|
|
+ // Object.assign(this.currentKnowledgeGraph, { ...data })
|
|
|
+ // this.currentKnowledgeGraph.label = data.label
|
|
|
+ // this.currentKnowledgeGraph.name = data.name
|
|
|
+ this.isShowKG = true
|
|
|
+ this.initGraph(id)
|
|
|
+ },
|
|
|
+ initGraph(id) {
|
|
|
+ window.graph_id = id //清除上一个关系图实例
|
|
|
+ let user_id = localStorage.getItem("userId") ? JSON.parse(localStorage.getItem("userId")) : 1
|
|
|
+ window.user_id = user_id
|
|
|
+ getGraph('艾滋病', '疾病', id)
|
|
|
+ getTree(user_id, id, '艾滋病')
|
|
|
+
|
|
|
+ },
|
|
|
+ getUserGraphs: function () {
|
|
|
+ get(api.userGraphs, {
|
|
|
+ user_id: localStorage.getItem("userId") ? JSON.parse(localStorage.getItem("userId")) : 1,
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ }).then(res => {
|
|
|
+ const { code, records } = res.data
|
|
|
+ if (code === 200) {
|
|
|
+ this.listData = [...records]
|
|
|
+ }
|
|
|
+ }).catch(e => {
|
|
|
+ console.log(e)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ kgUrl() {
|
|
|
+ return `./knowledgeGraph.html?self=true&input=${this.currentKnowledgeGraph.name}&label=${this.currentKnowledgeGraph.label}`;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getUserGraphs()
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+module.exports = {
|
|
|
+ getTab,
|
|
|
+ renderTab
|
|
|
+}
|
