代码修改

patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/visEvent/detail.css

@@ -0,0 +1,496 @@
.sec-detail{
    margin: auto;
    width:980px;
    background-color: #F5F5F5;
    padding: 10px;
    font-size: 12px;
}
.sec-detail .top{
    width: 960px;
    height: 100px;
    background-color: #FFFFFF;
    border-radius: 5px;
}
.sec-detail .top .local{
    height: 40px;
    margin: 0px 10px 0px 10px;
    border-bottom: 1px solid #E6E6E6;
}
.sec-detail .top .local .ico{
    height: 24px;
    width: 18px;
    float: left;
    margin: 8px 10px 8px 10px;
    background: url("../imgs/location_icon.png") no-repeat scroll 0 0 transparent;
}
.sec-detail .top .local .content{
    float: left;
    line-height: 24px;
    height: 24px;
    margin: 8px 10px 8px 10px;
    font-size: 12px;
    color: #888;
}
.sec-detail .top .title{
    height: 60px;
}
.sec-detail .top .title .ico{
    float: left;
    height: 40px;
    width: 80px;
    line-height: 40px;
    margin: 10px 0px 10px 0px;
    padding-left: 20px;
    background: url("../imgs/return_btn.png") no-repeat scroll 0 0 transparent;
}
.sec-detail .top .title .content{
    float: left;
    line-height: 40px;
    height: 40px;
    margin: 10px 10px 10px 10px;
    font-size: 24px;
    font-weight: 700;
    color: #5b5b5b;
    text-align: center;
    width: 840px;
}
.sec-detail .cut-line{
    height: 10px;
}
.sec-detail .left{
    float: left;
    margin: 0;
    width: 0px;
    border-radius: 5px;
    /*height:300px;*/
    background-color: #FFFFFF;
    /*border: 1px solid #ccc;*/
}
.sec-detail .right{
    /*margin-left: 250px;*/
    width: 960px;
    border-radius: 5px;
    height:2000px;
    background-color: #FFFFFF;
}
.sec-detail .r-title{
    width: 940px;
    height: 60px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 22px;
    font-weight: 700;
    line-height: 50px;
    margin: auto;
}
.sec-detail .r-title-ico{
    border-bottom: 2px solid #23AFFF;
    width: 80px;
    /*position:relative;*/
    /*top: 8px;*/
    margin: 8px auto auto auto;
}
.r-content{
    width: 900px;
    margin: 20px auto auto auto;
}
.sec-detail div{
    /*margin: auto;*/
    /*font-size: 12px;*/
}
/** visEvent **/
.vis-mid{
    height: 220px;
    border-radius: 5px;
    background-color: #fff;
}
.vis-mid .m-left{
    float: left;
    width: 600px;
    border-radius: 5px;
}
.vis-mid .m-left .m-l-top{
    height: 120px;
}
.vis-mid .m-left .m-l-bot{
    height: 100px;
    border-right: 1px solid #E6E6E6;
}
.vis-mid .m-left .m-l-top .m-l-t-i{
    border-color: #E6E6E6;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    height: 120px;
    width: 200px;
    float: left;
}
.vis-mid .m-right{
    float: left;
    width: 360px;
    height: 220px;
}
.vis-barner{
    height: 100px;
}
.b-item-f{
    float: left;
    width: 360px;
    height: 80px;
    font-size: 14px;
    padding-top: 32px;
    font-weight: bold;
    cursor: pointer;
    background: url('../imgs/event_btn.png') no-repeat scroll 0 0 transparent;
}
.b-item-f-active{
    color: #fff;
    background: url('../imgs/event_btn_pre.png') no-repeat scroll 0 0 transparent;
}
.b-item-s{
    float: left;
    width: 150px;
    height: 80px;
    font-size: 14px;
    padding-top: 32px;
    font-weight: bold;
    cursor: pointer;
    background: url('../imgs/event01_btn.png') no-repeat scroll 0 0 transparent;
}
.b-item-s-active{
    color: #fff;
    background: url('../imgs/event01_btn_pre.png') no-repeat scroll 0 0 transparent;
}
.b-item-ar{
    border-style:solid;
    border-width: 10px;
    border-color:transparent transparent #23AFFF transparent;
    position: relative;
    top: 80px;
    left: 175px;
    width: 0px;
    height: 0px;
}
.vis-details{
    border-radius: 8px;
    border: 2px solid #23AFFF;
    /*height: 550px;*/
    background-color: #fff;
}
.medi-bar{
    font-size: 14px;
    font-weight: bold;
    width: 360px;
    margin: 10px auto 0px auto;
    height: 40px;
}
.drug-list-bar{
    float: left;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    height: 40px;
    width: 119px;
    padding-top: 9px;
    cursor: pointer;
    border-left: 1px solid;
    border-color: #E6E6E6;
}
.pres-list-bar{
    float: left;
    border: 1px solid;
    height: 40px;
    width:120px;
    padding-top: 9px;
    cursor: pointer;
    border-color: #E6E6E6;
}
.medi-list-bar{
    float: left;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    height: 40px;
    width:120px;
    padding-top: 9px;
    cursor: pointer;
    border-right: 1px solid;
    border-color: #E6E6E6;
}
.all-list-bar-active{
    background-color: #23AFFF;
    color: #fff;
    border-color: #23AFFF;
}
.medi-detl{
    border-top: 1px solid #E6E6E6;
    height: 480px;
    margin: 10px;
    /*border: ;*/
}
.medi-list{
    /*border: 1px solid #E6E6E6;*/
    width: 936px;
    height: 480px;
    position: absolute;
}
.medi-search{
    height: 40px;
    width: 636px;
    border-left: 1px solid #E6E6E6;
    border-right: 1px solid #E6E6E6;
    float: left;
    padding-left: 30px;
}
.ms-year, .ms-month{
    float: left;
    width: 180px;
    margin: 14px 5px 0px 25px;
}
.ms-left, .ms-right{
    float: left;
    width: 10px;
    height: 14px;
    display: block;
}
.ms-left{
    background: url('../imgs/left01_btn.png') no-repeat scroll 0 0 transparent;
    cursor: default;
}
.ms-right{
    background: url('../imgs/right01_btn.png') no-repeat scroll 0 0 transparent;
    cursor: default;
}
.ms-left-active{
    background: url('../imgs/left01_btn_pre.png') no-repeat scroll 0 0 transparent;
    cursor: pointer;
}
.ms-right-active{
    background: url('../imgs/right01_btn_pre.png') no-repeat scroll 0 0 transparent;
    cursor: pointer;
}
.ms-text{
    float: left;
    width: 160px;
    font-weight: bold;
}
.ms-today{
    border: 1px solid #23AFFF;
    border-radius: 4px;
    background-color: #23AFFF;
    width: 90px;
    height: 30px;
    margin-top: 5px;
    color: #fff;
    float: right;
    padding-top: 8px;
    margin-right: 10px;
    cursor: pointer;
}
.medi-calendar{
    height: 440px;
    width: 636px;
    float: left;
}
.medi-info-title{
    float: left;
    margin-left: 10px;
    height: 40px;
    width: 290px;
    border-left: 1px solid #E6E6E6;
    border-right: 1px solid #E6E6E6;
    font-weight: bold;
    font-size: 14px;
    padding-top: 12px;
}
.medi-info{
    float: left;
    margin-left: 10px;
    height: 440px;
    width: 290px;
    border: 1px solid #E6E6E6;
}
.ms-grid-row{
    width: 290px;
    height: 73px;
}
.ms-grid-row-seq{
    float: left;
    width: 24px;
    height: 24px;
    border: 1px solid #E6E6E6;
    padding: 6px;
    margin: 18px 10px 0px 10px;
    border-radius: 3px;
}
.ms-grid-row-title{
    float: left;
    width: 230px;
    margin-top: 23px;
    text-align: left;
}
.ms-grid-row-info{
    float: left;
    width: 230px;
    text-align: left;
    margin-top: 10px;
    border-bottom: 1px dashed #E6E6E6;
    padding-bottom: 5px;
}
.ms-grid-row-info-left{
    float: left;
}
.ms-grid-row-info-right{
    float: right;
}
/*.ms-page-bar{*/
    /*display: inline-block;*/
    /*padding-top:30px;*/
    /*border-radius:4px;*/
/*}*/
/*.ms-page{*/
    /*float: left;*/
/*}*/
/*.ms-page-num{*/
    /*float: left;*/
    /*display: inline;*/
    /*width: 24px;*/
    /*height: 24px;*/
    /*padding-top: 5px;*/
    /*color: #000;*/
    /*font-weight: bold;*/
    /*margin: 0px 5px 5px 5px;*/
/*}*/
/*.ms-page-num-active{*/
    /*border: 1px solid #E6E6E6;*/
    /*color: #787878;*/
/*}*/
/*.ms-page-pre{*/
    /*margin-top: 5px;*/
    /*margin-right: 10px;*/
/*}*/
/*.ms-page-next{*/
    /*margin-top: 5px;*/
    /*margin-left: 10px;*/
