jp-floorlock-Inspection/pages/index/index.vue

<template>
	<view>
		<u-navbar v-show="false" title="首页" title-color="#101010"></u-navbar>
		<view class="back-blue">
			<view class="back-color">

			</view>
		</view>
		<view class="main_top">
			<view class="main_top1">
				<view class="logo_img">
					<image class="img" src="@/assets/img/logo/logo.png" mode=""></image>
				</view>
				<view class="logo_text">
					<view class="logo_text1">
						智泊e家

					</view>
					<view class="logo_text2">
						巡检端
					</view>
				</view>
			</view>
			<view class="main_top2">
				<!-- 消息提醒位置 -->
			</view>
		</view>
		<view class="main_navigation panel">
			<view class="item-na" @click="gotoUrl('/pages/task/addTask')">
				<view class="na-img">
					<image class="img" src="@/assets/img/index/na-1.png" mode=""></image>
				</view>
				<view class="na-text">
					故障上报
				</view>
			</view>
			<view class="item-na-b">

			</view>
			<view class="item-na">
				<view class="na-img">
					<image class="img" src="@/assets/img/index/na-2.png" mode=""></image>
				</view>
				<view class="na-text">
					申请管理
				</view>
			</view>
			<view class="item-na-b">

			</view>
			<view class="item-na end">
				<view class="na-img">
					<image class="img" src="@/assets/img/index/na-3.png" mode=""></image>
				</view>
				<view class="na-text">
					团队管理
				</view>
			</view>
		</view>
		<view class="main_statuspanel panel">
			<view class="top-main">
				<view class="title-main">
					设备状态

				</view>
				<view class="goto-main">
					查看详情
					<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
				</view>
			</view>
			<view class="body">
				<view class="pie">
					<view id="body1pie1" class="body1pie">

					</view>
				</view>
				<view class="item-list">
					<view class="item-status">
						<view class="num">
							160
						</view>
						<view class="statusN">
							<view class="statusC status1">

							</view>
							<view class="statusT">
								在线
							</view>
						</view>
					</view>
					<view class="item-status">
						<view class="num">
							160
						</view>
						<view class="statusN">
							<view class="statusC status2">

							</view>
							<view class="statusT">
								故障

							</view>
						</view>
					</view>
					<view class="item-status">
						<view class="num">
							160
						</view>
						<view class="statusN">
							<view class="statusC status3">

							</view>
							<view class="statusT">
								离线

							</view>
						</view>
					</view>
					<view class="item-status">
						<view class="num">
							160
						</view>
						<view class="statusN">
							<view class="statusC status4">

							</view>
							<view class="statusT">
								维护

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main_list1 panel">
			<view class="top-main">
				<view class="title-main">
					故障记录


				</view>
				<view class="goto-main">
					查看详情
					<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
				</view>
			</view>
			<view class="list">
				<view class="item">
					<view class="icon">
						<image class="img" src="@/assets/img/taskstatus/status1.png" mode=""></image>
					</view>
					<view class="body">
						<view class="line1">
							<view class="title">
								杆位异常

							</view>
							<view class="status status1">
								未认领

							</view>
						</view>
						<view class="line2">
							<view class="value">
								2025-02-14 09:00:01

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

							</view>
						</view>

					</view>
					<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
				</view>
				<view class="item">
					<view class="icon">
						<image class="img" src="@/assets/img/taskstatus/status2.png" mode=""></image>
					</view>
					<view class="body">
						<view class="line1">
							<view class="title">
								杆位异常

							</view>
							<view class="status status2">
								已认领

							</view>
						</view>
						<view class="line2">
							<view class="value">
								2025-02-14 09:00:01

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

							</view>
						</view>

					</view>
					<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
				</view>
				<view class="item">
					<view class="icon">
						<image class="img" src="@/assets/img/taskstatus/status3.png" mode=""></image>
					</view>
					<view class="body">
						<view class="line1">
							<view class="title">
								杆位异常

							</view>
							<view class="status status3">
								已处理

							</view>
						</view>
						<view class="line2">
							<view class="value">
								2025-02-14 09:00:01

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

							</view>
						</view>

					</view>
					<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
				</view>
			</view>

		</view>



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

