jp-floorlock-manage/pages/userTab/dataUser.vue

<template>
	<view>
		<u-navbar title="用户详情"></u-navbar>
		<view class="gradient-header">
			<view class="jpback">

			</view>
		</view>
		<view class="main">
			<view class="statistics ">
				<view class="data1">
					<view class="imgclass">
						<img class="img" src="@/assets/img/默认头像.png" mode=""></img>

					</view>
					<view class="item">
						<view class="name">
							<view>软件园</view>
							<view class="tag">停车用户</view>
						</view>
						<view class="value">
							<image class="img img1" src="@/assets/img/userTab/index1-2.svg" mode=""></image>
							123111
						</view>
						<view class="value">
							<image class="img img2" src="@/assets/img/userTab/index1-1.svg" mode=""></image>
							123111

						</view>
					</view>


				</view>
			</view>
			<!--end-->

			<view class="statistics ">
				<view class="data2">
					<view class="line line1">
						<view class="item1">
							累计停车时长

						</view>
						<view class="item">
							使用次数

						</view>
						<view class="item">
							异常次数

						</view>
					</view>
					<view class="line line2">
						<view class="item1">
							205h13m

						</view>
						<view class="item">
							22
						</view>
						<view class="item">
							2
						</view>
					</view>

				</view>
			</view>
			<!--end-->

			<view class="statistics ">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						<view>常用时段雷达图</view>

					</view>

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body3">
						<view class="body3">

							<view id="body3echart" class="body3echart">

							</view>

						</view>

					</jpContent>
				</view>
			</view>
			<!--end-->


			<view class="statistics ">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						<view>停留时长次数统计</view>

					</view>

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body4">
						<view class="body4">

							<view id="body4echart" class="body4echart">

							</view>

						</view>

					</jpContent>
				</view>
			</view>
			<!--end-->

			<view class="statistics ">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						<view>常用停车场</view>

					</view>

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body5">
						<view class="body5data">
							<view class="line">

								<view class="value value1">
									停车场
								</view>
								<view class="value value2">
									车主身份

								</view>
								<view class="value value3">
									使用次数

								</view>
								<view class="value value4">
									操作

								</view>

							</view>
							<view class="line line2">

								<view class="value value1">
									荆鹏软件园荆鹏软件园荆鹏软件园
								</view>
								<view class="value value2">
									地锁所有人

								</view>
								<view class="value value3">
									22

								</view>
								<view class="value value4">
									查看
								</view>

							</view>
							<view class="line line2">

								<view class="value value1">
									荆州院子
								</view>
								<view class="value value2">
									白名单用户

								</view>
								<view class="value value3">
									11

								</view>
								<view class="value value4">
									查看
								</view>

							</view>


						</view>

					</jpContent>
				</view>
			</view>
			<!--end-->

			<u-divider border-color="#CFD2D5">已经到底了</u-divider>

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

<script>
	import jpContent from '@/components/JPcontent.vue'
	import * as echarts from 'echarts';
	export default {
		components: {

			jpContent
		},
		data() {
			return {
				echartsList: {},
				jpContentMap: {
					body1: 2,
					body2: 2,
					body3: 2,
					body4: 2,
					body5: 2,
					body6: 2,
					body7: 2,
					body8: 2,
					body9: 2,
					body10: 2,
				},
			};
		},
		onLoad() {
		
		},
		onReady() {
			this.init();
		},methods: {
			init() {
				
				this.getbody3()
				this.getbody4()
			
			},
			getbody4(){
				var key = "body4echart"
				var myChart = this.echartsList[key];
				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(300 * 2),
						height: uni.upx2px(170 * 2)
					})
							
				}
				myChart.clear()
							
				var data1 = ['0.5小时', '2小时', '2-6小时','6小时以上']
				
				var option = {
					xAxis: {
						
						  type: 'category',
						
						 data: data1,
					
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					yAxis: {
						type: 'value',
						
						
					},
					grid: {
						top: 20,
						left: 0,
						right: 20,
						bottom: 0,
						containLabel: true
					},
					series: [{
						label: {
							show: true,
							position: 'top',
							color: "#307AF6"
						},
						itemStyle: {
							color: "#5A88E5"
						},
						data: [120, 200, 150,22],
						type: 'bar'
					}]
				};
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
			getbody3() {
				var key = "body3echart"
				var myChart = this.echartsList[key];
				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(300 * 2),
						height: uni.upx2px(170 * 2)
					})
			
				}
				myChart.clear()
			
				var data1 = ['0-7点', '7-14点', '14-24点']
				
				var option = {
					xAxis: {
						
						type: 'value',
						 boundaryGap: [0, 0.01]
					
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					yAxis: {
						
						  type: 'category',
						data: data1,
					},
					grid: {
						top: 20,
						left: 0,
						right: 20,
						bottom: 0,
						containLabel: true
					},
					series: [{
						label: {
							show: true,
							position:'right' ,
							color: "#307AF6"
						},
						itemStyle: {
							color: "#5A88E5"
						},
						data: [120, 200, 150],
						type: 'bar'
					}]
				};
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
		}
		
	}
