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

(function(){
    Vue.component('patient-info', {
        template: '<div>\
                    <table style="width: 100%;">\
                        <tr v-for="(row, index) in labelList">\
                            <td style="width: 33%;" :class="labelClass[index][0]">{{row[0].labelName}}</td>\
                            <td v-if="index==0" rowspan="4">\
                                <div class="person-img">\
                                    <img src="../images/laoren_img.png">\
                                </div>\
                            </td>\
                            <td style="width: 33%;" :class="labelClass[index][1]">{{row[1] ? row[1].labelName : ""}}</td>\
                        </tr>\
                    </table>\
                    <table class="c-f16 c-b5e1fc" style="margin: 0.05rem auto;">\
                        <tr>\
                            <td class="plr30">姓名：{{patientInfo.name}}</td>\
                            <td class="plr30">性别：{{patientInfo.sex == "1" ? "男" : "女"}}</td>\
                            <td class="plr30">年龄：{{patientInfo.age}}</td>\
                        </tr>\
                    </table>\
                    <table class="c-f12 c-0fa5f2" style="margin: 0.05rem auto;">\
                        <tr>\
                            <td class="plr30 ptb5">居住地</td>\
                            <td class="plr30 ptb5">{{patientInfo.address}}</td>\
                        </tr>\
                        <tr>\
                            <td class="plr30 ptb5">家庭医生</td>\
                            <td class="plr30 ptb5">{{patientInfo.doctorName}}</td>\
                        </tr>\
                        <tr>\
                            <td class="plr30 ptb5">签约机构</td>\
                            <td class="plr30 ptb5">{{patientInfo.hospitalName}}</td>\
                        </tr>\
                    </table>\
                </div>',
        props: ['patient'],
        data: function() {
            return {
                patientInfo: {},
                labelList: [],
                labelClass: [
                    ["c-f20 c-ffff00 c-t-right", "c-f20 c-abdbe9"],
                    ["c-f26 c-d259d6 c-t-right mr20", "c-f26 c-ffff00"],
                    ["c-f16 c-05a561 c-t-right mr20", "c-f16 c-b82f1a"],
                    ["c-f20 c-abdbe9 c-t-right", "c-f20 c-abdbe9"]
                ],
            }
        },
        mounted: function(){
            var vm = this;
            getPatientInfo(vm);
        },
        methods: {
//          getDeseaseInfo: function(obj){
//              //只有高血压和糖尿病的标签点击才会修改右侧的信息
//              if(obj && obj.labelType == "3" && (obj.label == "2" || obj.label == "1")){
//                  EventBus.$emit('get-disease-info'', {labelType: obj.labelType, label: obj.label});
//              }
//          }
        }
    });
    
    function getPatientInfo(vm){
        patientAPI.getPatientInfo({patient: vm.patient}).then(function(res){
            if(res.status == 200){
                vm.patientInfo = res.data;
                var list = res.data.labelList,
                    len = list.length;
                
                var diseases = []; //标记高血压和糖尿病
                for(i=0; i<len; i++){
                    var item = list[i];
                    if(item.labelType == "3" && (item.label == "2" || item.label == "1")){
//                      EventBus.$emit('get-desease-info', {labelType: item.labelType, label: item.label});
//                      break;
                        diseases.push(item);
                    }
                }
                if(diseases.length > 0){
                    var diseaseType = 0;
                    if(diseases[0].labelType == "3" && diseases[0].label == "1"){
                        //"高血压";
                        diseaseType = 2;
                    }else if(diseases[0].labelType == "3" && diseases[0].label == "2"){
                        //"糖尿病";
                        diseaseType = 1;
                    }
                    //控制右边区域的数据显示
                    EventBus.$emit('get-disease-info', {length: diseases.length, type: diseaseType});
                    //控制左下角区域的数据显示
                    EventBus.$emit('show-disease-zhibiao', {type: diseaseType});
                    //控制图标数据显示
                    EventBus.$emit("get-chart-data", {
                        type: diseaseType,
                        dateType: 1, //初始时值为1
                        gi_type: diseaseType == 2 ? 0 : 1 //血糖默认获取1周的时间
                    });
                }
                var newList = [],
                    list3 = [];
                if(len < 8){
                    //标签展示的时候是展示8个,为了排版好看,少于8个的情况需要补充数据显示
                    var list2 = [{
                        "labelName": res.data.sex == 1 ? "男性" : "女性"
                    },{
                        "labelName": "厦门"
                    }];
                    
                    if(len >= 7){
                        list3 = [list2[0]].concat(list);
                    }else if(len <=6 ){
                        list3 = list2.concat(list);
                    }
                }
                var currData = [];
                for(j=0; j<list3.length; j++){
                    var it = list3[j];
                    currData.push(it);
                    //在这里求2的余数,如果i不等于0,且可以整除 或者考虑到不满2个或等于2个的情况就要加上  i等于当前数组长度-1的时候
                    if((j != 0 && (j+1) % 2 == 0) || j == list3.length - 1) {
                        newList.push(currData);
                        currData = [];
                    }
                }
                vm.labelList = newList;
            }else{
                console.log(res.msg);
            }
        });
    }
})()