carbon-statistics/pages/index/index.vue

<template>
	<view class="content">
		<u-form :model="form" ref="uForm"  label-width="150">
			<u-card padding="0" :border="false" :foot-border-top="false" :head-border-bottom="false" >
				<view class="" slot="body">
						<u-form-item class="form-item" label="地区">
							<u-picker v-model="regionshow" mode="region" :default-region="defaultRegion" @confirm="regionConfirm" :params="regionParams"></u-picker>
							<select-addr
							ref="addr"
							@getAddr="getAddr"
							class="normal"
							>								
							</select-addr>
						</u-form-item>
						<u-form-item class="form-item" label="开发年份">
							<u-picker v-model="devyearshow" mode="selector" :range="arrYear" :default-selector="[3]" @confirm="devyearConfirm"></u-picker>
							<view class="form-item-con" @click="devyearshow = true" v-if="!form.date">全部</view>
							<view class="form-item-con" @click="devyearshow = true">{{form.date}}</view>
						</u-form-item>
						<u-form-item class="form-item" label="售卖年份">
							<u-picker v-model="sellyearshow" mode="selector" :range="arrYear" :default-selector="[1]" @confirm="sellyearConfirm"></u-picker>
							<view class="form-item-con" @click="sellyearshow = true" v-if="!form.saleDate">全部</view>
							<view class="form-item-con" @click="sellyearshow = true">{{form.saleDate}}</view>
						</u-form-item>					
				</view>
			</u-card>
			<u-card padding="0" :border="false" :foot-border-top="false" :head-border-bottom="false" class="statistics">
				<view class="" slot="body">
					
					<view class="title">
						<view class="title-left">统计</view>
						<view class="title-right">
							<text v-if="showText">{{showText}},</text>
							<text v-if="form.province!='选择地区'">{{form.province}},</text>
							<text>{{form.date||'全部'}}年<text v-if="!form.date">份</text>开发,</text>
							<text>{{form.saleDate||'全部'}}年<text v-if="!form.saleDate">份</text>售卖,</text>
							<text v-if="
							form.province!='选择地区'
							|| form.date!='请选择'
							|| form.saleDate!='请选择'
							">的单株碳汇统计</text>
						</view>
					</view>
					<view class="statistics-block">
						<view class="statistics-block-til">已经开发的</view>
						<view class="statistics-item-wrap">
							<view class="statistics-item">
								<view class="statistics-item-til">已开发林户(户)</view>
								<view class="statistics-item-con">{{info.farmerNum||''}}</view>
							</view>
							<view class="statistics-item">
								<view class="statistics-item-til">已开发株数(株)</view>
								<view class="statistics-item-con">{{info.treeTotal||''}}</view>
							</view>
						</view>
						<view class="statistics-item-wrap">
							<view class="statistics-item">
								<view class="statistics-item-til">已开发涉及金额(元)</view>
								<view class="statistics-item-con">{{info.totalAmount||''}}</view>
							</view>
						</view>
					</view>
					<view class="statistics-block">
						<view class="statistics-block-til">已经售卖的</view>
						<view class="statistics-item-wrap">
							<view class="statistics-item">
								<view class="statistics-item-til">已有售出户数(户)</view>
								<view class="statistics-item-con">{{info.soldFarmerNum||''}}</view>
							</view>
							<view class="statistics-item">
								<view class="statistics-item-til">已有售出株数(株)</view>
								<view class="statistics-item-con">{{info.soldNum||''}}</view>
							</view>
						</view>
						<view class="statistics-item-wrap">
							<view class="statistics-item">
								<view class="statistics-item-til">已售出涉及金额(元)</view>
								<view class="statistics-item-con">{{info.soldAmount||''}}</view>
							</view>
						</view>
					</view>
					<view class="statistics-block">
						<view class="statistics-block-til">还剩余的</view>
						<view class="statistics-item-wrap">
							<view class="statistics-item">
								<view class="statistics-item-til">未有售出户数(户)</view>
								<view class="statistics-item-con">{{info.canSoldFarmerNum||''}}</view>
							</view>
							<view class="statistics-item">
								<view class="statistics-item-til">剩余可售卖株数(株)</view>
								<view class="statistics-item-con">{{info.canSoldNum||''}}</view>
							</view>
						</view>
						<view class="statistics-item-wrap">
							<view class="statistics-item">
								<view class="statistics-item-til">剩余涉及金额(元)</view>
								<view class="statistics-item-con">{{info.canSoldAmount||''}}</view>
							</view>
						</view>
					</view>
					
				</view>
			</u-card>
		</u-form>
	</view>