</script>

<style lang="scss">
	.gradient-header {
		height: 0px;
	}

	.jpback {
		height: 268rpx;
		background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(203, 234, 255, 0) 100%);
	}

	.main {

		padding: 32rpx;

		.no_statistics {
			margin-bottom: 24rpx;
		}

		.statistics {
			border-radius: 8px;
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
			margin-bottom: 24rpx;
			padding: 40rpx;

			.title {
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;
				font-weight: bold;

				.img {
					width: 36rpx;
					height: 36rpx;
					vertical-align: middle;
					border-radius: 999px;

				}

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

					.change-img {
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
					}

					text {

						margin-left: 8rpx;
					}
				}


				.text {
					color: rgba(16, 16, 16, 1);
					font-size: 36rpx;
					margin-left: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;

					.tag {
						border-radius: 4px;
						border: 1px solid rgba(187, 187, 187, 1);
						color: rgba(51, 51, 51, 1);

						font-size: 24rpx;
						padding: 1px 8rpx;
						margin-left: 8rpx;
					}

				}

				.change {
					margin-left: 16rpx;
					font-size: 24rpx;
					color: #838383;

				}

				.check-all {
					margin-left: auto;
					color: rgba(131, 131, 131, 1);
					font-size: 24rpx;
				}
			}
		}
	}

	.data1 {
		display: flex;

		.imgclass {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 160rpx;
			height: 160rpx;

			.img {
				width: 160rpx;
				height: 160rpx;
			}

			border-radius: 4px;
			background-color: #E5E5E5;
		}

		.item {
			margin-left: 16rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.name {
				font-size: 40rpx;
				color: rgba(16, 16, 16, 1);
				display: flex;
				align-items: center;

				.tag {
					border-radius: 4px;
					background-color: rgba(255, 255, 255, 1);
					color: rgba(22, 119, 255, 1);
					font-size: 12px;
					border: 1px solid rgba(22, 119, 255, 1);
					padding: 1px 2px;
					margin-left: 8rpx;
				}
			}

			.value {
				display: flex;
				align-items: center;
				color: rgba(119, 119, 119, 1);
				font-size: 28rpx;

				.img {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}

				.img1 {}

				.img2 {}
			}
		}
	}

	.data2 {
		.line {
			display: flex;

			.item1 {
				width: 50%;
			}

			.item {
				width: 25%;
			}

		}

		.line1 {

			color: rgba(51, 51, 51, 1);

			font-size: 16px;
		}

		.line2 {
			color: rgba(16, 16, 16, 1);
			font-weight: bold;
			font-size: 24px;
		}
	}

	.body5data {
		
		.line {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.value {
				 
				padding: 16rpx 4rpx;
				color: rgba(51, 51, 51, 1);


			}
			.value1{
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.value1{
				
				width: 120px;
				padding-left: 16rpx;
			}
			.value2{
				width: 75px;
			}
			.value3{
				width: 60px;
				text-align: center;
			}
			.value4{
				width: 40px;
				

			}

			 
		}
		.line2{
			.value4{
				
				color: #1677FF;
			
			}
		}
		/* 隔行变色: 偶数行设置背景色 */
		.line:nth-child(odd) {
			background-color: #F2F2F2;
			/* 偶数行 */
		}

		.line:nth-child(even) {
			background-color: #FFFFFF
				/* 奇数行 */
		}

	}
</style>