qiniu/pages/admin/statistics/index.vue

<template>
	<div class="statistical-page" ref="container">
		<div class="navs">
			<div class="list">
				<div class="item" :class="time == 'today' ? 'on' : ''" @click="setTime('today')">
					{{$t(`今天`)}}
				</div>
				<div class="item" :class="time == 'yesterday' ? 'on' : ''" @click="setTime('yesterday')">
					{{$t(`昨天`)}}
				</div>
				<div class="item" :class="time == 'seven' ? 'on' : ''" @click="setTime('seven')">
					{{$t(`最近7天`)}}
				</div>
				<div class="item" :class="time == 'month' ? 'on' : ''" @click="setTime('month')">
					{{$t(`本月`)}}
				</div>
				<div class="item" :class="time == 'date' ? 'on' : ''" @click="dateTitle">
					<!-- <span class="iconfont icon-xiangxia"></span>
          <span v-for="(value, index) in renderValues" :key="index">
            {{ value }}</span
          > -->
					{{$t(`自定义`)}}
				</div>
			</div>
		</div>
		<div class="wrapper">
			<div class="title">
				{{ time == 'date'?'':title }}{{ where.type == 1 ? $t(`营业额（元）`) : $t(`订单量（份）`) }}
			</div>
			<div class="money">{{ time_price }}</div>
			<div class="increase acea-row row-between-wrapper">
				<div>
					{{ time == 'date'?'':title }}{{$t(`增长率`)}}：<span
						:class="increase_time_status === 1 ? 'red' : 'green'">{{ increase_time_status === 1 ? "" : "-" }}{{ growth_rate }}%
						<span class="iconfont" :class="
                increase_time_status === 1
                  ? 'icon-xiangshang1'
                  : 'icon-xiangxia2'
              "></span></span>
				</div>
				<div>
					{{ time == 'date'?'':title }}{{$t(`增长`)}}：<span
						:class="increase_time_status === 1 ? 'red' : 'green'">{{ increase_time_status === 1 ? "" : "-" }}{{ increase_time }}
						<span class="iconfont" :class="
                increase_time_status === 1
                  ? 'icon-xiangshang1'
                  : 'icon-xiangxia2'
              "></span></span>
				</div>
			</div>
		</div>
		<div class="chart">
			<div class="chart-title">
				{{$t(`单位`)}}（{{where.type == 1?$t(`元.`):$t(`份`)}}）
			</div>
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA"
				@touchmove="moveLineA" @touchend="touchEndLineA">
			</canvas>
		</div>
		<div class="public-wrapper">
			<div class="title">
				<span class="iconfont icon-xiangxishuju"></span>{{$t(`详细数据`)}}
			</div>
			<div class="nav acea-row row-between-wrapper">
				<div class="data">{{$t(`日期`)}}</div>
				<div class="browse">{{$t(`订单数`)}}</div>
				<div class="turnover">{{$t(`成交额`)}}</div>
			</div>
			<div class="conter">
				<div class="item acea-row row-between-wrapper" v-for="(item, index) in list" :key="index">
					<div class="data">{{ item.time }}</div>
					<div class="browse">{{ item.count }}</div>
					<div class="turnover">{{ item.price }}</div>
				</div>
			</div>
		</div>
		<!-- #ifdef H5 || APP-PLUS -->
		<uni-calendar ref="calendar" :date="info.date" :insert="info.insert" :lunar="info.lunar"
			:startDate="info.startDate" :endDate="info.endDate" :range="info.range" @confirm="confirm"
			:showMonth="info.showMonth" />
		<div class="mask" @touchmove.prevent v-show="current === true" @click="close"></div>
		<!-- #endif -->
		<!-- <Loading :loaded="loaded" :loading="loading"></Loading> -->
	</div>