/*}*/
.ms-no-info{
    background: url('../imgs/prompt_icon.png') no-repeat scroll 6px 0 transparent;
    width: 116px;
    margin: 110px auto;
    padding-top: 130px;
    padding-left: 3px;
    font-size: 15px;
    font-weight: bold;
    color: #787878;
}
.c-h50{
     height: 50px;
 }
.c-h70{
    height: 70px;
}
.c-h110{
    height: 110px;
}
.c-h36{
    height: 36px;
}
.c-w36{
    width: 36px;
}
.c-w70{
    width: 70px;
}
.c-bi-ill{
    background: url('../imgs/ill_icon.png') no-repeat scroll 0 0 transparent;
}
.c-bi-hos{
    background: url('../imgs/hospital_icon.png') no-repeat scroll 0 0 transparent;
}
.c-bi-doc{
    background: url('../imgs/doctor_icon.png') no-repeat scroll 0 0 transparent;
}
.c-bi-med{
    background: url('../imgs/medicine_icon.png') no-repeat scroll 0 0 transparent;
}
.f-fb{
    font-weight: bold;
}
.f-lh36{
    line-height: 36px;
}
.f-lh26{
    line-height: 26px;
}
.f-tl{
    text-align: left;
}
.c-pt10{
    padding-top: 10px;
}
.c-pt30{
    padding-top: 30px;
}
.c-mr5{
    margin-right: 5px;
}
.c-ml50{
    margin-left: 50px;
}
.c-ml10{
    margin-left: 10px;
}
.c-mat8{
    margin: auto;
    margin-top: 8px;
}
.c-ml10r10{
    margin: 0px 10px 0px 10px;
}
.c-fl{
    float: left;
}

patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/visEvent/detail01.css

@@ -0,0 +1,46 @@
.evt-1{
    height: 60px;
    border-bottom: 1px solid #e6e6e6;
    margin: 0px 10px;
    padding-top: 15px;
    text-align: right;
}
.evt-1-c{
    /*width: 916px;*/
    margin: 30px 10px 0px 10px;
}
.evt_1_large_prev{
    display: block;
    position: absolute;
    margin-top: 200px;
    margin-left: 16px;
    width: 20px;
    height: 36px;
    background: url("../imgs/left02_btn_pre.png") no-repeat scroll 0 0 transparent;
}
.evt_1_large_prev.disabled{
    background: url("../imgs/left02_btn.png") no-repeat scroll 0 0 transparent;
}
.evt_1_large_next{
    display: block;
    position: absolute;
    margin-top: 200px;
    margin-left: 900px;
    width: 20px;
    height: 36px;
    background: url("../imgs/right02_btn_pre.png") no-repeat scroll 0 0 transparent;
}
.evt_1_large_next.disabled{
    background: url("../imgs/right02_btn.png") no-repeat scroll 0 0 transparent;
}
.calendar_picker{
    width: 160px;
    padding-left: 32px;
    padding-right: 3px;
    height: 30px;
    border: 1px solid #e6e6e6;
    background: url("../imgs/calendar_icon_1.png") no-repeat scroll 0 0 transparent;
}

patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/visEvent/detail01.js

@@ -0,0 +1,24 @@
$(function (win) {
    $.getJSON($.Context.STATIC_PATH + '/browser/data/portal-data.json', function (data) {
        $('#ev-detail').timeline({
            horizontal: true,
            data:data.timeLine,
            prevPage:$('.evt_1_large_prev'),
            nextPage:$('.evt_1_large_next')
        } );
    });
    
    $('#calendar_picker').keyup(function (e) {
        if(e.keyCode==13){
            var val = $(this).val();
            var timeline = $.TimeLine.getInstance(document.getElementById('ev-detail'));
            if(timeline) {
                var $li = $('#ev-detail').find('li[data-index='+val+']');
                timeline.locate($li, true);
            }
        }
    })
})

patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/visEvent/detail01.jsp

@@ -0,0 +1,20 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8" %>
<%@include file="/WEB-INF/ehr/commons/jsp/commonInclude.jsp" %>
<body>
<div class="evt-1">
    <input id="calendar_picker" class="calendar_picker">
</div>
<div class="evt-1-c">
    <div style="
        border-bottom: 1px solid #23AFFF;
        position: absolute;
        width: 936px;
        margin-top: 35px;
    "></div>
    <a href="javascript:void(0)" class="evt_1_large_prev">&nbsp;</a>
    <a href="javascript:void(0)" class="evt_1_large_next">&nbsp;</a>
    <div id="ev-detail" class="time-line-horizontal" style="width: 770px; margin: auto"></div>
</div>
</body>

patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/visEvent/detail02.css

@@ -0,0 +1,35 @@
.mb_bar_detail_2{
    display: none;
    height: 480px;
    margin: 10px;
    padding-top: 30px;
    border-top: 1px solid #E6E6E6;
}
.mb_large_prev{
    display: block;
    position: absolute;
    margin-top: 200px;
    margin-left: 16px;
    width: 20px;
    height: 36px;
    background: url("../imgs/left02_btn_pre.png") no-repeat scroll 0 0 transparent;
}
.mb_large_prev.disabled{
    background: url("../imgs/left02_btn.png") no-repeat scroll 0 0 transparent;
}
.mb_large_next{
    display: block;
    position: absolute;
    margin-top: 200px;
    margin-left: 900px;
    width: 20px;
    height: 36px;
    background: url("../imgs/right02_btn_pre.png") no-repeat scroll 0 0 transparent;
}
.mb_large_next.disabled{
    background: url("../imgs/right02_btn.png") no-repeat scroll 0 0 transparent;
}

patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/visEvent/detail02.js

@@ -0,0 +1,182 @@
$(function (win) {
    var data = ['2015-11-30'];
    var calendarNode = $('#medi_calendar');
    var ms_tx_year = $('#ms_tx_year');
    var ms_tx_month = $('#ms_tx_month');
    $.fullCalendar.DayGrid.prototype.renderNumberCellHtml = function(date) {
        var classes;
        if (!this.view.dayNumbersVisible) { // if there are week numbers but not day numbers
            return '<td/>'; //  will create an empty space above events :(
        }
        classes = this.getDayClasses(date);
        classes.unshift('fc-day-number');
        return '' +
            '<td  class="' + classes.join(' ') + '" data-date="' + date.format() + '">' +
            date.date() +
            '</td>';
    }
    $.fullCalendar.DayGrid.prototype.renderBgCellHtml = function(date) {
        var isShowBg = false;
        for(var i=0;i<data.length;i++){
            if(data[i]==date.format()){
                isShowBg=true;
                break;
            }
        }
        var d = data;
        var view = this.view;
        var classes = this.getDayClasses(date);
        classes.unshift('fc-day', view.widgetContentClass);
        var cls = classes.join(' ');
        var bg = '<div class="fc-fl-bg-normal" style="height: '+($.Util.isIE()? '61px' : '100%')+' ; background-color: #fff; border: 2px solid; border-color: '+(cls.indexOf('fc-today')==-1?'#fff' : '#FF6400')+'">';
        bg += isShowBg ?
            '<div style="width:32px;height:32px;margin-left: 28px; margin-top: 10px; ' +
                'background: url(\''+ $.Context.STATIC_PATH+'/browser/imgs/medicine01_icon.png\') no-repeat scroll 0 0 transparent;" ></div></div>'
            : '&nbsp;</div>';
        return '<td class="' + cls + ' fc-fl-bg"' +
            ' data-date="' + date.format('YYYY-MM-DD') + '"' +
            '>'+bg+'</td>';
    }
    function load(id, hid){
        $('#b_detail_'+hid).hide();
        $('#b_detail_'+id).show();
        if(id==2){
            $('#medi_calendar').fullCalendar('render');
        }
    }
    function bindCalendarEvent(){
        $.each($('.fc-day-grid').find('.fc-day-number'), function (i, el) {
            $(el).click(function () {
                var date = $(this).attr('data-date');
                $.each($('.fc-day-grid').find('.fc-state-select'), function (i, el) {
                    $(el).toggleClass('fc-state-select', false);
                });
                $(this).toggleClass('fc-state-select', true);
                $.each($('.fc-day-grid').find('.fc-fl-bg-active'), function (i, el) {
                    $(el).css('background-color', '#FFF');
                    $(el).removeClass('.fc-fl-bg-active');
                });
                var el = $('.fc-day-grid').find('.fc-fl-bg[data-date="'+date+'"] > div');
                el.css('background-color', '#FF6400');
                el.addClass('fc-fl-bg-active');
                $('#medi_info_title').html(date+'&nbsp;用药信息');
            });
        });
        
    }
    function setTimeInfo(isToday){
        var date = calendarNode.fullCalendar('getDate');
        ms_tx_year.html(date.year()+'年');
        ms_tx_month.html( (date.month()+1)+'月');
        if(isToday){
            var today = date.format('YYYY-MM-DD');
            var el = $('.fc-day-grid').find('.fc-day-number[data-date="'+today+'"]');
            $(el).click();
        }
    }
    function bindEvent(){
        //用药情况的事件绑定
        $.each($('.medi-bar').find('div[id^="mb_bar_item"]'), function (i, el) {
            $(el).click(function () {
                var id = parseInt($(this).attr('id').replace('mb_bar_item_', ''));
                var hid = 0;
                $.each($('.medi-bar').find('.all-list-bar-active'), function (i, el) {
                    hid = parseInt($(el).attr('id').replace('mb_bar_item_', ''));
                    $(el).removeClass('all-list-bar-active');
                })
                $(el).addClass('all-list-bar-active');
                $('#mb_bar_detail_'+hid).hide();
                $('#mb_bar_detail_'+id).show();
                if(id==1){
                    $('#mb_table').bootstrapTable({
                        url : $.Context.STATIC_PATH+ '/browser/data/data1.json',
                        pagination : true,
                        height : 440,
                        columns: [
                            {title:'序号', field:'id'},
                            {title:'药品名称', field:'name'},
                            {title:'单位', field:'price'},
                            {title:'规格', field:'aa'},
                            {title:'近3个月服用量', field:'bb'},
                            {title:'近6个月服用量', field:'src'},
                            {title:'上一次服用时间', field:'src'}
                        ]
                    });
                }
                else if(id==2){
                    $.getJSON($.Context.STATIC_PATH + '/browser/data/portal-data.json', function (data) {
                        $('#formulation_records').timeline({
                            horizontal: true,
                            data:data.timeLine,
                            prevPage:$('.mb_large_prev'),
                            nextPage:$('.mb_large_next')
                            } );
                    });
                }
            })
        })
        $('#ms_year_left').click(function () {
            calendarNode.fullCalendar('prevYear');
            setTimeInfo();
            bindCalendarEvent();
        });
        $('#ms_year_right').click(function () {
            calendarNode.fullCalendar('nextYear');
            setTimeInfo();
            bindCalendarEvent();
        })
        $('#ms_month_right').click(function () {
            calendarNode.fullCalendar('next');
            setTimeInfo();
            bindCalendarEvent();
        })
        $('#ms_month_left').click(function () {
            calendarNode.fullCalendar('prev');
            setTimeInfo();
            bindCalendarEvent();
        })
        $('#ms_today').click(function () {
            calendarNode.fullCalendar('today');
            bindCalendarEvent();
            setTimeInfo(true);
        })
    }
    bindEvent();
    calendarNode.fullCalendar({
        dayNamesShort:['日', '一', '二', '三', '四', '五', '六'],
        contentHeight:440,
        header: false,
        editable: true,
        eventLimit: true,
        firstDay: 1
    });
    bindCalendarEvent();
    setTimeInfo(true);
    $('#ms_page_bar').msPagination({
        total: 51,
        clickFunc: function (opts) {
//                alert(opts.curPage);
        }
    });
})

patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/visEvent/detail02.jsp

@@ -0,0 +1,124 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8" %>
<%@include file="/WEB-INF/ehr/commons/jsp/commonInclude.jsp" %>
<div style="text-align: center">
    <!-- 用药情况 -->
    <%--<div id="b_detail_2" class="vis-details" style="display: none;">--%>
                <div class="medi-bar">
                    <div id="mb_bar_item_1" class="drug-list-bar" >药品清单</div>
                    <div id="mb_bar_item_2" class="pres-list-bar" >处方记录</div>
                    <div id="mb_bar_item_3" class="medi-list-bar all-list-bar-active" >用药记录</div>
                </div>
                <!-- 药品清单 -->
                <div id="mb_bar_detail_1" style="display: none; height: 480px; margin: 10px" class="">
                    <table id="mb_table">
                        <%--<thead>--%>
                        <%--<tr>--%>
                            <%--<th data-field="id" data-formatter="idFormatter">ID</th>--%>
                            <%--<th data-field="name">Item Name</th>--%>
                            <%--<th data-field="price">Item Price</th>--%>
                        <%--</tr>--%>
                        <%--</thead>--%>
                    </table>
                </div>
                <!-- 处方记录 -->
                <div id="mb_bar_detail_2" style="" class="mb_bar_detail_2">
                    <div style="
                        border-bottom: 1px solid #23AFFF;
                        position: absolute;
                        width: 936px;
                        margin-top: 35px;
                    "></div>
                    <a href="javascript:void(0)" class="mb_large_prev">&nbsp;</a>
                    <a href="javascript:void(0)" class="mb_large_next">&nbsp;</a>
                    <div id="formulation_records" class="time-line-horizontal" style="width: 770px; margin: auto"></div>
                </div>
                <!-- 用药记录 -->
                <div id="mb_bar_detail_3" style="" class="medi-detl">
                    <div id="medi_list" class="medi-list">
                        <div class="medi-search" >
                            <div class="ms-year">
                                <div id="ms_year_left" class="ms-left ms-left-active"></div>
                                <div id="ms_tx_year" class="ms-text">2015年</div>
                                <div id="ms_year_right" class="ms-right ms-right-active"></div>
                            </div>
                            <div class="ms-month">
                                <div id="ms_month_left" class="ms-left ms-left-active"></div>
                                <div id="ms_tx_month" class="ms-text">11月</div>
                                <div id="ms_month_right" class="ms-right ms-right-active"></div>
                            </div>
                            <div id="ms_today" class="ms-today">返回今日</div>
                        </div>
                        <div id="medi_info_title" class="medi-info-title" >2015-11-06&nbsp;用药信息</div>
                        <div id="medi_calendar" class="medi-calendar"></div>
                        <div id="medi_info" class="medi-info">
                            <div  class="ms-grid">
                                <div class="ms-grid-row">
                                    <div class="ms-grid-row-seq">1</div>
                                    <div class="ms-grid-row-title">胺碘酮</div>
                                    <div class="ms-grid-row-info">
                                        <div class="ms-grid-row-info-left">2粒</div>
                                        <div class="ms-grid-row-info-right">16:35</div>
                                    </div>
                                </div>
                                <div class="ms-grid-row">
                                    <div class="ms-grid-row-seq">2</div>
                                    <div class="ms-grid-row-title">胺碘酮</div>
                                    <div class="ms-grid-row-info">
                                        <div class="ms-grid-row-info-left">2粒</div>
                                        <div class="ms-grid-row-info-right">16:35</div>
                                    </div>
                                </div>
                                <div class="ms-grid-row">
                                    <div class="ms-grid-row-seq">3</div>
                                    <div class="ms-grid-row-title">胺碘酮</div>
                                    <div class="ms-grid-row-info">
                                        <div class="ms-grid-row-info-left">2粒</div>
                                        <div class="ms-grid-row-info-right">16:35</div>
                                    </div>
                                </div>
                                <div class="ms-grid-row">
                                    <div class="ms-grid-row-seq">4</div>
                                    <div class="ms-grid-row-title">胺碘酮</div>
                                    <div class="ms-grid-row-info">
                                        <div class="ms-grid-row-info-left">2粒</div>
                                        <div class="ms-grid-row-info-right">16:35</div>
                                    </div>
                                </div>
                                <div class="ms-grid-row">
                                    <div class="ms-grid-row-seq">5</div>
                                    <div class="ms-grid-row-title">胺碘酮</div>
                                    <div class="ms-grid-row-info">
                                        <div class="ms-grid-row-info-left">2粒</div>
                                        <div class="ms-grid-row-info-right">16:35</div>
                                    </div>
                                </div>
                            </div>
                            <div id="ms_page_bar" style="margin-top: 30px">
                                <%--<div  class="ms-page-bar">--%>
                                    <%--<a href="javascript:void(0)" class="ms-left ms-page-pre ms-left-active">&nbsp;</a>--%>
                                    <%--<a href="javascript:void(0)" class="ms-page-num ms-page-num-active">1</a>--%>
                                    <%--<a href="javascript:void(0)" class="ms-page-num ">2</a>--%>
                                    <%--<a href="javascript:void(0)" class="ms-page-num ">3</a>--%>
                                    <%--<a href="javascript:void(0)" class="ms-page-num ">4</a>--%>
                                    <%--<a href="javascript:void(0)" class="ms-page-num ">5</a>--%>
                                    <%--<a href="javascript:void(0)" class="ms-right ms-page-next ms-right-active">&nbsp;</a>--%>
                                <%--</div>--%>
                            </div>
                            <div style="display: none" class="ms-no-info">
                                今日无用药信息
                            </div>
                        </div>
                    </div>
                </div>
            </div>

patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/visEvent/detail03.js

@@ -0,0 +1,24 @@
$(function (win) {
    $.getJSON($.Context.STATIC_PATH + '/browser/data/portal-data.json', function (data) {
        $('#evt-history').timeline({
            horizontal: true,
            data:data.timeLine,
            prevPage:$('#evt_3_large_prev'),
            nextPage:$('#evt_3_large_next')
        } );
    });
    
    $('#calendar_picker_his').keyup(function (e) {
        if(e.keyCode==13){
            var val = $(this).val();
            var timeline = $.TimeLine.getInstance(document.getElementById('evt-history'));
            if(timeline) {
                var $li = $('#evt-history').find('li[data-index='+val+']');
                timeline.locate($li, true);
            }
        }
    })
})

patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/visEvent/detail03.jsp

@@ -0,0 +1,19 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8" %>
<%@include file="/WEB-INF/ehr/commons/jsp/commonInclude.jsp" %>
<body>
<div class="evt-1">
    <input id="calendar_picker_his" class="calendar_picker">
</div>
<div class="evt-1-c">
    <div style="
        border-bottom: 1px solid #23AFFF;
        position: absolute;
        width: 936px;
        margin-top: 35px;
    "></div>
    <a href="javascript:void(0)" id="evt_3_large_prev" class="evt_1_large_prev">&nbsp;</a>
    <a href="javascript:void(0)" id="evt_3_large_next" class="evt_1_large_next">&nbsp;</a>
    <div id="evt-history" class="time-line-horizontal" style="width: 770px; margin: auto"></div>
</div>
</body>

patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/visEvent/detail04.js

@@ -0,0 +1,179 @@
$(function (win) {
    var msTypeBar = {
        $msLeft: $('#ms_left'),
        $msRight: $('#ms_right'),
        $msTypeLs: $('#ms_typeLs'),
        $ul: undefined,
        totalPage: 0,
        curPage: 1,
        pageSize: 6,
        selectItem: undefined,
        data: [
            '身高体重', '血压脉搏', '血糖', '血氧', '脂肪', '骨密度', '骨密度', '骨密度'
        ],
        init: function () {
            var data = this.data;
            this.$ul = $('<ul>');
            this.createLi();
            this.$ul.appendTo(this.$msTypeLs);
            this.setCurInfo();
            this.bindEvent();
            this.$msTypeLs.find('a:first').click();
        },
        createLi: function () {
            var m = this;
            m.$ul.empty();
            var s = m.pageSize*(m.curPage-1);
            for(var i= 0; i< m.pageSize && s+i< m.data.length; i++){
                m.$ul.append('<li><a id="ms_type_'+(s+i)+'" href="javascript:void (0)">'+ m.data[i+s]+'</a></li>');
            }
        },
        setCurInfo: function () {
            this.totalPage = parseInt(this.data.length/this.pageSize) + (this.data.length%this.pageSize==0? 0 : 1);
        },
        bindEvent: function (bingdPageNum) {
            var m = this;
            $.each(m.$msTypeLs.find("a"), function (i, el) {
                $(el).click(function () {
                    var id = parseInt($(this).attr('id').replace('ms_type_', ''));
                    if(id==m.selectItem){
                        $(this).toggleClass('active', true);
                        return;
                    }
                    m.selectItem = id;
                    $.each(m.$msTypeLs.find("a[class='active']"), function (i, el) {
                        $(el).removeClass('active');
                    })
                    $(this).addClass('active');
                })
            })
            if(bingdPageNum)
                return;
            m.$msLeft.click(function () {
                if(m.curPage==1)
                    return;
                m.curPage--;
                if(m.curPage==1)
                    $(this).toggleClass('ms-left-active', false);
                m.$msRight.toggleClass('ms-right-active', true);
                m.createLi();
                m.bindEvent(true);
                m.$msTypeLs.find('#ms_type_'+ m.selectItem).click();
            })
            m.$msRight.click(function () {
                if(m.curPage== m.totalPage)
                    return;
                m.curPage++;
                if(m.curPage== m.totalPage)
                    $(this).toggleClass('ms-right-active', false);
                m.$msLeft.toggleClass('ms-left-active', true);
                m.createLi();
                m.bindEvent(true);
                m.$msTypeLs.find('#ms_type_'+ m.selectItem).click();
            })
        }
    }
    msTypeBar.init();
    $('#bt_table').bootstrapTable({
        url : $.Context.STATIC_PATH + '/browser/data/data1.json',
        pagination : true,
        height : 320,
        pageSize: 4,
        columns: [
            {title:'序号', field:'id'},
            {title:'测量时间', field:'name'},
            {title:'身高(cm)', field:'price'},
            {title:'体重(kg)', field:'aa'},
            {title:'健康指数', field:'bb'},
            {title:'数据来源', field:'src'}
        ]
    });
    function initLineChart(ec) {
        var myChart = echarts.init(document.getElementById('charts'));
        var option = {
            tooltip : {
                trigger: 'item',
                formatter : function (params) {
                    var data = "<div style='text-align: left; '>" +
                        "数值：" +params.value[1]+ "<br>" +
                        "单位：<br>" +
                        "数据来源："+ (params.value[3]==0?"手动录入":"导入") +"</div>";
                    return data;
                }
            },
            dataZoom: {
                show: true,
                start : 90
            },
            grid: {
                y2: 80
            },
            xAxis : [
                {
                    type : 'time',
                    splitNumber:10
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name: 'series1',
                    type: 'line',
                    showAllSymbol: true,
                    itemStyle: {
                        normal: {
                            lineStyle : {
                                color : '#787878',
                                width: 1
                            },
                            color: function(params) {
                                var colorList = [
                                    '#23AFFF','#FF6400'
                                ];
                                var data = params.series.data[params.dataIndex];
                                if(data)
                                    return colorList[data[3]]
                                return colorList[0];
                            }
                        }
                    },
                    symbolSize: function (value){
                        return  4;
                    },
                    markLine: {
                        data: [
                            [{name: '标线1起点', value: 20, x: 80, y: 200},
                                {name: '标线1终点',value: 20, x: 720, y: 200}]
                        ]
                    },
                    data: (function () {
                        var d = [];
                        var len = 0;
                        var now = new Date();
                        var value;
                        while (len++ < 200) {
                            d.push([
                                new Date(2014, 9, 1, 0, len * 10000),
                                (Math.random()*30).toFixed(2) - 0,
                                (Math.random()*100).toFixed(2) - 0,
                                parseInt(Math.random()*2)
                            ]);
                        }
                        return d;
                    })()
                }
            ]
        };
        myChart.setOption(option);
    }
    initLineChart();
})

patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/visEvent/detail04.jsp

@@ -0,0 +1,42 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8" %>
<%@include file="/WEB-INF/ehr/commons/jsp/commonInclude.jsp" %>
    <!-- 体征指标动态 -->
    <%--<div id="b_detail_4" class="vis-details" style="height: 870px">--%>
    <div class="bodysta-type-bar">
        <a href="javascript:void(0)" id="ms_left" class="ms-left bodysta-type-left">&nbsp;</a>
        <div id="ms_typeLs" style="float: left; overflow: hidden; height: 56px; ">
            <%--<ul>--%>
                <%--<li><a id="ms_type_1" class="active" href="javascript:void (0)">身高体重</a></li>--%>
                <%--<li><a id="ms_type_2" href="javascript:void (0)">血压脉搏</a></li>--%>
                <%--<li><a id="ms_type_3" href="javascript:void (0)">血糖</a></li>--%>
                <%--<li><a id="ms_type_4" href="javascript:void (0)">血氧</a></li>--%>
                <%--<li><a id="ms_type_5" href="javascript:void (0)">脂肪</a></li>--%>
                <%--<li><a id="ms_type_6" href="javascript:void (0)">骨密度</a></li>--%>
            <%--</ul>--%>
        </div>
        <a href="javascript:void(0)" id="ms_right" class="ms-right ms-right-active bodysta-type-right">&nbsp;</a>
    </div>
    <div class="bodysta-type-content">
        <div id="charts" class="bodysta-type-charts"></div>
        <div class="bodysta-type-info">
            <div class="bodysta-type-info-title">指标说明</div>
            <div style="height: 200px" class="">&nbsp;</div>
            <div class="bodysta-type-info-title">指标分析</div>
            <div class="">&nbsp;</div>
        </div>
    </div>
    <div class="bodysta-type-records">
        <div class="bodysta-type-r-bar">
            <div class="bodysta-type-r-title">历史记录</div>
            <div class="bodysta-type-r-search"></div>
        </div>
        <div class="bodysta-type-r-grid">
            <table id="bt_table"></table>
        </div>
    </div>
<%--</div>--%>

patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/visEvent/index.css

