264 lines
7.8 KiB
Vue
264 lines
7.8 KiB
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>
|