knowledgeMap/src/js/index.js

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('./graphMap.js');
/**右侧侧边栏折叠*/
let isRightCollapse = 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
let disease = getUrlArgObject("disease")
// 用来存储节点操作的数据
window.knowledgeMapData = {}//当前右键节点数据
window.graphMapUpdatedData = null //实时更新的关系图数据
window.graphMap = null //当前关系图实例对象
window.knowledgeMapSetting = {
    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)

// }

//关系图
getGraph(disease || input || "艾滋病", label || select_type);
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()

})
$('.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
}