app-big-data/component/patientInfo/right-panel.js

(function(){
    Vue.component('right-panel', {
        template: '<div class="right-panel">\
                    <div class="panel-box panel-box5">\
                        <h4 v-show="typeLength==1" class="c-b5e1fc c-f16 c-t-center">{{diseaseTitle}}</h4>\
                        <div v-show="typeLength > 1" class="ui-grid tab-box">\
                            <div class="ui-col-1 c-t-center">\
                                <span class="data-tab c-f14" :class="{active: selectedType==2}" @click="chooseTab(2)">高血压</span>\
                            </div>\
                            <div class="ui-col-1 c-t-center">\
                                <span class="data-tab c-f14" :class="{active: selectedType==1}" @click="chooseTab(1)">糖尿病</span>\
                            </div>\
                        </div>\
                        <div class="c-row mt10">\
                            <div class="c-33 bg-icon">\
                                <img src="../images/xiaokuang_img.png">\
                                <div class="absolute-content">\
                                    <p class="c-b5e1fc c-f12"><span class="c-ff3803 c-f16">{{data.statistics ? data.statistics.year : 0}}</span>年</p>\
                                    <span class="c-b5e1fc c-f12">患病年数</span>\
                                </div>\
                            </div>\
                            <div class="c-33 bg-icon">\
                                <img src="../images/xiaokuang_img.png">\
                                <div class="absolute-content">\
                                    <p class="c-b5e1fc c-f12"><span class="c-03d95d c-f16">{{data.statistics ? data.statistics.eventSize : 0}}</span>次</p>\
                                    <span class="c-b5e1fc c-f12">就诊次数</span>\
                                </div>\
                            </div>\
                            <div class="c-33 bg-icon">\
                                <img src="../images/xiaokuang_img.png">\
                                <div class="absolute-content">\
                                    <p class="c-b5e1fc c-f12"><span class="c-fd9c0d c-f16">{{data.statistics ? data.statistics.times : 0}}</span>次</p>\
                                    <span class="c-b5e1fc c-f12">住院次数</span>\
                                </div>\
                            </div>\
                        </div>\
                        <p class="c-f12 c-b5e1fc c-nowrap-multi-4 mtb20">{{data.drugs || "无"}}</p>\
                        <p class="c-t-center c-0fa5f2 c-f12">常用药物</p>\
                    </div>\
                    <div class="panel-box panel-box6">\
                        <h4 class="c-b5e1fc c-f16 c-t-center">就诊事件</h4>\
                        <div v-show="hasEventList" class="record-panel">\
                            <div class="c-position-r" v-for="(event, index) in eventList">\
                                <div class="straight-line"></div>\
                                <div class="year c-f14 c-b5e1fc">{{event.year}}</div>\
                                <div v-for="(item, index2) in event.list" class="ui-grid ui-grid-middle record c-f14" :class="{active: index==0 && index2==0}">\
                                    <div class="ui-col-0 date">{{item.date}}</div>\
                                    <div class="ui-col-0 mr20"><span class="c-f10 fa fa-circle"></span></div>\
                                    <div class="ui-col-1">\
                                        <span class="info c-f12">{{item.eventType | getEventTypeName}}{{item.orgName}}</span>\
                                    </div>\
                                </div>\
                            </div>\
                        </div>\
                        <div v-show="!hasEventList" class="no-result-panel">\
                            <div class="no-result-img">\
                                <img src="../images/wushuju_icon.png">\
                            </div>\
                            <div class="no-result-text">暂无相关就诊数据</div>\
                        </div>\
                    </div>\
                    <div class="panel-box panel-box7">\
                        <h4 class="c-b5e1fc c-f16 c-t-center">指标分析</h4>\
                        <p class="c-f12 c-b5e1fc c-nowrap-multi-4 mt10">{{content}}</p>\
                    </div>\
                </div>',
        props: ['patient'],
        data: function() {
            return {
                data: {},
                eventList: [],
                hasEventList: true,
                diseaseTitle: "",
                typeLength: 1,
                selectedType: 1, // 1-糖尿病, 2-高血压
                content: ""
            }
        },
        mounted: function() {
            var vm = this;
            initEventOnBus(vm);
        },
        methods: {
            chooseTab: function(type){
                var vm = this;
                this.selectedType = type;
                getEventList(vm);
                //控制左下角区域的数据显示
                EventBus.$emit('show-disease-zhibiao', {type: type});
                //控制图标数据显示
                EventBus.$emit("get-chart-data", {
                    type: type,
//                  dateType: 1, //初始时值为1
                    gi_type: type == 2 ? 0 : 1 //血糖默认获取1周的时间
                });
            }
        },
        filters:{
            getEventTypeName: function(val){
                switch(parseInt(val)){
                    case 1: 
                        return "门诊 | ";
                        break;
                    case 2:
                        return "住院 | ";
                        break;
                    case 3:
                        return "体检 | ";
                        break;
                }
            }
        }
    });
    
    function initEventOnBus(vm){
        EventBus.$on('get-disease-info', function (arg) {
            vm.typeLength = arg.length;
            var type = arg.type;
            vm.selectedType = type;
            if(type == 2){
                vm.diseaseTitle = "高血压";
            }else if(type == 1){
                vm.diseaseTitle = "糖尿病";
            }
            
            getEventList(vm);
            
        });
        
        //指标分析数据显示
        EventBus.$on("get-zhibiao-analysis", function(arg){
            vm.content = arg.content;
        });
    }
    
    function getEventList(vm){
        var params = {
            patient: vm.patient,
            type: vm.selectedType,
            page: 1,
            pageSize: 1000
        };
        patientAPI.getZYinfo(params).then(function(res){
            if(res.status == 200){
                vm.data = res.data;
                if(res.data.list.length > 0){
                    vm.hasEventList = true;
                }else{
                    vm.hasEventList = false;
                }
                var list = _.map(res.data.list, function(o){
                    var year = o.eventDate.substr(0,4);
                    o.year = parseInt(year);
                    var date = o.eventDate.substr(5,5);
                    o.date = date;
                    return o;
                });
                var list2 = _.groupBy(list, "year");
                var list3 = [];
                for(year in list2){
                    var item = list2[year];
                    list3.push({
                        year: year,
                        list: item
                    });
                }
                list3.reverse();
                vm.eventList = list3;
            }else{
                vm.hasEventList = false;
                console.log(res.msg);
            }
        })
    }
})()