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

(function(){
    Vue.component('renew-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="ml10 filter-title mt20">统计维度</div>\
				<div class="div-content">\
					<div class="mt20 div-group-btn c-row ml40 mr10">\
						<div class="div-btn c-33" :class="{\'active\': lowCode==\'\'}" @click="contentClick(\'\', \'所有居民\')">\
							<a href="#" class="f-fs14">所有居民</a>\
						</div>\
						<div class="div-btn c-33" :class="{\'active\': lowCode==3}" @click="contentClick(3, \'65岁以上签约\')">\
							<a href="#" class="f-fs14">65岁以上签约</a>\
						</div>\
						<div class="div-btn c-33" :class="{\'active\': lowCode==1}" @click="contentClick(1, \'高血压\')">\
							<a href="#" class="f-fs14">高血压</a>\
						</div>\
					</div>\
					<div class="mt20 div-group-btn c-row ml40 mr10">\
						<div class="div-btn c-33" :class="{\'active\': lowCode==2}" @click="contentClick(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>=2017; i--){
					this.years.push(i);
				}
			},
			methods: {
				 yearClick:function(val){
				  this.chooseYear = val;
				 },
				 contentClick:function(lowCode, name){
					 this.lowCode = lowCode;
					 this.analysisName = name;
				 },
				 resetClick:function(){
					this.lowCode = '';
					this.chooseYear=this.years[0]
				 },
				 confirmClick:function(){
					 var vm = this;
					 
					//触发刷新
					this.$emit('vuedals:close', {
						chooseYear: vm.chooseYear,
						lowCode: vm.lowCode,
						name: vm.analysisName
					});
				 },
			}
		});
		
	})()