zhgdyunapp_vue3/pages/projectEnd/smartBeamField/planTaskDetail.vue

<template>
	<view class="fullHeight">
		<headers :showBack="true" class="">
			<view class="headerName">
				计划任务详情
				<view class="headerBack" @click="returnBack">
					<u-icon name="arrow-left" color="#333333" size="40"></u-icon>
				</view>
			</view>
		</headers>
		<view class="task-detail">
			<view class="detail-row">
				<view class="row-title">
					梁号:
				</view>
				<view class="row-detail">
					{{ planDetail.beamNo || "" }}
				</view>
			</view>
			<view class="detail-row">
				<view class="row-title">
					所属桥段:
				</view>
				<view class="row-detail">
					{{ planDetail.bridgeSectionName || "" }}
				</view>
			</view>
			<view class="detail-row">
				<view class="row-title">
					梁板类型:
				</view>
				<view class="row-detail">
					{{ planDetail.beamAndPlateType || "" }}
				</view>
			</view>
			<view class="detail-row">
				<view class="row-title">
					制梁状态:
				</view>
				<view class="row-detail" v-if="planDetail.beamMakeStatus">
					<text :style="{color: makeBeamStatus[planDetail.beamMakeStatus-1].color}">{{ makeBeamStatus[planDetail.beamMakeStatus-1].label }}</text>
				</view>
			</view>
			<view class="detail-row">
				<view class="row-title">
					计划制梁时间:
				</view>
				<view class="row-detail" style="width: 290rpx;">
					{{ planDetail.plannedMakeBeamBeginTime || "" }}~ {{ planDetail.plannedMakeBeamEndTime || "" }}
				</view>
			</view>
			<view class="detail-row">
				<view class="row-title">
					计划架梁时间：
				</view>
				<view class="row-detail" style="width: 290rpx;">
					{{ planDetail.plannedErectionBeamBeginTime || "" }}~ {{ planDetail.plannedErectionBeamEndTime || "" }}
				</view>
			</view>
			<view class="detail-row">
				<view class="row-title">
					跨:
				</view>
				<view class="row-detail">
					{{ planDetail.stepAstride || "" }}
				</view>
			</view>
			<view class="detail-row">
				<view class="row-title">
					幅:
				</view>
				<view class="row-detail">
					{{ planDetail.beamNo || "" }}
				</view>
			</view>
			<view class="detail-row">
				<view class="row-title">
					存梁台座编号:
				</view>
				<view class="row-detail">
					21#-1
				</view>
			</view>
			<view class="detail-row">
				<view class="row-title">
					梁二维码:
				</view>
				<view class="qrCode">
					<!-- <image class="img" :src="url_config+'image/'+item.qrCode"></image> -->
					<image class="img" src="/static/smartBeamField/codeIcon.jpg"></image>
					<view class="download-text">
						点击此处下载
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				smartBeamFieldBridgeSectionId: "",
				projectDetail: "",
				planDetail: {},
				makeBeamStatus: [
					{
						label: '未开始',
						color: "#F09657"
					},
					{
						label: '进行中',
						color: "#5680FA"
					},
					{
						label: '已完成',
						color: "#21C28E"
					}
				]
			};
		},
		onLoad(e) {
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'));
			if (e) {
				console.log("跳转携带参数", e)
				this.smartBeamFieldBridgeSectionId = e.smartBeamFieldBridgeSectionId
			}
			this.getPlanDetail()
		},
		methods: {
			returnBack() {
				console.log("返回")
				uni.navigateBack()
			},
			//获取计划详情
			getPlanDetail() {
				this.sendRequest({
					url: "xmgl/smartBeamFieldBeam/queryById",
					data: {
						projectSn: this.projectDetail.projectSn,
						id: this.smartBeamFieldBridgeSectionId,
					},
					method: "get",
					success: res => {
						console.log("计划详情", res, this.planList)
						this.planDetail = res.result
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.headerBack {
		position: absolute;
		left: 5%;
		top: 5%;
	}

	.task-detail {
		padding: 30rpx 40rpx;

		.detail-row {
			display: flex;
			margin-top: 35rpx;

			.qrCode {
				width: 200rpx;
				height: 200rpx;
				text-align: center;

				.download-text {
					color: #5181F6;
					font-size: 27rpx;
				}

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.row-title {
				width: 200rpx;
				font-size: 27rpx;
				font-family: Advent Pro, Advent Pro;
				color: #8C8C8C;
			}

			.row-detail {
				font-size: 27rpx;
				font-family: Advent Pro, Advent Pro;
				color: #333333;
			}
		}
	}
</style>