xunjian_app/scan_pages/patrol/patrol.vue

<template>
	<!-- 巡检进度页 -->
	<view class="m-w partol ">
		<view class="logo-back">
		</view>
		<view class="title-font m-w  u-p-l-30 u-p-r-30">
			<view class=" m-w u-m-t-10">
				<view class="u-f-32 f-w-b">{{parobj.name}}</view>
				<view class="u-m-t-16 u-flex">
					<view class="u-m-r-14">开始时间：{{beginTime.slice(0,-3)}}</view>
					<view class="u-m-r-14">
						<u-tag :text="status[statusType].text" :color="status[statusType].color" />
					</view>
				</view>
				<view class="u-m-t-16">截至时间：{{endTime.slice(0,-3)}}</view>
				<view class="u-m-t-20">今日巡查：{{parobj.completed}}/{{parobj.total}}</view>
				<view class="u-m-t-20 u-flex">
					<view>完成进度：</view>
					<view style="width: 255rpx; height: 30rpx;">
						<u-line-progress :show-percent="false" active-color="#ffffff" :round="true"
							inactive-color="rgba(255, 255, 255, .3)" :percent="Math.round((parobj.completed/parobj.total)*100)">
						</u-line-progress>
					</view>
					<view class="u-m-l-20">{{Math.round((parobj.completed/parobj.total)*100)}}%</view>
				</view>
			</view>
			<scroll-view :scroll-y="true" class="cell-item u-m-t-40 u-p-l-20 u-p-r-20 ">
				<view @click="checkdeatal(index,parobj.id)" class="u-flex menu-list" v-for="(index,key) in parobj.rooms"
					:key="key">
					<view class="item-left-title">{{key+1}}</view>
					<block v-if="!index.completed">
						<u-image :src="imgstatus[3]" width="80" height="80"></u-image>
					</block>
					<block v-else>
						<u-image :src="imgstatus[index.qualified==true?1:2]" width="80" height="80"></u-image>
					</block>

					<view class="item-right-font">
						<view>点编号：{{index.name}}</view>
						<view class="u-m-t-20">设备名称:{{index.number}}</view>
					</view>
					<view class="uicon">
						<u-icon name="arrow-right" size="30" color="rgba(153, 153, 153, 1)"></u-icon>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="sumit" @click="saoma(1)">扫码巡检</view>
	</view>
</template>

<script>
	import dayjs from "dayjs";
	import backtitle from '@/static/img/partrol/back.png'
	import hege from '@/static/img/hege.png'
	import bhg from '@/static/img/bhg.png'
	import wks from '@/static/img/wks.png'
	import {
		patrolTaskinfo,
		pointDetailForMobile,
		getPointInfoOfScanaa
	} from '@/api/index.js'
	export default {
		data() {
			return {
				backtitle,
				imgstatus: ["", hege, bhg, wks],
				parobj: "",
				status: ["", {
					text: "暂未巡检",
					color: "#002AC5"
				}, {
					text: "进行中",
					color: "#CF6100"
				}, {
					text: "已结束",
					color: "#009C33"
				}, {
					text: "超时漏检",
					color: "red"
				},{
					text: "超时完成",
					color: "yellow"
				}],
				taskId: -1,
				statusType: ''
			}
		},
		onLoad({
			taskId,
			status
		}) {
			this.taskId = taskId
			this.statusType = status
			this.init(taskId)
		},
		methods: {
			saoma(id) {
				if(id==1){
					this.$store.dispatch("user/gettasklist"); 
					return false
				}else{
					return true
				}
			},
			checkdeatal(row, renwuid) {
				const {
					completed,
					id,
					qualified
				} = row
				if (completed) {
					uni.navigateTo({
						url: `../patroldetail/patroldetail?roomId=${id}&taskId=${renwuid}`
					})
				} else  {
					uni.navigateTo({
						url: `../checkdetail/checkdetail?roomId=${id}&taskId=${renwuid}`
					})
				}
			},
			async init(id) {
				let {
					data
				} = await patrolTaskinfo(id)
				this.parobj = data
			}
		},
		computed: {
			beginTime() {
				return dayjs(this.parobj.beginTime).format("YYYY-MM-DD HH:mm:ss")
			},
			endTime() {
				return dayjs(this.parobj.endTime).format("YYYY-MM-DD HH:mm:ss")
			}
		}
	}
</script>

<style lang="scss">
	.partol {
		height: 100vh;
		background: #f0f2f5;

		.logo-back {
			width: 751rpx;
			height: 350rpx;
			position: relative;

			&::after {
				content: '';
				width: 140%;
				height: 350rpx;
				position: absolute;
				left: -20%;
				top: 0;

				border-radius: 0 0 45% 45%;
				background: #4a8bff !important;
			}

		}

		.title-font {
			height: 100rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			position: absolute;
			top: 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			.cell-item {
				width: 690rpx;
				height: calc(100vh - 347rpx);
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 0px 0px;
				padding: 1rpx;
				box-sizing: border-box;
			}

			.menu-list {
				margin-top: 28rpx;
				align-items: center;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #E6E6E6;
				;

				.item-left-title {
					width: 40rpx;
					height: 40rpx;
					background: #4A8BFF;
					border-radius: 50%;
					text-align: center;
					line-height: 40rpx;
					margin-right: 40rpx;
				}

				.item-right-font {
					margin-left: 21rpx;
					font-size: 28rpx;
					font-family: Microsoft YaHei-3970(82674968);
					font-weight: 400;
					color: #333333;
				}

				.uicon {
					position: absolute;
					right: 23rpx;
				}
			}
		}

		view {
			line-height: 1;
		}

		.sumit {
			position: fixed;
			bottom: 20rpx;
			width: 600rpx;
			height: 88rpx;
			margin-top: 98rpx;
			color: white;
			background-color: #2a82e4;
			border-radius: 5px;
			font-size: 16px;
			line-height: 88rpx;
			text-align: center;
			left: 75rpx;
		}
	}
</style>