knowledgeMap/src/js/index.js

const $ = require("jquery");
require("babel-polyfill");
const echarts = require("echarts");
require("./../css/knowledgeMap.less");
require("./../css/common.css");
// 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 { post, api } = require('./api.js');
const { mapData, zTreeData,mapData3,zTreeData3 } = require('./data.js');
const { drawGraph,updateTree,getGraph,getTree,getNode } = require('./graphMap.js');

window.select_type="疾病";
window.select_type_noSearch="疾病";
 const clientHei = $(window).height()
 const contentHei = clientHei - 80
 $(".left").css("height",contentHei+'px')
 $(".right").css("height",contentHei+'px')
 $(".tabBottom").css("height",contentHei-80-43-10+'px')
 $(".ztree").css("height",contentHei-80-43-60-20+'px')
 $("#main").css("height",contentHei-20-20+'px')
//关系图
getGraph("高血压3级",select_type);
getTree(1,1,"高血压3级");
$('#searchInp').val("高血压3级")

//选择类型
$('.select').click(function(e){
    e.stopPropagation();
    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()
    $(".selectedName").html(txt)
})

//搜索节点名
$("#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 = "高血压3级"
    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()
    const val = $('#searchInp').val()
    if(val){
        const clientHei = $(window).height()
        const contentHei = clientHei - 80
        $(".tabNameList").hide()
        if(select_type_noSearch != select_type){
            select_type = select_type_noSearch
            
            if(select_type == '疾病'){
                $(".radioList").show()
                $(".activeTab").removeClass("activeTab")
                $(".diagnose").addClass("activeTab")
                $(".ztree").css("height",contentHei-80-43-60-20+'px')
                // $('#searchInp').val("高血压3级")
                $('.iconRadio').attr('src','/images/radioUnSelect.png')
                $('.ICD10 img').attr('src','/images/radioSelect.png')
                getTree(1,1,val);
            }else if(select_type == '药品通用名'){
                $(".radioList").hide()
                $(".ztree").css("height",contentHei-80-43-20+'px')
                $(".activeTab").removeClass("activeTab")
                $(".drug").addClass("activeTab")
                getTree(0,2,val);
            }
        }else{
            updateTree(val)
        }
        getGraph(val,select_type)
       
    }else{
       $('.tabNameListNoSearch').show()
    }
})

//切换tab
$('.tabList .tab').click(function(){
    const id = $(this).attr('data-id')
    $(this).addClass("activeTab").siblings().removeClass('activeTab')
    if(id != select_type){
        if(id != "疾病"){
            $(".radioList").hide()
        }else{
            $(".radioList").show()
        }
        if(id == "疾病"){
            select_type_noSearch = id
            select_type = id
            $('.selectedName').html(select_type)
            $(".ztree").css("height",contentHei-80-43-60-20+'px')
            $('#searchInp').val("高血压3级")
            $('.iconRadio').attr('src','/images/radioUnSelect.png')
            $('.ICD10 img').attr('src','/images/radioSelect.png')
            getTree(1,1,"高血压3级");
            getGraph("高血压3级",select_type);
        
        }else if(id=="药品通用名"){
            select_type_noSearch = id
            select_type = id
            $('.selectedName').html("药品")
            $(".ztree").css("height",contentHei-80-43-20+'px')
            $('#searchInp').val("氟康唑注射液")
            getTree(0,2,"氟康唑注射液");
            getGraph("氟康唑注射液",select_type);
          
        }
        select_type = id
        // getTree(1,1,"");  //切换tab重新画菜单树
    }
})

//点击页面其他地方关闭下拉
$('html').click(function(){
    const selectListShow = $('.selectList').css('display')
    const tabNameListShow = $('.tabNameList').css('display')
    const tabNameListNoSearchShow = $('.tabNameListNoSearch').css('display')

    if(selectListShow == 'block'){
        $('.selectList').hide()
        $('.iconSlide').attr('src','./images/iconSlideDown.png')
    }
    if(tabNameListShow == 'block'){
        $('.tabNameList').hide()
    }
    if(tabNameListNoSearchShow == 'block'){
        $('.tabNameListNoSearch').hide()
    }
})