@@ -0,0 +1,598 @@
.sec-detail{
    margin: auto;
    width:980px;
    background-color: #F5F5F5;
    padding: 10px;
    font-size: 12px;
}
.sec-detail .top{
    width: 960px;
    height: 100px;
    background-color: #FFFFFF;
    border-radius: 5px;
}
.sec-detail .top .local{
    height: 40px;
    margin: 0px 10px 0px 10px;
    border-bottom: 1px solid #E6E6E6;
}
.sec-detail .top .local .ico{
    height: 24px;
    width: 18px;
    float: left;
    margin: 8px 10px 8px 10px;
    background: url("../imgs/location_icon.png") no-repeat scroll 0 0 transparent;
}
.sec-detail .top .local .content{
    float: left;
    line-height: 24px;
    height: 24px;
    margin: 8px 10px 8px 10px;
    font-size: 12px;
    color: #888;
}
.sec-detail .top .title{
    height: 60px;
}
.sec-detail .top .title .ico{
    float: left;
    height: 40px;
    width: 80px;
    line-height: 40px;
    margin: 10px 0px 10px 0px;
    padding-left: 20px;
    background: url("../imgs/return_btn.png") no-repeat scroll 0 0 transparent;
}
.sec-detail .top .title .content{
    float: left;
    line-height: 40px;
    height: 40px;
    margin: 10px 10px 10px 10px;
    font-size: 24px;
    font-weight: 700;
    color: #5b5b5b;
    text-align: center;
    width: 840px;
}
.sec-detail .cut-line{
    height: 10px;
}
.sec-detail .left{
    float: left;
    margin: 0;
    width: 0px;
    border-radius: 5px;
    /*height:300px;*/
    background-color: #FFFFFF;
    /*border: 1px solid #ccc;*/
}
.sec-detail .right{
    /*margin-left: 250px;*/
    width: 960px;
    border-radius: 5px;
    height:2000px;
    background-color: #FFFFFF;
}
.sec-detail .r-title{
    width: 940px;
    height: 60px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 22px;
    font-weight: 700;
    line-height: 50px;
    margin: auto;
}
.sec-detail .r-title-ico{
    border-bottom: 2px solid #23AFFF;
    width: 80px;
    /*position:relative;*/
    /*top: 8px;*/
    margin: 8px auto auto auto;
}
.r-content{
    width: 900px;
    margin: 20px auto auto auto;
}
.sec-detail div{
    /*margin: auto;*/
    /*font-size: 12px;*/
}
/** visEvent **/
.vis-mid{
    height: 220px;
    border-radius: 5px;
    background-color: #fff;
}
.vis-mid .m-left{
    float: left;
    width: 600px;
    border-radius: 5px;
}
.vis-mid .m-left .m-l-top{
    height: 120px;
}
.vis-mid .m-left .m-l-bot{
    height: 100px;
    border-right: 1px solid #E6E6E6;
}
.vis-mid .m-left .m-l-top .m-l-t-i{
    border-color: #E6E6E6;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    height: 120px;
    width: 200px;
    float: left;
}
.vis-mid .m-right{
    float: left;
    width: 360px;
    height: 220px;
}
.vis-barner{
    height: 100px;
}
.b-item-f{
    float: left;
    width: 360px;
    height: 80px;
    font-size: 14px;
    padding-top: 32px;
    font-weight: bold;
    cursor: pointer;
    background: url('../imgs/event_btn.png') no-repeat scroll 0 0 transparent;
}
.b-item-f-active{
    color: #fff;
    background: url('../imgs/event_btn_pre.png') no-repeat scroll 0 0 transparent;
}
.b-item-s{
    float: left;
    width: 150px;
    height: 80px;
    font-size: 14px;
    padding-top: 32px;
    font-weight: bold;
    cursor: pointer;
    background: url('../imgs/event01_btn.png') no-repeat scroll 0 0 transparent;
}
.b-item-s-active{
    color: #fff;
    background: url('../imgs/event01_btn_pre.png') no-repeat scroll 0 0 transparent;
}
.b-item-ar{
    border-style:solid;
    border-width: 10px;
    border-color:transparent transparent #23AFFF transparent;
    position: relative;
    top: 80px;
    left: 175px;
    width: 0px;
    height: 0px;
}
.vis-details{
    border-radius: 8px;
    border: 2px solid #23AFFF;
    /*height: 550px;*/
    background-color: #fff;
}
.medi-bar{
    font-size: 14px;
    font-weight: bold;
    width: 360px;
    margin: 10px auto 0px auto;
    height: 40px;
}
.drug-list-bar{
    float: left;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    height: 40px;
    width: 119px;
    padding-top: 9px;
    cursor: pointer;
    border-left: 1px solid;
    border-color: #E6E6E6;
}
.pres-list-bar{
    float: left;
    border: 1px solid;
    height: 40px;
    width:120px;
    padding-top: 9px;
    cursor: pointer;
    border-color: #E6E6E6;
}
.medi-list-bar{
    float: left;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    height: 40px;
    width:120px;
    padding-top: 9px;
    cursor: pointer;
    border-right: 1px solid;
    border-color: #E6E6E6;
}
.all-list-bar-active{
    background-color: #23AFFF;
    color: #fff;
    border-color: #23AFFF;
}
.medi-detl{
    border-top: 1px solid #E6E6E6;
    height: 480px;
    margin: 10px;
    /*border: ;*/
}
.medi-list{
    /*border: 1px solid #E6E6E6;*/
    width: 936px;
    height: 480px;
    position: absolute;
}
.medi-search{
    height: 40px;
    width: 636px;
    border-left: 1px solid #E6E6E6;
    border-right: 1px solid #E6E6E6;
    float: left;
    padding-left: 30px;
}
.ms-year, .ms-month{
    float: left;
    width: 180px;
    margin: 14px 5px 0px 25px;
}
.ms-left, .ms-right{
    float: left;
    width: 10px;
    height: 14px;
    display: block;
}
.ms-left{
    background: url('../imgs/left01_btn.png') no-repeat scroll 0 0 transparent;
    cursor: default;
}
.ms-right{
    background: url('../imgs/right01_btn.png') no-repeat scroll 0 0 transparent;
    cursor: default;
}
.ms-left-active{
    background: url('../imgs/left01_btn_pre.png') no-repeat scroll 0 0 transparent;
    cursor: pointer;
}
.ms-right-active{
    background: url('../imgs/right01_btn_pre.png') no-repeat scroll 0 0 transparent;
    cursor: pointer;
}
.ms-text{
    float: left;
    width: 160px;
    font-weight: bold;
}
.ms-today{
    border: 1px solid #23AFFF;
    border-radius: 4px;
    background-color: #23AFFF;
    width: 90px;
    height: 30px;
    margin-top: 5px;
    color: #fff;
    float: right;
    padding-top: 8px;
    margin-right: 10px;
    cursor: pointer;
}
.medi-calendar{
    height: 440px;
    width: 636px;
    float: left;
}
.medi-info-title{
    float: left;
    margin-left: 10px;
    height: 40px;
    width: 290px;
    border-left: 1px solid #E6E6E6;
    border-right: 1px solid #E6E6E6;
    font-weight: bold;
    font-size: 14px;
    padding-top: 12px;
}
.medi-info{
    float: left;
    margin-left: 10px;
    height: 440px;
    width: 290px;
    border: 1px solid #E6E6E6;
}
.ms-grid-row{
    width: 290px;
    height: 73px;
}
.ms-grid-row-seq{
    float: left;
    width: 24px;
    height: 24px;
    border: 1px solid #E6E6E6;
    padding: 6px;
    margin: 18px 10px 0px 10px;
    border-radius: 3px;
}
.ms-grid-row-title{
    float: left;
    width: 230px;
    margin-top: 23px;
    text-align: left;
}
.ms-grid-row-info{
    float: left;
    width: 230px;
    text-align: left;
    margin-top: 10px;
    border-bottom: 1px dashed #E6E6E6;
    padding-bottom: 5px;
}
.ms-grid-row-info-left{
    float: left;
}
.ms-grid-row-info-right{
    float: right;
}
/*.ms-page-bar{*/
    /*display: inline-block;*/
    /*padding-top:30px;*/
    /*border-radius:4px;*/
/*}*/
/*.ms-page{*/
    /*float: left;*/
/*}*/
/*.ms-page-num{*/
    /*float: left;*/
    /*display: inline;*/
    /*width: 24px;*/
    /*height: 24px;*/
    /*padding-top: 5px;*/
    /*color: #000;*/
    /*font-weight: bold;*/
    /*margin: 0px 5px 5px 5px;*/
/*}*/
/*.ms-page-num-active{*/
    /*border: 1px solid #E6E6E6;*/
    /*color: #787878;*/
/*}*/
/*.ms-page-pre{*/
    /*margin-top: 5px;*/
    /*margin-right: 10px;*/
/*}*/
/*.ms-page-next{*/
    /*margin-top: 5px;*/
    /*margin-left: 10px;*/
