|
@@ -1,112 +1,120 @@
|
|
-// const $ = require("jquery");
|
|
|
|
|
|
+const $ = require("jquery");
|
|
require("babel-polyfill");
|
|
require("babel-polyfill");
|
|
const echarts = require("echarts");
|
|
const echarts = require("echarts");
|
|
require("./../css/knowledgeMap.less");
|
|
require("./../css/knowledgeMap.less");
|
|
require("./../css/common.less");
|
|
require("./../css/common.less");
|
|
// require("ztree");
|
|
// 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 { mapData, zTreeData, mapData3, zTreeData3 } = require('./data.js');
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-require("../css/selfKnowledgeGraph.less")
|
|
|
|
|
|
+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 { mapData, zTreeData, mapData3, zTreeData3 } = require("./data.js");
|
|
|
|
+
|
|
|
|
+require("../css/selfKnowledgeGraph.less");
|
|
require("./../css/common.less");
|
|
require("./../css/common.less");
|
|
-const { drawGraph, updateTree, getGraph, getTree, getNode, getTab, renderTab, setTabBottomHei, selectedZTreeNode,
|
|
|
|
- setSelectName, hideHideTab, hideSlide, reDrawGraph } = require('./selfgraphMap.js');
|
|
|
|
-const { post, get, api, getUrlArgObject, ifHideLogo} = require('./api.js');
|
|
|
|
-const $ = require('jquery')
|
|
|
|
|
|
+const {
|
|
|
|
+ drawGraph,
|
|
|
|
+ updateTree,
|
|
|
|
+ getGraph,
|
|
|
|
+ getTree,
|
|
|
|
+ getNode,
|
|
|
|
+ getTab,
|
|
|
|
+ renderTab,
|
|
|
|
+ setTabBottomHei,
|
|
|
|
+ selectedZTreeNode,
|
|
|
|
+ setSelectName,
|
|
|
|
+ hideHideTab,
|
|
|
|
+ hideSlide,
|
|
|
|
+ reDrawGraph,
|
|
|
|
+} = require("./selfgraphMap.js");
|
|
|
|
+const { post, get, api, getUrlArgObject, ifHideLogo } = require("./api.js");
|
|
|
|
+// const $ = require('jquery')
|
|
const Vue = require("vue/dist/vue.esm.js").default;
|
|
const Vue = require("vue/dist/vue.esm.js").default;
|
|
const ElementUI = require("../public/elementUI/2.7.2/index.js");
|
|
const ElementUI = require("../public/elementUI/2.7.2/index.js");
|
|
|
|
|
|
// import UmyUi from 'umy-ui'
|
|
// import UmyUi from 'umy-ui'
|
|
// Vue.use(UmyUi);
|
|
// Vue.use(UmyUi);
|
|
/**右侧侧边栏折叠*/
|
|
/**右侧侧边栏折叠*/
|
|
-let isRightCollapse = false
|
|
|
|
|
|
+let isRightCollapse = false;
|
|
let self = getUrlArgObject("self") ? true : false;
|
|
let self = getUrlArgObject("self") ? true : false;
|
|
-let input = getUrlArgObject("input") || ""
|
|
|
|
-let label = getUrlArgObject("label") || ""
|
|
|
|
-let noTree = getUrlArgObject("no-tree") || false
|
|
|
|
|
|
+let input = getUrlArgObject("input") || "";
|
|
|
|
+let label = getUrlArgObject("label") || "";
|
|
|
|
+let noTree = getUrlArgObject("no-tree") || false;
|
|
window.select_type = "疾病";
|
|
window.select_type = "疾病";
|
|
window.select_type_noSearch = "疾病";
|
|
window.select_type_noSearch = "疾病";
|
|
-window.refreshTree = true
|
|
|
|
|
|
+window.refreshTree = true;
|
|
|
|
|
|
// 用来存储节点操作的数据
|
|
// 用来存储节点操作的数据
|
|
-window.knowledgeMapData = {}//当前右键节点数据
|
|
|
|
-window.graphMapUpdatedData = null //实时更新的关系图数据
|
|
|
|
-window.graphMap = null //当前关系图实例对象
|
|
|
|
|
|
+window.knowledgeMapData = {}; //当前右键节点数据
|
|
|
|
+window.graphMapUpdatedData = null; //实时更新的关系图数据
|
|
|
|
+window.graphMap = null; //当前关系图实例对象
|
|
window.knowledgeMapSetting = {
|
|
window.knowledgeMapSetting = {
|
|
self: self,
|
|
self: self,
|
|
operation: "view", //操作类型,修改
|
|
operation: "view", //操作类型,修改
|
|
draggable: true, //是否能拖拽节点
|
|
draggable: true, //是否能拖拽节点
|
|
- zTree: !noTree,//是否有zTree
|
|
|
|
- expandPropertyId: [],//存储展开属性的nodeId
|
|
|
|
- expandRelationshipsId: [],//存储展开关系的nodeId
|
|
|
|
- currentNodeId: -1,//存储右侧显示的节点的nodeId
|
|
|
|
- legends: [],//图例
|
|
|
|
- selected: {},//选中的数据
|
|
|
|
|
|
+ zTree: !noTree, //是否有zTree
|
|
|
|
+ expandPropertyId: [], //存储展开属性的nodeId
|
|
|
|
+ expandRelationshipsId: [], //存储展开关系的nodeId
|
|
|
|
+ currentNodeId: -1, //存储右侧显示的节点的nodeId
|
|
|
|
+ legends: [], //图例
|
|
|
|
+ selected: {}, //选中的数据
|
|
showLegend: true, //是否显示图例
|
|
showLegend: true, //是否显示图例
|
|
- showLegendNum: 0,//展示图例的数量
|
|
|
|
- showLegendAll: false,//是否展示全部图例
|
|
|
|
- records: [],//历史记录
|
|
|
|
-}
|
|
|
|
|
|
+ showLegendNum: 0, //展示图例的数量
|
|
|
|
+ showLegendAll: false, //是否展示全部图例
|
|
|
|
+ records: [], //历史记录
|
|
|
|
+};
|
|
if (noTree) {
|
|
if (noTree) {
|
|
- $(".content .right").css('display', 'none')
|
|
|
|
- $(".content .left").css("width", "100%")
|
|
|
|
|
|
+ $(".content .right").css("display", "none");
|
|
|
|
+ $(".content .left").css("width", "100%");
|
|
} else {
|
|
} else {
|
|
- $(".content .right").css('display', 'block')
|
|
|
|
|
|
+ $(".content .right").css("display", "block");
|
|
}
|
|
}
|
|
//选择类型
|
|
//选择类型
|
|
-$('.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()
|
|
|
|
-
|
|
|
|
-})
|
|
|
|
-$('.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("")
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
-})
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+$(".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();
|
|
|
|
+});
|
|
|
|
+$(".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("");
|
|
|
|
+ }
|
|
|
|
+});
|
|
|
|
|
|
//搜索节点名
|
|
//搜索节点名
|
|
-$("#searchInp").bind("input propertychange", function (event) {
|
|
|
|
- const val = $("#searchInp").val().trim()
|
|
|
|
- if (val) {
|
|
|
|
- getNode(val, select_type_noSearch)
|
|
|
|
- } else {
|
|
|
|
- $(".tabNameList").hide()
|
|
|
|
- }
|
|
|
|
-});
|
|
|
|
|
|
+// $("#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) {
|
|
// $('.radioItem').click(function (e) {
|
|
@@ -126,159 +134,89 @@ $("#searchInp").bind("input propertychange", function (event) {
|
|
// })
|
|
// })
|
|
|
|
|
|
//搜索
|
|
//搜索
|
|
-$('#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()
|
|
|
|
- $(".radioList .radioItem").hide()
|
|
|
|
- $(".radioList .disease").show()
|
|
|
|
-
|
|
|
|
- setTabBottomHei(1)
|
|
|
|
- } 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)
|
|
|
|
- })
|
|
|
|
- } else {
|
|
|
|
- $('.tabNameListNoSearch').show()
|
|
|
|
- }
|
|
|
|
-})
|
|
|
|
|
|
+// $("#searchBtn").click(function (e) {
|
|
|
|
+// console.log("searchBtn");
|
|
|
|
+// e.stopPropagation();
|
|
|
|
+// hideSlide();
|
|
|
|
+// const val = $("#searchInp").val().trim();
|
|
|
|
+// if (val) {
|
|
|
|
+// const clientHei = $(window).height();
|
|
|
|
+// const contentHei = clientHei - 80;
|
|
|
|
+// $(".tabNameList").hide();
|
|
|
|
+// getGraph(val, "疾病");
|
|
|
|
+// } else {
|
|
|
|
+// $(".tabNameListNoSearch").show();
|
|
|
|
+// }
|
|
|
|
+// });
|
|
|
|
+
|
|
|
|
+let renderTabInfo = getTab("疾病");
|
|
|
|
+renderTab(renderTabInfo);
|
|
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-let renderTabInfo = getTab("疾病")
|
|
|
|
-renderTab(renderTabInfo)
|
|
|
|
-
|
|
|
|
-$(".tabList").click(function (e) {
|
|
|
|
- e.stopPropagation()
|
|
|
|
- hideSlide()
|
|
|
|
-})
|
|
|
|
-$(".hideTabList").click(function (e) {
|
|
|
|
- e.stopPropagation()
|
|
|
|
- hideSlide()
|
|
|
|
-})
|
|
|
|
//点击页面其他地方关闭下拉
|
|
//点击页面其他地方关闭下拉
|
|
-$('html').click(function () {
|
|
|
|
- hideSlide()
|
|
|
|
-})
|
|
|
|
-
|
|
|
|
|
|
+$("html").click(function () {
|
|
|
|
+ hideSlide();
|
|
|
|
+});
|
|
|
|
|
|
-let toggleTabHtml = ""
|
|
|
|
|
|
+let toggleTabHtml = "";
|
|
$(".right-aside-collapse").on("click", function () {
|
|
$(".right-aside-collapse").on("click", function () {
|
|
- isRightCollapse = !isRightCollapse
|
|
|
|
- if (isRightCollapse) {
|
|
|
|
- $(this).attr('class', 'right-aside-collapsed')
|
|
|
|
- toggleTabHtml = $("#tabList > .toggleTab").html()
|
|
|
|
- $("#tabList > .toggleTab").empty()
|
|
|
|
- $(".right").animate({ "width": '150px' }, function () {
|
|
|
|
- })
|
|
|
|
- const contentWidth = $(".content").width()
|
|
|
|
- const leftWidth = (contentWidth - 150).toString() + 'px'
|
|
|
|
- $(".content .left").animate({ 'width': leftWidth, }, function () {
|
|
|
|
- window.graphMap.resize()
|
|
|
|
- })
|
|
|
|
|
|
+ isRightCollapse = !isRightCollapse;
|
|
|
|
+ if (isRightCollapse) {
|
|
|
|
+ $(this).attr("class", "right-aside-collapsed");
|
|
|
|
+ toggleTabHtml = $("#tabList > .toggleTab").html();
|
|
|
|
+ $("#tabList > .toggleTab").empty();
|
|
|
|
+ $(".right").animate({ width: "150px" }, function () {});
|
|
|
|
+ const contentWidth = $(".content").width();
|
|
|
|
+ const leftWidth = (contentWidth - 150).toString() + "px";
|
|
|
|
+ $(".content .left").animate({ width: leftWidth }, function () {
|
|
|
|
+ window.graphMap.resize();
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ $(this).attr("class", "right-aside-collapse");
|
|
|
|
+ $("#tabList > .toggleTab").html(toggleTabHtml);
|
|
|
|
+ $(".right").animate({ width: "461px" });
|
|
|
|
+ const contentWidth = $(".content").width();
|
|
|
|
+ const leftWidth = (contentWidth - 461).toString() + "px";
|
|
|
|
+ $(".content .left").animate({ width: leftWidth }, function () {
|
|
|
|
+ window.graphMap.resize();
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+});
|
|
|
|
|
|
|
|
+window.addEventListener("message", function (event) {
|
|
|
|
+ if (event.data.operation == "left-collapse") {
|
|
|
|
+ const contentWidth = $(".content").width();
|
|
|
|
+ let leftWidth = 0;
|
|
|
|
+ if (isRightCollapse) {
|
|
|
|
+ leftWidth = (contentWidth - 150).toString() + "px";
|
|
|
|
+ $(".content .left").css("width", leftWidth);
|
|
} else {
|
|
} else {
|
|
- $(this).attr('class', 'right-aside-collapse')
|
|
|
|
- $("#tabList > .toggleTab").html(toggleTabHtml)
|
|
|
|
- $(".right").animate({ "width": '461px' })
|
|
|
|
- const contentWidth = $(".content").width()
|
|
|
|
- const leftWidth = (contentWidth - 461).toString() + 'px'
|
|
|
|
- $(".content .left").animate({ 'width': leftWidth, }, function () {
|
|
|
|
- window.graphMap.resize()
|
|
|
|
- })
|
|
|
|
|
|
+ leftWidth = (contentWidth - 461).toString() + "px";
|
|
|
|
+ $(".content .left").css("width", leftWidth);
|
|
}
|
|
}
|
|
-})
|
|
|
|
-
|
|
|
|
-window.addEventListener("message", function (event) {
|
|
|
|
- if (event.data.operation == "left-collapse") {
|
|
|
|
- const contentWidth = $(".content").width()
|
|
|
|
- let leftWidth = 0
|
|
|
|
- if (isRightCollapse) {
|
|
|
|
- leftWidth = (contentWidth - 150).toString() + 'px'
|
|
|
|
- $(".content .left").css('width', leftWidth)
|
|
|
|
-
|
|
|
|
- } else {
|
|
|
|
- leftWidth = (contentWidth - 461).toString() + 'px'
|
|
|
|
- $(".content .left").css('width', leftWidth)
|
|
|
|
|
|
+ window.graphMap.resize();
|
|
|
|
+ }
|
|
|
|
+});
|
|
|
|
|
|
- }
|
|
|
|
- window.graphMap.resize()
|
|
|
|
- }
|
|
|
|
-})
|
|
|
|
-$(".record .selectedData,.record").on("click", function (event) {
|
|
|
|
- event.stopPropagation()
|
|
|
|
- $(".record .selectList-record").slideToggle()
|
|
|
|
- $(".record .selectList-record .selectItem-record").on("click", function (event) {
|
|
|
|
- const name = $(this).attr("name")
|
|
|
|
- const label = $(this).attr("label")
|
|
|
|
- getGraph(name, label)
|
|
|
|
- })
|
|
|
|
-})
|
|
|
|
|
|
|
|
-Vue.use(ElementUI)
|
|
|
|
-setHei()
|
|
|
|
|
|
+Vue.use(ElementUI);
|
|
|
|
+setHei();
|
|
ifHideLogo();
|
|
ifHideLogo();
|
|
function setHei() {
|
|
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')
|
|
|
|
|
|
+ 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 () {
|
|
$(window).resize(function () {
|
|
- setHei()
|
|
|
|
- // getGraph(graphTxt,select_type);
|
|
|
|
-
|
|
|
|
-})
|
|
|
|
|
|
+ setHei();
|
|
|
|
+ // getGraph(graphTxt,select_type);
|
|
|
|
+});
|
|
|
|
|
|
const vm = new Vue({
|
|
const vm = new Vue({
|
|
el: "#app",
|
|
el: "#app",
|
|
@@ -287,8 +225,8 @@ const vm = new Vue({
|
|
return {
|
|
return {
|
|
isShowKG: false,
|
|
isShowKG: false,
|
|
currentKnowledgeGraph: {
|
|
currentKnowledgeGraph: {
|
|
- label: '症状',
|
|
|
|
- name: "头痛"
|
|
|
|
|
|
+ label: "症状",
|
|
|
|
+ name: "头痛",
|
|
},
|
|
},
|
|
listData: [
|
|
listData: [
|
|
// {
|
|
// {
|
|
@@ -303,52 +241,101 @@ const vm = new Vue({
|
|
// label: '症状',
|
|
// label: '症状',
|
|
// name: "头痛"
|
|
// name: "头痛"
|
|
// }
|
|
// }
|
|
- ]
|
|
|
|
- }
|
|
|
|
|
|
+ ],
|
|
|
|
+ searchTimeout: null, // 用于存储搜索的定时器
|
|
|
|
+ searchResults: [], // 存储搜索结果
|
|
|
|
+ graph_id: "",
|
|
|
|
+ user_id: localStorage.getItem("userId")
|
|
|
|
+ ? JSON.parse(localStorage.getItem("userId"))
|
|
|
|
+ : 1, // 获取用户ID
|
|
|
|
+ };
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ toggleSelectList(e) {
|
|
|
|
+ e.stopPropagation();
|
|
|
|
+ $(".record .selectList-record").slideToggle();
|
|
|
|
+ // if ($(".selectList-record").css("display") == "none") {
|
|
|
|
+ // $(".selectList-record").style.display = "block";
|
|
|
|
+ // } else {
|
|
|
|
+ // $(".selectList-record").style.display = "none";
|
|
|
|
+ // }
|
|
|
|
+ },
|
|
|
|
+ handleSelectItem(e) {
|
|
|
|
+ const name = $(e.target).attr("name");
|
|
|
|
+ const label = $(e.target).attr("label");
|
|
|
|
+ getGraph(name, label);
|
|
|
|
+ getTree(this.user_id, this.graph_id, name);
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ handleChange(e) {
|
|
|
|
+ const val = e.target.value.trim();
|
|
|
|
+ // 如果之前有定时器,清除它
|
|
|
|
+ if (this.searchTimeout) {
|
|
|
|
+ clearTimeout(this.searchTimeout);
|
|
|
|
+ }
|
|
|
|
+ if (val) {
|
|
|
|
+ getNode(val, '疾病')
|
|
|
|
+ } else {
|
|
|
|
+ $(".tabNameList").hide()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handleClick() {
|
|
|
|
+ hideSlide();
|
|
|
|
+ const val = $("#searchInp").val().trim();
|
|
|
|
+ if (val) {
|
|
|
|
+ const clientHei = $(window).height();
|
|
|
|
+ const contentHei = clientHei - 80;
|
|
|
|
+ $(".tabNameList").hide();
|
|
|
|
+ getGraph(val, "疾病");
|
|
|
|
+ getTree(this.user_id, this.graph_id, val);
|
|
|
|
+ } else {
|
|
|
|
+ $(".tabNameListNoSearch").show();
|
|
|
|
+ }
|
|
|
|
+ },
|
|
showKnowledgeGraph(id) {
|
|
showKnowledgeGraph(id) {
|
|
// Object.assign(this.currentKnowledgeGraph, { ...data })
|
|
// Object.assign(this.currentKnowledgeGraph, { ...data })
|
|
// this.currentKnowledgeGraph.label = data.label
|
|
// this.currentKnowledgeGraph.label = data.label
|
|
// this.currentKnowledgeGraph.name = data.name
|
|
// this.currentKnowledgeGraph.name = data.name
|
|
- this.isShowKG = true
|
|
|
|
- this.initGraph(id)
|
|
|
|
|
|
+ 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,'艾滋病')
|
|
|
|
-
|
|
|
|
|
|
+ initGraph(id) {
|
|
|
|
+ this.graph_id = 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 () {
|
|
getUserGraphs: function () {
|
|
get(api.userGraphs, {
|
|
get(api.userGraphs, {
|
|
- user_id: localStorage.getItem("userId") ? JSON.parse(localStorage.getItem("userId")) : 1,
|
|
|
|
|
|
+ user_id: localStorage.getItem("userId")
|
|
|
|
+ ? JSON.parse(localStorage.getItem("userId"))
|
|
|
|
+ : 1,
|
|
pageNo: 1,
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
pageSize: 10,
|
|
- }).then(res => {
|
|
|
|
- const { code, records } = res.data
|
|
|
|
- if (code === 200) {
|
|
|
|
- this.listData = [...records]
|
|
|
|
- }
|
|
|
|
- }).catch(e => {
|
|
|
|
- console.log(e)
|
|
|
|
})
|
|
})
|
|
- }
|
|
|
|
|
|
+ .then((res) => {
|
|
|
|
+ const { code, records } = res.data;
|
|
|
|
+ if (code === 200) {
|
|
|
|
+ this.listData = [...records];
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ .catch((e) => {
|
|
|
|
+ console.log(e);
|
|
|
|
+ });
|
|
|
|
+ },
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
kgUrl() {
|
|
kgUrl() {
|
|
return `./knowledgeGraph.html?self=true&input=${this.currentKnowledgeGraph.name}&label=${this.currentKnowledgeGraph.label}`;
|
|
return `./knowledgeGraph.html?self=true&input=${this.currentKnowledgeGraph.name}&label=${this.currentKnowledgeGraph.label}`;
|
|
- }
|
|
|
|
- },
|
|
|
|
- watch: {
|
|
|
|
-
|
|
|
|
|
|
+ },
|
|
},
|
|
},
|
|
|
|
+ watch: {},
|
|
mounted() {
|
|
mounted() {
|
|
- this.getUserGraphs()
|
|
|
|
- },
|
|
|
|
- beforeDestroy() {
|
|
|
|
-
|
|
|
|
|
|
+ this.getUserGraphs();
|
|
},
|
|
},
|
|
-})
|
|
|
|
|
|
+ beforeDestroy() {},
|
|
|
|
+});
|