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 item-checked">
					当天
				</view>
				<view class="tabs-item">
					一周
				</view>
				<view class="tabs-item">
					当天
				</view>
				<view class="tabs-item">
					自定义
				</view>
			</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">
							2
						</view>
					</view>
					<view class="state-item state2">
						<view class="state-classify">
							进行中
						</view>
						<view class="state-number">
							3
						</view>
					</view>
					<view class="state-item state3">
						<view class="state-classify">
							已解决
						</view>
						<view class="state-number">
							33
						</view>
					</view>
					<view class="state-item state4">
						<view class="state-classify">
							已关闭
						</view>
						<view class="state-number">
							34
						</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="12">
								<view class="u-progress-content">

									<text class='u-progress-info1'>12%</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="15">
								<view class="u-progress-content">

									<text class='u-progress-info2'>15%</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="73">
								<view class="u-progress-content">

									<text class='u-progress-info3'>73%</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';

	export default {
		data() {
			return {
				myChart: null,
				background: {
					backgroundColor: '#1677FF'
				}
			}
		},
		onReady() {
			this.getBarCharts();
		},
		methods: {
			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;
	}

	/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>