</template>
<script>
	import uCharts from '../components/ucharts/ucharts'
	import uniCalendar from '../components/uni-calendar/uni-calendar.vue'
	var canvaLineA = null;
	// import Calendar from 'mpvue-calendar'
	// #ifdef MP-WEIXIN
	// import 'mpvue-calendar/src/style.css
	// #endif
	// #ifdef H5
	// import 'mpvue-calendar/src/browser-style.css'
	// #endif

	import {
		getStatisticsMonth,
		getStatisticsTime
	} from "@/api/admin";
	// import Loading from "@components/Loading";
	const year = new Date().getFullYear();
	const month = new Date().getMonth() + 1;
	const day = new Date().getDate();
	export default {
		name: "Statistics",
		components: {
			// Calendar,
			// uCharts
			uniCalendar
		},
		props: {},
		data: function() {
			return {
				value: [
					[year, month, day - 1],
					[year, month, day]
				],
				isrange: true,
				weekSwitch: false,
				ismulti: false,
				monFirst: true,
				clean: false, //简洁模式
				lunar: false, //显示农历
				renderValues: [],
				monthRange: [],
				current: false,
				where: {
					start: "",
					stop: "",
					type: ""
				},
				types: "", //类型|order=订单数|price=营业额
				time: "", //时间|today=今天|yesterday=昨天|month=本月
				title: "", //时间|today=今天|yesterday=昨天|month=本月
				growth_rate: "", //增长率
				increase_time: "", //增长率
				increase_time_status: "", //增长率
				time_price: "", //增长率
				loaded: false,
				loading: false,
				filter: {
					page: 1,
					limit: 10,
					start: "",
					stop: ""
				},
				list: [],
				// charts
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: '',
				"LineA": {
					"categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
					"series": [{
						"data": [35, 8, 25, 37, 4, 20]
					}]
				},
				info: {
					startDate: '',
					endDate: '',
					lunar: false,
					range: true,
					insert: false,
					selected: [],
					showMonth: false
				},
				type: '',
				before: '',
				after: ''
			};
		},
		watch: {
			"$route.params": function(newVal) {
				var that = this;
				if (newVal != undefined) {
					that.setType(newVal.type);
					that.setTime(newVal.time);
					that.getIndex();
				}
			}
		},
		onLoad: function(options) {
			this.type = options.type;
			if (options.before) {
				this.before = options.before;
			}
			if (options.after) {
				this.after = options.after;
			}
			this.setType(options.type);
			this.setTime(options.time);
			this.cWidth = uni.upx2px(690);
			this.cHeight = uni.upx2px(500);

			// this.handelRenderValues();
			// this.getIndex();
			this.getInfo();
			// this.$scroll(this.$refs.container, () => {
			// 	!this.loading && this.getInfo();
			// });
		},
		computed: {
			monthRangeText() {
				return this.monthRange.length ? this.$t(`固定`) : this.$t(`指定范围`);
			}
		},
		methods: {
			getIndex: function() {
				let tempDay = []
				let tempNum = []
				var that = this;
				getStatisticsTime(that.where).then(
					res => {
						var _info = res.data.chart,
							day = [],
							num = [];
						_info.forEach(function(item) {
							day.push(item.time);
							num.push(item.num);
						});
						that.growth_rate = res.data.growth_rate;
						that.increase_time = res.data.increase_time;
						that.increase_time_status = res.data.increase_time_status;
						that.time_price = res.data.time;

						res.data.chart.forEach((item, index) => {
							tempDay.push(item.time)
							tempNum.push(item.num)
						})
						that.LineA.categories = tempDay
						that.LineA.series[0].data = tempNum
						that.showLineA("canvasLineA", that.LineA);
					},
					error => {
						that.$util.Tips({
							title: error
						})
					}
				);
			},
			setTime: function(time) {
				let self = this
				this.time = time;
				var year = new Date().getFullYear(),
					month = new Date().getMonth() + 1,
					day = new Date().getDate();
				this.list = [];
				this.filter.page = 1;
				this.loaded = false;
				this.loading = false;
				switch (time) {
					case "today":
						this.where.start =
							new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
							1000;
						this.where.stop =
							new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
							1000 +
							24 * 60 * 60 -
							1;
						this.title = this.$t(`今天`);
						this.getIndex();
						this.getInfo();
						break;
					case "yesterday":
						this.where.start =
							new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
							1000 -
							24 * 60 * 60;
						this.where.stop =
							new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
							1000 -
							1;
						this.title = this.$t(`昨天`);
						this.getIndex();
						this.getInfo();
						break;
					case "month":
						this.where.start =
							new Date(year, new Date().getMonth(), 1).getTime() / 1000;
						this.where.stop = new Date(year, month, 1).getTime() / 1000 - 1;
						this.title = this.$t(`本月`);
						this.getIndex();
						this.getInfo();
						break;
					case "seven":
						this.where.start =
							new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
							1000 +
							24 * 60 * 60 -
							7 * 3600 * 24;
						this.where.stop =
							new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
							1000 +
							24 * 60 * 60 -
							1;
						this.title = this.$t(`最近7天`);
						this.getIndex();
						this.getInfo();
						break;
						// #ifdef MP
					case "date":
						let sArr = self.before.split('-')
						let aArr = self.after.split('-')
						let star = this.getTimestamp(sArr[0], sArr[1], sArr[2], 0, 0, 0)
						let stop = this.getTimestamp(aArr[0], aArr[1], aArr[2], 23, 59, 59)
						self.where.start = star
						self.where.stop = stop
						Promise.all([self.getIndex(), self.getInfo()]);
						break;
						// #endif
				}
			},
			getTimestamp(year, month, day, hour, min, sec) {
				return new Date(year, month - 1, day, hour, min, sec).getTime() / 1000;
			},
			setType: function(type) {
				switch (type) {
					case "price":
						this.where.type = 1;
						break;
					case "order":
						this.where.type = 2;
						break;
				}
			},
			dateTitle: function() {
				// #ifdef H5 || APP-PLUS
				this.$refs.calendar.open()
				this.time = 'date'
				// #endif
				// #ifdef MP
				uni.navigateTo({
					url: '/pages/admin/custom_date/index?type=' + this.type
				});
				// #endif
				// this.current = true;
			},
			close: function() {
				this.current = false;
			},
			getInfo: function() {
				var that = this;
				if (that.loading || that.loaded) return;
				that.loading = true;
				that.filter.start = that.where.start;
				that.filter.stop = that.where.stop;
				getStatisticsMonth(that.filter).then(
					res => {
						that.loading = false;
						that.loaded = res.data.length < that.filter.limit;
						that.list.push.apply(that.list, res.data);
						that.filter.page = that.filter.page + 1;
					},
					error => {
						that.$util.Tips({
							title: error
						})
					}
				);
			},
			// 创建charts
			showLineA(canvasId, chartData) {
				let _self = this
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					padding: [15, 15, 0, 15],
					legend: {
						show: false,
						padding: 5,
						lineHeight: 11,
						margin: 5,
					},
					dataLabel: true,
					dataPointShape: true,
					dataPointShapeType: 'hollow',
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 4,
						scrollShow: true,
						scrollAlign: 'left'
					},
					yAxis: {
						//disabled:true
						gridType: 'dash',
						splitNumber: 8,
						min: 0,
						max: 30,
						format: (val) => {
							return val.toFixed(0)
						} //如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					},
				});
			},
			// charts触摸事件
			touchLineA(e) {
				canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
			},
			// 日历确定
			confirm(e) {
				let self = this
				if (e.range.after && e.range.before) {
					let star = new Date(e.range.before + ' 00:00:00').getTime() / 1000
					let stop = new Date(e.range.after + ' 23:59:59').getTime() / 1000
					self.where.start = star
					self.where.stop = stop
					self.list = [];
					self.filter.page = 1;
					self.loaded = false;
					self.loading = false;
					Promise.all([self.getIndex(), self.getInfo()]);
				}
			},
		},
		onReachBottom() {
			this.getInfo();
		}
	};
