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

(function(){
//  Vue.component('vuedals', Vuedals.Component);
    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}" @click="getLowCodeData(3)"><span>各区</span></div>\
                    <div v-show="level >= 3" class="area-tab" :class="{\'active\': level==3 || lowLevel==2}" @click="getLowCodeData(2)"><span>社区</span></div>\
                    <div class="area-tab" :class="{\'active\': level==2 || lowLevel==1}" @click="getLowCodeData(1)"><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 && lowLevel != 1"><i class="fa fa-angle-right"></i></td>\
                        </tr>\
                    </tbody>\
                </table>\
            </div>',
        props:['headers','rows'],
        data: function(){
            return {
//              headers: ["排名", "咨询量", "未回复"],
//              rows: [{rank: 1, cols: ["思明区", "100", "2"]}, 
//                  {rank: 2, cols: ["海沧区", "98", "1"]}],
                level: 4,
                lowLevel: '',
                area: '350200'
            }
        },
        methods: {
            getLowLeverData: function(row){
                if(this.level > 2 && this.lowLevel != 1){
                    //跳转去下一级数据
                    this.level --;
                    this.area = row.code;
                    //触发组件监听事件,去父页面请求新的数据
                    this.$emit("getnewdata", {
                        level: this.level,
                        area: this.area,
                        lowLevel: this.lowLevel
                    });
                }else{
                    //弹框显示团队信息
                    Vuedals.Bus.$emit('new', {
                        title: '团队信息',
                        component: 'team-info',
                        props: {
                            teamId: 644
                        }
                    });
                }
            },
            getLowCodeData: function(code){
                if(code == 3){
                    this.lowLevel = '';
                }else{
                    this.lowLevel = code;
                }
                
                //触发组件监听事件,去父页面请求新的数据
                this.$emit("getnewdata", {
                    level: this.level,
                    area: this.area,
                    lowLevel: this.lowLevel
                });
            }
        }
    });
})()