WenWuGuanJia/user_fenbao/houTai/taskDEetailsPage.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="巡查" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view>
			<view class="xxxc_box">
				<view style="display: flex; align-items: center; font-size: 30rpx; font-weight: 600; color: #b75830; margin-bottom: 10rpx">
					<uni-icons type="sound" size="22" color="#b75830"></uni-icons>
					<view>任务详情</view>
				</view>

				<view>
					<view style="color: #90592a">
						<view class="">{{ cr_title }}</view>
						<!-- <text>{{ taskDetails.type_text || '暂无任务' }}：</text> -->
						<text>巡查时间:{{ taskDetails.progress == 3 ? taskDetails.submit_time : taskDetails.created_at }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 线下巡查 -->
		<view class="map_tit">
			<image style="width: 186rpx; height: 40rpx" src="/static/img/right_img.png"></image>
			<view class="">巡查报告</view>
			<image style="width: 186rpx; height: 40rpx" src="/static/img/left_img.png"></image>
		</view>

		<view v-if="taskDetails.progress == '-1'" style="margin-left: 10%; font-size: 36rpx; color: red">驳回原因：{{ taskDetails.feedback }}</view>
		<view class="zk_box">
			<view @click="AssetBtn(item)" class="zk_item" v-for="(item, index) in assetList" :key="item.id">
				<!-- 调整 -->
				<view class="top_box" style="">
					<view>
						<view v-if="item.image != ''">
							<image :src="item.image" style="width: 280rpx; height: 200rpx"></image>
						</view>
						<view v-else style="width: 280rpx; height: 200rpx">
							<image
								v-if="item.title == '文保牌'"
								src="https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/wbp1.png"
								style="width: 280rpx; height: 200rpx"
							></image>
							<image v-else src="https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/zwtp.png" style="width: 280rpx; height: 200rpx"></image>
						</view>
					</view>
					<view @click="AssetShow = true" class="" style="display: flex; align-items: center">
						<view style="margin-left: 20rpx">
							<view style="font-size: 32rpx; color: #444444; font-weight: 600">文物{{ item.type_text }}状况</view>
							<view style="height: 150rpx; overflow: scroll; margin-top: 20rpx; font-size: 28rpx; font-weight: 400; color: rgba(68, 68, 68, 0.6)">
								{{ item.type == 1 ? '文物本体' : item.title }}:{{ item.desc }}
							</view>
						</view>
					</view>
				</view>
				<!-- 调整 -->

				<view class="" style="margin-top: 30rpx; display: flex; justify-content: space-between">
					<view style="width: 100%; margin: auto">
						<!-- <Segmented activeColor="#c87d5a" :current="item.status" :target="item" :values="displayedItems" @clickItem="onClickItem" styleType="button"></Segmented> -->
						<view class="fzdj"></view>
						<Segmented
							activeColor="#c87d5a"
							:current="taskDetails.patrolTaskAnnexList[index].status"
							:target="item"
							:values="displayedItems"
							styleType="button"
						></Segmented>
						<!-- 每项上传的照片 -->
						<view class="" style="display: flex; flex-wrap: wrap; justify-content: start; margin-top: 20rpx">
							<image
								@click="clickImg(item.extraImages, index2)"
								v-for="(item2, index2) in item.extraImages"
								:src="item2.url"
								:key="item2.index2"
								style="width: 210rpx; height: 120rpx; margin-left: 10rpx; margin-top: 10rpx"
							></image>
						</view>
						<!-- 每项的描述 -->
						<!-- :style="{ height: item.describeVal != undefined ? '80rpx' : '0rpx' }" -->
						<view style="font-weight: normal; font-size: 30rpx; margin-top: 10rpx; line-height: 40rpx; color: rgba(68, 68, 68, 0.6)">
							{{ item.describeVal || '' }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 文物资产详情 -->
		<u-popup :show="AssetShow" @close="close" mode="center" :closeable="true" bgColor="#f9dbbf" round="5">
			<view class="pop_box">
				<view style="text-align: center; margin-right: 20rpx; margin-bottom: 20rpx; font-size: 32rpx">{{ assetDetails.title }}</view>
				<view>状况：{{ assetDetails.status_text }}</view>
				<view>位置：{{ assetDetails.position ? assetDetails.position : '暂未显示' }}</view>
				<view>
					<image style="width: 180rpx; height: 140rpx" :src="assetDetails.image"></image>
				</view>
			</view>
		</u-popup>
		<view v-if="taskDetails.progress_text == '待审核'" style="margin: auto; width: 90%; display: flex; justify-content: space-around; margin-top: 50rpx">
			<view class="tjxc" @click="returnShow = true">驳回</view>
			<view class="tjxc" @click="examineTask(3)">通过</view>
		</view>
		<!-- 驳回描述弹层 -->
		<u-popup bgColor="#f2c8a2" :show="returnShow" @close="close" mode="center" customStyle="width:600rpx;padding: 30rpx;" round="20rpx">
			<view style="text-align: center; font-size: 30rpx">确认驳回该任务吗?</view>
			<view style="margin-top: 20rpx">
				<u--textarea height="80" v-model.trim="returnVal" placeholder="请填写驳回原因:"></u--textarea>
			</view>
			<view class="bt_box">
				<view
					class="bt1"
					@click.stop="
						returnShow = false;
						returnVal = '';
					"
				>
					取消
				</view>
				<view @click.stop="isOk(-1)" class="bt2">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			cr_title: '',
			returnShow: false,
			returnVal: '',
			currents: [],
			status: 0,
			cr_id: '' /* 文物id */,
			cr_code: '' /* 文物编号 */,
			taskDetails: {} /* 任务详情 */,
			taskId: '' /* 任务id */,

			eventTypeId: '' /* 异常事件类型id */,
			stateId: '' /* 状态id */,
			items: [{ title: '未知' }, { title: '正常', status: 1 }, { title: '异常', status: 2 }],
			displayedItems: [],
			current: 0,
			assetList: [] /* 资产列表 */,

			assetDetails: {} /* 资产详情 */,
			AssetShow: false,
			normal: false,
			patrolIndex: '',
			describeVal: '',
			show: false,
			showPicker: false,
			situation: '',
			// 弹层Tab

			// 上传的图片
			fileList: []
		};
	},

	onLoad(o) {
		// console.log(o, 'ooo');
		that = this;
		this.task_id = o.id; /* 任务id */
		this.cr_id = o.cr_id; /* 文物id */
		this.cr_code = o.cr_code;
		this.cr_title = o.cr_title;
		// 处理状态
		this.displayedItems = this.items.map((item) => item.title);
		this.getPatrolTaskDetails(o.id);
	},

	methods: {
		// 任务详情
		getPatrolTaskDetails(id) {
			this.$api.getPatrolTaskDetails({ main_body_id: 1, task_id: id }, function (res) {
				// console.log(res, '任务详情');
				that.taskDetails = res.data;
				that.cr_id = that.taskDetails.cr_id;
				that.cr_code = that.taskDetails.cr_code;
				that.taskId = that.taskDetails.id;
				that.getCrProperty();

				// that.taskDetails.patrolTaskAnnexList.forEach((item) => {
				// 	if (item.status == 1) {
				// 		that.status = 1;
				// 	} else if (item.status == 2) {
				// 		that.status = 2;
				// 	}
				// });
			});
		},
		// 文物资产列表
		getCrProperty() {
			this.$api.getCrProperty({ main_body_id: 1, cr_id: this.cr_id }, function (res) {
				// console.log(res, 'resres');
				if (res.code === 1) {
					// that.assetList = res.data;
					let alist = res.data;
					that.taskDetails.patrolTaskAnnexList.forEach((requestItem, index) => {
						// console.log(alist, '999999');

						alist.forEach((item, i) => {
							if (item.id == requestItem.property_id) {
								// console.log(item, '3333333333');
								// console.log(alist[i], '1111111111');
								alist[i].describeVal = requestItem.desc;
								alist[i].extraImages = [];
								requestItem.images.forEach((img, imgidx) => {
									alist[i].extraImages.push({ url: img });
								});

								alist[i].status_text = requestItem.status_text;
							}
						});
					});

					that.assetList = alist;
				} else {
					console.log(res.msg);
				}
			});
		},
		// 任务审核
		examineTask(progress) {
			this.$api.examineTask({ main_body_id: 1, task_id: this.task_id, progress: progress, feedback: this.returnVal }, function (res) {
				that.$common.errorToShow(res.msg);
			});
		},
		// 确认驳回
		isOk(progress) {
			if (this.returnVal == '') {
				that.$common.errorToShow('请填写描述');
			} else {
				// console.log(progress, 999999);
				this.examineTask(progress);
			}
		},
		// 文物资产项
		AssetBtn(item) {
			this.assetDetails = item;
			this.describeVal = item.describeVal;
		},

		// 图片预览
		clickImg(item, i) {
			console.log(item, 66);
			console.log(i, 77);
			let img = [];
			item.forEach((item) => {
				img.push(item.url);
			});

			uni.previewImage({
				urls: img, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: img[i] // 当前显示图片的http链接，默认是第一个
			});
		},
		// 加载字体
		loadGlobalFont() {
			try {
				uni.loadFontFace({
					family: 'MyGlobalFont', // 自定义字体名
					source: 'url("https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/songTi.ttf")',
					success() {
						console.log('全局字体加载成功');
					}
				});
			} catch (error) {
				console.error('全局字体加载异常', error);
			}
		},
		close() {
			this.show = false;
			this.showPicker = false;
			this.normal = false;
			this.AssetShow = false;
			this.returnShow = false;
		}
	}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_bgt.png');
	background-size: 100% 100%;
	/* background-attachment: fixed; */
	background-repeat: repeat-y;
	min-height: 100%;
	height: auto;
	font-family: 'MyGlobalFont';
}
.top_box {
	padding: 20rpx;
	width: 100%;
	margin: auto;
	display: flex;
	border: 2rpx solid #ebc9a9;
	background-color: #fefdfb;
}
.u-textarea__field.data-v-09988a29 {
	color: #000000 !important;
}
.u-textarea.data-v-09988a29 {
	background-color: #f1bd8e !important;
}
.active {
	color: #fae5bb !important;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/cy_tit1.png') !important;
}
/deep/.u-textarea.data-v-09988a29 {
	background-color: #f1bd8e !important;
	border-radius: 0;
}
/deep/.u-textarea.data-v-09988a29 {
	background-color: #f1bd8e !important;
}
.tab_active {
	background-color: #b75830 !important;
}
.filter-box {
	padding: 30upx 50upx 0 50upx;
	margin-bottom: 30upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.filter-box .b-item {
	width: 278rpx;
	height: 80rpx;
	font-size: 30rpx;
	color: #ffefc4;
	font-weight: 600;
	text-align: center;
	line-height: 80rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/cy_tit2.png');
	background-size: 100% 100%;
}
.map_tit {
	display: flex;
	align-items: center;
	margin-left: 125rpx;
	margin-top: 50rpx;
	font-size: 32rpx;
	font-weight: 900;
	line-height: 52rpx;
	color: #444444;
}
.map_tit2 {
	position: relative;
	top: -176rpx;
}
.jk_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 90%;
	margin: auto;
}
.img {
	width: 100%;
	height: 100%;
}
.jk_item {
	width: 310rpx;
	height: 230rpx;
	margin-top: 40rpx;
}
.zk_box {
	width: 90%;
	margin: auto;
	margin-top: 30rpx;
}
.zk_item {
	/* justify-content: space-between;
	display: flex; */
	font-size: 30rpx;
	font-weight: 600;
	margin-top: 40rpx;
}
.zk_item2 {
	display: block !important;
	font-size: 30rpx;
	font-weight: 600;
	margin-top: 40rpx;
}

