app-big-data/component/patientInfo/tizheng-info.js

(function(){
    Vue.component('tizheng-info', {
        template: '<div class="panel-box panel-box3">\
                        <h4 class="c-b5e1fc c-f16 c-t-center">体征信息</h4>\
                        <!--<div class="sub-title mt20">\
                            <div class="pre-icon" :class="{active: selectedTab != 2}" @click="pre()"></div>\
                            <div class="ui-grid tab-box">\
                                <div class="ui-col-1 c-t-center">\
                                    <span class="data-tab c-f14" :class="{active: selectedTab == 2}" @click="chooseTab(2)">血压</span>\
                                </div>\
                                <div class="ui-col-1 c-t-center">\
                                    <span  class="data-tab c-f14" :class="{active: selectedTab == 1}" @click="chooseTab(1)">血糖</span>\
                                </div>\
                            </div>\
                            <div class="next-icon" :class="{active: selectedTab != 1}" @click="next()"></div>\
                        </div>-->\
                        <div class="ui-grid ui-grid-middle mt10">\
                            <div class="ui-col-0 c-f14 c-b5e1fc mr30">指标</div>\
                            <div v-show="selectedTab==2" class="ui-col-1">\
                                <span class="zb-tab c-f12 active">舒张压</span>\
                                <span class="zb-tab c-f12 active">收缩压</span>\
                            </div>\
                            <div v-show="selectedTab==1" class="ui-col-1 select-div">\
                                <select class="zb-select" v-model="selectedXT">\
                                    <option v-for="zb in xtzb" :value="zb.value">{{zb.label}}</option>\
                                </select>\
                            </div>\
                        </div>\
                        <div class="mtb20 ui-grid ui-grid-middle">\
                            <div class="ui-col-0 c-f14 c-b5e1fc mr30">周期</div>\
                            <div class="ui-col-1">\
                                <span class="date-tab c-f12" :class="{active: selectedDateType==1}" @click="changeDateType(1)">一周</span><!--\
                                --><span class="date-tab c-f12" :class="{active: selectedDateType==2}" @click="changeDateType(2)">一月</span><!--\
                                --><span class="date-tab c-f12" :class="{active: selectedDateType==3}" @click="changeDateType(3)">一年</span>\
                            </div>\
                        </div>\
                        <div class="c-t-center c-f14 c-ff3803">偏高<span class="mlr30">{{total.high}}</span>次</div>\
                        <div class="c-t-center c-f14 c-03d95d mt10">正常<span class="mlr30">{{total.normal}}</span>次</div>\
                        <div class="c-t-center c-f14 c-fd9c0d mt10">偏低<span class="mlr30">{{total.low}}</span>次</div>\
                    </div>',
        props: ['patient'],
        data: function() {
            return {
                selectedTab: 1, // 1-血糖, 2-血压
                xtzb: [{
                    label: '早餐前',
                    value: '1'
                },{
                    label: '早餐后',
                    value: '2'
                },{
                    label: '午餐前',
                    value: '3'
                },{
                    label: '午餐后',
                    value: '4'
                },{
                    label: '晚餐前',
                    value: '5'
                },{
                    label: '晚餐后',
                    value: '6'
                },{
                    label: '睡前',
                    value: '7'
                }],
                selectedXT: 1,
                selectedDateType: 1,
                total: {}
            }
        },
        computed: {
        },
        watch: {
            selectedXT: function(val) {
                EventBus.$emit("get-chart-data", {
                    type: this.selectedTab,
                    dateType: this.selectedDateType,
                    gi_type: val
                });
            }
        },
        methods: {
            pre: function(){
                if(this.selectedTab == 2){
                    return false;
                }
                this.selectedTab == 2;
            },
            next: function(){
                if(this.selectedTab == 1){
                    return false;
                }
                this.selectedTab == 1;
            },
            chooseTab: function(str){
                this.selectedTab = str;
            },
            changeDateType: function(type){
                this.selectedDateType = type;
                EventBus.$emit("get-chart-data", {
                    type: this.selectedTab,
                    dateType: this.selectedDateType,
                    gi_type: this.selectedTab == 2 ? 0 : this.selectedXT
                });
            }
        },
        mounted: function() {
            var vm = this;
            //初始化下拉列表
//          $('.zb-select').dropkick();
            initZBInfo(vm);
        },
    });
    
    function initZBInfo(vm){
        EventBus.$on('show-disease-zhibiao', function(arg){
            var type = arg.type; // 2-高血压, 1-糖尿病
            vm.selectedTab = type ;
        });
        
        EventBus.$on("get-zhibiao-count", function(arg){
            vm.total = arg.total;
        })
    }
})()