eduepos_ui_store/pages/inspect/detail.vue

<template>
	<view class="inspect-detail">
		<view class="summary" v-if="task">
			<view class="head">
				<view class="name">{{ task.planName || '巡检报告' }}</view>
				<view class="pass" :class="{ good: task.passFlag == 1, bad: task.passFlag == 0 }">{{ passText }}</view>
			</view>
			<view class="date">巡检日期：{{ formatDate(task.taskDate) }}</view>
			<view class="score-row">
				<view class="score">
					<text class="num">{{ fmtScore(task.totalScore) }}</text>
					<text class="max">/{{ fmtScore(task.maxScore) }}</text>
				</view>
				<view class="inspector" v-if="task.inspectorName">巡检员：{{ task.inspectorName }}</view>
			</view>
			<view class="rect-link" v-if="task.rectId" @click="goRect(task.rectId)">
				查看关联整改单 <text class="arrow">></text>
			</view>
		</view>

		<view class="items" v-if="items.length">
			<view class="section-title">逐项评分</view>
			<view class="item" v-for="it in items" :key="it.taskItemId">
				<view class="item-head">
					<view class="left">
						<text class="ind-name">{{ it.indicatorName }}</text>
						<text class="type" :class="it.indicatorType == 1 ? 'auto' : 'manual'">{{ it.indicatorType == 1 ? '自动' : '人工' }}</text>
					</view>
					<view class="right">
						<view class="pass" :class="{ good: it.passFlag == 1, bad: it.passFlag == 0 }">{{ it.passFlag == 1 ? '及格' : '不及格' }}</view>
						<view class="score"><b>{{ fmtScore(it.score) }}</b>/{{ fmtScore(it.maxScore) }}</view>
					</view>
				</view>
				<view class="deduction" v-if="it.deductionReason"><text class="label">扣分原因：</text>{{ it.deductionReason }}</view><view class="raw" v-if="it.rawValueText">原始数据：{{ it.rawValueText }}</view>
				<view class="pics" v-if="picsOf(it).length">
					<image v-for="(p, i) in picsOf(it)" :key="i" :src="p" mode="aspectFill" class="pic" @click="preview(it, i)" />
				</view>
				<view class="rmk" v-if="it.rmk">备注：{{ it.rmk }}</view>
			</view>
		</view>

		<view class="empty" v-if="!task && !loading">
			<text>报告不存在</text>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			apiUrl: '/inspectApi/getMyInspectDetail',
			id: '',
			task: null,
			items: [],
			loading: true
		}
	},
	computed: {
		...mapState(['storeInfo']),
		passText() {
			if (!this.task || this.task.status != 3) return '—'
			return this.task.passFlag == 1 ? '及格' : '不及格'
		}
	},
	methods: {
		loadData() {
			this.loading = true
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.apiUrl,
				data: {
					id: this.id,
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						let obj = res.data.obj || {}
						this.task = obj.task || null
						this.items = obj.items || []
					} else if (res.data.rtnBean.rtnMsg) {
						this.$api.msg(res.data.rtnBean.rtnMsg)
					}
					this.loading = false
				},
				fail: () => {
					this.loading = false
				}
			})
		},
		goRect(rectId) {
			uni.navigateTo({ url: '/pages/rectification/detail?id=' + rectId })
		},
		picsOf(it) {
			if (!it.pictureUrls) return []
			return String(it.pictureUrls).split(',').filter(u => u && u.trim())
		},
		preview(it, index) {
			let urls = this.picsOf(it)
			uni.previewImage({ urls: urls, current: urls[index] })
		},
		formatDate(v) {
			if (!v) return ''
			let d = new Date(v)
			let p = n => (n < 10 ? '0' + n : n)
			return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()) + ' ' + p(d.getHours()) + ':' + p(d.getMinutes())
		},
		fmtScore(v) {
			return Number(v || 0)
		}
	},
	onLoad(options) {
		this.id = options.id || ''
		this.loadData()
	}
}
</script>

<style lang="scss" scoped>
.inspect-detail {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 40rpx;
}
.summary {
	background: #fff;
	padding: 30rpx;
	border-radius: 0 0 20rpx 20rpx;
	.head {
		@include between;
		margin-bottom: 16rpx;
		.name {
			font-size: 34rpx;
			font-weight: bold;
			color: $text-color;
		}
		.pass {
			font-size: $font-sm;
			padding: 4rpx 16rpx;
			border-radius: 20rpx;
			color: #909399;
			background: #f4f4f5;
			&.good {
				color: #67c23a;
				background: #f0f9eb;
			}
			&.bad {
				color: #f56c6c;
				background: #fef0f0;
			}
		}
	}
	.date {
		color: $desc-color;
		font-size: $font-sm;
		margin-bottom: 16rpx;
	}
	.score-row {
		@include between;
		.score {
			.num {
				font-size: 52rpx;
				font-weight: bold;
				color: $theme-color;
			}
			.max {
				color: $desc-color;
				font-size: $font-sm;
			}
		}
		.inspector {
			color: $desc-color;
			font-size: $font-sm;
		}
	}
}
.section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: $text-color;
	padding: 30rpx 20rpx 10rpx;
}
.items {
	padding: 0 20rpx;
	.item {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		.item-head {
			@include between;
			margin-bottom: 12rpx;
			.left {
				@include flexStart;
				.ind-name {
					font-size: 30rpx;
					font-weight: bold;
					color: $text-color;
				}
				.type {
					margin-left: 12rpx;
					font-size: $font-sm;
					padding: 2rpx 12rpx;
					border-radius: 8rpx;
					color: #409eff;
					background: #ecf5ff;
					&.manual {
						color: #e6a23c;
						background: #fdf6ec;
					}
				}
			}
			.right {
				text-align: right;
				.pass {
					font-size: $font-sm;
					margin-bottom: 6rpx;
					&.good {
						color: #67c23a;
					}
					&.bad {
						color: #f56c6c;
					}
				}
				.score {
					color: $text-color;
					b {
						font-size: 34rpx;
						color: $theme-color;
					}
				}
			}
		}
		.raw {
			color: $desc-color;
			font-size: $font-base;
			margin-bottom: 12rpx;
		}
		.pics {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 12rpx;
			.pic {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				margin: 0 12rpx 12rpx 0;
				background: #ececec;
			}
		}
		.rmk {
			color: $text-color;
			font-size: $font-base;
		}
	}
}
.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 200rpx;
	color: #cdcdcd;
	font-size: $font-lg;
}
</style>