</template>

<script>
	import selectAddr from '@/components/select-addr/select-addr.vue'
	import {config} from '@/common/config.js'
	export default {
		components:{
			selectAddr
		},
		data() {
			return {
				regionshow:false,
				devyearshow:false,
				sellyearshow:false,
				defaultRegion:['贵州省'],				
				form: {
					province:'选择地区',
					// provinceCode:'',
					date:'',
					saleDate:'',
					// cityId:'',
					// countyId:'',
					// townId:'',
					villageId:'',
					textArray:[],
					areaType:0,
				},				
				// timeParams: {
				// 	year: true,
				// 	month: false,
				// 	day: false,
				// 	hour: false,
				// 	minute: false,
				// 	second: false
				// },
				regionParams: {
					province: true,
					city: false,
					area: false
				},
				info:new Object(),
				arrYear:[],
				showText:'',
			}
		},
		onLoad() {  
			let myDate = new Date();			
			let year = myDate.getFullYear();
			this.form.date=year-1;
			
			//获取某一年份到当前年份的所有年份
			var thisYear = myDate.getFullYear();  // 获取当年年份
			var Section = thisYear - 1976;  // 声明一个变量 获得当前年份至想获取年份差 eg.1976
			for(var i = 0;i<=Section;i++){
			    this.arrYear.push(thisYear--)
			}; // 遍历并添加年份到数组 arrYear里便是1976年到当前的所有年份了
			this.arrYear.unshift('全部');

			// 调用getInfo接口
			this.getInfo();
			
			
		},
		onReady() {
			// 预读取地址数据
			this.$u.get(config.addrApi,{}).then(res => {
				if (res.retHead.errCode == 0) {
					uni.setStorageSync('addrData', res.retBody);
				} else {
					this.$api.msg(res.retHead.errMsg)					
				}
			});
			
		},
		methods: {
			getInfo:function(){
				this.$u.api.getInfo(this.form).then(res => {
					console.log('getInfo',JSON.parse(JSON.stringify(res.retBody)));
					this.info = res.retBody;
				}).catch(err=>{
					console.log(err)
				});
			},
			regionConfirm:function(e){
				console.log('regionConfirm',e);
				this.form.province = e.province.label;
				this.form.provinceCode = e.province.value;
				this.getInfo();
			},
			devyearConfirm:function(e){
				// console.log('devyearConfirm',e);
				// console.log('devyearConfirm arrYear',this.arrYear[e]);
				if(this.arrYear[e]=='全部'){
					this.form.date = '';
				}else{
					this.form.date = this.arrYear[e];
				}
				
				this.getInfo();
			},
			sellyearConfirm:function(e){
				// console.log('sellyearConfirm',e.year,);
				console.log('sellyearConfirm arrYear',this.arrYear[e]);
				if(this.arrYear[e]=='全部'){
					this.form.saleDate = '';
				}else{
					this.form.saleDate = this.arrYear[e];
				};
				if(this.arrYear[e]<this.form.date){
					this.$u.toast('不能小于开发年份!');
					this.form.saleDate = '';
					return false;
				};
				this.getInfo();
			},
			//获取地址选择组件数据
			getAddr(data){
				console.log('getAddr',JSON.parse(JSON.stringify(data)))
				// this.form.cityId = data.cityId;
				// this.form.countyId = data.countyId;
				// this.form.townId = data.townId;
				// this.form.villageId = data.villageId;
				this.form.textArray=data.textArray;
				let showTextIndex = data.textArray.length -1;
				// console.log(this.form.textArray[showTextIndex]);
				if(this.form.textArray[showTextIndex]){this.showText=this.form.textArray[showTextIndex]};
				this.form.areaType=data.addrLevel;
				if(this.form.areaType == 2){
					this.form.villageId = data.cityId;
				}else if(this.form.areaType == 3){
					this.form.villageId = data.countyId;
				}else if(this.form.areaType == 4){
					this.form.villageId = data.townId;
				}else if(this.form.areaType == 5){
					this.form.villageId = data.villageId;
				}else{
					this.form.villageId = "";
				};
				this.getInfo();
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import url('./index.css');
</style>