.tjxc {
	width: 230rpx;
	height: 82rpx;

	font-size: 30rpx;
	font-weight: 600;
	color: #fef3e1;
	line-height: 82rpx;
	text-align: center;
	background-color: #c87d5a;
}
.pop_box {
	width: 635rpx;
	padding: 80rpx 40rpx 40rpx 40rpx;
	font-size: 30rpx;
	font-weight: 600;
}
.pop_item {
	height: 60rpx;
	border-radius: 10rpx;
	text-align: center;
	padding: 10rpx;
	border: 2rpx solid #d67b54;
}
.lx {
	display: flex;
	justify-content: space-between;
	width: 515rpx;
	height: 70rpx;
	margin: auto;
	margin-top: 30rpx;
	border: 2rpx solid #d67b54;
	border-radius: 10rpx;
	line-height: 70rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
}
.fzdj {
	width: 92%;
	height: 40px;
	background-color: transparent;
	position: absolute;
	z-index: 1;
}
.tit_box {
	width: 530rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40rpx;
}
.tit_box2 {
	width: 630rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 40rpx;
	margin-left: 80rpx;
}
.zque {
	width: 260rpx;
	height: 70rpx;
	margin: auto;
	text-align: center;
	line-height: 70rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
}
.xxxc_box {
	/* height: 400rpx; */
	margin: auto;
	padding: 50rpx 70rpx 80rpx 90rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xxxc_top.png');
	background-size: 100% 100%;
}
.wwmc {
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.wwmc_left {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 250rpx;
	height: 60rpx;
	line-height: 60rpx;
	background-color: #f1bd8e;
	border-radius: 10rpx;
	font-size: 30rpx;
}
.wwmc_right {
	width: 250rpx;
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;
	background-color: #f1bd8e;
	border-radius: 6rpx;
	font-size: 30rpx;
}
.wwmc_right2 {
	width: 250rpx;
	height: 60rpx;
	text-align: center;
	/* line-height: 60rpx; */
	background-color: #f1bd8e;
	border-radius: 6rpx;
	font-size: 30rpx;
}
.bt_box {
	display: flex;
	margin-top: 100rpx;
	justify-content: space-around;
}
.bt1 {
	width: 220rpx;
	height: 78rpx;
	border: 1px solid #312520;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: black;
}
.bt2 {
	width: 220rpx;
	height: 78rpx;
	background: #ca5642;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: #ffffff;
}
</style>