<script>
	import * as API from '@/apis/pagejs/index.js'

	import * as echarts from 'echarts';


	export default {
		data() {
			return {
				echartsList: {},
			};
		},
		onLoad() {

		},
		onReady() {
			this.getbody1pie1()
		},
		methods: {
			getbody1pie1() {
				var key = "body1pie1"
				var myChart = this.echartsList[key];
				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(88 * 2),
						height: uni.upx2px(88 * 2)
					})

				}
				myChart.clear()
				var option = {

					series: [{
						silent: true,
						type: 'pie',
						radius: ['70%', '100%'],
						label: {
							show: false,
						},

						data: [{
								value: 99,
								itemStyle: {
									color: '#AAAAAA'
								}
							},
							{
								value: 88,
								itemStyle: {
									color: '#53B56B'
								}
							}
						]
					}],
					grid: {
						top: 0,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},

				}
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			}
		}
	}
</script>

<style lang="scss">
	.back-blue {
		height: 0px;

		.back-color {
			height: 656rpx;
			background: linear-gradient(180deg, rgba(22, 119, 255, 1) 53%, rgba(203, 234, 255, 0) 100%);

		}
	}

	.top-main {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title-main {
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
			font-weight: bold;
		}

		.goto-main {
			color: rgba(131, 131, 131, 1);
			font-size: 24rpx;
		}
	}

	.panel,
	.main_top {
		margin: 0 32rpx;
	}

	.panel {
		border-radius: 8px;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px 4px 8px 0px rgba(22, 119, 255, 0.1);
	}

	.main_top {
		margin-top: 32rpx;
		display: flex;
		justify-content: space-between;

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

			.logo_img {
				.img {
					border-radius: 8px;
					width: 96rpx;
					height: 96rpx;
				}

				margin-right: 16rpx;
			}

			.logo_text {
				color: #fff;

				.logo_text1 {
					font-size: 20px;
				}

				.logo_text2 {
					font-size: 16px;

				}
			}
		}

		.main_top2 {}
	}

	.main_navigation {
		margin-top: 32rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 24rpx 0 20rpx 0;

		.item-na-b {
			border-left: 1px solid rgba(187, 187, 187, 0.43);
			height: 70rpx;
		}

		.item-na {
			width: 32%;
			text-align: center;

			.na-img {
				display: flex;
				justify-content: center;

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

	.main_statuspanel {
		margin-top: 24rpx;
		padding: 24rpx;

		.body {
			display: flex;
			padding: 24rpx;

			.item-list {
				margin-left: 48rpx;
				display: flex;
				width: 100%;
				flex-wrap: wrap;

				.item-status {
					width: 50%;

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

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

					.statusC {
						margin-right: 8rpx;
						width: 16rpx;
						height: 16rpx;
						background-color: rgba(153, 153, 153, 1);
					}

					.status1 {
						background-color: rgba(0, 185, 98, 1);
					}

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

					.status3 {
						background-color: rgba(153, 153, 153, 1);
					}

					.status4 {
						background-color: rgba(129, 97, 255, 1);
					}
				}

			}
		}
	}

	.main_list1 {
		margin-top: 24rpx;
		padding: 24rpx;

		.list {
			padding: 24rpx 0;

			.item {
				display: flex;
				border-bottom: 1px solid rgba(232, 232, 232, 1);
				padding: 6rpx 0;
				margin: 6rpx 0;

				.img {
					width: 72rpx;
					height: 72rpx;

				}

				.body {
					margin: 0 12rpx;
					width: 100%;

					.line1,
					.line2 {

						display: flex;
						justify-content: space-between;
					}
					.line2 {
						color: rgba(119,119,119,1);
						font-size: 24rpx;
					}
					.line1 {
						.title {
							color: rgba(51, 51, 51, 1);
							font-size: 28rpx;
						}

						.status {
							border: 1px solid rgba(255, 61, 0, 1);
							font-size: 24rpx;

							padding: 2rpx 8rpx;
							border-radius: 4px;

						}

						.status1 {
							border: 1px solid #007aff;
							color: #007aff;
						}

						.status2 {
							border: 1px solid #ff9900;
							color: #ff9900;
						}

						.status3 {
							border: 1px solid #19be6b;
							color: #19be6b;
						}

						.status4 {
							border: 1px solid rgba(255, 61, 0, 1);
							color: rgba(255, 61, 0, 1);
						}
					}
				}
			}

			// .item:not(:last-child) {
			//   border-bottom:1px solid rgba(232,232,232,1);
			// }
		}
	}
</style>