com.kailaimei.carbon/pages/assess/assess.vue

<template>
	<view class="main">
		<!-- 头部 -->
		<status-nav></status-nav>
		<!-- 评估碳足迹 -->
		<view class="calculator-bg">
			<view class="bg-img">
				<image src="/static/count-bg.png" mode="widthFix"></image>
			</view>
			<view class="calculator calculator-other">
				<view class="assess">
					<view class="assess-title">
						<image src="/static/icon-title-01.png" mode="heightFix"></image>
						<view class="total-num">
							<view class="num" v-for="(item,index) in showTotal" :key="index">{{item}}</view>
							<image src="/static/kg.png" mode="heightFix"></image>
						</view>
					</view>
					<view class="assess-form">
						<!-- 柱状图 -->
						<view class="histogram">
							<view class="form-list">
								<view class="form-item">
									<text>{{subTotal[0]}}kg</text>
									<view :style="{'height':heightList[0]}"></view>
								</view>
								<view class="form-item">
									<text>{{subTotal[1]}}kg</text>
									<view :style="{'height':heightList[1]}"></view>
								</view>
								<view class="form-item">
									<text>{{subTotal[2]}}kg</text>
									<view :style="{'height':heightList[2]}"></view>
								</view>
								<view class="form-item">
									<text>{{subTotal[3]}}kg</text>
									<view :style="{'height':heightList[3]}"></view>
								</view>
								<view class="form-item">
									<text>{{subTotal[4]}}kg</text>
									<view :style="{'height':heightList[4]}"></view>
								</view>
							</view>
							<view class="form-title">
								<view>
									<image src="/static/icon-font-01.png" mode="heightFix"></image>
								</view>
								<view>
									<image src="/static/icon-font-02.png" mode="heightFix"></image>
								</view>
								<view>
									<image src="/static/icon-font-03.png" mode="heightFix"></image>
								</view>
								<view>
									<image src="/static/icon-font-04.png" mode="heightFix"></image>
								</view>
								<view>
									<image src="/static/icon-font-05.png" mode="heightFix"></image>
								</view>
							</view>
						</view>
						<!-- 饼图 -->
						<view class="pie-chart">
							<l-echart ref="chart" @finished="init"></l-echart>
						</view>
					</view>
					<view class="assess-title">
						<image src="/static/icon-title-02.png" mode="heightFix"></image>
					</view>
					<view class="assess-txt">
						<view class="">您全家一年的碳足迹（碳排放）为<text>{{total}}</text>kg，家庭人数</view>
						<view class="assess-btns">
							<view class="btn" @tap="changeNum('reduce')">
								<image src="/static/icon-reduce.png" mode="widthFix"></image>
							</view>
							<input type="number" @blur="averageEv" v-model="member">
							<view class="btn" @tap="changeNum('add')">
								<image src="/static/icon-add.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="">，人均碳足迹为<text>{{average}}</text>kg。</view>
					</view>
					<view class="assess-contrast">
						<!-- <image src="/static/assess.png" mode="widthFix"></image> -->
						<view class="assess-contrast-bg"></view>
						<view class="line"></view>
						<view class="list">
							<view class="item">
								<image src="/static/footprint.png" mode="heightFix" :style="{height:averageHeight>=235?'235px':averageHeight+'px'}"></image>
								<view>您的碳足迹为</view>
								<view><text>{{average}}</text>kg</view>
							</view>
							<view class="item">
								<image src="/static/footprint.png" mode="heightFix" style="height: 92px;"></image>
								<view>中国人均碳足迹为</view>
								<view><text>7100</text>kg</view>
							</view>
							<view class="item">
								<image src="/static/footprint.png" mode="heightFix" style="height: 207px;"></image>
								<view>美国人均碳足迹为</view>
								<view><text>16100</text>kg</view>
							</view>
							<view class="item">
								<image src="/static/footprint.png" mode="heightFix" style="height: 60px;"></image>
								<view>全球人均碳足迹为</view>
								<view><text>4700</text>kg</view>
							</view>
							<view class="item">
								<image src="/static/footprint.png" mode="heightFix" style="height: 30px;"></image>
								<view>应对气候变化全球人均目标碳足迹为</view>
								<view><text>2330</text>kg</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 导航 -->
				<tabbar :current='1'></tabbar>
			</view>
		</view>
		<!-- 轮播 -->
		<view class="banner">
			<swiper-pull></swiper-pull>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<text>中国绿色碳汇基金会低碳旅游专项基金监制，北京凯来美气候技术咨询有限公司开发。</text>
		</view>
	</view>
