RedDragonfly/pages/statistics/statistics.vue

<template>
	<view class="statistics">
		<view class="top">
			<view class="time">
				<view class="text">
					开始时间:
				</view>
				<uni-datetime-picker type="date" :clear-icon="false"
					v-model="BeginSingle" @change='change1' />
			</view>
			<view class="time">
				<view class="text">
					结束时间:
				</view>
				<uni-datetime-picker type="date" :clear-icon="false"
					v-model="FinishSingle" @change='change2' />
			</view>
		</view>
		<view class="bom">
			<view class="wu" v-if="wu">
				此段时间暂无数据
			</view>
			<view class="pie">
				<view class="text" @click="unit = !unit">
					{{ unit ? '单位: 箱' : '单位: 吨'}}
				</view>
				<qiun-data-charts type="pie" :opts="opts" :tapLegend='false' :chartData="data" :canvas2d="true" canvasId="kuhCWprwlKvrkiRCafgDvemkjMpuflUb"/>
				<view class="legend">
					<view class="btn" v-for="(v,i) in chartData" :key="i" :style="{backgroundColor: opts.color[i]}"
						@click="$goBack(2,'/pages/statistics/particulars?name='+v.typeName + '&startTime='+BeginSingle+'&endTime=' + FinishSingle + '&id='+name + '&sum=' + v.Num)">
						<view class="">
							{{v.typeName}}
						</view>
						<view class="">
							{{ unit ? v.Num : v.ton.toFixed(2) }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		statistics
	} from '../../api/statistics.js'
	export default {
		data() {
			return {
				wu: false,
				unit: true,
				name: '', // 标题
				BeginSingle: '', // 开始时间
				FinishSingle: '', // 结束时间
				chartData: [],
				data: {
					series: [{
						data: [{}]
					}]
				},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					dataPointShape: false,
					dataLabel: false,
					padding: [5, 5, 5, 5],
					enableScroll: false,
					legend: {
						show: false
					},
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			};
		},
		onLoad(options) {
			this.name = options.name
			if (this.name) {
				uni.setNavigationBarTitle({
					title: this.name == 1 ? '产能统计' : '出库统计'
				});
			}
		},
		created() {
			this.getTime()
		},
		mounted() {
			this.getData()
		},
		computed: {
			...mapState({
				user: store => store.user
			})
		},
		methods: {
			change1(e) {
				this.BeginSingle = e
				this.getData()
			},
			change2(e) {
				this.FinishSingle = e
				this.getData()
			},
			async getData() {
				uni.showLoading({
					title: '加载中'
				});
					const res = await statistics({
						type: this.name,
						startTime: this.BeginSingle, // 开始时间
						endTime: this.FinishSingle, // 结束时间
						accessToken: this.user.token, // token
						account: this.user.account // 用户名
					})
					uni.hideLoading();
					this.chartData = res.data.list
					if(this.chartData.length === 0){
						this.wu = true
					}
					this.setdata(res.data.list)
			},
			//整理数据
			setdata(list) {
				let that = this
				let Data = []
				list.forEach(v => {
					Data.push({
						name: v.typeName,
						value: v.Num
					})
				})
				that.data.series = [{
					data: Data
				}]
			},
			// 获取时间
			getTime() {
				let date = new Date();
				let	year = date.getFullYear();
				let	month = date.getMonth() + 1;
				let	month1 = date.getMonth();
				let	day = date.getDate();
					month >= 1 && month <= 9 ? (month = "0" + month) : "";
					month1 >= 1 && month1 <= 9 ? (month1 = "0" + month1) : "";
					day >= 0 && day <= 9 ? (day = "0" + day) : "";
				let timer = year + '-' + month + '-' + day;
				let timer1 = year + '-' + month1 + '-' + day;
				this.BeginSingle = timer1;
				this.FinishSingle = timer
			}
		}
	}
</script>

<style lang="scss">
	.statistics {
		height: 100%;

		.top {
			height: 180rpx;
			padding: 30rpx;
			border-bottom: 1rpx solid #cecece;

			.time {
				display: flex;
				align-items: center;

				&:first-child {
					margin-bottom: 40rpx;
				}

				.text {
					width: 30%;
				}
			}
		}

		.bom {
			height: calc(100%-180rpx);
			padding: 30rpx;
			.wu{
				text-align: center;
				margin-top: 30rpx;
			}
			.pie {
				height: 50%;

				.text {
					color: #4f9ce3;
				}

				.legend {
					margin-top: 40rpx;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;

					.btn {
						padding: 5rpx 30rpx;
						text-align: center;
						color: #fff;
						border-radius: 10rpx;
						margin-right: 20rpx;
						margin-top: 15rpx;
						&:last-child {
							margin-right: 0;
						}
					}
				}
			}
		}
	}
</style>