</script>
<style>
	/*交易额统计*/
	.statistical-page .navs {
		width: 100%;
		height: 96upx;
		background-color: #fff;
		overflow: hidden;
		line-height: 96upx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
	}

	.statistical-page .navs .list {
		overflow-y: hidden;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}

	.statistical-page .navs .item {
		font-size: 32upx;
		color: #282828;
		margin-left: 60upx;
		display: inline-block;
	}

	.statistical-page .navs .item.on {
		color: #2291f8;
	}

	.statistical-page .navs .item .iconfont {
		font-size: 25upx;
		margin-left: 13upx;
	}

	.statistical-page .wrapper {
		width: 740upx;
		background-color: #fff;
		border-radius: 10upx;
		margin: 119upx auto 0 auto;
		padding: 50upx 60upx;
	}

	.statistical-page .wrapper .title {
		font-size: 30upx;
		color: #999;
		text-align: center;
	}

	.statistical-page .wrapper .money {
		font-size: 72upx;
		color: #fba02a;
		text-align: center;
		margin-top: 10upx;
	}

	.statistical-page .wrapper .increase {
		font-size: 28upx;
		color: #999;
		margin-top: 20upx;
	}

	.statistical-page .wrapper .increase .red {
		color: #ff6969;
	}

	.statistical-page .wrapper .increase .green {
		color: #1abb1d;
	}

	.statistical-page .wrapper .increase .iconfont {
		font-size: 23upx;
		margin-left: 15upx;
	}

	.statistical-page .chart {
		width: 690upx;
		background-color: #fff;
		border-radius: 10upx;
		margin: 23upx auto 0 auto;
		/* padding: 25upx 22upx 0 22upx; */
	}

	.statistical-page .chart .chart-title {
		padding: 20upx 20upx 10upx;
		font-size: 26upx;
		color: #999;
	}

	.statistical-page .chart canvas {
		width: 100%;
		height: 530rpx;
	}

	.statistical-page .chart .company {
		font-size: 26upx;
		color: #999;
	}

	.yd-confirm {
		background-color: #fff;
		font-size: unset;
		width: 540upx;
		height: 250upx;
		border-radius: 40upx;
	}

	.yd-confirm-hd {
		text-align: center;
	}

	.yd-confirm-title {
		color: #030303;
		font-weight: bold;
		font-size: 36upx;
	}

	.yd-confirm-bd {
		text-align: center;
		font-size: 28upx;
		color: #333333;
	}

	.yd-confirm-ft {
		line-height: 90upx;
		margin-top: 14px;
		border-top: 1upx solid #eee;
	}

	.yd-confirm-ft>a {
		color: #e93323;
	}

	.yd-confirm-ft>a.primary {
		border-left: 1upx solid #eee;
		color: #e93323;
	}

	.echarts {
		width: 100%;
		height: 550upx;
	}

	.calendar-wrapper {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 777;
		transform: translate3d(0, 100%, 0);
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	}

	.calendar-wrapper.on {
		transform: translate3d(0, 0, 0);
	}

	.statistical-page .wrapper .increase {
		font-size: 26upx;
	}

	.statistical-page .wrapper .increase .iconfont {
		margin-left: 0;
	}

	.public-wrapper .title {
		font-size: 30upx;
		color: #282828;
		padding: 0 30upx;
		margin-bottom: 20upx;
	}

	.public-wrapper .title .iconfont {
		color: #2291f8;
		font-size: 40upx;
		margin-right: 13upx;
		vertical-align: middle;
	}

	.public-wrapper {
		margin: 18upx auto 0 auto;
		width: 690upx;
		background-color: #fff;
		border-radius: 10upx;
		padding-top: 25upx;
	}

	.public-wrapper .nav {
		padding: 0 30upx;
		height: 70upx;
		line-height: 70upx;
		font-size: 24upx;
		color: #999;
	}

	.public-wrapper .data {
		width: 210upx;
		text-align: left;
	}

	.public-wrapper .browse {
		width: 192upx;
		text-align: right;
	}

	.public-wrapper .turnover {
		width: 227upx;
		text-align: right;
	}

	.public-wrapper .conter {
		padding: 0 30upx;
	}

	.public-wrapper .conter .item {
		border-bottom: 1px solid #f7f7f7;
		height: 70upx;
		font-size: 24upx;
	}

	.public-wrapper .conter .item .turnover {
		color: #d84242;
	}
</style>