</template>

<script>
	import statusNav from '@/components/status-nav/status-nav.vue';
	import tabbar from '@/components/tabbar/tabbar.vue';
	import swiperPull from '@/components/swiper/swiper-pull.vue';
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js';
	export default {
		components: {
			statusNav,
			tabbar,
			swiperPull
		},
		data() {
			return {
				statusHeight: uni.getSystemInfoSync().statusBarHeight, //状态栏高度
				member: 1, //家庭成员
				total: 0, //总计
				subTotal: [], //小计
				average: 0, //平均值
				showTotal: [], //显示总计
				histogram: {}, //柱状图数据
				pie: {}, //饼图数据
				heightList: [], //柱状高度
				averageHeight:0, //足迹icon图片
			}
		},
		onLoad() {
			if (uni.getStorageSync('allTotal')) {
				this.total = uni.getStorageSync('allTotal');
				this.showTotal = this.total.toString().split('');
				// 计算平均值
				this.averageEv();
			}
			if (uni.getStorageSync('subTotal')) {
				this.subTotal = uni.getStorageSync('subTotal');
			}
			// 计算柱状高度
			let height01 = `${(this.subTotal[0]/this.total*280).toFixed(2)}%`;
			let height02 = `${(this.subTotal[1]/this.total*280).toFixed(2)}%`;
			let height03 = `${(this.subTotal[2]/this.total*280).toFixed(2)}%`;
			let height04 = `${(this.subTotal[3]/this.total*280).toFixed(2)}%`;
			let height05 = `${(this.subTotal[4]/this.total*280).toFixed(2)}%`;
			this.heightList = [height01, height02, height03, height04, height05];
			// 绘制饼图
			this.pieEv();
		},
		mounted() {
			this.$refs.chart.init(echarts, chart => {
				chart.setOption(this.pie);
			});
		},
		methods: {
			// 获取饼图数据
			pieEv() {
				this.pie = {
					tooltip: {
						trigger: 'item'
					},
					series: [{
						type: 'pie',
						color: [
							'#a6fea5',
							'#ffb0ae',
							'#92dede',
							'#ffdaad',
							'#8888ac'
						],
						radius: '50%',
						label: {
							fontSize: 15,
							color: '#000',
							fontWeight: 'bold'
						},
						data: [{
								value: this.subTotal[0],
								name: `${(this.subTotal[0]/this.total*100).toFixed(2)}%`
							},
							{
								value: this.subTotal[1],
								name: `${(this.subTotal[1]/this.total*100).toFixed(2)}%`
							},
							{
								value: this.subTotal[2],
								name: `${(this.subTotal[2]/this.total*100).toFixed(2)}%`
							},
							{
								value: this.subTotal[3],
								name: `${(this.subTotal[3]/this.total*100).toFixed(2)}%`
							},
							{
								value: this.subTotal[4],
								name: `${(this.subTotal[4]/this.total*100).toFixed(2)}%`
							}
						],
					}]
				}
			},
			
			// 绘制饼图
			init() {
				this.$refs.chart.init(echarts, chart => {
					chart.setOption(this.pie);
				});
			},
			
			
			// 改变数量
			changeNum(type) {
				if (type == 'reduce') {
					if (this.member > 1) {
						this.member--
					}
				}
				if (type == 'add') {
					this.member++
				}
				// 计算平均值
				this.averageEv();
			},

			// 计算平均值
			averageEv() {
				let averageNum = this.total / this.member * 1;
				this.average = averageNum.toFixed(2);
				this.averageHeight = Math.ceil((this.average*30)/2330*1);
				uni.setStorageSync('average', this.average);
			},
		}
	}
</script>

<style>

</style>