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 mt20 ml40" id="signYear" v-html="yearHtml" @click="yearClick">\
				</div>\
				<div class="mt20 ml10 filter-title">统计维度</div>\
				<div class="div-content">\
					<div class="mt20 div-group-btn c-row ml40">\
						<div class="div-btn c-33 active">\
							<a href="#" class="f-fs14">按任务</a>\
						</div>\
						<div class="div-btn c-33">\
							<a href="#" class="f-fs14">按人口</a>\
						</div>\
						<div class="div-btn c-33">\
							<a href="#" class="f-fs14">65岁以上签约</a>\
						</div>\
					</div>\
					<div class="mt20 div-group-btn c-row ml40">\
						<div class="div-btn c-33">\
							<a href="#" class="f-fs14">高血压</a>\
						</div>\
						<div class="div-btn c-33">\
							<a href="#" class="f-fs14">糖尿病</a>\
						</div>\
					</div>\
				</div>\
			</div>',
        props:[],
        data: function(){
            return {
                yearHtml:""
            }
        },
        methods: {
        	 yearClick:function(){
	          	$(event.target.closest("div")).addClass('active').siblings().removeClass('active')
	          },
        	formatYearData: function () {     
        		//显示年份最低是2016年
				var now = new Date(),
				    year = now.getFullYear();
				var yearHtml = "";
				if(now.getMonth() >= 6){
				    yearHtml += '<div class="c-33 active" data-val="'+year+'"><a>'+year+"</a></div>";
				}
				for(i=year-1; i>=2016; i--){
				    if(i == (year-1) && now.getMonth() < 6){
				        yearHtml += '<div class="c-33 active" data-val="'+i+'"><a>'+i+"</a></div>";
				    }else{
				        yearHtml += '<div class="c-33" data-val="'+i+'"><a>'+i+"</a></div>";
				    }
				}
                  this.yearHtml = yearHtml;
           },
        },
        mounted: function(){
        	this.formatYearData();
        }
    });
    
})()