/*}*/
.ms-no-info{
    background: url('../imgs/prompt_icon.png') no-repeat scroll 6px 0 transparent;
    width: 116px;
    margin: 110px auto;
    padding-top: 130px;
    padding-left: 3px;
    font-size: 15px;
    font-weight: bold;
    color: #787878;
}
.bodysta-type-bar{
    height: 57px;
    margin: auto 10px auto  10px;
    border-bottom: 1px solid #E6E6E6;
}
.bodysta-type-bar ul{
    list-style: none;
    margin: 0;
    padding-top: 20px;
    display: inline-block;
}
.bodysta-type-bar li:first-child {
    border-left: 1px solid #e6e6e6;
}
.bodysta-type-bar li{
    float: left;
    width: 120px;
    height: 20px;
    border-right: 1px solid #e6e6e6;
}
.bodysta-type-bar a{
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    height: 36px;
    /*border-bottom: 3px solid;*/
    /*border-color: #fff;*/
}
.bodysta-type-bar a.active{
    color: #23AFFF;
    /*height: 31px;*/
    border-bottom: 3px solid #23AFFF;
}
.bodysta-type-bar a:hover{
    color: #23AFFF;
    text-decoration: none;
    /*height: 31px;*/
    /*border-bottom: 3px solid;*/
    /*border-color: #fff;*/
}
.bodysta-type-left{
    margin-top: 23px;
    margin-right: 98px;
}
.bodysta-type-right{
    margin-top: 23px;
    margin-left: 98px;
}
.bodysta-type-content{
    height: 360px;
}
.bodysta-type-records{
    border-top: 1px solid #e6e6e6;
    margin: 20px 10px 0px 10px;
}
.bodysta-type-r-bar{
    height: 60px;
}
.bodysta-type-r-title{
    height: 60px;
    float: left;
    font-weight: bold;
    font-size: 16px;
    padding-top: 20px;
}
.bodysta-type-r-search{
    height: 60px;
    float: right;
    width: 500px;
}
.bodysta-type-charts{
    float: left;
    width: 800px;
    height: 380px;
    margin-left: -30px;
    margin-top: -20px;
}
.bodysta-type-info{
    float: left;
    width: 240px;
    height: 350px;
    margin-left: -60px;
    border: 1px solid #e6e6e6;
    margin-top: 10px;
}
.bodysta-type-info-title{
    height: 40px;
    background-color: #D0EAFB;
    font-size: 14px;
    font-weight: bold;
    margin: 0px auto 0px auto;
    color: #000;
    padding-top: 8px;
}
.c-h50{
     height: 50px;
 }
.c-h70{
    height: 70px;
}
.c-h110{
    height: 110px;
}
.c-h36{
    height: 36px;
}
.c-w36{
    width: 36px;
}
.c-w70{
    width: 70px;
}
.c-bi-ill{
    background: url('../imgs/ill_icon.png') no-repeat scroll 0 0 transparent;
}
.c-bi-hos{
    background: url('../imgs/hospital_icon.png') no-repeat scroll 0 0 transparent;
}
.c-bi-doc{
    background: url('../imgs/doctor_icon.png') no-repeat scroll 0 0 transparent;
}
.c-bi-med{
    background: url('../imgs/medicine_icon.png') no-repeat scroll 0 0 transparent;
}
.f-fb{
    font-weight: bold;
}
.f-lh36{
    line-height: 36px;
}
.f-lh26{
    line-height: 26px;
}
.f-tl{
    text-align: left;
}
.c-pt10{
    padding-top: 10px;
}
.c-pt30{
    padding-top: 30px;
}
.c-mr5{
    margin-right: 5px;
}
.c-ml50{
    margin-left: 50px;
}
.c-ml10{
    margin-left: 10px;
}
.c-mat8{
    margin: auto;
    margin-top: 8px;
}
.c-ml10r10{
    margin: 0px 10px 0px 10px;
}
.c-fl{
    float: left;
}

patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/visEvent/index.js

@@ -0,0 +1,52 @@
$(function (win) {
    var isLoad = [false, false, false, false];
    var loadUrls = ['medEvent', 'medHistory', 'medCheck', 'signIndex', 'healthCare'] ;
    function bindEvent(){
        //大导航栏绑定事件
        $.each($('div[id^="b_item_"]'), function (i, el) {
            $(el).click(function (e) {
                var hid = 1;
                var id =parseInt($(el).attr('id').replace('b_item_',''));
                $.each($('div[class*="b-item-s-active"]'), function (i, el) {
                    hid = parseInt($(el).attr('id').replace('b_item_',''));
                    $(el).removeClass('b-item-s-active');
                })
                var ar = $('#b_item_ar');
                if(id==1){
                    $(el).addClass('b-item-f-active');
                    ar.css('left','175px');
                }
                else{
                    $.each($('div[class*="b-item-f-active"]'), function (i, el) {
                        $(el).removeClass('b-item-f-active');
                    })
                    $(el).addClass('b-item-s-active');
                    ar.css('left',(430 + (id-2)*150) + 'px' );
                }
                load(id, hid);
            })
        });
        $('#back').click(function () {
            history.go(-1);
        });
    }
    bindEvent();
    function load(id, hid){
        $('#b_detail_'+hid).hide();
        $('#b_detail_'+id).show();
        if(!isLoad[id-1]){
            var el = $('#b_detail_'+id);
            el.append('<div class="r-loading"></div>');
            var url = $.Context.PATH + '/browser/medical/visEvent/' + loadUrls[id-1];
            el.load(url, function (b) {
                isLoad[id-1] = true;
            });
        }
    }
    $('#b_item_1').click();
})

patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/visEvent/index.jsp

@@ -0,0 +1,88 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8" %>
<%@include file="/WEB-INF/ehr/commons/jsp/commonInclude.jsp" %>
<div style="text-align: center">
    <div class="sec-detail s-bc19 ">
        <div class="top ">
            <div class="local">
                <div class="ico"></div>
                <div class="content"><span id="name">刘永辉</span>&nbsp;&nbsp;>&nbsp;&nbsp;<span id="topc">高血压</span></div>
            </div>
            <div class="title">
                <a id="back" class="ico s-c0 back">返回</a>
                <div id="topt" class="content">高血压</div>
            </div>
        </div>
        <div class="cut-line ">&nbsp;</div>
        <div class="vis-mid">
            <div class="m-left">
                <div class="m-l-top">
                    <div class="m-l-t-i">
                        <div class="c-h70 f-fb c-pt10"><span class="s-c4 f-fs50 c-mr5">4</span>年</div>
                        <div class="c-h50" style="height: 50px">
                            <div class="c-fl c-w36 c-h36 c-bi-ill c-ml50" ></div>
                            <div class="c-fl f-lh36  c-ml10 s-c17">患病年数</div>
                        </div>
                    </div>
                    <div class="m-l-t-i">
                        <div class="c-h70 f-fb c-pt10"><span class="s-c3 f-fs50 c-mr5">3</span>次</div>
                        <div class="c-h50">
                            <div class="c-fl c-w36 c-h36 c-bi-doc c-ml50" ></div>
                            <div class="c-fl f-lh36  c-ml10 s-c17">就诊次数</div>
                        </div>
                    </div>
                    <div class="m-l-t-i">
                        <div class="c-h70 f-fb c-pt10"><span class="s-c1 f-fs50 c-mr5">2</span>次</div>
                        <div class="c-h50">
                            <div class="c-fl c-w36 c-h36 c-bi-hos c-ml50" ></div>
                            <div class="c-fl f-lh36  c-ml10 s-c17">住院次数</div>
                        </div>
                    </div>
                </div>
                <div class="m-l-bot">
                    <div class="c-h70 s-c1 c-pt30">2015-05-05&nbsp;&nbsp;就诊&nbsp;&nbsp;厦门市第一医院</div>
                    <div class="s-c17">最近一次就诊时间</div>
                </div>
            </div>
            <div class="m-right">
                <div class="c-h70 c-w70 c-bi-med c-mat8 "></div>
                <div class="c-h110 c-ml10r10 f-tl f-lh26">胺碘酮、奎尼丁、美西律、普罗帕酮、莫雷西苏、普萘若尔、硝酸甘油、硝酸异山梨酯、胺碘酮、奎尼丁、美西律、普罗帕酮、莫雷西苏、普萘若尔、硝酸甘油、硝酸异山梨酯</div>
                <div class="s-c17">常用药物</div>
            </div>
        </div>
        <div class="cut-line ">&nbsp;</div>
        <div class="vis-barner">
            <div id="b_item_1" class="b-item-f b-item-f-active">就诊事件</div>
            <div id="b_item_2" class="b-item-s">历史用药情况</div>
            <div id="b_item_3" class="b-item-s">历史检查情况</div>
            <div id="b_item_4" class="b-item-s ">体征指标动态</div>
            <div id="b_item_5" class="b-item-s">保健活动</div>
            <div id="b_item_ar" class="b-item-ar"></div>
        </div>
        <div class="">
            <!-- 就诊事件 -->
            <div id="b_detail_1" class="vis-details" style="height: 550px;">&nbsp;</div>
            <!-- 用药情况 -->
            <div id="b_detail_2" class="vis-details" style="display: none;height: 550px">
                &nbsp;
            </div>
            <!-- 检查情况 -->
            <div id="b_detail_3" class="vis-details" style="display: none;height: 550px">&nbsp;</div>
            <!-- 体征指标动态 -->
            <div id="b_detail_4" class="vis-details" style="height: 870px;display: none;">
                &nbsp;
            </div>
            <!-- 保健活动 -->
            <div id="b_detail_5" class="vis-details" style="display: none;height: 550px">&nbsp;</div>
        </div>
    </div>
</div>
<%--<script>--%>
<%--</script>--%>
<%--</body>--%>

patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/visEvent/visEvent.jsp

