PC-application/component/statistics/area-data-panel2.js

(function(){
    Vue.component('area-data-panel',{
        template: '<div class="area-panel">\
                <div class="area-tab-panel">\
                    <div v-show="level==4" class="area-tab" :class="{\'active\': level==4 && (!lowLevel || lowLevel==3)}" @click="getLowCodeData(3)"><span>各区</span></div>\
                    <div v-show="level >= 3" class="area-tab" :class="{\'active\': (level==3 && lowLevel!=1) || lowLevel==2}" @click="getLowCodeData(2)"><span>社区</span></div>\
                </div>\
                <table class="bottom-list-table mb20" id="listTable">\
                    <thead><tr>\
                        <th v-for="th in headers">{{th}}</th>\
                        <th v-show="level>2 && lowLevel != 1" width="20"></th>\
                    </tr></thead>\
                    <tbody>\
                        <tr v-for="row in rows" class="data-row" @click="getLowLeverData(row)">\
                            <td v-for="(col, index) in row.cols" :class="{\'area-name\': index == 0}">\
                                <div v-if="index==0" class="ranking" :class="{\'ranking1\': row.rank==1, \'ranking2\': row.rank==2, \'ranking3\': row.rank==3}">{{row.rank}}</div>\
                                <div v-if="index==0" class="ui-col-1 c-nowrap-multi">{{col}}</div>\
                                <span v-else>{{col}}</span>\
                            </td>\
                            <td v-show="level>2"><i class="fa fa-angle-right"></i></td>\
                        </tr>\
                    </tbody>\
                </table>\
            </div>',
        props:[],
        data: function(){
            return {
                level: '',
                lowLevel: '',
                area: '',
                headers: [],
                rows: []
            }
        },
        mounted: function(){
            var vm = this;
            EventBus.$on("render-area-data", function(arg){
                vm.level = arg.level;
                vm.lowLevel = arg.lowLevel;
                vm.area = arg.area;
                vm.headers = arg.headers;
                vm.rows = arg.rows;
            })
        },
        methods: {
            getLowLeverData: function(row){
                if(this.level > 2 && this.lowLevel != 1){
                    //跳转去下一级数据
                    if(this.lowLevel && (this.level - this.lowLevel) >= 2){
                        //从次级tab的内容查看再下一级的数据
                        this.level = this.level - 2;
                        this.lowLevel --;
                    }else{
                        this.level --;
                    }
                    this.area = row.code;
                    this.areaTitle = row.name;
                    //触发组件监听事件,去父页面请求新的数据
                    this.$emit("getnewdata", {
                        level: this.level,
                        area: this.area,
                        areaTitle: this.areaTitle,
                        lowLevel: this.lowLevel,
                    });
                }
            },
            getLowCodeData: function(code){
                if(code == 3){
                    this.lowLevel = '';
                }else{
                    this.lowLevel = code;
                }
                
                //触发组件监听事件,去父页面请求新的数据
                this.$emit("getnewdata", {
                    level: this.level,
                    area: this.area,
                    lowLevel: this.lowLevel
                });
            }
        }
    });
})()