|
|
@@ -1,5 +1,373 @@
|
|
|
+// const $ = require("jquery");
|
|
|
+require("babel-polyfill");
|
|
|
+const echarts = require("echarts");
|
|
|
+require("./../css/knowledgeMap.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, selectedZTreeNode,
|
|
|
+// setSelectName, hideHideTab, hideSlide, reDrawGraph } = require('./selfgraphMap.js');
|
|
|
+// /**右侧侧边栏折叠*/
|
|
|
+// let isRightCollapse = false
|
|
|
+// let self = getUrlArgObject("self") ? true : false;
|
|
|
+// let input = getUrlArgObject("input") || ""
|
|
|
+// let label = getUrlArgObject("label") || ""
|
|
|
+// let noTree = getUrlArgObject("no-tree") || false
|
|
|
+// let disease = getUrlArgObject("disease")
|
|
|
+// window.select_type = "疾病";
|
|
|
+// window.select_type_noSearch = "疾病";
|
|
|
+// window.refreshTree = true
|
|
|
+
|
|
|
+// // 用来存储节点操作的数据
|
|
|
+// window.knowledgeMapData = {}//当前右键节点数据
|
|
|
+// window.graphMapUpdatedData = null //实时更新的关系图数据
|
|
|
+// window.graphMap = null //当前关系图实例对象
|
|
|
+// window.knowledgeMapSetting = {
|
|
|
+// self: self,
|
|
|
+// operation: "view", //操作类型,修改
|
|
|
+// draggable: true, //是否能拖拽节点
|
|
|
+// zTree: !noTree,//是否有zTree
|
|
|
+// expandPropertyId: [],//存储展开属性的nodeId
|
|
|
+// expandRelationshipsId: [],//存储展开关系的nodeId
|
|
|
+// currentNodeId: -1,//存储右侧显示的节点的nodeId
|
|
|
+// legends: [],//图例
|
|
|
+// selected: {},//选中的数据
|
|
|
+// showLegend: true, //是否显示图例
|
|
|
+// showLegendNum: 0,//展示图例的数量
|
|
|
+// showLegendAll: false,//是否展示全部图例
|
|
|
+// records: [],//历史记录
|
|
|
+// }
|
|
|
+// if (noTree) {
|
|
|
+// $(".content .right").css('display', 'none')
|
|
|
+// $(".content .left").css("width", "100%")
|
|
|
+// } else {
|
|
|
+// $(".content .right").css('display', 'block')
|
|
|
+// }
|
|
|
+
|
|
|
+// 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);
|
|
|
+
|
|
|
+// })
|
|
|
+
|
|
|
+// // window.onload = function () {
|
|
|
+// // console.log("notTree", notTree)
|
|
|
+
|
|
|
+// // }
|
|
|
+// function getTree2(data) {
|
|
|
+// if (data.type == "疾病") {
|
|
|
+// getTree(1, 1, data.label);
|
|
|
+// $(".radioList").show()
|
|
|
+// } else if (data.type == "药品") {
|
|
|
+// getTree(0, 2, data.label);
|
|
|
+// $(".radioList").show()
|
|
|
+// } else if (data.type == "症状") {
|
|
|
+// $(".radioList").hide()
|
|
|
+// getTree(0, 3, data.label);
|
|
|
+
|
|
|
+// }
|
|
|
+// // else if (data.type == "手术和操作") {
|
|
|
+// // $(".radioList").hide()
|
|
|
+// // getTree(0, 4, data.label);
|
|
|
+// // }
|
|
|
+// else if (data.type == "实验室检查") {
|
|
|
+// $(".radioList").hide()
|
|
|
+// getTree(0, 5, data.label);
|
|
|
+
|
|
|
+// } else if (data.type == "辅助检查") {
|
|
|
+// $(".radioList").hide()
|
|
|
+// getTree(0, 6, data.label);
|
|
|
+
|
|
|
+// }
|
|
|
+// }
|
|
|
+// //关系图
|
|
|
+// getGraph(disease || input || "艾滋病", label || select_type);
|
|
|
+
|
|
|
+
|
|
|
+// // getTree(1, 1, disease || input || "艾滋病");
|
|
|
+// getTree2({
|
|
|
+// type: label || select_type,
|
|
|
+// label: disease || input || "艾滋病",
|
|
|
+// })
|
|
|
+// // $('#searchInp').val(disease || input || "艾滋病")
|
|
|
+
|
|
|
+
|
|
|
+// //选择类型
|
|
|
+// $('.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()
|
|
|
+// }
|
|
|
+// });
|
|
|
+
|
|
|
+// //切换条目
|
|
|
+// $('.radioItem').click(function (e) {
|
|
|
+// $('.radioItem').css('color', '#333333')
|
|
|
+// $(this).css("color", '#409EF1')
|
|
|
+// const dataId = $(".showTabList .tab.activeTab").attr("data-id")
|
|
|
+// const initDiag = dataId == "疾病" ? "艾滋病" : "过氧化氢溶液"
|
|
|
+// const type = +$(this).attr('data-type')
|
|
|
+// const subType = +$(this).attr('sub-type')
|
|
|
+// // $(this).children('img').attr('src')
|
|
|
+// $('.iconRadio').attr('src', '/images/radioUnSelect.png')
|
|
|
+// $(this).children('img').attr('src', '/images/radioSelect.png')
|
|
|
+// $('#searchInp').val(initDiag)
|
|
|
+// getTree(subType, type, 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()
|
|
|
+// $(".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()
|
|
|
+// }
|
|
|
+// })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// 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()
|
|
|
+// // }
|
|
|
+// })
|
|
|
+
|
|
|
+// // $(function () {
|
|
|
+// // $(".right-aside-collapse").on("click", function () {
|
|
|
+// // isRightCollapse = !isRightCollapse
|
|
|
+// // if (isRightCollapse) {
|
|
|
+// // $("#tabList > .toggleTab").hide()
|
|
|
+// // $(".right").animate({ "width": '150px' })
|
|
|
+// // } else {
|
|
|
+// // $(".right").animate({ "width": '394px' })
|
|
|
+// // }
|
|
|
+// // })
|
|
|
+// // })
|
|
|
+
|
|
|
+// let toggleTabHtml = ""
|
|
|
+// $(".right-aside-collapse").on("click", function () {
|
|
|
+// isRightCollapse = !isRightCollapse
|
|
|
+// if (isRightCollapse) {
|
|
|
+// $(this).attr('class', 'right-aside-collapsed')
|
|
|
+// toggleTabHtml = $("#tabList > .toggleTab").html()
|
|
|
+// $("#tabList > .toggleTab").empty()
|
|
|
+// // document.querySelector('.toggleTab').style.display = 'none';
|
|
|
+// $(".right").animate({ "width": '150px' }, function () {
|
|
|
+// })
|
|
|
+// const contentWidth = $(".content").width()
|
|
|
+// const leftWidth = (contentWidth - 150).toString() + 'px'
|
|
|
+// // console.log("contentWidth", leftWidth);
|
|
|
+// $(".content .left").animate({ 'width': leftWidth, }, function () {
|
|
|
+// window.graphMap.resize()
|
|
|
+// // console.log("graphMap", window.graphMap)
|
|
|
+// })
|
|
|
+
|
|
|
+// } 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()
|
|
|
+// // console.log("graphMap", window.graphMap)
|
|
|
+// })
|
|
|
+// }
|
|
|
+// })
|
|
|
+
|
|
|
+// 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 - 150).toString() + 'px'
|
|
|
+// $(".content .left").css('width', leftWidth)
|
|
|
+
|
|
|
+// } else {
|
|
|
+// leftWidth = (contentWidth - 461).toString() + 'px'
|
|
|
+// $(".content .left").css('width', leftWidth)
|
|
|
+
|
|
|
+// }
|
|
|
+// // console.log("leftWidth", leftWidth);
|
|
|
+// window.graphMap.resize()
|
|
|
+// }
|
|
|
+// })
|
|
|
+// $(".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()
|
|
|
+// })
|
|
|
+// })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// module.exports = {
|
|
|
+// getTab,
|
|
|
+// renderTab
|
|
|
+// }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
require("../css/selfKnowledgeGraph.less")
|
|
|
require("./../css/common.less");
|
|
|
+const { drawGraph, updateTree, getGraph, getTree, getNode, getTab, renderTab, setTabBottomHei, selectedZTreeNode,
|
|
|
+ setSelectName, hideHideTab, hideSlide, reDrawGraph } = require('./selfgraphMap.js');
|
|
|
// require("element-ui/lib/theme-chalk/index.css")
|
|
|
const { post, get, api, getUrlArgObject } = require('./api.js');
|
|
|
const $ = require('jquery')
|
|
|
@@ -9,6 +377,35 @@ const Vue = require("vue/dist/vue.esm.js").default;
|
|
|
const ElementUI = require("element-ui/lib/index.js");
|
|
|
// import UmyUi from 'umy-ui'
|
|
|
// Vue.use(UmyUi);
|
|
|
+/**右侧侧边栏折叠*/
|
|
|
+let isRightCollapse = false
|
|
|
+let self = getUrlArgObject("self") ? true : false;
|
|
|
+let input = getUrlArgObject("input") || ""
|
|
|
+let label = getUrlArgObject("label") || ""
|
|
|
+let noTree = getUrlArgObject("no-tree") || false
|
|
|
+window.select_type = "疾病";
|
|
|
+window.select_type_noSearch = "疾病";
|
|
|
+window.refreshTree = true
|
|
|
+
|
|
|
+// 用来存储节点操作的数据
|
|
|
+window.knowledgeMapData = {}//当前右键节点数据
|
|
|
+window.graphMapUpdatedData = null //实时更新的关系图数据
|
|
|
+window.graphMap = null //当前关系图实例对象
|
|
|
+window.knowledgeMapSetting = {
|
|
|
+ self: self,
|
|
|
+ operation: "view", //操作类型,修改
|
|
|
+ draggable: true, //是否能拖拽节点
|
|
|
+ zTree: !noTree,//是否有zTree
|
|
|
+ expandPropertyId: [],//存储展开属性的nodeId
|
|
|
+ expandRelationshipsId: [],//存储展开关系的nodeId
|
|
|
+ currentNodeId: -1,//存储右侧显示的节点的nodeId
|
|
|
+ legends: [],//图例
|
|
|
+ selected: {},//选中的数据
|
|
|
+ showLegend: true, //是否显示图例
|
|
|
+ showLegendNum: 0,//展示图例的数量
|
|
|
+ showLegendAll: false,//是否展示全部图例
|
|
|
+ records: [],//历史记录
|
|
|
+}
|
|
|
|
|
|
Vue.use(ElementUI)
|
|
|
|
|
|
@@ -23,37 +420,44 @@ const vm = new Vue({
|
|
|
name: "头痛"
|
|
|
},
|
|
|
listData: [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- title: "测试图1",
|
|
|
- label: '症状',
|
|
|
- name: "头痛"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- title: "测试图2",
|
|
|
- label: '症状',
|
|
|
- name: "头痛"
|
|
|
- }
|
|
|
+ // {
|
|
|
+ // id: 1,
|
|
|
+ // title: "测试图1",
|
|
|
+ // label: '症状',
|
|
|
+ // name: "头痛"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: 2,
|
|
|
+ // title: "测试图2",
|
|
|
+ // label: '症状',
|
|
|
+ // name: "头痛"
|
|
|
+ // }
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- handleView(data) {
|
|
|
+ showKnowledgeGraph(id) {
|
|
|
// Object.assign(this.currentKnowledgeGraph, { ...data })
|
|
|
- this.currentKnowledgeGraph.label = data.label
|
|
|
- this.currentKnowledgeGraph.name = data.name
|
|
|
+ // this.currentKnowledgeGraph.label = data.label
|
|
|
+ // this.currentKnowledgeGraph.name = data.name
|
|
|
this.isShowKG = true
|
|
|
+ this.initGraph(id)
|
|
|
+ },
|
|
|
+ initGraph(id){
|
|
|
+ let user_id = localStorage.getItem("userId") ? JSON.parse(localStorage.getItem("userId")) : 1
|
|
|
+ getGraph('艾滋病','疾病',id)
|
|
|
+ getTree(user_id, id,'艾滋病')
|
|
|
+
|
|
|
},
|
|
|
getUserGraphs: function () {
|
|
|
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,
|
|
|
pageSize: 10,
|
|
|
}).then(res => {
|
|
|
const { code, records } = res.data
|
|
|
if (code === 200) {
|
|
|
- this.listData = records
|
|
|
+ this.listData = [...records]
|
|
|
}
|
|
|
}).catch(e => {
|
|
|
console.log(e)
|