@@ -0,0 +1,488 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8" %>
<%@include file="/WEB-INF/ehr/commons/jsp/commonInclude.jsp" %>
<%@include file="/WEB-INF/ehr/commons/jsp/commonHead.jsp" %>
<%@include file="/WEB-INF/ehr/commons/jsp/commonFoot.jsp" %>
<link rel="stylesheet" href="browse.css">
<link rel="stylesheet" href="detail.css">
<link rel="stylesheet" href="floatMenu.css">
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendarExt.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.min.js'></script>
<link rel="stylesheet" href="/ha/develop/testUI/grid/css/bootstrap.min.css">
<link rel="stylesheet" href="/ha/develop/testUI/grid/css/bootstrap-table.min.css">
<script src="/ha/develop/testUI/grid/js/bootstrap.min.js"></script>
<script src="/ha/develop/testUI/grid/js/tableExport.js"></script>
<script src="/ha/develop/testUI/grid/js/bootstrap-table.js"></script>
<script src="/ha/develop/testUI/grid/js/bootstrap-table-export.js"></script>
<script src="echarts-2.2.7/build/dist/echarts.js"></script>
<body>
<div style="text-align: center">
    <div class="sec-detail s-bc19 ">
        <div class="top ">
            <div class="local">
                <div class="ico"></div>
                <div class="content"><span id="name">刘永辉</span>&nbsp;&nbsp;>&nbsp;&nbsp;<span id="topc">高血压</span></div>
            </div>
            <div class="title">
                <div class="ico s-c0">返回</div>
                <div id="topt" class="content">高血压</div>
            </div>
        </div>
        <div class="cut-line ">&nbsp;</div>
        <div class="vis-mid">
            <div class="m-left">
                <div class="m-l-top">
                    <div class="m-l-t-i">
                        <div class="c-h70 f-fb c-pt10"><span class="s-c4 f-fs50 c-mr5">4</span>年</div>
                        <div class="c-h50" style="height: 50px">
                            <div class="c-fl c-w36 c-h36 c-bi-ill c-ml50" ></div>
                            <div class="c-fl f-lh36  c-ml10 s-c17">患病年数</div>
                        </div>
                    </div>
                    <div class="m-l-t-i">
                        <div class="c-h70 f-fb c-pt10"><span class="s-c3 f-fs50 c-mr5">3</span>次</div>
                        <div class="c-h50">
                            <div class="c-fl c-w36 c-h36 c-bi-doc c-ml50" ></div>
                            <div class="c-fl f-lh36  c-ml10 s-c17">就诊次数</div>
                        </div>
                    </div>
                    <div class="m-l-t-i">
                        <div class="c-h70 f-fb c-pt10"><span class="s-c1 f-fs50 c-mr5">2</span>次</div>
                        <div class="c-h50">
                            <div class="c-fl c-w36 c-h36 c-bi-hos c-ml50" ></div>
                            <div class="c-fl f-lh36  c-ml10 s-c17">住院次数</div>
                        </div>
                    </div>
                </div>
                <div class="m-l-bot">
                    <div class="c-h70 s-c1 c-pt30">2015-05-05&nbsp;&nbsp;就诊&nbsp;&nbsp;厦门市第一医院</div>
                    <div class="s-c17">最近一次就诊时间</div>
                </div>
            </div>
            <div class="m-right">
                <div class="c-h70 c-w70 c-bi-med c-mat8 "></div>
                <div class="c-h110 c-ml10r10 f-tl f-lh26">胺碘酮、奎尼丁、美西律、普罗帕酮、莫雷西苏、普萘若尔、硝酸甘油、硝酸异山梨酯、胺碘酮、奎尼丁、美西律、普罗帕酮、莫雷西苏、普萘若尔、硝酸甘油、硝酸异山梨酯</div>
                <div class="s-c17">常用药物</div>
            </div>
        </div>
        <div class="cut-line ">&nbsp;</div>
        <div class="vis-barner">
            <div id="b_item_1" class="b-item-f ">就诊事件</div>
            <div id="b_item_2" class="b-item-s">历史用药情况</div>
            <div id="b_item_3" class="b-item-s">历史检查情况</div>
            <div id="b_item_4" class="b-item-s b-item-s-active">体征指标动态</div>
            <div id="b_item_5" class="b-item-s">保健活动</div>
            <div id="b_item_ar" class="b-item-ar"></div>
        </div>
        <div class="">
            <!-- 就诊事件 -->
            <div id="b_detail_1" class="vis-details" style="height: 550px;display: none;">&nbsp;</div>
            <!-- 用药情况 -->
            <div id="b_detail_2" class="vis-details" style="display: none;">
                <div class="medi-bar">
                    <div id="mb_bar_item_1" class="drug-list-bar" >药品清单</div>
                    <div id="mb_bar_item_2" class="pres-list-bar" >处方记录</div>
                    <div id="mb_bar_item_3" class="medi-list-bar all-list-bar-active" >用药记录</div>
                </div>
                <!-- 药品清单 -->
                <div id="mb_bar_detail_1" style="display: none; height: 480px; margin: 10px" class="">
                    <table id="mb_table">
                        <thead>
                        <tr>
                            <th data-field="id" data-formatter="idFormatter">ID</th>
                            <th data-field="name">Item Name</th>
                            <th data-field="price">Item Price</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <!-- 处方记录 -->
                <div id="mb_bar_detail_2" style="display: none; height: 480px;  margin: 10px" class=""></div>
                <!-- 用药记录 -->
                <div id="mb_bar_detail_3" style="" class="medi-detl">
                    <div id="medi_list" class="medi-list">
                        <div class="medi-search" >
                            <div class="ms-year">
                                <div id="ms_year_left" class="ms-left ms-left-active"></div>
                                <div id="ms_tx_year" class="ms-text">2015年</div>
                                <div id="ms_year_right" class="ms-right ms-right-active"></div>
                            </div>
                            <div class="ms-month">
                                <div id="ms_month_left" class="ms-left ms-left-active"></div>
                                <div id="ms_tx_month" class="ms-text">11月</div>
                                <div id="ms_month_right" class="ms-right ms-right-active"></div>
                            </div>
                            <div id="ms_today" class="ms-today">返回今日</div>
                        </div>
                        <div id="medi_info_title" class="medi-info-title" >2015-11-06&nbsp;用药信息</div>
                        <div id="medi_calendar" class="medi-calendar"></div>
                        <div id="medi_info" class="medi-info">
                            <div style="display: none" class="ms-grid">
                                <div class="ms-grid-row">
                                    <div class="ms-grid-row-seq">1</div>
                                    <div class="ms-grid-row-title">胺碘酮</div>
                                    <div class="ms-grid-row-info">
                                        <div class="ms-grid-row-info-left">2粒</div>
                                        <div class="ms-grid-row-info-right">16:35</div>
                                    </div>
                                </div>
                                <div class="ms-grid-row">
                                    <div class="ms-grid-row-seq">2</div>
                                    <div class="ms-grid-row-title">胺碘酮</div>
                                    <div class="ms-grid-row-info">
                                        <div class="ms-grid-row-info-left">2粒</div>
                                        <div class="ms-grid-row-info-right">16:35</div>
                                    </div>
                                </div>
                                <div class="ms-grid-row">
                                    <div class="ms-grid-row-seq">3</div>
                                    <div class="ms-grid-row-title">胺碘酮</div>
                                    <div class="ms-grid-row-info">
                                        <div class="ms-grid-row-info-left">2粒</div>
                                        <div class="ms-grid-row-info-right">16:35</div>
                                    </div>
                                </div>
                                <div class="ms-grid-row">
                                    <div class="ms-grid-row-seq">4</div>
                                    <div class="ms-grid-row-title">胺碘酮</div>
                                    <div class="ms-grid-row-info">
                                        <div class="ms-grid-row-info-left">2粒</div>
                                        <div class="ms-grid-row-info-right">16:35</div>
                                    </div>
                                </div>
                                <div class="ms-grid-row">
                                    <div class="ms-grid-row-seq">5</div>
                                    <div class="ms-grid-row-title">胺碘酮</div>
                                    <div class="ms-grid-row-info">
                                        <div class="ms-grid-row-info-left">2粒</div>
                                        <div class="ms-grid-row-info-right">16:35</div>
                                    </div>
                                </div>
                            </div>
                            <div style="display: none" class="ms-page-bar">
                                <div class="ms-left ms-page-pre ms-left-active">&nbsp;</div>
                                <a href="javascript:void(0)" class="ms-page-num ms-page-num-active">1</a>
                                <a href="javascript:void(0)" class="ms-page-num ">2</a>
                                <a href="javascript:void(0)" class="ms-page-num ">3</a>
                                <a href="javascript:void(0)" class="ms-page-num ">4</a>
                                <a href="javascript:void(0)" class="ms-page-num ">5</a>
                                <div  class="ms-right ms-page-next ms-right-active">&nbsp;</div>
                            </div>
                            <div class="ms-no-info">
                                今日无用药信息
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 检查情况 -->
            <div id="b_detail_3" class="vis-details" style="display: none;height: 550px">&nbsp;</div>
            <!-- 体征指标动态 -->
            <div id="b_detail_4" class="vis-details" style="height: 870px">
                <div class="bodysta-type-bar">
                    <div  class="ms-left bodysta-type-left">&nbsp;</div>
                    <div style="float: left; overflow: hidden; height: 56px">
                        <ul>
                            <li><a class="active" href="javascript:void (0)">身高体重</a></li>
                            <li><a href="javascript:void (0)">血压脉搏</a></li>
                            <li><a href="javascript:void (0)">血糖</a></li>
                            <li><a href="javascript:void (0)">血氧</a></li>
                            <li><a href="javascript:void (0)">脂肪</a></li>
                            <li><a href="javascript:void (0)">骨密度</a></li>
                        </ul>
                    </div>
                    <div  class="ms-right ms-right-active bodysta-type-right">&nbsp;</div>
                </div>
                <div class="bodysta-type-content">
                    <div id="charts" class="bodysta-type-charts"></div>
                    <div class="bodysta-type-info">
                        <div class="bodysta-type-info-title">指标说明</div>
                        <div style="height: 200px" class="">&nbsp;</div>
                        <div class="bodysta-type-info-title">指标分析</div>
                        <div class="">&nbsp;</div>
                    </div>
                </div>
                <div class="bodysta-type-records">
                    <div class="bodysta-type-r-bar">
                        <div class="bodysta-type-r-title">历史记录</div>
                        <div class="bodysta-type-r-search"></div>
                    </div>
                    <div class="bodysta-type-r-grid">
                        <table id="bt_table">
                            <thead>
                            <tr>
                                <th data-field="id" data-formatter="idFormatter">ID</th>
                                <th data-field="name">Item Name</th>
                                <th data-field="price">Item Price</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
            <!-- 保健活动 -->
            <div id="b_detail_5" class="vis-details" style="display: none;height: 550px">&nbsp;</div>
        </div>
    </div>
