zhgdyunapp/pages/projectEnd/InspectionRoute/inspection.vue

<template>
	<view class="emergencyDisposal">
		<headers class="fixedheader" :showBack="true">
			<view class="headerName">
				智能巡检
			</view>
		</headers>
		<view class="problemOverview" :style="{ 'margin-top': (statusBarHeight+52) + 'px' }">
			<view class="overFlex">
				<view class="overLeft">任务统计</view>
				<view class="overRight">{{nowTime}}</view>
			</view>
			<view class="problemData">
				<view class="dataBox2 dataStyle">
					<view class="num">{{taskStatus.notStart}}</view>
					<view class="text">未开始</view>
				</view>
				<view class="dataBox1 dataStyle">
					<view class="num">{{taskStatus.run}}</view>
					<view class="text">进行中</view>
				</view>
				<view class="dataBox4 dataStyle">
					<view class="num">{{taskStatus.overdue}}</view>
					<view class="text">已逾期</view>
				</view>
				<view class="dataBox3 dataStyle">
					<view class="num">{{taskStatus.complete}}</view>
					<view class="text">已巡检</view>
				</view>
			</view>
		</view>
		<view class="commonModules">
			<view class="overLeft">常用模块</view>
			<view class="modulesList">
				<view class="menu" v-if="inspection" @click="jumpPage('inspectionPointList')">
					<image class="icon primary" src="@/static/icon/inspection_point.png"></image>
					<view>巡检点</view>
				</view>
				<view class="menu" v-if="routeManage" @click="jumpPage('inspectionPlan')">
					<image class="icon success" src="@/static/icon/inspection_plan.png"></image>
					<view>巡检计划</view>
				</view>
				<view class="menu" @click="jumpPage('inspectedstay')">
					<image class="icon wraning" src="@/static/icon/inspection_task.png">
					</image>
					<view>我的任务</view>
				</view>
				
			</view>
		</view>
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
	</view>
</template>

<script>
	import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
	import headers from "../../../components/headers/headers.vue"
	var _self;
	export default {
		data() {
			return {
				statusBarHeight: 0,
				nowTime: '',
				dataList: [],
				taskStatus: {
					complete: 0,
					notStart: 0,
					overdue: 0,
					run: 0
				},
				inspection: false,
			}
		},
		onLoad(option) {
			this.getGoId = option.id;
		},
		mounted() {
			this.getTime();
		},
		onShow() {
			this.inspection = this.checkMenuPermission({menuPath: '/project/inspecPoint/inspection'})
			
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
			this.getData()
		},
		methods: {
			//实时时间
			getTime() {
				this.timer = setInterval(() => {
					let timeDate = new Date()
					let year = timeDate.getFullYear()
					let mounth = timeDate.getMonth() + 1
					let day = timeDate.getDate()
					let hours = timeDate.getHours()
					hours = hours >= 10 ? hours : '0' + hours
					let minutes = timeDate.getMinutes()
					minutes = minutes >= 10 ? minutes : '0' + minutes
					let seconds = timeDate.getSeconds()
					seconds = seconds >= 10 ? seconds : '0' + seconds
					let week = timeDate.getDay()
					let weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
					this.nowTime = `${year}-${mounth}-${day} ${hours}:${minutes}:${seconds}`
				}, 1000)
			},
			getData() {
				this.sendRequest({
					url: 'xmgl/xzCheckingRouteTask/countMyTaskInspectStatus',
					method: 'post',
					success: res => {
						console.info(res,'res')
						if (res.code == 200) {
							this.taskStatus = res.result;
						}
					}
				})
			},
			jumpPage(page) {
				uni.navigateTo({
					url: `/pages/projectEnd/InspectionRoute/${page}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.emergencyDisposal {
		height: 100%;
		overflow: hidden;
	}

	.fixedheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;

		/deep/.headerBox {
			background: #2b8df3;
			color: #fff;
		}
	}

	.noData {
		text-align: center;
		font-size: 32rpx;
		margin-top: 120px;
		color: #bed0fb;
	}

	.noDataImg {
		width: 125px;
		height: 98px;
	}

	.problemOverview {
		// height: 33%;
		// box-sizing: border-box;
		border-radius: 10px;
		// border: 3px solid #fafbfc;
		margin: 0 2% 11% 2%;
		padding: 3% 3%;


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

			.overRight {
				// float: right;
				font-size: 24rpx;
				color: gray;
				margin: 6rpx 0;
			}
		}



		.problemData {
			margin-top: 4%;
			display: flex;
			background: linear-gradient(180deg, #FCF2D6 0%, #FFFFFF 50%);
			box-shadow: 0 8rpx 16rpx 0 rgba(219, 229, 255, 0.6);
			border-radius: 10rpx;

			.dataStyle {
				width: 300rpx;
				// height: 180rpx;
				text-align: center;
				margin: 24rpx 0;
			}

			.dataStyle:not(:last-child) {
				border-right: 2rpx solid #FFD356;
			}

			.dataBox1 {
				// background: #ebf1ff;
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;

				.day {
					font-size: 12px;
					color: #3a7bff;
					margin-top: 10px;
				}

				.num {
					font-size: 20px;
					font-weight: bold;
					color: #3a7bff;
					margin-top: 5px;
				}

				.text {
					font-size: 12px;
					font-weight: bold;
					margin-top: 5px;
				}
			}

			.dataBox2 {
				// background: #fcebec;

				.day {
					font-size: 12px;
					color: #ea3941;
					margin-top: 10px;
				}

				.num {
					font-size: 20px;
					font-weight: bold;
					color: #ea3941;
					margin-top: 5px;
				}

				.text {
					font-size: 12px;
					font-weight: 600;
					margin-top: 5px;
				}
			}

			.dataBox3 {
				// background: #eef9f6;

				.day {
					font-size: 12px;
					color: #5ecba7;
					margin-top: 10px;
				}

				.num {
					font-size: 20px;
					font-weight: bold;
					color: #5ecba7;
					margin-top: 5px;
				}

				.text {
					font-size: 12px;
					font-weight: 600;
					margin-top: 5px;
				}
			}

			.dataBox4 {
				// background: #fff4e7;
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;

				.day {
					font-size: 12px;
					color: #ff9810;
					margin-top: 10px;
				}

				.num {
					font-size: 20px;
					font-weight: bold;
					color: #ff9810;
					margin-top: 5px;
				}

				.text {
					font-size: 12px;
					font-weight: 600;
					margin-top: 5px;
				}
			}
		}
	}

	.commonModules {
		height: 66%;
		margin: -10% 2%;
		padding: 3% 3%;
	
		.modulesList {
			margin-top: 15%;
			display: grid;
			grid-gap: 20px;
			grid-template-columns: repeat(3, 1fr);
	
			.menu {
				text-align: center;
				font-size: 14px;
			}
			.icon {
				width: 30px;
				height: 30px;
				padding: 6px;
				line-height: 20px;
				border-radius: 8px;
				&.primary {
					background-color: rgba(0, 119, 250, 1);
				}
				&.success {
					background-color: rgba(80, 175, 177, 1);
				}
				&.wraning {
					background-color: rgba(233, 157, 66, 1);
				}
			}
		}
	}

	.overLeft {
		// float: left;
		color: #000;
		font-weight: bold;
		font-size: 34rpx;
	}
</style>