PC-application/component/statistics/sign-progress-filter.js

(function(){
    Vue.component('sign-progress-filter',{
        template:'<div style="height: 400px;overflow: auto;margin-bottom: 50px;">\
				<div class="mt10 ml10 filter-title">统计年份</div>\
				<div class="c-row ml40 mr10" id="signYear">\
				    <div v-for="year in years"  class="c-33 mt20" style="margin-left:0;margin-right:3%;" :class="{\'active\': year==chooseYear}" @click="yearClick(year)"><a>{{year}}</a></div>\
				</div>\
				<div class="mt20 ml10 filter-title">统计维度</div>\
				<div class="div-content">\
					<div class="mt20 div-group-btn c-row ml40 mr10">\
						<div class="div-btn c-33" :class="{\'active\': analysisType==1}" @click="contentClick(1, \'\', \'按任务\')">\
							<a href="#" class="f-fs14">按任务</a>\
						</div>\
						<div class="div-btn c-33" :class="{\'active\': analysisType==2}" @click="contentClick(2, \'\', \'按人口\')">\
							<a href="#" class="f-fs14">按人口</a>\
						</div>\
						<div class="div-btn c-33" :class="{\'active\': analysisType==6}" @click="contentClick(6, 4, \'十大人群签约\')">\
							<a href="#" class="f-fs14">十大人群签约</a>\
						</div>\
					</div>\
					<div class="mt20 div-group-btn c-row ml40">\
						<div class="div-btn c-33" :class="{\'active\': analysisType==5}" @click="contentClick(5, 3, \'65岁以上签约\')">\
							<a href="#" class="f-fs14">65岁以上签约</a>\
						</div>\
						<div class="div-btn c-33" :class="{\'active\': analysisType==3}" @click="contentClick(3, 1, \'高血压\')">\
							<a href="#" class="f-fs14">高血压</a>\
						</div>\
						<div class="div-btn c-33" :class="{\'active\': analysisType==4}" @click="contentClick(4, 2, \'糖尿病\')">\
							<a href="#" class="f-fs14">糖尿病</a>\
						</div>\
					</div>\
				</div>\
				<div id="footer">\
					<div class="c-row btn-wrap c-border-top fr">\
						<div class="div-foot-btn mr20" @click="resetClick">\
							<a href="#" class="c-666 f-fs16">重置</a>\
						</div>\
						<div class="div-foot-btn active" @click="confirmClick">\
							<a href="#" class="c-666 f-fs16">保存</a>\
						</div>\
					</div>\
				</div>\
			</div>',
        props:['chooseYear','analysisType', 'lowCode', 'analysisName'],
        data: function(){
            return {
                years: [],
            }
        },
        mounted: function(){
            var now = new Date(),
                year = now.getFullYear();
            if(now.getMonth() < 6){
                year --;
            }
            for(i=year; i>=2016; i--){
                this.years.push(i);
            }
        },
        methods: {
        	 yearClick:function(val){
	          this.chooseYear = val;
	         },
	         contentClick:function(type, lowCode, name){
	         	this.analysisType = type;
	         	this.lowCode = lowCode;
	         	this.analysisName = name;
	         },
	         resetClick:function(){
				this.analysisType = 1;
                this.lowCode = '';
				this.analysisName = '按任务';
				this.chooseYear=this.years[0]
	         },
	         confirmClick:function(){
	         	var vm = this;
	         	
				//触发刷新
				this.$emit('vuedals:close', {
					chooseYear: vm.chooseYear,
					id: vm.analysisType,
					lowCode: vm.lowCode,
					name: vm.analysisName
				});
	         },
        }
    });
    
})()