</div>
<script src="float-menu-tree.js"></script>
<script>
    function clk(date){
        $.each($('.fc-day-grid').find('.fc-fl-bg-active'), function (i, el) {
            $(el).css('background-color', '#FFF');
            $(el).removeClass('.fc-fl-bg-active');
        });
        var el = $('.fc-day-grid').find('.fc-fl-bg[data-date="'+date+'"] > div');
        el.css('background-color', '#FF6400');
        el.addClass('fc-fl-bg-active');
        $('#medi_info_title').html(date+'&nbsp;用药信息');
    }
    $(function (win) {
        var data = ['2015-11-30'];
        var calendarNode = $('#medi_calendar');
        var ms_tx_year = $('#ms_tx_year');
        var ms_tx_month = $('#ms_tx_month');
        $.fullCalendar.DayGrid.prototype.renderNumberCellHtml = function(date) {
            var classes;
            if (!this.view.dayNumbersVisible) { // if there are week numbers but not day numbers
                return '<td/>'; //  will create an empty space above events :(
            }
            classes = this.getDayClasses(date);
            classes.unshift('fc-day-number');
            return '' +
                    '<td onclick="clk(\''+date.format()+'\')" class="' + classes.join(' ') + '" data-date="' + date.format() + '">' +
                    date.date() +
                    '</td>';
        }
        $.fullCalendar.DayGrid.prototype.renderBgCellHtml = function(date) {
            var isShowBg = false;
            for(var i=0;i<data.length;i++){
                if(data[i]==date.format()){
                    isShowBg=true;
                    break;
                }
            }
            var d = data;
            var view = this.view;
            var classes = this.getDayClasses(date);
            classes.unshift('fc-day', view.widgetContentClass);
            var cls = classes.join(' ');
            var bg = '<div class="fc-fl-bg-normal" style="height: '+($.Util.isIE()? '61px' : '100%')+' ; background-color: #fff; border: 2px solid; border-color: '+(cls.indexOf('fc-today')==-1?'#fff' : '#FF6400')+'">';
            bg += isShowBg ?
                        '<div style="width:32px;height:32px;margin-left: 28px; margin-top: 10px; background: url(\'imgs/medicine01_icon.png\') no-repeat scroll 0 0 transparent;" ></div></div>'
                        : '&nbsp;</div>';
            return '<td class="' + cls + ' fc-fl-bg"' +
                    ' data-date="' + date.format('YYYY-MM-DD') + '"' +
                    '>'+bg+'</td>';
        }
        function load(id, hid){
            $('#b_detail_'+hid).hide();
            $('#b_detail_'+id).show();
            if(id==2){
                $('#medi_calendar').fullCalendar('render');
            }
        }
        function setTimeInfo(){
            var date = calendarNode.fullCalendar('getDate');
            ms_tx_year.html(date.year()+'年');
            ms_tx_month.html( (date.month()+1)+'月');
        }
        function bindEvent(){
            //大导航栏绑定事件
            $.each($('div[id^="b_item_"]'), function (i, el) {
                $(el).click(function (e) {
                    var hid = 1;
                    var id =parseInt($(el).attr('id').replace('b_item_',''));
                    $.each($('div[class*="b-item-s-active"]'), function (i, el) {
                        hid = parseInt($(el).attr('id').replace('b_item_',''));
                        $(el).removeClass('b-item-s-active');
                    })
                    var ar = $('#b_item_ar');
                    if(id==1){
                        $(el).addClass('b-item-f-active');
                        ar.css('left','175px');
                    }
                    else{
                        $.each($('div[class*="b-item-f-active"]'), function (i, el) {
                            $(el).removeClass('b-item-f-active');
                        })
                        $(el).addClass('b-item-s-active');
                        ar.css('left',(430 + (id-2)*150) + 'px' );
                    }
                    load(id, hid);
                })
            });
            //用药情况的事件绑定
            $.each($('.medi-bar').find('div[id^="mb_bar_item"]'), function (i, el) {
                $(el).click(function () {
                    var id = parseInt($(this).attr('id').replace('mb_bar_item_', ''));
                    var hid = 0;
                    $.each($('.medi-bar').find('.all-list-bar-active'), function (i, el) {
                        hid = parseInt($(el).attr('id').replace('mb_bar_item_', ''));
                        $(el).removeClass('all-list-bar-active');
                    })
                    $(el).addClass('all-list-bar-active');
                    $('#mb_bar_detail_'+hid).hide();
                    $('#mb_bar_detail_'+id).show();
                    if(id==1){
                        $('#mb_table').bootstrapTable({
                            url : 'data/data1.json',
                            pagination : true,
                            height : 440
                        });
                    }
                })
            })
            $('#ms_year_left').click(function () {
                calendarNode.fullCalendar('prevYear');
                setTimeInfo();
            });
            $('#ms_year_right').click(function () {
                calendarNode.fullCalendar('nextYear');
                setTimeInfo();
            })
            $('#ms_month_right').click(function () {
                calendarNode.fullCalendar('next');
                setTimeInfo();
            })
            $('#ms_month_left').click(function () {
                calendarNode.fullCalendar('prev');
                setTimeInfo();
            })
            $('#ms_today').click(function () {
                calendarNode.fullCalendar('today');
                setTimeInfo();
            })
        }
        bindEvent();
        $('#bt_table').bootstrapTable({
            url : 'data/data1.json',
            pagination : true,
            height : 320,
            pageSize: 4
        });
        $('#medi_calendar').fullCalendar({
            dayNamesShort:['日', '一', '二', '三', '四', '五', '六'],
            contentHeight:440,
            header: false,
            editable: true,
            eventLimit: true
        });
        setTimeInfo();
        clk(calendarNode.fullCalendar('getDate').format('YYYY-MM-DD'));
        require.config({
            paths: {
                echarts: 'echarts-2.2.7/build/dist'
            }
        });
        // 使用
        require(
                [
                    'echarts',
                    'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
                ],
                function (ec) {
                    var myChart = ec.init(document.getElementById('charts'));
                    var option = {
                        tooltip : {
                            trigger: 'item',
                            formatter : function (params) {
                                var date = new Date(params.value[0]);
                                data = date.getFullYear() + '-'
                                        + (date.getMonth() + 1) + '-'
                                        + date.getDate() + ' '
                                        + date.getHours() + ':'
                                        + date.getMinutes();
                                return data + '<br/>'
                                        + params.value[1] + ', '
                                        + params.value[2];
                            }
                        },
                        dataZoom: {
                            show: true,
                            start : 70
                        },
                        grid: {
                            y2: 80
                        },
                        xAxis : [
                            {
                                type : 'time',
                                splitNumber:10
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name: 'series1',
                                type: 'line',
                                showAllSymbol: true,
                                itemStyle: {
                                    normal: {
                                        color: function(params) {
                                            var colorList = [
                                                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B'
                                            ];
                                            debugger
                                            return colorList[params.dataIndex]
                                        }
                                    }
                                },
                                symbolSize: function (value){
                                    return  2;
                                },
                                data: (function () {
                                    var d = [];
                                    var len = 0;
                                    var now = new Date();
                                    var value;
                                    while (len++ < 200) {
                                        d.push([
                                            new Date(2014, 9, 1, 0, len * 10000),
                                            (Math.random()*30).toFixed(2) - 0,
                                            (Math.random()*100).toFixed(2) - 0
                                        ]);
                                    }
                                    return d;
                                })()
                            }
                        ]
                    };
                    myChart.setOption(option);
                })
    })
</script>
</body>