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" v-if="parobj.total">今日巡查：{{ parobj.completed }}/{{ parobj.total }}</view>
				<view class="u-m-t-20 u-flex" v-if="parobj.total">
					<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>