jp-housekeep-electric/pages/workOrderManagement/workOrderStatistics.vue

<template>
	<view>
		<u-navbar title="工单统计" title-color="#fff" :background="background" back-icon-color="#ffffff"></u-navbar>

		<view class="main">
			<!-- 标签 -->
			<view class="tabs">
				<view class="tabs-item" v-for="(item,index) in tabsList" :key="index"
					:class="tabsIndex==index ? 'item-checked' : ''" @click="tabsClick(item,index)">
					{{item}}
				</view>
			</view>
			
			<!-- 日期范围 -->
			<view class="example-body" v-if="show">
				<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" @change="dateChange" />
			</view>
			
			<!-- 数据统计 -->
			<view class="data-statistics">
				<view class="title">
					数据统计
				</view>
				<view class="state">
					<view class="state-item state1">
						<view class="state-classify">
							待指派
						</view>
						<view class="state-number">
							{{createdNum}}
						</view>
					</view>
					<view class="state-item state2">
						<view class="state-classify">
							进行中
						</view>
						<view class="state-number">
							{{dispatchedNum}}
						</view>
					</view>
					<view class="state-item state3">
						<view class="state-classify">
							已解决
						</view>
						<view class="state-number">
							{{endedNum}}
						</view>
					</view>
					<view class="state-item state4">
						<view class="state-classify">
							已关闭
						</view>
						<view class="state-number">
							{{closedNum}}
						</view>
					</view>
				</view>
			</view>
			<!-- 工单状态 -->
			<view class="workOrder-state">
				<view class="title">
					工单状态
				</view>
				<view class="progress">
					<view class="progress-item">
						<view class="circle-progress">
							<u-circle-progress active-color="#FF7B00" width="136" :percent="createdPercent">
								<view class="u-progress-content">

									<text class='u-progress-info1'>{{createdPercent}}%</text>
								</view>
							</u-circle-progress>
						</view>
						<view class="state">
							待指派
						</view>
					</view>
					<view class="progress-item">
						<view class="circle-progress">
							<u-circle-progress active-color="#008FA9" width="136" :percent="dispatchedPercent">
								<view class="u-progress-content">

									<text class='u-progress-info2'>{{dispatchedPercent}}%</text>
								</view>
							</u-circle-progress>
						</view>
						<view class="state">
							进行中
						</view>
					</view>
					<view class="progress-item">
						<view class="circle-progress">
							<u-circle-progress active-color="#18C272" width="136" :percent="endedPercent">
								<view class="u-progress-content">

									<text class='u-progress-info3'>{{endedPercent}}%</text>
								</view>
							</u-circle-progress>
						</view>
						<view class="state">
							已解决
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 每月工单数量 -->
		<view class="workOrder-amount">
			<view class="title">
				每月工单数量
			</view>
			<view class="chat">
				<view id="barEcharts" style="min-height:692rpx;">

				</view>
				<!-- <image class="chat-img" src="@/assets/img/AUgyKM0@1x2.png" mode=""></image> -->

			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	import {
		parseUnixTime,
		beforeTimeStamp,
		getWeek
	} from '@/apis/utils'
	import * as API_workOrder from '@/apis/pagejs/workOrder.js'

	export default {
		data() {
			return {
				range: [],
				createdPercent: 0,
				dispatchedPercent: 0,
				endedPercent: 0,
				createdNum: 0, //待指派
				dispatchedNum: 0, //进行中
				endedNum: 0, //已解决
				closedNum: 0, //已关闭
				workForm: {
					qkey: '',
					startDate: '',
					endDate: ''
				}, //工单数据查询
				today: '', //当天
				weekStart: '', //一周
				weekEnd: '',
				monthStart: '', //一月
				monthEnd: '',
				show: false,
				tabsList: ['当天','一周','一月','自定义'], //时间标签list
				tabsIndex: 0,
				myChart: null,
				background: {
					backgroundColor: '#1677FF'
				}
			}
		},
		onLoad() {
			this.today = parseUnixTime(new Date(), '{y}-{m}-{d}');
			
			const today = new Date();
			const firstDay = new Date(today.setDate(today.getDate() - today.getDay() + 1));
			const lastDay = new Date(today.setDate(today.getDate() - today.getDay() + 7));
			this.weekStart = parseUnixTime(firstDay, '{y}-{m}-{d}');
			this.weekEnd = parseUnixTime(lastDay, '{y}-{m}-{d}');
			
			const start = new Date(today.getFullYear(), today.getMonth(), 1);
			const end = new Date(today.getFullYear(), today.getMonth() + 1, 0);
			this.monthStart = parseUnixTime(start, '{y}-{m}-{d}');
			this.monthEnd = parseUnixTime(end, '{y}-{m}-{d}');
			console.log('当天:'+this.today+'\n'+'一周:'+this.weekStart+'至'+this.weekEnd+'\n'
				+'一月:'+this.monthStart+'至'+this.monthEnd)
				
			this.workForm.startDate = this.today;
			this.workForm.endDate = this.today;
			this.getRptByStatus();
		},
		onReady() {
			this.getBarCharts();
		},
		watch: {
			range(newval) {
				// console.log('范围选:', this.range);
			}
		},
		methods: {
			dateChange(e) {
				// console.log(e);
				if(e.length != 0) {
					this.workForm.startDate = e[0];
					this.workForm.endDate = e[1];
					this.getRptByStatus();
				}
			},
			maskClick(e){
				// console.log('maskClick事件:', e);
			},
			getRptByStatus() {
				this.createdNum = 0;
				this.dispatchedNum = 0;
				this.endedNum = 0;
				this.closedNum = 0;
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_workOrder.rptByStatus(this.workForm).then((res) => {
					uni.hideLoading();
					var list = res.data;
					if(list != null) {
						for (var i = 0; i < list.length; i++) {
							if(list[i].status == 'created') {
								this.createdNum = list[i].rpt_count;
							}
							if (list[i].status == 'dispatched') {
								this.dispatchedNum = list[i].rpt_count;
							}
							if (list[i].status == 'ended') {
								this.endedNum = list[i].rpt_count;
							}
							if (list[i].status == 'closed') {
								this.closedNum = list[i].rpt_count;
							}
						}
					}
					
					var num = this.createdNum + this.dispatchedNum + this.endedNum;
					if(this.createdNum != 0) {
						this.createdPercent = this.createdNum/num*100;
					} else {
						this.createdPercent = 0;
					}
					if(this.dispatchedNum != 0) {
						this.dispatchedPercent = this.dispatchedNum/num*100;
					} else {
						this.dispatchedPercent = 0;
					}
					if(this.endedNum != 0) {
						this.endedPercent = this.endedNum/num*100;
					} else {
						this.endedPercent = 0;
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//选择时间
			tabsClick(item,index) {
				this.tabsIndex = index;
				if(index != 3) {
					this.show = false;
					
					if(index == 0) {
						this.workForm.startDate = this.today;
						this.workForm.endDate = this.today;
					} else if(index == 1) {
						this.workForm.startDate = this.weekStart;
						this.workForm.endDate = this.weekEnd;
					} else {
						this.workForm.startDate = this.monthStart;
						this.workForm.endDate = this.monthEnd;
					}
					this.getRptByStatus();
				} else {
					this.show = true;
				}
			},
			//每月工单数量图
			getBarCharts(list) {
				if (!this.myChart) {
					this.myChart = echarts.init(document.getElementById('barEcharts'), null, {
						width: uni.upx2px(700),
						height: uni.upx2px(692)
					});
				}
				this.myChart.clear();

				var data1 = ['1月','2月','3月','4月','5月','6月'];
				var dataX = [2,1,0,1,3,0];
				var dataC = [3,1,1,0,2,1];
				var dataS = [5,2,1,1,5,1];
				
				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {},
					grid: {
						top: '6%',
						left: '3%',
						right: '8%',
						bottom: '8%',
						containLabel: true
					},
					xAxis: {
						type: 'value'
					},
					yAxis: {
						type: 'category',
						data: data1
					},
					barGap: '0',
					series: [{
							name: '新增工单',
							type: 'bar',
							data: dataX,
							itemStyle: {
								color: '#91cc75'
							}
						},
						{
							name: '处理工单',
							type: 'bar',
							data: dataC,
							itemStyle: {
								color: '#5470c6'
							}
						},
						{
							name: '剩余工单',
							type: 'bar',
							data: dataS,
							itemStyle: {
								color: '#fac858'
							}
						}
					]
				}
				console.log(option)
				this.myChart.setOption(option);
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 100rpx;
	}

	::v-deep.uicon-nav-back {
		color: #FFF !important;

	}

	.main {
		background: linear-gradient(180deg, rgba(22, 119, 255, 1) 0%, rgba(22, 119, 255, 0) 100%);
		height: 720rpx;

		// 标签
		.tabs {
			display: flex;
			justify-content: space-between;
			padding: 24rpx 32rpx;

			.tabs-item {
				width: 144rpx;
				line-height: 56rpx;
				text-align: center;
				color: rgba(255, 255, 255, 0.6);
			}

			.item-checked {
				border: 1px solid rgba(255, 255, 255, 1);
				color: rgba(255, 255, 255, 1);
				border-radius: 50px;
			}
		}

		// 数据统计
		.data-statistics {
			margin: 24rpx 32rpx;
			border-radius: 8px;
			background-color: rgba(255, 255, 255, 1);
			padding: 24rpx;

			.title {
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
				font-weight: bold;
			}

			.state {
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;

				.state-item {
					width: 144rpx;
					height: 144rpx;
					border-radius: 8px;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					padding: 24rpx;
					font-weight: bold;

					.state-classify {

						font-size: 32rpx;
					}

					.state-number {
						margin-top: 8rpx;
						font-size: 40rpx;
					}
				}

				.state1 {
					background: linear-gradient(180deg, rgba(255, 174, 0, 1) 0%, rgba(255, 123, 0, 1) 100%);
				}

				.state2 {
					background: linear-gradient(178.54deg, rgba(50, 204, 213, 1) 0%, rgba(0, 143, 169, 1) 99.73%);
				}

				.state3 {
					background: linear-gradient(180deg, rgba(24, 194, 114, 1) 0%, rgba(0, 148, 79, 1) 100%);
				}

				.state4 {
					background: linear-gradient(180deg, rgba(187, 187, 187, 1) 0%, rgba(153, 153, 153, 1) 100%);
				}
			}
		}

		// 工单状态
		.workOrder-state {
			border-radius: 8px;
			background-color: rgba(255, 255, 255, 1);
			margin: 24rpx 32rpx;
			padding: 24rpx;

			.title {
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
				font-weight: bold;
			}

			.progress {
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;

				.progress-item {
					text-align: center;

					.state {
						color: rgba(51, 51, 51, 1);
						margin-top: 16rpx;
					}
				}

				.u-progress-info1 {
					color: #FF7B00;

					font-weight: bold;
				}

				.u-progress-info2 {
					color: #008FA9;

					font-weight: bold;
				}

				.u-progress-info3 {
					color: #18C272;

					font-weight: bold;
				}
			}
		}


	}

	// 每月工单数量
	.workOrder-amount {
		border-radius: 8px;
		background-color: rgba(255, 255, 255, 1);
		margin: 24rpx 32rpx;
		padding: 24rpx 0;

		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 36rpx;
			font-weight: bold;
			padding: 0 24rpx;
		}

		.chat {
			width: 100%;
			height: 692rpx;
			margin-top: 54rpx;

			.chat-img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>