jp-floorlock-manage/pages/deviceTab/dataLock.vue

<template>
	<view>
		<u-navbar :title="title" :backIconColor="'#ffffff'" title-color="#ffffff"
			:background="backgroundObj"></u-navbar>
		<view class="gradient-header">
			<view class="jpback">

			</view>
		</view>
		<view class="main">
			<view class="statistics ">
				<view class="data1">
					<view class="item">
						<view class="line">
							<view class="name">
								{{info.name}}
							</view>
							<view class="item-tags">
								<view class="tag tag1" :class="'typeN typeN'+info.type">
									{{info.typeN}}
							
								</view>
								<view class="tag" :class="'statusN statusN'+info.status">
									{{info.statusN}}
							
								</view>
								<view class="tag" :class="'lockStatusN lockStatusN'+info.lockStatus">
									{{info.lockStatusN}}
								</view>
							</view>
						</view>
						<view class="line">
							编号：{{info.lockNo}}
						</view>
					</view>
					<view class="value" v-if="0">
						<u-button type="primary" size="mini" shape="circle">
							<img class="img" src="@/assets/img/button/lock.svg" alt="">
							降锁
						</u-button>
					</view>
				</view>
			</view>
			<view class=" no_statistics">
				<view class="data2">
					<view class="top">
						<view class="item">
							<view class="name">
								停车时长
							</view>
							<view class="value">
								5h13m
							</view>
						</view>
						<view class="item">
							<view class="name">
								使用率
							</view>
							<view class="value">
								77.22%
							</view>
						</view>
						<view class="item">
							<view class="name">
								异常次数
							</view>
							<view class="value">
								2
							</view>
						</view>
					</view>
					<view class="body">
						<u-radio-group v-model="radiovalue" @change="radioGroupChange">
							<u-radio @change="radioChange" v-for="(item, index) in radiolist" :key="index"
								:name="item.value">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>

			<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 class="tag">2025年1月<u-icon name="arrow-down"></u-icon></view>

					</view>

				</view>

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

							<view id="body2line1" class="body2line">

							</view>

						</view>



					</jpContent>
				</view>
			</view>

			<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.body1">
						<view class="body1pieChart">

							<view id="body1pie1" class="body1pie">

							</view>

						</view>



					</jpContent>
				</view>
			</view>

			<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="body3barChart">

							<view id="body3bar1" class="body3bar">

							</view>

						</view>



					</jpContent>
				</view>
			</view>

			<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="body4pieChart">

							<view id="body4pie1" class="body4pie">

							</view>

						</view>



					</jpContent>
				</view>
			</view>

			<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>高频使用用户TOP5</view>

					</view>

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body5">
						<view class="body5data">
							<view class="line">
								<view class="data">
									<view class="item">
										王二
									</view>
									<view class="value">
										鄂DDT1268

									</view>
									<view class="value">
										28次

									</view>
								</view>
								<view class="goto">
									<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
								</view>
							</view>
							<view class="line">
								<view class="data">
									<view class="item">
										王三
									</view>
									<view class="value">
										鄂DDT1268

									</view>
									<view class="value">
										8次

									</view>
								</view>
								<view class="goto">
									<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
								</view>
							</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 class="check-all">查看全部<u-icon name="arrow-right"></u-icon></view>

					</view>

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body7">
						<view class="body7data">
							<view class="line">

								<view class="value">
									用户姓名
								</view>
								<view class="value">
									车主身份

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

								</view>

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

								<view class="value">
									孙培军
								</view>
								<view class="value">
									车位所有人

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

								</view>

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

								<view class="value">
									刘洋
								</view>
								<view class="value">
									白名单用户

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

								</view>

							</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 class="check-all">查看全部<u-icon name="arrow-right"></u-icon></view>

					</view>

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body6">
						<view class="body6main">
							<view class="line" v-for="(item,index) in abnormalRecordsList" :key="index">
								<view class="abnormal-item">
									<!-- @click="gotoUrl('/pages/abnormal/abnormalAlarmDetails?id='+item.id)"
								 -->
									<view class="item-title">

										<view class="name">
											<span v-if="item.level==1" class="level level1 ">一级</span>
											<span v-if="item.level==2" class="level level2">二级</span>

											{{item.content}}
										</view>
										<view class="date"
											style="display: flex;    justify-content: space-between;margin-top: 4rpx;">
											<view>{{item.title}}</view>
											<view>{{item.createTime}}</view>

										</view>
									</view>

								</view>
								<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
							</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 class="check-all">查看全部<u-icon name="arrow-right"></u-icon></view>

					</view>

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body8">
						<view class="body8main">
							<view class="line">
								<view class="value">
									类型

								</view>
								<view class="value">
									设备编号

								</view>
								<view class="value">
									设备地址


								</view>


							</view>
							<view class="line">
								<view class="value">
									智能地锁

								</view>
								<view class="value">
									JPDJ01-0002


								</view>
								<view class="value">
									软件园软件园软件园软件园软件园软件园



								</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';
	import * as API from '@/apis/pagejs/deviceTab.js'
	
	export default {
		components: {

			jpContent
		},
		data() {
			return {
				id:"",
				info:{},
				echartsList: {},
				jpContentMap: {
					body1: 2,
					body2: 2,
					body3: 2,
					body4: 2,
					body5: 2,
					body6: 2,
					body7: 2,
					body8: 2,
					body9: 2,
					body10: 2,
				},
				title: "",
				backgroundObj: {
					background: '#307AF6'
				},
				radiovalue: "2",
				radiolist: [{
						name: '上月',
						value: "2"
					},
					{
						name: '当月',
						value: "1"
					},
					{
						name: '今日',
						value: "4"
					}, {
						name: '当年',

						value: "3"
					}, {
						name: '合计',

						value: "0"
					},
					{
						name: '指定时间',
						value: "10"
					}
				],
				abnormalRecordsList: [{
						level: 1,
						content: "1111111",
						title: "11",
						createTime: "123:123"
					},
					{
						level: 2,
						content: "1111111",
						title: "11",
						createTime: "123:123"
					}
				],
			};
		},
		onLoad(op) {
			if(op.id){
				this.id=op.id
			}
		},
		onReady() {
			if(this.id){
				this.init();
			}
			
		},
		methods: {
			init() {
				this.getInfo()
				this.getbody1()
				this.getbody2()
				this.getbody3()
				this.getbody4()
			},
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var obj = {
					id: this.id
				}
							
				API.lockDetails(obj).then((res) => {
					this.info = res.data.floorlockInfo
					this.title	=this.info.parkingName
					uni.hideLoading();
					
					//this.getWhiteList()
				}).catch(error => {
							
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getbody1() {
				var key = "body1pie1"
				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 option = {

					grid: {
						top: 20,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					series: [{

						type: 'pie',
						radius: ['80%', '50%'],
						radius: [35, 50],
						data: [{
								itemStyle: {
									color: "#EB3C31"
								},
								value: 1048,
								name: '0.5小时\n20%',

							},
							{
								itemStyle: {
									color: "#EF8132"
								},

								value: 735,
								name: '2小时\n10%'
							},
							{
								itemStyle: {
									color: "#929292"
								},
								value: 580,
								name: '2-6小时\n30%'
							},


						]

					}]
				};
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
			getbody4() {
				var key = "body4pie1"
				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 option = {

					grid: {
						top: 20,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					series: [{

						type: 'pie',
						radius: ['80%', '50%'],
						radius: [45, 60],
						data: [{
								value: 1048,
								name: '0.5小时\n20%'
							},
							{
								value: 735,
								name: '2小时\n10%'
							},
							{
								value: 580,
								name: '2-6小时\n30%'
							},
							{
								value: 484,
								name: '6小时以上\n40%'
							},

						]

					}]
				};
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
			getbody3() {
				var key = "body3bar1"
				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 axisLabel = {
					rotate: 40,
					interval: 0,
					textStyle: {
						color: "#333"
					}
				}
				if (data1.length < 7) {
					axisLabel = {
						interval: 0,
						textStyle: {
							color: "#333"
						},
					}
				} else {
					axisLabel.interval = 0;
				}
				var option = {
					xAxis: {
						type: 'category',
						data: data1,
						axisLabel: axisLabel,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					yAxis: {
						type: 'value'
					},
					grid: {
						top: 20,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					series: [{
						itemStyle: {
							color: "#5A88E5"
						},
						data: [120, 200, 150],
						type: 'bar'
					}]
				};
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
			getbody2() {
				var key = "body2line1"
				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-2点', '2-4点', '4-6点', '6-8点', '8-10点', '10-12点', '12-14点', '14-16点', '16-18点', '18-20点',
					'20-22点', '22-24点'
				]
				var axisLabel = {
					rotate: 40,
					interval: 0,
					textStyle: {
						color: "#333"
					}
				}
				if (data1.length < 7) {
					axisLabel = {
						interval: 0,
						textStyle: {
							color: "#333"
						},
					}
				} else {
					axisLabel.interval = 0;
				}
				var option = {
					xAxis: {
						type: 'category',
						data: data1,
						axisLabel: axisLabel,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					yAxis: {
						type: 'value'
					},
					grid: {
						top: 20,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					series: [{
						areaStyle: {},
						itemStyle: {
							color: "#BBD4FB"
						},
						label: {
							show: true,
							position: 'top',
							color: "#307AF6"
						},
						data: [50, 30, 24, 18, 35, 47, 50, 30, 24, 28, 35, 47],
						type: 'line'
					}]
				};
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
		}
	}
</script>

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

	.jpback {
		height: 268rpx;
		background: linear-gradient(180deg, rgba(22, 119, 255, 1) 20%, rgba(121, 177, 255, 1) 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;
		align-items: center;
		justify-content: space-between;

		.item {
			.line{
				    display: flex;
				    align-items: center;
			}
			.name {
				color: rgba(51, 51, 51, 1);
				font-size: 36rpx;
				font-weight: bold;
				margin-right: 8rpx;
			}

			.item-tags {
				display: flex;

				.tag {
					border-radius: 4px;

					background-color: rgba(39, 177, 72, 1);
					color: rgba(255, 255, 255, 1);
					font-size: 24rpx;
					padding: 2rpx 8rpx;
					margin-right: 8rpx;
				}

				.typeN1 {
					background-color: rgba(22, 119, 255, 1);
				}
				.typeN2{
					background-color: #8161ff;
																				 background-color: #8161ff;
				}
				.statusN{
					background-color:#838383
				}
				.lockStatusN {
				
					background-color: rgba(153, 153, 153, 1);
				}
				
				.lockStatusN2 {
					background-color: #03A9F4
				}
				
			}
		}

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

	.data2 {
		height: 336rpx;
		padding: 32rpx;
		border-radius: 12px;
		background: linear-gradient(180deg, rgba(222, 222, 222, 1) 3%, rgba(255, 255, 255, 1) 5%, rgba(232, 232, 232, 1) 56%, rgba(255, 255, 255, 1) 59%, rgba(236, 236, 236, 1) 95%, rgba(215, 215, 215, 1) 98%);

		.top {
			background-repeat: round;
			background-image: url('@/assets/img/deviceTab/index3-2.png');
			display: flex;
			justify-content: space-around;
			text-align: center;
			height: 152rpx;
			align-items: center;

			.item {
				.name {
					color: rgba(16, 16, 16, 1);
					font-size: 32rpx;
				}

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

		.body {
			padding: 16rpx;
		}
	}

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

			.data {
				display: flex;
				width: 80%;
				justify-content: space-between;

				.item {
					color: rgba(51, 51, 51, 1);
					font-size: 16px;
				}

				.value {
					color: rgba(119, 119, 119, 1);
					font-size: 16px;
				}
			}
		}
	}

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

			.value {
				width: 33%;
				padding: 16rpx;
				color: rgba(51, 51, 51, 1);


			}

			.value:nth-child(3) {

				text-align: center;

			}
		}

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

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

	}

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

			.value {
				width: 33%;
				padding: 16rpx;

				text-align: center;
				
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

		}

		/* 隔行变色: 偶数行设置背景色 */
		.line:nth-child(odd) {
			color: rgba(119, 119, 119, 1);
			font-size: 14px;
			/* 偶数行 */
		}

		.line:nth-child(even) {
			color: rgba(16, 16, 16, 1);
			font-size: 16px;

			/* 奇数行 */
		}

	}

	.body6main {
		.line {
			display: flex;
			justify-content: space-between;
		}

		.abnormal-item:last-of-type {
			border-bottom: none !important;
			padding-bottom: 0;
		}

		.abnormal-item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx;
			border-bottom: 1px solid rgba(245, 245, 245, 1);


			.item-title {
				.level {
					color: #fff;

					border-radius: 8rpx;
					font-weight: 400;
					padding: 4rpx 8rpx;
					font-size: 22rpx;
					margin-right: 2px;
				}

				.level1 {
					background: red;
				}

				.level2 {
					background-color: rgba(255, 123, 0, 1);
				}

				color: rgba(51, 51, 51, 1);
				width: 100%;

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

				.name {
					color: rgba(51, 51, 51, 1);
					font-weight: bold;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.date {
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
				}
			}

			.item-value {
				text-align: right;
				display: flex;
				align-items: center;

				.more {
					margin-left: 8rpx;
				}

				.value1 {
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
				}

				.value2 {
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
				}
			}
		}
	}
</style>